diff --git a/www/src/components/NavMenus.tsx b/www/src/components/NavMenus.tsx
index 5f11623bd..ad047f22b 100644
--- a/www/src/components/NavMenus.tsx
+++ b/www/src/components/NavMenus.tsx
@@ -36,7 +36,7 @@ export const NavMenus = () => {
     <Tools>
       <Link to="/">Home</Link>
       <Link to="/extensions">Extensions</Link>
-      <Link to="/theme/">Themes</Link>
+      <Link to="/theme">Themes</Link>
       <Link to="/editor/theme">Themes Editor</Link>
       <Link to="/theme/doc">Theme Doc</Link>
       <Hyperlink href="https://github.com/uiwjs/react-codemirror" target="__blank">
diff --git a/www/src/index.tsx b/www/src/index.tsx
index fdbe4bd7c..c4ecb88a0 100644
--- a/www/src/index.tsx
+++ b/www/src/index.tsx
@@ -72,7 +72,8 @@ root.render(
         <Route path=":type" element={<ThemeEditor />} />
       </Route>
       <Route path="/theme/" element={<ThemeLayout />}>
-        <Route index element={<ThemesHome />} />
+        <Route index element={<Navigate to="home" replace />} />
+        <Route path="home" element={<ThemesHome />} />
         <Route path="data" element={<Navigate to="sublime" replace />} />
         <Route path="data/:name" element={<ThemeOkaidia />} />
         <Route path="data/:name/*" element={<ThemeOkaidia />} />
diff --git a/www/src/pages/home/index.tsx b/www/src/pages/home/index.tsx
index bd25ce7e1..d489d4174 100644
--- a/www/src/pages/home/index.tsx
+++ b/www/src/pages/home/index.tsx
@@ -144,7 +144,7 @@ export default function App() {
           <Link to="/editor/theme" className="special">
             Theme Editor
           </Link>
-          <Link to="/theme/" className="themes">
+          <Link to="/theme" className="themes">
             Themes
           </Link>
           <Link to="/extensions" className="extensions">
diff --git a/www/src/pages/theme/themes/SiderMenus.tsx b/www/src/pages/theme/themes/SiderMenus.tsx
index 9140ae278..a3eadceb4 100644
--- a/www/src/pages/theme/themes/SiderMenus.tsx
+++ b/www/src/pages/theme/themes/SiderMenus.tsx
@@ -25,7 +25,7 @@ export const MenuItem = styled(NavLink)`
 export function SiderMenus() {
   return (
     <Sider>
-      <MenuItem to={`/theme/`}>Home</MenuItem>
+      <MenuItem to="/theme/home">Home</MenuItem>
       {Object.keys(themeData).map((name, key) => {
         const [_name, _theme, ...other] = toSnakeCase(name) || [];
         const title = [_name, _theme, ...other]