diff --git a/src/layouts/components/siderBar/index.vue b/src/layouts/components/siderBar/index.vue
index 598df2a..cb021af 100644
--- a/src/layouts/components/siderBar/index.vue
+++ b/src/layouts/components/siderBar/index.vue
@@ -168,13 +168,14 @@ export default defineComponent({
       @include menu-item;
       padding: 8px;
       &:hover {
-        background: rgba(109, 76, 254, 0.08);
+        background-color: rgba(109, 76, 254, 0.08);
         color: #6d4cfe;
         .svg-icon {
           color: #6d4cfe;
         }
       }
       &.active {
+        background-color: #fff !important;
         .label,
         .svg-icon {
           color: #6d4cfe;
diff --git a/src/layouts/components/siderBar/style.scss b/src/layouts/components/siderBar/style.scss
index 89459eb..0b6314c 100644
--- a/src/layouts/components/siderBar/style.scss
+++ b/src/layouts/components/siderBar/style.scss
@@ -21,7 +21,7 @@
     align-items: center;
   }
   &:hover {
-    background: rgba(109, 76, 254, 0.08);
+    background-color: rgba(109, 76, 254, 0.08);
     color: #6d4cfe;
     .label,
     .svg-icon {
@@ -29,7 +29,7 @@
     }
   }
   &.active {
-    background: #fff !important;
+    background-color: #fff !important;
     .label,
     .svg-icon {
       color: #6d4cfe !important;