diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index aac6db6..c0c5286 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,11 +2,11 @@
 
 ---
 
-<div class="font-thin text-sm flex flex-col items-center my-10">
+<footer class="font-thin text-sm flex flex-col items-center my-10">
   <div class="font-display">
     Copyright (C) {new Date().getFullYear().toString()} James Hunter Deloche.
   </div>
   <!-- <a class="underline" href="https://git.noahsw.xyz/noah/jhunterdeloche.com" -->
   <!--   >View the Source</a -->
   <!-- > -->
-</div>
+</footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..e0e674f
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,12 @@
+---
+import Nav from "../components/Nav.tsx";
+---
+
+<header class="my-10 w-fit mx-auto">
+  <h1 class="text-4xl md:text-6xl font-bold font-display text-center">
+    J. Hunter DeLoche.
+  </h1>
+  <div transition:persist>
+    <Nav client:load />
+  </div>
+</header>
diff --git a/src/components/Metadata.astro b/src/components/Metadata.astro
new file mode 100644
index 0000000..c6ce0d4
--- /dev/null
+++ b/src/components/Metadata.astro
@@ -0,0 +1,42 @@
+---
+interface Props {
+  title: string;
+  description: string;
+}
+
+const domain = "jhunterdeloche.com";
+const author = "J. Hunter DeLoche";
+const site_name = "J. Hunter DeLoche's Website";
+
+const image_link = "";
+const image_desc = "";
+
+const { title, description }: Props = Astro.props;
+---
+
+<meta name="robots" content="index, follow" />
+<meta name="description" content={description} />
+<meta name="author" content={author} />
+
+<meta property="og:site_name" content={site_name} />
+<meta name="twitter:domain" property="twitter:domain" content={domain} />
+<meta name="og:title" property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta
+  name="twitter:description"
+  property="twitter:description"
+  content={description}
+/>
+<meta name="og:image" content={image_link} />
+
+<meta property="twitter:card" content={image_link} />
+<meta
+  name="twitter:image:src"
+  property="twitter:image:src"
+  content={image_link}
+/>
+<meta name="twitter:image" property="twitter:image" content={image_link} />
+<meta name="og:image:alt" property="og:image:alt" content={image_desc} />
+
+<meta property="og:url" content={domain} />
+<meta property="og:type" content="website" />
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index fc947f1..9c848a3 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -24,27 +24,23 @@ const Nav = () => {
 
 
   return (
-    <div class="my-10 w-fit mx-auto">
-      <h1 class="text-4xl md:text-6xl font-bold font-display text-center">J. Hunter DeLoche.</h1>
-      <nav class="pt-4 w-full flex flex-row justify-around">
-        <For each={pages}>{
-          (page, _) =>
-            <a class={
-              (page.path == currentPage() || page.path + "/" == currentPage()) ?
-                inactiveClasses + " " + activeClasses :
-                inactiveClasses
-            }
-              href={page.path}
-              onClick={() => {
-                console.log("link clicked; setting cur page to " + page.path);
-                setCurrentPage(page.path);
-              }}
-            >
-              {page.name}
-            </a>
-        }</For>
-      </nav>
-    </div>
+    <nav class="pt-4 w-full flex flex-row justify-around">
+      <For each={pages}>{
+        (page, _) =>
+          <a class={
+            (page.path == currentPage() || page.path + "/" == currentPage()) ?
+              inactiveClasses + " " + activeClasses :
+              inactiveClasses
+          }
+            href={page.path}
+            onClick={() => {
+              setCurrentPage(page.path);
+            }}
+          >
+            {page.name}
+          </a>
+      }</For>
+    </nav>
   );
 };
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index eb5d58f..ea4b21a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,42 +1,43 @@
 ---
-import Nav from "../components/Nav.tsx";
 import Footer from "../components/Footer.astro";
+import Header from "../components/Header.astro";
+import Metadata from "../components/Metadata.astro";
 import { ViewTransitions } from "astro:transitions";
 
 interface Props {
   title: string;
+  description: string;
 }
 
-const { title } = Astro.props;
+const { title, description }: Props = Astro.props;
 ---
 
 <!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <Metadata title={title} description={description} />
+
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="preconnect" href="https://fonts.bunny.net" />
     <link
       href="https://fonts.bunny.net/css?family=kanit:200,300|old-standard-tt:400,700"
       rel="stylesheet"
     />
-    <meta name="generator" content={Astro.generator} />
+
     <title>{title}</title>
+
     <ViewTransitions />
   </head>
   <body class="font-body bg-background text-foreground">
     <div class="w-11/12 md:w-2/3 mx-auto">
-      <header transition:persist>
-        <Nav client:load />
-      </header>
+      <Header />
       <main transition:animate="fade">
         <slot />
       </main>
-      <footer>
-        <Footer />
-      </footer>
+      <Footer />
     </div>
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c217b71..e6ae62a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,6 +2,6 @@
 import Layout from "../layouts/Layout.astro";
 ---
 
-<Layout title="J. Hunter DeLoche | About">
+<Layout title="J. Hunter DeLoche | About" description="about">
   <div class="">This is the about page</div>
 </Layout>
diff --git a/src/pages/music.astro b/src/pages/music.astro
index 7998f56..10d6a78 100644
--- a/src/pages/music.astro
+++ b/src/pages/music.astro
@@ -2,6 +2,6 @@
 import Layout from "../layouts/Layout.astro";
 ---
 
-<Layout title="J. Hunter DeLoche | Music">
+<Layout title="J. Hunter DeLoche | Music" description="music">
   <div class="">this is the music page</div>
 </Layout>
diff --git a/src/pages/writing.astro b/src/pages/writing.astro
index c649122..30ca0b6 100644
--- a/src/pages/writing.astro
+++ b/src/pages/writing.astro
@@ -2,6 +2,6 @@
 import Layout from "../layouts/Layout.astro";
 ---
 
-<Layout title="J. Hunter DeLoche | Writing">
+<Layout title="J. Hunter DeLoche | Writing" description="writing">
   <div class="">This is the writing page</div>
 </Layout>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 42670f2..1e04b0e 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -17,5 +17,8 @@ export default {
       },
     },
   },
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   plugins: [],
 }