diff --git a/_includes/styles.css b/_includes/styles.css
index e608cc4..368bb72 100644
--- a/_includes/styles.css
+++ b/_includes/styles.css
@@ -1,74 +1,324 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 :root {
-  /* setting color scheme for light/dark text */
   color-scheme: light dark;
-  --light-color: #ffcfb8;
-  --dark-color: #113134;
+  --md-primary: #ea6a00;
+  --md-primary-light: #ff8a33;
+  --md-primary-dark: #b85200;
+  --md-surface: #ffffff;
+  --md-surface-container: #f3edf7;
+  --md-surface-container-high: #ece6f0;
+  --md-on-surface: #1c1b1f;
+  --md-on-surface-variant: #49454f;
+  --md-outline: #79747e;
+  --md-background: #fef7ff;
+  --md-on-primary: #ffffff;
 }
 
 html {
-  --primary-color: var(--dark-color);
-  --secondary-color: var(--light-color);
+  font-family: -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background: var(--md-background);
+  min-height: 100vh;
+  transition: background 0.3s ease;
+}
 
-  background-color: var(--primary-color);
-  text-align: center;
+body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  overscroll-behavior: none;
+}
+
+.theme-picker {
   position: fixed;
-  width: 100%; 
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  /* system specific font */
-  font-family: -apple-system, system-ui, "Helvetica Neue", "Helvetica", "Arial",
-  sans-serif;
+  top: 20px;
+  right: 20px;
+  background: var(--md-surface-container-high);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  max-width: 200px;
+  transform: translateX(0);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+  opacity: 1;
 }
 
-@media (prefers-color-scheme: light) {
-  html {
-    --primary-color: var(--light-color);
-    --secondary-color: var(--dark-color);
-  }
+.theme-picker.hidden {
+  transform: translateX(calc(100% + 20px));
+  opacity: 0;
+  pointer-events: none;
 }
 
-body {
-  margin: 0;
-  padding: 0;
-  overscroll-behavior: none;
+.theme-fab {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 56px;
+  height: 56px;
+  background: var(--md-primary);
+  border: none;
+  border-radius: 16px;
+  color: white;
+  cursor: pointer;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 24px;
 }
 
-main {
-  margin: 0;
-  height: 90vh;
+.theme-fab:hover {
+  background: var(--md-primary-light);
+  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.theme-fab:active {
+  transform: scale(0.95);
+}
+
+.theme-fab .material-icons {
+  font-size: 24px;
+}
+
+.theme-picker h3 {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--md-on-surface);
+  margin-bottom: 12px;
+  text-align: left;
+}
+
+.color-input-group {
   display: flex;
-  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.color-input {
+  width: 48px;
+  height: 48px;
+  border: 2px solid #e0e0e0;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.color-input:hover {
+  transform: scale(1.1);
+}
+
+.color-label {
+  font-size: 12px;
+  color: var(--md-on-surface-variant);
+}
+
+.preset-label {
+  font-size: 11px;
+  color: var(--md-on-surface-variant);
+  margin-bottom: 8px;
+  text-align: left;
+}
+
+.preset-colors {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.preset-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.preset-btn:hover {
+  transform: scale(1.15);
+}
+
+main {
+  width: 100%;
+  max-width: 480px;
+  background: var(--md-surface);
+  border-radius: 28px;
+  padding: 48px 32px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+  text-align: center;
+}
+
+.avatar {
+  width: 88px;
+  height: 88px;
+  background: var(--md-primary);
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
-  padding: 0 10vw 0 10vw;
+  font-size: 40px;
+  font-weight: 500;
+  color: var(--md-on-primary);
+  margin-bottom: 24px;
+  transition: background 0.3s ease;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15);
 }
 
 h1 {
-  font-size: 5vmax;
-  margin: 0;
-  padding: 0 0 1rem 0;
+  font-size: 32px;
+  font-weight: 400;
+  color: var(--md-on-surface);
+  letter-spacing: 0;
+  margin-bottom: 8px;
 }
 
 h2 {
-  font-size: 3vmax;
-  margin: 0;
-  padding: 0 0 1rem 0;
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--md-on-surface-variant);
+  margin-bottom: 32px;
+  line-height: 24px;
 }
 
 a {
-  padding: 1rem;
-  font-size: 3vmax;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 56px;
+  border-radius: 100px;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.1px;
+  text-decoration: none;
+  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
+  margin-bottom: 12px;
+}
 
-  /* setting text color of links to match other canvastext */
-  color: var(--canvastext);
-  text-align: center;
-  margin: 1rem 0;
-  /* seems to cause the border I want via apple */
-  border-radius: 980px;
-  border: 5px solid var(--secondary-color);
+a:first-of-type {
+  background: var(--md-primary);
+  color: var(--md-on-primary);
+  border: none;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+a:first-of-type:hover,
+a:first-of-type:focus {
+  background: var(--md-primary-light);
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+}
+
+a:last-of-type {
+  background: transparent;
+  color: var(--md-primary);
+  border: 1px solid var(--md-outline);
+}
+
+a:last-of-type:hover,
+a:last-of-type:focus {
+  background: rgba(103, 80, 164, 0.08);
+}
+
+a:active {
+  transform: scale(0.98);
+}
+
+.material-icons {
+  font-size: 18px;
+}
+
+@media (max-width: 640px) {
+  .theme-picker {
+    top: 10px;
+    right: 10px;
+    padding: 12px;
+  }
+
+  .theme-fab {
+    bottom: 16px;
+    right: 16px;
+  }
+
+  main {
+    padding: 40px 24px;
+  }
+
+  h1 {
+    font-size: 28px;
+  }
 }
 
-a:hover, a:focus {
-  font-weight: bold;
-  border-style: dashed;
+@media (prefers-color-scheme: dark) {
+  :root {
+    --md-primary: #ffb68a;
+    --md-primary-light: #ffd0b0;
+    --md-primary-dark: #ea6a00;
+    --md-surface: #1c1b1f;
+    --md-surface-container: #211f26;
+    --md-surface-container-high: #2b2930;
+    --md-on-surface: #e6e1e5;
+    --md-on-surface-variant: #cac4d0;
+    --md-outline: #938f99;
+    --md-background: #141218;
+    --md-on-primary: #4a2800;
+  }
+
+  .theme-picker {
+    background: var(--md-surface-container-high);
+  }
+
+  .theme-picker h3 {
+    color: var(--md-on-surface);
+  }
+
+  .color-label {
+    color: var(--md-on-surface-variant);
+  }
+
+  .preset-label {
+    color: var(--md-outline);
+  }
+
+  .theme-fab {
+    background: var(--md-primary);
+    color: #381e72;
+  }
+
+  .theme-fab:hover {
+    background: var(--md-primary-light);
+  }
+
+  main {
+    background: var(--md-surface);
+  }
+
+  h1 {
+    color: var(--md-on-surface);
+  }
+
+  h2 {
+    color: var(--md-on-surface-variant);
+  }
+
+  a:first-of-type {
+    background: var(--md-primary);
+    color: var(--md-on-primary);
+  }
+
+  a:last-of-type {
+    color: var(--md-primary);
+  }
 }
\ No newline at end of file
diff --git a/index.njk b/index.njk
index 78570c6..63ef066 100644
--- a/index.njk
+++ b/index.njk
@@ -8,6 +8,7 @@ metaCanonicalURL: "https://jackhowa.com"
 
 # content
 contentTitle: Jack Howard
+contentTitleAbbreviation: JH
 contentSubtitle: Principal Software Engineer at Expel
 firstLinkURL: https://github.com/JackHowa
 firstLinkTitle: GitHub
@@ -40,12 +41,183 @@ secondLinkTitle: AI & React talk
   </head>
 
   <body>
+    <button class="theme-fab" id="themeFab" aria-label="Toggle theme picker">🎨</button>
+
+    <div class="theme-picker hidden" id="themePicker">
+      <h3>Theme Color</h3>
+      <div class="color-input-group">
+        <input type="color" id="colorPicker" class="color-input" value="#ea6a00">
+
+        <span class="color-label">Pick Any Color 🌈</span>
+      </div>
+      <div class="preset-label">Presets:</div>
+      <div class="preset-colors">
+        <button class="preset-btn" style="background: #6750a4;" data-color="#6750a4" aria-label="Violet"
+          title="Violet (MD3 Default)"></button>
+        <button class="preset-btn" style="background: #006a6a;" data-color="#006a6a" aria-label="Teal"
+          title="Teal"></button>
+        <button class="preset-btn" style="background: #0061a4;" data-color="#0061a4" aria-label="Blue"
+          title="Blue"></button>
+        <button class="preset-btn" style="background: #984061;" data-color="#984061" aria-label="Rose"
+          title="Rose"></button>
+        <button class="preset-btn" style="background: #386a20;" data-color="#386a20" aria-label="Green"
+          title="Green"></button>
+        <button class="preset-btn" style="background: #a05c00;" data-color="#ea6a00" aria-label="Orange"
+          title="Orange"></button>
+
+          {# this is via the orange begonia #}
+        <button class="preset-btn" style="background: #ba1a1a;" data-color="#ba1a1a" aria-label="Red"
+          title="Red"></button>
+        <button class="preset-btn" style="background: #49454f;" data-color="#49454f" aria-label="Neutral"
+          title="Neutral Gray"></button>
+      </div>
+    </div>
+
     <main>
+      <div class="avatar">{{contentTitleAbbreviation}}</div>
       <h1>{{contentTitle}}</h1>
       <h2>{{contentSubtitle}}</h2>
       <a href="{{firstLinkURL}}" target="_blank" rel="noreferrer">{{firstLinkTitle}}</a>
       <a href="{{secondLinkURL}}" target="_blank" rel="noreferrer">{{secondLinkTitle}}</a>
     </main>
+
+    <script>
+      function hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+          r: parseInt(result[1], 16),
+          g: parseInt(result[2], 16),
+          b: parseInt(result[3], 16)
+        } : null;
+      }
+
+      function rgbToHsl(r, g, b) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h, s, l = (max + min) / 2;
+
+        if (max === min) {
+          h = s = 0;
+        } else {
+          const d = max - min;
+          s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+          switch (max) {
+            case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+            case g: h = ((b - r) / d + 2) / 6; break;
+            case b: h = ((r - g) / d + 4) / 6; break;
+          }
+        }
+
+        return { h: h * 360, s: s * 100, l: l * 100 };
+      }
+
+      function generateColorScheme(baseColor) {
+        const rgb = hexToRgb(baseColor);
+        const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+
+        // Generate tonal palette (MD3 approach)
+        const lightness = hsl.l;
+        const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+        if (isDark) {
+          const primaryL = Math.min(lightness + 40, 90);
+          return {
+            primary: `hsl(${hsl.h}, ${hsl.s}%, ${primaryL}%)`,
+            primaryLight: `hsl(${hsl.h}, ${Math.min(hsl.s + 10, 100)}%, ${Math.min(lightness + 50, 95)}%)`,
+            primaryDark: `hsl(${hsl.h}, ${hsl.s}%, ${Math.min(lightness + 20, 75)}%)`,
+            background: `hsl(${hsl.h}, ${Math.max(hsl.s - 30, 10)}%, 8%)`,
+            surface: `hsl(${hsl.h}, ${Math.max(hsl.s - 20, 10)}%, 11%)`,
+            surfaceContainer: `hsl(${hsl.h}, ${Math.max(hsl.s - 20, 10)}%, 13%)`,
+            surfaceContainerHigh: `hsl(${hsl.h}, ${Math.max(hsl.s - 20, 10)}%, 17%)`,
+            outlinedHover: `hsla(${hsl.h}, ${hsl.s}%, ${lightness + 40}%, 0.08)`,
+            // If primary lightness > 60%, uses dark text (same hue at 20% lightness)
+            // Otherwise uses white text
+            onPrimary: primaryL > 60 ? `hsl(${hsl.h}, ${hsl.s}%, 20%)` : '#ffffff'
+          };
+        } else {
+          return {
+            primary: baseColor,
+            primaryLight: `hsl(${hsl.h}, ${hsl.s}%, ${Math.min(lightness + 15, 85)}%)`,
+            primaryDark: `hsl(${hsl.h}, ${hsl.s}%, ${Math.max(lightness - 15, 15)}%)`,
+            background: `hsl(${hsl.h}, ${Math.min(hsl.s * 1.2, 100)}%, 95%)`,
+            surface: `hsl(${hsl.h}, ${Math.min(hsl.s * 0.6, 100)}%, 95%)`,
+            surfaceContainer: `hsl(${hsl.h}, ${Math.min(hsl.s * 0.8, 100)}%, 92%)`,
+            surfaceContainerHigh: `hsl(${hsl.h}, ${Math.min(hsl.s * 0.8, 100)}%, 88%)`,
+            outlinedHover: `hsla(${hsl.h}, ${hsl.s}%, ${lightness}%, 0.12)`,
+            onPrimary: lightness > 60 ? `hsl(${hsl.h}, ${hsl.s}%, 20%)` : '#ffffff'
+          };
+        }
+      }
+
+      function applyTheme(color) {
+        const scheme = generateColorScheme(color);
+        const root = document.documentElement;
+
+        root.style.setProperty('--md-primary', scheme.primary);
+        root.style.setProperty('--md-primary-light', scheme.primaryLight);
+        root.style.setProperty('--md-primary-dark', scheme.primaryDark);
+        root.style.setProperty('--md-background', scheme.background);
+        root.style.setProperty('--md-surface', scheme.surface);
+        root.style.setProperty('--md-surface-container', scheme.surfaceContainer);
+        root.style.setProperty('--md-surface-container-high', scheme.surfaceContainerHigh);
+        root.style.setProperty('--md-on-primary', scheme.onPrimary);
+
+        document.body.parentElement.style.background = scheme.background;
+
+        const avatar = document.querySelector('.avatar');
+        if (avatar) {
+          avatar.style.background = scheme.primary;
+        }
+
+        const links = document.querySelectorAll('a');
+        if (links[1]) {
+          links[1].addEventListener('mouseenter', function () {
+            this.style.background = scheme.outlinedHover;
+          });
+          links[1].addEventListener('mouseleave', function () {
+            this.style.background = 'transparent';
+          });
+        }
+      }
+
+      // Theme picker toggle
+      const themeFab = document.getElementById('themeFab');
+      const themePicker = document.getElementById('themePicker');
+
+      themeFab.addEventListener('click', () => {
+        themePicker.classList.toggle('hidden');
+      });
+
+      // Close picker when clicking outside
+      document.addEventListener('click', (e) => {
+        if (!themePicker.contains(e.target) && !themeFab.contains(e.target)) {
+          themePicker.classList.add('hidden');
+        }
+      });
+
+      const colorPicker = document.getElementById('colorPicker');
+      colorPicker.addEventListener('input', (e) => {
+        applyTheme(e.target.value);
+      });
+
+      document.querySelectorAll('.preset-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const color = btn.dataset.color;
+          colorPicker.value = color;
+          applyTheme(color);
+        });
+      });
+
+      applyTheme(colorPicker.value);
+
+      // Re-apply theme when system color scheme changes
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        applyTheme(colorPicker.value);
+      });
+	  </script>
   </body>
 
 </html>
diff --git a/netlify.toml b/netlify.toml
index 04686f3..e576041 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -10,7 +10,7 @@
     X-Frame-Options = "DENY"
     X-XSS-Protection = "1; mode=block"
     X-Content-Type-Options = "nosniff"
-    Content-Security-Policy = "default-src 'self'; style-src 'unsafe-inline';"
+    Content-Security-Policy = "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline';"
 
     # Multi-value headers are expressed with multi-line strings.
     cache-control = '''