diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index a1c2680..51af9ea 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -1,5 +1,6 @@
-import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
 import { tools } from "@/components/tool";
+import { Link } from "react-router-dom";
 
 export const AppSidebar = () => (
   <Sidebar>
@@ -7,16 +8,25 @@ export const AppSidebar = () => (
       Lite Kit
     </SidebarHeader>
     <SidebarContent>
-      {
-        tools.map((tool) => (
-          <SidebarMenuItem key={tool.name}>
-            <SidebarMenuButton>
-              {tool.icon}
-              {tool.name}
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        ))
-      }
+      <SidebarGroup>
+        <SidebarGroupLabel>
+          Tools
+        </SidebarGroupLabel>
+        <SidebarGroupContent>
+          {
+            tools.map((tool) => (
+              <SidebarMenuItem key={tool.name}>
+                <SidebarMenuButton asChild>
+                  <Link to={`/tool/${tool.path}`} title={tool.description}>
+                    {tool.icon}
+                    {tool.name}
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))
+          }
+        </SidebarGroupContent>
+      </SidebarGroup>
     </SidebarContent>
     <SidebarFooter>
       <a href="mailto:litek@mail.typist.cc">contact us</a>
diff --git a/src/layout.tsx b/src/layout.tsx
index 21994fa..b5f5e26 100644
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -1,11 +1,12 @@
-import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
-import { Sidebar } from "@/components/ui/sidebar"
 import type { FC } from "react"
 import { Outlet } from "react-router-dom";
 
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/sidebar";
+
 export const Layout: FC = () => (
   <SidebarProvider>
-    <Sidebar />
+    <AppSidebar />
     <main>
       <SidebarTrigger />
       <Outlet />
diff --git a/src/router.tsx b/src/router.tsx
index 72d384c..c750c18 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -4,8 +4,8 @@ import {
   RouterProvider,
 } from "react-router-dom";
 
-import { Layout } from "./layout";
 import { tools } from "@/components/tool";
+import { Layout } from "./layout";
 
 // 路由配置
 const router = createBrowserRouter([
@@ -14,11 +14,11 @@ const router = createBrowserRouter([
     element: <Layout />,
     children: [
       {
-        path: "tools",
+        path: "tool",
         children: [
           ...tools.map((tool) => (
             {
-              path: tool.name,
+              path: tool.path,
               element: tool.component,
             }
           )),
@@ -33,13 +33,13 @@ const router = createBrowserRouter([
   {
     index: true,
     loader: () => {
-      return redirect("/tools");
+      return redirect("/tool");
     },
   },
   {
     path: "*",
     loader: () => {
-      return redirect("/tools");
+      return redirect("/tool");
     },
   },
 ]);