diff --git a/index.html b/index.html
index d74798c..af994f7 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vite App</title>
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_2685283_g37f9g4ikw8.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_2685283_d0nzj20hrzk.css">
 </head>
 
 <body>
diff --git a/src/App.vue b/src/App.vue
index cafeed7..d3abfbe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,12 @@
 <template>
-  <div>
+  <n-config-provider :theme="darkTheme">
     <router-view></router-view>
-  </div>
+  </n-config-provider>
 </template>
 
 <script lang="ts" setup>
+import { darkTheme } from 'naive-ui'
+
 
 </script>
 
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index a1f9011..0e8a598 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -11,46 +11,6 @@
 import { ref } from '@vue/reactivity';
 import { AppMenu } from './components';
 let menus = ref([
-    {
-        href: '/',
-        icon: "icon-homefill",
-        text: "hello"
-    },
-    {
-        href: '/main',
-        icon: "icon-peoplefill",
-        text: "hello"
-    },
-    {
-        href: '/',
-        icon: "icon-homefill",
-        text: "hello"
-    },
-    {
-        href: '/main',
-        icon: "icon-peoplefill",
-        text: "hello"
-    },
-    {
-        href: '/',
-        icon: "icon-homefill",
-        text: "hello"
-    },
-    {
-        href: '/main',
-        icon: "icon-peoplefill",
-        text: "hello"
-    },
-    {
-        href: '/',
-        icon: "icon-homefill",
-        text: "hello"
-    },
-    {
-        href: '/main',
-        icon: "icon-peoplefill",
-        text: "hello"
-    },
     {
         href: '/',
         icon: "icon-homefill",
@@ -66,21 +26,6 @@ let menus = ref([
         icon: "icon-videofill",
         text: "hello"
     },
-    {
-        href: '/',
-        icon: "icon-videofill",
-        text: "hello"
-    },
-    {
-        href: '/',
-        icon: "icon-videofill",
-        text: "hello"
-    },
-    {
-        href: '/',
-        icon: "icon-videofill",
-        text: "hello"
-    }
 ])
 </script>
 
@@ -88,7 +33,7 @@ let menus = ref([
 .layout-page {
     width: 100vw;
     height: 100vh;
-    @apply flex justify-center items-center;
+    @apply flex justify-center items-center overflow-hidden;
 }
 
 .layout-main {
@@ -96,10 +41,10 @@ let menus = ref([
     height: 800px;
     width: 1400px;
     .menu {
-        width: 70px;
+        width: 90px;
     }
     .main {
-        @apply p-4;
+        @apply pt-6 pr-6 pb-6;
         flex: 1;
     }
 }
diff --git a/src/layout/components/AppMenu.vue b/src/layout/components/AppMenu.vue
index e62f4ba..c582c66 100644
--- a/src/layout/components/AppMenu.vue
+++ b/src/layout/components/AppMenu.vue
@@ -53,7 +53,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .app-menu {
-  @apply flex-col items-center justify-center p-4;
+  @apply flex-col items-center justify-center p-6;
   max-width: 100px;
 }
 .app-menu-item-link,
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2f8f278..436a354 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,9 +1,21 @@
 <template>
-    <div>Home</div>
+    <div class="main-page">
+        <!--音乐搜索框 -->
+        <div class="search-box">
+            <div class="search-box-input">
+                <n-input size="large" round placeholder="搜索歌曲或歌手...">
+                    <template #prefix>
+                        <i class="iconfont icon-search"></i>
+                    </template>
+                </n-input>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script lang="ts" setup>
 
+
 </script>
 
 <style lang="scss" scoped>
