diff --git a/ui/autoMate/src/main/config/window.ts b/ui/autoMate/src/main/config/window.ts
index 0022588..7a6869b 100644
--- a/ui/autoMate/src/main/config/window.ts
+++ b/ui/autoMate/src/main/config/window.ts
@@ -11,8 +11,8 @@ export function createWindow(): BrowserWindow {  // Create the browser window.
       height: 750,
       center: true,
       show: false,
-      // frame: false,
-      // transparent: true,
+      frame: true,
+      transparent: false,
       // alwaysOnTop: true,
       autoHideMenuBar: true,
       ...(process.platform === 'linux' ? { icon } : {}),
diff --git a/ui/autoMate/src/renderer/src/pages/Category/category.scss b/ui/autoMate/src/renderer/src/pages/Category/category.scss
new file mode 100644
index 0000000..2306d5f
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/pages/Category/category.scss
@@ -0,0 +1,22 @@
+.category-page{
+    @apply w-screen h-screen;
+    display: grid;
+    grid-template:
+        "categories content" auto
+        "nav content" 30px/120px auto;
+    
+
+    .categories{
+        @apply border-r;
+        grid-area: categories;
+    }
+
+    .nav {
+        @apply border-t border-r;
+        grid-area: nav;
+    }
+
+    .content {
+        grid-area: content;
+    }
+}
\ No newline at end of file
diff --git a/ui/autoMate/src/renderer/src/pages/Category/index.tsx b/ui/autoMate/src/renderer/src/pages/Category/index.tsx
new file mode 100644
index 0000000..400c5b6
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/pages/Category/index.tsx
@@ -0,0 +1,11 @@
+import "./category.scss"
+
+export const Category = () => {
+    return (
+    <main className="category-page">
+        <div className="categories">categories</div>
+        <div className="nav">nav</div>
+        <div className="content">content</div>
+    </main>
+ )
+}
\ No newline at end of file
diff --git a/ui/autoMate/src/renderer/src/pages/Config/index.tsx b/ui/autoMate/src/renderer/src/pages/Config/index.tsx
index 9e1f72e..36371b5 100644
--- a/ui/autoMate/src/renderer/src/pages/Config/index.tsx
+++ b/ui/autoMate/src/renderer/src/pages/Config/index.tsx
@@ -1,12 +1,8 @@
-import styles from "./styles.module.scss"
+import { Outlet } from "react-router-dom"
 export default function Config(){
     return (
-      <main className={styles.container}>
-        <div> </div>
-        <div> </div>
-        <div className={styles.category}> </div>
-        <div className={styles.nav}> </div>
-        <div className={styles.content}> </div>
+      <main>
+      <Outlet />
       </main>
     )
   }
diff --git a/ui/autoMate/src/renderer/src/pages/Config/styles.module.scss b/ui/autoMate/src/renderer/src/pages/Config/styles.module.scss
index 695b109..988b546 100644
--- a/ui/autoMate/src/renderer/src/pages/Config/styles.module.scss
+++ b/ui/autoMate/src/renderer/src/pages/Config/styles.module.scss
@@ -25,7 +25,7 @@
         }
         &.nav {
             grid-area: nav;
-            @apply border-r;
+            @apply border-r border-t;
         }
     }
 }
\ No newline at end of file
diff --git a/ui/autoMate/src/renderer/src/router/index.tsx b/ui/autoMate/src/renderer/src/router/index.tsx
index 5e79a0f..97d42a3 100644
--- a/ui/autoMate/src/renderer/src/router/index.tsx
+++ b/ui/autoMate/src/renderer/src/router/index.tsx
@@ -1,6 +1,7 @@
 import Config from "@renderer/pages/Config";
 import Home from "@renderer/pages/Home";
 import { createHashRouter } from "react-router-dom";
+import {Category} from "@renderer/pages/Category";
 
 const router = createHashRouter([
   {
@@ -9,7 +10,14 @@ const router = createHashRouter([
   },
   {
     path: "config",
-    element: <Config />
+    element: <Config />,
+    children: [
+      {
+        // 界面第一次打开时，默认显示的页面
+        index: true,
+        element: <Category />
+      }
+    ]
   }
 ])
 export default router