diff --git a/src/components/commonHead.astro b/src/components/commonHead.astro
index 3114b09..72ca5a2 100644
--- a/src/components/commonHead.astro
+++ b/src/components/commonHead.astro
@@ -5,30 +5,26 @@ const { title } = Astro.props;
 ---
 
 <head>
-        <meta charset="utf-8" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-        <meta name="viewport" content="width=device-width" />
-        <meta name="generator" content={Astro.generator} />
-        <title>{title}</title>
-        <ClientRouter />
-        <script>
-            // Function to update theme
-            function updateTheme() {
-                if (
-                    localStorage.theme === "dark" ||
-                    (!("theme" in localStorage) &&
-                        window.matchMedia("(prefers-color-scheme: dark)").matches)
-                ) {
-                    document.documentElement.classList.add("dark");
-                } else {
-                    document.documentElement.classList.remove("dark");
-                }
-            }
-
-            // Run on page load
-            updateTheme();
-
-            // Listen for system theme changes
-            window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", updateTheme);
-        </script>
-    </head>
+  <meta charset="utf-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width" />
+  <meta name="generator" content={Astro.generator} />
+  <title>{title}</title>
+  <ClientRouter />
+  <script is:inline>
+    const theme = localStorage.theme ?? "dark";
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    }
+  </script>
+  <script is:inline>
+    document.addEventListener("astro:after-swap", () => {
+      const theme = localStorage.theme ?? "dark";
+      if (theme === "dark") {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    });
+  </script>
+</head>
diff --git a/src/components/header.astro b/src/components/header.astro
index 9de8bc2..96cb72f 100644
--- a/src/components/header.astro
+++ b/src/components/header.astro
@@ -3,26 +3,36 @@ import { Moon, Sun } from "@lucide/astro";
 ---
 
 <header class="m-3 flex justify-end items-center">
-    <!-- <h1>dustycode</h1> -->
-    <button type="button" id="theme-selector" class="p-2 rounded-lg hover:scale-105 transition-all ease-in-out duration-300 hover:cursor-pointer">
-        <span class="sr-only">
-            Enable <span class="dark:hidden">light</span><span class="hidden dark:inline">dark</span> mode
-        </span>
-        <Moon class="hidden dark:block w-6 h-6" />
-        <Sun class="block dark:hidden w-6 h-6" />
-    </button>
+  <!-- <h1>dustycode</h1> -->
+  <button
+    type="button"
+    id="theme-selector"
+    class="p-2 rounded-lg hover:scale-105 transition-all ease-in-out duration-300 hover:cursor-pointer"
+  >
+    <span class="sr-only">
+      Enable <span class="dark:hidden">light</span><span
+        class="hidden dark:inline">dark</span
+      > mode
+    </span>
+    <Moon class="hidden dark:block w-6 h-6" />
+    <Sun class="block dark:hidden w-6 h-6" />
+  </button>
 </header>
 
 <script>
+  function initTheme() {
     const themeSelector = document.getElementById("theme-selector");
-    
+
     themeSelector?.addEventListener("click", () => {
-        if (document.documentElement.classList.contains("dark")) {
-            localStorage.theme = "light";
-            document.documentElement.classList.remove("dark");
-        } else {
-            localStorage.theme = "dark";
-            document.documentElement.classList.add("dark");
-        }
+      if (document.documentElement.classList.contains("dark")) {
+        localStorage.theme = "light";
+        document.documentElement.classList.remove("dark");
+      } else {
+        localStorage.theme = "dark";
+        document.documentElement.classList.add("dark");
+      }
     });
+  }
+
+  document.addEventListener("astro:page-load", initTheme);
 </script>
diff --git a/src/components/hooks/yooper.ts b/src/components/hooks/yooper.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/lastfm.tsx b/src/components/lastfm.tsx
index c5391d8..c724712 100644
--- a/src/components/lastfm.tsx
+++ b/src/components/lastfm.tsx
@@ -1,24 +1,8 @@
+import { useLastFm } from '@/hooks/use-lastfm.ts';
 import clsx from 'clsx';
-import { useEffect, useState } from "react";
-import type { TrackResponse } from '../types/lastfm.ts';
 
 export default function LastFM() {
-  const [track, setTrack] = useState<TrackResponse>();
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    fetch('/api/lastfm/recentTracks')
-      .then(res => res.json())
-      .then(data => {
-        setTrack(data);
-        setLoading(false);
-      })
-      .catch(err => {
-        setError(err.message);
-        setLoading(false);
-      })
-  }, [])
+  const { track, loading, error } = useLastFm();
 
   if (loading) return (
     <div className="surface">
diff --git a/src/components/nav.astro b/src/components/nav.astro
index 5b657fe..9b836bc 100644
--- a/src/components/nav.astro
+++ b/src/components/nav.astro
@@ -18,7 +18,12 @@ const { className } = Astro.props;
       <ul>
         {
           links.map((link) => (
-            <li>
+            <li
+              class:list={[
+                pathname === link.href && "bg-bg-dim",
+                "rounded-md p-2",
+              ]}
+            >
               <a
                 class:list={[
                   "text-green flex gap-2 items-center",
diff --git a/src/components/whoami.astro b/src/components/whoami.astro
index a4cef7b..7ebfe42 100644
--- a/src/components/whoami.astro
+++ b/src/components/whoami.astro
@@ -5,9 +5,9 @@ import me from "../assets/me.jpeg";
 
 <div class="border border-solid rounded-lg p-6 surface">
   <div class="flex flex-col md:flex-row gap-6 items-center md:items-start">
-    <div class="flex-1 space-y-2">
+    <div class="flex-1 space-y-2 text-lg">
       <h1 class="text-5xl font-bold">Hi, I'm Dustin!</h1>
-      <p class="text-lg">
+      <p>
         I'm a senior full stack software engineer from Michigan, currently
         working on some cool stuff at Zenimax Online Studios!
       </p>
diff --git a/src/components/yooperButton.tsx b/src/components/yooperButton.tsx
deleted file mode 100644
index 7a274da..0000000
--- a/src/components/yooperButton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useState } from "react"
-
-export function YooperButton() {
-
-  const [isPlaying, setIsPlaying] = useState(false);
-
-
-  return (
-    <div className="inline">
-      <button
-        className="text-blue hover:cursor-pointer"
-        onClick={() => {
-          setIsPlaying(true);
-        }}
-      >Upper Peninsula</button
-      >
-      <audio id="audioPlayer" preload="auto">
-        <source
-          src="https://ia801608.us.archive.org/31/items/gl_20230503/02%20The%20Wreck%20of%20the%20Edmund%20Fitzgerald.mp3"
-          type="audio/mp3"
-        />
-      </audio>
-    </div>
-  )
-}
diff --git a/src/hooks/use-lastfm.ts b/src/hooks/use-lastfm.ts
new file mode 100644
index 0000000..48a0dd8
--- /dev/null
+++ b/src/hooks/use-lastfm.ts
@@ -0,0 +1,26 @@
+import type { TrackResponse } from "@/types/lastfm";
+import { useEffect, useState } from "react";
+
+export function useLastFm() {
+  const [track, setTrack] = useState<TrackResponse>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetch('/api/lastfm/recentTracks')
+      .then(res => res.json())
+      .then(data => {
+        setTrack(data);
+        setLoading(false);
+      })
+      .catch(err => {
+        setError(err.message);
+        setLoading(false);
+      })
+  }, [])
+
+
+  return {
+    track, loading, error
+  }
+}
diff --git a/src/pages/work.astro b/src/pages/work.astro
index 2475960..8a76de0 100644
--- a/src/pages/work.astro
+++ b/src/pages/work.astro
@@ -49,7 +49,7 @@ const jobs = [
             <h2 class="text-2xl">{job.title}</h2>
             <div class="text-lg flex gap-2 items-center">
               {job.company}
-              <span class="text-gray-0 text-sm">
+              <span class="text-gray-2 text-sm">
                 {job.startYear} - {job.endYear}
               </span>
             </div>