diff --git a/build/config/lessModifyVars.ts b/build/config/lessModifyVars.ts
index b51223bb3..f2ebcf2a7 100644
--- a/build/config/lessModifyVars.ts
+++ b/build/config/lessModifyVars.ts
@@ -17,12 +17,12 @@ const modifyVars = {
   // 'heading-color': '#2C3A61', //  Title color
   // 'text-color': '#2C3A61', //  Main text color
   'text-color-secondary ': '#606266', // Subtext color
-  'background-color-base': '#F0F2F5', // background color
+  'background-color-base': '#f4f7f9', // background color
   'font-size-base': '14px', //  Main font size
   'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', //  Floating shadow
   'border-color-base': '#F0F0F0', //  Border color,
   'border-color-split': '#F0F0F0', //  Border color,
-  'border-radius-base': '2px', //  Component/float fillet
+  'border-radius-base': '4px', //  Component/float fillet
 };
 //}
 
diff --git a/index.html b/index.html
index 3064328c1..3763dd820 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@
           justify-content: center;
           align-items: center;
           flex-direction: column;
-          background: #f0f2f5;
+          background: #f4f7f9;
         }
 
         .app-loading .app-loading-wrap {
diff --git a/src/components/Basic/src/BasicArrow.vue b/src/components/Basic/src/BasicArrow.vue
index 1d8daddf1..f9686e908 100644
--- a/src/components/Basic/src/BasicArrow.vue
+++ b/src/components/Basic/src/BasicArrow.vue
@@ -15,7 +15,6 @@
 
   export default defineComponent({
     name: 'BasicArrow',
-    inheritAttrs: false,
     components: { RightOutlined },
     props: {
       // Expand contract, expand by default
diff --git a/src/components/Basic/src/BasicHelp.vue b/src/components/Basic/src/BasicHelp.vue
index 06fd3ac06..09ef2568f 100644
--- a/src/components/Basic/src/BasicHelp.vue
+++ b/src/components/Basic/src/BasicHelp.vue
@@ -12,7 +12,6 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   export default defineComponent({
     name: 'BasicHelp',
-    inheritAttrs: false,
     components: { Tooltip },
     props: {
       // max-width
diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue
index 6d607d4c8..77e1e9491 100644
--- a/src/components/Basic/src/BasicTitle.vue
+++ b/src/components/Basic/src/BasicTitle.vue
@@ -15,7 +15,6 @@
 
   export default defineComponent({
     name: 'BasicTitle',
-    inheritAttrs: false,
     components: { BasicHelp },
     props: {
       helpMessage: {
diff --git a/src/components/Drawer/src/BasicDrawer.vue b/src/components/Drawer/src/BasicDrawer.vue
index 54735cffb..912a6fec4 100644
--- a/src/components/Drawer/src/BasicDrawer.vue
+++ b/src/components/Drawer/src/BasicDrawer.vue
@@ -219,7 +219,7 @@
     .ant-drawer-body {
       height: calc(100% - @header-height);
       padding: 0;
-      background-color: @background-color-dark;
+      background-color: #fff;
 
       .scrollbar__wrap {
         padding: 16px !important;
diff --git a/src/components/Modal/src/index.less b/src/components/Modal/src/index.less
index 820509568..b31463ad8 100644
--- a/src/components/Modal/src/index.less
+++ b/src/components/Modal/src/index.less
@@ -79,7 +79,7 @@
 
   &-confirm-body {
     .ant-modal-confirm-content {
-      color: @text-color-help-dark;
+      color: #fff;
 
       > * {
         color: @text-color-help-dark;
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index 4f8243f12..e482d646a 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -132,7 +132,7 @@
     position: relative;
 
     .ant-page-header {
-      padding: 12px 16px;
+      // padding: 12px 16px;
 
       &:empty {
         padding: 0;
diff --git a/src/design/color.less b/src/design/color.less
index 6a8c5c809..519e8457c 100644
--- a/src/design/color.less
+++ b/src/design/color.less
@@ -14,7 +14,8 @@
 
 @white: #fff;
 
-@content-bg: #f0f2f5;
+@content-bg: #f4f7f9;
+// @content-bg: #f0f2f5;
 
 @info-color: @primary-color;
 
@@ -60,7 +61,7 @@
 // =================================
 
 // dark
-@background-color-dark: #f0f2f5;
+@background-color-dark: #f4f7f9;
 // light
 @background-color-light: #f5f7fa;
 // layout content background
diff --git a/src/layouts/default/header/MultipleHeader.vue b/src/layouts/default/header/MultipleHeader.vue
index dc637ed99..2fa77c3ba 100644
--- a/src/layouts/default/header/MultipleHeader.vue
+++ b/src/layouts/default/header/MultipleHeader.vue
@@ -113,7 +113,7 @@
   @prefix-cls: ~'@{namespace}-layout-multiple-header';
 
   .@{prefix-cls} {
-    margin-left: 1px;
+    // margin-left: 1px;
     transition: width 0.2s;
     flex: 0 0 auto;
 
diff --git a/src/layouts/default/index.vue b/src/layouts/default/index.vue
index 639058291..c686c8aca 100644
--- a/src/layouts/default/index.vue
+++ b/src/layouts/default/index.vue
@@ -83,5 +83,9 @@
     > .ant-layout {
       min-height: 100%;
     }
+
+    &__main {
+      margin-left: 1px;
+    }
   }
 </style>
diff --git a/src/settings/colorSetting.ts b/src/settings/colorSetting.ts
index 0b498a317..8bad58663 100644
--- a/src/settings/colorSetting.ts
+++ b/src/settings/colorSetting.ts
@@ -16,11 +16,11 @@ export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
 
 // sider preset color
 export const SIDE_BAR_BG_COLOR_LIST: string[] = [
+  '#001529',
   '#273352',
   '#ffffff',
   '#191b24',
   '#191a23',
-  '#001529',
   '#304156',
   '#001628',
   '#28333E',
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index c5c9a6312..617a2820e 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -76,7 +76,7 @@ const setting: ProjectConfig = {
   // Menu configuration
   menuSetting: {
     // sidebar menu bg color
-    bgColor: '#273352',
+    bgColor: '#001529',
     //  Whether to fix the left menu
     fixed: true,
     // Menu collapse