diff --git a/README.md b/README.md
index b81b491..e4e80ad 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,52 @@
-<div align="center">
-<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
-</div>
+# Git Watcher Pro
 
-# Run and deploy your AI Studio app
+Git Watcher Pro is a lightweight, proactive Git repository monitor for Windows. It sits in your system tray and monitors your local repositories for changes, keeping you synced with your remote servers.
 
-This contains everything you need to run your app locally.
+![Dashboard](docs/images/dashboard.png)
 
-View your app in AI Studio: https://ai.studio/apps/drive/1NNtM1N_9cpRVQ7KoDZrJoSs90I9ZMeCA
+## Features
 
-## Run Locally
+- **Real-time Monitoring:** Automatically checks for changes in your Git repositories.
+- **Smart Status:** Shows if you are ahead, behind, or have dirty files.
+- **Auto-Pull:** Optionally configure repositories to automatically pull changes when behind.
+- **System Tray Integration:** Runs quietly in the background; minimize to tray to keep your taskbar clean.
+- **Smart Auth:** Easily connect to private GitHub repositories using the clipboard-based Smart Connect feature.
+- **Portable:** No installation required. Just run the executable.
+- **Startup:** Can be configured to launch automatically with Windows.
 
-**Prerequisites:**  Node.js
+![Settings](docs/images/settings.png)
 
+## Getting Started
 
-1. Install dependencies:
-   `npm install`
-2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
-3. Run the app:
-   `npm run dev`
+### Prerequisites
+
+- Windows 10/11
+- Git installed and available in PATH.
+
+### Installation
+
+1. Download the latest release (Portable .exe).
+2. Run `Git Watcher Pro.exe`.
+
+### Development
+
+1. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+2. **Run in development mode:**
+   ```bash
+   npm run dev
+   ```
+   *Note: In a headless environment, use `npm run preview` to see the UI.*
+
+3. **Build:**
+   ```bash
+   npm run build
+   ```
+   This produces an installer and a portable executable in `dist/`.
+
+## License
+
+MIT
diff --git a/docs/images/dashboard.png b/docs/images/dashboard.png
new file mode 100644
index 0000000..31525f1
Binary files /dev/null and b/docs/images/dashboard.png differ
diff --git a/docs/images/settings.png b/docs/images/settings.png
new file mode 100644
index 0000000..f381075
Binary files /dev/null and b/docs/images/settings.png differ
diff --git a/electron/assets/icon.png b/electron/assets/icon.png
index c190e85..a48fa79 100644
Binary files a/electron/assets/icon.png and b/electron/assets/icon.png differ
diff --git a/electron/main.ts b/electron/main.ts
index 815cec9..f69d36a 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -22,7 +22,7 @@ const PRELOAD_PATH = join(ROOT_PATH, 'dist-electron/preload.cjs')
 const store = new Store({
   defaults: {
     repos: [], 
-    settings: { checkInterval: 60, githubToken: '', launchAtStartup: true }
+    settings: { checkInterval: 60, githubToken: '', launchAtStartup: true, startMinimized: false }
   }
 })
 
@@ -163,10 +163,12 @@ function startClipboardWatcher() {
 // --- App Lifecycle ---
 
 function createWindow(): void {
+  const startMinimized = store.get('settings.startMinimized') as boolean;
+
   mainWindow = new BrowserWindow({
     width: 950,
     height: 700,
-    show: false,
+    show: false, // Always start hidden, we show it later if not startMinimized
     frame: false,
     backgroundColor: '#1e1e1e',
     autoHideMenuBar: true,
@@ -179,7 +181,9 @@ function createWindow(): void {
   })
 
   mainWindow.on('ready-to-show', () => {
-    mainWindow?.show()
+    if (!startMinimized) {
+      mainWindow?.show()
+    }
   })
 
   mainWindow.on('close', (event) => {
@@ -236,6 +240,13 @@ app.whenReady().then(() => {
      app.setAppUserModelId('com.gitwatcher.app')
   }
 
+  // Ensure startup setting is applied on launch
+  const launchAtStartup = store.get('settings.launchAtStartup') as boolean;
+  app.setLoginItemSettings({
+    openAtLogin: launchAtStartup,
+    path: app.getPath('exe')
+  });
+
   createWindow()
   createTray()
   
@@ -285,6 +296,15 @@ app.whenReady().then(() => {
       if (checkIntervalTimer) clearInterval(checkIntervalTimer);
       checkIntervalTimer = setInterval(checkRepos, newSettings.checkInterval * 1000);
     }
+
+    // Handle Launch at Startup
+    if (newSettings.launchAtStartup !== undefined) {
+      app.setLoginItemSettings({
+        openAtLogin: newSettings.launchAtStartup,
+        path: app.getPath('exe')
+      });
+    }
+
     return true;
   });
 
diff --git a/package-lock.json b/package-lock.json
index 2dd2033..66bc242 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "git-watcher-pro",
       "version": "1.0.0",
       "dependencies": {
+        "@radix-ui/react-checkbox": "^1.3.3",
+        "@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-slot": "^1.0.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
@@ -1302,6 +1305,42 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -1317,6 +1356,141 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
+      "integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.8.tgz",
+      "integrity": "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
@@ -1335,6 +1509,91 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -1850,8 +2109,9 @@
       "version": "18.3.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -5780,6 +6040,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
diff --git a/package.json b/package.json
index a120c87..89f2a72 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,10 @@
     "appId": "com.gitwatcher.app",
     "productName": "Git Watcher Pro",
     "win": {
-      "target": "nsis",
+      "target": [
+        "nsis",
+        "portable"
+      ],
       "sign": null,
       "forceCodeSigning": false,
       "verifyUpdateCodeSignature": false
@@ -27,6 +30,9 @@
     }
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
diff --git a/src/Settings.tsx b/src/Settings.tsx
index ce5a5f2..c0fad4c 100644
--- a/src/Settings.tsx
+++ b/src/Settings.tsx
@@ -1,9 +1,16 @@
 import { useState, useEffect } from 'react';
+import { Button } from './components/ui/Button';
+import { Card, CardContent } from './components/ui/Card';
+import { Input } from './components/ui/Input';
+import { Label } from './components/ui/Label';
+import { Checkbox } from './components/ui/Checkbox';
+import { Loader2, ExternalLink, Check, Wand2, Monitor, Github, Settings as SettingsIcon, Clock, Power } from 'lucide-react';
 
 export const Settings = () => {
   const [githubToken, setGithubToken] = useState('');
   const [checkInterval, setCheckInterval] = useState(60);
   const [launchAtStartup, setLaunchAtStartup] = useState(true);
+  const [startMinimized, setStartMinimized] = useState(false);
   
   const [isConnecting, setIsConnecting] = useState(false);
   const [isSmartWaiting, setIsSmartWaiting] = useState(false);
@@ -18,6 +25,7 @@ export const Settings = () => {
            setCheckInterval(settings.checkInterval || 60);
            setGithubToken(settings.githubToken || '');
            setLaunchAtStartup(settings.launchAtStartup !== false);
+           setStartMinimized(settings.startMinimized || false);
         }
       });
       
@@ -38,6 +46,7 @@ export const Settings = () => {
         checkInterval: parseInt(checkInterval.toString()),
         githubToken,
         launchAtStartup,
+        startMinimized,
         ...override
     };
     
@@ -72,124 +81,183 @@ export const Settings = () => {
   };
 
   return (
-    <div className="settings-container">
-      <h2 style={{ marginTop: 0 }}>Settings</h2>
-      
-      <div className="settings-group">
-        <h4>General</h4>
-        
-        <div style={{ marginBottom: '15px' }}>
-          <label style={{ display: 'block', marginBottom: '8px', fontSize: '13px', fontWeight: 'bold' }}>Check Interval (seconds)</label>
-          <input 
-            type="number" 
-            value={checkInterval}
-            onChange={(e) => setCheckInterval(parseInt(e.target.value))}
-            onBlur={() => handleSave()}
-            style={{ background: '#2d2d30', border: '1px solid #444', color: 'white', padding: '6px', borderRadius: '4px', width: '80px' }} 
-          />
-        </div>
-
-        <div style={{ marginBottom: '15px' }}>
-          <label style={{ display: 'flex', alignItems: 'center', gap: '10px', fontSize: '13px' }}>
-             <input 
-                type="checkbox" 
-                checked={launchAtStartup}
-                onChange={(e) => {
-                    setLaunchAtStartup(e.target.checked);
-                    handleSave({ launchAtStartup: e.target.checked });
-                }}
-             /> 
-             Launch at Startup
-          </label>
-        </div>
-      </div>
-
-      {/* GitHub Authentication Section */}
-      <div className="settings-group">
-        <h4>GitHub Authentication</h4>
-        
-        <div style={{ marginBottom: '15px' }}>
-           <div style={{ background: '#252526', padding: '15px', borderRadius: '6px', border: '1px solid #333' }}>
-               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '10px' }}>
-                  <p style={{ marginTop: 0, fontSize: '13px', color: '#ccc', lineHeight: '1.4', maxWidth: '300px' }}>
-                      Connect your GitHub account to access private repositories.
-                  </p>
-                  
-                  {/* Smart Auth Button */}
-                  <button 
-                    onClick={startSmartAuth}
-                    disabled={isSmartWaiting}
-                    style={{
-                      background: isSmartWaiting ? 'transparent' : 'linear-gradient(45deg, #6b21a8, #c026d3)',
-                      border: isSmartWaiting ? '1px dashed #c026d3' : 'none',
-                      color: 'white',
-                      padding: '8px 12px',
-                      borderRadius: '4px',
-                      cursor: 'pointer',
-                      fontSize: '12px',
-                      fontWeight: 'bold',
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '6px',
-                      transition: 'all 0.3s'
-                    }}
-                  >
-                    {isSmartWaiting ? (
-                      <>⏳ Waiting for you to copy token...</>
-                    ) : (
-                      <>✨ Smart Connect</>
-                    )}
-                  </button>
-               </div>
-               
-               {isSmartWaiting && (
-                  <div style={{ fontSize: '11px', color: '#c026d3', marginBottom: '12px', background: 'rgba(192, 38, 211, 0.1)', padding: '8px', borderRadius: '4px' }}>
-                    Browser opened. Generate the token and just <b>copy</b> it to your clipboard. We'll detect it automatically!
-                  </div>
-               )}
-
-               <label style={{ display: 'block', marginBottom: '8px', fontSize: '12px', fontWeight: 'bold', color: '#aaa' }}>
-                   Or paste Manually (Personal Access Token)
-               </label>
-               
-               <div style={{ display: 'flex', gap: '10px', flexDirection: 'column' }}>
-                   <div style={{ display: 'flex', gap: '10px' }}>
-                       <input 
-                           type="password" 
-                           placeholder="ghp_xxxxxxxxxxxx" 
-                           value={githubToken}
-                           onChange={(e) => setGithubToken(e.target.value)}
-                           style={{ flex: 1, background: '#1e1e1e', border: connectionStatus === 'error' ? '1px solid #f14c4c' : '1px solid #444', color: 'white', padding: '8px', borderRadius: '4px', fontFamily: 'monospace' }} 
-                       />
-                       <button 
-                        className="btn-primary" 
-                        onClick={handleConnect}
-                        disabled={isConnecting || !githubToken}
-                        style={{ 
-                            background: connectionStatus === 'success' ? '#238636' : connectionStatus === 'error' ? '#da3633' : '#2da44e', 
-                            border: '1px solid rgba(255,255,255,0.1)', 
-                            minWidth: '100px' 
-                        }}
-                       >
-                          {isConnecting ? 'Verifying...' : connectionStatus === 'success' ? 'Connected' : connectionStatus === 'error' ? 'Invalid' : 'Connect'}
-                       </button>
-                   </div>
-               </div>
-
-               <div style={{ marginTop: '15px', fontSize: '11px', borderTop: '1px solid #333', paddingTop: '10px' }}>
-                   <a href="https://github.com/settings/tokens" target="_blank" rel="noreferrer" style={{ color: '#58a6ff', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
-                      Manual token generation ↗
-                   </a>
-                   <span style={{ color: '#666', marginLeft: '10px' }}>Required scopes: <code>repo</code>, <code>read:user</code></span>
-               </div>
-           </div>
-        </div>
+    <div className="max-w-3xl mx-auto py-6 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+      <div className="flex items-center justify-between pb-6 border-b border-border/50">
+          <div>
+            <h2 className="text-3xl font-bold tracking-tight">Settings</h2>
+            <p className="text-muted-foreground mt-1">Manage your preferences and integrations.</p>
+          </div>
+          <div className="flex items-center gap-2">
+            {saveStatus && <span className="text-sm text-green-500 font-medium animate-in fade-in slide-in-from-right-2">{saveStatus}</span>}
+          </div>
       </div>
       
-      <div style={{ marginTop: '30px', display: 'flex', alignItems: 'center', gap: '10px' }}>
-        <button className="btn-primary" onClick={() => handleSave()}>Save Settings</button>
-        {saveStatus && <span style={{ color: '#6cc970', fontSize: '13px' }}>{saveStatus}</span>}
+      <div className="grid gap-8">
+        {/* GitHub Section - High Priority */}
+        <section className="space-y-4">
+            <div className="flex items-center gap-2 text-lg font-semibold text-foreground">
+                <Github className="w-5 h-5" />
+                <h3>GitHub Integration</h3>
+            </div>
+
+            <Card className="border-l-4 border-l-primary shadow-md overflow-hidden">
+                <CardContent className="p-0">
+                    <div className="grid md:grid-cols-[1fr_250px] divide-y md:divide-y-0 md:divide-x divide-border">
+                        {/* Manual Input Area */}
+                        <div className="p-6 space-y-6">
+                            <div className="space-y-2">
+                                <Label className="text-base font-medium">Personal Access Token</Label>
+                                <p className="text-sm text-muted-foreground">
+                                    Required for private repositories.
+                                </p>
+                            </div>
+
+                            <div className="flex gap-2">
+                                <Input
+                                    type="password"
+                                    placeholder="ghp_xxxxxxxxxxxx"
+                                    value={githubToken}
+                                    onChange={(e) => setGithubToken(e.target.value)}
+                                    className={`font-mono h-10 ${connectionStatus === 'error' ? 'border-destructive focus-visible:ring-destructive' : ''}`}
+                                />
+                                <Button
+                                    onClick={handleConnect}
+                                    disabled={isConnecting || !githubToken}
+                                    variant={connectionStatus === 'success' ? 'default' : connectionStatus === 'error' ? 'destructive' : 'secondary'}
+                                    className={`min-w-[100px] h-10 ${connectionStatus === 'success' ? 'bg-green-600 hover:bg-green-700' : ''}`}
+                                >
+                                    {isConnecting ? <Loader2 className="h-4 w-4 animate-spin" /> :
+                                     connectionStatus === 'success' ? <Check className="h-4 w-4" /> :
+                                     connectionStatus === 'error' ? 'Invalid' : 'Connect'}
+                                </Button>
+                            </div>
+
+                            <div className="text-xs text-muted-foreground flex items-center gap-1">
+                                <a href="https://github.com/settings/tokens" target="_blank" rel="noreferrer" className="text-primary hover:underline inline-flex items-center gap-1">
+                                    Generate Token <ExternalLink className="h-3 w-3" />
+                                </a>
+                                <span className="text-muted-foreground/30 mx-2">|</span>
+                                <span>Scopes: <code className="bg-muted px-1 py-0.5 rounded">repo</code>, <code className="bg-muted px-1 py-0.5 rounded">read:user</code></span>
+                            </div>
+                        </div>
+
+                        {/* Smart Connect Area */}
+                        <div className="bg-muted/10 p-6 flex flex-col justify-center items-center text-center gap-4">
+                            <div className="space-y-1">
+                                <h4 className="font-semibold text-foreground">Smart Connect</h4>
+                                <p className="text-xs text-muted-foreground max-w-[180px] mx-auto">
+                                    The easiest way to connect. No pasting required.
+                                </p>
+                            </div>
+
+                            <Button
+                                onClick={startSmartAuth}
+                                disabled={isSmartWaiting}
+                                size="sm"
+                                className={isSmartWaiting
+                                    ? "w-full border-dashed border-primary text-primary bg-transparent hover:bg-primary/5"
+                                    : "w-full bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-700 hover:to-indigo-700 text-white border-0 shadow-lg shadow-indigo-500/20"}
+                            >
+                                {isSmartWaiting ? (
+                                    <> <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> Waiting... </>
+                                ) : (
+                                    <> <Wand2 className="mr-2 h-3.5 w-3.5" /> Start Magic </>
+                                )}
+                            </Button>
+
+                            {isSmartWaiting && (
+                                <div className="text-[10px] text-primary bg-primary/10 p-2 rounded border border-primary/20 text-left w-full">
+                                    1. Browser opened.<br/>
+                                    2. Generate Token.<br/>
+                                    3. <b>Copy</b> to clipboard.
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+        </section>
+
+        {/* General Settings */}
+        <section className="space-y-4">
+            <div className="flex items-center gap-2 text-lg font-semibold text-foreground">
+                <SettingsIcon className="w-5 h-5" />
+                <h3>Application Preferences</h3>
+            </div>
+
+            <Card>
+                <CardContent className="p-0 divide-y divide-border">
+                    {/* Row 1: Check Interval */}
+                    <div className="flex items-center justify-between p-6">
+                        <div className="space-y-0.5">
+                            <Label htmlFor="checkInterval" className="text-base font-medium flex items-center gap-2">
+                                <Clock className="w-4 h-4 text-muted-foreground" />
+                                Check Interval
+                            </Label>
+                            <p className="text-sm text-muted-foreground">
+                                How frequently to check repositories for updates.
+                            </p>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <Input
+                                id="checkInterval"
+                                type="number"
+                                className="w-20 text-center"
+                                value={checkInterval}
+                                onChange={(e) => setCheckInterval(parseInt(e.target.value))}
+                                onBlur={() => handleSave()}
+                            />
+                            <span className="text-sm font-medium text-muted-foreground">seconds</span>
+                        </div>
+                    </div>
+
+                    {/* Row 2: Startup */}
+                    <div className="flex items-center justify-between p-6 hover:bg-muted/5 transition-colors">
+                        <div className="space-y-0.5">
+                             <Label htmlFor="launchAtStartup" className="text-base font-medium flex items-center gap-2">
+                                <Power className="w-4 h-4 text-muted-foreground" />
+                                Auto-Launch
+                            </Label>
+                            <p className="text-sm text-muted-foreground">
+                                Start Git Watcher Pro automatically when you log in.
+                            </p>
+                        </div>
+                         <Checkbox
+                            id="launchAtStartup"
+                            className="h-5 w-5"
+                            checked={launchAtStartup}
+                            onCheckedChange={(checked) => {
+                                setLaunchAtStartup(checked === true);
+                                handleSave({ launchAtStartup: checked === true });
+                            }}
+                        />
+                    </div>
+
+                    {/* Row 3: Minimize */}
+                    <div className="flex items-center justify-between p-6 hover:bg-muted/5 transition-colors">
+                        <div className="space-y-0.5">
+                             <Label htmlFor="startMinimized" className="text-base font-medium flex items-center gap-2">
+                                <Monitor className="w-4 h-4 text-muted-foreground" />
+                                Start Minimized
+                            </Label>
+                            <p className="text-sm text-muted-foreground">
+                                Launch quietly to the system tray without showing the window.
+                            </p>
+                        </div>
+                         <Checkbox
+                            id="startMinimized"
+                            className="h-5 w-5"
+                            checked={startMinimized}
+                            onCheckedChange={(checked) => {
+                                setStartMinimized(checked === true);
+                                handleSave({ startMinimized: checked === true });
+                            }}
+                        />
+                    </div>
+                </CardContent>
+            </Card>
+        </section>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx
new file mode 100644
index 0000000..209a629
--- /dev/null
+++ b/src/components/ui/Checkbox.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
new file mode 100644
index 0000000..62b3b66
--- /dev/null
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/components/ui/Label.tsx b/src/components/ui/Label.tsx
new file mode 100644
index 0000000..e0d8e04
--- /dev/null
+++ b/src/components/ui/Label.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/verification/dashboard_preview.png b/verification/dashboard_preview.png
deleted file mode 100644
index e020fbf..0000000
Binary files a/verification/dashboard_preview.png and /dev/null differ
diff --git a/verification/verify_changes.py b/verification/verify_changes.py
deleted file mode 100644
index 6c2206a..0000000
--- a/verification/verify_changes.py
+++ /dev/null
@@ -1,21 +0,0 @@
-from playwright.sync_api import sync_playwright
-
-def verify_changes():
-    with sync_playwright() as p:
-        browser = p.chromium.launch(headless=True)
-        page = browser.new_page()
-        try:
-            page.goto("http://localhost:4173")
-            page.wait_for_load_state("networkidle")
-
-            # Take a screenshot of the Dashboard
-            page.screenshot(path="verification/dashboard_preview.png")
-            print("Screenshot taken: verification/dashboard_preview.png")
-
-        except Exception as e:
-            print(f"Error: {e}")
-        finally:
-            browser.close()
-
-if __name__ == "__main__":
-    verify_changes()