diff --git a/wallitor-core/playerInstance.cpp b/wallitor-core/playerInstance.cpp
index 42d8bc6..e0d31c5 100644
--- a/wallitor-core/playerInstance.cpp
+++ b/wallitor-core/playerInstance.cpp
@@ -59,13 +59,14 @@ BOOL playerInstance::showWindow(LPCWSTR lpParameter) {
 	PROCESS_INFORMATION pi{ 0 };
 	if (CreateProcess(this->config.ffpath.c_str(), (LPWSTR)lpParameter, 0, 0, 0, CREATE_NO_WINDOW, 0, 0, &si, &pi)) {
 		//Sleep(600);//等待视频播放器启动完成
-		std::this_thread::sleep_for(std::chrono::milliseconds(300));
 		//HWND hProgman = FindWindow(L"Progman", 0);// 找到PI窗口
 		HWND hProgman = findWindowTimeOut(L"Progman",2000);
+		std::this_thread::sleep_for(std::chrono::milliseconds(300));
 		if (hProgman == nullptr) return FALSE;
 		SendMessageTimeout(hProgman, 0x052c, 0, 0, 0, 300, 0);// 给它发特殊消息
 		//this->hFfplay = FindWindowW(L"SDL_app", 0);// 找到视频窗口
 		this->hFfplay = findWindowTimeOut(L"SDL_app", 2000);
+		std::this_thread::sleep_for(std::chrono::milliseconds(300));
 		if (this->hFfplay == nullptr) return FALSE;
 		SetParent(hFfplay, hProgman);// 将视频窗口设苦为PM的子窗口
 		int systemWidth = GetSystemMetrics(0);
diff --git a/wallitor-gui/src/App.vue b/wallitor-gui/src/App.vue
index 3e0caff..17037b6 100644
--- a/wallitor-gui/src/App.vue
+++ b/wallitor-gui/src/App.vue
@@ -1,48 +1,28 @@
 <script setup lang="ts">
+import TitleBar from './components/TitleBar.vue';
 import { RouterLink, RouterView } from 'vue-router'
-import {invoke} from "@tauri-apps/api"
-import { appWindow } from '@tauri-apps/api/window'
-import SvgIcon from './components/SvgIcon.vue';
-import {ref} from 'vue'
+import { invoke } from "@tauri-apps/api"
 
-const maximized = ref(false);
+const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");
+const html_node = document.getElementsByTagName("html")[0]
+if (isDarkTheme.matches) html_node.classList.add("dark")
+isDarkTheme.addEventListener('change', (event) => {
+  if (event.matches) {
+    html_node.classList.add("dark")
+  } else {
+    html_node.classList.remove("dark")
+  }
+});
 
-function minimize(){
-  appWindow.minimize()
-}
-
-function toggleMaximize(){
-  appWindow.toggleMaximize();
-  maximized.value = !maximized.value;
-}
-
-function close(){
-  appWindow.close()
-}
 </script>
 
 <template>
-  <div data-tauri-drag-region class="titlebar">
-  <div class="titlebar-button" id="titlebar-minimize" @click="minimize">
-    <svg-icon name="window-minimize" color="red"></svg-icon>
-  </div>
-  <div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
-    <template v-if="maximized">
-      <svg-icon name="window-maximized"></svg-icon>
-    </template>
-    <template v-else>
-      <svg-icon name="window-maximize" width="13px"></svg-icon>
-    </template>
-  </div>
-  <div class="titlebar-button" id="titlebar-close" @click="close">
-    <svg-icon name="window-close"></svg-icon>
-  </div>
-</div>
+  <title-bar mode="win"></title-bar>
   <router-view></router-view>
 </template>
 
 <style>
-html{
+html {
   background: transparent;
   width: 100%;
   height: 100%;
@@ -50,39 +30,19 @@ html{
   padding: 0;
   overflow: hidden;
 }
-body{
+
+body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   overflow: hidden;
 }
-#app{
+
+#app {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }
 </style>
-<style scoped>
-.titlebar {
-  height: 30px;
-  background: #141414;
-  user-select: none;
-  display: flex;
-  justify-content: flex-end;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-.titlebar-button {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 30px;
-  height: 30px;
-}
-.titlebar-button:hover {
-  background: #5bbec3;
-}
-</style>
diff --git a/wallitor-gui/src/assets/vw.png b/wallitor-gui/src/assets/vw.png
new file mode 100644
index 0000000..15ca038
Binary files /dev/null and b/wallitor-gui/src/assets/vw.png differ
diff --git a/wallitor-gui/src/components/ItemCard.vue b/wallitor-gui/src/components/ItemCard.vue
new file mode 100644
index 0000000..d9b997f
--- /dev/null
+++ b/wallitor-gui/src/components/ItemCard.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <div class="item-card-main">
+
+        </div>
+        <div class="item-card-title">
+            {{ config.name }}
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps } from 'vue'
+import type { PropType } from 'vue'
+
+interface Config {
+    name: string,
+}
+
+const props = defineProps({
+    config: {
+        type: Object as PropType<Config>,
+        required: true
+    }
+})
+</script>
\ No newline at end of file
diff --git a/wallitor-gui/src/components/TitleBar.vue b/wallitor-gui/src/components/TitleBar.vue
new file mode 100644
index 0000000..1bbebaf
--- /dev/null
+++ b/wallitor-gui/src/components/TitleBar.vue
@@ -0,0 +1,161 @@
+<template>
+  <div data-tauri-drag-region class="titlebar colbox">
+    <template v-if="mode == 'mac'">
+      <div class="titlebar-button-wrapper colbox">
+        <div class="titlebar-button" id="titlebar-minimize" @click="minimize">
+          <svg-icon name="window-minimize" color="red"></svg-icon>
+        </div>
+        <div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
+          <template v-if="maximized">
+            <svg-icon name="window-maximized"></svg-icon>
+          </template>
+          <template v-else>
+            <svg-icon name="window-maximize" width="13px"></svg-icon>
+          </template>
+        </div>
+        <div class="titlebar-button" id="titlebar-close" @click="close">
+          <svg-icon name="window-close"></svg-icon>
+        </div>
+      </div>
+    </template>
+    <div class="titlebar-icon-wrapper colbox">
+      <img src="@/assets/vw.png" class="titlebar-icon">
+      <div class="titlebar-icon-title">
+        Wallitor
+      </div>
+    </div>
+    <template v-if="mode == 'win'">
+      <div class="titlebar-button-wrapper colbox">
+        <div class="titlebar-button" id="titlebar-minimize" @click="minimize">
+          <div class="titlebar-button-rect">
+            <svg-icon name="window-minimize" :width="button_size_default" :height="button_size_default"></svg-icon>
+          </div>
+        </div>
+        <div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
+          <template v-if="maximized">
+            <div class="titlebar-button-rect">
+              <svg-icon name="window-maximized" :width="button_size_alter" :height="button_size_alter"></svg-icon>
+            </div>
+          </template>
+          <template v-else>
+            <div class="titlebar-button-rect">
+              <svg-icon name="window-maximize" :width="button_size_alter" :height="button_size_alter"></svg-icon>
+            </div>
+          </template>
+        </div>
+        <div class="titlebar-button" id="titlebar-close" @click="close">
+          <div class="titlebar-button-rect">
+            <svg-icon name="window-close" :width="button_size_default" :height="button_size_default"></svg-icon>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue';
+import { ref, defineProps } from 'vue'
+import type { PropType } from 'vue'
+import { appWindow } from '@tauri-apps/api/window'
+
+type Mode = "win" | "mac";
+
+const maximized = ref(false);
+const button_size_default = ref("18px");
+const button_size_alter = ref("15px")
+const props = defineProps({
+  mode: {
+    type: String as PropType<Mode>,
+    default: "win"
+  }
+})
+
+function minimize() {
+  appWindow.minimize()
+}
+
+function toggleMaximize() {
+  appWindow.toggleMaximize();
+  maximized.value = !maximized.value;
+}
+
+function close() {
+  appWindow.close()
+}
+</script>
+
+<style>
+.titlebar {
+  position: relative;
+  justify-content: space-between;
+  height: var(--titlebar-height);
+  padding: 5px;
+  color: var(--text-color);
+}
+
+.titlebar-icon-wrapper {
+  height: 100%;
+  width: fit-content;
+  align-items: center;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.titlebar-icon-title {
+  font-weight: 500;
+  font-size: 20px;
+  margin-left: 10px;
+}
+
+.titlebar-icon {
+  height: calc(var(--titlebar-height) - 10px);
+}
+
+.titlebar-button-wrapper {
+  height: var(--titlebar-height);
+  border-radius: var(--titlebar-height);
+  border: solid 1px var(--bd-color);
+  width: fit-content;
+  place-self: center;
+  place-items: center;
+  overflow: hidden;
+  backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: var(--shadow-edge-glow), var(--shadow);
+  background-color: var(--bg-color-alpha);
+}
+
+.titlebar-button {
+  height: calc(var(--titlebar-height) - 6px);
+  width: calc(var(--titlebar-height) - 6px);
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.titlebar-button-rect {
+  height: 34px;
+  width: 34px;
+  border-radius: 100%;
+  transition: .3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#titlebar-minimize {
+  padding-left: 5px;
+}
+
+#titlebar-close {
+  padding-right: 5px;
+}
+
+#titlebar-minimize .titlebar-button-rect:hover,
+#titlebar-maximize .titlebar-button-rect:hover {
+  background-color: var(--bg-hover-fill);
+}
+
+#titlebar-close .titlebar-button-rect:hover {
+  background-color: var(--bg-hover-fill-close);
+}
+</style>
\ No newline at end of file
diff --git a/wallitor-gui/src/main.ts b/wallitor-gui/src/main.ts
index 720fc88..2db62a0 100644
--- a/wallitor-gui/src/main.ts
+++ b/wallitor-gui/src/main.ts
@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import "virtual:svg-icons-register";
 import globalComponents from '@/components/install'
+import "@/style/global.css"
 
 const app = createApp(App)
 
diff --git a/wallitor-gui/src/style/global.css b/wallitor-gui/src/style/global.css
new file mode 100644
index 0000000..15ea682
--- /dev/null
+++ b/wallitor-gui/src/style/global.css
@@ -0,0 +1,42 @@
+.colbox{
+    display: flex;
+    flex-direction: row;
+}
+
+.rowbox{
+    display: flex;
+    flex-direction: column;
+}
+
+html {
+    --text-shadow-color: #b3b3b3ae;
+    --bg-color-solid: #fcfcfc;
+    --bg-color-alter: #ffffff;
+    --bg-color: #ffffffae;
+    --text-color: #1c1c1c;
+    --bd-color: #bbbbbbce;
+    --login-button-bg: #9acdff;
+    --login-button-bd: #c8c8c8;
+    --login-button-hover: #7db7f0;
+    --branch-viewing-color: rgb(122, 212, 215);
+    --branch-viewing-hover-color: rgb(102, 177, 180);
+    --delete-box-left-border: #f56c6c;
+    --delete-box-bg: #f56c6c42;
+    --delete-box-title: #511f1f;
+    --delete-box-text: black;
+}
+
+html.dark {
+    --text-shadow-color: #686868af;
+    --bg-color-solid: #191919;
+    --bg-color-alter: #2d2d2d;
+    --bg-color: #2a2a2ace;
+    --text-color: #c0c0c0;
+    --bd-color: #7f7f7f7c;
+    --titlebar-height: 40px;
+    --shadow-edge-glow: inset 1px 1px 1px -.5px rgba(255, 255, 255, .12), inset -1px -1px 1px -.5px rgba(255, 255, 255, .04), inset 0 0 4px rgba(255, 255, 255, .06);
+    --shadow: 0 10px 15px -3px rgb(0 0 0 / .2), 0 4px 6px -4px rgb(0 0 0 / .16);
+    --bg-color-alpha: hsl(230 12% 14% / .68);
+    --bg-hover-fill: rgb(131 131 145 / 24%);
+    --bg-hover-fill-close: rgba(211, 86, 86, 0.579);
+}
\ No newline at end of file