diff --git a/frontend/src/components/app-layout/menu/components/Collapse.vue b/frontend/src/components/app-layout/menu/components/Collapse.vue
index c68c176a7..c59031766 100644
--- a/frontend/src/components/app-layout/menu/components/Collapse.vue
+++ b/frontend/src/components/app-layout/menu/components/Collapse.vue
@@ -14,8 +14,6 @@ const isCollapse = computed((): boolean => menuStore.isCollapse);
 </script>
 
 <style scoped lang="scss">
-@import '../index.scss';
-
 .collapse {
     height: 47px;
     border-top: 1px solid #e4e7ed;
@@ -24,10 +22,9 @@ const isCollapse = computed((): boolean => menuStore.isCollapse);
 .collapse-icon {
     margin-top: 10px;
     margin-left: 25px;
-}
-
-.collapse-icon:hover {
-    color: $primary-color;
-    cursor: pointer;
+    &:hover {
+        color: $primary-color;
+        cursor: pointer;
+    }
 }
 </style>
diff --git a/frontend/src/components/app-layout/menu/components/Logo.vue b/frontend/src/components/app-layout/menu/components/Logo.vue
index 381e305ef..0f0dd289a 100644
--- a/frontend/src/components/app-layout/menu/components/Logo.vue
+++ b/frontend/src/components/app-layout/menu/components/Logo.vue
@@ -10,5 +10,17 @@ defineProps<{ isCollapse: boolean }>();
 </script>
 
 <style scoped lang="scss">
-@import '../index.scss';
+.logo {
+    box-sizing: border-box;
+    height: 55px;
+    margin: 5px 0;
+    img:first-child {
+        width: 130px;
+        object-fit: contain;
+    }
+    img:nth-child(2) {
+        height: 45px;
+        object-fit: contain;
+    }
+}
 </style>
diff --git a/frontend/src/components/app-layout/menu/index.scss b/frontend/src/components/app-layout/menu/index.scss
index 303ff80d5..5229b4a15 100644
--- a/frontend/src/components/app-layout/menu/index.scss
+++ b/frontend/src/components/app-layout/menu/index.scss
@@ -1,79 +1,50 @@
-.menu {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background-color: $menu-backgroup-color;
-
-    transition: all 0.3s ease;
-    .logo {
-        box-sizing: border-box;
-        height: 55px;
-        img:first-child {
-            width: 120px;
-            object-fit: contain;
-            margin-right: 8px;
-            margin-top: 10px;
-        }
-        img:nth-child(2) {
-            width: 50px;
-            object-fit: contain;
-            margin-top: 10px;
-            margin-left: 5px;
-        }
-    }
-    .el-scrollbar {
-        height: calc(100% - 55px);
-        .el-menu {
-            flex: 1;
-            overflow: auto;
-            overflow-x: hidden;
-            border-right: none;
-        }
-    }
-    .menu-footer {
-        height: 30px;
-        background-color: #c0c0c0;
-        text-align: center;
-    }
-}
-
-.el-menu,
-.el-menu--popup {
-    padding: 4px;
+.el-menu {
     background: none !important;
-
+    width: 100%;
+    padding: 0 7px;
     .el-menu-item {
         border-radius: 4px !important;
         background-color: $menu-item-backgroup-color;
-        margin: 10px;
-        height: 44px !important;
+        margin: 6px 0;
+        height: 46px !important;
+        box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
+        box-sizing: border-box;
+        min-width: auto;
+        padding-left: 22px;
 
-        span {
-            color: rgba(31, 35, 41, 1);
+        // span {
+        //     color: rgba(31, 35, 41, 1);
+        // }
+
+        // .el-icon {
+        //     color: rgba(31, 35, 41, 1);
+        // }
+        &:hover {
+            .el-icon {
+                color: $primary-color;
+            }
+
+            span {
+                color: $primary-color;
+            }
         }
-
-        .el-icon {
-            color: rgba(31, 35, 41, 1);
-        }
-
         &.is-active {
             background-color: #ffffff;
 
             border: 2px solid $primary-color;
 
-            span {
-                color: $primary-color;
-            }
+            // span {
+            //     color: $primary-color;
+            // }
 
-            .el-icon {
-                color: $primary-color;
-            }
+            // .el-icon {
+            //     color: $primary-color;
+            // }
 
             &::before {
                 position: absolute;
                 border-radius: 4px;
-                top: 13px;
+                top: 14px;
                 bottom: 15px;
                 left: 12px;
                 width: 4px;
@@ -83,24 +54,7 @@
             }
         }
     }
-
-    :deep(.el-sub-menu) {
-        margin: 10px;
-
-        span {
-            color: rgba(31, 35, 41, 1);
-        }
-        .el-icon {
-            color: rgba(31, 35, 41, 1);
-        }
-
-        .el-sub-menu__title {
-            background-color: $menu-item-backgroup-color !important;
-            height: 44px;
-            border-radius: 4px !important;
-        }
-
-        &.is-opened,
+    .el-sub-menu {
         &.is-active {
             .el-sub-menu__title {
                 span {
@@ -112,39 +66,103 @@
                 }
             }
         }
-
-        .el-menu {
+        .el-sub-menu__title {
             background-color: $menu-item-backgroup-color;
-        }
-        .el-menu-item {
-            border-radius: 4px !important;
-            margin-left: 0px !important;
-            min-width: 100% !important;
+            box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
             height: 44px;
-        }
-    }
+            border-radius: 4px !important;
+            &:hover {
+                .el-icon {
+                    color: $primary-color;
+                }
 
-    .el-menu-item:hover {
-        .el-icon {
-            color: $primary-color;
+                span {
+                    color: $primary-color;
+                }
+            }
         }
-
-        span {
-            color: $primary-color;
-        }
-    }
-
-    .el-sub-menu:hover {
-        .sub-icon {
-            color: $primary-color;
-        }
-
-        .sub-span {
-            color: $primary-color;
+        .el-menu {
+            padding: 0;
+            .el-menu-item {
+                box-shadow: none;
+                padding-left: 35px !important;
+            }
         }
     }
 }
 
-.el-menu--collapse {
-    width: 85px;
+.menu-popper {
+    .el-menu {
+        background-color: $menu-backgroup-color !important;
+        padding: 4px 8px;
+    }
 }
+
+// .el-menu--popup {
+// padding: 4px;
+// background: none !important;
+
+// :deep(.el-sub-menu) {
+//     margin: 10px;
+
+//     span {
+//         color: rgba(31, 35, 41, 1);
+//     }
+//     .el-icon {
+//         color: rgba(31, 35, 41, 1);
+//     }
+
+//     .el-sub-menu__title {
+//         background-color: $menu-item-backgroup-color !important;
+//         height: 44px;
+//         border-radius: 4px !important;
+//     }
+
+//     &.is-opened,
+//     &.is-active {
+//         .el-sub-menu__title {
+//             span {
+//                 color: $primary-color;
+//             }
+
+//             .el-icon {
+//                 color: $primary-color;
+//             }
+//         }
+//     }
+
+//     .el-menu {
+//         background-color: $menu-item-backgroup-color;
+//     }
+//     .el-menu-item {
+//         border-radius: 4px !important;
+//         margin-left: 0px !important;
+//         min-width: 100% !important;
+//         height: 44px;
+//     }
+// }
+
+// .el-menu-item:hover {
+//     .el-icon {
+//         color: $primary-color;
+//     }
+
+//     span {
+//         color: $primary-color;
+//     }
+// }
+
+// .el-sub-menu:hover {
+//     .sub-icon {
+//         color: $primary-color;
+//     }
+
+//     .sub-span {
+//         color: $primary-color;
+//     }
+// }
+// }
+
+// .el-menu--collapse {
+//     width: 85px;
+// }
diff --git a/frontend/src/components/app-layout/menu/index.vue b/frontend/src/components/app-layout/menu/index.vue
index 5bae4eff4..d1acc9c00 100644
--- a/frontend/src/components/app-layout/menu/index.vue
+++ b/frontend/src/components/app-layout/menu/index.vue
@@ -15,9 +15,7 @@
                 :collapse="isCollapse"
                 :collapse-transition="false"
                 :unique-opened="true"
-                background-color="#191a20"
-                text-color="#bdbdc0"
-                active-text-color="#fff"
+                popper-class="menu-popper"
             >
                 <SubItem :menuList="routerMenus"></SubItem>
                 <el-menu-item>
@@ -97,6 +95,29 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import './index.scss';
+.menu {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: $menu-backgroup-color;
+    transition: all 0.3s ease;
+
+    .el-scrollbar {
+        height: calc(100% - 55px);
+        .el-menu {
+            flex: 1;
+            overflow: auto;
+            overflow-x: hidden;
+            border-right: none;
+        }
+    }
+    .menu-footer {
+        height: 30px;
+        background-color: #c0c0c0;
+        text-align: center;
+    }
+}
 </style>