diff --git a/frontend/src/components/app-layout/menu/components/Collapse.vue b/frontend/src/components/app-layout/menu/components/Collapse.vue
index 67bb4688c..c68c176a7 100644
--- a/frontend/src/components/app-layout/menu/components/Collapse.vue
+++ b/frontend/src/components/app-layout/menu/components/Collapse.vue
@@ -25,4 +25,9 @@ const isCollapse = computed((): boolean => menuStore.isCollapse);
     margin-top: 10px;
     margin-left: 25px;
 }
+
+.collapse-icon:hover {
+    color: $primary-color;
+    cursor: pointer;
+}
 </style>
diff --git a/frontend/src/components/app-layout/menu/components/sub-item.vue b/frontend/src/components/app-layout/menu/components/sub-item.vue
index 848de48ac..29f64bf19 100644
--- a/frontend/src/components/app-layout/menu/components/sub-item.vue
+++ b/frontend/src/components/app-layout/menu/components/sub-item.vue
@@ -1,11 +1,15 @@
 <template>
     <template v-for="subItem in menuList" :key="subItem.path">
-        <el-sub-menu v-if="subItem.children && subItem.children.length > 1" :index="subItem.path">
+        <el-sub-menu
+            v-if="subItem.children && subItem.children.length > 1"
+            :index="subItem.path"
+            popper-class="menu-popper"
+        >
             <template #title>
-                <el-icon>
+                <el-icon class="sub-icon">
                     <SvgIcon :iconName="(subItem.meta?.icon as string)" :className="'svg-icon'"></SvgIcon>
                 </el-icon>
-                <span>{{ $t(subItem.meta?.title as string) }}</span>
+                <span class="sub-span">{{ $t(subItem.meta?.title as string) }}</span>
             </template>
             <SubItem :menuList="subItem.children" />
         </el-sub-menu>
diff --git a/frontend/src/components/app-layout/menu/index.scss b/frontend/src/components/app-layout/menu/index.scss
index 425b61f2f..ef7ad9c5d 100644
--- a/frontend/src/components/app-layout/menu/index.scss
+++ b/frontend/src/components/app-layout/menu/index.scss
@@ -51,6 +51,7 @@
         span {
             color: rgba(31, 35, 41, 1);
         }
+
         .el-icon {
             color: rgba(31, 35, 41, 1);
         }
@@ -121,10 +122,28 @@
             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;
-
-    // margin-right: 10px;
 }
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 18e6848e3..6e8c1f6f9 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -221,3 +221,9 @@
         border-radius: 0;
     }
 }
+
+.menu-popper {
+    .el-menu--popup-right-start {
+        background-color: rgba(0, 94, 235, 0.1);
+    }
+}
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 7e93f2ac9..c71f2856e 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,2 +1 @@
-@use './theme.scss';
 @use 'fit2cloud-ui-plus/src/styles/index.scss';
diff --git a/frontend/src/styles/theme.scss b/frontend/src/styles/theme.scss
deleted file mode 100644
index 082a7d2c0..000000000
--- a/frontend/src/styles/theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// $primary-color: #005eeb;
-// @forward 'element-plus/theme-chalk/src/common/var.scss' with (
-//     $colors: (
-//         'primary': (
-//             'base': $primary-color,
-//         ),
-//     )
-// );
-
-// @use 'element-plus/theme-chalk/src/common/var.scss' as *;