diff --git a/cutejava-front/src/components/Breadcrumb/index.vue b/cutejava-front/src/components/Breadcrumb/index.vue
index 0f47a93e..a1f269b8 100644
--- a/cutejava-front/src/components/Breadcrumb/index.vue
+++ b/cutejava-front/src/components/Breadcrumb/index.vue
@@ -70,15 +70,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/assets/styles/variables";
+
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
   line-height: 50px;
   margin-left: 8px;
 
+  ::v-deep .el-breadcrumb__item {
+    .el-breadcrumb__inner {
+      color: $menuText;
+      transition: all 0.3s ease;
+
+      &:hover {
+        color: $menuActiveText;
+        filter: drop-shadow(0 0 4px rgba(102, 255, 204, 0.3));
+      }
+
+      &.is-link {
+        font-weight: 500;
+      }
+    }
+
+    .el-breadcrumb__separator {
+      color: rgba(102, 255, 204, 0.4);
+    }
+  }
+
   .no-redirect {
-    color: #97a8be;
+    color: $menuText;
     cursor: text;
+    font-weight: 500;
   }
 }
 </style>
diff --git a/cutejava-front/src/components/Hamburger/index.vue b/cutejava-front/src/components/Hamburger/index.vue
index 8c772469..2f944d4a 100644
--- a/cutejava-front/src/components/Hamburger/index.vue
+++ b/cutejava-front/src/components/Hamburger/index.vue
@@ -32,15 +32,25 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "~@/assets/styles/variables";
+
 .hamburger {
   display: inline-block;
   vertical-align: middle;
   width: 20px;
   height: 20px;
+  fill: $menuText;
+  transition: all 0.3s ease;
 }
 
 .hamburger.is-active {
   transform: rotate(180deg);
+  fill: $menuActiveText;
+  filter: drop-shadow(0 0 6px $menuActiveText);
+}
+
+.hamburger:hover {
+  fill: $menuActiveText;
 }
 </style>
diff --git a/cutejava-front/src/layout/components/Navbar.vue b/cutejava-front/src/layout/components/Navbar.vue
index 828ad9bd..f0544e5f 100644
--- a/cutejava-front/src/layout/components/Navbar.vue
+++ b/cutejava-front/src/layout/components/Navbar.vue
@@ -114,19 +114,25 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  background: linear-gradient(90deg, $menuBg 0%, #162035 100%);
+  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
+  border-bottom: 1px solid rgba(74, 144, 226, 0.2);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
+    transition: all 0.3s ease;
     -webkit-tap-highlight-color:transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(74, 144, 226, 0.1);
+
+      .hamburger {
+        color: $menuActiveText;
+        filter: drop-shadow(0 0 6px $menuActiveText);
+      }
     }
   }
 
@@ -153,15 +159,17 @@ export default {
       padding: 0 8px;
       height: 100%;
       font-size: 18px;
-      color: #5a5e66;
+      color: $menuText;
       vertical-align: text-bottom;
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: all 0.3s ease;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(74, 144, 226, 0.1);
+          color: $menuActiveText;
+          filter: drop-shadow(0 0 8px rgba(102, 255, 204, 0.3));
         }
       }
     }
@@ -178,6 +186,13 @@ export default {
           width: 40px;
           height: 40px;
           border-radius: 10px;
+          border: 2px solid rgba(102, 255, 204, 0.3);
+          transition: all 0.3s ease;
+
+          &:hover {
+            border-color: $menuActiveText;
+            box-shadow: 0 0 15px rgba(102, 255, 204, 0.4);
+          }
         }
 
         .el-icon-caret-bottom {
@@ -186,6 +201,12 @@ export default {
           right: -20px;
           top: 25px;
           font-size: 12px;
+          color: $menuText;
+          transition: all 0.3s ease;
+
+          &:hover {
+            color: $menuActiveText;
+          }
         }
       }
     }