diff --git a/src/layout/LayoutDefaults/index.vue b/src/layout/LayoutDefaults/index.vue
index 506cdfb..0699cc9 100644
--- a/src/layout/LayoutDefaults/index.vue
+++ b/src/layout/LayoutDefaults/index.vue
@@ -1,6 +1,6 @@
 <template>
   <a-layout class="layout">
-    <a-layout-sider>Sider</a-layout-sider>
+    <Aside />
     <a-layout>
       <a-layout-header>Header</a-layout-header>
       <a-layout-content>Content</a-layout-content>
@@ -10,6 +10,7 @@
 </template>
 
 <script setup lang="ts">
+import Aside from "@/layout/components/Aside/index.vue";
 defineOptions({ name: "LayoutDefaults" });
 </script>
 
diff --git a/src/layout/components/Aside/index.vue b/src/layout/components/Aside/index.vue
new file mode 100644
index 0000000..e8542f4
--- /dev/null
+++ b/src/layout/components/Aside/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <a-layout-sider :width="220">
+    <div class="logo_head"></div>
+    <a-scrollbar outer-class="aside_scroll">
+      <div class="aside_menu"></div>
+    </a-scrollbar>
+  </a-layout-sider>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.logo_head {
+  height: 60px;
+  box-shadow: inset 0 0 0 1px red;
+}
+
+.aside_scroll {
+  height: 100%;
+  box-shadow: inset 0 0 0 1px black;
+  .aside_menu {
+    box-shadow: inset 0 0 0 1px cyan;
+  }
+}
+</style>