diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index a2be18cd0..234eb0714 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -14,6 +14,7 @@ declare module 'vue' {
     BreadCrumbsItem: typeof import('./src/components/bread-crumbs/bread-crumbs-item.vue')['default']
     CardWithHeader: typeof import('./src/components/card-with-header/index.vue')['default']
     Codemirror: typeof import('./src/components/codemirror-dialog/codemirror.vue')['default']
+    Collapse: typeof import('./src/components/app-layout/menu/components/Collapse.vue')['default']
     ComplexTable: typeof import('./src/components/complex-table/index.vue')['default']
     ConfirmDialog: typeof import('./src/components/confirm-dialog/index.vue')['default']
     ContainerLog: typeof import('./src/components/container-log/index.vue')['default']
diff --git a/frontend/src/components/app-layout/menu/components/Collapse.vue b/frontend/src/components/app-layout/menu/components/Collapse.vue
new file mode 100644
index 000000000..67bb4688c
--- /dev/null
+++ b/frontend/src/components/app-layout/menu/components/Collapse.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="collapse">
+        <el-icon class="collapse-icon" :size="25" @click="menuStore.setCollapse()">
+            <component :is="isCollapse ? 'expand' : 'fold'"></component>
+        </el-icon>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { MenuStore } from '@/store/modules/menu';
+const menuStore = MenuStore();
+const isCollapse = computed((): boolean => menuStore.isCollapse);
+</script>
+
+<style scoped lang="scss">
+@import '../index.scss';
+
+.collapse {
+    height: 47px;
+    border-top: 1px solid #e4e7ed;
+}
+
+.collapse-icon {
+    margin-top: 10px;
+    margin-left: 25px;
+}
+</style>
diff --git a/frontend/src/components/app-layout/menu/index.scss b/frontend/src/components/app-layout/menu/index.scss
index ce0a75fa7..425b61f2f 100644
--- a/frontend/src/components/app-layout/menu/index.scss
+++ b/frontend/src/components/app-layout/menu/index.scss
@@ -122,3 +122,9 @@
         }
     }
 }
+
+.el-menu--collapse {
+    width: 85px;
+
+    // margin-right: 10px;
+}
diff --git a/frontend/src/components/app-layout/menu/index.vue b/frontend/src/components/app-layout/menu/index.vue
index 4a4b98249..539834edc 100644
--- a/frontend/src/components/app-layout/menu/index.vue
+++ b/frontend/src/components/app-layout/menu/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         class="menu"
-        :style="{ width: isCollapse ? '65px' : '180px' }"
+        :style="{ width: isCollapse ? '75px' : '180px' }"
         element-loading-text="Loading..."
         :element-loading-spinner="loadingSvg"
         element-loading-svg-view-box="-10, -10, 50, 50"
@@ -30,6 +30,7 @@
                 </el-menu-item>
             </el-menu>
         </el-scrollbar>
+        <Collapse />
     </div>
 </template>
 
@@ -39,6 +40,7 @@ import { RouteRecordRaw, useRoute } from 'vue-router';
 import { MenuStore } from '@/store/modules/menu';
 import { loadingSvg } from '@/utils/svg';
 import Logo from './components/logo.vue';
+import Collapse from './components/Collapse.vue';
 import SubItem from './components/sub-item.vue';
 import router, { menuList } from '@/routers/router';
 import { logOutApi } from '@/api/modules/auth';