diff --git a/src/assets/images/header-image.png b/src/assets/images/header-image.png
new file mode 100644
index 0000000..b9c708a
--- /dev/null
+++ b/src/assets/images/header-image.png
Binary files differ

diff --git a/src/assets/images/header-image.png b/src/assets/images/header-image.png
new file mode 100644
index 0000000..b9c708a
--- /dev/null
+++ b/src/assets/images/header-image.png
Binary files differ
diff --git a/src/layouts/components/Header/index.vue b/src/layouts/components/Header/index.vue
index 83ad8cd..6125aa5 100644
--- a/src/layouts/components/Header/index.vue
+++ b/src/layouts/components/Header/index.vue
@@ -4,6 +4,7 @@
 import TopMenu from '../TopMenu/topMenu.vue'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
+import headerImage from '@/assets/images/header-image.png'
 
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
@@ -46,6 +47,7 @@
         </div>
         <tools />
       </div>
+      <el-image :src="headerImage" fit="cover" style="position: absolute;width: 100%;height: 100%;z-index: -1;" />
     </header>
   </transition>
 </template>
@@ -59,17 +61,17 @@
   right: 0;
   display: flex;
   align-items: center;
-  padding: 0 20px;
+  // padding: 0 20px;
   height: var(--g-header-height);
   color: var(--g-header-color);
   background-color: var(--g-header-bg);
-  background-image: linear-gradient(90deg, #70b4ff 30%, #4384ff);
+  background-image: linear-gradient(90deg, #71b5ff 30%, #3d7eff);
   transition: background-color 0.3s, var(--el-transition-color);
 
   .header-container {
     width: var(--g-header-width);
     height: 100%;
-    margin: 0 auto;
+    margin: 0 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -102,8 +104,10 @@
     }
 
     span {
-      font-size: 24px;
+      font-size: 22px;
+      font-weight: 300;
       letter-spacing: 1px;
+      font-family: "Microsoft YaHei";
       color: var(--g-header-color);
     }
   }
@@ -131,6 +135,7 @@
       display: flex;
       width: initial;
       align-items: center;
+      padding: 0 10px;
 
       .item {
         display: flex;
@@ -142,6 +147,7 @@
         color: var(--g-header-menu-color);
         background-color: var(--g-header-bg);
         transition: background-color 0.3s, var(--el-transition-color);
+        font-size: 16px;
 
         &:hover {
           color: var(--g-header-menu-hover-color);
@@ -149,7 +155,7 @@
         }
 
         .el-icon {
-          font-size: 18px;
+          font-size: 16px;
           vertical-align: middle;
         }
 
@@ -171,7 +177,7 @@
       }
 
       .round-item {
-        padding: 10px 20px;
+        padding: 9px 20px 11px;
         border-radius: 50px;
       }
 

diff --git a/src/assets/images/header-image.png b/src/assets/images/header-image.png
new file mode 100644
index 0000000..b9c708a
--- /dev/null
+++ b/src/assets/images/header-image.png
Binary files differ
diff --git a/src/layouts/components/Header/index.vue b/src/layouts/components/Header/index.vue
index 83ad8cd..6125aa5 100644
--- a/src/layouts/components/Header/index.vue
+++ b/src/layouts/components/Header/index.vue
@@ -4,6 +4,7 @@
 import TopMenu from '../TopMenu/topMenu.vue'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
+import headerImage from '@/assets/images/header-image.png'
 
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
@@ -46,6 +47,7 @@
         </div>
         <tools />
       </div>
+      <el-image :src="headerImage" fit="cover" style="position: absolute;width: 100%;height: 100%;z-index: -1;" />
     </header>
   </transition>
 </template>
@@ -59,17 +61,17 @@
   right: 0;
   display: flex;
   align-items: center;
-  padding: 0 20px;
+  // padding: 0 20px;
   height: var(--g-header-height);
   color: var(--g-header-color);
   background-color: var(--g-header-bg);
-  background-image: linear-gradient(90deg, #70b4ff 30%, #4384ff);
+  background-image: linear-gradient(90deg, #71b5ff 30%, #3d7eff);
   transition: background-color 0.3s, var(--el-transition-color);
 
   .header-container {
     width: var(--g-header-width);
     height: 100%;
-    margin: 0 auto;
+    margin: 0 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -102,8 +104,10 @@
     }
 
     span {
-      font-size: 24px;
+      font-size: 22px;
+      font-weight: 300;
       letter-spacing: 1px;
+      font-family: "Microsoft YaHei";
       color: var(--g-header-color);
     }
   }
@@ -131,6 +135,7 @@
       display: flex;
       width: initial;
       align-items: center;
+      padding: 0 10px;
 
       .item {
         display: flex;
@@ -142,6 +147,7 @@
         color: var(--g-header-menu-color);
         background-color: var(--g-header-bg);
         transition: background-color 0.3s, var(--el-transition-color);
+        font-size: 16px;
 
         &:hover {
           color: var(--g-header-menu-hover-color);
@@ -149,7 +155,7 @@
         }
 
         .el-icon {
-          font-size: 18px;
+          font-size: 16px;
           vertical-align: middle;
         }
 
@@ -171,7 +177,7 @@
       }
 
       .round-item {
-        padding: 10px 20px;
+        padding: 9px 20px 11px;
         border-radius: 50px;
       }
 
diff --git a/src/layouts/components/SidebarItem/index.vue b/src/layouts/components/SidebarItem/index.vue
index 540d253..c08cd89 100644
--- a/src/layouts/components/SidebarItem/index.vue
+++ b/src/layouts/components/SidebarItem/index.vue
@@ -85,8 +85,8 @@
 :deep(.el-sub-menu),
 :deep(.el-menu-item) {
   .title-icon {
-    width: 16px;
-    font-size: 16px;
+    width: 14px;
+    font-size: 14px;
     vertical-align: -0.25em;
     transition: transform 0.3s;
     color: unset;

diff --git a/src/assets/images/header-image.png b/src/assets/images/header-image.png
new file mode 100644
index 0000000..b9c708a
--- /dev/null
+++ b/src/assets/images/header-image.png
Binary files differ
diff --git a/src/layouts/components/Header/index.vue b/src/layouts/components/Header/index.vue
index 83ad8cd..6125aa5 100644
--- a/src/layouts/components/Header/index.vue
+++ b/src/layouts/components/Header/index.vue
@@ -4,6 +4,7 @@
 import TopMenu from '../TopMenu/topMenu.vue'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
+import headerImage from '@/assets/images/header-image.png'
 
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
@@ -46,6 +47,7 @@
         </div>
         <tools />
       </div>
+      <el-image :src="headerImage" fit="cover" style="position: absolute;width: 100%;height: 100%;z-index: -1;" />
     </header>
   </transition>
 </template>
@@ -59,17 +61,17 @@
   right: 0;
   display: flex;
   align-items: center;
-  padding: 0 20px;
+  // padding: 0 20px;
   height: var(--g-header-height);
   color: var(--g-header-color);
   background-color: var(--g-header-bg);
-  background-image: linear-gradient(90deg, #70b4ff 30%, #4384ff);
+  background-image: linear-gradient(90deg, #71b5ff 30%, #3d7eff);
   transition: background-color 0.3s, var(--el-transition-color);
 
   .header-container {
     width: var(--g-header-width);
     height: 100%;
-    margin: 0 auto;
+    margin: 0 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -102,8 +104,10 @@
     }
 
     span {
-      font-size: 24px;
+      font-size: 22px;
+      font-weight: 300;
       letter-spacing: 1px;
+      font-family: "Microsoft YaHei";
       color: var(--g-header-color);
     }
   }
@@ -131,6 +135,7 @@
       display: flex;
       width: initial;
       align-items: center;
+      padding: 0 10px;
 
       .item {
         display: flex;
@@ -142,6 +147,7 @@
         color: var(--g-header-menu-color);
         background-color: var(--g-header-bg);
         transition: background-color 0.3s, var(--el-transition-color);
+        font-size: 16px;
 
         &:hover {
           color: var(--g-header-menu-hover-color);
@@ -149,7 +155,7 @@
         }
 
         .el-icon {
-          font-size: 18px;
+          font-size: 16px;
           vertical-align: middle;
         }
 
@@ -171,7 +177,7 @@
       }
 
       .round-item {
-        padding: 10px 20px;
+        padding: 9px 20px 11px;
         border-radius: 50px;
       }
 
diff --git a/src/layouts/components/SidebarItem/index.vue b/src/layouts/components/SidebarItem/index.vue
index 540d253..c08cd89 100644
--- a/src/layouts/components/SidebarItem/index.vue
+++ b/src/layouts/components/SidebarItem/index.vue
@@ -85,8 +85,8 @@
 :deep(.el-sub-menu),
 :deep(.el-menu-item) {
   .title-icon {
-    width: 16px;
-    font-size: 16px;
+    width: 14px;
+    font-size: 14px;
     vertical-align: -0.25em;
     transition: transform 0.3s;
     color: unset;
diff --git a/src/layouts/components/SubSidebar/index.vue b/src/layouts/components/SubSidebar/index.vue
index 5928469..3cfac9a 100644
--- a/src/layouts/components/SubSidebar/index.vue
+++ b/src/layouts/components/SubSidebar/index.vue
@@ -57,7 +57,7 @@
   top: 0;
   bottom: 0;
   background-color: var(--g-sub-sidebar-bg);
-  background-image: linear-gradient(180deg, #70b4ff, #4384ff);
+  background-image: linear-gradient(180deg, #71b5ff, #4384ff);
   box-shadow: 10px 0 10px -10px var(--g-box-shadow-color);
   transition: background-color 0.3s, var(--el-transition-box-shadow), left 0.3s, width 0.3s;
 

diff --git a/src/assets/images/header-image.png b/src/assets/images/header-image.png
new file mode 100644
index 0000000..b9c708a
--- /dev/null
+++ b/src/assets/images/header-image.png
Binary files differ
diff --git a/src/layouts/components/Header/index.vue b/src/layouts/components/Header/index.vue
index 83ad8cd..6125aa5 100644
--- a/src/layouts/components/Header/index.vue
+++ b/src/layouts/components/Header/index.vue
@@ -4,6 +4,7 @@
 import TopMenu from '../TopMenu/topMenu.vue'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
+import headerImage from '@/assets/images/header-image.png'
 
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
@@ -46,6 +47,7 @@
         </div>
         <tools />
       </div>
+      <el-image :src="headerImage" fit="cover" style="position: absolute;width: 100%;height: 100%;z-index: -1;" />
     </header>
   </transition>
 </template>
@@ -59,17 +61,17 @@
   right: 0;
   display: flex;
   align-items: center;
-  padding: 0 20px;
+  // padding: 0 20px;
   height: var(--g-header-height);
   color: var(--g-header-color);
   background-color: var(--g-header-bg);
-  background-image: linear-gradient(90deg, #70b4ff 30%, #4384ff);
+  background-image: linear-gradient(90deg, #71b5ff 30%, #3d7eff);
   transition: background-color 0.3s, var(--el-transition-color);
 
   .header-container {
     width: var(--g-header-width);
     height: 100%;
-    margin: 0 auto;
+    margin: 0 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -102,8 +104,10 @@
     }
 
     span {
-      font-size: 24px;
+      font-size: 22px;
+      font-weight: 300;
       letter-spacing: 1px;
+      font-family: "Microsoft YaHei";
       color: var(--g-header-color);
     }
   }
@@ -131,6 +135,7 @@
       display: flex;
       width: initial;
       align-items: center;
+      padding: 0 10px;
 
       .item {
         display: flex;
@@ -142,6 +147,7 @@
         color: var(--g-header-menu-color);
         background-color: var(--g-header-bg);
         transition: background-color 0.3s, var(--el-transition-color);
+        font-size: 16px;
 
         &:hover {
           color: var(--g-header-menu-hover-color);
@@ -149,7 +155,7 @@
         }
 
         .el-icon {
-          font-size: 18px;
+          font-size: 16px;
           vertical-align: middle;
         }
 
@@ -171,7 +177,7 @@
       }
 
       .round-item {
-        padding: 10px 20px;
+        padding: 9px 20px 11px;
         border-radius: 50px;
       }
 
diff --git a/src/layouts/components/SidebarItem/index.vue b/src/layouts/components/SidebarItem/index.vue
index 540d253..c08cd89 100644
--- a/src/layouts/components/SidebarItem/index.vue
+++ b/src/layouts/components/SidebarItem/index.vue
@@ -85,8 +85,8 @@
 :deep(.el-sub-menu),
 :deep(.el-menu-item) {
   .title-icon {
-    width: 16px;
-    font-size: 16px;
+    width: 14px;
+    font-size: 14px;
     vertical-align: -0.25em;
     transition: transform 0.3s;
     color: unset;
diff --git a/src/layouts/components/SubSidebar/index.vue b/src/layouts/components/SubSidebar/index.vue
index 5928469..3cfac9a 100644
--- a/src/layouts/components/SubSidebar/index.vue
+++ b/src/layouts/components/SubSidebar/index.vue
@@ -57,7 +57,7 @@
   top: 0;
   bottom: 0;
   background-color: var(--g-sub-sidebar-bg);
-  background-image: linear-gradient(180deg, #70b4ff, #4384ff);
+  background-image: linear-gradient(180deg, #71b5ff, #4384ff);
   box-shadow: 10px 0 10px -10px var(--g-box-shadow-color);
   transition: background-color 0.3s, var(--el-transition-box-shadow), left 0.3s, width 0.3s;
 
diff --git a/src/layouts/components/Topbar/index.vue b/src/layouts/components/Topbar/index.vue
index ddfb8c4..2863cef 100644
--- a/src/layouts/components/Topbar/index.vue
+++ b/src/layouts/components/Topbar/index.vue
@@ -82,12 +82,13 @@
   justify-content: space-between;
   height: var(--g-topbar-height);
   transition: width 0.3s, top 0.3s, transform 0.3s, background-color 0.3s, var(--el-transition-box-shadow);
-  background-image: linear-gradient(90deg, #70b4ff 30%, #4384ff);
+  background-image: linear-gradient(90deg, #71b5ff 30%, #3d7eff);
 
   .topbar-container-inner {
     width: 100%;
     border-radius: 15px 10px 0 0;
     background-color: var(--g-toolbar-bg);
+    // background-color: #f1f2f6;
   }
 
   &.fixed {