diff --git a/public/fonts/ClimateCrisis-Regular.ttf b/public/fonts/ClimateCrisis-Regular.ttf
new file mode 100644
index 0000000..9f6cdd4
Binary files /dev/null and b/public/fonts/ClimateCrisis-Regular.ttf differ
diff --git a/src/app/_components/h1.tsx b/src/app/_components/h1.tsx
index 20a0d9f..7ef4fa7 100644
--- a/src/app/_components/h1.tsx
+++ b/src/app/_components/h1.tsx
@@ -1,6 +1,14 @@
-export function TypographyH1({ children }: { children: React.ReactNode }) {
+export function TypographyH1({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+    <h1
+      className={`scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl ${className}`}
+    >
       {children}
     </h1>
   );
diff --git a/src/app/_components/h2.tsx b/src/app/_components/h2.tsx
index aa13fdf..172ed1e 100644
--- a/src/app/_components/h2.tsx
+++ b/src/app/_components/h2.tsx
@@ -1,12 +1,12 @@
-export function TypographyH2({
-  children,
-  className,
-}: {
+export function TypographyH2(props: {
   children: React.ReactNode;
   className?: string;
+  [key: string]: any;
 }) {
+  const { children, className, ...otherProps } = props;
   return (
     <h2
+      {...otherProps}
       className={`scroll-m-20 border-b border-none pb-2 text-3xl font-semibold tracking-tight first:mt-0 ${className}`}
     >
       {children}
diff --git a/src/app/_components/showcase.tsx b/src/app/_components/showcase.tsx
index e584ed4..ecc9d5e 100644
--- a/src/app/_components/showcase.tsx
+++ b/src/app/_components/showcase.tsx
@@ -6,6 +6,7 @@ import AlbumShowcase from "./album-showcase";
 import ArtistShowcase from "./artist-showcase";
 import UserShowcase from "./user-showcase";
 import { TypographyH2 } from "./h2";
+import { TypographyH1 } from "./h1";
 
 export function Showcase({
   userData,
@@ -29,7 +30,9 @@ export function Showcase({
         <Switch isChecked={spookify} setIsChecked={setSpookify} />
       </div>
       <UserShowcase spookify={spookify} {...userData} />
-      <TypographyH2 className="justify-start">Tracks by album</TypographyH2>
+      <TypographyH1 className="mb-2 mt-8 self-baseline text-3xl lg:text-4xl">
+        Tracks by album
+      </TypographyH1>
       {Object.values(tracksByAlbum)
         .sort((a, b) => b.position - a.position)
         .map((album, index) => {
@@ -44,7 +47,9 @@ export function Showcase({
             />
           );
         })}
-      <h3>Artists images</h3>
+      <TypographyH1 className="mb-2 mt-8 self-baseline text-3xl lg:text-4xl">
+        Artists
+      </TypographyH1>
       <div
         style={{
           display: "flex",
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8b37e71..e827180 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "ClimateCrisis";
+  src: url("../../public/fonts/ClimateCrisis-Regular.ttf");
+}
+
 .external-link {
   color: #5bc0eb; /* Light blue color */
   text-decoration: none;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1a15fe7..d2eb9cd 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -8,6 +8,7 @@ export default {
     extend: {
       fontFamily: {
         sans: ["var(--font-geist-sans)", ...fontFamily.sans],
+        climateCrisis: ["ClimateCrisis", ...fontFamily.sans],
       },
     },
   },