diff --git a/styles/Menu.scss b/styles/Menu.scss
index eb123cd6f..ca5bf3f4a 100644
--- a/styles/Menu.scss
+++ b/styles/Menu.scss
@@ -4,109 +4,129 @@
 
 @include themes-mixin() {
   @include b(menu) {
-    width: 100%;
-    box-sizing: border-box;
-    font-size: 14px;
+    background-color: $--menu-background-color;
+    color: $--menu-item-text-color;
+    @include once {
+      transition: background-color .3s $--n-ease-in-out-cubic-bezier;
+      width: 100%;
+      box-sizing: border-box;
+      font-size: 14px;
+    }
     @include b(menu-list) {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      @include b(menu-item) {
-        cursor: pointer;
-        color: $--menu-item-text-color;
-        transition: color .3s $--n-ease-in-out-cubic-bezier;
-        position: relative;
-        height: 48px;
-        display: flex;
-        align-items: center;
-        font-size: 14px;
+      @include once {
         list-style: none;
-        line-height: 1.5;
-        @include e(icon) {
-          &::before {
-            content: '';
-            width: 10px;
-            height: 10px;
-            position: absolute;
-            background-image:linear-gradient(47deg,rgba(120, 205, 104, 1) 0%,rgba(20, 166, 165, 1) 100%);
-            top: 20px;
-            left: 30px;
-            clip-path: polygon(100% 0, 100% 100%, 0% 100%);
+        margin: 0;
+        padding: 0;
+      }
+      @include b(menu-item) {
+        color: $--menu-item-text-color;
+        @include once {
+          cursor: pointer;
+          transition: color .3s $--n-ease-in-out-cubic-bezier;
+          position: relative;
+          height: 48px;
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          list-style: none;
+          line-height: 1.5;
+          // @include e(icon) {
+          //   &::before {
+          //     content: '';
+          //     width: 10px;
+          //     height: 10px;
+          //     position: absolute;
+          //     background-image:linear-gradient(47deg,rgba(120, 205, 104, 1) 0%,rgba(20, 166, 165, 1) 100%);
+          //     top: 20px;
+          //     left: 30px;
+          //     clip-path: polygon(100% 0, 100% 100%, 0% 100%);
+          //   }
+          // }
+          @include m(selected) {
+            &::before {
+              opacity: .9;
+            }
+          }
+          @include m(disabled) {
+            opacity: 0.45;
+            cursor: not-allowed;
           }
         }
         &::before {
-          content: "";
-          background-size: 300%;
           background-image: $--menu-item-background-image;
           background-position: $--menu-item-background-position;
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          z-index: 0;
-          transition: opacity 0.3s $--n-ease-in-out-cubic-bezier, background-position .3s $--n-ease-in-out-cubic-bezier;
-          opacity: 0;
-        }
-        @include m(selected) {
-          &::before {
-            opacity: .9;
+          @include once {
+            content: "";
+            background-size: 300%;
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            z-index: 0;
+            transition: opacity 0.3s $--n-ease-in-out-cubic-bezier, background-position .3s $--n-ease-in-out-cubic-bezier;
+            opacity: 0; 
           }
         }
-        @include m(disabled) {
-          opacity: 0.45;
-          cursor: not-allowed;
-        }
       }
     }
     @include b(sub-menu) {
-      cursor: pointer;
-      position: relative;
-      @include b(sub-menu-header) {
-        font-weight: 500;
-        font-size: 14px;
-        color: $--menu-sub-menu-text-color;
-        transition: color .3s $--n-ease-in-out-cubic-bezier;
-        height: 48px;
-        display: flex;
-        align-items: center;
-        position: relative;
-        &::after { // down arrow
-          content: '';
-          height: 6px;
-          width: 6px;
-          border-left: 2px solid $--n-primary-color;
-          border-top: 2px solid $--n-primary-color;
-          position: absolute;
-          right: 24px;
-          top: calc(50% - 3px);
-          transform: rotate(45deg) ;
-          transform-origin: 25% 25%;
-          transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.3s $--n-ease-in-out-cubic-bezier, border-color 0.3s $--n-ease-in-out-cubic-bezier;
-        }
-        @include m(collapsed) {
-          &::after {
-            transform: rotate(225deg);
-          }
-        }
-        @include m(disabled) {
-          opacity: 0.45;
-          cursor: not-allowed;
+      @include once {
+        cursor: pointer;
+        position: relative; 
+        list-style: none;
+        @include b(sub-menu-content) {
+          padding: 0;
+          @include fade-in-height-expand-transition($duration: .2s);
         }
       }
-      @include b(sub-menu-content) {
-        padding: 0;
-        @include fade-in-height-expand-transition($duration: .2s);
+      @include b(sub-menu-header) {
+        color: $--menu-sub-menu-text-color;
+        @include once {
+          font-weight: 500;
+          font-size: 14px;
+          transition: color .3s $--n-ease-in-out-cubic-bezier;
+          height: 48px;
+          display: flex;
+          align-items: center;
+          position: relative;
+          @include m(collapsed) {
+            &::after {
+              transform: rotate(225deg);
+            }
+          }
+          @include m(disabled) {
+            opacity: 0.45;
+            cursor: not-allowed;
+          }
+        }
+        &::after { // down arrow 
+          border-left: 2px solid $--n-primary-color;
+          border-top: 2px solid $--n-primary-color;
+          @include once {
+            content: '';
+            height: 6px;
+            width: 6px;
+            position: absolute;
+            right: 24px;
+            top: calc(50% - 3px);
+            transform: rotate(45deg) ;
+            transform-origin: 25% 25%;
+            transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.3s $--n-ease-in-out-cubic-bezier, border-color 0.3s $--n-ease-in-out-cubic-bezier;
+          }
+        }
       }
     }
     @include b(menu-item-group) {
       @include b(menu-item-group-title) {
-        cursor: default;
-        height: 40px;
-        display: flex;
-        align-items: center;
         color: $--menu-item-group-text-color;
-        transition: color .3s $--n-ease-in-out-cubic-bezier;
+        @include once {
+          cursor: default;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          transition: color .3s $--n-ease-in-out-cubic-bezier;
+        }        
       }
     }
   }
diff --git a/styles/themes/dark/components/Menu.scss b/styles/themes/dark/components/Menu.scss
index 75923d14c..d2d0bee7c 100644
--- a/styles/themes/dark/components/Menu.scss
+++ b/styles/themes/dark/components/Menu.scss
@@ -1,4 +1,5 @@
 @mixin setup-dark-menu {
+  $--menu-background-color: $--neutral-9 !global;
   $--menu-item-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .09) 60%, rgba(0, 0, 0, .09) 100%) !global;
   $--menu-item-background-position: 0% !global;
   $--menu-item-group-text-color: $--n-meta-text-color !global;
diff --git a/styles/themes/light/components/Menu.scss b/styles/themes/light/components/Menu.scss
index 12956c098..06908570c 100644
--- a/styles/themes/light/components/Menu.scss
+++ b/styles/themes/light/components/Menu.scss
@@ -1,4 +1,5 @@
 @mixin setup-light-menu {
+  $--menu-background-color: $--n-background-color !global;
   $--menu-item-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .09) 60%, rgba(0, 0, 0, .09) 100%) !global;
   $--menu-item-background-position: 100% !global;
   $--menu-item-group-text-color: $--n-meta-text-color !global;