diff --git a/frontend/assets/logos/Gitpub-Word-Logo-2-White.svg b/frontend/assets/logos/Gitpub-Word-Logo-2-White.svg
new file mode 100644
index 0000000..01f9630
--- /dev/null
+++ b/frontend/assets/logos/Gitpub-Word-Logo-2-White.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1032.3 319.8">
+  <!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #e17709;
+      }
+
+      .st1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="st1" d="M111.1,255.7c-22.1,0-41.5-5-58.1-15-16.6-10-29.6-24.1-39-42.5C4.7,179.9,0,158.1,0,132.8s4.8-48,14.4-66.4c9.6-18.4,22.7-32.5,39.2-42.3s35.3-14.7,56.2-14.7,25.5,1.9,36.9,5.8,21.6,9.4,30.6,16.5c9,7.1,16.3,15.6,22.1,25.4,5.7,9.8,9.5,20.5,11.4,32.2h-43.9c-1.9-6.4-4.6-12.2-8-17.2-3.4-5-7.5-9.4-12.2-13s-10.2-6.4-16.3-8.3-12.8-2.8-20-2.8c-12.9,0-24.4,3.3-34.5,9.8-10.1,6.6-18.1,16.1-23.9,28.7s-8.7,28-8.7,46.2,2.9,33.4,8.7,46c5.8,12.6,13.8,22.2,24,28.8,10.2,6.6,22,9.9,35.4,9.9s22.8-2.4,31.8-7.1c9-4.7,15.9-11.4,20.8-20.1,4.9-8.7,7.3-18.9,7.3-30.8l9.8,1.6h-65.2v-33.8h97.1v28.8c0,20.5-4.4,38.2-13.1,53.2-8.8,15-20.8,26.5-36.1,34.5s-32.8,12.1-52.6,12.1h0Z"/>
+  <g id="Layer_4">
+    <rect class="st1" x="252.6" y="72.5" width="41.9" height="180"/>
+    <ellipse class="st0" cx="273.7" cy="24.1" rx="24.5" ry="24.1"/>
+  </g>
+  <path class="st1" d="M422.1,72.5v32.8h-102.2v-32.8s102.2,0,102.2,0ZM345.5,29.6h41.9v172.1c0,6.6,1.4,11.4,4.2,14.4,2.8,3.1,7.4,4.6,13.7,4.6s4.5-.2,7.6-.7c3.2-.5,5.7-.9,7.6-1.4l6.6,32.4c-4.6,1.4-9.3,2.4-14.2,3-4.8.6-9.5.9-13.9.9-17.3,0-30.5-4.3-39.8-12.9-9.2-8.6-13.9-20.8-13.9-36.7V29.6h0Z"/>
+  <path class="st1" d="M455.3,319.8V72.5h40.9v29.8h2.7c2.1-4.3,5.2-8.9,9.2-13.8,4-4.9,9.4-9.2,16.2-12.8,6.8-3.6,15.5-5.4,26.2-5.4s26.5,3.5,37.7,10.6c11.2,7.1,20,17.5,26.6,31.3,6.6,13.8,9.9,30.7,9.9,50.6s-3.2,36.6-9.7,50.4-15.3,24.4-26.5,31.6c-11.2,7.2-24,10.9-38.2,10.9s-18.7-1.8-25.6-5.2c-6.9-3.5-12.3-7.7-16.4-12.6s-7.2-9.6-9.3-13.9h-1.8v95.8h-41.9,0ZM539,221.2c9.3,0,17.2-2.6,23.5-7.6,6.3-5.1,11.1-12.1,14.3-20.9,3.2-8.9,4.8-18.9,4.8-30s-1.6-21.1-4.8-29.9c-3.2-8.8-7.9-15.6-14.2-20.6s-14.2-7.5-23.7-7.5-17,2.4-23.3,7.2c-6.3,4.8-11.1,11.6-14.4,20.2-3.3,8.6-4.9,18.8-4.9,30.5s1.6,21.9,4.9,30.8c3.3,8.8,8.1,15.6,14.5,20.5,6.4,4.9,14.1,7.3,23.3,7.3h0Z"/>
+  <path class="st1" d="M722.7,254.7c-12.3,0-23.2-2.6-32.4-7.9-9.3-5.3-16.5-13-21.6-23.1-5.1-10.1-7.7-22.4-7.7-36.8v-114.5h41.9v108c0,12,3.1,21.5,9.4,28.3,6.3,6.9,14.9,10.3,25.8,10.3s14-1.6,19.8-4.8c5.8-3.2,10.3-7.9,13.6-14.2,3.3-6.2,4.9-13.6,4.9-22.2v-105.4h42v180h-39.8l-.5-44.4h3.2c-5,15.7-12.5,27.4-22.4,35.1s-22,11.6-36.4,11.6h0Z"/>
+  <path class="st1" d="M957.9,255.7c-10.2,0-18.7-1.8-25.6-5.2-6.9-3.5-12.3-7.7-16.4-12.6-4.1-4.9-7.2-9.6-9.3-13.9h-2.7v28.5h-40.9V12.6h41.9v89.7h1.8c2.2-4.3,5.2-8.9,9.2-13.8,4-4.9,9.4-9.2,16.2-12.8,6.8-3.6,15.5-5.4,26.2-5.4s26.5,3.5,37.7,10.6c11.2,7.1,20,17.5,26.6,31.3,6.6,13.8,9.9,30.7,9.9,50.6s-3.2,36.6-9.7,50.4-15.3,24.4-26.5,31.6c-11.2,7.2-24,10.9-38.2,10.9h0ZM946.7,221.2c9.3,0,17.2-2.6,23.5-7.6,6.3-5.1,11.1-12.1,14.3-20.9,3.2-8.9,4.8-18.9,4.8-30s-1.6-21.1-4.8-29.9c-3.2-8.8-7.9-15.6-14.2-20.6s-14.2-7.5-23.7-7.5-17,2.4-23.3,7.2-11.1,11.6-14.4,20.2c-3.3,8.6-4.9,18.8-4.9,30.5s1.6,21.9,4.9,30.8c3.3,8.8,8.1,15.6,14.5,20.5,6.4,4.9,14.1,7.3,23.3,7.3h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/css/base.css b/frontend/css/base.css
index dccd2f2..647148d 100644
--- a/frontend/css/base.css
+++ b/frontend/css/base.css
@@ -1,18 +1,18 @@
 :root {
-  --bg-app: #0b1018;
-  --bg-panel: #111a27;
-  --bg-panel-alt: #172234;
-  --bg-hover: #1c2a3f;
-  --border: #253349;
-  --text-main: #e5edf7;
-  --text-muted: #94a7c0;
-  --accent: #4f9dff;
-  --accent-strong: #2f85f4;
-  --success: #41c48f;
-  --danger: #ef6a6a;
-  --radius-md: 10px;
-  --radius-lg: 14px;
-  --shadow: 0 14px 40px rgba(5, 9, 16, 0.45);
+  --bg-app: #0d1117;
+  --bg-panel: #161b22;
+  --bg-panel-alt: #21262d;
+  --bg-hover: #30363d;
+  --border: #30363d;
+  --text-main: #e6edf3;
+  --text-muted: #848d97;
+  --accent: #2f81f7;
+  --accent-strong: #1f6feb;
+  --success: #3fb950;
+  --danger: #f85149;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --shadow: 0 8px 24px rgba(1, 4, 9, 0.75);
 }
 
 * {
@@ -24,9 +24,11 @@ body {
   margin: 0;
   width: 100%;
   height: 100%;
-  background: radial-gradient(circle at top right, #172a47 0%, var(--bg-app) 55%);
+  background: var(--bg-app);
   color: var(--text-main);
-  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 button,
@@ -41,35 +43,68 @@ button {
   border-radius: var(--radius-md);
   background: var(--bg-panel-alt);
   color: var(--text-main);
-  padding: 8px 12px;
+  padding: 5px 12px;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: background 0.1s ease, border-color 0.1s ease;
+  font-size: 14px;
 }
 
 button:hover {
-  transform: translateY(-1px);
-  border-color: #3b4f6e;
+  background: var(--bg-hover);
+  border-color: #8b949e;
 }
 
 button.primary {
-  background: linear-gradient(180deg, #5ca7ff 0%, var(--accent-strong) 100%);
-  border-color: #2670d6;
+  background: #238636;
+  border-color: rgba(240, 246, 252, 0.1);
+  color: #ffffff;
+}
+
+button.primary:hover {
+  background: #2ea043;
+  border-color: rgba(240, 246, 252, 0.1);
+}
+
+button.primary-blue {
+  background: var(--accent-strong);
+  border-color: rgba(240, 246, 252, 0.1);
+  color: #ffffff;
+}
+
+button.primary-blue:hover {
+  background: var(--accent);
+  border-color: rgba(240, 246, 252, 0.1);
 }
 
 button.danger {
-  border-color: #813434;
-  color: #ffcaca;
+  border-color: rgba(248, 81, 73, 0.4);
+  color: #f85149;
+}
+
+button.danger:hover {
+  background: rgba(248, 81, 73, 0.1);
+  border-color: #f85149;
 }
 
 input,
 select,
 textarea {
   width: 100%;
-  padding: 10px 12px;
+  padding: 5px 12px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border);
-  background: #0f1724;
+  background: var(--bg-app);
   color: var(--text-main);
+  font-size: 14px;
+  transition: border-color 0.1s ease, box-shadow 0.1s ease;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.15);
 }
 
 textarea {
diff --git a/frontend/css/components.css b/frontend/css/components.css
index f994403..9837f3a 100644
--- a/frontend/css/components.css
+++ b/frontend/css/components.css
@@ -13,12 +13,12 @@
 
 .sidebar,
 .rightbar {
-  background: rgba(13, 21, 34, 0.88);
+  background: var(--bg-panel);
   border-right: 1px solid var(--border);
 }
 
 .sidebar {
-  padding: 16px;
+  padding: 16px 12px;
   overflow-y: auto;
 }
 
@@ -29,18 +29,18 @@
   overflow-y: auto;
 }
 
-
 .main {
   padding: 16px;
   overflow: auto;
+  background: var(--bg-app);
 }
 
 .panel {
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  background: rgba(16, 26, 41, 0.92);
+  background: var(--bg-panel);
   box-shadow: var(--shadow);
-  padding: 14px;
+  padding: 16px;
 }
 
 .stack {
@@ -66,14 +66,19 @@
 .repo-card {
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  padding: 10px;
-  background: rgba(23, 34, 53, 0.75);
+  padding: 12px;
+  background: var(--bg-panel);
+  transition: border-color 0.1s ease;
+}
+
+.repo-card:hover {
+  border-color: #8b949e;
 }
 
 .repo-grid {
   display: grid;
   gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 }
 
 .repo-filter-pills {
@@ -90,17 +95,18 @@
   color: var(--text-muted);
   font-size: 13px;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  transition: background 0.1s, color 0.1s, border-color 0.1s;
 }
 
 .pill-btn:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--bg-hover);
   color: var(--text-main);
+  border-color: #8b949e;
 }
 
 .pill-btn.active {
-  background: var(--accent);
-  border-color: var(--accent);
+  background: var(--accent-strong);
+  border-color: rgba(240, 246, 252, 0.1);
   color: #fff;
 }
 
@@ -115,13 +121,13 @@
 }
 
 .org-badge {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
-  color: var(--text-main);
-  background: rgba(255, 255, 255, 0.07);
+  color: var(--text-muted);
+  background: var(--bg-panel-alt);
   border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 2px 10px;
+  border-radius: 999px;
+  padding: 1px 10px;
 }
 
 .muted {
@@ -132,16 +138,19 @@
   font-size: 12px;
   color: var(--text-muted);
   margin-bottom: 4px;
+  font-weight: 500;
 }
 
 .title {
   margin: 0;
   font-size: 18px;
+  font-weight: 600;
+  color: var(--text-main);
 }
 
 .subtitle {
   margin: 0;
-  font-size: 13px;
+  font-size: 14px;
   color: var(--text-muted);
 }
 
@@ -171,28 +180,50 @@
   min-height: 100%;
   display: grid;
   place-items: center;
-  padding: 24px;
+  padding: 32px 24px;
+  background: var(--bg-app);
 }
 
 .welcome-card {
   width: min(680px, 100%);
 }
 
+.welcome-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+
+.welcome-logo-img {
+  height: 36px;
+  width: auto;
+}
+
+.welcome-logo-desktop {
+  font-size: 20px;
+  font-weight: 300;
+  color: var(--text-muted);
+  letter-spacing: 0;
+}
+
 .status-ok {
   color: var(--success);
+  font-weight: 500;
 }
 
 .status-error {
   color: var(--danger);
+  font-weight: 500;
 }
 
 /* ── Tabs ─────────────────────────────────────────── */
 .tabs {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 0;
   border-bottom: 1px solid var(--border);
-  padding: 0 4px;
+  padding: 0;
   flex-shrink: 0;
 }
 
@@ -201,24 +232,24 @@
   border: none;
   border-bottom: 2px solid transparent;
   border-radius: 0;
-  padding: 10px 14px;
+  padding: 10px 16px;
   color: var(--text-muted);
-  font-size: 13px;
+  font-size: 14px;
   cursor: pointer;
-  transition: color 0.15s ease, border-color 0.15s ease;
+  transition: color 0.1s ease, border-color 0.1s ease;
   margin-bottom: -1px;
 }
 
 .tab-btn:hover {
-  transform: none;
+  background: transparent;
   color: var(--text-main);
   border-color: transparent;
-  background: transparent;
 }
 
 .tab-btn.active {
   color: var(--text-main);
-  border-bottom-color: var(--accent);
+  border-bottom-color: #f78166;
+  font-weight: 600;
 }
 
 .tab-spacer {
@@ -226,10 +257,10 @@
 }
 
 .tab-search {
-  width: 180px !important;
-  padding: 6px 10px !important;
+  width: 200px !important;
+  padding: 5px 10px !important;
   font-size: 13px;
-  margin: 4px 4px 4px 0;
+  margin: 4px 8px 4px 0;
 }
 
 .main-tabs {
@@ -241,13 +272,39 @@
   top: 0;
   margin: 0 -12px;
   padding: 0 12px;
-  background: rgba(13, 21, 34, 0.96);
+  background: var(--bg-panel);
   z-index: 1;
 }
 
 /* ── Sidebar ──────────────────────────────────────── */
+.sidebar-brand {
+  padding: 4px 0 12px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+}
+
 .sidebar-brand .title {
-  font-size: 16px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sidebar-logo-img {
+  height: 22px;
+  width: auto;
+}
+
+.sidebar-logo-desktop {
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--text-muted);
+  letter-spacing: 0;
+  margin-top: 2px;
 }
 
 .sidebar .server-chip {
@@ -267,8 +324,8 @@
 
 .sidebar-btn {
   flex: 1;
-  font-size: 12px;
-  padding: 7px 8px;
+  font-size: 13px;
+  padding: 5px 8px;
   text-align: center;
 }
 
@@ -286,22 +343,22 @@
   text-overflow: ellipsis;
   cursor: pointer;
   color: var(--text-muted);
-  padding: 3px 0;
+  padding: 4px 0;
   font-size: 13px;
 }
 
 .recent-item:hover {
-  color: var(--text-main);
+  color: var(--accent);
 }
 
 /* ── Git output ───────────────────────────────────── */
 .git-output {
-  background: rgba(0, 0, 0, 0.35);
+  background: #010409;
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 12px 14px;
   font-size: 12px;
-  font-family: "Fira Code", "Cascadia Code", "Consolas", monospace;
+  font-family: ui-monospace, "Cascadia Code", "Fira Code", "Consolas", monospace;
   color: var(--success);
   overflow-x: auto;
   white-space: pre-wrap;
@@ -313,35 +370,50 @@
 .git-output-placeholder {
   font-size: 13px;
   font-style: italic;
+  color: var(--text-muted);
   margin: 0;
 }
 
 .commit-note {
   font-size: 11px;
   margin-top: 4px;
+  color: var(--text-muted);
 }
 
 /* ── Local repo indicator ─────────────────────────── */
 .selected-repo {
   font-size: 13px;
-  padding: 7px 10px;
-  background: rgba(79, 157, 255, 0.08);
-  border: 1px solid rgba(79, 157, 255, 0.18);
+  padding: 6px 10px;
+  background: rgba(47, 129, 247, 0.06);
+  border: 1px solid rgba(47, 129, 247, 0.2);
   border-radius: var(--radius-md);
   word-break: break-all;
+  color: var(--text-muted);
 }
 
 /* ── Empty state ──────────────────────────────────── */
 .empty-state {
   grid-column: 1 / -1;
   text-align: center;
-  padding: 40px 16px;
+  padding: 48px 16px;
 }
 
 .empty-state > div:first-child {
   font-size: 15px;
   color: var(--text-main);
   margin-bottom: 6px;
+  font-weight: 500;
+}
+
+/* ── Repo card details ────────────────────────────── */
+.repo-card strong {
+  color: var(--accent);
+  font-size: 14px;
+}
+
+.repo-card strong:hover {
+  text-decoration: underline;
+  cursor: pointer;
 }
 
 /* ── Responsive ───────────────────────────────────── */
diff --git a/frontend/js/app.js b/frontend/js/app.js
index a386fac..9bb28e7 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -98,6 +98,10 @@ function welcomeView() {
   appRoot.innerHTML = `
     <div class="welcome-wrap">
       <div class="welcome-card stack">
+        <div class="welcome-logo">
+          <img src="/assets/logos/Gitpub-Word-Logo-2-White.svg" alt="Gitpub" class="welcome-logo-img" />
+          <span class="welcome-logo-desktop">Desktop</span>
+        </div>
         <div class="panel stack">
           <h1 class="title">Welcome to Gitpub Desktop</h1>
           <p class="subtitle">
@@ -170,7 +174,10 @@ function dashboardView() {
     <div class="layout">
       <aside class="sidebar stack">
         <div class="sidebar-brand">
-          <h2 class="title">Gitpub Desktop</h2>
+          <div class="sidebar-logo">
+            <img src="/assets/logos/Gitpub-Word-Logo-2-White.svg" alt="Gitpub" class="sidebar-logo-img" />
+            <span class="sidebar-logo-desktop">Desktop</span>
+          </div>
         </div>
 
         <div class="server-chip">