diff --git a/packages/app/src/pages/settings/index.jsx b/packages/app/src/pages/settings/index.jsx
index 1b05a6c2..f3d57117 100755
--- a/packages/app/src/pages/settings/index.jsx
+++ b/packages/app/src/pages/settings/index.jsx
@@ -304,9 +304,9 @@ const SettingItem = (props) => {
         ...props.ctx,
     }
 
-    return <div key={item.id} className="settingItem">
-        <div className="header">
-            <div className="title">
+    return <div key={item.id} className="settings_content_group_item">
+        <div className="settings_content_group_item_header">
+            <div className="settings_content_group_item_header_title">
                 <div>
                     <h4>
                         {Icons[item.icon] ? React.createElement(Icons[item.icon]) : null}
@@ -323,7 +323,7 @@ const SettingItem = (props) => {
                 </div>
             </div>
             {item.extraActions &&
-                <div className="extraActions">
+                <div className="settings_content_group_item_header_actions">
                     {item.extraActions.map((action, index) => {
                         if (typeof action === "function") {
                             return React.createElement(action, {
@@ -351,7 +351,7 @@ const SettingItem = (props) => {
                 </div>
             }
         </div>
-        <div className="component">
+        <div className="settings_content_group_item_component">
             <div>
                 {
                     loading
@@ -398,18 +398,20 @@ const SettingGroup = React.memo((props) => {
         return null
     }
 
-    return <div index={groupKey} key={groupKey} className="group">
-        <h1>
-            {
-                fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null
-            }
-            <Translation>
+    return <div index={groupKey} key={groupKey} className="settings_content_group">
+        <div className="settings_content_group_header">
+            <h1>
                 {
-                    t => t(fromDecoratorTitle ?? groupKey)
+                    fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null
                 }
-            </Translation>
-        </h1>
-        <div className="content">
+                <Translation>
+                    {
+                        t => t(fromDecoratorTitle ?? groupKey)
+                    }
+                </Translation>
+            </h1>
+        </div>
+        <div className="settings_content_group_settings">
             {
                 settings.map((item) => <SettingItem
                     item={item}
diff --git a/packages/app/src/pages/settings/index.less b/packages/app/src/pages/settings/index.less
index 705e3f62..8c1eed05 100755
--- a/packages/app/src/pages/settings/index.less
+++ b/packages/app/src/pages/settings/index.less
@@ -1,14 +1,20 @@
+@import "theme/vars.less";
+
 .settings_wrapper {
     display: flex;
     flex-direction: row;
 
+    justify-content: center;
+
+    padding-bottom: 20px;
+
     .settings_menu {
         position: sticky;
 
         top: 0;
         left: 0;
 
-        height: 100%;
+        height: fit-content;
 
         display: flex;
         flex-direction: column;
@@ -16,6 +22,7 @@
         align-items: center;
 
         width: 30%;
+        max-width: 300px;
 
         padding: 0 30px;
 
@@ -34,92 +41,131 @@
         display: flex;
         flex-direction: column;
 
-        width: 70%;
+        width: 100%;
+        max-width: 700px;
+
+        gap: 20px;
+
+        .settings_content_group {
+            position: relative;
 
-        .group {
             display: flex;
             flex-direction: column;
+
             color: var(--background-color-contrast);
+            background-color: var(--background-color-accent);
 
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-                color: var(--background-color-contrast);
-            }
+            border-radius: 12px;
 
-            .content {
-                >div {
-                    margin-bottom: 25px;
-                }
-            }
-        }
+            padding: 20px;
 
-        .settingItem {
-            padding: 0 20px;
+            gap: 20px;
 
-            >div {
-                margin-bottom: 10px;
-            }
+            .settings_content_group_header {
+                position: absolute;
 
-            .header {
-                display: inline-flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: space-between;
                 width: 100%;
 
-                .title {
-                    display: flex;
-                    align-items: center;
+                top: 0;
+                left: 0;
+
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                    margin: 0;
                     color: var(--background-color-contrast);
-
-                    h1,
-                    h2,
-                    h3,
-                    h4,
-                    h5,
-                    h6 {
-                        margin: 0;
-                        color: var(--background-color-contrast);
-                    }
-
-                    p {
-                        font-size: 11px;
-                        color: var(--background-color-contrast);
-                        margin: 0;
-                    }
-
-                    >div {
-                        margin-right: 10px;
-                    }
                 }
 
-                .extraActions {
-                    display: inline-flex;
-                    align-items: center;
+                //-webkit-box-shadow: @card-shadow;
+                //-moz-box-shadow: @card-shadow;
+                //box-shadow: @card-shadow;      
 
-                    >div {
-                        margin-right: 10px;
-                    }
-                }
+                padding: 20px;
+
+                border-radius: 12px;
             }
 
-            .component {
+            .settings_content_group_settings {
                 display: flex;
                 flex-direction: column;
 
-                --ignore-dragger: true;
-                padding: 0 20px;
+                margin-top: 50px;
 
-                span {
-                    color: var(--background-color-contrast);
-                }
+                gap: 30px;
 
-                >div {
-                    margin-bottom: 10px;
+                .settings_content_group_item {
+                    display: flex;
+                    flex-direction: column;
+
+                    padding: 0 20px;
+
+                    .settings_content_group_item_header {
+                        display: inline-flex;
+                        flex-direction: row;
+                        align-items: center;
+                        justify-content: space-between;
+
+                        width: 100%;
+
+                        .settings_content_group_item_header_title {
+                            display: flex;
+                            align-items: center;
+                            color: var(--background-color-contrast);
+
+                            h1,
+                            h2,
+                            h3,
+                            h4,
+                            h5,
+                            h6 {
+                                margin: 0;
+                                color: var(--background-color-contrast);
+                            }
+
+                            p {
+                                font-size: 11px;
+                                color: var(--background-color-contrast);
+                                margin: 0;
+                            }
+
+                            >div {
+                                margin-right: 10px;
+                            }
+                        }
+
+                        .settings_content_group_item_header_actions {
+                            display: inline-flex;
+                            align-items: center;
+
+                            gap: 10px;
+
+                            .ant-btn {
+                                background-color: var(--background-color-primary-2);
+                            }
+
+                            .ant-btn:not([disabled]) {
+                                &:hover {
+                                    color: var(--colorPrimary);
+                                    border: 1px solid var(--colorPrimary);
+                                }
+                            }
+                        }
+                    }
+
+                    .settings_content_group_item_component {
+                        display: flex;
+                        flex-direction: column;
+
+                        --ignore-dragger: true;
+                        padding: 6px 20px;
+
+                        span {
+                            color: var(--background-color-contrast);
+                        }
+                    }
                 }
             }
         }