diff --git a/docs/app/components/Nav.tsx b/docs/app/components/Nav.tsx
index c4151aaf..5fd6152b 100644
--- a/docs/app/components/Nav.tsx
+++ b/docs/app/components/Nav.tsx
@@ -17,6 +17,7 @@ import { button } from '@cerberus/styled-system/recipes'
 import { DogIcon } from './icons/DogIcon'
 import { FireIcon } from './icons/FireIcon'
 import { getTheme, injectTheme, type ThemeName } from '@/styled-system/themes'
+import { PAGE_BORDER_INITIAL } from '../utils/const'
 
 const navLogoContent = (
   <section
@@ -89,7 +90,7 @@ export function Nav() {
       const currentTheme = e.currentTarget.value
       const newTheme = currentTheme === 'cerberus' ? 'acheron' : 'cerberus'
       updateTheme(newTheme)
-      const pandaTheme = await getTheme(theme as ThemeName)
+      const pandaTheme = await getTheme(newTheme as ThemeName)
       injectTheme(document.documentElement, pandaTheme)
     },
     [updateTheme],
@@ -112,7 +113,7 @@ export function Nav() {
           bgColor: 'rgba(255, 255, 255, 0.3)',
         },
         _darkMode: {
-          bgColor: 'rgba(19, 0, 36, 0.3)',
+          bgColor: 'page.backdrop.initial',
         },
         md: {
           gridTemplateRows: '1fr',
@@ -140,11 +141,11 @@ export function Nav() {
         <ul
           className={hstack({
             border: '1px solid',
-            borderColor: 'page.border.initial',
+            borderColor: PAGE_BORDER_INITIAL,
             gap: '0',
             w: 'full',
             '& li:nth-child(2)': {
-              borderColor: 'page.border.initial',
+              borderColor: PAGE_BORDER_INITIAL,
               borderLeft: '1px solid',
               borderRight: '1px solid',
               md: {
@@ -276,7 +277,7 @@ export function Nav() {
                 css({
                   bgColor: 'page.bg.100',
                   border: '1px solid',
-                  borderColor: 'page.border.initial',
+                  borderColor: PAGE_BORDER_INITIAL,
                   fontWeight: 500,
                   h: '2.275rem',
                   rounded: 'sm',
diff --git a/docs/app/preset/colors/components/AvatarSwatch.tsx b/docs/app/preset/colors/components/AvatarSwatch.tsx
index 47b7a750..826404a9 100644
--- a/docs/app/preset/colors/components/AvatarSwatch.tsx
+++ b/docs/app/preset/colors/components/AvatarSwatch.tsx
@@ -14,12 +14,7 @@ interface ColorSwatchProps {
 }
 
 export default function ColorSwatch(props: ColorSwatchProps) {
-  const { mode } = useThemeContext()
   const searchParams = useSearchParams()
-
-  const modeValue = useMemo(() => {
-    return mode === 'dark' ? '_darkMode' : '_lightMode'
-  }, [mode])
   const color = useMemo(() => {
     const snakeCaseToken = props.tokenName
       .replace(/([A-Z])/g, ' $1')
@@ -27,7 +22,7 @@ export default function ColorSwatch(props: ColorSwatchProps) {
       .toLowerCase()
       .replace(/\s+/g, '-')
     return `var(--cerberus-colors-${snakeCaseToken})`
-  }, [modeValue, props.tokenName])
+  }, [props.tokenName])
 
   const bgColor = {
     backgroundColor: color,
diff --git a/docs/app/preset/colors/components/color-details.tsx b/docs/app/preset/colors/components/color-details.tsx
index 42f5adcf..931fbdae 100644
--- a/docs/app/preset/colors/components/color-details.tsx
+++ b/docs/app/preset/colors/components/color-details.tsx
@@ -142,9 +142,6 @@ export default function ColorDetails() {
     }
   }, [scope, splitToken])
 
-  const modeValue = useMemo(() => {
-    return mode === 'dark' ? '_darkMode' : '_lightMode'
-  }, [mode])
   const color = useMemo(() => {
     const snakeCaseToken = paramsToken
       .replace(/([A-Z])/g, ' $1')
@@ -152,7 +149,7 @@ export default function ColorDetails() {
       .toLowerCase()
       .replace(/\s+/g, '-')
     return `var(--cerberus-colors-${snakeCaseToken})`
-  }, [modeValue, paramsToken])
+  }, [paramsToken])
 
   const swatchColor = {
     backgroundColor: color,
diff --git a/docs/app/utils/const.ts b/docs/app/utils/const.ts
index 5e808590..b13f4349 100644
--- a/docs/app/utils/const.ts
+++ b/docs/app/utils/const.ts
@@ -1,4 +1,5 @@
 export const NEUTRAL_BORDER_100 = 'page.border.100'
+export const PAGE_BORDER_INITIAL = 'page.border.initial'
 export const PAGE_BORDER_100 = 'page.border.100'
 export const PAGE_TEXT_INITIAL = 'page.text.initial'
 export const NEUTRAL_TEXT_INVERSE = 'page.text.inverse'