diff --git a/themes/dreamcast/layouts/partials/head.html b/themes/dreamcast/layouts/partials/head.html
index 8758933..1e9739a 100644
--- a/themes/dreamcast/layouts/partials/head.html
+++ b/themes/dreamcast/layouts/partials/head.html
@@ -12,6 +12,7 @@
     <link rel="icon" type="image/png" href="/favicon.png">
     <link rel="webmention" href="{{ .Site.Params.Webmentions }}" />
     <link rel="pingback" href="{{ .Site.Params.Pingbacks }}" />
+    <script src="/js/main.js" defer></script>
     {{ range .AlternativeOutputFormats -}}
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
 {{ end -}}
diff --git a/themes/dreamcast/static/css/main.css b/themes/dreamcast/static/css/main.css
index ecfacd6..273559e 100644
--- a/themes/dreamcast/static/css/main.css
+++ b/themes/dreamcast/static/css/main.css
@@ -181,71 +181,135 @@ header .profile img {
 }
 
 nav {
-    /* From https://css.glass */
-    background: rgba(255, 255, 255, 0.13);
-    border-radius: 16px;
-    box-shadow: 3px 3px 5px var(--shadow);
-    backdrop-filter: blur(5px);
-    -webkit-backdrop-filter: blur(5px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    font-family: 'Noto Sans', sans-serif;
-    font-weight: 500;
-    text-align: center;
-    padding: 0;
-    border-radius: 15px;
-    margin-bottom: 10px;
+  /* From https://css.glass */
+  background: rgba(255, 255, 255, 0.13);
+  border-radius: 16px;
+  box-shadow: 3px 3px 5px var(--shadow);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  text-align: center;
+  padding: 0;
+  border-radius: 15px;
+  margin-bottom: 10px;
 }
 
 nav ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  background: radial-gradient(
+    circle at calc((var(--mouse-x, 50) * 75%)) calc(var(--mouse-y, 50) * 100%),
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0.05) 20%,
+    rgba(255, 255, 255, 0) 30%
+  );
+  border-radius: 15px;
 }
 
 nav li {
-    display: inline;
+  display: inline-block;
+  border-radius: 15px;
+  transition: box-shadow 0.3s;
+}
+
+nav li:hover {
+  animation: 0.2s ease-in 1 forwards spotlight;
+  outline: 1px solid rgba(255, 255, 255, 0.2);
+  background-clip: border-box;
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
 }
 
 nav li a {
-    display: inline-block;
-    padding: 20px;
-    /* font-size: 1.1rem; */
-    transition: box-shadow 0.3s;
-    text-transform: uppercase;
+  display: inline-block;
+  padding: 20px;
+  font-size: 1.1rem;
+
+  text-transform: uppercase;
+  font-family: "Noto Sans", sans-serif;
+  font-weight: 500;
+  border-radius: 15px;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
 }
 
-nav li a:link, nav li a:visited {
-    color: var(--nav-link);
-    text-decoration: none;
+nav li a:link,
+nav li a:visited {
+  color: #de9b00;
+  text-decoration: none;
+  border-left: 1px solid rgba(255, 255, 255, 0);
+  border-right: 1px solid rgba(255, 255, 255, 0);
 }
 
-nav li a:hover, nav li a:active {
-    animation: 0.2s ease-in 1 forwards gradient;
-    outline: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 0 10px white;
+nav li a:hover,
+nav li a:active {
+  background: radial-gradient(
+    ellipse 425% 100% at top,
+    rgba(255, 255, 255, 0.25) 0%,
+    rgba(255, 255, 255, 0.05) 30%,
+    rgba(255, 255, 255, 0) 32%
+  );
+/*   background: linear-gradient(
+    rgba(255, 255, 255, 0.13) 0%,
+    rgba(255, 255, 255, 0.1) 30%,
+    rgba(255, 255, 255, 0) 31%
+  ); */
+  border-left: 1px solid rgba(255, 255, 255, 0.05);
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
 }
 
-@keyframes gradient {
-    0% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.00) 10%, rgba(255,255,255,0) 20%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.0) 41%); 
-    }
-    20% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0) 30%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
-    }
-    40% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0) 35%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
-    }
-    60% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 45%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
-    }
-    80% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.20) 25%, rgba(255,255,255,0) 50%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
-    }
-    100% {
-        background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0) 50%), linear-gradient(rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.13) 31%); 
-    }
+@keyframes spotlight {
+  0% {
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0) 10%,
+      rgba(255, 255, 255, 0) 20%
+    );
+  }
+  20% {
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.05) 0%,
+      rgba(255, 255, 255, 0.03) 20%,
+      rgba(255, 255, 255, 0) 30%
+    );
+  }
+  40% {
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0.07) 25%,
+      rgba(255, 255, 255, 0) 45%
+    );
+  }
+  60% {
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.15) 0%,
+      rgba(255, 255, 255, 0.13) 25%,
+      rgba(255, 255, 255, 0) 50%
+    );
+  }
+  80% {
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.15) 25%,
+      rgba(255, 255, 255, 0) 50%
+    );
+  }
+  100% {
+    background: radial-gradient(
+      circle at 50% 100%,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.15) 25%,
+      rgba(255, 255, 255, 0) 50%
+    );
+  }
 }
 
+
 .main-sidebar {
     background-color: var(--content-bg);
     border-radius: 15px;
diff --git a/themes/dreamcast/static/js/main.js b/themes/dreamcast/static/js/main.js
new file mode 100644
index 0000000..a10c565
--- /dev/null
+++ b/themes/dreamcast/static/js/main.js
@@ -0,0 +1,14 @@
+const root = document.documentElement;
+let mouseX = 0;
+let mouseY = 0;
+
+document.addEventListener("mousemove", (evt) => {
+  mouseX = evt.clientX / innerWidth;
+  mouseY = evt.clientY / innerHeight;
+
+  root.style.setProperty("--mouse-x", `${mouseX}`);
+  root.style.setProperty("--mouse-y", `${mouseY}`);
+
+  console.log(root.style.getPropertyValue("--mouse-x"));
+});
+