diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..14639df
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,2 @@
+VITE_API_URL=http://localhost:8080
+VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..18ccaa0
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,2 @@
+VITE_API_URL=http://api.fatweb.top
+VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file
diff --git a/.env.testing b/.env.testing
new file mode 100644
index 0000000..53be291
--- /dev/null
+++ b/.env.testing
@@ -0,0 +1,3 @@
+NODE_ENV=development
+VITE_API_URL=http://api-test.fatweb.top
+VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file
diff --git a/package.json b/package.json
index 6ec90f0..288a28a 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "dev": "vite",
     "dev-host": "vite --host 0.0.0.0",
     "build": "vite build",
+    "build-test": "vite build --mode testing",
     "clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write src/",
diff --git a/src/assets/css/pages/header.scss b/src/assets/css/pages/header.scss
index eedd195..836974e 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,58 @@
         };
       }
 
-      :hover {
+      .item:hover {
         transform: translateY(-5px);
       }
+
+      .item:hover .submenu {
+        display: block;
+        border: {
+          width: 1px;
+          color: constants.$border-color;
+          style: solid;
+        };
+        animation: 0.3s;
+
+        @include mixins.unique-keyframes {
+          0% {
+            transform: translateY(-10px);
+            opacity: 0;
+          }
+        }
+      }
+
+      .submenu {
+        display: none;
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        background-color: white;
+        overflow: hidden;
+
+        .item {
+          display: block;
+          font-size: 0.8em;
+          transition: all 0s;
+
+          a {
+            display: block;
+            padding: 8px 0;
+          }
+        }
+
+        .item:hover {
+          transform: none;
+          a {
+            background-color: constants.$focus-color !important;
+          }
+        }
+
+        .active {
+          font-weight: bold;
+          border: none;
+        }
+      }
     }
 
     .dropdown-menu-button {
@@ -144,7 +194,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..c867634 100644
--- a/src/pages/MainFramework.tsx
+++ b/src/pages/MainFramework.tsx
@@ -5,6 +5,7 @@ import LoadingMask from '@/components/common/LoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import Icon from '@ant-design/icons'
 import { COLOR_FONT_SECONDARY } from '@/constants/Common.constants.ts'
+import { NavLink } from 'react-router-dom'
 
 export const MainFrameworkContext = createContext<{
     navbarHiddenState: {
@@ -90,7 +91,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 +105,50 @@ 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}
+                                                                >
+                                                                    <NavLink
+                                                                        to={
+                                                                            (route.path ?? '') +
+                                                                            '/' +
+                                                                            (subRoute.path ?? '')
+                                                                        }
+                                                                        className={({
+                                                                            isActive,
+                                                                            isPending
+                                                                        }) =>
+                                                                            isPending
+                                                                                ? 'pending'
+                                                                                : isActive
+                                                                                ? 'active'
+                                                                                : ''
+                                                                        }
+                                                                    >
+                                                                        {
+                                                                            (
+                                                                                subRoute.handle as RouteHandle
+                                                                            ).name
+                                                                        }
+                                                                    </NavLink>
+                                                                </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..580eaf6 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,28 @@ 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
+                                }
+                            }
+                        ],
+                        handle: {
+                            name: '工具',
+                            menu: true,
+                            auth: false
+                        }
                     }
                 ]
             },
diff --git a/src/services/index.tsx b/src/services/index.tsx
index c47f031..700b7b0 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -14,7 +14,7 @@ import {
 import { message } from 'antd'
 
 const service: AxiosInstance = axios.create({
-    baseURL: 'http://localhost:8181',
+    baseURL: import.meta.env.VITE_API_URL,
     timeout: 10000,
     withCredentials: false
 })
@@ -44,7 +44,7 @@ service.interceptors.request.use(
                 jwt.exp * 1000 - new Date().getTime() > 0
             ) {
                 await axios
-                    .get('http://localhost:8181/token', {
+                    .get(import.meta.env.VITE_API_TOKEN_URL, {
                         headers: { token }
                     })
                     .then((value: AxiosResponse<_Response<Token>>) => {
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 2cb4cf2..53a7371 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,5 +1,14 @@
 /// <reference types="vite/client" />
 
+interface ImportMetaEnv {
+    readonly VITE_API_URL: string
+    readonly VITE_API_TOKEN_URL: string
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}
+
 type RouteHandle = {
     name?: string
     menu?: boolean