diff --git a/.storybook/ThemeSwapper.tsx b/.storybook/ThemeSwapper.tsx
index 280ff09..1dd4b76 100644
--- a/.storybook/ThemeSwapper.tsx
+++ b/.storybook/ThemeSwapper.tsx
@@ -44,7 +44,7 @@ const ThemeSwapper = ({ context, children }: ThemeSwapperProps) => {
   return (
     <div
       style={{
-        backgroundColor: resolvedMode === "light" ? "#F6F6F9" : "#0e1017",
+        backgroundColor: resolvedMode === "light" ? "#ffffff" : "#161820",
       }}
     >
       {children}
diff --git a/.storybook/storybook.css b/.storybook/storybook.css
index adaa329..17d744b 100644
--- a/.storybook/storybook.css
+++ b/.storybook/storybook.css
@@ -46,7 +46,8 @@ body .sbdocs {
 
 /* Headings use Outfit or Inter */
 
-.sbdocs h1.sbdocs-title {
+.sbdocs h1.sbdocs-title,
+.sbdocs.sbdocs-content h1 :not(.sbdocs-preview) {
   font-family: var(--sb-ds-font-heading);
 }
 
@@ -69,16 +70,6 @@ code,
   font-family: var(--sb-ds-font-mono);
 }
 
-/* For Component Preview, actual transition based on light/dark mode */
-.light .sbdocs-preview div[style*="background-color"] {
-  background-color: #ffffff !important; /* --ds-surface in light mode */
-  color: #1a1c23 !important; /* --ds-on-surface in light mode */
-}
-.dark .sbdocs-preview div[style*="background-color"] {
-  background-color: #161820 !important; /* ---ds-surface in dark mode */
-  color: #e8eaf0 !important; /* --ds-on-surface in dark mode */
-}
-
 /* DS DOCS */
 
 /* Base font */