diff --git a/package.json b/package.json
index 5adfcd7..9381274 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/tailwind": "^5.1.3",
     "@cloudflare/workers-types": "^4.20241230.0",
+    "@fontsource/fira-sans": "^5.1.1",
     "@fontsource/ubuntu": "^5.1.0",
     "@iconify-json/mdi": "^1.2.1",
     "@iconify-json/simple-icons": "^1.2.14",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cdc694e..d44cd72 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@cloudflare/workers-types':
         specifier: ^4.20241230.0
         version: 4.20241230.0
+      '@fontsource/fira-sans':
+        specifier: ^5.1.1
+        version: 5.1.1
       '@fontsource/ubuntu':
         specifier: ^5.1.0
         version: 5.1.0
@@ -961,6 +964,9 @@ packages:
     resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
     engines: {node: '>=14'}
 
+  '@fontsource/fira-sans@5.1.1':
+    resolution: {integrity: sha512-LdbPwcMEADFjbcMx5sdPcyLi0NnEzP34YO+4d2eOeIKjCu1SyJiG/bBz5K07qm4pyhh2cQveifhFrG7gQDG9wQ==}
+
   '@fontsource/ubuntu@5.1.0':
     resolution: {integrity: sha512-0XG/HrFsfP1q3phf4QN8IO7tetd0zOZKHZSHcTnBuVoQedoo1wS/hXxY2FMZuqoG+mVfrXh+Q614MDVmQPJq2w==}
 
@@ -4157,6 +4163,8 @@ snapshots:
 
   '@fastify/busboy@2.1.1': {}
 
+  '@fontsource/fira-sans@5.1.1': {}
+
   '@fontsource/ubuntu@5.1.0': {}
 
   '@iconify-json/mdi@1.2.1':
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 8a4a244..9ad5d9b 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -4,6 +4,7 @@
 import "../styles/global.css";
 import ubuntuRegularWoff2 from "@fontsource/ubuntu/files/ubuntu-latin-400-normal.woff2?url";
 import ubuntuBoldWoff2 from "@fontsource/ubuntu/files/ubuntu-latin-700-normal.woff2?url";
+import "@fontsource/fira-sans";
 
 interface Props {
   title: string;
diff --git a/src/components/NavMenu.astro b/src/components/NavMenu.astro
index 472bfeb..eeb971c 100644
--- a/src/components/NavMenu.astro
+++ b/src/components/NavMenu.astro
@@ -17,7 +17,7 @@ import HeaderLink from "./HeaderLink.astro";
   </nav>
 </header>
 
-<button id="menu" class="lg:hidden relative w-[30px] h-[30px]">
+<button id="nav-menu" class="lg:hidden relative w-[30px] h-[30px]">
   <Icon
     name="mdi:menu"
     id="iconMenu"
@@ -33,7 +33,7 @@ import HeaderLink from "./HeaderLink.astro";
 </button>
 <header
   id="drawer"
-  class="fixed top-16 right-0 h-full bg-neutral-50 shadow dark:bg-gray-700 p-6 rounded w-54 transform translate-x-full transition-transform duration-300 ease-in-out"
+  class="fixed z-50 top-14 right-0 h-full bg-neutral-50 shadow dark:bg-gray-700 p-6 rounded w-54 transform translate-x-full transition-transform duration-300 ease-in-out"
 >
   <div class="flex flex-col gap-4">
     <HeaderLink href="/">Home</HeaderLink>
@@ -45,7 +45,7 @@ import HeaderLink from "./HeaderLink.astro";
 </header>
 
 <script>
-  const menu = document.getElementById("menu");
+  const menu = document.getElementById("nav-menu");
   const drawer = document.getElementById("drawer");
 
   function toggle() {
@@ -68,10 +68,15 @@ import HeaderLink from "./HeaderLink.astro";
   document.addEventListener("click", (event) => {
     console.log("click outside");
     if (
-      !drawer.classList.contains("hidden") &&
+      !drawer.classList.contains("translate-x-full") &&
       !drawer.contains(event.target) &&
       !menu.contains(event.target)
     ) {
+      console.log(
+        !drawer.classList.contains("translate-x-full"),
+        !drawer.contains(event.target),
+        !menu.contains(event.target),
+      );
       toggle();
     }
   });
diff --git a/src/components/verification/DataTable.astro b/src/components/verification/DataTable.astro
index 58972cb..b5a4c7d 100644
--- a/src/components/verification/DataTable.astro
+++ b/src/components/verification/DataTable.astro
@@ -108,7 +108,7 @@ const { cv } = Astro.props;
       </span>
     </summary>
 
-    <div class="p-6 pt-6 space-y-6">
+    <div class="p-4 sm:p-6 pt-6 space-y-6">
       <div>
         <h4 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-200">
           1. Verify SHA256 Hash
@@ -136,27 +136,36 @@ const { cv } = Astro.props;
             >
           </li>
           <li>
-            Import the key into your keyring with
-            <pre
-              class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono sm:ml-6 mb-2">gpg --import ~/Downloads/pub.key</pre>
-
-            <li>
-              Download the above PGP signature by clicking <button
-                class="text-blue-500 dark:text-blue-400 hover:underline"
-                id="download-pgp"
-                >here
-              </button>
-            </li>
-            <li>Run the following command:</li>
+            Import the key into your keyring with<br />
+            <code
+              class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono sm:ml-6 mb-2 break-all"
+              >gpg --import ~/Downloads/pub.key</code
+            >
+          </li>
+
+          <li>
+            Download the above PGP signature by clicking <button
+              class="text-blue-500 dark:text-blue-400 hover:underline"
+              id="download-pgp"
+              >here
+            </button>
+          </li>
+          <li>
+            Run the following command:<br />
+            <code
+              class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono sm:ml-6"
+              >gpg --verify signature.asc cv.pdf</code
+            >
           </li>
-          <pre
-            class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono sm:ml-6">gpg --verify signature.asc cv.pdf</pre>
-          <p class="text-gray-600 dark:text-gray-400 mt-2">
-            If the verification is successful, GPG will indicate so.
-            <pre
-              class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-xs font-mono mt-2">gpg: Good signature from &quot;Alexander Daichendt &lt;alexander@daichendt.one&gt;&quot; [ultimate]</pre>
-          </p>
         </ol>
+        <p class="text-gray-600 dark:text-gray-400 mt-2">
+          If the verification is successful, GPG will indicate so.<br />
+          <code
+            class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-xs font-mono mt-2 break-all"
+            >gpg: Good signature from &quot;Alexander Daichendt
+            &lt;alexander@daichendt.one&gt;&quot; [ultimate]</code
+          >
+        </p>
       </div>
     </div>
   </details>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 80cbd2c..f36ae67 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -34,7 +34,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
   </head>
   <body class="bg-white dark:bg-gray-900 text-black dark:text-white">
     <!-- Mobile layout -->
-    <div class="lg:hidden flex flex-col min-h-screen p-4">
+    <div class="lg:hidden flex flex-col min-h-screen p-2 sm:p-4">
       <div class="flex justify-between items-center mb-4">
         <h2 class="font-bold text-lg mb-0">
           <a href="/">{SITE_TITLE}</a>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 6f72050..54919ff 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -4,30 +4,29 @@ import FormattedDate from "../../components/FormattedDate.astro";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
 const posts = (await getCollection("blog")).sort(
-    (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
 );
 ---
 
 <BaseLayout>
-    <section class="max-w-4xl mx-auto">
-        <ul class="">
-            {
-                posts.map((post) => (
-                    <li class="hover:dark:bg-gray-700 hover:bg-gray-100 p-2 rounded">
-                        <a
-                            href={`/blog/${post.id}`}
-                            class="grid grid-cols-[2fr,1fr] gap-4 items-center"
-                        >
-                            <h6 class="text-lg font-medium">
-                                {post.data.title}
-                            </h6>
-                            <span class="date text-right text-gray-600 text-sm">
-                                <FormattedDate date={post.data.pubDate} />
-                            </span>
-                        </a>
-                    </li>
-                ))
-            }
-        </ul>
-    </section>
+  <h1 class="mb-16">Blog</h1>
+  <section class="max-w-4xl mx-auto">
+    <ul class="">
+      {
+        posts.map((post) => (
+          <li class="hover:dark:bg-gray-700 hover:bg-gray-100 p-2 rounded">
+            <a
+              href={`/blog/${post.id}`}
+              class="grid grid-cols-[2fr,1fr] gap-4 items-center"
+            >
+              <h6 class="text-lg font-medium mb-0">{post.data.title}</h6>
+              <span class="date text-right text-gray-600 text-sm">
+                <FormattedDate date={post.data.pubDate} />
+              </span>
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </section>
 </BaseLayout>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 663b14f..21dd7b1 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -4,68 +4,70 @@ import { Icon } from "astro-icon/components";
 ---
 
 <BaseLayout title="Contact">
-    <ul class="space-y-2">
-        <li class="flex items-center space-x-3">
-            <span class="flex items-center">
-                <Icon name="mdi:email" class="w-6 h-6" />
-                <span class="ml-2 font-medium">E-Mail:</span>
-            </span>
-            <a
-                href="mailto:me@daichendt.one"
-                class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
-                target="_blank"
-                rel="nofollow noreferrer noopener"
-            >
-                me@daichendt.one
-            </a>
-            <a
-                href="/pub.key"
-                class="ml-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
-                target="_blank"
-                rel="nofollow noreferrer noopener"
-            >
-                <Icon name="mdi:key" class="w-4 h-4 inline" />
-                PGP key
-            </a>
-        </li>
-        <li class="flex items-center space-x-3">
-            <span class="flex items-center">
-                <Icon name="mdi:github" class="w-6 h-6" />
-                <span class="ml-2 font-medium">Github:</span>
-            </span>
-            <a
-                href="https://github.com/AlexDaichendt"
-                class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
-                target="_blank"
-                rel="nofollow noreferrer noopener"
-            >
-                AlexDaichendt
-            </a>
-        </li>
+  <h1 class="mb-16">Contact</h1>
 
-        <li class="flex items-center space-x-3">
-            <span class="flex items-center">
-                <Icon name="simple-icons:element" class="w-6 h-6" />
-                <span class="ml-2 font-medium">Element:</span>
-            </span>
-            <span class="text-gray-700 dark:text-gray-300">
-                @alexdaichendt:matrix.org
-            </span>
-        </li>
+  <ul class="space-y-2">
+    <li class="flex items-center space-x-3">
+      <span class="flex items-center">
+        <Icon name="mdi:email" class="w-6 h-6" />
+        <span class="ml-2 font-medium">E-Mail:</span>
+      </span>
+      <a
+        href="mailto:me@daichendt.one"
+        class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+        target="_blank"
+        rel="nofollow noreferrer noopener"
+      >
+        me@daichendt.one
+      </a>
+      <a
+        href="/pub.key"
+        class="ml-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
+        target="_blank"
+        rel="nofollow noreferrer noopener"
+      >
+        <Icon name="mdi:key" class="w-4 h-4 inline" />
+        PGP key
+      </a>
+    </li>
+    <li class="flex items-center space-x-3">
+      <span class="flex items-center">
+        <Icon name="mdi:github" class="w-6 h-6" />
+        <span class="ml-2 font-medium">Github:</span>
+      </span>
+      <a
+        href="https://github.com/AlexDaichendt"
+        class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+        target="_blank"
+        rel="nofollow noreferrer noopener"
+      >
+        AlexDaichendt
+      </a>
+    </li>
 
-        <li class="flex items-center space-x-3">
-            <span class="flex items-center">
-                <Icon name="simple-icons:bluesky" class="w-6 h-6" />
-                <span class="ml-2 font-medium">Bluesky:</span>
-            </span>
-            <a
-                href="https://bsky.app/profile/alexdaichendt.bsky.social"
-                class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
-                target="_blank"
-                rel="nofollow noreferrer noopener"
-            >
-                @alexdaichendt.bsky.social
-            </a>
-        </li>
-    </ul>
+    <li class="flex items-center space-x-3">
+      <span class="flex items-center">
+        <Icon name="simple-icons:element" class="w-6 h-6" />
+        <span class="ml-2 font-medium">Element:</span>
+      </span>
+      <span class="text-gray-700 dark:text-gray-300">
+        @alexdaichendt:matrix.org
+      </span>
+    </li>
+
+    <li class="flex items-center space-x-3">
+      <span class="flex items-center">
+        <Icon name="simple-icons:bluesky" class="w-6 h-6" />
+        <span class="ml-2 font-medium">Bluesky:</span>
+      </span>
+      <a
+        href="https://bsky.app/profile/alexdaichendt.bsky.social"
+        class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
+        target="_blank"
+        rel="nofollow noreferrer noopener"
+      >
+        @alexdaichendt.bsky.social
+      </a>
+    </li>
+  </ul>
 </BaseLayout>
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index c2d94c3..dae237a 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -167,6 +167,8 @@ const getCardStyle = (company?: string) => {
 ---
 
 <BaseLayout title="Projects">
+  <h1 class="mb-16">Projects</h1>
+
   <p>
     Here are some of the projects I have worked on in the past. They are sorted
     by my personal rating of relevancy. Projects done for a company are marked
diff --git a/src/styles/global.css b/src/styles/global.css
index c6fe349..43cfc1f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -5,12 +5,15 @@
 @layer base {
   h1 {
     @apply text-h1-mobile md:text-h1;
+    font-family: "Fira Sans", sans-serif;
   }
   h2 {
     @apply text-h2-mobile md:text-h2;
+    font-family: "Fira Sans", sans-serif;
   }
   h3 {
     @apply text-h3-mobile md:text-h3;
+    font-family: "Fira Sans", sans-serif;
   }
   h4 {
     @apply text-h4-mobile md:text-h4;