diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c2e338c..418d7e6 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -31,8 +31,16 @@
             property="twitter:image"
             content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png"
         />
+        <link rel="preconnect" href="https://fonts.googleapis.com" /><link
+            rel="preconnect"
+            href="https://fonts.gstatic.com"
+            crossorigin
+        /><link
+            href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;500;700;900&display=swap"
+            rel="stylesheet"
+        />
     </head>
-    <body class="bg-dark overflow-x-hidden font-['Poppins']">
+    <body class="bg-dark overflow-x-hidden font-['Source Code Pro']">
         <slot />
     </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6993d74..78c4b4f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,8 +4,27 @@ import { Image, Picture } from "@astrojs/image/components";
 ---
 
 <Layout title="Welcome to Astro.">
+    <header>
+        <nav
+            class="text-white font-light text-2xl flex items-center justify-center"
+        >
+            <ul class="flex w-96 justify-evenly py-3">
+                <li>
+                    <a href="/" class="hover:text-[#fbc119] hover:underline"
+                        >Projects</a
+                    >
+                </li>
+                <li>
+                    <a
+                        href="/about"
+                        class="hover:text-[#fbc119] hover:underline">Docs</a
+                    >
+                </li>
+            </ul>
+        </nav>
+    </header>
     <main
-        class="h-screen flex justify-center items-center pointer-events-none cursor-none"
+        class="mt-64 flex justify-center items-center flex-col pointer-events-none cursor-none"
     >
         <Image
             src={import("../public/logo.png")}
@@ -13,6 +32,6 @@ import { Image, Picture } from "@astrojs/image/components";
             height={200}
             alt="descriptive text"
         />
-        <h1>xHyroM</h1>
+        <h1 class="text-white font-extrabold text-6xl">xHyroM</h1>
     </main>
 </Layout>
