diff --git a/frontend/src/hooks/usePageTitle.ts b/frontend/src/hooks/usePageTitle.ts
new file mode 100644
index 00000000..0ff64660
--- /dev/null
+++ b/frontend/src/hooks/usePageTitle.ts
@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const TITLES: Record<string, string> = {
+  '/': 'Overview',
+  '/inbounds': 'Inbounds',
+  '/clients': 'Clients',
+  '/nodes': 'Nodes',
+  '/settings': 'Settings',
+  '/xray': 'Xray Config',
+  '/api-docs': 'API Docs',
+};
+
+export function usePageTitle() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    const title = TITLES[pathname] || '3X-UI';
+    const host = window.location.hostname;
+    document.title = host ? `${host} - ${title}` : title;
+  }, [pathname]);
+}
diff --git a/frontend/src/layouts/PanelLayout.tsx b/frontend/src/layouts/PanelLayout.tsx
index fce2ce54..bbecf636 100644
--- a/frontend/src/layouts/PanelLayout.tsx
+++ b/frontend/src/layouts/PanelLayout.tsx
@@ -1,8 +1,10 @@
 import { Outlet } from 'react-router-dom';
 
 import { useWebSocketBridge } from '@/api/websocketBridge';
+import { usePageTitle } from '@/hooks/usePageTitle';
 
 export default function PanelLayout() {
   useWebSocketBridge();
+  usePageTitle();
   return <Outlet />;
 }
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 837c8400..a4da5109 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -4,14 +4,12 @@ import { message } from 'antd';
 import 'antd/dist/reset.css';
 
 import { setupAxios } from '@/api/axios-init.js';
-import { applyDocumentTitle } from '@/utils';
 import { readyI18n } from '@/i18n/react';
 import { ThemeProvider } from '@/hooks/useTheme';
 import { QueryProvider } from '@/api/QueryProvider';
 import { router } from '@/routes';
 
 setupAxios();
-applyDocumentTitle();
 
 const messageContainer = document.getElementById('message');
 if (messageContainer) {