diff --git a/src/assets/css/pages/header.scss b/src/assets/css/pages/header.scss
index eedd195..98ff714 100644
--- a/src/assets/css/pages/header.scss
+++ b/src/assets/css/pages/header.scss
@@ -50,6 +50,7 @@
 
       .item {
         display: inline-block;
+        position: relative;
         font-size: 1.5em;
         transition: {
           property: all;
@@ -72,9 +73,37 @@
         };
       }
 
-      :hover {
+      .item:hover {
         transform: translateY(-5px);
       }
+
+      .item:hover .submenu {
+        display: block;
+      }
+
+      .submenu {
+        display: none;
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        background-color: white;
+        transform: translateY(4px);
+        border: {
+          width: 1px;
+          color: constants.$border-color;
+          style: solid;
+        };
+
+        .item {
+          display: block;
+          padding: 10px;
+          font-size: 0.8em;
+        }
+
+        .item:hover {
+          transform: none;
+        }
+      }
     }
 
     .dropdown-menu-button {
@@ -144,7 +173,7 @@
   }
 }
 
-@media screen and (max-width: 900px){
+@media screen and (max-width: 900px) {
   .dropdown-menu-content.show {
     display: block;
   }
diff --git a/src/components/home/index.tsx b/src/pages/Home.tsx
similarity index 98%
rename from src/components/home/index.tsx
rename to src/pages/Home.tsx
index 0598636..3091de0 100644
--- a/src/components/home/index.tsx
+++ b/src/pages/Home.tsx
@@ -4,7 +4,7 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import { MainFrameworkContext } from '@/pages/MainFramework'
 import Slogan from '@/components/home/Slogan'
 import OxygenToolbox from '@/components/home/OxygenToolbox'
-import Indicator from '@/components/common/Indicator.tsx'
+import Indicator from '@/components/common/Indicator'
 import Footer from '@/components/home/Footer'
 
 const Home: React.FC = () => {
diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx
index 24bcc24..bcf29ea 100644
--- a/src/pages/MainFramework.tsx
+++ b/src/pages/MainFramework.tsx
@@ -90,7 +90,7 @@ const MainFramework: React.FC = () => {
                             <nav>
                                 <ul className={'menu'}>
                                     {routeChildren?.map((route) => {
-                                        return (
+                                        return (route.handle as RouteHandle).menu ? (
                                             <li className={'item'} key={route.id}>
                                                 <NavLink
                                                     to={route.path ?? ''}
@@ -104,7 +104,32 @@ const MainFramework: React.FC = () => {
                                                 >
                                                     {(route.handle as RouteHandle).name}
                                                 </NavLink>
+                                                {route.children ? (
+                                                    <ul className={'submenu'}>
+                                                        {route.children.map((subRoute) => {
+                                                            return (subRoute.handle as RouteHandle)
+                                                                .menu ? (
+                                                                <li
+                                                                    className={'item'}
+                                                                    key={subRoute.id}
+                                                                >
+                                                                    {
+                                                                        (
+                                                                            subRoute.handle as RouteHandle
+                                                                        ).name
+                                                                    }
+                                                                </li>
+                                                            ) : (
+                                                                <></>
+                                                            )
+                                                        })}
+                                                    </ul>
+                                                ) : (
+                                                    <></>
+                                                )}
                                             </li>
+                                        ) : (
+                                            <></>
                                         )
                                     })}
                                 </ul>
diff --git a/src/pages/Tools.tsx b/src/pages/Tools.tsx
new file mode 100644
index 0000000..5a1c5e9
--- /dev/null
+++ b/src/pages/Tools.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Tools: React.FC = () => {
+    return <></>
+}
+
+export default Tools
diff --git a/src/pages/tools/Translation.tsx b/src/pages/tools/Translation.tsx
new file mode 100644
index 0000000..6057f22
--- /dev/null
+++ b/src/pages/tools/Translation.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Translation: React.FC = () => {
+    return <></>
+}
+
+export default Translation
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 808527a..cb8f49d 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -23,7 +23,7 @@ const routes: RouteObject[] = [
                     {
                         path: '',
                         id: 'home',
-                        Component: React.lazy(() => import('@/components/home')),
+                        Component: React.lazy(() => import('@/pages/Home')),
                         handle: {
                             name: '主页',
                             menu: true,
@@ -38,6 +38,38 @@ const routes: RouteObject[] = [
                             menu: true,
                             auth: false
                         }
+                    },
+                    {
+                        path: 'tools',
+                        id: 'tools',
+                        Component: React.lazy(() => import('@/pages/Tools')),
+                        children: [
+                            {
+                                path: 'translation',
+                                id: 'tools-translation',
+                                Component: React.lazy(() => import('@/pages/tools/Translation')),
+                                handle: {
+                                    name: '翻译',
+                                    menu: true,
+                                    auth: false
+                                }
+                            },
+                            {
+                                path: 'translation',
+                                id: 'tools-translationa',
+                                Component: React.lazy(() => import('@/pages/tools/Translation')),
+                                handle: {
+                                    name: '翻译',
+                                    menu: true,
+                                    auth: false
+                                }
+                            }
+                        ],
+                        handle: {
+                            name: '工具',
+                            menu: true,
+                            auth: false
+                        }
                     }
                 ]
             },