diff --git a/surfsense_web/app/docs/layout.tsx b/surfsense_web/app/docs/layout.tsx
index 9311a45b4..cc5f2118a 100644
--- a/surfsense_web/app/docs/layout.tsx
+++ b/surfsense_web/app/docs/layout.tsx
@@ -8,12 +8,15 @@ const gridTemplate = `"sidebar header toc"
 "sidebar toc-popover toc"
 "sidebar main toc" 1fr / var(--fd-sidebar-col) minmax(0, 1fr) min-content`;
 
+const docsSurfaceClass =
+	"bg-main-panel [--color-fd-background:var(--main-panel)] [--color-fd-card:var(--main-panel)] [--color-fd-popover:var(--main-panel)] [--color-fd-muted:var(--main-panel)] [--color-fd-secondary:var(--main-panel)]";
+
 export default function Layout({ children }: { children: ReactNode }) {
 	return (
 		<DocsLayout
 			tree={source.pageTree}
 			{...baseOptions}
-			containerProps={{ style: { gridTemplate }, className: "bg-fd-card" }}
+			containerProps={{ style: { gridTemplate }, className: docsSurfaceClass }}
 			sidebar={{
 				components: {
 					Separator: SidebarSeparator,