diff --git a/components/AboutPage.module.css b/components/AboutPage.module.css
index 98e76c3b80..ebfd3b4174 100644
--- a/components/AboutPage.module.css
+++ b/components/AboutPage.module.css
@@ -10,6 +10,20 @@
   transition:
     background-color 300ms ease,
     color 300ms ease;
+
+  /* Light tokens are the CSS default. The inline noflash script in
+     _document.tsx sets body.dark-mode before first paint, so dark
+     visitors never flash through this light palette. */
+  --about-bg: #ffffff;
+  --about-text: #1a1a1a;
+  --about-muted: #666;
+  --about-accent: #000;
+  --about-border: rgba(0, 0, 0, 0.08);
+  --about-border-hover: rgba(0, 0, 0, 0.15);
+  --about-card: rgba(0, 0, 0, 0.03);
+  --about-card-hover: rgba(0, 0, 0, 0.06);
+  --about-lenses-fg: #4d4d4d;
+  --about-lenses-accent: #c2701f;
 }
 
 @keyframes pageFadeIn {
@@ -21,7 +35,7 @@
   }
 }
 
-.page.dark {
+:global(body.dark-mode) .page {
   --about-bg: #0d0d0d;
   --about-text: #e8e8e8;
   --about-muted: #888;
@@ -30,17 +44,8 @@
   --about-border-hover: rgba(255, 255, 255, 0.2);
   --about-card: rgba(255, 255, 255, 0.04);
   --about-card-hover: rgba(255, 255, 255, 0.08);
-}
-
-.page.light {
-  --about-bg: #ffffff;
-  --about-text: #1a1a1a;
-  --about-muted: #666;
-  --about-accent: #000;
-  --about-border: rgba(0, 0, 0, 0.08);
-  --about-border-hover: rgba(0, 0, 0, 0.15);
-  --about-card: rgba(0, 0, 0, 0.03);
-  --about-card-hover: rgba(0, 0, 0, 0.06);
+  --about-lenses-fg: #e8e8e8;
+  --about-lenses-accent: #f0a85a;
 }
 
 .glow {
@@ -49,16 +54,16 @@
   pointer-events: none;
   background: radial-gradient(
     ellipse 80% 50% at 50% -10%,
-    rgba(255, 255, 255, 0.08) 0%,
+    rgba(255, 200, 150, 0.12) 0%,
     transparent 60%
   );
   transition: opacity 300ms ease;
 }
 
-.light .glow {
+:global(body.dark-mode) .glow {
   background: radial-gradient(
     ellipse 80% 50% at 50% -10%,
-    rgba(255, 200, 150, 0.12) 0%,
+    rgba(255, 255, 255, 0.08) 0%,
     transparent 60%
   );
 }
@@ -212,15 +217,12 @@
   .navIcon:hover {
     background: var(--about-card);
     color: var(--about-accent);
+    border-color: rgba(0, 0, 0, 0.15);
   }
 
-  .dark .navIcon:hover {
+  :global(body.dark-mode) .navIcon:hover {
     border-color: rgba(255, 255, 255, 0.2);
   }
-
-  .light .navIcon:hover {
-    border-color: rgba(0, 0, 0, 0.15);
-  }
 }
 
 .hero {
@@ -476,6 +478,18 @@ a.bioHint {
   height: 100%;
 }
 
+.iconOnDark {
+  display: none;
+}
+
+:global(body.dark-mode) .iconOnDark {
+  display: block;
+}
+
+:global(body.dark-mode) .iconOnLight {
+  display: none;
+}
+
 .workCompany {
   font-family: var(--font-sans);
   font-size: 0.88rem;
@@ -705,25 +719,25 @@ a.bioHint {
 }
 
 .spotItCardFill {
-  fill: white;
+  fill: black;
   opacity: 0.03;
 }
 
-.light .spotItCardFill {
-  fill: black;
+:global(body.dark-mode) .spotItCardFill {
+  fill: white;
   opacity: 0.03;
 }
 
 .spotItCardStroke {
-  stroke: white;
+  stroke: black;
   stroke-width: 0.75;
   fill: none;
-  opacity: 0.07;
+  opacity: 0.08;
 }
 
-.light .spotItCardStroke {
-  stroke: black;
-  opacity: 0.08;
+:global(body.dark-mode) .spotItCardStroke {
+  stroke: white;
+  opacity: 0.07;
 }
 
 .spotItCardBack {
diff --git a/components/AboutPage.tsx b/components/AboutPage.tsx
index f9a4c914bc..46c1cde20e 100644
--- a/components/AboutPage.tsx
+++ b/components/AboutPage.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import * as React from 'react'
 
 import { github, linkedin, x } from '@/lib/config'
+import { useDarkMode } from '@/lib/use-dark-mode'
 
 import styles from './AboutPage.module.css'
 import { DesignButton } from './wustep/DesignButton'
@@ -245,21 +246,15 @@ function Tooltip({
 }
 
 export function AboutPage() {
-  const [isDark, setIsDark] = React.useState(true)
+  const [hasMounted, setHasMounted] = React.useState(false)
+  const { isDarkMode, toggleDarkMode } = useDarkMode()
 
   React.useEffect(() => {
-    try {
-      const saved = localStorage.getItem('darkMode')
-      if (saved !== null) setIsDark(JSON.parse(saved) as boolean)
-    } catch {}
+    setHasMounted(true)
   }, [])
 
-  React.useEffect(() => {
-    localStorage.setItem('darkMode', JSON.stringify(isDark))
-  }, [isDark])
-
   return (
-    <main className={`${styles.page} ${isDark ? styles.dark : styles.light}`}>
+    <main className={styles.page}>
       <div className={styles.glow} aria-hidden='true' />
 
       <div className={styles.container}>
@@ -275,8 +270,8 @@ export function AboutPage() {
 
           <nav className={styles.nav}>
             <ThemeToggle
-              isDark={isDark}
-              onToggle={() => setIsDark(!isDark)}
+              isDark={hasMounted ? isDarkMode : false}
+              onToggle={toggleDarkMode}
               className={styles.themeToggle}
             />
             <OwnerModeToggle
@@ -370,9 +365,7 @@ export function AboutPage() {
             >
               <div className={styles.workLeft}>
                 <span className={styles.workIcon}>
-                  {company.icon === 'notion' && (
-                    <NotionIconSmall isDark={isDark} />
-                  )}
+                  {company.icon === 'notion' && <NotionIconSmall />}
                   {company.icon === 'facebook' && <FacebookIconSmall />}
                   {company.icon === 'osu' && <OhioStateIcon />}
                 </span>
@@ -482,9 +475,9 @@ export function AboutPage() {
                 <div className={styles.lensesArt} aria-hidden='true'>
                   <Illustration
                     id='lenses-deck'
-                    fg={isDark ? '#e8e8e8' : '#4d4d4d'}
+                    fg='var(--about-lenses-fg)'
                     bg='transparent'
-                    accent={isDark ? '#f0a85a' : '#c2701f'}
+                    accent='var(--about-lenses-accent)'
                   />
                 </div>
                 <h3>Lenses</h3>
@@ -734,10 +727,16 @@ function LinkedInIcon() {
   )
 }
 
-function NotionIconSmall({ isDark }: { isDark: boolean }) {
-  if (isDark) {
-    return (
-      <svg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'>
+function NotionIconSmall() {
+  return (
+    <>
+      <svg
+        className={styles.iconOnDark}
+        viewBox='0 0 100 100'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+        aria-hidden='true'
+      >
         <path
           d='M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z'
           fill='#fff'
@@ -749,17 +748,21 @@ function NotionIconSmall({ isDark }: { isDark: boolean }) {
           fill='#0d0d0d'
         />
       </svg>
-    )
-  }
-  return (
-    <svg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z'
-        fill='#000'
-      />
-    </svg>
+      <svg
+        className={styles.iconOnLight}
+        viewBox='0 0 100 100'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+        aria-hidden='true'
+      >
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z'
+          fill='#000'
+        />
+      </svg>
+    </>
   )
 }