diff --git a/.gitignore b/.gitignore
index 2eea525..4bec488 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-.env
\ No newline at end of file
+.env
+tailwindcss-*
\ No newline at end of file
diff --git a/site b/site
index 4d2da66..e2179f1 100755
Binary files a/site and b/site differ
diff --git a/static/index.html b/static/index.html
index da9a54b..8bb3e6e 100644
--- a/static/index.html
+++ b/static/index.html
@@ -6,11 +6,12 @@
 <title>Home</title>
 <script src="https://unpkg.com/htmx.org@2.0.4"></script>
 <link rel="stylesheet" href="/static/tailwind.css" />
+<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 <head>
 <body class="m-0 p-0 bg-zinc-50  rubik-400">
 
   <!-- NAV -->
-  <nav class="fixed inset-x-0 top-0 h-12 z-50 flex items-center px-8 bg-white/95 backdrop-blur-l border-b border-gray-200">
+  <nav class="fixed inset-x-0 top-0 h-12 z-50 flex items-center px-8 bg-white/90 dark:bg-black/90 backdrop-blur-l border-b border-gray-200">
     <a class="text-blue-400 text-xs" href="#"><span class="text-green-500">></span> samantha_vero_friis</a>
     <div class="ml-auto">
       <button onclick="openOverlay()">login</button>
@@ -23,32 +24,35 @@
   class="absolute inset-x-0 will-change-transform overflow-hidden"
   style="top:-100%;bottom:-30%;">
         <div hx-get="/static/components/background.html" hx-trigger="load" hx-swap="outerHTML"></div>
-
     </div> 
     <!-- scroller: fills the viewport, scrolls inside -->
     <div id="scroller" class="relative z-10 h-full flex justify-center overflow-y-auto">
       <div class="text-black bg-white h-fit w-4xl flex font-light">
 
         <aside id="sidebar" class="w-48 bg-white shrink-0 p-6 sticky top-0 self-start h-screen overflow-y-auto pt-20 hidden lg:block">
+          <div class="mb-6">
+            <img src="/static/icons/half-moon.svg" id="darkmode" onclick="toggleTheme()" >
+            <img src="/static/icons/sun-light.svg" id="lightmode" onclick="toggleTheme()" class="hidden">
+          </div>
           <div class="mb-6">
             <p class="text-xs uppercase tracking-widest text-gray-400 mb-2">navigate</p>
             <div class="flex flex-col gap-1 text-sm">
-              <a href="#about">about</a>
-              <a href="#experience">experience</a>
-              <a href="#education">education</a>
-              <a href="#opinion">opinion</a>
-              <a href="#automation">automation</a>
-              <a href="#interests" onclick="InterestShow()">interests</a>
+              <a href="#about">// about</a>
+              <a href="#experience">// experience</a>
+              <a href="#education">// education</a>
+              <a href="#opinion">// opinion</a>
+              <a href="#automation">// automation</a>
+              <a href="#interests" onclick="InterestShow()">// interests</a>
             </div>
           </div>
           <div class="mb-6">
             <p class="text-xs uppercase tracking-widest text-gray-400 mb-2">skills</p>
             <div class="flex flex-col gap-1 text-sm">
-              <div>Excel</div>
-              <div>Python</div>
-              <div>SQL</div>
-              <div>Go</div>
-              <div>Git</div>
+              <div>| Excel</div>
+              <div>| Python</div>
+              <div>| SQL</div>
+              <div>| Go</div>
+              <div>| Git</div>
             </div>
           </div>
           <div class="mb-6">
@@ -80,7 +84,7 @@
           <section id="experience" class="mb-12">
             <h2 class="text-2xl font-light border-b pb-2 mb-6">Experience</h2>
             <div class="grid grid-cols-1 gap-4">
-              <div class="border border-gray-400 hover:border-pink-400 p-6 rounded-md cursor-pointer hover:bg-gray-50" onclick="window.location.href='#research'">
+              <div class="border border-gray-400 hover:border-pink-400 rounded-md p-6 cursor-pointer hover:bg-gray-50" onclick="window.location.href='#research'">
                 <div class="flex justify-between mb-2">
                   <span class="font-medium">Independent Equity Research</span>
                   <span class="text-xs border border-blue-600 text-blue-600 rounded-sm px-2 py-0.5 self-start">finance</span>
@@ -90,7 +94,7 @@
                   low-transparency information through structured cross-validation.</p>
                 <a class="text-xs font-mono mt-3 inline-block  text-blue-600" href="#research">// Go to Analysis</a>
               </div>
-              <div class="border p-6  rounded-xl cursor-pointer hover:bg-gray-50" onclick="window.location.href='#automation'">
+              <div class="border border-gray-400 hover:border-pink-400 rounded-md p-6  cursor-pointer hover:bg-gray-50" onclick="window.location.href='#automation'">
                 <div class="flex justify-between mb-2">
                   <span class="font-medium">Technical Tools &amp; Automation</span>
                   <span class="text-xs border px-2 py-0.5 self-start">engineering</span>
@@ -343,6 +347,20 @@
 
 
   <script>
+    // On page load — restore saved theme
+    (function () {
+      if (localStorage.theme === 'dark') {
+        document.documentElement.classList.add('dark');
+      }
+    })();
+
+    function toggleTheme() {
+      const isDark = document.documentElement.classList.toggle('dark');
+      localStorage.theme = isDark ? 'dark' : 'light';
+      document.getElementById('darkmode').classList.toggle('hidden', isDark);
+      document.getElementById('lightmode').classList.toggle('hidden', !isDark);
+    }
+
     function InterestShow() {
       const body = document.getElementById('interests-body');
       const chevron = document.getElementById('interests-chevron');
diff --git a/static/vars.css b/static/vars.css
index da91a61..1b7c03d 100644
--- a/static/vars.css
+++ b/static/vars.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
 @theme {
   --color-regal-blue: #243c5a; 
 }
diff --git a/tailwind.sh b/tailwind.sh
old mode 100644
new mode 100755
index 049cc28..beba187
--- a/tailwind.sh
+++ b/tailwind.sh
@@ -1 +1,20 @@
-./tailwindcss-linux-x64 --input static/vars.css --content "./static/**/*.html" --output static/tailwind.css --watch 
\ No newline at end of file
+#!/usr/bin/env sh
+set -e
+
+OS="$(uname -s)"
+ARCH="$(uname -m)"
+
+BIN="tailwindcss-linux-x64"
+
+if [ "$OS" = "Darwin" ]; then
+  if [ "$ARCH" = "arm64" ]; then
+    BIN="tailwindcss-macos-arm64"
+  else
+    BIN="tailwindcss-macos-x64"
+  fi
+fi
+
+exec "./$BIN" ---input  static/vars.css \
+  --content "./static/**/*.html" \
+  --output static/tailwind.css \
+  --watch
\ No newline at end of file
