diff --git a/web/src/api/runtime.ts b/web/src/api/runtime.ts
new file mode 100644
index 0000000..e82a6dd
--- /dev/null
+++ b/web/src/api/runtime.ts
@@ -0,0 +1,47 @@
+import {useQuery} from '@tanstack/react-query';
+
+export interface RuntimeConfig {
+    apiVersion: string;
+    system: {
+        nameZh: string;
+        nameEn: string;
+        logo: string;
+        icpCode: string;
+        version: string;
+        defaultView: string;
+        defaultColorMode: 'light' | 'dark' | 'system';
+    };
+    theme: {id: string; version: string};
+    features: Record<string, boolean>;
+}
+
+const fallback: RuntimeConfig = {
+    apiVersion: 'v1',
+    system: {
+        nameZh: '皮卡监控',
+        nameEn: 'Pika Monitor',
+        logo: '/api/logo',
+        icpCode: '',
+        version: '',
+        defaultView: 'grid',
+        defaultColorMode: 'system',
+    },
+    theme: {id: 'default', version: ''},
+    features: {},
+};
+
+/** 从 /api/config 获取运行时配置（系统名称、logo、版本等）。失败时返回 fallback。 */
+export const useRuntimeConfig = () => {
+    return useQuery({
+        queryKey: ['runtime-config'],
+        queryFn: async (): Promise<RuntimeConfig> => {
+            const res = await fetch('/api/config');
+            if (!res.ok) throw new Error('无法加载运行时配置');
+            return res.json();
+        },
+        staleTime: 5 * 60 * 1000,
+        retry: 1,
+    });
+};
+
+export {fallback as defaultRuntimeConfig};
diff --git a/web/src/components/index.ts b/web/src/components/index.ts
deleted file mode 100644
index 2c0d42f..0000000
--- a/web/src/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { PageHeader } from './PageHeader';
-export type { Action } from './PageHeader';
diff --git a/web/src/global.d.ts b/web/src/global.d.ts
deleted file mode 100644
index 67066d3..0000000
--- a/web/src/global.d.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export {};
-
-declare global {
-    interface AdminRuntimeConfig {
-        apiVersion: 'v1';
-        system: {
-            nameZh: string;
-            nameEn: string;
-            logo: string;
-            icpCode: string;
-            version: string;
-            defaultView: string;
-            defaultColorMode: 'light' | 'dark' | 'system';
-        };
-        theme: {id: string; version: string};
-        features: Record<string, boolean>;
-        legacySystemConfig: Window['SystemConfig'];
-    }
-
-    interface Window {
-        PikaRuntime: AdminRuntimeConfig;
-        SystemConfig: {
-            SystemNameZh: string;
-            SystemNameEn: string;
-            ICPCode: string;
-            DefaultView: string;
-            Version: string;
-        };
-    }
-}
diff --git a/web/src/pages/AdminLayout/Header.tsx b/web/src/layouts/AdminLayout/Header.tsx
similarity index 96%
rename from web/src/pages/AdminLayout/Header.tsx
rename to web/src/layouts/AdminLayout/Header.tsx
index 5b0a091..4abbceb 100644
--- a/web/src/pages/AdminLayout/Header.tsx
+++ b/web/src/layouts/AdminLayout/Header.tsx
@@ -4,6 +4,7 @@ import type {MenuProps} from 'antd';
 import {App as AntApp, Avatar, Button, Dropdown, Space} from 'antd';
 import {BookOpen, Eye, LogOut, Moon, Sun, User as UserIcon} from 'lucide-react';
 import {logout} from '@/api/auth';
+import {useRuntimeConfig} from '@/api/runtime';
 import type {User} from '@/types';
 
 interface HeaderProps {
@@ -16,6 +17,7 @@ interface HeaderProps {
 export const AdminHeader = ({userInfo, appliedTheme, themeButtonRef, onToggleTheme}: HeaderProps) => {
     const navigate = useNavigate();
     const {message: messageApi, modal} = AntApp.useApp();
+    const {data: runtime} = useRuntimeConfig();
 
     const handleLogout = () => {
         modal.confirm({
@@ -51,7 +53,7 @@ export const AdminHeader = ({userInfo, appliedTheme, themeButtonRef, onToggleThe
                         />
                     </div>
                     <div>
-                        <p className="text-xs uppercase tracking-[0.3em] text-white/60">{window.SystemConfig?.SystemNameZh}</p>
+                        <p className="text-xs uppercase tracking-[0.3em] text-white/60">{runtime?.system.nameZh}</p>
                         <p className="text-sm font-semibold">控制台</p>
                     </div>
                 </div>
diff --git a/web/src/pages/AdminLayout/MobileNav.tsx b/web/src/layouts/AdminLayout/MobileNav.tsx
similarity index 100%
rename from web/src/pages/AdminLayout/MobileNav.tsx
rename to web/src/layouts/AdminLayout/MobileNav.tsx
diff --git a/web/src/pages/AdminLayout/Sider.tsx b/web/src/layouts/AdminLayout/Sider.tsx
similarity index 95%
rename from web/src/pages/AdminLayout/Sider.tsx
rename to web/src/layouts/AdminLayout/Sider.tsx
index 8717457..5aa4db1 100644
--- a/web/src/pages/AdminLayout/Sider.tsx
+++ b/web/src/layouts/AdminLayout/Sider.tsx
@@ -1,11 +1,13 @@
 import {useLocation, useNavigate} from 'react-router-dom';
 import {menuItems, SIDEBAR_WIDTH, HEADER_HEIGHT} from './menu';
 import {cn} from '@/lib/utils';
+import {useRuntimeConfig} from '@/api/runtime';
 import type {VersionInfo} from '@/api/version';
 
 export const AdminSider = ({version}: {version?: VersionInfo}) => {
     const location = useLocation();
     const navigate = useNavigate();
+    const {data: runtime} = useRuntimeConfig();
 
     return (
         <aside
@@ -52,7 +54,7 @@ export const AdminSider = ({version}: {version?: VersionInfo}) => {
                             <div className="mt-2">
                                 <p className="text-sm font-semibold text-gray-900 dark:text-slate-100">Server: {version.version}</p>
                                 <p className="text-sm font-semibold text-gray-900 dark:text-slate-100">Agent: {version.agentVersion}</p>
-                                <p className="text-[11px] text-gray-500 dark:text-slate-400 uppercase tracking-[0.1em]">{window.SystemConfig?.SystemNameEn}</p>
+                                <p className="text-[11px] text-gray-500 dark:text-slate-400 uppercase tracking-[0.1em]">{runtime?.system.nameEn}</p>
                             </div>
                         </div>
                     </div>
diff --git a/web/src/pages/AdminLayout/index.tsx b/web/src/layouts/AdminLayout/index.tsx
similarity index 100%
rename from web/src/pages/AdminLayout/index.tsx
rename to web/src/layouts/AdminLayout/index.tsx
diff --git a/web/src/pages/AdminLayout/menu.tsx b/web/src/layouts/AdminLayout/menu.tsx
similarity index 100%
rename from web/src/pages/AdminLayout/menu.tsx
rename to web/src/layouts/AdminLayout/menu.tsx
diff --git a/web/src/pages/AdminLayout/useThemeToggle.ts b/web/src/layouts/AdminLayout/useThemeToggle.ts
similarity index 100%
rename from web/src/pages/AdminLayout/useThemeToggle.ts
rename to web/src/layouts/AdminLayout/useThemeToggle.ts
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 791bf06..bc67fcb 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -8,31 +8,14 @@ import './index.css';
 
 dayjs.locale('zh-cn');
 
-// 异步加载运行时配置，不阻塞渲染
-fetch('/api/config')
-    .then((res) => res.ok ? res.json() : Promise.reject())
-    .then((payload) => {
-        window.PikaRuntime = payload;
-        window.SystemConfig = payload.legacySystemConfig;
-    })
-    .catch(() => {
-        window.SystemConfig = {
-            SystemNameZh: '皮卡监控',
-            SystemNameEn: 'Pika Monitor',
-            ICPCode: '',
-            DefaultView: 'grid',
-            Version: '',
-        };
-    })
-    .finally(() => {
-        const queryClient = new QueryClient({
-            defaultOptions: {queries: {refetchOnWindowFocus: false, retry: 1}},
-        });
-        createRoot(document.getElementById('root')!).render(
-            <StrictMode>
-                <QueryClientProvider client={queryClient}>
-                    <AdminApp/>
-                </QueryClientProvider>
-            </StrictMode>,
-        );
-    });
+const queryClient = new QueryClient({
+    defaultOptions: {queries: {refetchOnWindowFocus: false, retry: 1}},
+});
+
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+        <QueryClientProvider client={queryClient}>
+            <AdminApp/>
+        </QueryClientProvider>
+    </StrictMode>,
+);
diff --git a/web/src/pages/Agents/AgentList.tsx b/web/src/pages/Agents/AgentList.tsx
index a21d7f5..16a1acd 100644
--- a/web/src/pages/Agents/AgentList.tsx
+++ b/web/src/pages/Agents/AgentList.tsx
@@ -9,7 +9,7 @@ import dayjs from 'dayjs';
 import {deleteAgent, getTags, listAgentsByAdmin} from '@/api/agent.ts';
 import type {Agent} from '@/types';
 import {getErrorMessage} from '@/lib/utils';
-import {PageHeader} from '@/components';
+import {PageHeader} from '@/components/PageHeader';
 import AgentEditModal from './AgentEditModal';
 import BatchTagsModal from './BatchTagsModal';
 import BatchTamperProtectionModal from './BatchTamperProtectionModal';
diff --git a/web/src/pages/AlertRecords/index.tsx b/web/src/pages/AlertRecords/index.tsx
index cbc0d10..00ea251 100644
--- a/web/src/pages/AlertRecords/index.tsx
+++ b/web/src/pages/AlertRecords/index.tsx
@@ -7,7 +7,7 @@ import {clearAlertRecords, getAlertRecords} from '@/api/alert.ts';
 import type {AlertRecord} from '@/types';
 import dayjs from 'dayjs';
 import {getErrorMessage} from '@/lib/utils';
-import {PageHeader} from '@/components';
+import {PageHeader} from '@/components/PageHeader';
 import {useQuery, useQueryClient} from '@tanstack/react-query';
 import {listAgentsByAdmin} from "@/api/agent.ts";
 
diff --git a/web/src/pages/ApiKeys/ApiKeyList.tsx b/web/src/pages/ApiKeys/ApiKeyList.tsx
index 2f2a3b9..8d9bb7f 100644
--- a/web/src/pages/ApiKeys/ApiKeyList.tsx
+++ b/web/src/pages/ApiKeys/ApiKeyList.tsx
@@ -7,7 +7,7 @@ import {deleteApiKey, disableApiKey, enableApiKey, getApiKeyRaw, listApiKeys} fr
 import type {ApiKey} from '@/types';
 import dayjs from 'dayjs';
 import {getErrorMessage} from '@/lib/utils';
-import {PageHeader} from '@/components';
+import {PageHeader} from '@/components/PageHeader';
 import copy from 'copy-to-clipboard';
 import ApiKeyModal from './ApiKeyModal';
 import ShowApiKeyModal from './ShowApiKeyModal';
diff --git a/web/src/pages/DDNS/index.tsx b/web/src/pages/DDNS/index.tsx
index 2673a63..54147e8 100644
--- a/web/src/pages/DDNS/index.tsx
+++ b/web/src/pages/DDNS/index.tsx
@@ -3,7 +3,7 @@ import {useSearchParams} from 'react-router-dom';
 import {App, Button, Divider, Dropdown, Input, Space, Table, Tag, Tooltip} from 'antd';
 import type {ColumnsType} from 'antd/es/table';
 import type {MenuProps} from 'antd';
-import {PageHeader} from '@/components';
+import {PageHeader} from '@/components/PageHeader';
 import {Globe, MoreVertical, Plus, Settings} from 'lucide-react';
 import dayjs from 'dayjs';
 import type {DDNSConfig} from '@/types';
diff --git a/web/src/pages/Login/index.tsx b/web/src/pages/Login/index.tsx
index 6407a8b..9aa8175 100644
--- a/web/src/pages/Login/index.tsx
+++ b/web/src/pages/Login/index.tsx
@@ -4,11 +4,13 @@ import { App, Button, ConfigProvider, Form, Input, theme } from 'antd';
 import { GithubOutlined, GlobalOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
 import { Moon, Sun } from 'lucide-react';
 import { getAuthConfig, getGitHubAuthURL, getOIDCAuthURL, login } from '@/api/auth.ts';
+import {useRuntimeConfig} from '@/api/runtime';
 import type { LoginRequest } from '@/types';
 import { useColorMode } from '@/shared/contexts/ColorModeContext';
 import { flushSync } from 'react-dom';
 
 const Login = () => {
+    const {data: runtime} = useRuntimeConfig();
     const [loading, setLoading] = useState(false);
     const [oidcEnabled, setOidcEnabled] = useState(false);
     const [githubEnabled, setGithubEnabled] = useState(false);
@@ -147,7 +149,7 @@ const Login = () => {
                     {/* 头部：品牌名称 */}
                     <div className="mb-10 text-center">
                         <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-zinc-100">
-                            {window.SystemConfig.SystemNameZh}
+                            {runtime?.system.nameZh || '皮卡监控'}
                         </h1>
                     </div>
 
diff --git a/web/src/pages/ManageApiKeys/ManageApiKeyList.tsx b/web/src/pages/ManageApiKeys/ManageApiKeyList.tsx
index 3395e3e..27c6af5 100644
--- a/web/src/pages/ManageApiKeys/ManageApiKeyList.tsx
+++ b/web/src/pages/ManageApiKeys/ManageApiKeyList.tsx
@@ -7,7 +7,7 @@ import {deleteManageApiKey, disableManageApiKey, enableManageApiKey, listManageA
 import type {ApiKey} from '@/types';
 import dayjs from 'dayjs';
 import {getErrorMessage} from '@/lib/utils';
-import {PageHeader} from '@/components';
+import {PageHeader} from '@/components/PageHeader';
 import ManageApiKeyModal from './ManageApiKeyModal';
 import ShowManageApiKeyModal from './ShowManageApiKeyModal';
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
diff --git a/web/src/pages/Monitors/MonitorList.tsx b/web/src/pages/Monitors/MonitorList.tsx
index 3273e85..8604da9 100644
--- a/web/src/pages/Monitors/MonitorList.tsx
+++ b/web/src/pages/Monitors/MonitorList.tsx
@@ -8,7 +8,7 @@ import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
 import {deleteMonitor, listMonitors} from '@/api/monitor.ts';
 import type {MonitorTask} from '@/types';
 import {getErrorMessage} from '@/lib/utils';
-import {PageHeader} from '@/components';
+import {PageHeader} from '@/components/PageHeader';
 import MonitorModal from './MonitorModal';
 
 const MonitorList = () => {
diff --git a/web/src/pages/Settings/SystemConfig.tsx b/web/src/pages/Settings/SystemConfig.tsx
index 6615b9c..0b77114 100644
--- a/web/src/pages/Settings/SystemConfig.tsx
+++ b/web/src/pages/Settings/SystemConfig.tsx
@@ -25,16 +25,7 @@ const SystemConfigComponent = () => {
         mutationFn: saveSystemConfig,
         onSuccess: async () => {
             await queryClient.invalidateQueries({ queryKey: ['systemConfig'] });
-            try {
-                const response = await fetch('/api/config');
-                if (response.ok) {
-                    const runtime = await response.json();
-                    window.PikaRuntime = runtime;
-                    window.SystemConfig = runtime.legacySystemConfig;
-                }
-            } catch {
-                // 管理界面不依赖这次刷新成功；公开页面刷新后仍会读取最新配置。
-            }
+            await queryClient.invalidateQueries({ queryKey: ['runtime-config'] });
             messageApi.success('保存成功，公开页面刷新后生效');
         },
         onError: (error: unknown) => {
diff --git a/web/src/pages/Settings/index.tsx b/web/src/pages/Settings/index.tsx
index 8ab09b6..41d7faa 100644
--- a/web/src/pages/Settings/index.tsx
+++ b/web/src/pages/Settings/index.tsx
@@ -5,7 +5,7 @@ import NotificationChannels from './NotificationChannels';
 import SystemConfig from './SystemConfig';
 import PublicIPConfig from './PublicIPConfig';
 import ThemeSettings from './ThemeSettings';
-import {PageHeader} from "@/components";
+import {PageHeader} from "@/components/PageHeader";
 import {useSearchParams} from "react-router-dom";
 
 // 默认 IPv4 API 列表
diff --git a/web/src/router/admin.tsx b/web/src/router/admin.tsx
index eadb708..7c8acbd 100644
--- a/web/src/router/admin.tsx
+++ b/web/src/router/admin.tsx
@@ -5,7 +5,7 @@ import PrivateRoute from '@/components/PrivateRoute';
 const LoginPage = lazy(() => import('@/pages/Login'));
 const GitHubCallbackPage = lazy(() => import('@/pages/Login/GitHubCallback'));
 const OIDCCallbackPage = lazy(() => import('@/pages/Login/OIDCCallback'));
-const AdminLayout = lazy(() => import('@/pages/AdminLayout'));
+const AdminLayout = lazy(() => import('@/layouts/AdminLayout'));
 const AgentListPage = lazy(() => import('@/pages/Agents/AgentList'));
 const AgentDetailPage = lazy(() => import('@/pages/Agents/AgentDetail'));
 const AgentInstallOneClickPage = lazy(() => import('@/pages/Agents/AgentInstallOneClick'));
diff --git a/web/src/shared/contexts/ColorModeContext.tsx b/web/src/shared/contexts/ColorModeContext.tsx
index dfc06f2..c5c3e5f 100644
--- a/web/src/shared/contexts/ColorModeContext.tsx
+++ b/web/src/shared/contexts/ColorModeContext.tsx
@@ -1,4 +1,5 @@
 import {createContext, useContext, useEffect, useState, type ReactNode} from 'react';
+import {useRuntimeConfig} from '@/api/runtime';
 
 export type ColorMode = 'light' | 'dark' | 'system';
 export type ResolvedColorMode = 'light' | 'dark';
@@ -12,12 +13,22 @@ interface ColorModeContextValue {
 const ColorModeContext = createContext<ColorModeContextValue | undefined>(undefined);
 
 export const ColorModeProvider = ({children}: {children: ReactNode}) => {
+    const {data: runtime} = useRuntimeConfig();
     const [colorMode, setColorModeState] = useState<ColorMode>(() => {
         const saved = localStorage.getItem('colorMode') || localStorage.getItem('theme');
         if (saved === 'auto') return 'system';
         if (saved === 'light' || saved === 'dark' || saved === 'system') return saved;
-        return window.PikaRuntime?.system?.defaultColorMode || 'system';
+        return 'system';
     });
+
+    // 运行时配置加载后，如果用户没有本地偏好，使用服务端默认值
+    useEffect(() => {
+        if (!runtime) return;
+        const saved = localStorage.getItem('colorMode') || localStorage.getItem('theme');
+        if (!saved) {
+            setColorModeState(runtime.system.defaultColorMode);
+        }
+    }, [runtime]);
     const [resolvedColorMode, setResolvedColorMode] = useState<ResolvedColorMode>('dark');
 
     const setColorMode = (mode: ColorMode) => {