diff --git a/wallitor-gui/src-tauri/src/handler/file.rs b/wallitor-gui/src-tauri/src/handler/file.rs
index c39e7cf..b6fff42 100644
--- a/wallitor-gui/src-tauri/src/handler/file.rs
+++ b/wallitor-gui/src-tauri/src/handler/file.rs
@@ -1,6 +1,7 @@
 use crate::reader;
 use std::path::Path;
 use std::fs;
+use serde::{Deserialize, Serialize};
 use tauri::ipc::Response;
 
 #[tauri::command]
@@ -39,4 +40,17 @@ pub async fn del_folder(path: String) -> bool {
         }
     }
     false
+}
+
+#[derive(Serialize,Deserialize)]
+struct settings{
+    title_bar:String,
+    auto_start:bool,
+    auto_pause:bool
+  }
+  
+
+#[tauri::command]
+pub async fn get_config() -> String{
+    if let Ok()
 }
\ No newline at end of file
diff --git a/wallitor-gui/src/components/TitleBar.vue b/wallitor-gui/src/components/TitleBar.vue
index 1891f31..ee70771 100644
--- a/wallitor-gui/src/components/TitleBar.vue
+++ b/wallitor-gui/src/components/TitleBar.vue
@@ -2,23 +2,29 @@
   <div data-tauri-drag-region class="titlebar colbox">
     <div class="titlebar-icon-wrapper colbox">
       <template v-if="mode == 'mac'">
-        <div class="titlebar-button titlebar-close button-style-mac" @click="close"></div>
-        <div class="titlebar-button titlebar-minimize button-style-mac" @click="minimize"></div>
-        <div class="titlebar-button titlebar-maximize button-style-mac" @click="toggleMaximize"></div> 
-    </template>
+        <div class="titlebar-button titlebar-close button-style-mac" @click="close">
+          <svg-icon name="window-close" :size="button_size_mac"></svg-icon>
+        </div>
+        <div class="titlebar-button titlebar-minimize button-style-mac" @click="minimize">
+          <svg-icon name="window-minimize" :size="button_size_mac"></svg-icon>
+        </div>
+        <div class="titlebar-button titlebar-maximize button-style-mac" @click="toggleMaximize">
+          <svg-icon name="window-maximize" :size="button_size_mac"></svg-icon>
+        </div>
+      </template>
       <img src="@/assets/vw.png" class="titlebar-icon">
       <div class="titlebar-icon-title">
         Wallitor
       </div>
     </div>
-    
-      <div class="titlebar-button-wrapper colbox">
-        <div class="titlebar-button" id="titlebar-settings" @click="openSettings">
-          <div class="titlebar-button-rect">
-            <svg-icon name="setting" :size="button_size_default"></svg-icon>
-          </div>
+
+    <div class="titlebar-button-wrapper colbox">
+      <div class="titlebar-button" id="titlebar-settings" @click="openSettings">
+        <div class="titlebar-button-rect">
+          <svg-icon name="setting" :size="button_size_default"></svg-icon>
         </div>
-        <template v-if="mode == 'win'">
+      </div>
+      <template v-if="mode == 'win'">
         <div class="titlebar-button titlebar-minimize button-style-win" @click="minimize">
           <div class="titlebar-button-rect">
             <svg-icon name="window-minimize" :size="button_size_default"></svg-icon>
@@ -27,7 +33,7 @@
         <div class="titlebar-button titlebar-maximize button-style-win" @click="toggleMaximize">
           <template v-if="maximized">
             <div class="titlebar-button-rect">
-              <svg-icon name="window-maximized button-style-win" :size="button_size_alter"></svg-icon>
+              <svg-icon name="window-maximized" :size="button_size_alter"></svg-icon>
             </div>
           </template>
           <template v-else>
@@ -42,7 +48,7 @@
           </div>
         </div>
       </template>
-      </div>
+    </div>
   </div>
 </template>
 
@@ -60,6 +66,8 @@ type Mode = "win" | "mac";
 const maximized = ref(false);
 const button_size_default = ref("18px");
 const button_size_alter = ref("15px")
+const button_size_mac = ref("11px")
+
 const props = defineProps({
   mode: {
     type: String as PropType<Mode>,
@@ -145,7 +153,7 @@ function openSettings() {
   justify-content: center;
 }
 
-#titlebar-settings{
+#titlebar-settings {
   cursor: pointer;
 }
 
@@ -168,21 +176,44 @@ function openSettings() {
 }
 
 
-.button-style-mac.titlebar-button{
-  width: 14px;
-  height: 14px;
+.button-style-mac.titlebar-button {
+  width: 13px;
+  height: 13px;
   border-radius: 100%;
   margin-left: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #000000b4
 }
 
 .button-style-mac.titlebar-minimize {
-  background-color: red;
+  background: #FFBB39;
+  border: 1px solid #CFA64E;
 }
+
 .button-style-mac.titlebar-maximize {
-  background-color: green;
-  margin-right: 6px;
+  background: #606060;
+  border: 1px solid #656565;
+  margin-right: 8px;
 }
+
+.button-style-mac:hover.titlebar-maximize {
+  background: #00CD4E;
+  border: 1px solid #0EA642;
+}
+
 .button-style-mac.titlebar-close {
-  background-color: yellow;
+  background: #FF5D5B;
+  border: 1px solid #CF544D;
+}
+
+.button-style-mac svg {
+  opacity: 0;
+  transition: .2s;
+}
+
+.button-style-mac:hover svg {
+  opacity: 1;
 }
 </style>
\ No newline at end of file
diff --git a/wallitor-gui/src/views/SettingsView.vue b/wallitor-gui/src/views/SettingsView.vue
index d066f00..92ecc43 100644
--- a/wallitor-gui/src/views/SettingsView.vue
+++ b/wallitor-gui/src/views/SettingsView.vue
@@ -1,30 +1,36 @@
 <template>
     <div class="settings-wrapper">
-        <div class="settings-back" @click="back_home">
+        <div class="settings-back colbox" @click="back_home">
             <SvgIcon name="direction-left"></SvgIcon>
-            返回
+            <div class="settings-back-text">返回</div>
         </div>
         <table class="settings-table">
             <tbody class="setting-table-body">
                 <tr>
-                    <td><div class="settings-label">
-                        <div class="settings-label-title">标题栏样式</div>
-                        <div class="settings-label-subtitle">选择选题栏关闭按钮样式</div>
-                    </div></td>
+                    <td>
+                        <div class="settings-label">
+                            <div class="settings-label-title">标题栏样式</div>
+                            <div class="settings-label-subtitle">选择选题栏关闭按钮样式</div>
+                        </div>
+                    </td>
                     <td><el-switch></el-switch></td>
                 </tr>
                 <tr>
-                    <td><div class="settings-label">
-                        <div class="settings-label-title">开机自启</div>
-                        <div class="settings-label-subtitle">开机自启</div>
-                    </div></td>
+                    <td>
+                        <div class="settings-label">
+                            <div class="settings-label-title">开机自启</div>
+                            <div class="settings-label-subtitle">开机自启</div>
+                        </div>
+                    </td>
                     <td><el-switch></el-switch></td>
                 </tr>
                 <tr>
-                    <td><div class="settings-label">
-                        <div class="settings-label-title">最大化自动暂停</div>
-                        <div class="settings-label-subtitle">最大化自动暂停</div>
-                    </div></td>
+                    <td>
+                        <div class="settings-label">
+                            <div class="settings-label-title">最大化自动暂停</div>
+                            <div class="settings-label-subtitle">最大化自动暂停</div>
+                        </div>
+                    </td>
                     <td><el-switch></el-switch></td>
                 </tr>
             </tbody>
@@ -40,9 +46,9 @@ import { onMounted } from 'vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 const router = useRouter();
 
-onMounted(()=>{
+onMounted(() => {
     const table_body = document.querySelector(".setting-table-body") as HTMLElement;
-    entry("left",table_body,50);
+    entry("left", table_body, 50);
 })
 
 function back_home() {
@@ -51,14 +57,15 @@ function back_home() {
 </script>
 
 <style>
-.settings-wrapper{
-    padding-left:30px;
+.settings-wrapper {
+    padding-left: 30px;
     padding-right: 30px;
     width: calc(100% - 60px);
 }
-.settings-back{
+
+.settings-back {
     color: var(--text-color);
-    padding:8px;
+    padding: 8px;
     margin: 5px;
     width: fit-content;
     border-radius: 10px;
@@ -66,33 +73,41 @@ function back_home() {
     cursor: pointer;
 }
 
-.settings-back:hover{  
+.settings-back:hover {
     background-color: var(--bg-color-alter);
 }
 
-.settings-back:active{
+.settings-back:active {
     transform: scale(0.95);
 }
 
-.settings-table{
+.settings-table {
     width: calc(100% - 80px);
     margin-left: 40px;
     margin-right: 40px;
 }
-.settings-table td,th{
+
+.settings-table td,
+th {
     padding: 5px;
     color: var(--text-color);
 }
 
-.settings-label-title{
+.settings-label-title {
     margin-bottom: 3px;
     font-size: 20px;
     font-weight: 600;
 }
 
-.settings-label-subtitle{
+.settings-label-subtitle {
     font-size: 13px;
     font-weight: 300;
     margin-bottom: 10px;
 }
+
+.settings-back-text {
+    transform: translateY(-3px);
+    margin-left: 4px;
+    font-weight: 600;
+}
 </style>
\ No newline at end of file