diff --git a/app/page.tsx b/app/page.tsx
index 0c65d24..17ccb7d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,6 +4,7 @@ import { NumberBall } from "@/components/number-ball"
 import { SettingsPanel } from "@/components/settings"
 import { ResultPanel } from "@/components/result"
 import { SingleModePanel } from "@/components/single-panel"
+import { TitleBar } from "@/components/title-bar"
 import { useRollCallLogic } from "@/components/logic"
 
 export default function Page() {
@@ -11,7 +12,12 @@ export default function Page() {
   const isSingleMode = state.mode === "single"
 
   return (
-    <div className="h-screen w-full bg-[#ffffff] text-[#16191f] font-mono flex flex-col lg:flex-row overflow-hidden">
+    <div className="h-screen w-full bg-[#0f141a] text-[#16191f] font-mono flex flex-col overflow-hidden">
+      {/* Custom title bar */}
+      <TitleBar />
+      
+      {/* Main content */}
+      <div className="flex-1 bg-[#ffffff] flex flex-col lg:flex-row overflow-hidden">
 
       {/* Left sidebar — config (fixed width, full height) */}
       <aside className="w-full lg:w-72 flex-shrink-0 border-b lg:border-b-0 lg:border-r border-[#e2e6ea] bg-[#f7f8fa] overflow-y-auto scrollbar-thin">
@@ -124,6 +130,7 @@ export default function Page() {
 
       </main>
 
+      </div>
     </div>
   )
 }
diff --git a/components/logic.tsx b/components/logic.tsx
index 8aef3e5..a97a265 100644
--- a/components/logic.tsx
+++ b/components/logic.tsx
@@ -91,14 +91,23 @@ export interface RollCallActions {
 }
 
 export const COLORS = [
-  "#0f141a", // 黑色
-  "#d92d20", // 红色
-  "#0070f3", // 蓝色
-  "#6d6df6", // 紫色
-  "#00b8d9", // 青色
-  "#36b37e", // 绿色
-  "#ff991f", // 橙色
-  "#8754ad", // 深紫
+  "#d92d20",
+  "#0070f3",
+  "#6d6df6",
+  "#00b8d9",
+  "#36b37e",
+  "#ff991f", 
+  "#8754ad", 
+  "#e63946",
+  "#457b9d",
+  "#2a9d8f",
+  "#f4a261",
+  "#264653",
+  "#9d4edd",
+  "#fb5607",
+  "#06d6a0",
+  "#118ab2",
+  "#ffd166",
 ]
 
 export function useRollCallLogic(): [RollCallState, RollCallActions] {
diff --git a/components/settings.tsx b/components/settings.tsx
index 3b06311..4e14d4a 100644
--- a/components/settings.tsx
+++ b/components/settings.tsx
@@ -101,13 +101,6 @@ export function SettingsPanel({
 
   return (
     <div className="flex flex-col gap-0">
-
-      {/* Title */}
-      <div className="flex items-center gap-2 mb-6">
-        <span className="w-2 h-2 bg-[#0f141a] flex-shrink-0" />
-        <span className="text-sm tracking-[0.2em] uppercase text-[#16191f] leading-none">ROLL CALL</span>
-      </div>
-
       {/* Mode selector */}
       <div className="flex gap-2 mb-6">
         <button
diff --git a/components/title-bar.tsx b/components/title-bar.tsx
new file mode 100644
index 0000000..33a2d47
--- /dev/null
+++ b/components/title-bar.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import { getCurrentWindow } from '@tauri-apps/api/window'
+
+export function TitleBar() {
+  const handleMinimize = async () => {
+    const window = getCurrentWindow()
+    await window.minimize()
+  }
+
+  const handleMaximize = async () => {
+    const window = getCurrentWindow()
+    const isMaximized = await window.isMaximized()
+    if (isMaximized) {
+      await window.unmaximize()
+    } else {
+      await window.maximize()
+    }
+  }
+
+  const handleClose = async () => {
+    const window = getCurrentWindow()
+    await window.close()
+  }
+
+  return (
+    <div 
+      className="h-10 bg-[#ffffff] flex items-center justify-between px-4 select-none border-b border-[#e2e6ea]"
+      style={{ 
+        WebkitAppRegion: 'drag' 
+      } as React.CSSProperties}
+    >
+      {/* Left: App title */}
+      <div className="flex items-center gap-2">
+        <span className="w-2 h-2 bg-[#0f141a] flex-shrink-0" />
+        <span className="text-xs tracking-[0.2em] uppercase text-[#0f141a] leading-none font-mono">
+          ROLL CALL
+        </span>
+      </div>
+
+      {/* Right: Window controls */}
+      <div 
+        className="flex gap-1"
+        style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+      >
+        <button
+          onClick={handleMinimize}
+          className="w-8 h-8 flex items-center justify-center text-[#8a95a1] hover:text-[#0f141a] hover:bg-[#f1f3f5] transition-colors"
+          title="最小化"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
+            <line x1="1" y1="5" x2="9" y2="5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+          </svg>
+        </button>
+        <button
+          onClick={handleMaximize}
+          className="w-8 h-8 flex items-center justify-center text-[#8a95a1] hover:text-[#0f141a] hover:bg-[#f1f3f5] transition-colors"
+          title="最大化"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
+            <rect x="1" y="1" width="8" height="8" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+          </svg>
+        </button>
+        <button
+          onClick={handleClose}
+          className="w-8 h-8 flex items-center justify-center text-[#8a95a1] hover:text-[#ffffff] hover:bg-[#d92d20] transition-colors"
+          title="关闭"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
+            <line x1="2" y1="2" x2="8" y2="8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            <line x1="8" y1="2" x2="2" y2="8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/package-lock.json b/package-lock.json
index 6c7c214..3d1ed46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@base-ui/react": "^1.5.0",
+        "@tauri-apps/api": "^2.11.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^1.16.0",
@@ -1852,6 +1853,16 @@
         "tailwindcss": "4.3.1"
       }
     },
+    "node_modules/@tauri-apps/api": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmmirror.com/@tauri-apps/api/-/api-2.11.0.tgz",
+      "integrity": "sha512-7CinYODhky9lmO23xHnUFv0Xt43fbtWMyxZcLcRBlFkcgXKuEirBvHpmtJ89YMhyeGcq20Wuc47Fa4XjyniywA==",
+      "license": "Apache-2.0 OR MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/tauri"
+      }
+    },
     "node_modules/@tauri-apps/cli": {
       "version": "2.11.2",
       "resolved": "https://registry.npmmirror.com/@tauri-apps/cli/-/cli-2.11.2.tgz",
diff --git a/package.json b/package.json
index 20644c5..c36644f 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
+    "@tauri-apps/api": "^2.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.16.0",
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index c135d7f..ecacac0 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -6,6 +6,13 @@
     "main"
   ],
   "permissions": [
-    "core:default"
+    "core:window:allow-minimize",
+    "core:window:allow-is-minimized",
+    "core:window:allow-maximize",
+    "core:window:allow-is-maximized",
+    "core:window:allow-unmaximize",
+    "core:window:allow-unminimize",
+    "core:window:allow-close",
+    "core:window:allow-start-dragging"
   ]
 }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 9145380..bd0045b 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -16,7 +16,9 @@
         "width": 1204,
         "height": 685,
         "resizable": true,
-        "fullscreen": false
+        "fullscreen": false,
+        "decorations": false,
+        "transparent": true
       }
     ],
     "security": {
@@ -29,13 +31,6 @@
     "icon": [
       "icons/icon.ico"
     ],
-    "windows": {
-      "webviewInstallMode": {
-        "type": "fixedRuntime",
-        "path": "./webview2/"
-        
-      }
-    },
     "android": {
       "debugApplicationIdSuffix": ".debug"
     }