diff --git a/src/web/shared/components/ConsoleShell/ConsoleShell.tsx b/src/web/shared/components/ConsoleShell/ConsoleShell.tsx
index e9259d0..d1f8972 100644
--- a/src/web/shared/components/ConsoleShell/ConsoleShell.tsx
+++ b/src/web/shared/components/ConsoleShell/ConsoleShell.tsx
@@ -18,7 +18,7 @@ import { ConsoleOutlet } from "./ConsoleOutlet";
 const { Content, Header, Sider } = Layout;
 
 export function ConsoleShell({ headerExtra, menuItems, title }: ConsoleShellProps) {
-  const { effectiveTheme } = useThemePreference();
+  const { compact, effectiveTheme } = useThemePreference();
   const { collapsed, setCollapsed } = useSidebarCollapsed();
   const { data: meta } = useMeta();
 
@@ -26,7 +26,7 @@ export function ConsoleShell({ headerExtra, menuItems, title }: ConsoleShellProp
   const locale = useMemo(() => ({ ...zhCN, ...zhCN_X }), []);
 
   return (
-    <XProvider locale={locale} theme={buildThemeConfig(effectiveTheme)}>
+    <XProvider locale={locale} theme={buildThemeConfig({ compact, effectiveTheme })}>
       <AntApp>
         <Layout className="app-layout">
           <Header className="app-header">
diff --git a/tests/web/components/ConsoleShell.test.tsx b/tests/web/components/ConsoleShell.test.tsx
index 1d2895e..835af20 100644
--- a/tests/web/components/ConsoleShell.test.tsx
+++ b/tests/web/components/ConsoleShell.test.tsx
@@ -6,7 +6,7 @@ import { ConsoleShell } from "../../../src/web/shared/components/ConsoleShell/Co
 import { installFetchMock, jsonResponse, mockMetaResponse, renderWithProviders } from "../test-utils";
 
 function mockSettingsResponse(): Response {
-  return jsonResponse({ theme: "system" });
+  return jsonResponse({ compact: false, theme: "system" });
 }
 
 describe("ConsoleShell", () => {