diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f20969e..a97f69c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '18'
+          node-version: '24'
           cache: 'npm'
 
       - name: Install dependencies
@@ -34,7 +34,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '18'
+          node-version: '24'
           cache: 'npm'
 
       - name: Install dependencies
@@ -52,7 +52,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '18'
+          node-version: '24'
           cache: 'npm'
 
       - name: Install dependencies
@@ -75,7 +75,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '18'
+          node-version: '24'
           cache: 'npm'
 
       - name: Install dependencies
diff --git a/.gitignore b/.gitignore
index 87a5f76..df42caa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,6 +43,7 @@ WINDSURF.md
 
 # Legacy local design / planning artifacts
 .superpowers/
+.mockups/
 docs/superpowers/
 icon-concepts.html
 *-450.png
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8340065..c64e761 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Security
-- GitHub sign-in sessions now stay in Chrome session storage only instead of persisting to local extension storage
+- GitHub sign-in sessions now persist in local extension storage for the current Chrome profile instead of clearing at browser shutdown
 - Added validation for the GitHub device-flow verification URL before opening a browser tab
 - Tightened remote image handling for activity avatars and extension page CSP rules
 
diff --git a/README.md b/README.md
index 79f05fe..9cfd6b9 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ Best for people who follow several repos and want one local review queue instead
 - Chrome or another Chromium-based browser that supports Manifest V3 extensions
 - A GitHub account to connect during setup
 - No separate hosted DevWatch account or backend service
-- GitHub sign-in lasts for the current browser session and is cleared when that session ends
+- GitHub sign-in persists in the current Chrome profile until you disconnect it or reset DevWatch
 
 ## Installation
 
@@ -101,10 +101,6 @@ Settings are split into a few practical jobs:
 - Tune filters, notifications, refresh interval, snooze behavior, and item expiry
 - Change theme/color theme, export or import settings, and enable advanced repo-limit options
 
-<div align="center">
-  <img src="screenshots/settings-page.png" alt="Settings page for configuring repositories" width="600">
-</div>
-
 ## Typical Workflow
 
 Here's what using the extension looks like day-to-day:
@@ -123,7 +119,7 @@ That said, this project has not gone through a formal accessibility audit or doc
 
 ## Privacy & Security Notes
 
-The extension talks directly to GitHub's API and does not use a separate analytics or sync backend. It stores settings and cached activity in Chrome extension storage, while the current GitHub auth session stays in Chrome session storage so it is not persisted to disk. Legacy encrypted auth data from older builds is cleared when accessed.
+The extension talks directly to GitHub's API and does not use a separate analytics or sync backend. It stores settings, cached activity, and the current GitHub auth session in Chrome extension storage for the current browser profile. Legacy encrypted auth data from older builds is cleared when accessed.
 
 - **Direct network access** - Requests go to `api.github.com` for activity checks, `github.com` for OAuth device-flow sign-in, and `registry.npmjs.org` only when you use package-name lookup
 - **Scoped browser permissions** - The manifest asks for `storage`, `alarms`, and `notifications`
@@ -187,6 +183,8 @@ npm test
 npm run build
 ```
 
+For the same full local validation pass used in this repo before packaging or release prep, run `npm run validate`.
+
 The automated checks cover shared logic, UI behavior, and a range of mocked extension flows. They do not replace manual testing in Chrome for permissions, service worker lifecycle behavior, or end-to-end interactions against live GitHub data.
 
 Jest enforces minimum global coverage thresholds of 47% lines, 46% branches, and 44% functions. That is a floor for the suite, not a claim of exhaustive coverage.
diff --git a/background.js b/background.js
index d8964d3..4aafd4a 100644
--- a/background.js
+++ b/background.js
@@ -109,11 +109,6 @@ async function checkGitHubActivity() {
       'unmutedRepos'
     ]);
 
-    if (!githubToken) {
-      console.warn('[DevWatch] No GitHub connection found. Please connect GitHub in settings.');
-      return;
-    }
-
     if (!watchedRepos || watchedRepos.length === 0) {
       console.warn('[DevWatch] No repositories being watched. Please add repos in settings.');
       return;
@@ -192,7 +187,9 @@ async function checkGitHubActivity() {
 
 async function fetchRepoActivity(repo, token, since, filters) {
   const activities = [];
-  const headers = createHeaders(token);
+  const headers = token
+    ? createHeaders(token)
+    : { 'Accept': 'application/vnd.github.v3+json' };
 
   async function fetchWithRateLimit(url) {
     try {
@@ -312,9 +309,13 @@ async function fetchRepoActivity(repo, token, since, filters) {
     if (error.message.includes('401')) {
       userMessage = 'GitHub sign-in expired or was revoked. Reconnect GitHub in settings.';
     } else if (error.message.includes('403')) {
-      userMessage = 'Access denied or rate limit exceeded.';
+      userMessage = token
+        ? 'Access denied or rate limit exceeded.'
+        : 'Anonymous GitHub access hit the rate limit or this repo requires GitHub sign-in.';
     } else if (error.message.includes('404')) {
-      userMessage = 'Repository not found or access denied.';
+      userMessage = token
+        ? 'Repository not found or access denied.'
+        : 'Repository not found publicly. If it is private, connect GitHub and try again.';
     } else if (error.message.includes('Network error')) {
       userMessage = 'Network connection error. Please check your internet connection.';
     }
diff --git a/icon.svg b/icon.svg
index c29b4d7..119bd28 100644
--- a/icon.svg
+++ b/icon.svg
@@ -1,18 +1,32 @@
-<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
-  <!-- Git branch diagram (scaled up to use more space) -->
-  <circle cx="35" cy="35" r="14" fill="none" stroke="#3b82f6" stroke-width="5"/>
-  <circle cx="35" cy="93" r="14" fill="none" stroke="#3b82f6" stroke-width="5"/>
-  <circle cx="93" cy="93" r="14" fill="none" stroke="#3b82f6" stroke-width="5"/>
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="shadow" x="0" y="0" width="128" height="128" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="6" stdDeviation="4" flood-color="#0B1220" flood-opacity="0.26"/>
+    </filter>
+    <linearGradient id="tile" x1="1" y1="1" x2="127" y2="127" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#324158"/>
+      <stop offset="1" stop-color="#1A2230"/>
+    </linearGradient>
+    <linearGradient id="blue" x1="22" y1="20" x2="104" y2="104" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#4CB6FF"/>
+      <stop offset="1" stop-color="#1785F4"/>
+    </linearGradient>
+  </defs>
 
-  <!-- Branch lines -->
-  <line x1="35" y1="49" x2="35" y2="79" stroke="#3b82f6" stroke-width="5" stroke-linecap="round"/>
-  <path d="M 35 64 Q 50 64 64 79 L 79 93" fill="none" stroke="#3b82f6" stroke-width="5" stroke-linecap="round"/>
+  <g filter="url(#shadow)">
+    <rect x="1" y="1" width="126" height="126" rx="28" fill="url(#tile)"/>
+    <rect x="10" y="10" width="108" height="108" rx="22" fill="rgba(255,255,255,0.03)"/>
+    <rect x="1.5" y="1.5" width="125" height="125" rx="27.5" stroke="rgba(255,255,255,0.08)"/>
+  </g>
 
-  <!-- Filled centers -->
-  <circle cx="35" cy="35" r="7" fill="#3b82f6"/>
-  <circle cx="35" cy="93" r="7" fill="#3b82f6"/>
-  <circle cx="93" cy="93" r="7" fill="#3b82f6"/>
-
-  <!-- Notification badge -->
-  <circle cx="100" cy="28" r="18" fill="#ef4444"/>
+  <g stroke="url(#blue)" stroke-width="7.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M34 82V49"/>
+    <path d="M34 82C34 72.5 40.5 66.5 50 63.5L66.5 58"/>
+    <path d="M66.5 58C76 55 82 48 82 37V31"/>
+    <path d="M66.5 58H91.5"/>
+    <circle cx="34" cy="41" r="7.25"/>
+    <circle cx="82" cy="25" r="7.25"/>
+    <circle cx="98" cy="58" r="7.25" fill="#99D8FF" stroke="#99D8FF"/>
+    <circle cx="34" cy="93" r="7.25" fill="url(#blue)" stroke="url(#blue)"/>
+  </g>
 </svg>
diff --git a/icons/icon128.png b/icons/icon128.png
index 984ae0a..aa94077 100644
Binary files a/icons/icon128.png and b/icons/icon128.png differ
diff --git a/icons/icon16.png b/icons/icon16.png
index a1f35ea..afeb74c 100644
Binary files a/icons/icon16.png and b/icons/icon16.png differ
diff --git a/icons/icon32.png b/icons/icon32.png
index f2e3260..fea4c69 100644
Binary files a/icons/icon32.png and b/icons/icon32.png differ
diff --git a/icons/icon48.png b/icons/icon48.png
index 206f57b..6c2005f 100644
Binary files a/icons/icon48.png and b/icons/icon48.png differ
diff --git a/options/controllers/import-controller.js b/options/controllers/import-controller.js
index 0cea908..99ef5cd 100644
--- a/options/controllers/import-controller.js
+++ b/options/controllers/import-controller.js
@@ -1,6 +1,9 @@
 import { STORAGE_CONFIG } from '../../shared/config.js';
 import { getAccessToken, getSyncItem, setWatchedRepos } from '../../shared/storage-helpers.js';
-import { createHeaders } from '../../shared/github-api.js';
+import {
+  fetchGitHubRepoSource,
+  getGitHubRepoSourceConfig
+} from '../../shared/github-repo-sources.js';
 import { getRepoFullName, normalizeWatchedRepoRecord } from '../../shared/repo-service.js';
 import { escapeHtml, unescapeHtml } from '../../shared/sanitize.js';
 import { formatDateVerbose } from '../../shared/utils.js';
@@ -72,23 +75,16 @@ export async function openImportModal(type, watchedRepos) {
   importModalState.type = type;
   const modal = document.getElementById('importModal');
   const title = document.getElementById('importModalTitle');
+  const sourceConfig = getGitHubRepoSourceConfig(type);
 
-  const titles = {
-    watched: 'Import Watched Repositories',
-    starred: 'Import Starred Repositories',
-    participating: 'Import Participating Repositories',
-    mine: 'Import My Repositories'
-  };
-
-  title.textContent = titles[type] || 'Import Repositories';
+  title.textContent = sourceConfig.modalTitle;
   importModalState.previousFocusElement = document.activeElement;
 
   modal.classList.add('show');
-  document.getElementById('importLoadingState').style.display = 'flex';
+  document.getElementById('importLoadingState').classList.remove('hidden');
   const reposList = document.getElementById('importReposList');
   reposList.classList.add('hidden');
-  reposList.style.display = 'none';
-  document.getElementById('importErrorState').style.display = 'none';
+  document.getElementById('importErrorState').classList.add('hidden');
 
   setupModalFocusTrap(modal);
 
@@ -98,7 +94,7 @@ export async function openImportModal(type, watchedRepos) {
   }, 100);
 
   try {
-    const repos = await fetchReposFromGitHub(type, token);
+    const repos = await fetchGitHubRepoSource(type, token);
 
     const alreadyAdded = new Set(
       (watchedRepos || [])
@@ -113,100 +109,17 @@ export async function openImportModal(type, watchedRepos) {
 
     importModalState.filteredRepos = [...importModalState.repos];
 
-    document.getElementById('importLoadingState').style.display = 'none';
+    document.getElementById('importLoadingState').classList.add('hidden');
     const reposList = document.getElementById('importReposList');
     reposList.classList.remove('hidden');
-    reposList.style.display = 'block';
     renderImportReposList();
   } catch (error) {
-    document.getElementById('importLoadingState').style.display = 'none';
-    document.getElementById('importErrorState').style.display = 'block';
+    document.getElementById('importLoadingState').classList.add('hidden');
+    document.getElementById('importErrorState').classList.remove('hidden');
     document.getElementById('importErrorMessage').textContent = error.message || 'Failed to fetch repositories';
   }
 }
 
-async function fetchReposFromGitHub(type, token) {
-  const headers = createHeaders(token);
-  let allRepos = [];
-  let page = 1;
-  const perPage = 100;
-  const MAX_PAGES = 100; // Prevent infinite loops (10,000 repos max)
-  const MAX_REPOS = 10000; // Hard limit on total repos
-
-  const endpoints = {
-    watched: 'https://api.github.com/user/subscriptions',
-    starred: 'https://api.github.com/user/starred',
-    participating: 'https://api.github.com/user/repos?affiliation=collaborator,organization_member&sort=pushed',
-    mine: 'https://api.github.com/user/repos?type=all&sort=updated'
-  };
-
-  const url = endpoints[type];
-  if (!url) {
-    throw new Error(`Invalid import type: ${type}`);
-  }
-
-  let hasMorePages = true;
-  let startTime = Date.now();
-  const TIMEOUT_MS = 60000; // 60 second timeout
-
-  while (hasMorePages && page <= MAX_PAGES && allRepos.length < MAX_REPOS) {
-    // Check for timeout to prevent hanging
-    if (Date.now() - startTime > TIMEOUT_MS) {
-      break;
-    }
-
-    // Build URL safely with URLSearchParams
-    const urlObj = new URL(url);
-    urlObj.searchParams.set('per_page', perPage.toString());
-    urlObj.searchParams.set('page', page.toString());
-
-    const response = await fetch(urlObj.toString(), {
-      headers
-    });
-
-    if (!response.ok) {
-      if (response.status === 401) {
-        throw new Error('GitHub sign-in expired or was revoked');
-      } else if (response.status === 403) {
-        throw new Error('Rate limit exceeded or insufficient permissions');
-      } else {
-        throw new Error(`GitHub API error: ${response.status}`);
-      }
-    }
-
-    const repos = await response.json();
-    if (!Array.isArray(repos) || repos.length === 0) {
-      hasMorePages = false;
-      break;
-    }
-
-    const transformed = repos.map(repo => ({
-      fullName: repo.full_name,
-      description: repo.description || 'No description provided',
-      language: repo.language || 'Unknown',
-      stars: repo.stargazers_count || 0,
-      forks: repo.forks_count || 0,
-      updatedAt: repo.updated_at || repo.pushed_at
-    }));
-
-    allRepos.push(...transformed);
-
-    // Stop if we've hit the max repos limit
-    if (allRepos.length >= MAX_REPOS) {
-      break;
-    }
-
-    const linkHeader = response.headers.get('Link');
-    if (!linkHeader || !linkHeader.includes('rel="next"')) {
-      hasMorePages = false;
-    } else {
-      page++;
-    }
-  }
-
-  return allRepos;
-}
-
 export function closeImportModal() {
   const modal = document.getElementById('importModal');
   modal.classList.remove('show');
diff --git a/options/controllers/token-controller.js b/options/controllers/token-controller.js
index 2078be7..2b52550 100644
--- a/options/controllers/token-controller.js
+++ b/options/controllers/token-controller.js
@@ -13,18 +13,19 @@ function setRepoAccessState(isConnected) {
   const repoInput = document.getElementById('repoInput');
   const addRepoBtn = document.getElementById('addRepoBtn');
   const repoHelpText = document.getElementById('repoHelpText');
-  const importSection = document.getElementById('importReposSection');
+  const githubImportButtons = document.querySelectorAll('.github-import-btn');
 
-  repoInput.disabled = !isConnected;
+  repoInput.disabled = false;
   repoInput.placeholder = isConnected
     ? 'e.g., react, facebook/react, or GitHub URL'
-    : 'Connect GitHub to add repositories';
-  addRepoBtn.disabled = !isConnected;
+    : 'e.g., react, facebook/react, GitHub URL, or public npm package';
+  addRepoBtn.disabled = false;
   repoHelpText.textContent = isConnected
     ? 'Add repositories to monitor (npm package, owner/repo, or GitHub URL)'
-    : 'Connect GitHub above to start adding repositories';
-  importSection.classList.toggle('hidden', !isConnected);
-  importSection.style.display = isConnected ? 'block' : 'none';
+    : 'Add public repositories manually now, or connect GitHub above to import your repos and access private ones.';
+  githubImportButtons.forEach((button) => {
+    button.classList.toggle('hidden', !isConnected);
+  });
 }
 
 function setDeviceCode(userCode = '') {
@@ -37,7 +38,6 @@ function setDeviceCode(userCode = '') {
 
   deviceCodeInput.value = userCode;
   deviceCodeSection.classList.toggle('hidden', !userCode);
-  deviceCodeSection.style.display = userCode ? 'flex' : 'none';
 }
 
 function setHelpText(message = '') {
@@ -50,16 +50,54 @@ function setHelpText(message = '') {
   helpEl.textContent = message;
 }
 
+function setStatusRowVisible(isVisible) {
+  const statusRow = document.querySelector('.github-connect-status-row');
+
+  if (!statusRow) {
+    return;
+  }
+
+  statusRow.classList.toggle('hidden', !isVisible);
+}
+
+function setConnectionUiMode(isConnected) {
+  const connectCard = document.querySelector('.github-connect-card');
+  const introText = document.getElementById('githubConnectIntroText');
+  const connectedNote = document.getElementById('githubConnectConnectedNote');
+  const panelHeading = document.getElementById('githubConnectPanelHeading');
+  const panelCopy = document.getElementById('githubConnectPanelCopy');
+
+  connectCard?.classList.toggle('is-connected', isConnected);
+
+  if (introText) {
+    introText.textContent = 'Authorize DevWatch once so it can pull activity for the repositories you monitor without asking for a personal access token.';
+  }
+
+  if (connectedNote) {
+    connectedNote.textContent = 'You\'re all set. DevWatch keeps this browser profile connected until you disconnect or reset it.';
+  }
+
+  if (panelHeading) {
+    panelHeading.textContent = isConnected
+      ? 'Reconnect only if GitHub asks again'
+      : 'Connect once, then just paste if GitHub asks';
+  }
+
+  if (panelCopy) {
+    panelCopy.textContent = 'DevWatch opens GitHub for you and copies the verification code automatically, so the only extra step is pasting it if GitHub prompts for one.';
+  }
+}
+
 function getHelpText({ isConnected = false, isWaiting = false } = {}) {
   if (isWaiting) {
-    return 'Approve access in the GitHub tab, then return here. If GitHub asks for a code, use the one shown below.';
+    return 'Approve access in the GitHub tab, then return here. If GitHub asks for a code, just paste the one DevWatch already copied for you.';
   }
 
   if (isConnected) {
-    return 'Reconnect any time if your session expires or if you want to switch accounts.';
+    return 'Your GitHub connection stays in this Chrome profile until you disconnect it or reset DevWatch. If GitHub asks for a code during reconnect, just paste the one DevWatch copies for you.';
   }
 
-  return 'We\'ll open GitHub in a new tab. Approve access there, then come back here and DevWatch will finish connecting.';
+  return 'We\'ll open GitHub in a new tab and copy the code for you. If GitHub asks for one, just paste it there, approve access, and come back here.';
 }
 
 function setStatus(message = '', statusClass = '') {
@@ -78,7 +116,9 @@ export function applyStoredConnection(authSession, options = {}) {
   const clearBtn = document.getElementById('clearTokenBtn');
   const isConnected = Boolean(authSession?.accessToken);
   const username = authSession?.username;
+  const hasStatusMessage = Boolean(options.statusMessage);
 
+  setConnectionUiMode(isConnected);
   setRepoAccessState(isConnected);
   setDeviceCode(options.userCode || '');
   setHelpText(options.helpText || getHelpText({
@@ -92,11 +132,12 @@ export function applyStoredConnection(authSession, options = {}) {
   }
 
   if (clearBtn) {
-    clearBtn.style.display = isConnected ? 'block' : 'none';
+    clearBtn.classList.toggle('hidden', !isConnected);
   }
 
   if (options.statusMessage) {
     setStatus(options.statusMessage, options.statusClass);
+    setStatusRowVisible(true);
     return;
   }
 
@@ -105,8 +146,10 @@ export function applyStoredConnection(authSession, options = {}) {
       username ? `Connected as ${username}` : 'GitHub is connected',
       'valid'
     );
+    setStatusRowVisible(true);
   } else {
     setStatus('', '');
+    setStatusRowVisible(hasStatusMessage);
   }
 }
 
@@ -147,9 +190,11 @@ export async function connectGitHub(_toastManager) {
     connectBtn.textContent = 'Waiting for GitHub...';
   }
 
+  setConnectionUiMode(Boolean(previousSession?.accessToken));
   setRepoAccessState(Boolean(previousSession?.accessToken));
   setStatus('Starting GitHub sign-in...', 'checking');
-  setHelpText('We\'re opening GitHub so you can approve access. Come back here as soon as GitHub says the connection is ready.');
+  setStatusRowVisible(true);
+  setHelpText('We\'re opening GitHub and copying the code for you. If GitHub asks for one, just paste it there, then come back here as soon as the connection is ready.');
 
   try {
     const result = await completeGitHubDeviceAuth({
@@ -160,8 +205,8 @@ export async function connectGitHub(_toastManager) {
           : false;
         setStatus(
           copied
-            ? `Code ${userCode} copied to clipboard — paste it on the GitHub page that opens.`
-            : `Enter ${userCode} on GitHub to finish connecting.`,
+            ? `Code ${userCode} copied to your clipboard. Paste it on GitHub only if GitHub asks for it.`
+            : `If GitHub asks for a code, enter ${userCode}.`,
           'checking'
         );
         setHelpText(getHelpText({ isWaiting: true }));
diff --git a/options/options.css b/options/options.css
index ff59892..da86ef1 100644
--- a/options/options.css
+++ b/options/options.css
@@ -21,7 +21,7 @@ body {
 
 /* Utility classes */
 .hidden {
-  display: none;
+  display: none !important;
 }
 
 /* Margin utilities */
@@ -75,7 +75,7 @@ body {
 
 /* Display utilities */
 .d-none {
-  display: none;
+  display: none !important;
 }
 
 .d-block {
@@ -137,6 +137,22 @@ body {
   background: transparent;
 }
 
+.sidebar-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.035);
+  border-right: 1px solid var(--border-color);
+  min-width: 228px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  backdrop-filter: blur(14px);
+}
+
 .content-wrapper {
   flex: 1;
   overflow-y: auto;
@@ -164,16 +180,7 @@ h1 {
 .tab-navigation {
   display: flex;
   flex-direction: column;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.035);
-  border-right: 1px solid var(--border-color);
-  min-width: 228px;
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  backdrop-filter: blur(14px);
+  min-height: 0;
 }
 
 .tab-list {
@@ -182,6 +189,60 @@ h1 {
   gap: 8px;
 }
 
+.sidebar-status-card {
+  margin-top: auto;
+  padding: 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.045);
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
+}
+
+.sidebar-status-header-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.sidebar-status-eyebrow {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.sidebar-status-section + .sidebar-status-section {
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid var(--border-color);
+}
+
+.sidebar-status-label {
+  margin: 0 0 6px;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.sidebar-status-value {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.sidebar-status-meta {
+  margin: 4px 0 0;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
 .sidebar-header {
   padding: 16px 16px 14px;
   margin-bottom: 10px;
@@ -193,16 +254,16 @@ h1 {
   font-weight: 600;
   color: var(--text-primary);
   margin: 0;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
   letter-spacing: -0.03em;
 }
 
-.tab-navigation::-webkit-scrollbar {
+.sidebar-shell::-webkit-scrollbar {
   width: 4px;
 }
 
-.tab-navigation::-webkit-scrollbar-thumb {
+.sidebar-shell::-webkit-scrollbar-thumb {
   background: var(--border-color);
   border-radius: 2px;
 }
@@ -222,7 +283,7 @@ h1 {
   transition: all 0.2s ease;
   text-align: left;
   position: relative;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -280,8 +341,11 @@ h1 {
     flex-direction: column;
   }
 
-  .tab-navigation {
+  .sidebar-shell {
     flex-direction: row;
+    flex-wrap: wrap;
+    align-items: stretch;
+    gap: 8px;
     min-width: unset;
     width: 100%;
     height: auto;
@@ -292,11 +356,23 @@ h1 {
     padding: 4px;
   }
 
+  .tab-navigation {
+    flex: 1 1 100%;
+  }
+
   .tab-list {
     flex-direction: row;
+    flex: 1 1 100%;
     min-width: max-content;
   }
 
+  .sidebar-header {
+    width: 100%;
+    margin-bottom: 0;
+    padding: 8px 10px 0;
+    border-bottom: none;
+  }
+
   .tab-button {
     flex-direction: column;
     gap: 4px;
@@ -315,28 +391,27 @@ h1 {
     height: 20px;
   }
 
+  .sidebar-status-card {
+    width: 100%;
+    margin-top: 0;
+  }
+
   .content-wrapper {
     padding: 20px;
   }
 }
 
 .section {
-  margin-bottom: 32px;
-  padding-bottom: 32px;
+  margin-bottom: 40px;
+  padding: 0 0 36px;
   border-bottom: 1px solid var(--border-color);
   scroll-margin-top: 20px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid var(--border-color);
-  border-radius: 24px;
-  padding: 28px;
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
-  backdrop-filter: blur(10px);
 }
 
 .section:last-child {
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: none;
   margin-bottom: 0;
-  padding-bottom: 32px;
+  padding-bottom: 0;
 }
 
 h2 {
@@ -402,9 +477,9 @@ select:focus {
   height: 14px;
   display: inline-block;
   vertical-align: middle;
-  margin-right: 4px;
   color: var(--link-color);
   flex-shrink: 0;
+  margin-top: 2px;
 }
 
 /* Warning icon with color - placed after .info-icon to take precedence */
@@ -414,20 +489,28 @@ select:focus {
 }
 
 .info-box {
-  background: rgba(255, 255, 255, 0.04);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.025) 100%);
   border: 1px solid var(--border-color);
-  padding: 12px 16px;
+  padding: 14px 16px;
   margin: 12px 0;
-  border-radius: 16px;
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
+  border-radius: 18px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
-
 .info-box .help-text {
   margin: 0;
   display: flex;
   align-items: flex-start;
-  gap: 8px;
-  font-size: 14px;
+  gap: 10px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+.info-box strong {
+  color: var(--text-primary);
 }
 
 .info-box-compact {
@@ -447,6 +530,22 @@ select:focus {
   margin-top: 2px;
 }
 
+.setup-inline-link {
+  color: var(--link-color);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.setup-inline-link:hover {
+  text-decoration: underline;
+}
+
+.setup-inline-link:focus-visible {
+  outline: 2px solid var(--link-color);
+  outline-offset: 3px;
+  border-radius: 6px;
+}
+
 button {
   padding: 8px 16px;
   border: 1px solid var(--border-color-dark);
@@ -534,7 +633,7 @@ button.danger:hover {
   font-weight: 600;
   transition: all 0.2s ease;
   user-select: none;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -574,6 +673,30 @@ button.danger:hover {
   border: 1px solid var(--border);
 }
 
+.swatch-polar {
+  background: #0D9488;
+}
+
+.swatch-graphite {
+  background: #6366F1;
+}
+
+.swatch-nightfall {
+  background: #E87B00;
+}
+
+.swatch-obsidian {
+  background: #10B981;
+}
+
+.swatch-sand {
+  background: #9F1239;
+}
+
+.swatch-terminal-ledger {
+  background: #D3A24B;
+}
+
 .subsection-heading {
   font-size: 15px;
   font-weight: 600;
@@ -582,73 +705,56 @@ button.danger:hover {
   color: var(--foreground);
 }
 
-/* Activity Cards Styles */
-.activity-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-top: 16px;
-}
-
-.activity-card {
-  display: flex;
-  flex-direction: column;
-  background: rgba(255, 255, 255, 0.04);
+/* Shared Settings Surfaces */
+.settings-surface {
+  background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border-color);
   border-radius: 18px;
-  overflow: hidden;
-  transition: all 0.2s ease;
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
 }
 
-.activity-card:hover {
-  border-color: var(--link-color);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+.settings-surface:hover {
+  border-color: var(--border-hover);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
 }
 
-.card-header {
+.settings-surface-header {
   display: flex;
   align-items: flex-start;
-  gap: 12px;
-  padding: 16px;
-  background: rgba(255, 255, 255, 0.025);
+  gap: 16px;
 }
 
-.activity-icon {
-  width: 24px;
-  height: 24px;
-  color: var(--link-color);
-  flex-shrink: 0;
-  margin-top: 2px;
+.settings-surface-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.activity-info {
-  flex: 1;
+.settings-surface-actions {
+  display: flex;
+  gap: 24px;
 }
 
-.activity-info h3 {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 4px 0;
+.settings-surface-split {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.activity-info p {
-  font-size: 14px;
-  color: var(--text-secondary);
-  margin: 0;
-  line-height: 1.4;
+.settings-surface-split .settings-surface-header {
+  gap: 12px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.025);
 }
 
-.card-controls {
-  display: flex;
+.settings-surface-split .settings-surface-actions {
   justify-content: space-around;
-  gap: 24px;
   padding: 12px 16px;
   background: rgba(0, 0, 0, 0.04);
 }
 
-.control-section {
+.settings-surface-split .settings-surface-action {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -656,71 +762,235 @@ button.danger:hover {
   flex: 1;
 }
 
-.control-label {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  text-align: center;
+.settings-surface-inline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px;
 }
 
-/* Enhanced Toggle Switch for Activity Cards */
-.activity-toggle {
-  position: relative;
-  display: inline-block;
-  width: 44px;
-  height: 24px;
+.settings-surface-inline .settings-surface-header {
+  gap: 12px;
+  flex: 1;
 }
 
-.activity-toggle input {
-  opacity: 0;
-  width: 0;
-  height: 0;
+.settings-surface-inline .settings-surface-actions {
+  justify-content: flex-end;
+  padding: 0;
+  background: transparent;
+  flex-shrink: 0;
 }
 
-.toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--border-color);
-  transition: all 0.3s ease;
-  border-radius: 24px;
+.settings-surface-prominent {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 20px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 16px 28px rgba(0, 0, 0, 0.08);
 }
 
-.toggle-slider:before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  bottom: 3px;
-  background-color: var(--bg-primary);
-  transition: all 0.3s ease;
-  border-radius: 50%;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+.settings-surface-prominent:hover {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 30px rgba(0, 0, 0, 0.1);
 }
 
-.activity-toggle input:checked + .toggle-slider {
-  background-color: var(--primary);
+.settings-surface-nested {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
 }
 
-.activity-toggle input:focus + .toggle-slider {
-  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+.settings-surface-dashed {
+  border-style: dashed;
+  border-color: var(--border-hover);
+  box-shadow: none;
 }
 
-.activity-toggle input:checked + .toggle-slider:before {
-  transform: translateX(20px);
+.settings-surface-dashed:hover {
+  box-shadow: none;
 }
 
-/* Notification Toggle Specific Styling */
-.notification-toggle .toggle-slider {
-  background-color: var(--border-color-dark);
+.settings-surface-danger:hover {
+  border-color: var(--destructive);
 }
 
-.notification-toggle input:checked + .toggle-slider {
-  background-color: var(--primary);
+.settings-row-group {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-color);
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
+}
+
+.settings-row-group > .settings-row {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.settings-row-group > .settings-row:hover {
+  background: rgba(255, 255, 255, 0.025);
+  transform: none;
+  box-shadow: none;
+}
+
+.settings-row-group > .settings-row + .settings-row {
+  border-top: 1px solid var(--border-color);
+}
+
+/* Secondary support surfaces reused across Settings tabs */
+:where(.github-connect-fact, .filters-help-item, .repo-note, .resource-link, .version-badge, .changelog-content, .import-select-all) {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-color);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+/* Activity Cards Styles */
+.activity-cards {
+  margin-top: 16px;
+}
+
+.activity-card {
+  min-width: 0;
+}
+
+.activity-cards.settings-row-group > .activity-card.settings-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 20px;
+  padding: 18px 20px;
+}
+
+.activity-cards.settings-row-group .settings-surface-header,
+.activity-cards.settings-row-group .settings-surface-actions {
+  padding: 0;
+  background: transparent;
+}
+
+.activity-cards.settings-row-group .settings-surface-actions {
+  justify-content: flex-end;
+  gap: 14px;
+}
+
+.activity-cards.settings-row-group .settings-surface-action {
+  min-width: 104px;
+  align-items: flex-start;
+  text-align: left;
+}
+
+.activity-cards.settings-row-group .control-label {
+  text-align: left;
+}
+
+.card-header {
+  min-width: 0;
+}
+
+.activity-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--link-color);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.activity-info {
+  flex: 1;
+}
+
+.activity-info h3 {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px 0;
+}
+
+.activity-info p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.card-controls {
+  min-width: 0;
+}
+
+.control-section {
+  min-width: 0;
+}
+
+.control-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+/* Enhanced Toggle Switch for Activity Cards */
+.activity-toggle {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+}
+
+.activity-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--border-color);
+  transition: all 0.3s ease;
+  border-radius: 24px;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: var(--bg-primary);
+  transition: all 0.3s ease;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.activity-toggle input:checked + .toggle-slider {
+  background-color: var(--primary);
+}
+
+.activity-toggle input:focus + .toggle-slider {
+  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+}
+
+.activity-toggle input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+/* Notification Toggle Specific Styling */
+.notification-toggle .toggle-slider {
+  background-color: var(--border-color-dark);
+}
+
+.notification-toggle input:checked + .toggle-slider {
+  background-color: var(--primary);
 }
 
 body.dark-mode .notification-toggle input:checked + .toggle-slider {
@@ -755,51 +1025,36 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 /* Feed Management Card */
 .feed-management-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  padding: 16px;
   margin-top: 16px;
-  transition: all 0.2s ease;
 }
 
-.feed-management-card:hover {
-  border-color: var(--link-color);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.feed-management-card .card-header {
+.expiry-settings {
   display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 0;
-  background: transparent;
-  flex: 1;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: 16px;
+  padding: 18px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-color);
+  border-radius: 18px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
-.feed-management-card .card-controls {
-  padding: 0;
-  background: transparent;
+.expiry-settings .info-box {
+  margin: 0;
 }
 
-.expiry-settings {
-  margin-top: 20px;
-  padding: 20px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
+.expiry-settings .input-label-styled {
+  margin-bottom: 0;
 }
 
 /* Styled Number Input */
 .number-input-group {
   display: inline-flex;
   align-items: center;
-  background: var(--bg-primary);
-  border: 2px solid var(--border-color);
-  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.025);
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
   overflow: hidden;
   transition: all 0.2s ease;
 }
@@ -827,7 +1082,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 .input-suffix {
   padding: 10px 16px;
-  background: var(--bg-tertiary);
+  background: rgba(255, 255, 255, 0.04);
   color: var(--text-secondary);
   font-size: 14px;
   font-weight: 500;
@@ -847,11 +1102,11 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: flex-start;
   gap: 16px;
   padding: 20px;
-  background: rgba(255, 255, 255, 0.04);
+  background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border-color);
-  border-radius: 18px;
+  border-radius: 20px;
   transition: all 0.2s ease;
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 .setup-step.clickable {
@@ -862,8 +1117,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 .setup-step:hover {
   border-color: var(--border-hover);
-  transform: translateY(-2px);
-  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
+  transform: translateY(-1px);
+  background: rgba(255, 255, 255, 0.04);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
 }
 
 .step-number {
@@ -879,7 +1135,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   font-size: 16px;
   font-weight: 700;
   flex-shrink: 0;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
 }
 
 .step-content h3 {
@@ -903,7 +1159,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
     linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
   border-color: var(--border-hover);
   padding: 24px;
-  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
 }
 
 .setup-step-primary:hover {
@@ -940,7 +1196,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .github-step-label {
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
@@ -964,6 +1220,15 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   max-width: 60ch;
 }
 
+.github-connect-connected-note {
+  display: none;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  margin-top: 2px;
+  max-width: 56ch;
+}
+
 .github-connect-facts {
   display: grid;
   gap: 12px;
@@ -1005,7 +1270,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   font-weight: 700;
   letter-spacing: 0.01em;
   color: var(--text-primary);
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -1017,26 +1282,20 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .github-connect-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-  padding: 20px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid var(--border-color);
-  border-radius: 22px;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 34px rgba(0, 0, 0, 0.08);
+  min-width: 0;
 }
 
 .github-connect-panel-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
+  display: block;
+}
+
+.github-connect-panel-title {
+  min-width: 0;
 }
 
 .github-panel-label {
   margin: 0 0 10px;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
@@ -1044,39 +1303,117 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   color: var(--text-secondary);
 }
 
-.github-connect-panel-body {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+.github-connect-panel-heading {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 22px;
+  line-height: 1.15;
+  letter-spacing: -0.04em;
 }
 
-.github-connect-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 48px;
-  font-size: 14px;
-  font-weight: 700;
+.github-connect-panel-copy {
+  margin: 10px 0 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.6;
+  max-width: 40ch;
 }
 
-.github-connect-help {
-  margin: 0;
-  font-size: 13px;
+.github-connect-panel-body {
+  min-width: 0;
 }
 
-.github-connect-flow {
-  display: grid;
+.github-connect-status-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.github-connect-status-hint {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  min-height: 34px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.5;
+  max-width: 34ch;
+}
+
+.github-disconnect-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  border: 1px solid var(--error-border);
+  background: var(--error-bg);
+  color: var(--error-text);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
+}
+
+.github-disconnect-btn:hover {
+  background: color-mix(in srgb, var(--error-bg) 72%, var(--destructive));
+  border-color: var(--destructive);
+  color: var(--error-text);
+  transform: none;
+}
+
+.github-disconnect-btn:focus-visible {
+  outline: 2px solid rgba(239, 68, 68, 0.45);
+  outline-offset: 2px;
+}
+
+.github-connect-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 48px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.github-connect-help {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.github-connect-inline-help {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.github-connect-flow {
+  display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
 }
 
 .github-connect-flow-step {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
   padding: 12px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border-color);
   border-radius: 16px;
-  min-height: 108px;
+  min-height: 96px;
 }
 
 .github-connect-flow-step span {
@@ -1086,13 +1423,12 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   width: 28px;
   height: 28px;
   border-radius: 999px;
-  margin-bottom: 12px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid var(--border-color);
   color: var(--text-primary);
   font-size: 12px;
   font-weight: 700;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
 }
 
 .github-connect-flow-step p {
@@ -1102,29 +1438,73 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   line-height: 1.5;
 }
 
+.github-connect-card.is-connected .github-connect-intro {
+  gap: 14px;
+}
+
+.github-connect-card.is-connected #githubConnectIntroText,
+.github-connect-card.is-connected .github-connect-facts,
+.github-connect-card.is-connected .github-connect-flow,
+.github-connect-card.is-connected .github-connect-status-hint,
+.github-connect-card.is-connected #githubConnectPanelCopy {
+  display: none;
+}
+
+.github-connect-card.is-connected .github-connect-connected-note {
+  display: block;
+}
+
+.github-connect-card.is-connected .github-connect-panel {
+  gap: 14px;
+}
+
+.github-connect-card.is-connected .github-connect-panel-body {
+  gap: 14px;
+}
+
+.github-connect-card.is-connected .github-connect-panel-heading {
+  font-size: 20px;
+  max-width: 20ch;
+}
+
 .device-code-card {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 16px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px dashed var(--border-hover);
-  border-radius: 18px;
+  min-width: 0;
 }
 
 .device-code-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
 }
 
+.device-code-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.device-code-copy-text {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
 .device-code-note {
+  display: inline-flex;
+  align-items: center;
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--text-secondary);
+  color: var(--text-primary);
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.04);
+  white-space: nowrap;
 }
 
 .step-header-section {
@@ -1202,6 +1582,26 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
     align-items: stretch;
   }
 
+  .github-connect-panel-header {
+    display: flex;
+  }
+
+  .github-connect-panel-heading {
+    font-size: 20px;
+  }
+
+  .github-connect-status-row {
+    align-items: stretch;
+  }
+
+  .github-disconnect-btn {
+    width: fit-content;
+  }
+
+  .github-connect-status-hint {
+    max-width: none;
+  }
+
   .github-connect-flow {
     grid-template-columns: 1fr;
   }
@@ -1229,28 +1629,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .data-card {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 20px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid var(--border-color);
-  border-radius: 18px;
-  transition: all 0.2s ease;
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
-}
-
-.data-card:hover {
-  border-color: var(--border-hover);
-  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
-}
-
-.data-card.danger-card {
-  border-color: var(--border-color);
-}
-
-.data-card.danger-card:hover {
-  border-color: var(--destructive);
+  min-width: 0;
 }
 
 .data-icon {
@@ -1282,37 +1661,51 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   line-height: 1.4;
 }
 
-.data-action-btn {
+/* Unified Settings button families */
+:is(.action-btn, .data-action-btn, .import-btn, .import-export-btn, .hide-pinned-btn, .unsnooze-btn, .pagination-controls button, #cancelImportBtn) {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  background: var(--link-color);
-  color: var(--background);
-  border: 1px solid var(--link-color);
-  border-radius: 12px;
-  font-size: 13px;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 18px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
   flex-shrink: 0;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
-.data-action-btn:hover {
-  background: var(--link-hover);
+:is(.action-btn, .data-action-btn, .import-btn, .import-export-btn, .hide-pinned-btn, .unsnooze-btn, .pagination-controls button, #cancelImportBtn):hover {
+  background: var(--bg-secondary);
+  border-color: var(--link-color);
   transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(24, 24, 27, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+:is(.action-btn, .data-action-btn, .import-btn, .import-export-btn, .hide-pinned-btn, .unsnooze-btn, .pagination-controls button, #cancelImportBtn):active {
+  transform: translateY(0);
+  box-shadow: none;
+}
+
+:is(.action-btn, .data-action-btn, .import-btn, .import-export-btn, .hide-pinned-btn, .unsnooze-btn, .pagination-controls button, #cancelImportBtn) svg {
+  flex-shrink: 0;
 }
 
-.data-action-btn.danger-btn {
-  background: var(--destructive);
+:is(.data-action-btn.danger-btn, .unsnooze-btn) {
+  border-color: rgba(239, 68, 68, 0.28);
+  color: var(--text-primary);
 }
 
-.data-action-btn.danger-btn:hover {
-  background: var(--danger-hover);
-  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+:is(.data-action-btn.danger-btn, .unsnooze-btn):hover {
+  background: rgba(239, 68, 68, 0.08);
+  border-color: var(--destructive);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 /* Help Tab Styles */
@@ -1323,10 +1716,12 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .help-logo {
-  width: 64px;
-  height: 64px;
+  display: block;
+  width: 72px;
+  height: 72px;
   margin: 0 auto 16px;
-  color: var(--accent-color);
+  border-radius: 18px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
 }
 
 .help-hero h2 {
@@ -1452,115 +1847,345 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   border-top: 1px solid var(--border-color);
 }
 
+.help-version-header {
+  margin-bottom: 20px;
+}
+
 .help-version-changelog h3 {
   font-size: 20px;
   font-weight: 600;
   color: var(--text-primary);
-  margin: 0 0 20px;
-  text-align: center;
-}
-
-.version-info {
-  margin-bottom: 24px;
-  text-align: center;
+  margin: 0 0 8px;
 }
 
-.version-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 20px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  color: var(--text-primary);
+.help-version-intro {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 14px;
+  line-height: 1.6;
 }
 
-.version-badge svg {
-  color: var(--link-color);
-  flex-shrink: 0;
+.version-info {
+  margin-bottom: 16px;
 }
 
-.changelog-content {
-  background: rgba(255, 255, 255, 0.04);
+.version-brief {
+  display: grid;
+  gap: 16px;
+  padding: 20px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.025) 100%),
+    var(--card);
   border: 1px solid var(--border-color);
-  border-radius: 18px;
-  padding: 24px;
-  max-height: 600px;
-  overflow-y: auto;
+  border-radius: 20px;
+  color: var(--text-primary);
 }
 
-.changelog-content h2 {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin: 0 0 16px;
-  padding-bottom: 12px;
-  border-bottom: 2px solid var(--border-color);
+.version-brief-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
 }
 
-.changelog-content h3 {
-  font-size: 18px;
+.version-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 11px;
   font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
   color: var(--link-color);
-  margin: 24px 0 12px;
+  margin-bottom: 10px;
 }
 
-.changelog-content h4 {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 16px 0 8px;
+.version-headline {
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1.15;
+  margin: 0;
 }
 
-.changelog-content p {
+.version-summary {
+  margin: 0;
   font-size: 14px;
-  color: var(--text-secondary);
   line-height: 1.6;
-  margin: 8px 0;
-}
-
-.changelog-content ul {
-  margin: 12px 0;
-  padding-left: 24px;
+  color: var(--text-secondary);
 }
 
-.changelog-content li {
-  font-size: 14px;
-  color: var(--text-secondary);
-  line-height: 1.6;
-  margin: 4px 0;
+.release-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
-.changelog-content code {
-  background: var(--bg-secondary);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+.version-badge,
+.release-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-color);
+  border-radius: 999px;
+  color: var(--text-primary);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.version-badge svg,
+.release-pill svg {
+  color: var(--link-color);
+  flex-shrink: 0;
+}
+
+.release-highlight-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.release-highlight-card {
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.03);
+  display: grid;
+  gap: 6px;
+}
+
+.release-highlight-title,
+.release-chip,
+.release-section-count {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+}
+
+.release-highlight-title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-primary);
+}
+
+.release-highlight-copy {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--text-secondary);
+}
+
+.changelog-content {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.02) 100%),
+    var(--card);
+  border: 1px solid var(--border-color);
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.release-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.release-chip {
+  appearance: none;
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-secondary);
+  border-radius: 999px;
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.release-chip:hover,
+.release-chip:focus-visible,
+.release-chip.active {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: color-mix(in srgb, var(--link-color) 30%, var(--border-color));
+  color: var(--text-primary);
+  outline: none;
+}
+
+.release-notes-list {
+  display: grid;
+  gap: 12px;
+  padding: 16px 20px 20px;
+  max-height: 620px;
+  overflow-y: auto;
+}
+
+.release-section {
+  padding: 16px;
+  border-radius: 18px;
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.03);
+  display: grid;
+  gap: 12px;
+  scroll-margin-top: 16px;
+}
+
+.release-section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+}
+
+.release-section-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+}
+
+.release-section-count {
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+
+.release-section-body {
+  display: grid;
+  gap: 10px;
+}
+
+.release-section-body p {
+  margin: 0;
   font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+.release-section-body ul {
+  margin: 0;
+  padding-left: 20px;
+  display: grid;
+  gap: 6px;
+}
+
+.release-section-body li {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+.release-section-body code {
+  background: var(--bg-secondary);
+  padding: 2px 6px;
+  border-radius: 6px;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 13px;
   color: var(--link-color);
 }
 
-.changelog-content a {
+.release-section-body a {
   color: var(--link-color);
   text-decoration: none;
   font-weight: 500;
 }
 
-.changelog-content a:hover {
+.release-section-body a:hover {
   text-decoration: underline;
 }
 
-.changelog-content strong {
+.release-section-body strong {
   color: var(--text-primary);
   font-weight: 600;
 }
 
-.changelog-footer {
+.changelog-content > h2,
+.changelog-content > h3,
+.changelog-content > h4,
+.changelog-content > p,
+.changelog-content > ul {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.changelog-content > h2 {
   margin-top: 20px;
-  padding-top: 16px;
+  margin-bottom: 12px;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  color: var(--text-primary);
+}
+
+.changelog-content > h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.changelog-content > h4 {
+  margin-top: 16px;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.changelog-content > p,
+.changelog-content > li,
+.changelog-content > ul li {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+.changelog-content > ul {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 40px;
+}
+
+.changelog-content > p code,
+.changelog-content > ul code {
+  background: var(--bg-secondary);
+  padding: 2px 6px;
+  border-radius: 6px;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 13px;
+  color: var(--link-color);
+}
+
+.changelog-content > p a,
+.changelog-content > ul a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.changelog-content > p a:hover,
+.changelog-content > ul a:hover {
+  text-decoration: underline;
+}
+
+.changelog-footer {
+  display: flex;
+  justify-content: center;
+  padding: 16px 20px 20px;
   border-top: 1px solid var(--border-color);
-  text-align: center;
+  background: rgba(255, 255, 255, 0.02);
 }
 
 .changelog-link {
@@ -1571,14 +2196,37 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
-  padding: 8px 16px;
-  border-radius: 8px;
-  transition: all 0.2s ease;
+  padding: 10px 16px;
+  border-radius: 999px;
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.03);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
 }
 
-.changelog-link:hover {
-  background: var(--bg-secondary);
-  text-decoration: none;
+.changelog-link:hover,
+.changelog-link:focus-visible {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: color-mix(in srgb, var(--link-color) 24%, var(--border-color));
+  outline: none;
+}
+
+.release-empty-state {
+  padding: 24px 20px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+@media (max-width: 900px) {
+  .version-brief-top,
+  .release-section-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .release-highlight-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .changelog-link svg {
@@ -1608,6 +2256,20 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 /* Responsive Design */
 @media (max-width: 768px) {
+  .activity-cards.settings-row-group > .activity-card.settings-row {
+    grid-template-columns: 1fr;
+  }
+
+  .activity-cards.settings-row-group .settings-surface-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .activity-cards.settings-row-group .settings-surface-action {
+    min-width: 0;
+    flex: 1;
+  }
+
   .repo-section-header {
     flex-wrap: wrap;
   }
@@ -1628,29 +2290,17 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 @media (max-width: 480px) {
   .activity-card {
-    margin: 0 -8px;
-    border-radius: 8px;
-  }
-
-  .card-header {
-    padding: 12px;
+    margin: 0;
+    border-radius: 0;
   }
 
-  .card-controls {
-    padding: 10px 12px;
-  }
-
-  .control-section {
-    gap: 6px;
-  }
-
-  .feed-management-card {
+  .settings-surface-inline {
     flex-direction: column;
     gap: 16px;
     align-items: flex-start;
   }
 
-  .feed-management-card .card-controls {
+  .settings-surface-inline .settings-surface-actions {
     width: 100%;
     display: flex;
     justify-content: flex-end;
@@ -1661,6 +2311,16 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
     margin-bottom: 16px;
   }
 
+  .repo-item {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .repo-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
   .repo-section-header {
     flex-direction: column;
     gap: 12px;
@@ -1696,12 +2356,79 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   }
 }
 
-.filters-help .help-text {
+.filters-help {
+  gap: 14px;
+  padding: 16px 18px;
+}
+
+.filters-help-header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.filters-help-eyebrow {
+  display: inline-flex;
+  align-self: flex-start;
+  padding: 4px 8px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.filters-help-intro {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 13px;
   line-height: 1.6;
 }
 
-.filters-help .help-text:first-of-type {
-  margin-bottom: 8px;
+.filters-help-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 12px;
+}
+
+.filters-help-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-color);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.filters-help-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.filters-help-label {
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.filters-help-detail {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.filters-help .info-icon {
+  color: var(--text-primary);
+  opacity: 0.82;
+  margin-top: 1px;
 }
 
 .subsection {
@@ -1720,25 +2447,30 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .repo-list {
   list-style: none;
   margin-top: 16px;
+  padding: 0;
 }
 
 .repo-item {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
-  padding: 16px;
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  margin-bottom: 12px;
-  background: rgba(255, 255, 255, 0.04);
+  align-items: center;
+  padding: 18px 20px;
+  border: none;
+  border-radius: 0;
+  margin-bottom: 0;
+  background: transparent;
   gap: 16px;
   transition: all 0.15s ease;
 }
 
 .repo-item:hover {
-  border-color: var(--border-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  background: rgba(255, 255, 255, 0.025);
+  transform: none;
+  box-shadow: none;
+}
+
+.repo-list.settings-row-group .repo-item + .repo-item {
+  border-top: 1px solid var(--border-color);
 }
 
 .repo-content {
@@ -1749,7 +2481,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .repo-name {
   display: flex;
   align-items: center;
-  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   font-size: 13px;
   font-weight: 600;
   color: var(--text-primary);
@@ -1787,13 +2519,13 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 /* Repository Section Cards */
 .repo-section-card {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
   border-radius: 22px;
   padding: 24px;
   margin-bottom: 24px;
-  transition: all 0.2s ease;
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
 }
 
 .add-repo-card {
@@ -1810,11 +2542,133 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   display: flex;
   align-items: flex-start;
   gap: 16px;
-  margin-bottom: 20px;
+  margin-bottom: 0;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--border-color);
 }
 
+#addRepoPanel {
+  display: grid;
+  gap: 12px;
+}
+
+.import-btn.active {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: var(--border-hover);
+  color: var(--text-primary);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.popular-repos-panel {
+  margin: 0;
+}
+
+.popular-repos-surface {
+  display: grid;
+  gap: 14px;
+  padding: 18px;
+  background: rgba(255, 255, 255, 0.035);
+  border-color: var(--border-color);
+}
+
+.popular-repos-panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.popular-repos-panel-header h3 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 16px;
+}
+
+.popular-repos-panel-header .help-text {
+  margin: 6px 0 0;
+}
+
+.popular-repos-state {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.popular-repo-suggestions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.popular-repo-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 18px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-color);
+  border-radius: 18px;
+  transition: all 0.15s ease;
+}
+
+.popular-repo-card:hover {
+  border-color: var(--border-hover);
+  background: rgba(255, 255, 255, 0.045);
+  transform: translateY(-1px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
+}
+
+.popular-repo-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.popular-repo-name {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+}
+
+.popular-repo-description {
+  margin-bottom: 8px;
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--text-secondary);
+}
+
+.popular-repo-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.popular-repo-add-btn {
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border-radius: 14px;
+  flex-shrink: 0;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.popular-repo-add-btn:disabled {
+  opacity: 1;
+}
+
+.popular-repo-add-btn.added {
+  background: var(--success-bg);
+  border-color: var(--success-border);
+  color: var(--success-text);
+}
+
 .repo-section-icon {
   width: 32px;
   height: 32px;
@@ -1862,7 +2716,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   font-size: 12px;
   font-weight: 700;
   margin-left: 4px;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
 }
 
 /* Action Buttons Layout */
@@ -1884,39 +2738,6 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: center;
 }
 
-.action-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text-primary);
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 600;
-  transition: all 0.2s ease;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
-  text-transform: uppercase;
-}
-
-.action-btn:hover {
-  background: var(--input-bg);
-  border-color: var(--link-color);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.action-btn:active {
-  transform: translateY(0);
-  box-shadow: none;
-}
-
-.action-btn svg {
-  flex-shrink: 0;
-}
-
 .action-btn.active {
   background: var(--link-color);
   color: white;
@@ -1930,17 +2751,74 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 /* Collapsible Panels */
 .repo-panel {
-  margin: 16px 0 24px 0;
+  margin: 0 0 16px 0;
   overflow: hidden;
   opacity: 0;
   max-height: 0;
   transition: all 0.2s ease-in-out; /* Simpler transition */
+  border-radius: 0;
+}
+
+.repo-panel.show {
+  opacity: 1;
+  max-height: 300px; /* Increased max-height to accommodate import buttons */
+}
+
+.popular-repos-panel.show {
+  max-height: 520px;
+}
+
+.repo-toolbar.show {
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.repo-notes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.repo-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-height: 100%;
+  padding: 14px 16px;
   border-radius: 18px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-color);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.repo-note-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.repo-note-label {
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.repo-note-detail {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.55;
 }
 
-.repo-panel.show {
-  opacity: 1;
-  max-height: 300px; /* Increased max-height to accommodate import buttons */
+.repo-notes .info-icon {
+  color: var(--text-primary);
+  opacity: 0.82;
+}
+
+.repo-notes .help-text {
+  margin: 0;
+  font-size: 13px;
 }
 
 .repo-search-container {
@@ -1967,23 +2845,26 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   background: rgba(255, 255, 255, 0.04);
 }
 
-.search-clear-btn {
-  position: absolute;
-  right: 8px;
-  background: none;
+:is(.search-clear-btn, .close-modal) {
+  background: transparent;
   border: none;
-  padding: 4px;
-  cursor: pointer;
   color: var(--text-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 3px;
+  border-radius: 10px;
   transition: all 0.2s ease;
 }
 
-.search-clear-btn:hover {
-  background-color: var(--hover-bg);
+.search-clear-btn {
+  position: absolute;
+  right: 8px;
+  padding: 4px;
+  cursor: pointer;
+}
+
+:is(.search-clear-btn, .close-modal):hover {
+  background: var(--bg-secondary);
   color: var(--text-primary);
 }
 
@@ -1992,26 +2873,14 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .hide-pinned-btn {
-  display: inline-flex;
-  align-items: center;
   gap: 6px;
-  padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid var(--border-color-dark);
-  border-radius: 12px;
-  cursor: pointer;
   font-size: 12px;
   font-weight: 600;
   color: var(--text-secondary);
-  transition: all 0.2s;
   white-space: nowrap;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
-  text-transform: uppercase;
 }
 
 .hide-pinned-btn:hover {
-  background: var(--bg-secondary);
-  border-color: var(--link-color);
   color: var(--link-color);
 }
 
@@ -2050,13 +2919,16 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .pagination-controls button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+  border-color: var(--border-color);
 }
 
 .add-repo-form {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-top: 16px;
+  margin-top: 0;
 }
 
 .repo-input-label {
@@ -2131,20 +3003,22 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 
 /* Import Repos Section */
 .import-repos-section {
-  margin: 16px 0;
-  padding: 16px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
+  margin: 12px 0 0;
+  padding: 12px 0 0;
+  background: transparent;
+  border: none;
+  border-top: 1px solid var(--border-color);
+  border-radius: 0;
 }
 
 /* Import Repos Section when inside panel */
 .repo-panel .import-repos-section {
-  margin: 16px 0 0 0;
-  padding: 12px 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
+  margin: 12px 0 0;
+  padding: 12px 0 0;
+  background: transparent;
+  border: none;
+  border-top: 1px solid var(--border-color);
+  border-radius: 0;
 }
 
 .import-repos-section .help-text {
@@ -2163,27 +3037,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   flex-wrap: wrap;
 }
 
-.import-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border: 1px solid var(--border-color-dark);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text-primary);
-  cursor: pointer;
-  font-size: 12px;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
-  transition: all 0.2s;
-  text-transform: uppercase;
-  font-weight: 600;
-}
-
 /* Import buttons when inside panel - make them smaller */
 .repo-panel .import-btn {
-  padding: 6px 12px;
-  font-size: 14px;
+  padding: 8px 14px;
 }
 
 .repo-panel .import-icon {
@@ -2191,14 +3047,11 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   height: 16px;
 }
 
-.import-btn:hover {
-  background: var(--bg-secondary);
-  border-color: var(--link-color);
-}
-
 .import-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
 }
 
 .import-icon {
@@ -2231,7 +3084,9 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .modal-content {
-  background: rgba(24, 22, 20, 0.96);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.03) 100%),
+    var(--card);
   border: 1px solid var(--border-color);
   border-radius: 22px;
   width: 90%;
@@ -2267,30 +3122,17 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   margin: 0;
   font-size: 18px;
   color: var(--text-primary);
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
   letter-spacing: -0.03em;
 }
 
 .close-modal {
-  background: none;
-  border: none;
   font-size: 24px;
-  color: var(--text-secondary);
-  cursor: pointer;
   padding: 0;
   width: 32px;
   height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.close-modal:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
+  cursor: pointer;
 }
 
 .modal-body {
@@ -2381,14 +3223,14 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .repo-item.import-variant.selected {
-  border-color: var(--link-color);
-  box-shadow: 0 0 0 2px var(--link-color);
-  background: var(--bg-tertiary);
+  border-color: rgba(16, 185, 129, 0.48);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(16, 185, 129, 0.34);
+  background: rgba(16, 185, 129, 0.12);
 }
 
 .repo-item.import-variant.selected:hover {
   transform: translateY(-1px);
-  box-shadow: 0 0 0 2px var(--link-color), 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(16, 185, 129, 0.34), 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .repo-item.import-variant.already-added {
@@ -2405,7 +3247,8 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   padding: 6px 12px;
   background: var(--success-bg);
   color: var(--success-text);
-  border-radius: 4px;
+  border: 1px solid var(--success-border);
+  border-radius: 999px;
   font-size: 12px;
   font-weight: 500;
   white-space: nowrap;
@@ -2457,14 +3300,14 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   color: var(--text-primary);
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
 }
 
 #deviceCodeSection input {
   letter-spacing: 0.22em;
   font-weight: 600;
   text-align: center;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   font-size: 20px;
   padding: 16px 14px;
 }
@@ -2511,11 +3354,14 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
+  align-self: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
-.pin-btn {
+:is(.pin-btn, .mute-btn, .link-btn) {
   background: rgba(255, 255, 255, 0.04);
-  border: 1px solid var(--border-color-dark);
+  border: 1px solid var(--border-color);
   border-radius: 12px;
   padding: 8px 10px;
   cursor: pointer;
@@ -2523,13 +3369,13 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   align-items: center;
   justify-content: center;
   color: var(--text-secondary);
-  transition: all 0.2s;
+  transition: all 0.2s ease;
 }
 
-.pin-btn:hover {
-  background: var(--bg-tertiary);
+:is(.pin-btn, .mute-btn, .link-btn):hover {
+  background: var(--bg-secondary);
   border-color: var(--link-color);
-  color: var(--link-color);
+  color: var(--text-primary);
 }
 
 .pin-btn.pinned {
@@ -2543,50 +3389,14 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   border-color: #f59e0b;
 }
 
-.mute-btn {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid var(--border-color-dark);
-  border-radius: 12px;
-  padding: 8px 10px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--link-color);
-  transition: all 0.2s;
-}
-
-.mute-btn:hover {
-  background: var(--bg-tertiary);
-  border-color: var(--link-color);
-}
-
 .mute-btn.muted {
   color: var(--text-secondary);
   border-color: var(--border-color);
 }
 
 .mute-btn.muted:hover {
-  color: var(--error-text);
-  border-color: var(--error-text);
-}
-
-.link-btn {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid var(--border-color-dark);
-  border-radius: 12px;
-  padding: 8px 10px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--link-color);
-  transition: all 0.2s;
-}
-
-.link-btn:hover {
-  background: var(--bg-tertiary);
-  border-color: var(--link-color);
+  color: var(--destructive);
+  border-color: var(--destructive);
 }
 
 .link-btn:focus-visible {
@@ -2622,7 +3432,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 }
 
 .repo-item.pinned {
-  border-left: 3px solid #f59e0b;
+  box-shadow: inset 3px 0 0 #f59e0b;
   background: rgba(245, 158, 11, 0.05);
 }
 
@@ -2634,44 +3444,12 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   flex-wrap: wrap;
 }
 
-.import-export-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 20px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid var(--border-color);
-  border-radius: 14px;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 600;
-  transition: all 0.2s ease;
-  color: var(--text-primary);
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
-  text-transform: uppercase;
-}
-
-.import-export-btn:hover {
-  background: var(--bg-secondary);
-  border-color: var(--link-color);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.import-export-btn:active {
-  transform: translateY(0);
-}
-
 .ie-icon {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
 }
 
-body.dark-mode .import-export-btn:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
 /* Focus indicators for accessibility */
 button:focus-visible,
 .import-btn:focus-visible,
@@ -2711,9 +3489,17 @@ body.dark-mode select:focus-visible {
   outline-offset: 2px;
 }
 
+.repo-item.import-variant:focus {
+  outline: none;
+}
+
 .repo-item.import-variant:focus-visible {
-  outline: 2px solid var(--link-color);
-  outline-offset: -2px;
+  outline: none;
+  border-color: rgba(16, 185, 129, 0.6);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    0 0 0 1px rgba(16, 185, 129, 0.4),
+    0 0 0 4px rgba(16, 185, 129, 0.16);
 }
 
 .search-clear-btn:focus-visible {
@@ -2724,6 +3510,8 @@ body.dark-mode select:focus-visible {
 /* Current Snoozes Section */
 .current-snoozes {
   margin-top: 24px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border-color);
 }
 
 .current-snoozes h3 {
@@ -2737,13 +3525,17 @@ body.dark-mode select:focus-visible {
   margin-top: 16px;
 }
 
+.snoozed-repos-list.settings-row-group .snoozed-repo-item + .snoozed-repo-item {
+  border-top: 1px solid var(--border-color);
+}
+
 .empty-snoozes {
   text-align: center;
-  padding: 40px 20px;
+  padding: 28px 20px;
   color: var(--text-secondary);
-  background: var(--bg-secondary);
-  border: 2px dashed var(--border-color);
-  border-radius: 8px;
+  background: transparent;
+  border: none;
+  border-radius: 0;
 }
 
 .empty-snoozes p {
@@ -2761,10 +3553,11 @@ body.dark-mode select:focus-visible {
 .empty-repos-card {
   text-align: center;
   padding: 48px 32px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px dashed var(--border-color);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-color);
   border-radius: 20px;
-  margin: 16px 0;
+  margin: 0;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 .empty-repos-icon {
@@ -2800,10 +3593,11 @@ body.dark-mode select:focus-visible {
   color: var(--text-secondary);
   line-height: 1.6;
   margin: 0;
-  padding: 16px;
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 16px;
-  border: 1px solid var(--border-color);
+  padding: 16px 0 0;
+  background: transparent;
+  border-radius: 0;
+  border: none;
+  border-top: 1px solid var(--border-color);
   text-align: left;
 }
 
@@ -2812,16 +3606,15 @@ body.dark-mode select:focus-visible {
   align-items: center;
   justify-content: space-between;
   padding: 16px;
-  margin-bottom: 8px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
+  margin-bottom: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
   transition: all 0.2s;
 }
 
 .snoozed-repo-item:hover {
-  background: var(--bg-tertiary);
-  border-color: var(--border-color-dark);
+  background: rgba(255, 255, 255, 0.025);
 }
 
 .snoozed-repo-info {
@@ -2831,7 +3624,7 @@ body.dark-mode select:focus-visible {
 .snoozed-repo-name {
   font-weight: 600;
   color: var(--text-primary);
-  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   font-size: 13px;
   margin-bottom: 4px;
 }
@@ -2847,26 +3640,6 @@ body.dark-mode select:focus-visible {
   align-items: center;
 }
 
-.unsnooze-btn {
-  background: var(--danger-bg);
-  color: white;
-  border: 1px solid var(--danger-bg);
-  padding: 8px 16px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
-  text-transform: uppercase;
-}
-
-.unsnooze-btn:hover {
-  background: var(--danger-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
-}
-
 .unsnooze-btn:focus-visible {
   outline: 2px solid var(--link-color);
   outline-offset: 2px;
@@ -2896,8 +3669,11 @@ body.dark-mode .snooze-expiry-warning {
 }
 
 .toast {
-  background: rgba(24, 22, 20, 0.96);
-  border: 1px solid var(--border-color);
+  position: relative;
+  overflow: hidden;
+  background: var(--card);
+  color: var(--foreground);
+  border: 1px solid var(--border);
   border-radius: 16px;
   padding: 12px 16px;
   box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22);
@@ -2958,14 +3734,14 @@ body.dark-mode .snooze-expiry-warning {
 
 .toast-message {
   flex: 1;
-  color: var(--text-primary);
+  color: var(--foreground);
 }
 
 .toast-close {
   flex-shrink: 0;
   background: none;
   border: none;
-  color: var(--text-secondary);
+  color: var(--muted-foreground);
   cursor: pointer;
   padding: 4px;
   border-radius: 10px;
@@ -2978,7 +3754,25 @@ body.dark-mode .snooze-expiry-warning {
 
 .toast-close:hover {
   opacity: 1;
-  background: var(--bg-secondary);
+  background: var(--accent);
+}
+
+.toast-action {
+  flex-shrink: 0;
+  background: transparent;
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.toast-action:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
 /* Auto-remove toast progress bar */
@@ -2987,7 +3781,7 @@ body.dark-mode .snooze-expiry-warning {
   bottom: 0;
   left: 0;
   height: 3px;
-  background: var(--border-color);
+  background: var(--border);
   border-radius: 0 0 6px 6px;
   transition: width linear;
 }
@@ -3021,7 +3815,7 @@ body.dark-mode .snooze-expiry-warning {
   cursor: pointer;
   transition: all 0.2s;
   text-decoration: none;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -3075,7 +3869,7 @@ body.dark-mode .snooze-expiry-warning {
   padding: 8px 10px;
   border-radius: 10px;
   transition: background 0.2s, transform 0.2s;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -3112,7 +3906,7 @@ body.dark-mode .setup-btn:hover {
   font-size: 16px;
   margin-bottom: 12px;
   font-weight: 600;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -3136,7 +3930,7 @@ body.dark-mode .setup-btn:hover {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
 }
 
 .footer-column ul {
@@ -3159,7 +3953,7 @@ body.dark-mode .setup-btn:hover {
   padding: 6px 8px;
   border-radius: 10px;
   transition: all 0.2s;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
diff --git a/options/options.html b/options/options.html
index 390aff8..41ba0fc 100644
--- a/options/options.html
+++ b/options/options.html
@@ -4,24 +4,20 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>GitHub DevWatch - Settings</title>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <script src="../shared/theme-boot.js"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="../shared/themes.css">
   <link rel="stylesheet" href="options.css">
 </head>
-<body>
-  <div class="container">
-    <nav class="tab-navigation" aria-label="Settings">
+  <body>
+    <div class="container">
+      <div class="sidebar-shell">
+        <nav class="tab-navigation" aria-label="Settings">
       <div class="sidebar-header">
         <h2>Settings</h2>
       </div>
       <div class="tab-list" role="tablist" aria-label="Settings sections" aria-orientation="vertical">
-        <button class="tab-button active" type="button" id="tab-setup" role="tab" data-tab="setup" aria-selected="true" aria-controls="panel-setup" tabindex="0">
-          <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
-          </svg>
-          <span>Setup</span>
-        </button>
-        <button class="tab-button" type="button" id="tab-repositories" role="tab" data-tab="repositories" aria-selected="false" aria-controls="panel-repositories" tabindex="-1">
+        <button class="tab-button active" type="button" id="tab-repositories" role="tab" data-tab="repositories" aria-selected="true" aria-controls="panel-repositories" tabindex="0">
           <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
           </svg>
@@ -46,18 +42,42 @@ <h2>Settings</h2>
           </svg>
           <span>Advanced</span>
         </button>
+        <button class="tab-button" type="button" id="tab-setup" role="tab" data-tab="setup" aria-selected="false" aria-controls="panel-setup" tabindex="-1">
+          <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
+          </svg>
+          <span>Setup</span>
+        </button>
         <button class="tab-button" type="button" id="tab-help" role="tab" data-tab="help" aria-selected="false" aria-controls="panel-help" tabindex="-1">
           <svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
           </svg>
           <span>Help</span>
         </button>
+        </div>
+        </nav>
+        <aside class="sidebar-status-card" aria-live="polite" aria-label="GitHub status">
+          <div class="sidebar-status-header-row">
+            <p class="sidebar-status-eyebrow">GitHub Status</p>
+          </div>
+
+          <div class="sidebar-status-section">
+            <p class="sidebar-status-label">Account</p>
+            <p class="sidebar-status-value" id="sidebarAuthAccount">Not connected</p>
+            <p class="sidebar-status-meta" id="sidebarAuthMeta">Connect GitHub to show the signed-in account and scopes.</p>
+          </div>
+
+          <div class="sidebar-status-section">
+            <p class="sidebar-status-label">API Calls</p>
+            <p class="sidebar-status-value" id="sidebarRateLimitValue">No data yet</p>
+            <p class="sidebar-status-meta" id="sidebarRateLimitMeta">Updates after the next GitHub request finishes.</p>
+          </div>
+        </aside>
       </div>
-    </nav>
 
-    <div class="content-wrapper">
+      <div class="content-wrapper">
     <!-- Tab Panel 1: Setup -->
-    <div class="tab-panel" id="panel-setup" role="tabpanel" data-tab="setup" aria-labelledby="tab-setup">
+    <div class="tab-panel" id="panel-setup" role="tabpanel" data-tab="setup" aria-labelledby="tab-setup" hidden>
     <section class="section">
       <h2>Getting Started</h2>
       <p class="help-text">Set up DevWatch and shape the review queue the way you work.</p>
@@ -74,7 +94,8 @@ <h2>Getting Started</h2>
 
                 <div class="github-connect-copy">
                   <h3>Connect GitHub</h3>
-                  <p>Authorize DevWatch once so it can pull activity for the repositories you monitor without asking for a personal access token.</p>
+                  <p id="githubConnectIntroText">Authorize DevWatch once so it can pull activity for the repositories you monitor without asking for a personal access token.</p>
+                  <p id="githubConnectConnectedNote" class="github-connect-connected-note">You're all set. DevWatch keeps this browser profile connected until you disconnect or reset it.</p>
                 </div>
 
                 <div class="github-connect-facts">
@@ -85,8 +106,8 @@ <h3>Connect GitHub</h3>
                       </svg>
                     </div>
                     <div>
-                      <p class="github-connect-fact-title">Stored for this browser session</p>
-                      <p class="github-connect-fact-copy">Your GitHub connection stays in Chrome session storage and clears when the browser session ends.</p>
+                      <p class="github-connect-fact-title">Stays on this browser</p>
+                      <p class="github-connect-fact-copy">Your GitHub connection stays in this Chrome profile until you disconnect it or reset DevWatch.</p>
                     </div>
                   </div>
 
@@ -104,21 +125,29 @@ <h3>Connect GitHub</h3>
                 </div>
               </div>
 
-              <div class="github-connect-panel">
-                <div class="github-connect-panel-header">
-                  <div>
+              <div class="github-connect-panel settings-surface settings-surface-prominent">
+                <div class="github-connect-panel-header settings-surface-header">
+                  <div class="github-connect-panel-title">
                     <p class="github-panel-label">Connection status</p>
-                    <span id="tokenStatus" class="token-status" aria-live="polite"></span>
+                    <h4 id="githubConnectPanelHeading" class="github-connect-panel-heading">Connect once, then just paste if GitHub asks</h4>
+                    <p id="githubConnectPanelCopy" class="github-connect-panel-copy">DevWatch opens GitHub for you and copies the verification code automatically, so the only extra step is pasting it if GitHub prompts for one.</p>
                   </div>
-                  <button id="clearTokenBtn" class="danger hidden" aria-label="Disconnect GitHub">Disconnect</button>
                 </div>
 
-                <div class="github-connect-panel-body">
+                <div class="github-connect-panel-body settings-surface-body">
+                  <div class="github-connect-status-row">
+                    <span id="tokenStatus" class="token-status" aria-live="polite"></span>
+                    <button id="clearTokenBtn" class="github-disconnect-btn hidden" aria-label="Disconnect GitHub">Disconnect</button>
+                  </div>
+
                   <button id="connectGitHubBtn" class="primary github-connect-btn" aria-describedby="token-help tokenStatus">Connect GitHub</button>
 
-                  <p id="token-help" class="help-text github-connect-help">
-                    We'll open GitHub in a new tab. Approve access there, then come back here and DevWatch will finish connecting.
-                  </p>
+                  <div class="github-connect-inline-help">
+                    <span class="github-connect-status-hint">Paste the copied code only if GitHub asks for it.</span>
+                    <p id="token-help" class="help-text github-connect-help">
+                      We'll open GitHub in a new tab and copy the code for you. If GitHub asks for one, just paste it there, approve access, and come back here.
+                    </p>
+                  </div>
 
                   <div class="github-connect-flow" aria-hidden="true">
                     <div class="github-connect-flow-step">
@@ -135,12 +164,15 @@ <h3>Connect GitHub</h3>
                     </div>
                   </div>
 
-                  <div id="deviceCodeSection" class="device-code-card hidden">
+                  <div id="deviceCodeSection" class="device-code-card settings-surface settings-surface-nested settings-surface-dashed hidden">
                     <div class="device-code-header">
-                      <label for="githubToken" class="device-code-label">Verification code</label>
-                      <span class="device-code-note">Ready if GitHub asks for it</span>
+                      <div class="device-code-copy">
+                        <label for="githubToken" class="device-code-label">User verification code</label>
+                        <p class="device-code-copy-text">Already copied for you</p>
+                      </div>
+                      <span class="device-code-note">Paste on GitHub if prompted</span>
                     </div>
-                    <input type="text" id="githubToken" placeholder="Verification code appears here" aria-describedby="token-help tokenStatus" autocomplete="off" readonly>
+                    <input type="text" id="githubToken" aria-describedby="token-help tokenStatus" autocomplete="off" readonly>
                   </div>
                 </div>
               </div>
@@ -152,7 +184,7 @@ <h3>Connect GitHub</h3>
           <div class="step-number">2</div>
           <div class="step-content">
             <h3>Add Repositories</h3>
-            <p>Go to the <strong>Repositories</strong> tab to add repositories you want to monitor. You can add them manually or import from your GitHub account.</p>
+            <p>Go to the <strong>Repositories</strong> tab to add public repositories manually, or connect GitHub to import your repos and include private ones.</p>
           </div>
         </a>
 
@@ -178,24 +210,24 @@ <h3>View Help & Changelog</h3>
           <svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
           </svg>
-          <span><strong>Tip:</strong> DevWatch checks for new activity every 15 minutes by default. You'll see a badge on the extension icon when there's new activity to review.</span>
+          <span><strong>Tip:</strong> DevWatch checks for new activity every 15 minutes by default. <a class="setup-inline-link" href="#preferences" data-tab="preferences">Change the check interval in Preferences.</a> You'll still see a badge on the extension icon when there's new activity to review.</span>
         </p>
       </div>
     </section>
     </div>
 
     <!-- Tab Panel 2: Repositories -->
-    <div class="tab-panel" id="panel-repositories" role="tabpanel" data-tab="repositories" aria-labelledby="tab-repositories" hidden>
+    <div class="tab-panel" id="panel-repositories" role="tabpanel" data-tab="repositories" aria-labelledby="tab-repositories">
     <section class="section" id="repositories">
       <!-- Add New Repository Card -->
-      <div class="repo-section-card add-repo-card">
-        <div class="repo-section-header">
+      <div class="repo-section-card settings-surface add-repo-card">
+        <div class="repo-section-header settings-surface-header">
           <svg class="repo-section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
           </svg>
           <div class="repo-section-title">
             <h2>Add New Repository</h2>
-	            <p class="help-text" id="repoHelpText">Connect GitHub above to start adding repositories</p>
+	            <p class="help-text" id="repoHelpText">Add public repositories manually now, or connect GitHub above to import your repos and access private ones.</p>
           </div>
         </div>
 
@@ -204,38 +236,44 @@ <h2>Add New Repository</h2>
         <div class="add-repo-form" role="form" aria-label="Add new repository">
           <label for="repoInput" class="repo-input-label">Repository:</label>
           <div class="repo-input-wrapper">
-            <input type="text" id="repoInput" placeholder="e.g., react, facebook/react, or GitHub URL" disabled aria-describedby="repo-help">
+            <input type="text" id="repoInput" placeholder="e.g., react, facebook/react, GitHub URL, or public npm package" aria-describedby="repo-help">
             <span id="repoValidationStatus" class="repo-validation-status" aria-live="polite"></span>
           </div>
-          <button id="addRepoBtn" class="primary" disabled aria-label="Add repository to watch list">Add</button>
+          <button id="addRepoBtn" class="primary" aria-label="Add repository to watch list">Add</button>
         </div>
-        <p id="repo-help" class="help-text">Enter repository name in format owner/repo, just repo name, or full GitHub URL</p>
+        <p id="repo-help" class="help-text">Enter a public repo in owner/repo format, a repo name, a GitHub URL, or an npm package. Connect GitHub to import and access private repos.</p>
         <div id="repoError" class="repo-error"></div>
 
         <!-- Quick Import Section -->
-        <div class="import-repos-section hidden" id="importReposSection">
-          <p class="help-text">Quick import repositories from your GitHub account:</p>
+        <div class="import-repos-section repo-utility-strip" id="importReposSection">
+          <p class="help-text">Quick add sources: browse a few popular public repos, or connect GitHub to import your own.</p>
           <div class="import-buttons">
-            <button id="importWatchedBtn" class="import-btn">
+            <button id="togglePopularReposBtn" class="import-btn" type="button" aria-expanded="false" aria-controls="popularReposPanel">
+              <svg class="import-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 17.75 6.173 21l1.113-6.486L2.571 9.93l6.514-.946L12 3l2.915 5.984 6.514.946-4.715 4.584L17.827 21z"/>
+              </svg>
+              Browse Popular
+            </button>
+            <button id="importWatchedBtn" class="import-btn github-import-btn hidden">
               <svg class="import-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
               </svg>
               Import Watched
             </button>
-            <button id="importStarredBtn" class="import-btn">
+            <button id="importStarredBtn" class="import-btn github-import-btn hidden">
               <svg class="import-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
               </svg>
               Import Starred
             </button>
-            <button id="importParticipatingBtn" class="import-btn">
+            <button id="importParticipatingBtn" class="import-btn github-import-btn hidden">
               <svg class="import-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
               </svg>
               Import Participating
             </button>
-            <button id="importMineBtn" class="import-btn">
+            <button id="importMineBtn" class="import-btn github-import-btn hidden">
               <svg class="import-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
               </svg>
@@ -243,12 +281,25 @@ <h2>Add New Repository</h2>
             </button>
           </div>
         </div>
-      </div>
+
+        <div id="popularReposPanel" class="repo-panel popular-repos-panel" aria-label="Popular public repositories">
+          <div class="popular-repos-surface settings-surface">
+            <div class="popular-repos-panel-header">
+              <div>
+                <h3>Popular Public Repositories</h3>
+                <p class="help-text">Quickly add a few active public repos without leaving the page.</p>
+              </div>
+            </div>
+            <div id="popularReposState" class="popular-repos-state">Loading popular repositories...</div>
+            <div id="popularReposList" class="popular-repo-suggestions hidden"></div>
+          </div>
+        </div>
+        </div>
       </div>
 
       <!-- Your Watched Repositories Card -->
-      <div class="repo-section-card watched-repos-card">
-        <div class="repo-section-header">
+      <div class="repo-section-card settings-surface watched-repos-card">
+        <div class="repo-section-header settings-surface-header">
           <svg class="repo-section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
           </svg>
@@ -267,7 +318,7 @@ <h2>Your Watched Repositories <span class="repo-count-badge" id="repoCountBadge"
         </div>
 
       <!-- Search Repository Panel -->
-      <div class="repo-panel" id="searchRepoPanel">
+      <div class="repo-panel repo-toolbar" id="searchRepoPanel">
         <div class="repo-search-controls">
           <div class="search-input-wrapper">
             <input type="text" id="repoSearch" placeholder="Search repositories...">
@@ -280,28 +331,34 @@ <h2>Your Watched Repositories <span class="repo-count-badge" id="repoCountBadge"
         </div>
       </div>
 
-      <ul id="repoList" class="repo-list"></ul>
+      <ul id="repoList" class="repo-list settings-row-group"></ul>
 
       <div class="pagination-controls hidden" id="paginationControls">
         <button id="prevPage" disabled>Previous</button>
         <span id="pageInfo" class="page-info"></span>
         <button id="nextPage" disabled>Next</button>
       </div>
+      </div>
 
-      <div class="repo-features-info info-box">
-        <p class="help-text info-flex-start mb-8">
+      <div class="repo-notes" aria-label="Repository quick tips">
+        <div class="repo-note">
           <svg class="info-icon icon-top-aligned" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
           </svg>
-          <span><strong>Pin:</strong> Keep repositories at the top of your feed for quick access. Pinned repos always appear above other repositories in the popup.</span>
-        </p>
-        <p class="help-text info-flex-start">
+          <div class="repo-note-copy">
+            <span class="repo-note-label">Pin repositories</span>
+            <span class="repo-note-detail">Keep important repos at the top of your feed for quick access. Pinned repos always appear first in the popup.</span>
+          </div>
+        </div>
+        <div class="repo-note">
           <svg class="info-icon icon-top-aligned" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
           </svg>
-          <span><strong>Mute:</strong> Stop receiving browser notifications for a repository (activity still appears in feed)</span>
-        </p>
-      </div>
+          <div class="repo-note-copy">
+            <span class="repo-note-label">Mute notifications</span>
+            <span class="repo-note-detail">Stop browser notifications for a repository while still keeping its activity in your feed.</span>
+          </div>
+        </div>
       </div>
     </section>
     </div>
@@ -312,9 +369,9 @@ <h2>Your Watched Repositories <span class="repo-count-badge" id="repoCountBadge"
       <h2>Activity Filters & Notifications</h2>
       <p class="help-text">Choose which types of activity to show and get notified about</p>
 
-      <div class="activity-cards">
-        <div class="activity-card">
-          <div class="card-header">
+      <div class="activity-cards settings-row-group">
+        <div class="activity-card settings-surface settings-surface-split settings-row">
+          <div class="card-header settings-surface-header">
             <svg class="activity-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
             </svg>
@@ -323,15 +380,15 @@ <h3>Pull Requests</h3>
               <p>Show new and updated PRs</p>
             </div>
           </div>
-          <div class="card-controls">
-            <div class="control-section">
+          <div class="card-controls settings-surface-actions">
+            <div class="control-section settings-surface-action">
               <label class="control-label">Show in feed</label>
               <label class="activity-toggle">
                 <input type="checkbox" id="filterPrs" checked>
                 <span class="toggle-slider"></span>
               </label>
             </div>
-            <div class="control-section">
+            <div class="control-section settings-surface-action">
               <label class="control-label">Notifications</label>
               <label class="activity-toggle notification-toggle">
                 <input type="checkbox" id="notifyPrs" checked>
@@ -341,8 +398,8 @@ <h3>Pull Requests</h3>
           </div>
         </div>
 
-        <div class="activity-card">
-          <div class="card-header">
+        <div class="activity-card settings-surface settings-surface-split settings-row">
+          <div class="card-header settings-surface-header">
             <svg class="activity-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
             </svg>
@@ -351,15 +408,15 @@ <h3>Issues</h3>
               <p>Show new and updated issues</p>
             </div>
           </div>
-          <div class="card-controls">
-            <div class="control-section">
+          <div class="card-controls settings-surface-actions">
+            <div class="control-section settings-surface-action">
               <label class="control-label">Show in feed</label>
               <label class="activity-toggle">
                 <input type="checkbox" id="filterIssues" checked>
                 <span class="toggle-slider"></span>
               </label>
             </div>
-            <div class="control-section">
+            <div class="control-section settings-surface-action">
               <label class="control-label">Notifications</label>
               <label class="activity-toggle notification-toggle">
                 <input type="checkbox" id="notifyIssues" checked>
@@ -369,8 +426,8 @@ <h3>Issues</h3>
           </div>
         </div>
 
-        <div class="activity-card">
-          <div class="card-header">
+        <div class="activity-card settings-surface settings-surface-split settings-row">
+          <div class="card-header settings-surface-header">
             <svg class="activity-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
             </svg>
@@ -379,15 +436,15 @@ <h3>Releases</h3>
               <p>Show new version releases</p>
             </div>
           </div>
-          <div class="card-controls">
-            <div class="control-section">
+          <div class="card-controls settings-surface-actions">
+            <div class="control-section settings-surface-action">
               <label class="control-label">Show in feed</label>
               <label class="activity-toggle">
                 <input type="checkbox" id="filterReleases" checked>
                 <span class="toggle-slider"></span>
               </label>
             </div>
-            <div class="control-section">
+            <div class="control-section settings-surface-action">
               <label class="control-label">Notifications</label>
               <label class="activity-toggle notification-toggle">
                 <input type="checkbox" id="notifyReleases" checked>
@@ -398,19 +455,31 @@ <h3>Releases</h3>
         </div>
       </div>
 
-      <div class="filters-help info-box">
-        <p class="help-text">
-          <svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-          </svg>
-          <span><strong>Activity Filters:</strong> Enable categories to show them in your activity feed</span>
-        </p>
-        <p class="help-text">
-          <svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-          </svg>
-          <span><strong>Notifications:</strong> Enable browser notifications (requires the category to be enabled first)</span>
-        </p>
+      <div class="filters-help info-box" aria-label="Activity filter help">
+        <div class="filters-help-header">
+          <span class="filters-help-eyebrow">How it works</span>
+          <p class="filters-help-intro">Feed visibility and browser notifications are controlled separately for each activity type.</p>
+        </div>
+        <div class="filters-help-grid">
+          <div class="filters-help-item">
+            <svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            <div class="filters-help-copy">
+              <span class="filters-help-label">Activity feed</span>
+              <span class="filters-help-detail">Enable a category here to include new and updated items in your feed.</span>
+            </div>
+          </div>
+          <div class="filters-help-item">
+            <svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            <div class="filters-help-copy">
+              <span class="filters-help-label">Notifications</span>
+              <span class="filters-help-detail">Browser notifications only work after the matching category is enabled in the feed first.</span>
+            </div>
+          </div>
+        </div>
       </div>
     </section>
     </div>
@@ -421,8 +490,8 @@ <h3>Releases</h3>
       <h2>Feed Management</h2>
       <p class="help-text">Control how long activity items are stored in your feed and archive</p>
 
-      <div class="feed-management-card">
-        <div class="card-header">
+      <div class="feed-management-card settings-surface settings-surface-inline settings-row">
+        <div class="card-header settings-surface-header">
           <svg class="activity-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
           </svg>
@@ -431,7 +500,7 @@ <h3>Auto-Remove Old Items</h3>
             <p>Automatically clean up items after a specified time period</p>
           </div>
         </div>
-        <div class="card-controls">
+        <div class="card-controls settings-surface-actions">
           <label class="activity-toggle">
             <input type="checkbox" id="itemExpiryEnabled">
             <span class="toggle-slider"></span>
@@ -505,42 +574,42 @@ <h3 class="subsection-heading">Color Theme</h3>
           <div class="chip">
             <input type="radio" name="colorTheme" id="color-polar" value="polar" checked>
             <label for="color-polar">
-              <span class="color-swatch" style="background: #0D9488;" aria-hidden="true"></span>
+              <span class="color-swatch swatch-polar" aria-hidden="true"></span>
               Polar
             </label>
           </div>
           <div class="chip">
             <input type="radio" name="colorTheme" id="color-graphite" value="graphite">
             <label for="color-graphite">
-              <span class="color-swatch" style="background: #6366F1;" aria-hidden="true"></span>
+              <span class="color-swatch swatch-graphite" aria-hidden="true"></span>
               Graphite
             </label>
           </div>
           <div class="chip">
             <input type="radio" name="colorTheme" id="color-nightfall" value="nightfall">
             <label for="color-nightfall">
-              <span class="color-swatch" style="background: #E87B00;" aria-hidden="true"></span>
+              <span class="color-swatch swatch-nightfall" aria-hidden="true"></span>
               Nightfall
             </label>
           </div>
           <div class="chip">
             <input type="radio" name="colorTheme" id="color-obsidian" value="obsidian">
             <label for="color-obsidian">
-              <span class="color-swatch" style="background: #10B981;" aria-hidden="true"></span>
+              <span class="color-swatch swatch-obsidian" aria-hidden="true"></span>
               Obsidian
             </label>
           </div>
           <div class="chip">
             <input type="radio" name="colorTheme" id="color-sand" value="sand">
             <label for="color-sand">
-              <span class="color-swatch" style="background: #9F1239;" aria-hidden="true"></span>
+              <span class="color-swatch swatch-sand" aria-hidden="true"></span>
               Sand
             </label>
           </div>
           <div class="chip">
             <input type="radio" name="colorTheme" id="color-terminal-ledger" value="terminal-ledger">
             <label for="color-terminal-ledger">
-              <span class="color-swatch" style="background: #D3A24B;" aria-hidden="true"></span>
+              <span class="color-swatch swatch-terminal-ledger" aria-hidden="true"></span>
               Terminal Ledger
             </label>
           </div>
@@ -606,8 +675,8 @@ <h2>Snooze Duration</h2>
         </div>
       </fieldset>
 
-      <div class="feed-management-card mt-16">
-        <div class="card-header">
+      <div class="feed-management-card settings-surface settings-surface-inline settings-row mt-16">
+        <div class="card-header settings-surface-header">
           <svg class="activity-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
           </svg>
@@ -616,7 +685,7 @@ <h3>Mark as Read on Snooze</h3>
             <p>Automatically mark all repository items as read when snoozing</p>
           </div>
         </div>
-        <div class="card-controls">
+        <div class="card-controls settings-surface-actions">
           <label class="activity-toggle">
             <input type="checkbox" id="markReadOnSnooze">
             <span class="toggle-slider"></span>
@@ -626,7 +695,7 @@ <h3>Mark as Read on Snooze</h3>
 
       <div class="current-snoozes">
         <h3>Currently Snoozed</h3>
-        <div id="snoozedReposList" class="snoozed-repos-list">
+        <div id="snoozedReposList" class="snoozed-repos-list settings-row-group">
           <div class="empty-snoozes" id="emptySnoozes">
             <p>No repositories are currently snoozed</p>
             <small>Snooze repositories from the popup to see them here</small>
@@ -642,7 +711,7 @@ <h3>Currently Snoozed</h3>
       <h2>Data Management</h2>
       <p class="help-text">Manage your extension data, cache, and settings</p>
 
-      <div class="data-card mt-24">
+      <div class="data-card settings-surface settings-surface-inline settings-row mt-24">
         <svg class="data-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7.5 8c-2.5 0-4.5 1.8-4.5 4s2 4 4.5 4c2 0 3.5-1.5 4.5-3.5 1 2 2.5 3.5 4.5 3.5 2.5 0 4.5-1.8 4.5-4s-2-4-4.5-4c-2 0-3.5 1.5-4.5 3.5-1-2-2.5-3.5-4.5-3.5z"/>
         </svg>
@@ -665,8 +734,8 @@ <h3>Unlimited Repositories</h3>
         </p>
       </div>
 
-      <div class="data-management-cards">
-        <div class="data-card">
+      <div class="data-management-cards settings-row-group">
+        <div class="data-card settings-surface settings-surface-inline settings-row">
           <svg class="data-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
           </svg>
@@ -682,7 +751,7 @@ <h3>Clear Cache</h3>
           </button>
         </div>
 
-        <div class="data-card danger-card">
+        <div class="data-card settings-surface settings-surface-inline settings-surface-danger danger-card settings-row">
           <svg class="data-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
           </svg>
@@ -698,7 +767,7 @@ <h3>Clear All Data</h3>
           </button>
         </div>
 
-        <div class="data-card danger-card">
+        <div class="data-card settings-surface settings-surface-inline settings-surface-danger danger-card settings-row">
           <svg class="data-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
           </svg>
@@ -759,24 +828,7 @@ <h2>Import/Export Settings</h2>
     <div class="tab-panel" id="panel-help" role="tabpanel" data-tab="help" aria-labelledby="tab-help" hidden>
     <section class="section">
       <div class="help-hero">
-        <svg class="help-logo" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-          <!-- Git branch diagram (scaled up to use more space) -->
-          <circle cx="35" cy="35" r="14" fill="none" stroke="currentColor" stroke-width="5"/>
-          <circle cx="35" cy="93" r="14" fill="none" stroke="currentColor" stroke-width="5"/>
-          <circle cx="93" cy="93" r="14" fill="none" stroke="currentColor" stroke-width="5"/>
-
-          <!-- Branch lines -->
-          <line x1="35" y1="49" x2="35" y2="79" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
-          <path d="M 35 64 Q 50 64 64 79 L 79 93" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
-
-          <!-- Filled centers -->
-          <circle cx="35" cy="35" r="7" fill="currentColor"/>
-          <circle cx="35" cy="93" r="7" fill="currentColor"/>
-          <circle cx="93" cy="93" r="7" fill="currentColor"/>
-
-          <!-- Notification badge -->
-          <circle cx="100" cy="28" r="18" fill="#ef4444"/>
-        </svg>
+        <img class="help-logo" src="../icons/icon128.png" alt="DevWatch icon">
         <h2>GitHub DevWatch</h2>
         <p class="help-tagline">Monitor repositories easily and stay updated with GitHub activity</p>
       </div>
@@ -828,12 +880,15 @@ <h4>Privacy & Security</h4>
       </div>
 
       <div class="help-version-changelog">
-        <h3>Version & Changelog</h3>
+        <div class="help-version-header">
+          <h3>Latest Release</h3>
+          <p class="help-version-intro">See what shipped most recently and skim the full release notes.</p>
+        </div>
         <div id="versionInfo" class="version-info">
           <p>Loading version information...</p>
         </div>
         <div id="changelogContent" class="changelog-content">
-          <p>Loading changelog...</p>
+          <p>Loading latest release...</p>
         </div>
       </div>
 
diff --git a/options/options.js b/options/options.js
index 4e7db83..e0d3c2e 100644
--- a/options/options.js
+++ b/options/options.js
@@ -1,8 +1,10 @@
 import { applyTheme, applyColorTheme, formatDateVerbose } from '../shared/utils.js';
+import { escapeHtml } from '../shared/sanitize.js';
 import {
   clearAuthSession,
   getAuthSession,
   getAccessToken,
+  getLocalItem,
   getSettings,
   getWatchedRepos,
   setLocalItem,
@@ -19,6 +21,7 @@ import {
   normalizeSettings
 } from '../shared/settings-schema.js';
 import { NotificationManager } from '../shared/ui/notification-manager.js';
+import { OnboardingManager } from '../shared/onboarding.js';
 
 // Controllers
 import { setupThemeListener } from './controllers/theme-controller.js';
@@ -33,9 +36,13 @@ import { renderRepoList } from './views/repository-list-view.js';
 
 // Global toast manager instance (singleton)
 const toastManager = NotificationManager.getInstance();
+const onboardingManager = new OnboardingManager();
+const LATEST_RELEASE_API_URL = 'https://api.github.com/repos/jonmartin721/devwatch-github/releases/latest';
+const CHANGELOG_GITHUB_URL = 'https://github.com/jonmartin721/devwatch-github/releases';
 
 const state = {
   watchedRepos: [],
+  popularRepos: [],
   mutedRepos: [],
   pinnedRepos: [],
   currentPage: 1,
@@ -44,12 +51,15 @@ const state = {
   hidePinnedRepos: false
 };
 
+let sidebarStatusStorageListener = null;
+
 if (typeof document !== 'undefined') {
   document.addEventListener('DOMContentLoaded', async () => {
     // Initialize toast manager first
     toastManager.init();
 
     await loadSettings();
+    setupSidebarStatusAutoRefresh();
     setupEventListeners();
     setupThemeListener();
     setupSnoozedReposAutoRefresh();
@@ -144,23 +154,28 @@ function setupTabNavigation() {
   });
 
   // Add click listeners to clickable setup steps
-  const clickableSetupSteps = document.querySelectorAll('.setup-step.clickable');
-  clickableSetupSteps.forEach(step => {
-    step.addEventListener('click', (event) => {
+  const bindTabTrigger = (element) => {
+    element.addEventListener('click', (event) => {
       event.preventDefault();
-      const tabName = step.dataset.tab;
+      const tabName = element.dataset.tab;
       if (tabName) {
         switchTab(tabName, { focusTab: true });
       }
     });
-  });
+  };
+
+  const clickableSetupSteps = document.querySelectorAll('.setup-step.clickable');
+  clickableSetupSteps.forEach(bindTabTrigger);
+
+  const setupTabLinks = document.querySelectorAll('.setup-inline-link[data-tab]');
+  setupTabLinks.forEach(bindTabTrigger);
 
   // Initialize active tab from localStorage or URL hash
   const hash = window.location.hash.substring(1);
   const savedTab = localStorage.getItem('activeTab');
-  const initialTab = hash || savedTab || 'setup';
+  const initialTab = hash || savedTab || 'repositories';
 
-  const tabToActivate = validTabs.includes(initialTab) ? initialTab : 'setup';
+  const tabToActivate = validTabs.includes(initialTab) ? initialTab : 'repositories';
 
   switchTab(tabToActivate);
 }
@@ -182,6 +197,152 @@ function handleUrlParameters() {
 
 }
 
+function togglePopularReposPanel(forceOpen = null) {
+  const panel = document.getElementById('popularReposPanel');
+  const button = document.getElementById('togglePopularReposBtn');
+
+  if (!panel || !button) {
+    return;
+  }
+
+  const shouldOpen = forceOpen === null ? !panel.classList.contains('show') : forceOpen;
+  panel.classList.toggle('show', shouldOpen);
+  button.classList.toggle('active', shouldOpen);
+  button.setAttribute('aria-expanded', shouldOpen ? 'true' : 'false');
+}
+
+function formatCompactNumber(num) {
+  if (!Number.isFinite(num)) {
+    return '0';
+  }
+
+  if (num >= 1000000) {
+    return `${(num / 1000000).toFixed(1).replace(/\.0$/, '')}M`;
+  }
+
+  if (num >= 1000) {
+    return `${(num / 1000).toFixed(1).replace(/\.0$/, '')}k`;
+  }
+
+  return String(num);
+}
+
+function getPopularRepoFullName(repo) {
+  return `${repo?.owner?.login || 'unknown'}/${repo?.name || 'unknown'}`;
+}
+
+function renderPopularReposSection() {
+  const popularReposState = document.getElementById('popularReposState');
+  const popularReposList = document.getElementById('popularReposList');
+
+  if (!popularReposState || !popularReposList) {
+    return;
+  }
+
+  const watchedRepoNames = new Set(state.watchedRepos.map(repo => repo.fullName.toLowerCase()));
+  const visibleRepos = state.popularRepos
+    .filter(repo => !watchedRepoNames.has(getPopularRepoFullName(repo).toLowerCase()))
+    .slice(0, 3);
+
+  if (visibleRepos.length === 0) {
+    popularReposState.textContent = state.popularRepos.length > 0
+      ? 'All suggested repositories are already on your watchlist.'
+      : 'No popular repositories are available right now.';
+    popularReposState.classList.remove('hidden');
+    popularReposList.classList.add('hidden');
+    popularReposList.innerHTML = '';
+    return;
+  }
+
+  popularReposState.classList.add('hidden');
+  popularReposList.classList.remove('hidden');
+  popularReposList.innerHTML = visibleRepos.map((repo) => {
+    const fullName = getPopularRepoFullName(repo);
+    const stars = Number.isFinite(repo?.stargazers_count) ? formatCompactNumber(repo.stargazers_count) : '';
+
+    return `
+      <div class="popular-repo-card">
+        <div class="popular-repo-info">
+          <div class="popular-repo-name">${escapeHtml(repo?.owner?.login || 'unknown')}/${escapeHtml(repo?.name || 'unknown')}</div>
+          <div class="popular-repo-description">${escapeHtml(repo?.description || `${repo?.language || 'Popular'} project worth watching`)}</div>
+          <div class="popular-repo-meta">
+            ${repo?.language ? `<span class="meta-item">${escapeHtml(repo.language)}</span>` : ''}
+            ${stars ? `<span class="meta-item">${stars} stars</span>` : ''}
+          </div>
+        </div>
+        <button type="button" class="primary popular-repo-add-btn" data-popular-repo="${escapeHtml(fullName)}" aria-label="Add ${escapeHtml(fullName)}">+</button>
+      </div>
+    `;
+  }).join('');
+
+  popularReposList.querySelectorAll('.popular-repo-add-btn').forEach((button) => {
+    button.addEventListener('click', async () => {
+      const repoFullName = button.dataset.popularRepo;
+      if (!repoFullName) {
+        return;
+      }
+
+      button.disabled = true;
+
+      try {
+        const currentSettings = normalizeSettings(await getSettings());
+        if (!currentSettings.allowUnlimitedRepos && state.watchedRepos.length >= STORAGE_CONFIG.MAX_WATCHED_REPOS) {
+          showRepoError(`Maximum of ${STORAGE_CONFIG.MAX_WATCHED_REPOS} repositories allowed. Enable "Unlimited Repositories" in Advanced settings to watch more.`);
+          button.disabled = false;
+          return;
+        }
+
+        const githubToken = await getAccessToken();
+        const resolution = await resolveWatchedRepoInput(repoFullName, {
+          githubToken,
+          existingRepos: state.watchedRepos
+        });
+
+        if (!resolution.valid) {
+          showRepoError(resolution.error || 'Repository validation failed');
+          button.disabled = false;
+          return;
+        }
+
+        state.watchedRepos.push(resolution.record);
+        state.currentPage = Math.ceil(state.watchedRepos.length / state.reposPerPage);
+        renderRepoListWrapper();
+        renderPopularReposSection();
+        await setWatchedRepos(state.watchedRepos);
+        toastManager.success(`Successfully added ${resolution.record.fullName} to watched repositories`);
+      } catch (error) {
+        console.error('Error adding repository from popular list:', error);
+        showRepoError('Failed to add repository. Please try again.');
+        button.disabled = false;
+      }
+    });
+  });
+}
+
+async function loadPopularRepos() {
+  const popularReposState = document.getElementById('popularReposState');
+  const popularReposList = document.getElementById('popularReposList');
+
+  if (!popularReposState || !popularReposList) {
+    return;
+  }
+
+  popularReposState.textContent = 'Loading popular repositories...';
+  popularReposState.classList.remove('hidden');
+  popularReposList.classList.add('hidden');
+
+  try {
+    state.popularRepos = await onboardingManager.getPopularRepos();
+    renderPopularReposSection();
+  } catch (error) {
+    console.error('Error loading popular repositories:', error);
+    state.popularRepos = [];
+    popularReposState.textContent = 'Could not load popular repositories right now.';
+    popularReposState.classList.remove('hidden');
+    popularReposList.classList.add('hidden');
+  }
+}
+
 function syncTokenUiWithStoredCredential(hasStoredToken) {
   applyStoredConnection(hasStoredToken ? { accessToken: 'stored-session' } : null);
 }
@@ -213,6 +374,132 @@ function getColorThemeDisplayName(colorTheme) {
   return themeNames[colorTheme] || colorTheme;
 }
 
+function formatSidebarTimestamp(timestamp) {
+  if (!timestamp) {
+    return '';
+  }
+
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit'
+  }).format(date);
+}
+
+function getSidebarAuthMeta(authSession) {
+  if (!authSession?.accessToken) {
+    return 'Connect GitHub to show the signed-in account and scopes.';
+  }
+
+  const authTypeLabel = authSession.authType === 'oauth_device'
+    ? 'OAuth device flow'
+    : 'GitHub OAuth';
+  const scopes = Array.isArray(authSession.scopes) && authSession.scopes.length > 0
+    ? authSession.scopes.join(', ')
+    : 'scopes unavailable';
+  const grantedAt = formatSidebarTimestamp(authSession.grantedAt);
+
+  return grantedAt
+    ? `${authTypeLabel} · ${scopes} · since ${grantedAt}`
+    : `${authTypeLabel} · ${scopes}`;
+}
+
+function getSidebarRateLimitMeta(rateLimit) {
+  if (!rateLimit || !Number.isFinite(rateLimit.remaining) || !Number.isFinite(rateLimit.limit)) {
+    return 'Updates after the next GitHub request finishes.';
+  }
+
+  if (rateLimit.reset) {
+    const resetTime = formatSidebarTimestamp(rateLimit.reset);
+    if (resetTime) {
+      return `Latest GitHub budget snapshot. Resets ${resetTime}.`;
+    }
+  }
+
+  return 'Latest GitHub budget snapshot from the most recent API response.';
+}
+
+function renderSidebarStatus(authSession, rateLimit) {
+  const accountEl = document.getElementById('sidebarAuthAccount');
+  const authMetaEl = document.getElementById('sidebarAuthMeta');
+  const rateValueEl = document.getElementById('sidebarRateLimitValue');
+  const rateMetaEl = document.getElementById('sidebarRateLimitMeta');
+
+  if (!accountEl || !authMetaEl || !rateValueEl || !rateMetaEl) {
+    return;
+  }
+
+  const isConnected = Boolean(authSession?.accessToken);
+  accountEl.textContent = isConnected
+    ? `@${authSession.username || 'Connected'}`
+    : 'Not connected';
+  authMetaEl.textContent = getSidebarAuthMeta(authSession);
+
+  if (rateLimit && Number.isFinite(rateLimit.remaining) && Number.isFinite(rateLimit.limit)) {
+    rateValueEl.textContent = `${rateLimit.remaining}/${rateLimit.limit} left`;
+  } else {
+    rateValueEl.textContent = 'No data yet';
+  }
+
+  rateMetaEl.textContent = getSidebarRateLimitMeta(rateLimit);
+}
+
+async function refreshSidebarStatus(overrides = {}) {
+  const authSession = overrides.authSession !== undefined
+    ? overrides.authSession
+    : await getAuthSession();
+  const rateLimit = overrides.rateLimit !== undefined
+    ? overrides.rateLimit
+    : await getLocalItem('rateLimit', null);
+
+  renderSidebarStatus(authSession, rateLimit);
+}
+
+function teardownSidebarStatusAutoRefresh() {
+  if (sidebarStatusStorageListener && chrome?.storage?.onChanged) {
+    chrome.storage.onChanged.removeListener(sidebarStatusStorageListener);
+    sidebarStatusStorageListener = null;
+  }
+}
+
+function setupSidebarStatusAutoRefresh() {
+  if (typeof chrome === 'undefined' || !chrome.storage?.onChanged) {
+    return;
+  }
+
+  teardownSidebarStatusAutoRefresh();
+
+  sidebarStatusStorageListener = async (changes, areaName) => {
+    const authChanged = (areaName === 'local' || areaName === 'session') && changes.githubAuthSession;
+    const rateLimitChanged = areaName === 'local' && changes.rateLimit;
+
+    if (!authChanged && !rateLimitChanged) {
+      return;
+    }
+
+    try {
+      await refreshSidebarStatus({
+        authSession: authChanged ? changes.githubAuthSession.newValue ?? null : undefined,
+        rateLimit: rateLimitChanged ? changes.rateLimit.newValue ?? null : undefined
+      });
+    } catch (error) {
+      console.error('Failed to refresh sidebar status:', error);
+    }
+  };
+
+  chrome.storage.onChanged.addListener(sidebarStatusStorageListener);
+
+  if (typeof window !== 'undefined') {
+    window.addEventListener('beforeunload', teardownSidebarStatusAutoRefresh, { once: true });
+  }
+}
+
 function getOptionCategorySettingsFromDom() {
   const filters = {};
   const notifications = {};
@@ -268,7 +555,7 @@ function applySettingsToUi(settings) {
 
   const itemExpiryEnabled = settings.itemExpiryHours !== null && settings.itemExpiryHours !== undefined;
   document.getElementById('itemExpiryEnabled').checked = itemExpiryEnabled;
-  document.getElementById('itemExpiryInputRow').style.display = itemExpiryEnabled ? 'block' : 'none';
+  document.getElementById('itemExpiryInputRow').classList.toggle('d-none', !itemExpiryEnabled);
   if (itemExpiryEnabled) {
     document.getElementById('itemExpiryHours').value = settings.itemExpiryHours;
   }
@@ -284,10 +571,16 @@ function setupEventListeners() {
 
   document.getElementById('addRepoBtn').addEventListener('click', addRepo);
   document.getElementById('connectGitHubBtn').addEventListener('click', async () => {
-    await connectGitHub(toastManager);
+    const result = await connectGitHub(toastManager);
+    await refreshSidebarStatus({
+      authSession: result?.authSession ?? undefined
+    });
   });
   document.getElementById('clearTokenBtn').addEventListener('click', async () => {
-    await clearToken();
+    const cleared = await clearToken();
+    if (cleared) {
+      await refreshSidebarStatus({ authSession: null });
+    }
   });
 
   // Action button toggles
@@ -302,6 +595,13 @@ function setupEventListeners() {
   document.getElementById('importStarredBtn').addEventListener('click', () => openImportModal('starred', state.watchedRepos));
   document.getElementById('importParticipatingBtn').addEventListener('click', () => openImportModal('participating', state.watchedRepos));
   document.getElementById('importMineBtn').addEventListener('click', () => openImportModal('mine', state.watchedRepos));
+  document.getElementById('togglePopularReposBtn').addEventListener('click', async () => {
+    togglePopularReposPanel();
+
+    if (state.popularRepos.length === 0) {
+      await loadPopularRepos();
+    }
+  });
 
   // Import/Export settings buttons
   document.getElementById('importBtn').addEventListener('click', () => {
@@ -326,7 +626,7 @@ function setupEventListeners() {
     renderRepoListWrapper();
 
     // Show/hide clear button
-    repoSearchClear.style.display = e.target.value ? 'flex' : 'none';
+    repoSearchClear.classList.toggle('hidden', !e.target.value);
   });
 
   repoSearchClear.addEventListener('click', () => {
@@ -334,7 +634,7 @@ function setupEventListeners() {
     state.searchQuery = '';
     state.currentPage = 1;
     renderRepoListWrapper();
-    repoSearchClear.style.display = 'none';
+    repoSearchClear.classList.add('hidden');
     repoSearchInput.focus();
   });
 
@@ -420,13 +720,13 @@ function setupEventListeners() {
   itemExpiryEnabledCheckbox.addEventListener('change', async (e) => {
     const isEnabled = e.target.checked;
     if (isEnabled) {
-      itemExpiryInputRow.style.display = 'block';
+      itemExpiryInputRow.classList.remove('d-none');
       const hours = parseInt(itemExpiryHoursInput.value) || 24;
       itemExpiryHoursInput.value = hours;
       await updateSettings({ itemExpiryHours: hours });
       toastManager.info(`Auto-removal enabled: items older than ${hours} hours will be removed`);
     } else {
-      itemExpiryInputRow.style.display = 'none';
+      itemExpiryInputRow.classList.add('d-none');
       await updateSettings({ itemExpiryHours: null });
       toastManager.info('Auto-removal disabled');
     }
@@ -526,13 +826,13 @@ function setupEventListeners() {
   importSearchInput.addEventListener('input', (e) => {
     filterImportRepos();
     // Show/hide clear button
-    importSearchClear.style.display = e.target.value ? 'flex' : 'none';
+    importSearchClear.classList.toggle('hidden', !e.target.value);
   });
 
   importSearchClear.addEventListener('click', () => {
     importSearchInput.value = '';
     filterImportRepos();
-    importSearchClear.style.display = 'none';
+    importSearchClear.classList.add('hidden');
     importSearchInput.focus();
   });
 
@@ -617,7 +917,9 @@ async function loadSettings() {
     state.pinnedRepos = settings.pinnedRepos;
 
     renderRepoListWrapper();
+    await loadPopularRepos();
     applySettingsToUi(settings);
+    await refreshSidebarStatus({ authSession });
 
     // Load and display current snoozes
     renderSnoozedRepos(settings.snoozedRepos || []);
@@ -628,6 +930,8 @@ async function loadSettings() {
     state.mutedRepos = state.mutedRepos || [];
     state.pinnedRepos = state.pinnedRepos || [];
     renderRepoListWrapper();
+    renderPopularReposSection();
+    await refreshSidebarStatus().catch(() => {});
   }
 }
 
@@ -820,6 +1124,7 @@ function renderRepoListWrapper() {
     (repo, pin) => togglePinRepo(repo, pin, state, renderRepoListWrapper),
     (repo) => removeRepo(repo)
   );
+  renderPopularReposSection();
 }
 
 // Global wrapper for external calls
@@ -946,59 +1251,420 @@ async function resetSettings() {
  * Load and display version information and changelog
  */
 async function loadVersionAndChangelog() {
+  const versionInfo = document.getElementById('versionInfo');
+  const changelogContent = document.getElementById('changelogContent');
+
   try {
     // Load version from manifest.json
     const manifestUrl = chrome.runtime.getURL('manifest.json');
     const manifestResponse = await fetch(manifestUrl);
     const manifest = await manifestResponse.json();
 
-    const versionInfo = document.getElementById('versionInfo');
+    const release = await fetchLatestRelease();
+
     if (versionInfo) {
-      versionInfo.innerHTML = `
-        <div class="version-badge">
-          <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
-          </svg>
-          <span>Current Version: <strong>v${manifest.version}</strong></span>
-        </div>
-      `;
+      versionInfo.innerHTML = buildVersionBriefHtml(manifest.version, release);
+    }
+
+    if (changelogContent) {
+      changelogContent.innerHTML = buildLatestReleaseHtml(release);
+      bindReleaseSectionChips(changelogContent);
+    }
+  } catch (error) {
+    console.error('Error loading version/changelog:', error);
+
+    if (versionInfo) {
+      versionInfo.innerHTML = buildFallbackVersionInfoHtml();
+    }
+    if (changelogContent) {
+      changelogContent.innerHTML = await buildFallbackChangelogHtml();
     }
+  }
+}
+
+async function fetchLatestRelease() {
+  const response = await fetch(LATEST_RELEASE_API_URL, {
+    headers: {
+      Accept: 'application/vnd.github+json'
+    }
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch latest release: ${response.status}`);
+  }
 
-    // Load changelog from CHANGELOG.md
+  return response.json();
+}
+
+function buildVersionBriefHtml(installedVersion, release) {
+  const sections = parseReleaseSections(release.body, release.tag_name);
+  const displayTitle = extractReleaseTitle(release.name, release.tag_name);
+  const publishedAt = formatAbsoluteDate(release.published_at || release.created_at);
+  const highlightCards = sections
+    .filter(section => section.items.length > 0 || section.paragraphs.length > 0)
+    .slice(0, 3)
+    .map(section => `
+      <div class="release-highlight-card">
+        <div class="release-highlight-title">${escapeHtml(section.title)}</div>
+        <p class="release-highlight-copy">${renderReleaseInlineMarkdown(summarizeReleaseSection(section))}</p>
+      </div>
+    `)
+    .join('');
+
+  const releasePills = [
+    buildVersionPill('Installed', `v${installedVersion}`),
+    buildReleasePill('Published', publishedAt)
+  ];
+
+  if (release.tag_name && release.tag_name !== `v${installedVersion}`) {
+    releasePills.push(buildReleasePill('Latest', release.tag_name));
+  }
+
+  return `
+    <div class="version-brief">
+      <div class="version-brief-top">
+        <div>
+          <div class="version-label">Latest release</div>
+          <h4 class="version-headline">${escapeHtml(release.tag_name || `v${installedVersion}`)}${displayTitle ? ` - ${escapeHtml(displayTitle)}` : ''}</h4>
+        </div>
+        <div class="release-pills">
+          ${releasePills.join('')}
+        </div>
+      </div>
+      <p class="version-summary">${escapeHtml(buildReleaseSummary(displayTitle, sections))}</p>
+      ${highlightCards ? `<div class="release-highlight-grid">${highlightCards}</div>` : ''}
+    </div>
+  `;
+}
+
+function buildFallbackVersionInfoHtml() {
+  return '<p class="error-text">Unable to load latest release information</p>';
+}
+
+async function buildFallbackChangelogHtml() {
+  try {
     const changelogUrl = chrome.runtime.getURL('CHANGELOG.md');
     const changelogResponse = await fetch(changelogUrl);
     const changelogText = await changelogResponse.text();
-
-    // Parse markdown to HTML (basic conversion)
     const changelogHtml = parseChangelogMarkdown(changelogText);
 
-    const changelogContent = document.getElementById('changelogContent');
-    if (changelogContent) {
-      changelogContent.innerHTML = changelogHtml + `
-        <div class="changelog-footer">
-          <a href="https://github.com/jonmartin721/devwatch-github/blob/main/CHANGELOG.md"
-             target="_blank"
-             rel="noopener noreferrer"
-             class="changelog-link">
-            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
-              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
-            </svg>
-            View full changelog on GitHub
-          </a>
-        </div>
+    return changelogHtml + `
+      <div class="changelog-footer">
+        <a href="https://github.com/jonmartin721/devwatch-github/blob/main/CHANGELOG.md"
+           target="_blank"
+           rel="noopener noreferrer"
+           class="changelog-link">
+          <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+          </svg>
+          View full changelog on GitHub
+        </a>
+      </div>
+    `;
+  } catch (fallbackError) {
+    console.error('Fallback changelog load failed:', fallbackError);
+    return `
+      <div class="release-empty-state">
+        Unable to load the latest release right now. Please try again later.
+      </div>
+      <div class="changelog-footer">
+        <a href="${CHANGELOG_GITHUB_URL}"
+           target="_blank"
+           rel="noopener noreferrer"
+           class="changelog-link">
+          <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+          </svg>
+          View releases on GitHub
+        </a>
+      </div>
+    `;
+  }
+}
+
+function buildLatestReleaseHtml(release) {
+  const sections = parseReleaseSections(release.body, release.tag_name);
+  const chips = sections
+    .map((section, index) => `
+      <button type="button"
+              class="release-chip${index === 0 ? ' active' : ''}"
+              data-target="release-section-${index}"
+              aria-pressed="${index === 0 ? 'true' : 'false'}">
+        ${escapeHtml(section.title)}
+      </button>
+    `)
+    .join('');
+
+  const sectionCards = sections
+    .map((section, index) => {
+      const sectionBody = [
+        ...section.paragraphs.map(paragraph => `<p>${renderReleaseInlineMarkdown(paragraph)}</p>`),
+        section.items.length > 0
+          ? `<ul>${section.items.map(item => `<li>${renderReleaseInlineMarkdown(item)}</li>`).join('')}</ul>`
+          : ''
+      ].join('');
+
+      const countLabel = section.items.length > 0
+        ? `${section.items.length} ${section.items.length === 1 ? 'item' : 'items'}`
+        : `${section.paragraphs.length} ${section.paragraphs.length === 1 ? 'note' : 'notes'}`;
+
+      return `
+        <section id="release-section-${index}" class="release-section">
+          <div class="release-section-head">
+            <h4 class="release-section-title">${escapeHtml(section.title)}</h4>
+            <span class="release-section-count">${escapeHtml(countLabel)}</span>
+          </div>
+          <div class="release-section-body">${sectionBody}</div>
+        </section>
       `;
+    })
+    .join('');
+
+  return `
+    ${chips ? `<div class="release-chip-row">${chips}</div>` : ''}
+    <div class="release-notes-list">
+      ${sectionCards || '<div class="release-empty-state">No release notes were included with this version.</div>'}
+    </div>
+    <div class="changelog-footer">
+      <a href="${escapeHtml(release.html_url || CHANGELOG_GITHUB_URL)}"
+         target="_blank"
+         rel="noopener noreferrer"
+         class="changelog-link">
+        <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
+          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+        </svg>
+        View this release on GitHub
+      </a>
+    </div>
+  `;
+}
+
+function parseReleaseSections(markdown, releaseTag = '') {
+  const normalizedMarkdown = (markdown || '').replace(/\r\n/g, '\n');
+  const lines = normalizedMarkdown.split('\n');
+  const sections = [];
+  let currentSection = null;
+
+  function ensureSection(title = 'Release notes') {
+    if (!currentSection) {
+      currentSection = { title, paragraphs: [], items: [] };
+      sections.push(currentSection);
     }
-  } catch (error) {
-    console.error('Error loading version/changelog:', error);
-    const versionInfo = document.getElementById('versionInfo');
-    const changelogContent = document.getElementById('changelogContent');
-    if (versionInfo) {
-      versionInfo.innerHTML = '<p class="error-text">Unable to load version information</p>';
+    return currentSection;
+  }
+
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+    if (!line) {
+      continue;
     }
-    if (changelogContent) {
-      changelogContent.innerHTML = '<p class="error-text">Unable to load changelog</p>';
+
+    const levelThreeHeading = line.match(/^###\s+(.+)$/);
+    if (levelThreeHeading) {
+      currentSection = {
+        title: cleanReleaseHeading(levelThreeHeading[1]),
+        paragraphs: [],
+        items: []
+      };
+      sections.push(currentSection);
+      continue;
+    }
+
+    const levelTwoHeading = line.match(/^##\s+(.+)$/);
+    if (levelTwoHeading) {
+      const title = cleanReleaseHeading(levelTwoHeading[1]);
+      if (shouldSkipReleaseHeading(title, releaseTag)) {
+        continue;
+      }
+
+      currentSection = {
+        title,
+        paragraphs: [],
+        items: []
+      };
+      sections.push(currentSection);
+      continue;
+    }
+
+    if (/^[-*]\s+/.test(line)) {
+      ensureSection().items.push(line.replace(/^[-*]\s+/, '').trim());
+      continue;
+    }
+
+    if (/^\d+\.\s+/.test(line)) {
+      ensureSection().items.push(line.replace(/^\d+\.\s+/, '').trim());
+      continue;
     }
+
+    ensureSection().paragraphs.push(line);
+  }
+
+  const nonEmptySections = sections.filter(section => section.items.length > 0 || section.paragraphs.length > 0);
+  if (nonEmptySections.length === 0 && normalizedMarkdown.trim()) {
+    return [{
+      title: 'Release notes',
+      paragraphs: [normalizedMarkdown.trim()],
+      items: []
+    }];
+  }
+
+  return nonEmptySections;
+}
+
+function cleanReleaseHeading(heading) {
+  return heading
+    .replace(/\s+[\u{1F300}-\u{1FAFF}\u{2600}-\u{27BF}]+/gu, '')
+    .trim();
+}
+
+function shouldSkipReleaseHeading(heading, releaseTag) {
+  const normalizedHeading = heading.toLowerCase();
+  const normalizedTag = releaseTag.toLowerCase();
+
+  return Boolean(
+    normalizedHeading === 'changelog' ||
+    (normalizedTag && normalizedHeading.startsWith(normalizedTag)) ||
+    /^v?\d+\.\d+\.\d+\b/i.test(heading)
+  );
+}
+
+function extractReleaseTitle(name, tagName) {
+  const trimmedName = (name || '').trim();
+  if (!trimmedName) {
+    return '';
+  }
+
+  if (!tagName) {
+    return trimmedName;
+  }
+
+  const tagPattern = new RegExp(`^${escapeRegExp(tagName)}\\s*[–—:-]\\s*`, 'i');
+  return trimmedName.replace(tagPattern, '').trim();
+}
+
+function buildReleaseSummary(displayTitle, sections) {
+  const sectionNames = sections.slice(0, 3).map(section => section.title);
+  if (!displayTitle && sectionNames.length === 0) {
+    return 'Read the latest release notes from GitHub.';
+  }
+
+  if (displayTitle && sectionNames.length === 0) {
+    return `This release focuses on ${displayTitle}.`;
+  }
+
+  if (!displayTitle) {
+    return `This release includes updates across ${joinNaturalList(sectionNames)}.`;
+  }
+
+  return `This release focuses on ${displayTitle} and includes updates across ${joinNaturalList(sectionNames)}.`;
+}
+
+function summarizeReleaseSection(section) {
+  return section.items[0] || section.paragraphs[0] || 'Release notes updated.';
+}
+
+function buildVersionPill(label, value) {
+  return `
+    <div class="version-badge">
+      <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+      </svg>
+      <span>${escapeHtml(label)} ${escapeHtml(value)}</span>
+    </div>
+  `;
+}
+
+function buildReleasePill(label, value) {
+  return `
+    <div class="release-pill">
+      <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+      </svg>
+      <span>${escapeHtml(label)} ${escapeHtml(value)}</span>
+    </div>
+  `;
+}
+
+function renderReleaseInlineMarkdown(text) {
+  let html = escapeHtml(text || '');
+
+  html = html.replace(
+    /\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g,
+    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+  );
+  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  return html;
+}
+
+function bindReleaseSectionChips(container) {
+  const chips = Array.from(container.querySelectorAll('.release-chip'));
+  if (chips.length === 0) {
+    return;
+  }
+
+  chips.forEach(chip => {
+    chip.addEventListener('click', () => {
+      const targetId = chip.dataset.target;
+      if (!targetId) {
+        return;
+      }
+
+      const selector = typeof window !== 'undefined' && window.CSS && typeof window.CSS.escape === 'function'
+        ? `#${window.CSS.escape(targetId)}`
+        : `#${targetId}`;
+      const target = container.querySelector(selector);
+      if (target) {
+        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+
+      chips.forEach(button => {
+        button.classList.remove('active');
+        button.setAttribute('aria-pressed', 'false');
+      });
+
+      chip.classList.add('active');
+      chip.setAttribute('aria-pressed', 'true');
+    });
+  });
+}
+
+function formatAbsoluteDate(dateString) {
+  if (!dateString) {
+    return 'Unknown date';
+  }
+
+  const date = new Date(dateString);
+  if (Number.isNaN(date.getTime())) {
+    return 'Unknown date';
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  }).format(date);
+}
+
+function joinNaturalList(items) {
+  if (items.length === 0) {
+    return '';
   }
+
+  if (items.length === 1) {
+    return items[0];
+  }
+
+  if (items.length === 2) {
+    return `${items[0]} and ${items[1]}`;
+  }
+
+  return `${items.slice(0, -1).join(', ')}, and ${items[items.length - 1]}`;
+}
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
 /**
diff --git a/options/views/repository-list-view.js b/options/views/repository-list-view.js
index 8f42f4e..59feab2 100644
--- a/options/views/repository-list-view.js
+++ b/options/views/repository-list-view.js
@@ -20,7 +20,7 @@ export function renderRepoList(state, onToggleMute, onTogglePin, onRemove) {
 
   if (state.watchedRepos.length === 0) {
     const hidePinnedToggleBtn = document.getElementById('hidePinnedToggleBtn2');
-    if (hidePinnedToggleBtn) hidePinnedToggleBtn.style.display = 'none';
+    if (hidePinnedToggleBtn) hidePinnedToggleBtn.hidden = true;
     updateRepoCountBadge(0);
 
     list.innerHTML = `
@@ -42,19 +42,19 @@ export function renderRepoList(state, onToggleMute, onTogglePin, onRemove) {
         </div>
       </div>
     `;
-    paginationControls.style.display = 'none';
+    paginationControls.classList.add('hidden');
     return;
   }
 
   const hidePinnedToggleBtn = document.getElementById('hidePinnedToggleBtn2');
-  if (hidePinnedToggleBtn) hidePinnedToggleBtn.style.display = 'flex';
+  if (hidePinnedToggleBtn) hidePinnedToggleBtn.hidden = false;
   updateRepoCountBadge(state.watchedRepos.length);
 
   const filteredRepos = getFilteredRepos(state);
 
   if (filteredRepos.length === 0) {
     list.innerHTML = '<p class="help-text">No repositories match your search</p>';
-    paginationControls.style.display = 'none';
+    paginationControls.classList.add('hidden');
     return;
   }
 
@@ -75,12 +75,12 @@ export function renderRepoList(state, onToggleMute, onTogglePin, onRemove) {
   const reposToDisplay = sortedRepos.slice(startIndex, endIndex);
 
   if (filteredRepos.length > state.reposPerPage) {
-    paginationControls.style.display = 'flex';
+    paginationControls.classList.remove('hidden');
     document.getElementById('prevPage').disabled = state.currentPage === 1;
     document.getElementById('nextPage').disabled = state.currentPage === totalPages;
     document.getElementById('pageInfo').textContent = `Page ${state.currentPage} of ${totalPages}`;
   } else {
-    paginationControls.style.display = 'none';
+    paginationControls.classList.add('hidden');
   }
 
   list.innerHTML = reposToDisplay.map(repo => {
diff --git a/popup/controllers/activity-controller.js b/popup/controllers/activity-controller.js
index 825290b..a68eac0 100644
--- a/popup/controllers/activity-controller.js
+++ b/popup/controllers/activity-controller.js
@@ -11,6 +11,8 @@ import {
 import { setState } from '../../shared/state-manager.js';
 import { filterVisibleActivities } from '../../shared/feed-policy.js';
 
+const MIN_REFRESH_SPIN_MS = 500;
+
 /**
  * Loads activities from storage or cache, handles offline mode
  * @param {Function} renderActivitiesCallback - Callback to render activities after loading
@@ -122,7 +124,11 @@ export async function loadActivities(
  */
 export async function handleRefresh(loadActivitiesCallback) {
   const btn = document.getElementById('refreshBtn');
+  const refreshStartedAt = Date.now();
+  let refreshSucceeded = false;
+
   btn.disabled = true;
+  btn.classList.remove('refresh-complete');
   btn.classList.add('spinning');
 
   try {
@@ -130,17 +136,24 @@ export async function handleRefresh(loadActivitiesCallback) {
     await chrome.runtime.sendMessage({ action: 'checkNow' });
     // Pass skipLoadingIndicator to avoid clearing the existing feed
     await loadActivitiesCallback({ skipLoadingIndicator: true });
+    refreshSucceeded = true;
   } catch (error) {
     showError('errorMessage', error, null, { action: 'refresh activities' }, 5000);
   } finally {
+    const elapsed = Date.now() - refreshStartedAt;
+    if (elapsed < MIN_REFRESH_SPIN_MS) {
+      await new Promise(resolve => setTimeout(resolve, MIN_REFRESH_SPIN_MS - elapsed));
+    }
+
     btn.disabled = false;
     btn.classList.remove('spinning');
 
-    // Add completion animation
-    btn.classList.add('refresh-complete');
-    setTimeout(() => {
-      btn.classList.remove('refresh-complete');
-    }, 400);
+    if (refreshSucceeded) {
+      btn.classList.add('refresh-complete');
+      setTimeout(() => {
+        btn.classList.remove('refresh-complete');
+      }, 400);
+    }
   }
 }
 
@@ -170,7 +183,8 @@ export function updateRateLimit(rateLimit) {
   // Only show rate limit when remaining <= 1000
   if (!rateLimit || rateLimit.remaining > 1000) {
     rateLimitInfo.textContent = '';
-    rateLimitInfo.style.display = 'none';
+    rateLimitInfo.classList.add('hidden');
+    rateLimitInfo.classList.remove('warning');
     return;
   }
 
@@ -181,8 +195,8 @@ export function updateRateLimit(rateLimit) {
     </svg>
     ${rateLimit.remaining}/${rateLimit.limit} API calls remaining
   `;
-  rateLimitInfo.style.color = '#f0ad4e'; // Yellow/orange warning color
-  rateLimitInfo.style.display = 'block';
+  rateLimitInfo.classList.add('warning');
+  rateLimitInfo.classList.remove('hidden');
 
   // Show when rate limit resets
   if (rateLimit.reset) {
diff --git a/popup/controllers/keyboard-controller.js b/popup/controllers/keyboard-controller.js
index ebbe46b..092af70 100644
--- a/popup/controllers/keyboard-controller.js
+++ b/popup/controllers/keyboard-controller.js
@@ -41,7 +41,7 @@ export function setupKeyboardNavigation(
         }
         break;
       case 'Escape':
-        if (searchBox && searchBox.style.display !== 'none') {
+        if (searchBox && !searchBox.classList.contains('hidden')) {
           toggleSearchCallback();
         }
         break;
diff --git a/popup/controllers/theme-controller.js b/popup/controllers/theme-controller.js
index 2a7a654..dcac761 100644
--- a/popup/controllers/theme-controller.js
+++ b/popup/controllers/theme-controller.js
@@ -1,11 +1,11 @@
-import { getSyncItem } from '../../shared/storage-helpers.js';
+import { getSyncItem, setSyncItem } from '../../shared/storage-helpers.js';
 import { applyTheme } from '../../shared/utils.js';
 
 export async function toggleDarkMode() {
-  const currentTheme = await getSyncItem('theme', 'light');
+  const currentTheme = await getSyncItem('theme', 'system');
   const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
 
-  chrome.storage.sync.set({ theme: newTheme });
+  await setSyncItem('theme', newTheme);
   applyTheme(newTheme);
   updateDarkModeIcon();
 }
@@ -18,38 +18,17 @@ export async function updateDarkModeIcon() {
   const moonIcon = btn.querySelector('.moon-icon');
   const sunIcon = btn.querySelector('.sun-icon');
 
-  const currentTheme = await getSyncItem('theme', 'light');
+  const currentTheme = await getSyncItem('theme', 'system');
 
-  // Always hide system icon
   if (systemIcon) {
-    systemIcon.classList.add('hidden');
-    systemIcon.style.display = 'none';
-    systemIcon.style.visibility = 'hidden';
+    systemIcon.classList.toggle('hidden', currentTheme !== 'system');
   }
 
-  // Show moon icon for light theme, hide for dark theme
   if (moonIcon) {
-    if (currentTheme === 'dark') {
-      moonIcon.classList.add('hidden');
-      moonIcon.style.display = 'none';
-      moonIcon.style.visibility = 'hidden';
-    } else {
-      moonIcon.classList.remove('hidden');
-      moonIcon.style.display = 'block';
-      moonIcon.style.visibility = 'visible';
-    }
+    moonIcon.classList.toggle('hidden', currentTheme !== 'light');
   }
 
-  // Show sun icon for dark theme, hide for light theme
   if (sunIcon) {
-    if (currentTheme === 'dark') {
-      sunIcon.classList.remove('hidden');
-      sunIcon.style.display = 'block';
-      sunIcon.style.visibility = 'visible';
-    } else {
-      sunIcon.classList.add('hidden');
-      sunIcon.style.display = 'none';
-      sunIcon.style.visibility = 'hidden';
-    }
+    sunIcon.classList.toggle('hidden', currentTheme !== 'dark');
   }
 }
diff --git a/popup/popup.css b/popup/popup.css
index f91b146..28dd904 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -7,10 +7,14 @@
   padding: 0;
   box-sizing: border-box;
 }
-
+html,
 body {
   width: 450px;
-  max-height: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+
+body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   font-size: 14px;
   line-height: 1.5;
@@ -39,41 +43,54 @@ body {
   padding: 20px;
 }
 
+.clipboard-temp-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
 /* ---- Layout ---- */
 .container {
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
+  overflow: hidden;
   background: transparent;
 }
 
 /* ---- Header ---- */
 header {
-  display: none;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 16px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 7px;
+  padding: 14px 16px 10px;
   border-bottom: 1px solid var(--border);
   background: transparent;
 }
 
-.header-info {
+.header-main {
   display: flex;
+  justify-content: space-between;
   align-items: center;
   gap: 12px;
 }
 
-.header-stats {
+.header-meta {
   display: flex;
-  flex-direction: row;
-  gap: 0;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-height: 16px;
 }
 
-.header-stats .repo-count::before {
-  content: "\B7";
-  margin: 0 6px;
-  color: var(--muted-foreground);
+.header-meta-separator {
+  width: 4px;
+  height: 4px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--muted-foreground) 72%, transparent);
+  flex-shrink: 0;
 }
 
 .header-refresh-btn {
@@ -103,23 +120,30 @@ header {
 }
 
 .last-updated {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--muted-foreground);
-  font-weight: 400;
+  font-weight: 500;
+  line-height: 1.1;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
 }
 
 .repo-count {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--muted-foreground);
+  font-weight: 600;
+  line-height: 1.1;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
 }
 
 h1 {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
-  letter-spacing: -0.04em;
+  letter-spacing: -0.045em;
   line-height: 1;
   color: var(--foreground);
-  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -169,7 +193,7 @@ h1 {
 
 /* ---- Toolbar ---- */
 .toolbar {
-  display: none;
+  display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 16px 14px;
@@ -273,7 +297,7 @@ h1 {
   font-weight: 600;
   color: var(--foreground);
   white-space: nowrap;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -302,9 +326,10 @@ h1 {
 /* ---- Activity List ---- */
 .activity-list {
   flex: 1;
+  display: block;
   overflow-y: auto;
+  scrollbar-gutter: stable;
   min-height: 200px;
-  display: none;
 }
 
 /* shadcn ScrollArea style scrollbar */
@@ -475,7 +500,7 @@ h1 {
 .repo-group-name {
   font-weight: 600;
   color: var(--foreground);
-  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   font-size: 12px;
   letter-spacing: -0.03em;
   text-transform: lowercase;
@@ -498,7 +523,7 @@ h1 {
   color: var(--primary-foreground);
   border-radius: 9999px;
   font-weight: 700;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
 }
 
 .repo-snooze-btn,
@@ -588,7 +613,7 @@ h1 {
   padding: 5px 10px;
   border-radius: 999px;
   transition: all 150ms;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -713,7 +738,7 @@ h1 {
 .activity-header {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   margin-bottom: 4px;
   min-width: 0;
 }
@@ -722,41 +747,55 @@ h1 {
 .activity-type {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 3px 8px;
+  padding: 2px 7px;
   border-radius: 999px;
   font-size: 10px;
   font-weight: 700;
-  letter-spacing: 0.03em;
-  line-height: 1.4;
+  letter-spacing: 0.06em;
+  line-height: 1;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
   color: var(--foreground);
   text-transform: uppercase;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
-.activity-type::before {
-  content: "";
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
+.activity-type.pr {
+  border-color: rgba(34, 197, 94, 0.28);
+  background: rgba(34, 197, 94, 0.1);
 }
 
-.activity-type.pr::before { background: #22C55E; }
-.activity-type.issue::before { background: #F59E0B; }
-.activity-type.release::before { background: #3B82F6; }
+.activity-type.issue {
+  border-color: rgba(245, 158, 11, 0.28);
+  background: rgba(245, 158, 11, 0.1);
+}
 
-body.dark-mode .activity-type.pr::before { background: #4ADE80; }
-body.dark-mode .activity-type.issue::before { background: #FBBF24; }
-body.dark-mode .activity-type.release::before { background: #60A5FA; }
+.activity-type.release {
+  border-color: rgba(59, 130, 246, 0.28);
+  background: rgba(59, 130, 246, 0.1);
+}
+
+body.dark-mode .activity-type.pr {
+  border-color: rgba(74, 222, 128, 0.26);
+  background: rgba(74, 222, 128, 0.1);
+}
+
+body.dark-mode .activity-type.issue {
+  border-color: rgba(251, 191, 36, 0.26);
+  background: rgba(251, 191, 36, 0.1);
+}
+
+body.dark-mode .activity-type.release {
+  border-color: rgba(96, 165, 250, 0.26);
+  background: rgba(96, 165, 250, 0.1);
+}
 
 .activity-repo {
   font-size: 11px;
   color: var(--muted-foreground);
   font-weight: 600;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -788,8 +827,7 @@ body.dark-mode .activity-type.release::before { background: #60A5FA; }
 
 /* ---- Footer ---- */
 footer {
-  position: sticky;
-  bottom: 0;
+  flex-shrink: 0;
   padding: 12px 16px 16px;
   border-top: 1px solid var(--border);
   background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--background) 22%);
@@ -847,7 +885,7 @@ footer {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--input);
   border-radius: 999px;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -868,12 +906,18 @@ footer a:hover {
 }
 
 .rate-limit-info {
+  display: inline-flex;
+  align-items: center;
   font-size: 11px;
   color: var(--muted-foreground);
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   letter-spacing: 0.02em;
 }
 
+.rate-limit-info.warning {
+  color: #f0ad4e;
+}
+
 /* ---- Error & Toast Messages ---- */
 .error-message {
   padding: 8px 12px;
@@ -906,7 +950,8 @@ footer a:hover {
 }
 
 .error-toast {
-  background: var(--background);
+  background: var(--card);
+  color: var(--foreground);
   border: 1px solid var(--destructive);
   border-radius: var(--radius);
   overflow: hidden;
@@ -920,6 +965,7 @@ footer a:hover {
   cursor: pointer;
   transition: background 150ms;
   user-select: none;
+  color: var(--foreground);
 }
 
 .error-summary:hover {
@@ -929,6 +975,7 @@ footer a:hover {
 .error-icon {
   font-size: 16px;
   flex-shrink: 0;
+  color: var(--destructive);
 }
 
 .error-brief {
@@ -974,7 +1021,7 @@ footer a:hover {
   display: block;
   font-size: 12px;
   color: var(--muted-foreground);
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   margin-top: 8px;
   padding: 6px 8px;
   background: var(--accent);
@@ -1147,15 +1194,6 @@ body.dark-mode .cached-indicator {
   opacity: 0.9;
 }
 
-.activity-item.cached::before {
-  content: '';
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  font-size: 12px;
-  opacity: 0.7;
-}
-
 /* ---- shadcn Focus Ring ---- */
 .filter-btn:focus-visible,
 .toolbar-btn:focus-visible,
@@ -1205,8 +1243,9 @@ body.dark-mode .search-box input:focus-visible {
    ================================================ */
 .onboarding-view {
   flex: 1;
-  padding: 18px 18px 14px;
+  padding: 14px 18px 10px;
   overflow: hidden;
+  scrollbar-gutter: stable;
   min-height: 0;
   background: transparent;
   display: flex;
@@ -1232,7 +1271,7 @@ body.dark-mode .search-box input:focus-visible {
 
 /* Progress — thin line */
 .onboarding-progress {
-  margin-bottom: 18px;
+  margin-bottom: 14px;
   text-align: center;
   flex-shrink: 0;
 }
@@ -1247,18 +1286,31 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .progress-fill {
+  width: 0;
   height: 100%;
   background: var(--primary);
   border-radius: 9999px;
   transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.progress-fill[data-progress="33"] {
+  width: 33%;
+}
+
+.progress-fill[data-progress="67"] {
+  width: 67%;
+}
+
+.progress-fill[data-progress="100"] {
+  width: 100%;
+}
+
 .progress-text {
   font-size: 11px;
   color: var(--muted-foreground);
   font-weight: 600;
   letter-spacing: 0.08em;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -1266,17 +1318,26 @@ body.dark-mode .search-box input:focus-visible {
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
+  padding-right: 4px;
 }
 
 .onboarding-step {
+  display: flex;
+  flex-direction: column;
   text-align: center;
+  min-height: 0;
+  padding-bottom: 8px;
 }
 
 /* Step icon — hero treatment */
 .step-icon {
-  margin-bottom: 24px;
+  margin-bottom: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1299,18 +1360,18 @@ body.dark-mode .search-box input:focus-visible {
 
 /* Headings — large, tight, confident */
 .onboarding-step h2 {
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 700;
   color: var(--foreground);
-  margin-bottom: 8px;
+  margin-bottom: 6px;
   letter-spacing: -0.04em;
   line-height: 1.05;
 }
 
 .onboarding-step p {
   color: var(--muted-foreground);
-  line-height: 1.5;
-  margin-bottom: 14px;
+  line-height: 1.45;
+  margin-bottom: 12px;
   max-width: 340px;
   margin-left: auto;
   margin-right: auto;
@@ -1321,26 +1382,26 @@ body.dark-mode .search-box input:focus-visible {
 .feature-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  margin: 24px 0;
+  gap: 8px;
+  margin: 16px 0 12px;
   text-align: left;
 }
 
 .feature-item {
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 16px;
+  gap: 14px;
+  padding: 12px 14px;
   background: rgba(255, 255, 255, 0.04);
-  border-radius: 18px;
+  border-radius: 16px;
   border: 1px solid var(--border);
-  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
 }
 
 .feature-item:hover {
-  background: var(--accent);
-  transform: translateY(-2px);
-  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--border-hover);
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
 }
 
 .feature-icon {
@@ -1348,8 +1409,8 @@ body.dark-mode .search-box input:focus-visible {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
@@ -1357,22 +1418,22 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .feature-icon svg {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 
 .feature-item span:last-child {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   color: var(--foreground);
-  line-height: 1.4;
+  line-height: 1.35;
 }
 
 .step-description {
   font-size: 13px;
   color: var(--muted-foreground);
   font-weight: 400;
-  margin-top: 4px;
+  margin-top: 2px;
 }
 
 /* Token Step */
@@ -1380,8 +1441,8 @@ body.dark-mode .search-box input:focus-visible {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
   border-radius: 18px;
-  padding: 16px;
-  margin: 14px 0;
+  padding: 14px;
+  margin: 10px 0;
   text-align: left;
 }
 
@@ -1390,7 +1451,7 @@ body.dark-mode .search-box input:focus-visible {
   color: var(--foreground);
   font-size: 12px;
   font-weight: 600;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
   letter-spacing: 0.06em;
 }
@@ -1398,8 +1459,8 @@ body.dark-mode .search-box input:focus-visible {
 .token-instructions ol {
   margin-left: 20px;
   color: var(--muted-foreground);
-  line-height: 1.5;
-  font-size: 14px;
+  line-height: 1.4;
+  font-size: 13px;
 }
 
 .token-link {
@@ -1417,11 +1478,11 @@ body.dark-mode .search-box input:focus-visible {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  margin: 14px 0 10px;
+  margin: 10px 0 12px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
   border-radius: 18px;
-  padding: 14px;
+  padding: 12px;
 }
 
 .token-code-stack {
@@ -1453,7 +1514,7 @@ body.dark-mode .search-box input:focus-visible {
   border: 1px solid var(--input);
   border-radius: 12px;
   font-size: 15px;
-  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   background: rgba(255, 255, 255, 0.04);
   color: var(--foreground);
   letter-spacing: 0.14em;
@@ -1473,29 +1534,21 @@ body.dark-mode .search-box input:focus-visible {
   color: var(--muted-foreground);
 }
 
-/* shadcn outline button */
-.copy-code-btn {
-  padding: 8px 14px;
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--foreground);
-  border: 1px solid var(--input);
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 150ms;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
-  text-transform: uppercase;
+.token-action-row {
+  display: flex;
+  gap: 8px;
 }
 
-.copy-code-btn:hover:not(:disabled) {
-  background: var(--accent);
-  color: var(--accent-foreground);
+.token-action-row > * {
+  flex: 1;
 }
 
-.copy-code-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.token-skip-link {
+  align-self: center;
+  padding: 0;
+  font-size: 11px;
+  line-height: 1.35;
+  margin-top: 2px;
 }
 
 /* Primary button */
@@ -1510,7 +1563,7 @@ body.dark-mode .search-box input:focus-visible {
   cursor: pointer;
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -1530,11 +1583,55 @@ body.dark-mode .search-box input:focus-visible {
   min-height: 0;
 }
 
+.token-status-prominent {
+  margin-top: 10px;
+}
+
+.token-connected-card {
+  border: 1px solid color-mix(in srgb, var(--accent-color) 22%, var(--border));
+  border-radius: 18px;
+  padding: 14px 16px;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 65%),
+    rgba(255, 255, 255, 0.04);
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
+  text-align: left;
+}
+
+.token-connected-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
+  color: var(--accent-color);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.token-connected-title {
+  color: var(--foreground);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.token-connected-copy {
+  margin: 6px 0 0;
+  max-width: none;
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+
 @media (max-width: 560px) {
-  .token-input-group {
+  .token-input-group,
+  .token-action-row {
     flex-direction: column;
   }
-  .copy-code-btn,
   .validate-btn {
     width: 100%;
   }
@@ -1559,17 +1656,16 @@ body.dark-mode .search-box input:focus-visible {
 }
 
 .security-note {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--muted-foreground);
   margin-top: 8px;
   display: flex;
   align-items: flex-start;
-  gap: 6px;
-  line-height: 1.4;
-  padding: 12px 14px;
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.04);
+  gap: 5px;
+  line-height: 1.35;
+  padding: 0;
+  border: none;
+  background: none;
   text-align: left;
 }
 
@@ -1583,7 +1679,51 @@ body.dark-mode .search-box input:focus-visible {
 /* Repos Step */
 .popular-repos {
   text-align: left;
-  margin: 16px 0;
+  margin: 12px 0 10px;
+}
+
+.repos-step {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-left: 4px;
+  padding-right: 6px;
+  padding-bottom: 10px;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
+}
+
+.repos-step::-webkit-scrollbar {
+  width: 6px;
+}
+
+.repos-step::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.repos-step::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 9999px;
+}
+
+.repos-step::-webkit-scrollbar-thumb:hover {
+  background: var(--muted-foreground);
+}
+
+.repo-source-panel {
+  margin-bottom: 8px;
+}
+
+.popular-repos-panel {
+  margin-top: 18px;
+  padding: 16px 14px 14px;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 70%),
+    rgba(255, 255, 255, 0.02);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 .popular-repos h3 {
@@ -1593,27 +1733,75 @@ body.dark-mode .search-box input:focus-visible {
   font-weight: 600;
 }
 
+.popular-repos-panel h3 {
+  margin-bottom: 8px;
+}
+
+.popular-repos-panel .repo-source-copy {
+  margin-bottom: 12px;
+}
+
+.repo-source-copy {
+  margin: -4px 0 10px;
+  max-width: none;
+  font-size: 12px;
+}
+
+.repo-source-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.repo-source-btn {
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--muted-foreground);
+  font-size: 11px;
+  font-weight: 600;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
+}
+
+.repo-source-btn:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--border-hover);
+  color: var(--foreground);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+}
+
+.repo-source-btn.active {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+}
+
 .repo-suggestions {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
 
 .repo-suggestion {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 12px;
+  padding: 9px 12px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
   border-radius: 16px;
-  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
 }
 
 .repo-suggestion:hover {
-  background: var(--accent);
-  transform: translateY(-2px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--border-hover);
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
 }
 
 .repo-info {
@@ -1792,7 +1980,7 @@ body.dark-mode .search-box input:focus-visible {
   font-weight: 600;
   cursor: pointer;
   transition: opacity 150ms;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -1805,10 +1993,15 @@ body.dark-mode .search-box input:focus-visible {
   min-height: 0;
 }
 
+.repos-step .step-subtitle {
+  margin: 0 auto 10px;
+  max-width: 340px;
+}
+
 /* Categories Step */
 .categories-step .step-subtitle {
   margin-top: -8px;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   color: var(--muted-foreground);
   font-size: 14px;
 }
@@ -1816,30 +2009,30 @@ body.dark-mode .search-box input:focus-visible {
 .categories-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  margin: 24px 0;
+  gap: 8px;
+  margin: 14px 0 10px;
 }
 
 .category-item {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 16px;
+  gap: 12px;
+  padding: 12px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
   border-radius: 18px;
-  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
 }
 
 .category-item:hover {
-  background: var(--accent);
-  transform: translateY(-2px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--border-hover);
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
 }
 
 .category-icon {
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   border-radius: 10px;
   display: flex;
   align-items: center;
@@ -1892,7 +2085,7 @@ body.dark-mode .releases-icon {
 
 .category-controls {
   display: flex;
-  gap: 16px;
+  gap: 12px;
   align-items: center;
   flex-shrink: 0;
 }
@@ -1910,7 +2103,7 @@ body.dark-mode .releases-icon {
   color: var(--muted-foreground);
   font-weight: 600;
   min-width: 38px;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -2076,53 +2269,57 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   font-size: 12px;
   color: var(--muted-foreground);
   font-style: italic;
-  margin-top: 16px;
+  margin-top: 10px;
 }
 
 /* Complete Step */
+.complete-step .step-icon {
+  margin-bottom: 14px;
+}
+
 .complete-step .step-icon svg {
-  width: 56px;
-  height: 56px;
+  width: 48px;
+  height: 48px;
   color: var(--foreground);
   stroke-width: 1.5;
 }
 
 .next-steps {
-  margin: 24px 0;
+  margin: 14px 0 10px;
   text-align: left;
 }
 
 .next-steps h3 {
-  margin-bottom: 14px;
+  margin-bottom: 10px;
   color: var(--muted-foreground);
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
 }
 
 .tips-grid {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
 }
 
 .tip-item {
   display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 14px 16px;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px;
   background: rgba(255, 255, 255, 0.04);
-  border-radius: 18px;
+  border-radius: 16px;
   border: 1px solid var(--border);
-  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
 }
 
 .tip-item:hover {
-  background: var(--accent);
-  transform: translateY(-2px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--border-hover);
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
 }
 
 .tip-icon {
@@ -2130,17 +2327,17 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 12px;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
   color: var(--accent-color);
 }
 
 .tip-icon svg {
-  width: 14px;
-  height: 14px;
+  width: 13px;
+  height: 13px;
 }
 
 .tip-content {
@@ -2150,7 +2347,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .tip-content strong {
   display: block;
   color: var(--foreground);
-  font-size: 13px;
+  font-size: 12px;
   margin-bottom: 2px;
   font-weight: 600;
 }
@@ -2158,15 +2355,15 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
 .tip-content p {
   margin: 0;
   color: var(--muted-foreground);
-  font-size: 12px;
-  line-height: 1.4;
+  font-size: 11px;
+  line-height: 1.35;
 }
 
 .final-tips {
-  margin-top: 20px;
-  padding: 14px 16px;
+  margin-top: 10px;
+  padding: 10px 12px;
   background: rgba(255, 255, 255, 0.04);
-  border-radius: 18px;
+  border-radius: 16px;
   border: 1px solid var(--border);
 }
 
@@ -2192,7 +2389,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-top: 16px;
+  padding-top: 14px;
   margin-top: auto;
   flex-shrink: 0;
 }
@@ -2211,7 +2408,7 @@ body.dark-mode .notification-toggle input:checked + .toggle-slider {
   cursor: pointer;
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
   border: 1px solid transparent;
-  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   text-transform: uppercase;
 }
 
@@ -2297,6 +2494,10 @@ body.dark-mode .add-repo-btn:hover {
     max-width: none;
   }
 
+  .tips-grid {
+    grid-template-columns: 1fr;
+  }
+
   .onboarding-nav {
     flex-direction: column;
     gap: 15px;
diff --git a/popup/popup.html b/popup/popup.html
index 41d0a59..90b7751 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -4,28 +4,30 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>GitHub Devwatch</title>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <script src="../shared/theme-boot.js"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="../shared/themes.css">
   <link rel="stylesheet" href="popup.css">
 </head>
 <body>
   <div class="container">
-    <header>
-      <h1>GitHub Devwatch</h1>
-      <div class="header-info">
-        <div class="header-stats">
-          <span id="lastUpdated" class="last-updated" aria-live="polite">Never</span>
-          <span id="repoCount" class="repo-count" aria-live="polite">Watching 0 repos</span>
-        </div>
+    <header class="hidden">
+      <div class="header-main">
+        <h1>GitHub Devwatch</h1>
         <button id="refreshBtn" class="footer-btn header-refresh-btn" title="Check for new activity now" aria-label="Check for new activity now" tabindex="0">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="refresh-icon" aria-hidden="true">
             <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/>
           </svg>
         </button>
       </div>
+      <div class="header-meta">
+        <span id="lastUpdated" class="last-updated" aria-live="polite">Never</span>
+        <span class="header-meta-separator" aria-hidden="true"></span>
+        <span id="repoCount" class="repo-count" aria-live="polite">0 repos</span>
+      </div>
     </header>
 
-    <div class="toolbar">
+    <div class="toolbar hidden">
       <div class="filters" role="tablist" aria-label="Filter activities by type">
         <button class="filter-btn active" data-type="all" role="tab" aria-selected="true" aria-controls="activityList" tabindex="0">All</button>
         <button class="filter-btn" data-type="pr" role="tab" aria-selected="false" aria-controls="activityList" tabindex="-1">PRs</button>
@@ -56,7 +58,7 @@ <h1>GitHub Devwatch</h1>
       <!-- Dynamic content will be inserted here -->
     </div>
 
-    <div id="activityList" class="activity-list" role="main" aria-label="GitHub activities" aria-live="polite">
+    <div id="activityList" class="activity-list hidden" role="main" aria-label="GitHub activities" aria-live="polite">
     </div>
 
     <footer role="contentinfo">
@@ -85,7 +87,7 @@ <h1>GitHub Devwatch</h1>
             </svg>
           </button>
         </div>
-        <span id="rateLimitInfo" class="rate-limit-info" aria-label="GitHub API rate limit status"></span>
+        <span id="rateLimitInfo" class="rate-limit-info hidden" aria-label="GitHub API rate limit status"></span>
         <button id="footerSkipBtn" class="footer-btn skip-btn hidden" title="Skip setup" aria-label="Skip setup" tabindex="0">
           Skip setup
         </button>
diff --git a/popup/popup.js b/popup/popup.js
index ddc513c..f7c775a 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -75,15 +75,14 @@ async function initializePopup() {
       const header = document.querySelector('header');
       const toolbar = document.querySelector('.toolbar');
       const activityList = document.getElementById('activityList');
-      if (header) header.style.display = 'flex';
-      if (toolbar) toolbar.style.display = 'flex';
-      if (activityList) activityList.style.display = 'block';
+      if (header) header.classList.remove('hidden');
+      if (toolbar) toolbar.classList.remove('hidden');
+      if (activityList) activityList.classList.remove('hidden');
 
       // Ensure skip button is hidden when not in onboarding
       const footerSkipBtn = document.getElementById('footerSkipBtn');
       if (footerSkipBtn) {
         footerSkipBtn.classList.add('hidden');
-        footerSkipBtn.style.display = 'none';
       }
 
       loadActivities();
@@ -160,11 +159,9 @@ import { toggleDarkMode, updateDarkModeIcon } from './controllers/theme-controll
 
 async function loadAndApplyThemes() {
   const savedTheme = await getSyncItem('theme', null);
-  let theme = savedTheme;
+  let theme = savedTheme ?? 'system';
 
-  // If no saved theme, detect system preference and persist it
-  if (theme === null) {
-    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  if (savedTheme === null) {
     await chrome.storage.sync.set({ theme });
   }
 
@@ -190,7 +187,12 @@ async function updateRepoCount() {
   const count = watchedRepos.length;
   const repoCountEl = document.getElementById('repoCount');
   if (repoCountEl) {
-    repoCountEl.textContent = count === 0 ? 'Not watching any repos' : `Watching ${count} ${count === 1 ? 'repo' : 'repos'}`;
+    const repoLabel = count === 0 ? 'No repos' : `${count} ${count === 1 ? 'repo' : 'repos'}`;
+    const fullLabel = count === 0 ? 'Not watching any repos' : `Watching ${count} ${count === 1 ? 'repo' : 'repos'}`;
+
+    repoCountEl.textContent = repoLabel;
+    repoCountEl.title = fullLabel;
+    repoCountEl.setAttribute('aria-label', fullLabel);
   }
 }
 
diff --git a/popup/views/activity-item-view.js b/popup/views/activity-item-view.js
index ad852ab..d04d3e6 100644
--- a/popup/views/activity-item-view.js
+++ b/popup/views/activity-item-view.js
@@ -3,6 +3,7 @@ import { escapeHtml, sanitizeImageUrl } from '../../shared/sanitize.js';
 import { CHECK_ICON, createSvg } from '../../shared/icons.js';
 import { useState } from '../../shared/state-manager.js';
 import {
+  getActivityTypeBadgeLabel,
   formatRelativeTime,
   getActivityTypeLabel,
   groupByRepo,
@@ -24,6 +25,7 @@ export function renderActivityItem(activity) {
   const sanitizedRepo = escapeHtml(activity.repo);
   const sanitizedType = escapeHtml(activity.type);
   const sanitizedTypeLabel = escapeHtml(getActivityTypeLabel(activity.type));
+  const sanitizedTypeBadgeLabel = escapeHtml(getActivityTypeBadgeLabel(activity.type));
   const sanitizedAvatar = sanitizeImageUrl(activity.authorAvatar);
 
   return `
@@ -31,7 +33,7 @@ export function renderActivityItem(activity) {
       <img src="${sanitizedAvatar}" class="activity-avatar" alt="${sanitizedAuthor}">
       <div class="activity-content">
         <div class="activity-header">
-          <span class="activity-type ${sanitizedType}">${sanitizedTypeLabel}</span>
+          <span class="activity-type ${sanitizedType}" title="${sanitizedTypeLabel}">${sanitizedTypeBadgeLabel}</span>
           <span class="activity-repo">${sanitizedRepo}</span>
         </div>
         <div class="activity-title">${sanitizedTitle}</div>
diff --git a/popup/views/activity-list-view.js b/popup/views/activity-list-view.js
index 65c2064..5b4e70f 100644
--- a/popup/views/activity-list-view.js
+++ b/popup/views/activity-list-view.js
@@ -2,6 +2,8 @@ import { stateManager, useState } from '../../shared/state-manager.js';
 import { showError } from '../../shared/error-handler.js';
 import { safelyOpenUrl } from '../../shared/security.js';
 
+const OPTIONS_REPOSITORIES_URL = 'options/options.html?showAdd=true#repositories';
+
 /**
  * Renders the filtered activity list using ActivityListRenderer for efficient DOM updates
  * This is the main rendering function that delegates to optimized or legacy renderer
@@ -78,7 +80,7 @@ export function renderActivities(
           e.preventDefault();
 
           // Open options page with hash and query parameter
-          const optionsUrl = chrome.runtime.getURL('options/options.html#repositories?showAdd=true');
+          const optionsUrl = chrome.runtime.getURL(OPTIONS_REPOSITORIES_URL);
           await chrome.tabs.create({ url: optionsUrl });
         });
       }
@@ -299,7 +301,7 @@ function attachEventListeners(
     // Handle options link in empty state
     if (e.target.closest('#optionsLink')) {
       e.preventDefault();
-      chrome.tabs.create({ url: chrome.runtime.getURL('options/options.html#repositories?showAdd=true') });
+      chrome.tabs.create({ url: chrome.runtime.getURL(OPTIONS_REPOSITORIES_URL) });
     }
   };
 
diff --git a/popup/views/onboarding-view.js b/popup/views/onboarding-view.js
index a0fbd24..113ff2d 100644
--- a/popup/views/onboarding-view.js
+++ b/popup/views/onboarding-view.js
@@ -6,6 +6,10 @@ import {
   requestGitHubDeviceCode
 } from '../../shared/auth.js';
 import { OnboardingManager } from '../../shared/onboarding.js';
+import {
+  fetchGitHubRepoSource,
+  getGitHubRepoSourceConfig
+} from '../../shared/github-repo-sources.js';
 import { getAccessToken, getWatchedRepos, setAuthSession, setWatchedRepos } from '../../shared/storage-helpers.js';
 import { resolveWatchedRepoInput } from '../../shared/repo-service.js';
 import { CATEGORY_SETTINGS, createCategorySettings } from '../../shared/settings-schema.js';
@@ -13,11 +17,30 @@ import { escapeHtml } from '../../shared/sanitize.js';
 
 // Create onboarding manager instance
 const onboardingManager = new OnboardingManager();
+const ONBOARDING_REPO_SOURCE_TYPES = ['mine', 'watched', 'starred', 'participating'];
 
 function getStatusMarkup(type, message) {
   return `<div class="status-${type}">${escapeHtml(message)}</div>`;
 }
 
+function getConnectedStatusMarkup(username) {
+  const connectedLabel = username
+    ? `Connected as ${escapeHtml(username)}`
+    : 'GitHub connected';
+
+  return `
+    <div class="token-connected-card">
+      <div class="token-connected-badge">Ready</div>
+      <div class="token-connected-title">${connectedLabel}</div>
+      <p class="token-connected-copy">You're done here. Continue to choose repositories for your watchlist.</p>
+    </div>
+  `;
+}
+
+function getAnonymousRepoModeCopy() {
+  return 'You can add public repositories now and connect GitHub later for private repos and a higher API budget.';
+}
+
 async function addWatchedRepoFromInput(rawInput) {
   const githubToken = await getAccessToken();
   const existingRepos = await getWatchedRepos();
@@ -50,10 +73,9 @@ async function copyTextToClipboard(text) {
 
   const activeElement = document.activeElement;
   const tempInput = document.createElement('input');
+  tempInput.className = 'clipboard-temp-input';
   tempInput.value = text;
   tempInput.setAttribute('readonly', '');
-  tempInput.style.position = 'absolute';
-  tempInput.style.opacity = '0';
   document.body.appendChild(tempInput);
   tempInput.select();
 
@@ -157,15 +179,18 @@ async function completePendingDeviceAuth(tokenData, elements, options = {}) {
 }
 
 function renderRepoSuggestion(repo) {
-  const rawOwner = repo?.owner?.login || 'unknown';
-  const rawName = repo?.name || 'unknown';
+  const normalizedFullName = repo?.fullName || '';
+  const [fullNameOwner = '', fullNameName = ''] = normalizedFullName.split('/');
+  const rawOwner = repo?.owner?.login || fullNameOwner || 'unknown';
+  const rawName = repo?.name || fullNameName || 'unknown';
   const owner = escapeHtml(rawOwner);
   const name = escapeHtml(rawName);
   const description = escapeHtml(repo?.description || `${repo?.language || 'Popular'} project worth watching`);
   const language = escapeHtml(repo?.language || '');
   const repoFullName = `${rawOwner}/${rawName}`;
-  const stars = Number.isFinite(repo?.stargazers_count)
-    ? repo.stargazers_count.toLocaleString()
+  const starCount = Number.isFinite(repo?.stargazers_count) ? repo.stargazers_count : repo?.stars;
+  const stars = Number.isFinite(starCount)
+    ? starCount.toLocaleString()
     : '';
 
   return `
@@ -199,16 +224,15 @@ export async function showOnboarding(loadActivitiesCallback) {
   // Hide main content and show onboarding
   if (onboardingView) {
     onboardingView.classList.remove('hidden');
-    onboardingView.style.display = 'block';
   }
-  if (activityList) activityList.style.display = 'none';
-  if (toolbar) toolbar.style.display = 'none';
-  if (searchBox) searchBox.style.display = 'none';
+  if (activityList) activityList.classList.add('hidden');
+  if (toolbar) toolbar.classList.add('hidden');
+  if (searchBox) searchBox.classList.add('hidden');
 
   // Hide entire header during onboarding
   const header = document.querySelector('header');
   if (header) {
-    header.style.display = 'none';
+    header.classList.add('hidden');
   }
 
   // Load current step
@@ -264,7 +288,8 @@ export async function renderOnboardingStep(loadActivitiesCallback) {
   const isFinalStep = progress.current === progress.total;
   const isTokenStep = currentStep === 'token';
   const nextButtonText = isTokenStep ? 'Continue' : (isFinalStep ? 'Open Feed' : 'Next');
-  const nextButtonDisabled = isTokenStep ? 'disabled' : '';
+  const tokenStepData = isTokenStep ? await onboardingManager.getStepData('token') : null;
+  const nextButtonDisabled = isTokenStep && !tokenStepData?.validated ? 'disabled' : '';
 
   stepContent += `
     <div class="onboarding-nav">
@@ -280,7 +305,7 @@ export async function renderOnboardingStep(loadActivitiesCallback) {
   if (progress.showProgress) {
     const progressFill = onboardingView.querySelector('.progress-fill');
     if (progressFill) {
-      progressFill.style.width = `${progress.percentage}%`;
+      progressFill.dataset.progress = String(progress.percentage);
     }
   }
 
@@ -292,13 +317,7 @@ export async function renderOnboardingStep(loadActivitiesCallback) {
   if (footerSkipBtn) {
     // Show skip button for repos and categories steps only (token is required)
     const showSkip = progress.showProgress && currentStep !== 'complete' && currentStep !== 'token';
-    if (showSkip) {
-      footerSkipBtn.classList.remove('hidden');
-      footerSkipBtn.style.display = 'block';
-    } else {
-      footerSkipBtn.classList.add('hidden');
-      footerSkipBtn.style.display = 'none';
-    }
+    footerSkipBtn.classList.toggle('hidden', !showSkip);
   }
 }
 
@@ -343,87 +362,255 @@ function renderWelcomeStep() {
 
 async function renderTokenStep() {
   const tokenData = await onboardingManager.getStepData('token');
+  const canSkipTokenStep = !tokenData?.validated;
+  const isConnected = Boolean(tokenData?.validated);
 
   let statusHtml = '';
-  let buttonDisabled = '';
-  let buttonText = 'Connect GitHub';
+  let tokenStatusClass = 'token-status';
   const safeUserCode = escapeHtml(tokenData?.userCode || '');
 
   if (tokenData && tokenData.validated && tokenData.username) {
-    statusHtml = getStatusMarkup('success', `Connected as ${tokenData.username}`);
-    buttonDisabled = 'disabled';
-    buttonText = 'Connected';
+    statusHtml = getConnectedStatusMarkup(tokenData.username);
+    tokenStatusClass += ' token-status-prominent';
   } else if (tokenData && tokenData.validated) {
-    statusHtml = getStatusMarkup('success', 'GitHub is connected');
-    buttonDisabled = 'disabled';
-    buttonText = 'Connected';
+    statusHtml = getConnectedStatusMarkup('');
+    tokenStatusClass += ' token-status-prominent';
   } else if (tokenData?.userCode) {
-    statusHtml = getStatusMarkup('loading', `Enter ${tokenData.userCode} on GitHub to finish connecting.`);
+    statusHtml = getStatusMarkup('loading', `If GitHub asks for a code, use ${tokenData.userCode}.`);
   }
 
   return `
     <div class="onboarding-step token-step">
       <h2>Connect your GitHub account</h2>
-      <p>We'll open GitHub in a new tab and keep the device code ready here for you.</p>
+      <p>We'll open GitHub in a new tab and copy your code to the clipboard so it's ready if GitHub asks for it.</p>
 
       <div class="token-instructions">
         <h3>Quick setup</h3>
         <ol>
           <li>Click <strong>Connect GitHub</strong></li>
+          <li>GitHub opens and DevWatch copies the code for you</li>
           <li>Approve access on the GitHub page that opens</li>
           <li>Come back here once GitHub says you're done</li>
         </ol>
       </div>
 
-      <div class="token-input-group">
-        <div class="token-code-stack">
-          <input
-            type="text"
-            id="tokenInput"
-            placeholder="Verification code appears here"
-            class="token-input"
-            autocomplete="off"
-            value="${safeUserCode}"
-            readonly
-          >
-          <p class="token-copy-hint">Click the code to select it, or use Copy.</p>
+      ${isConnected ? '' : `
+        <div class="token-input-group">
+          <div class="token-code-stack">
+            <input
+              type="text"
+              id="tokenInput"
+              placeholder="Code appears here"
+              class="token-input"
+              autocomplete="off"
+              value="${safeUserCode}"
+              readonly
+            >
+          </div>
+          <p id="tokenCopyHint" class="token-copy-hint ${safeUserCode ? '' : 'hidden'}">Click the code field to copy it again.</p>
+          <div class="token-action-row">
+            <button id="validateTokenBtn" class="validate-btn">Connect GitHub</button>
+          </div>
+          ${canSkipTokenStep ? '<button id="skipTokenStepBtn" class="onboarding-btn link token-skip-link" type="button">Continue without GitHub</button>' : ''}
         </div>
-        <button id="copyTokenCodeBtn" class="copy-code-btn" ${safeUserCode ? '' : 'disabled'}>Copy</button>
-        <button id="validateTokenBtn" class="validate-btn" ${buttonDisabled}>${buttonText}</button>
-      </div>
+      `}
 
-      <div id="tokenStatus" class="token-status">${statusHtml}</div>
+      <div id="tokenStatus" class="${tokenStatusClass}">${statusHtml}</div>
     </div>
 
     <p class="security-note">
       <svg class="info-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
         <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
       </svg>
-      Your GitHub session stays in Chrome session storage for the current browser session only. It's used for GitHub API access and is cleared when the browser session ends.
+      GitHub access stays in this Chrome profile until you disconnect it or reset DevWatch.
     </p>
   `;
 }
 
-export async function renderReposStep() {
+function renderRepoSourceButton(type, selectedSource) {
+  const sourceConfig = getGitHubRepoSourceConfig(type);
+  const isSelected = type === selectedSource;
+
+  return `
+    <button
+      type="button"
+      class="repo-source-btn${isSelected ? ' active' : ''}"
+      data-source="${escapeHtml(type)}"
+      aria-pressed="${isSelected ? 'true' : 'false'}"
+    >
+      ${escapeHtml(sourceConfig.label)}
+    </button>
+  `;
+}
+
+function renderRepoSuggestionsContent(repos, { loadingMessage = 'Loading repositories...', emptyMessage = 'No repositories found.' } = {}) {
+  if (!Array.isArray(repos)) {
+    return `<div class="repo-loading" id="repoLoading">${escapeHtml(loadingMessage)}</div>`;
+  }
+
+  if (repos.length === 0) {
+    return `<div class="repo-loading">${escapeHtml(emptyMessage)}</div>`;
+  }
+
+  return repos.map(renderRepoSuggestion).join('');
+}
+
+function filterSuggestedRepos(repos, watchedRepos) {
+  const watchedRepoNames = new Set(
+    (Array.isArray(watchedRepos) ? watchedRepos : [])
+      .map(repo => repo?.fullName?.toLowerCase())
+      .filter(Boolean)
+  );
+
+  return (Array.isArray(repos) ? repos : []).filter((repo) => {
+    const fullName = String(repo?.fullName || `${repo?.owner?.login || ''}/${repo?.name || ''}`).toLowerCase();
+    return fullName && !watchedRepoNames.has(fullName);
+  });
+}
+
+async function getSavedRepoSourceState() {
+  const state = await onboardingManager.getStepData('repoSource');
+  return state && typeof state === 'object'
+    ? state
+    : {};
+}
+
+async function saveRepoSourceState(nextState) {
+  await onboardingManager.saveStepData('repoSource', nextState);
+}
+
+async function loadAuthenticatedRepoSourcePreview(sourceType, options = {}) {
+  const githubToken = await getAccessToken();
+  if (!githubToken) {
+    return [];
+  }
+
+  const sourceState = await getSavedRepoSourceState();
+  const cachedPreview = sourceState?.previews?.[sourceType];
+  if (!options.force && Array.isArray(cachedPreview)) {
+    return cachedPreview;
+  }
+
+  const existingRepos = await getWatchedRepos();
+  const previewRepos = await fetchGitHubRepoSource(sourceType, githubToken, {
+    perPage: 12,
+    maxPages: 1,
+    maxRepos: 12,
+    timeLimitMs: 10000
+  });
+
+  const filteredPreview = previewRepos
+    .filter((repo) => !existingRepos.some(existing => existing?.fullName?.toLowerCase() === repo.fullName.toLowerCase()))
+    .slice(0, 3);
+
+  const nextState = {
+    ...sourceState,
+    selectedSource: sourceType,
+    previews: {
+      ...(sourceState.previews || {}),
+      [sourceType]: filteredPreview
+    },
+    loadedSources: Array.from(new Set([...(sourceState.loadedSources || []), sourceType])),
+    errors: {
+      ...(sourceState.errors || {}),
+      [sourceType]: null
+    }
+  };
+
+  await saveRepoSourceState(nextState);
+  return filteredPreview;
+}
+
+async function getPopularRepoPreview(watchedRepos) {
   const saved = await onboardingManager.getStepData('popularRepos');
   const hasSavedRepos = Array.isArray(saved) && saved.length > 0;
+  const popularRepos = hasSavedRepos ? saved : await onboardingManager.getPopularRepos();
 
-  let popularRepos;
-  if (hasSavedRepos) {
-    popularRepos = saved;
-  } else {
-    popularRepos = await onboardingManager.getPopularRepos();
+  return filterSuggestedRepos(popularRepos, watchedRepos).slice(0, 3);
+}
+
+export async function renderReposStep() {
+  const githubToken = await getAccessToken();
+  const watchedRepos = await getWatchedRepos();
+  const publicOnlyMode = !githubToken;
+  const visiblePopularRepos = await getPopularRepoPreview(watchedRepos);
+
+  if (!publicOnlyMode) {
+    const sourceState = await getSavedRepoSourceState();
+    const selectedSource = ONBOARDING_REPO_SOURCE_TYPES.includes(sourceState?.selectedSource)
+      ? sourceState.selectedSource
+      : 'mine';
+    const sourceConfig = getGitHubRepoSourceConfig(selectedSource);
+    const cachedPreview = Array.isArray(sourceState?.previews?.[selectedSource])
+      ? filterSuggestedRepos(sourceState.previews[selectedSource], watchedRepos).slice(0, 3)
+      : null;
+    const isLoaded = Array.isArray(sourceState?.loadedSources) && sourceState.loadedSources.includes(selectedSource);
+    const sourceError = sourceState?.errors?.[selectedSource];
+
+    return `
+      <div class="onboarding-step repos-step">
+        <h2>Build your watchlist</h2>
+        <p class="step-subtitle">Add repos manually, or pull from the same GitHub sources available in settings.</p>
+
+        <div class="popular-repos repo-source-panel">
+          <h3>Add from GitHub</h3>
+          <p class="repo-source-copy">Choose a source to preview repos from your account.</p>
+          <div class="repo-source-tabs" id="repoSourceTabs">
+            ${ONBOARDING_REPO_SOURCE_TYPES.map(type => renderRepoSourceButton(type, selectedSource)).join('')}
+          </div>
+          <div class="repo-suggestions" id="repoSuggestions" data-source="${escapeHtml(selectedSource)}" data-loaded="${isLoaded ? 'true' : 'false'}">
+            ${sourceError
+              ? `<div class="repo-loading repo-error">${escapeHtml(sourceError)}</div>`
+              : renderRepoSuggestionsContent(
+                cachedPreview,
+                {
+                  loadingMessage: `Loading ${sourceConfig.label.toLowerCase()} repositories...`,
+                  emptyMessage: isLoaded
+                    ? sourceConfig.emptyState
+                    : `Loading ${sourceConfig.label.toLowerCase()} repositories...`
+                }
+              )}
+          </div>
+        </div>
+
+        <div class="popular-repos popular-repos-panel">
+          <h3>Popular repositories</h3>
+          <p class="repo-source-copy">Quick picks to get started if you want a few broad defaults.</p>
+          <div class="repo-suggestions" id="popularRepoSuggestions">
+            ${renderRepoSuggestionsContent(visiblePopularRepos, {
+              emptyMessage: 'No popular repositories available right now.'
+            })}
+          </div>
+        </div>
+
+        <div class="manual-repo">
+          <h3>Or add one directly</h3>
+          <div class="manual-input-group">
+            <input
+              type="text"
+              id="manualRepoInput"
+              placeholder="owner/repo, github.com/owner/repo, or npm package name"
+              class="repo-input"
+            >
+            <button id="addManualRepoBtn" class="add-btn">Add</button>
+          </div>
+        </div>
+
+        <div id="repoStatus" class="repo-status"></div>
+      </div>
+    `;
   }
 
   return `
     <div class="onboarding-step repos-step">
       <h2>Build your watchlist</h2>
+      ${publicOnlyMode ? `<p class="step-subtitle">${getAnonymousRepoModeCopy()}</p>` : ''}
 
       <div class="popular-repos">
         <h3>Popular repositories</h3>
         <div class="repo-suggestions" id="repoSuggestions">
-          ${popularRepos && popularRepos.length > 0 ?
-            popularRepos.map(renderRepoSuggestion).join('') :
+          ${visiblePopularRepos.length > 0 ?
+            visiblePopularRepos.map(renderRepoSuggestion).join('') :
             '<div class="repo-loading" id="repoLoading">Loading popular repositories...</div>'
           }
         </div>
@@ -645,7 +832,7 @@ export async function setupOnboardingStepListeners(currentStep, loadActivitiesCa
   // Step-specific listeners
   switch (currentStep) {
     case 'token':
-      setupTokenStepListeners();
+      setupTokenStepListeners(loadActivitiesCallback);
       break;
     case 'repos':
       setupReposStepListeners();
@@ -656,36 +843,50 @@ export async function setupOnboardingStepListeners(currentStep, loadActivitiesCa
   }
 }
 
-function setupTokenStepListeners() {
+function setupTokenStepListeners(loadActivitiesCallback) {
   const tokenInput = document.getElementById('tokenInput');
-  const copyTokenCodeBtn = document.getElementById('copyTokenCodeBtn');
+  const tokenCopyHint = document.getElementById('tokenCopyHint');
   const validateBtn = document.getElementById('validateTokenBtn');
+  const skipTokenStepBtn = document.getElementById('skipTokenStepBtn');
   const tokenStatus = document.getElementById('tokenStatus');
   const nextBtn = document.getElementById('nextBtn');
   const tokenElements = { tokenInput, validateBtn, tokenStatus, nextBtn };
+  let lastTokenCopyAttemptAt = 0;
 
-  tokenInput?.addEventListener('click', () => {
-    tokenInput.select();
-  });
-
-  tokenInput?.addEventListener('focus', () => {
-    tokenInput.select();
-  });
-
-  copyTokenCodeBtn?.addEventListener('click', async () => {
+  const tryCopyDisplayedCode = async () => {
     const userCode = tokenInput?.value?.trim();
     if (!userCode) {
-      return;
+      return false;
+    }
+
+    const now = Date.now();
+    if (now - lastTokenCopyAttemptAt < 150) {
+      return false;
     }
+    lastTokenCopyAttemptAt = now;
 
     try {
       const copied = await copyTextToClipboard(userCode);
       if (copied) {
-        tokenStatus.innerHTML = getStatusMarkup('success', `Copied ${userCode}. Paste it into GitHub to finish connecting.`);
+        tokenStatus.innerHTML = getStatusMarkup('success', `Code ${userCode} copied to clipboard in case GitHub asks for it.`);
+        return true;
       }
     } catch (_error) {
-      tokenStatus.innerHTML = getStatusMarkup('error', 'Could not copy the code automatically. Select it manually.');
+      // Fall through to the shared fallback message below.
     }
+
+    tokenStatus.innerHTML = getStatusMarkup('error', 'Could not copy the code automatically. Select it manually.');
+    return false;
+  };
+
+  tokenInput?.addEventListener('click', () => {
+    tokenInput.select();
+    void tryCopyDisplayedCode();
+  });
+
+  tokenInput?.addEventListener('focus', () => {
+    tokenInput.select();
+    void tryCopyDisplayedCode();
   });
 
   // Resume the device flow if the popup was closed while GitHub was waiting
@@ -694,14 +895,22 @@ function setupTokenStepListeners() {
     const existingTokenData = await onboardingManager.getStepData('token');
     if (!existingTokenData?.validated && existingTokenData?.pendingDeviceAuth) {
       tokenInput.value = existingTokenData.userCode || existingTokenData.pendingDeviceAuth.userCode || '';
-      if (copyTokenCodeBtn) {
-        copyTokenCodeBtn.disabled = !tokenInput.value;
+      if (tokenCopyHint) {
+        tokenCopyHint.classList.toggle('hidden', !tokenInput.value);
       }
 
       try {
-        await completePendingDeviceAuth(existingTokenData, tokenElements, {
+        const result = await completePendingDeviceAuth(existingTokenData, tokenElements, {
           showCheckingStatus: true
         });
+        if (result) {
+          try {
+            await loadAuthenticatedRepoSourcePreview('mine', { force: true });
+          } catch (_prefetchError) {
+            // Silent prefetch failure is fine here.
+          }
+          await renderOnboardingStep(loadActivitiesCallback);
+        }
       } catch (error) {
         tokenStatus.innerHTML = getStatusMarkup('error',
           error?.code === 'client_id_missing'
@@ -727,15 +936,15 @@ function setupTokenStepListeners() {
       const pendingDeviceAuth = createPendingDeviceAuthState(deviceCodeData);
 
       tokenInput.value = deviceCodeData.userCode || '';
-      if (copyTokenCodeBtn) {
-        copyTokenCodeBtn.disabled = !tokenInput.value;
+      if (tokenCopyHint) {
+        tokenCopyHint.classList.toggle('hidden', !tokenInput.value);
       }
 
       const copied = await copyTextToClipboard(deviceCodeData.userCode).catch(() => false);
       tokenStatus.innerHTML = getStatusMarkup('loading',
         copied
-          ? `Code ${deviceCodeData.userCode} copied to clipboard — paste it on the GitHub page that opens.`
-          : `Enter ${deviceCodeData.userCode} on GitHub to finish connecting.`
+          ? `Code ${deviceCodeData.userCode} copied to clipboard in case GitHub asks for it.`
+          : `If GitHub asks for a code, enter ${deviceCodeData.userCode}.`
       );
 
       await onboardingManager.saveStepData('token', {
@@ -757,13 +966,11 @@ function setupTokenStepListeners() {
 
       if (result) {
         try {
-          const popular = await onboardingManager.getPopularRepos();
-          if (Array.isArray(popular) && popular.length > 0) {
-            await onboardingManager.saveStepData('popularRepos', popular);
-          }
+          await loadAuthenticatedRepoSourcePreview('mine', { force: true });
         } catch (_prefetchError) {
           // Silently handle prefetch errors - not critical
         }
+        await renderOnboardingStep(loadActivitiesCallback);
       }
     } catch (error) {
       tokenStatus.innerHTML = getStatusMarkup('error',
@@ -779,6 +986,15 @@ function setupTokenStepListeners() {
       validateBtn.textContent = 'Connect GitHub';
     }
   });
+
+  skipTokenStepBtn?.addEventListener('click', async () => {
+    await onboardingManager.saveStepData('token', {
+      validated: false,
+      skipped: true
+    });
+    await onboardingManager.skipStep();
+    await renderOnboardingStep(loadActivitiesCallback);
+  });
 }
 
 async function loadPopularRepos() {
@@ -787,10 +1003,12 @@ async function loadPopularRepos() {
 
   try {
     const popularRepos = await onboardingManager.getPopularRepos();
+    const watchedRepos = await getWatchedRepos();
+    const visibleRepos = filterSuggestedRepos(popularRepos, watchedRepos).slice(0, 3);
 
-    if (popularRepos && popularRepos.length > 0) {
+    if (visibleRepos.length > 0) {
       // Success: render the repos
-      repoSuggestions.innerHTML = popularRepos.map(renderRepoSuggestion).join('');
+      repoSuggestions.innerHTML = visibleRepos.map(renderRepoSuggestion).join('');
 
       // Re-attach event listeners to new buttons
       attachRepoButtonListeners();
@@ -805,6 +1023,39 @@ async function loadPopularRepos() {
   }
 }
 
+async function loadRepoSourcePreviewIntoDom(sourceType, options = {}) {
+  const repoSuggestions = document.getElementById('repoSuggestions');
+  if (!repoSuggestions) {
+    return;
+  }
+
+  const sourceConfig = getGitHubRepoSourceConfig(sourceType);
+  repoSuggestions.dataset.source = sourceType;
+  repoSuggestions.dataset.loaded = 'false';
+  repoSuggestions.innerHTML = `<div class="repo-loading">Loading ${escapeHtml(sourceConfig.label.toLowerCase())} repositories...</div>`;
+
+  try {
+    const previewRepos = await loadAuthenticatedRepoSourcePreview(sourceType, options);
+    repoSuggestions.dataset.loaded = 'true';
+    repoSuggestions.innerHTML = renderRepoSuggestionsContent(previewRepos, {
+      emptyMessage: sourceConfig.emptyState
+    });
+    attachRepoButtonListeners();
+  } catch (error) {
+    const sourceState = await getSavedRepoSourceState();
+    await saveRepoSourceState({
+      ...sourceState,
+      selectedSource: sourceType,
+      errors: {
+        ...(sourceState.errors || {}),
+        [sourceType]: error?.message || 'Failed to load repositories'
+      }
+    });
+    repoSuggestions.dataset.loaded = 'true';
+    repoSuggestions.innerHTML = `<div class="repo-loading repo-error">${escapeHtml(error?.message || 'Failed to load repositories')}</div>`;
+  }
+}
+
 function attachRepoButtonListeners() {
   const addButtons = document.querySelectorAll('.add-repo-btn:not([data-listener-attached])');
 
@@ -846,10 +1097,42 @@ function attachRepoButtonListeners() {
 }
 
 function setupReposStepListeners() {
+  const repoSourceButtons = document.querySelectorAll('.repo-source-btn');
+  const activeRepoSource = document.getElementById('repoSuggestions')?.dataset.source || 'mine';
+
+  if (repoSourceButtons.length > 0) {
+    repoSourceButtons.forEach((button) => {
+      button.addEventListener('click', async () => {
+        const sourceType = button.dataset.source;
+        if (!sourceType) {
+          return;
+        }
+
+        repoSourceButtons.forEach((candidate) => {
+          const isActive = candidate.dataset.source === sourceType;
+          candidate.classList.toggle('active', isActive);
+          candidate.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+        });
+
+        const sourceState = await getSavedRepoSourceState();
+        await saveRepoSourceState({
+          ...sourceState,
+          selectedSource: sourceType
+        });
+
+        await loadRepoSourcePreviewIntoDom(sourceType);
+      });
+    });
+
+    if (document.getElementById('repoSuggestions')?.dataset.loaded !== 'true') {
+      void loadRepoSourcePreviewIntoDom(activeRepoSource);
+    }
+  }
+
   // Handle loading state for popular repos
   const repoLoading = document.getElementById('repoLoading');
 
-  if (repoLoading && !document.querySelector('.repo-suggestion')) {
+  if (repoLoading && repoSourceButtons.length === 0 && !document.querySelector('.repo-suggestion')) {
     // We're in loading state, try to fetch repos
     loadPopularRepos();
   }
@@ -986,17 +1269,15 @@ export function exitOnboarding(loadActivitiesCallback) {
   // Show main content and hide onboarding
   if (onboardingView) {
     onboardingView.classList.add('hidden');
-    onboardingView.style.display = 'none';
   }
-  if (activityList) activityList.style.display = 'block';
-  if (toolbar) toolbar.style.display = 'flex';
-  if (header) header.style.display = 'flex';
+  if (activityList) activityList.classList.remove('hidden');
+  if (toolbar) toolbar.classList.remove('hidden');
+  if (header) header.classList.remove('hidden');
 
   // Hide footer skip button when exiting onboarding
   const footerSkipBtn = document.getElementById('footerSkipBtn');
   if (footerSkipBtn) {
     footerSkipBtn.classList.add('hidden');
-    footerSkipBtn.style.display = 'none';
   }
 
   // Load normal activities
diff --git a/screenshots/badge-count.png b/screenshots/badge-count.png
index e8dc97a..223eaf1 100644
Binary files a/screenshots/badge-count.png and b/screenshots/badge-count.png differ
diff --git a/screenshots/browser-notification.png b/screenshots/browser-notification.png
index 563497b..c9819ba 100644
Binary files a/screenshots/browser-notification.png and b/screenshots/browser-notification.png differ
diff --git a/screenshots/full-tagline.png b/screenshots/full-tagline.png
index c14e8b8..3bfc5f8 100644
Binary files a/screenshots/full-tagline.png and b/screenshots/full-tagline.png differ
diff --git a/screenshots/logo-tagline.png b/screenshots/logo-tagline.png
index 56718b8..85e0ef8 100644
Binary files a/screenshots/logo-tagline.png and b/screenshots/logo-tagline.png differ
diff --git a/screenshots/settings-page.png b/screenshots/settings-page.png
deleted file mode 100644
index 41f1cda..0000000
Binary files a/screenshots/settings-page.png and /dev/null differ
diff --git a/scripts/readme-screenshots/load.html b/scripts/readme-screenshots/load.html
new file mode 100644
index 0000000..bb1b62e
--- /dev/null
+++ b/scripts/readme-screenshots/load.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Devwatch README Screenshot Harness</title>
+  <style>
+    body {
+      margin: 0;
+      display: grid;
+      min-height: 100vh;
+      place-items: center;
+      font: 14px/1.5 Inter, system-ui, sans-serif;
+      background: #111827;
+      color: #e5e7eb;
+    }
+  </style>
+</head>
+<body>
+  <p id="status">Loading screenshot surface...</p>
+  <script>
+    (async () => {
+      const params = new URLSearchParams(window.location.search);
+      const target = params.get('target');
+
+      if (!target) {
+        document.getElementById('status').textContent = 'Missing target parameter.';
+        return;
+      }
+
+      try {
+        const targetUrl = new URL(target, window.location.origin);
+        const targetResponse = await fetch(targetUrl.href);
+
+        if (!targetResponse.ok) {
+          throw new Error(`Failed to load ${target}: ${targetResponse.status}`);
+        }
+
+        const baseHref = targetUrl.pathname.replace(/[^/]*$/, '');
+        const targetHtml = await targetResponse.text();
+        const injectedHtml = targetHtml.replace(
+          '<head>',
+          `<head><base href="${baseHref}"><script src="/scripts/readme-screenshots/mock-extension.js"><\/script>`
+        );
+
+        document.open();
+        document.write(injectedHtml);
+        document.close();
+      } catch (error) {
+        document.body.innerHTML = `<pre style="white-space: pre-wrap; padding: 24px;">${String(error?.stack || error)}</pre>`;
+      }
+    })();
+  </script>
+</body>
+</html>
diff --git a/scripts/readme-screenshots/mock-extension.js b/scripts/readme-screenshots/mock-extension.js
new file mode 100644
index 0000000..3a2e1b0
--- /dev/null
+++ b/scripts/readme-screenshots/mock-extension.js
@@ -0,0 +1,536 @@
+/* global Response, structuredClone */
+
+(function () {
+  const params = new URLSearchParams(window.location.search);
+  const scenario = params.get('scenario') || 'popup-feed';
+  const nowIso = '2026-04-21T20:45:00-05:00';
+  const now = new Date(nowIso).getTime();
+  const hour = 60 * 60 * 1000;
+  const minute = 60 * 1000;
+  const themePreferences = {
+    theme: 'dark',
+    colorTheme: 'graphite'
+  };
+
+  const sampleRepos = [
+    {
+      fullName: 'openai/openai-python',
+      owner: 'openai',
+      name: 'openai-python',
+      description: 'The official Python library for the OpenAI API.',
+      language: 'Python',
+      stars: 27000,
+      url: 'https://github.com/openai/openai-python'
+    },
+    {
+      fullName: 'vercel/next.js',
+      owner: 'vercel',
+      name: 'next.js',
+      description: 'The React framework for production.',
+      language: 'TypeScript',
+      stars: 131000,
+      url: 'https://github.com/vercel/next.js'
+    },
+    {
+      fullName: 'microsoft/vscode',
+      owner: 'microsoft',
+      name: 'vscode',
+      description: 'Visual Studio Code.',
+      language: 'TypeScript',
+      stars: 171000,
+      url: 'https://github.com/microsoft/vscode'
+    },
+    {
+      fullName: 'home-assistant/core',
+      owner: 'home-assistant',
+      name: 'core',
+      description: 'Open source home automation that puts local control and privacy first.',
+      language: 'Python',
+      stars: 86000,
+      url: 'https://github.com/home-assistant/core'
+    }
+  ];
+
+  const popularRepos = [
+    {
+      owner: { login: 'microsoft' },
+      name: 'vscode',
+      full_name: 'microsoft/vscode',
+      description: 'Visual Studio Code.',
+      language: 'TypeScript',
+      stargazers_count: 171000
+    },
+    {
+      owner: { login: 'vercel' },
+      name: 'next.js',
+      full_name: 'vercel/next.js',
+      description: 'The React framework for production.',
+      language: 'TypeScript',
+      stargazers_count: 131000
+    },
+    {
+      owner: { login: 'tailwindlabs' },
+      name: 'tailwindcss',
+      full_name: 'tailwindlabs/tailwindcss',
+      description: 'A utility-first CSS framework for rapid UI development.',
+      language: 'TypeScript',
+      stargazers_count: 86000
+    },
+    {
+      owner: { login: 'openai' },
+      name: 'openai-python',
+      full_name: 'openai/openai-python',
+      description: 'The official Python library for the OpenAI API.',
+      language: 'Python',
+      stargazers_count: 27000
+    }
+  ];
+
+  const releasePayload = {
+    tag_name: 'v1.0.3',
+    name: 'v1.0.3',
+    html_url: 'https://github.com/jonmartin721/devwatch-github/releases/tag/v1.0.3',
+    published_at: '2026-04-20T20:00:00Z',
+    created_at: '2026-04-20T19:20:00Z',
+    body: [
+      '## Highlights',
+      '- Added a GitHub status card in settings so account and API budget stay visible.',
+      '- Tightened popup theme boot so the first paint matches the selected theme.',
+      '- Cleaned up the popup header layout for denser repo metadata.',
+      '',
+      '## Quality',
+      '- Expanded UI tests around popup bootstrap and settings interactions.'
+    ].join('\n')
+  };
+
+  const popupActivities = [
+    {
+      id: 'openai-pr-1',
+      type: 'pr',
+      repo: 'openai/openai-python',
+      title: 'Ship the Responses API helper for streamed reasoning outputs',
+      description: 'Adds richer streaming helpers and better retry ergonomics.',
+      author: 'Ari Lerner',
+      authorAvatar: 'https://avatars.githubusercontent.com/u/833947?v=4',
+      createdAt: new Date(now - 17 * minute).toISOString(),
+      url: 'https://github.com/openai/openai-python/pull/9999'
+    },
+    {
+      id: 'openai-issue-1',
+      type: 'issue',
+      repo: 'openai/openai-python',
+      title: 'Document the new tool choice fallback for assistant runs',
+      description: 'Clarifies when the SDK falls back to automatic tool selection.',
+      author: 'Jenny Bryan',
+      authorAvatar: 'https://avatars.githubusercontent.com/u/87469?v=4',
+      createdAt: new Date(now - 43 * minute).toISOString(),
+      url: 'https://github.com/openai/openai-python/issues/10001'
+    },
+    {
+      id: 'vercel-release-1',
+      type: 'release',
+      repo: 'vercel/next.js',
+      title: 'v15.3.0',
+      description: 'Routing polish, faster Turbopack refreshes, and App Router fixes.',
+      author: 'Timer',
+      authorAvatar: 'https://avatars.githubusercontent.com/u/14985020?v=4',
+      createdAt: new Date(now - 95 * minute).toISOString(),
+      url: 'https://github.com/vercel/next.js/releases/tag/v15.3.0'
+    },
+    {
+      id: 'ha-pr-1',
+      type: 'pr',
+      repo: 'home-assistant/core',
+      title: 'Reduce log noise from transient Bluetooth reconnects',
+      description: 'Avoids paging on harmless reconnect bursts from sleepy devices.',
+      author: 'Paulus Schoutsen',
+      authorAvatar: 'https://avatars.githubusercontent.com/u/638318?v=4',
+      createdAt: new Date(now - 2.7 * hour).toISOString(),
+      url: 'https://github.com/home-assistant/core/pull/123456'
+    },
+    {
+      id: 'vscode-issue-1',
+      type: 'issue',
+      repo: 'microsoft/vscode',
+      title: 'Git diff editor still drops focus after inline rename',
+      description: 'Regression report with a short repro and screen recording.',
+      author: 'Sandy081',
+      authorAvatar: 'https://avatars.githubusercontent.com/u/10746682?v=4',
+      createdAt: new Date(now - 4.1 * hour).toISOString(),
+      url: 'https://github.com/microsoft/vscode/issues/245678'
+    }
+  ];
+
+  function clone(value) {
+    if (typeof structuredClone === 'function') {
+      return structuredClone(value);
+    }
+
+    return JSON.parse(JSON.stringify(value));
+  }
+
+  function scenarioData() {
+    const sharedSync = {
+      theme: themePreferences.theme,
+      colorTheme: themePreferences.colorTheme,
+      lastCheck: new Date(now - 8 * minute).toISOString(),
+      filters: {
+        prs: true,
+        issues: true,
+        releases: true
+      },
+      notifications: {
+        prs: true,
+        issues: true,
+        releases: true
+      },
+      checkInterval: 15,
+      snoozeHours: 24,
+      itemExpiryHours: null,
+      markReadOnSnooze: false,
+      allowUnlimitedRepos: false,
+      mutedRepos: [],
+      snoozedRepos: [],
+      pinnedRepos: ['openai/openai-python']
+    };
+
+    if (scenario === 'popup-onboarding') {
+      return {
+        sync: sharedSync,
+        local: {
+          onboarding_state: {
+            currentStep: 0,
+            completed: false,
+            skippedSteps: [],
+            data: {}
+          },
+          watchedRepos: [],
+          activities: [],
+          readItems: [],
+          rateLimit: null,
+          collapsedRepos: [],
+          lastError: null
+        },
+        session: {}
+      };
+    }
+
+    if (scenario === 'options-overview') {
+      return {
+        sync: {
+          ...sharedSync,
+          activeTab: 'repositories'
+        },
+        local: {
+          onboarding_state: {
+            currentStep: 4,
+            completed: true,
+            skippedSteps: [],
+            data: {}
+          },
+          watchedRepos: clone(sampleRepos),
+          activities: clone(popupActivities),
+          readItems: ['vscode-issue-1'],
+          rateLimit: {
+            remaining: 4218,
+            limit: 5000,
+            reset: new Date(now + 41 * minute).toISOString()
+          },
+          githubAuthSession: {
+            accessToken: 'mock-access-token',
+            username: 'jonmartin721',
+            authType: 'oauth_device',
+            scopes: ['repo', 'read:user'],
+            grantedAt: new Date(now - 19 * dayMs()).toISOString()
+          },
+          collapsedRepos: [],
+          lastError: null
+        },
+        session: {}
+      };
+    }
+
+    return {
+      sync: sharedSync,
+      local: {
+        onboarding_state: {
+          currentStep: 4,
+          completed: true,
+          skippedSteps: [],
+          data: {}
+        },
+        watchedRepos: clone(sampleRepos),
+        activities: clone(popupActivities),
+        readItems: ['vscode-issue-1'],
+        rateLimit: {
+          remaining: 632,
+          limit: 5000,
+          reset: new Date(now + 26 * minute).toISOString()
+        },
+        collapsedRepos: [],
+        lastError: null
+      },
+      session: {}
+    };
+  }
+
+  function dayMs() {
+    return 24 * hour;
+  }
+
+  const seed = scenarioData();
+  localStorage.setItem('devwatch:theme-preferences', JSON.stringify(themePreferences));
+  localStorage.setItem('activeTab', scenario === 'options-overview' ? 'repositories' : 'setup');
+
+  const originalConsoleError = console.error.bind(console);
+  console.error = function patchedConsoleError(...args) {
+    try {
+      document.documentElement.dataset.mockLastError = args
+        .map((arg) => {
+          if (arg instanceof Error) {
+            return arg.stack || arg.message;
+          }
+
+          return typeof arg === 'string' ? arg : JSON.stringify(arg);
+        })
+        .join(' | ')
+        .slice(0, 1000);
+    } catch {
+      document.documentElement.dataset.mockLastError = 'Unable to serialize console error';
+    }
+
+    originalConsoleError(...args);
+  };
+
+  window.addEventListener('error', (event) => {
+    document.documentElement.dataset.mockWindowError = String(event.error?.stack || event.message || event.error || '');
+  });
+
+  window.addEventListener('unhandledrejection', (event) => {
+    document.documentElement.dataset.mockRejection = String(event.reason?.stack || event.reason || '');
+  });
+
+  if (!window.matchMedia) {
+    window.matchMedia = function matchMedia(query) {
+      return {
+        matches: query === '(prefers-color-scheme: dark)',
+        media: query,
+        addListener: function () {},
+        removeListener: function () {},
+        addEventListener: function () {},
+        removeEventListener: function () {},
+        dispatchEvent: function () {
+          return false;
+        }
+      };
+    };
+  }
+
+  const storageListeners = new Set();
+
+  function createResponse(body, init) {
+    return new Response(body, init);
+  }
+
+  function normalizeKeys(keys, store) {
+    if (typeof keys === 'undefined' || keys === null) {
+      return clone(store);
+    }
+
+    if (Array.isArray(keys)) {
+      return keys.reduce((acc, key) => {
+        if (Object.prototype.hasOwnProperty.call(store, key)) {
+          acc[key] = clone(store[key]);
+        }
+        return acc;
+      }, {});
+    }
+
+    if (typeof keys === 'string') {
+      return Object.prototype.hasOwnProperty.call(store, keys)
+        ? { [keys]: clone(store[keys]) }
+        : {};
+    }
+
+    if (typeof keys === 'object') {
+      return Object.keys(keys).reduce((acc, key) => {
+        acc[key] = Object.prototype.hasOwnProperty.call(store, key)
+          ? clone(store[key])
+          : clone(keys[key]);
+        return acc;
+      }, {});
+    }
+
+    return {};
+  }
+
+  function finish(result, callback) {
+    if (typeof callback === 'function') {
+      callback(result);
+      return undefined;
+    }
+
+    return Promise.resolve(result);
+  }
+
+  function emitStorageChanges(areaName, changes) {
+    if (Object.keys(changes).length === 0) {
+      return;
+    }
+
+    storageListeners.forEach((listener) => {
+      listener(clone(changes), areaName);
+    });
+  }
+
+  function createStorageArea(areaName, initialStore) {
+    const store = clone(initialStore);
+
+    return {
+      get(keys, callback) {
+        return finish(normalizeKeys(keys, store), callback);
+      },
+
+      set(items, callback) {
+        const changes = {};
+
+        Object.entries(items || {}).forEach(([key, value]) => {
+          const oldValue = Object.prototype.hasOwnProperty.call(store, key) ? clone(store[key]) : undefined;
+          store[key] = clone(value);
+          changes[key] = {
+            oldValue,
+            newValue: clone(value)
+          };
+        });
+
+        emitStorageChanges(areaName, changes);
+        return finish(undefined, callback);
+      },
+
+      remove(keys, callback) {
+        const keyList = Array.isArray(keys) ? keys : [keys];
+        const changes = {};
+
+        keyList.forEach((key) => {
+          if (Object.prototype.hasOwnProperty.call(store, key)) {
+            changes[key] = {
+              oldValue: clone(store[key]),
+              newValue: undefined
+            };
+            delete store[key];
+          }
+        });
+
+        emitStorageChanges(areaName, changes);
+        return finish(undefined, callback);
+      },
+
+      clear(callback) {
+        const changes = Object.keys(store).reduce((acc, key) => {
+          acc[key] = {
+            oldValue: clone(store[key]),
+            newValue: undefined
+          };
+          return acc;
+        }, {});
+
+        Object.keys(store).forEach((key) => {
+          delete store[key];
+        });
+
+        emitStorageChanges(areaName, changes);
+        return finish(undefined, callback);
+      }
+    };
+  }
+
+  const localStorageArea = createStorageArea('local', seed.local);
+  const syncStorageArea = createStorageArea('sync', seed.sync);
+  const sessionStorageArea = createStorageArea('session', seed.session);
+
+  const originalFetch = window.fetch.bind(window);
+
+  window.fetch = async function fetchWithMocks(input, init) {
+    const requestUrl = typeof input === 'string' ? input : input.url;
+
+    if (requestUrl.includes('/repos/jonmartin721/devwatch-github/releases/latest')) {
+      return createResponse(JSON.stringify(releasePayload), {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+    }
+
+    if (requestUrl.includes('/search/repositories?')) {
+      return createResponse(JSON.stringify({ items: popularRepos }), {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json',
+          'X-RateLimit-Remaining': '4218',
+          'X-RateLimit-Reset': String(Math.floor((now + 41 * minute) / 1000))
+        }
+      });
+    }
+
+    return originalFetch(input, init);
+  };
+
+  const chromeApi = window.chrome || {};
+  chromeApi.storage = {
+    local: localStorageArea,
+    sync: syncStorageArea,
+    session: sessionStorageArea,
+    onChanged: {
+      addListener(listener) {
+        storageListeners.add(listener);
+      },
+      removeListener(listener) {
+        storageListeners.delete(listener);
+      }
+    }
+  };
+  chromeApi.runtime = {
+    ...(chromeApi.runtime || {}),
+    lastError: null,
+    getURL(path) {
+      const normalizedPath = String(path || '').replace(/^\/+/, '');
+      return new URL(normalizedPath, window.location.origin + '/').href;
+    },
+    async openOptionsPage() {
+      window.__mockOpenOptionsPage = true;
+    },
+    async sendMessage(message) {
+      if (message?.action === 'checkNow') {
+        return { ok: true };
+      }
+
+      return { ok: true };
+    }
+  };
+  chromeApi.tabs = {
+    ...(chromeApi.tabs || {}),
+    async create(details) {
+      window.__mockOpenedTab = details?.url || null;
+      return { id: 1, ...details };
+    }
+  };
+
+  window.chrome = chromeApi;
+  globalThis.chrome = chromeApi;
+
+  if (!navigator.clipboard || typeof navigator.clipboard.writeText !== 'function') {
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: {
+        async writeText(text) {
+          window.__mockClipboardText = text;
+        }
+      }
+    });
+  }
+
+  window.confirm = function confirm() {
+    return true;
+  };
+})();
diff --git a/shared/dom-optimizer.js b/shared/dom-optimizer.js
index 985c465..83f51c9 100644
--- a/shared/dom-optimizer.js
+++ b/shared/dom-optimizer.js
@@ -7,6 +7,7 @@ import { UI_CONFIG } from './config.js';
 import { SNOOZE_ICON, CHECK_ICON } from './icons.js';
 import { sanitizeImageUrl } from './sanitize.js';
 import {
+  getActivityTypeBadgeLabel as getSharedActivityTypeBadgeLabel,
   formatRelativeTime as formatSharedRelativeTime,
   getActivityTypeLabel as getSharedActivityTypeLabel,
   getSortedRepoGroups
@@ -460,6 +461,7 @@ class ActivityListRenderer {
     const sanitizedRepo = escapeHtml(activity.repo);
     const sanitizedType = escapeHtml(activity.type);
     const sanitizedTypeLabel = escapeHtml(getSharedActivityTypeLabel(activity.type));
+    const sanitizedTypeBadgeLabel = escapeHtml(getSharedActivityTypeBadgeLabel(activity.type));
     const sanitizedDescription = activity.description ? escapeHtml(activity.description) : '';
     const sanitizedAvatar = sanitizeImageUrl(activity.authorAvatar)
       || 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3C/svg%3E';
@@ -471,7 +473,7 @@ class ActivityListRenderer {
         <img src="${sanitizedAvatar}" class="activity-avatar" alt="${sanitizedAuthor}">
         <div class="activity-content">
           <div class="activity-header">
-            <span class="activity-type ${sanitizedType}">${sanitizedTypeLabel}</span>
+            <span class="activity-type ${sanitizedType}" title="${sanitizedTypeLabel}">${sanitizedTypeBadgeLabel}</span>
             <span class="activity-repo">${sanitizedRepo}</span>
           </div>
           <div class="activity-title">${sanitizedTitle}</div>
diff --git a/shared/error-handler.js b/shared/error-handler.js
index 8d63d0b..03fdc7f 100644
--- a/shared/error-handler.js
+++ b/shared/error-handler.js
@@ -229,7 +229,7 @@ export function showError(elementId, error, response = null, context = {}, durat
     </div>
   `;
 
-  element.style.display = 'block';
+  element.classList.remove('hidden');
   element.classList.add('toast-notification');
 
   // Add event listeners (CSP-compliant)
@@ -251,7 +251,7 @@ export function showError(elementId, error, response = null, context = {}, durat
       const elId = dismissBtn.dataset.elementId;
       const el = document.getElementById(elId);
       if (el) {
-        el.style.display = 'none';
+        el.classList.add('hidden');
       }
     });
   }
@@ -267,8 +267,8 @@ export function showError(elementId, error, response = null, context = {}, durat
   // Auto-hide after duration if specified
   if (duration > 0) {
     setTimeout(() => {
-      if (element.style.display !== 'none') {
-        element.style.display = 'none';
+      if (!element.classList.contains('hidden')) {
+        element.classList.add('hidden');
         element.classList.remove('toast-notification');
       }
     }, duration);
@@ -288,7 +288,7 @@ export function showError(elementId, error, response = null, context = {}, durat
 export function clearError(elementId) {
   const element = document.getElementById(elementId);
   if (element) {
-    element.style.display = 'none';
+    element.classList.add('hidden');
     element.innerHTML = '';
     element.classList.remove('toast-notification');
     element.removeAttribute('role');
@@ -315,13 +315,13 @@ export function showSuccess(elementId, message, duration = 3000) {
     </div>
   `;
 
-  element.style.display = 'block';
+  element.classList.remove('hidden');
   element.setAttribute('role', 'status');
   element.setAttribute('aria-live', 'polite');
 
   setTimeout(() => {
-    if (element.style.display !== 'none') {
-      element.style.display = 'none';
+    if (!element.classList.contains('hidden')) {
+      element.classList.add('hidden');
     }
   }, duration);
 }
diff --git a/shared/feed-presentation.js b/shared/feed-presentation.js
index f2a7961..68ba089 100644
--- a/shared/feed-presentation.js
+++ b/shared/feed-presentation.js
@@ -19,6 +19,21 @@ export function getActivityTypeLabel(type) {
   return labels[type] || type;
 }
 
+export function getActivityTypeBadgeLabel(type) {
+  const labels = {
+    pr: 'PR',
+    issue: 'Issue',
+    release: 'Release',
+    PullRequestEvent: 'PR',
+    IssuesEvent: 'Issue',
+    ReleaseEvent: 'Release',
+    PushEvent: 'Push',
+    IssueCommentEvent: 'Comment'
+  };
+
+  return labels[type] || type;
+}
+
 export function formatRelativeTime(timestamp) {
   const date = new Date(timestamp);
 
diff --git a/shared/github-repo-sources.js b/shared/github-repo-sources.js
new file mode 100644
index 0000000..e91d5d1
--- /dev/null
+++ b/shared/github-repo-sources.js
@@ -0,0 +1,116 @@
+import { createHeaders } from './github-api.js';
+
+export const GITHUB_REPO_SOURCE_CONFIG = {
+  watched: {
+    label: 'Watched',
+    modalTitle: 'Import Watched Repositories',
+    emptyState: 'No watched repositories found.'
+  },
+  starred: {
+    label: 'Starred',
+    modalTitle: 'Import Starred Repositories',
+    emptyState: 'No starred repositories found.'
+  },
+  participating: {
+    label: 'Participating',
+    modalTitle: 'Import Participating Repositories',
+    emptyState: 'No participating repositories found.'
+  },
+  mine: {
+    label: 'Mine',
+    modalTitle: 'Import My Repositories',
+    emptyState: 'No repositories found in your account yet.'
+  }
+};
+
+const REPO_SOURCE_ENDPOINTS = {
+  watched: 'https://api.github.com/user/subscriptions',
+  starred: 'https://api.github.com/user/starred',
+  participating: 'https://api.github.com/user/repos?affiliation=collaborator,organization_member&sort=pushed',
+  mine: 'https://api.github.com/user/repos?type=all&sort=updated'
+};
+
+function normalizeGitHubRepoSourceItem(repo) {
+  return {
+    fullName: repo.full_name,
+    description: repo.description || 'No description provided',
+    language: repo.language || 'Unknown',
+    stars: repo.stargazers_count || 0,
+    forks: repo.forks_count || 0,
+    updatedAt: repo.updated_at || repo.pushed_at
+  };
+}
+
+function buildGitHubRepoSourceError(status) {
+  if (status === 401) {
+    return 'GitHub sign-in expired or was revoked';
+  }
+
+  if (status === 403) {
+    return 'Rate limit exceeded or insufficient permissions';
+  }
+
+  return `GitHub API error: ${status}`;
+}
+
+export function getGitHubRepoSourceConfig(type) {
+  return GITHUB_REPO_SOURCE_CONFIG[type] || {
+    label: 'Repositories',
+    modalTitle: 'Import Repositories',
+    emptyState: 'No repositories found.'
+  };
+}
+
+export async function fetchGitHubRepoSource(type, token, options = {}) {
+  const url = REPO_SOURCE_ENDPOINTS[type];
+  if (!url) {
+    throw new Error(`Invalid import type: ${type}`);
+  }
+
+  const headers = createHeaders(token);
+  const allRepos = [];
+  const perPage = options.perPage ?? 100;
+  const maxPages = options.maxPages ?? 100;
+  const maxRepos = options.maxRepos ?? 10000;
+  const timeLimitMs = options.timeLimitMs ?? 60000;
+
+  let page = options.page ?? 1;
+  let hasMorePages = true;
+  const startTime = Date.now();
+
+  while (hasMorePages && page <= maxPages && allRepos.length < maxRepos) {
+    if (Date.now() - startTime > timeLimitMs) {
+      break;
+    }
+
+    const urlObj = new URL(url);
+    urlObj.searchParams.set('per_page', String(perPage));
+    urlObj.searchParams.set('page', String(page));
+
+    const response = await fetch(urlObj.toString(), { headers });
+
+    if (!response.ok) {
+      throw new Error(buildGitHubRepoSourceError(response.status));
+    }
+
+    const repos = await response.json();
+    if (!Array.isArray(repos) || repos.length === 0) {
+      break;
+    }
+
+    allRepos.push(...repos.map(normalizeGitHubRepoSourceItem));
+
+    if (allRepos.length >= maxRepos) {
+      break;
+    }
+
+    const linkHeader = response.headers.get('Link');
+    if (!linkHeader || !linkHeader.includes('rel="next"')) {
+      hasMorePages = false;
+    } else {
+      page++;
+    }
+  }
+
+  return allRepos.slice(0, maxRepos);
+}
diff --git a/shared/offline-manager.js b/shared/offline-manager.js
index a3cfb90..88bf2ec 100644
--- a/shared/offline-manager.js
+++ b/shared/offline-manager.js
@@ -40,12 +40,12 @@ export function showOfflineStatus(elementId, offline = isOffline()) {
         </div>
       </div>
     `;
-    element.style.display = 'block';
-    element.className = 'offline-message';
+    element.classList.remove('hidden', 'toast-notification');
+    element.classList.add('offline-message');
   } else {
     element.innerHTML = '';
-    element.style.display = 'none';
-    element.className = '';
+    element.classList.remove('offline-message', 'toast-notification');
+    element.classList.add('hidden');
   }
 }
 
@@ -234,4 +234,4 @@ export async function getStorageUsage() {
       itemCount: 0
     };
   }
-}
\ No newline at end of file
+}
diff --git a/shared/onboarding.js b/shared/onboarding.js
index 1c387d5..f008e0d 100644
--- a/shared/onboarding.js
+++ b/shared/onboarding.js
@@ -6,6 +6,66 @@
 import { getAccessToken } from './storage-helpers.js';
 import { createHeaders } from './github-api.js';
 
+const CURATED_POPULAR_REPOS = [
+    {
+        owner: { login: 'microsoft' },
+        name: 'vscode',
+        description: 'Visual Studio Code - lightweight but powerful source code editor',
+        language: 'TypeScript',
+        stargazers_count: 150000
+    },
+    {
+        owner: { login: 'facebook' },
+        name: 'react',
+        description: 'A declarative, efficient, and flexible JavaScript library for building user interfaces',
+        language: 'JavaScript',
+        stargazers_count: 220000
+    },
+    {
+        owner: { login: 'vercel' },
+        name: 'next.js',
+        description: 'The React framework for the web',
+        language: 'TypeScript',
+        stargazers_count: 130000
+    },
+    {
+        owner: { login: 'microsoft' },
+        name: 'TypeScript',
+        description: 'TypeScript is a superset of JavaScript that compiles to clean JavaScript output',
+        language: 'TypeScript',
+        stargazers_count: 100000
+    },
+    {
+        owner: { login: 'home-assistant' },
+        name: 'core',
+        description: 'Open source home automation that puts local control and privacy first',
+        language: 'Python',
+        stargazers_count: 80000
+    },
+    {
+        owner: { login: 'supabase' },
+        name: 'supabase',
+        description: 'The open source Firebase alternative',
+        language: 'TypeScript',
+        stargazers_count: 90000
+    }
+];
+
+const POPULAR_REPO_BLOCKLIST = [
+    /(^|\/)awesome([-/]|$)/i,
+    /roadmap/i,
+    /interview/i,
+    /\bbook(s)?\b/i,
+    /primer/i,
+    /curriculum/i,
+    /collection/i,
+    /resources/i,
+    /system[\s-]?design/i,
+    /free[-\s]?programming/i,
+    /developer[-\s]?roadmap/i,
+    /build[-\s]?your[-\s]?own/i
+];
+
 export class OnboardingManager {
     static STORAGE_KEY = 'onboarding_state';
     static STEPS = ['welcome', 'token', 'repos', 'categories', 'complete'];
@@ -131,8 +191,10 @@ export class OnboardingManager {
             const headers = storedToken
                 ? createHeaders(storedToken)
                 : { 'Accept': 'application/vnd.github.v3+json' };
-
-            const apiUrl = 'https://api.github.com/search/repositories?q=stars:1000..50000&sort=stars&order=desc&per_page=20';
+            const recentCutoff = new Date();
+            recentCutoff.setFullYear(recentCutoff.getFullYear() - 1);
+            const recentCutoffDate = recentCutoff.toISOString().slice(0, 10);
+            const apiUrl = `https://api.github.com/search/repositories?q=${encodeURIComponent(`stars:>15000 archived:false fork:false is:public pushed:>${recentCutoffDate}`)}&sort=stars&order=desc&per_page=24`;
 
             let response;
             let retryCount = 0;
@@ -234,77 +296,62 @@ export class OnboardingManager {
             const data = await response.json();
             const repos = data.items || [];
 
-            // Filter to get 4 diverse repositories
             const filteredRepos = this.getFilteredRepos(repos);
-            const finalRepos = filteredRepos.slice(0, 3);
+            const finalRepos = this.withCuratedBackfill(filteredRepos).slice(0, 3);
 
             return finalRepos;
 
         } catch (_error) {
-            // Fallback to static popular repos - diverse, well-maintained projects
-            const fallbackRepos = [
-                {
-                    owner: { login: 'microsoft' },
-                    name: 'vscode',
-                    description: 'Visual Studio Code - lightweight but powerful source code editor',
-                    language: 'TypeScript',
-                    stargazers_count: 150000
-                },
-                {
-                    owner: { login: 'facebook' },
-                    name: 'react',
-                    description: 'A declarative, efficient, and flexible JavaScript library for building user interfaces',
-                    language: 'JavaScript',
-                    stargazers_count: 220000
-                },
-                {
-                    owner: { login: 'openai' },
-                    name: 'whisper',
-                    description: 'Robust Speech Recognition via Large-Scale Weak Supervision',
-                    language: 'Python',
-                    stargazers_count: 60000
-                },
-                {
-                    owner: { login: 'langchain-ai' },
-                    name: 'langchain',
-                    description: 'Building applications with LLMs through composability',
-                    language: 'Python',
-                    stargazers_count: 85000
-                }
-            ];
-
-            return fallbackRepos;
+            return CURATED_POPULAR_REPOS.slice(0, 3);
         }
     }
 
     getFilteredRepos(repos) {
-        // Filter out very large projects and aim for diversity
-        const excludePatterns = [
-            /github/i,  // GitHub itself
-            /chromium/i, // Very large OS projects
-            /android/i, // Very large OS projects
-        ];
-
-        const filtered = repos.filter(repo => {
-            const fullName = `${repo.owner.login}/${repo.name}`.toLowerCase();
-
-            // Exclude by patterns
-            if (excludePatterns.some(pattern => pattern.test(fullName))) {
+        const seenRepos = new Set();
+
+        return (Array.isArray(repos) ? repos : []).filter((repo) => {
+            const owner = repo?.owner?.login || '';
+            const name = repo?.name || '';
+            const fullName = `${owner}/${name}`.trim();
+            const normalizedFullName = fullName.toLowerCase();
+            const haystack = `${normalizedFullName} ${repo?.description || ''}`.toLowerCase();
+            const language = String(repo?.language || '').trim();
+
+            if (!owner || !name || seenRepos.has(normalizedFullName)) {
+                return false;
+            }
+
+            if (!language || language.toLowerCase() === 'markdown') {
                 return false;
             }
 
-            // Exclude extremely large projects (over 75k stars)
-            if (repo.stargazers_count > 75000) {
+            if (POPULAR_REPO_BLOCKLIST.some(pattern => pattern.test(haystack))) {
                 return false;
             }
 
+            seenRepos.add(normalizedFullName);
             return true;
         });
+    }
+
+    withCuratedBackfill(repos) {
+        const uniqueRepos = [];
+        const seenRepos = new Set();
 
-        // Shuffle for variety and take first 4
-        const result = this.shuffleArray(filtered);
+        [...(Array.isArray(repos) ? repos : []), ...CURATED_POPULAR_REPOS].forEach((repo) => {
+            const owner = repo?.owner?.login || '';
+            const name = repo?.name || '';
+            const fullName = `${owner}/${name}`.trim().toLowerCase();
+
+            if (!fullName || seenRepos.has(fullName)) {
+                return;
+            }
+
+            seenRepos.add(fullName);
+            uniqueRepos.push(repo);
+        });
 
-        return result;
+        return uniqueRepos;
     }
 
     shuffleArray(array) {
diff --git a/shared/repo-service.js b/shared/repo-service.js
index 41bed20..5732c82 100644
--- a/shared/repo-service.js
+++ b/shared/repo-service.js
@@ -106,19 +106,36 @@ export async function normalizeRepoInput(rawInput) {
 }
 
 export async function validateWatchedRepo(repo, githubToken) {
-  if (!githubToken) {
-    return {
-      valid: false,
-      error: 'No GitHub connection found. Connect GitHub first.'
-    };
-  }
-
   const basicResult = await validateRepository(repo, githubToken);
 
   if (!basicResult.valid) {
+    if (!githubToken) {
+      const publicLookupError = String(basicResult.error || '').toLowerCase();
+      if (
+        publicLookupError.includes('not found')
+        || publicLookupError.includes('access denied')
+        || publicLookupError.includes('sign-in expired')
+        || publicLookupError.includes('unauthorized')
+      ) {
+        return {
+          valid: false,
+          error: `Repository "${repo}" was not found publicly. If it's private, connect GitHub and try again.`
+        };
+      }
+    }
     return basicResult;
   }
 
+  if (!githubToken) {
+    return {
+      valid: true,
+      metadata: {
+        ...basicResult.metadata,
+        latestRelease: null
+      }
+    };
+  }
+
   try {
     const headers = createHeaders(githubToken);
     const releasesResponse = await fetch(`https://api.github.com/repos/${repo}/releases/latest`, { headers });
diff --git a/shared/storage-helpers.js b/shared/storage-helpers.js
index b3a6d6d..e27d41a 100644
--- a/shared/storage-helpers.js
+++ b/shared/storage-helpers.js
@@ -45,6 +45,28 @@ function clearLegacyAuthStorage(force = false) {
   });
 }
 
+function getSessionAuthStorageItem() {
+  if (!isChromeExtension() || !chrome.storage.session?.get) {
+    return Promise.resolve(null);
+  }
+
+  return new Promise((resolve) => {
+    chrome.storage.session.get([AUTH_SESSION_CACHE_KEY], (result) => {
+      resolve(result?.[AUTH_SESSION_CACHE_KEY] ?? null);
+    });
+  });
+}
+
+function clearSessionAuthStorage() {
+  if (!isChromeExtension() || !chrome.storage.session?.remove) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve) => {
+    chrome.storage.session.remove([AUTH_SESSION_CACHE_KEY], resolve);
+  });
+}
+
 /**
  * Get an item from chrome.storage.sync with Promise API
  * @param {string} key - Storage key
@@ -244,20 +266,24 @@ export function getExcludedRepos(mutedRepos = [], snoozedRepos = []) {
 
 /**
  * Get the stored GitHub auth session
- * Auth sessions are kept in session storage only so they do not persist to disk.
- * Legacy encrypted local storage is cleared opportunistically on access.
+ * Auth sessions are kept in persistent local storage for this browser profile.
+ * Legacy session and encrypted auth data are migrated/cleared opportunistically on access.
  * @returns {Promise<Object|null>} Auth session or null
  */
 export async function getAuthSession() {
-  if (isChromeExtension() && chrome.storage.session) {
-    const cachedSession = await new Promise(resolve => {
-      chrome.storage.session.get([AUTH_SESSION_CACHE_KEY], result => resolve(result[AUTH_SESSION_CACHE_KEY]));
-    });
+  const persistedSession = await getLocalItem(AUTH_SESSION_CACHE_KEY, null);
+  if (persistedSession && typeof persistedSession === 'object') {
+    await clearSessionAuthStorage();
+    await clearLegacyAuthStorage();
+    return persistedSession;
+  }
 
-    if (cachedSession && typeof cachedSession === 'object') {
-      await clearLegacyAuthStorage();
-      return cachedSession;
-    }
+  const sessionSession = await getSessionAuthStorageItem();
+  if (sessionSession && typeof sessionSession === 'object') {
+    await setLocalItem(AUTH_SESSION_CACHE_KEY, sessionSession);
+    await clearSessionAuthStorage();
+    await clearLegacyAuthStorage(true);
+    return sessionSession;
   }
 
   await clearLegacyAuthStorage();
@@ -275,13 +301,8 @@ export async function setAuthSession(session) {
     return;
   }
 
-  if (!isChromeExtension() || !chrome.storage.session) {
-    throw new Error('Session storage is unavailable for GitHub sign-in.');
-  }
-
-  await new Promise(resolve => {
-    chrome.storage.session.set({ [AUTH_SESSION_CACHE_KEY]: session }, resolve);
-  });
+  await setLocalItem(AUTH_SESSION_CACHE_KEY, session);
+  await clearSessionAuthStorage();
   await clearLegacyAuthStorage(true);
 }
 
@@ -290,12 +311,13 @@ export async function setAuthSession(session) {
  * @returns {Promise<void>}
  */
 export async function clearAuthSession() {
-  if (isChromeExtension() && chrome.storage.session) {
+  if (isChromeExtension() && chrome.storage.local?.remove) {
     await new Promise(resolve => {
-      chrome.storage.session.remove([AUTH_SESSION_CACHE_KEY], resolve);
+      chrome.storage.local.remove([AUTH_SESSION_CACHE_KEY], resolve);
     });
   }
 
+  await clearSessionAuthStorage();
   await clearLegacyAuthStorage(true);
 }
 
diff --git a/shared/theme-boot.js b/shared/theme-boot.js
new file mode 100644
index 0000000..9590e82
--- /dev/null
+++ b/shared/theme-boot.js
@@ -0,0 +1,147 @@
+(() => {
+  const THEME_CACHE_KEY = 'devwatch:theme-preferences';
+  const DEFAULT_THEME = 'system';
+  const DEFAULT_COLOR_THEME = 'polar';
+  const DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';
+
+  let mediaQueryList = null;
+  let currentTheme = DEFAULT_THEME;
+  let currentColorTheme = DEFAULT_COLOR_THEME;
+
+  function normalizeTheme(theme) {
+    return ['light', 'dark', 'system'].includes(theme) ? theme : DEFAULT_THEME;
+  }
+
+  function normalizeColorTheme(colorTheme) {
+    return typeof colorTheme === 'string' && colorTheme.length > 0
+      ? colorTheme
+      : DEFAULT_COLOR_THEME;
+  }
+
+  function getMediaQueryList() {
+    if (mediaQueryList) {
+      return mediaQueryList;
+    }
+
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      mediaQueryList = window.matchMedia(DARK_MEDIA_QUERY);
+    }
+
+    return mediaQueryList;
+  }
+
+  function prefersDarkMode() {
+    return Boolean(getMediaQueryList()?.matches);
+  }
+
+  function readCachedPreferences() {
+    if (typeof localStorage === 'undefined') {
+      return null;
+    }
+
+    try {
+      const rawValue = localStorage.getItem(THEME_CACHE_KEY);
+      if (!rawValue) {
+        return null;
+      }
+
+      const parsedValue = JSON.parse(rawValue);
+      if (!parsedValue || typeof parsedValue !== 'object') {
+        return null;
+      }
+
+      return {
+        theme: normalizeTheme(parsedValue.theme),
+        colorTheme: normalizeColorTheme(parsedValue.colorTheme)
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  function writeCachedPreferences(theme, colorTheme) {
+    if (typeof localStorage === 'undefined') {
+      return;
+    }
+
+    try {
+      localStorage.setItem(THEME_CACHE_KEY, JSON.stringify({
+        theme,
+        colorTheme
+      }));
+    } catch {
+      // Ignore localStorage write failures. The live theme still applies.
+    }
+  }
+
+  function shouldUseDarkMode(theme) {
+    if (theme === 'dark') {
+      return true;
+    }
+
+    if (theme === 'light') {
+      return false;
+    }
+
+    return prefersDarkMode();
+  }
+
+  function applyThemeToTarget(target) {
+    if (!target) {
+      return;
+    }
+
+    target.classList.toggle('dark-mode', shouldUseDarkMode(currentTheme));
+    target.setAttribute('data-color-theme', currentColorTheme);
+  }
+
+  function syncThemeToDocument(theme = currentTheme, colorTheme = currentColorTheme) {
+    currentTheme = normalizeTheme(theme);
+    currentColorTheme = normalizeColorTheme(colorTheme);
+
+    applyThemeToTarget(document.documentElement);
+
+    if (document.documentElement) {
+      document.documentElement.style.colorScheme = shouldUseDarkMode(currentTheme) ? 'dark' : 'light';
+    }
+
+    applyThemeToTarget(document.body);
+  }
+
+  const cachedPreferences = readCachedPreferences();
+  syncThemeToDocument(
+    cachedPreferences?.theme ?? DEFAULT_THEME,
+    cachedPreferences?.colorTheme ?? DEFAULT_COLOR_THEME
+  );
+
+  if (!document.body && typeof window !== 'undefined' && typeof window.MutationObserver !== 'undefined') {
+    const observer = new window.MutationObserver(() => {
+      if (!document.body) {
+        return;
+      }
+
+      syncThemeToDocument();
+      observer.disconnect();
+    });
+
+    observer.observe(document.documentElement, { childList: true });
+  }
+
+  getMediaQueryList()?.addEventListener?.('change', () => {
+    if (currentTheme === 'system') {
+      syncThemeToDocument();
+    }
+  });
+
+  if (typeof chrome === 'undefined' || !chrome.storage?.sync?.get) {
+    return;
+  }
+
+  chrome.storage.sync.get(['theme', 'colorTheme'], (result) => {
+    const theme = normalizeTheme(result?.theme ?? cachedPreferences?.theme ?? DEFAULT_THEME);
+    const colorTheme = normalizeColorTheme(result?.colorTheme ?? cachedPreferences?.colorTheme ?? DEFAULT_COLOR_THEME);
+
+    syncThemeToDocument(theme, colorTheme);
+    writeCachedPreferences(theme, colorTheme);
+  });
+})();
diff --git a/shared/utils.js b/shared/utils.js
index 7f30d18..45bf5a2 100644
--- a/shared/utils.js
+++ b/shared/utils.js
@@ -2,19 +2,78 @@
  * Shared utility functions used across the extension
  */
 
+const THEME_CACHE_KEY = 'devwatch:theme-preferences';
+const DEFAULT_THEME = 'system';
+const DEFAULT_COLOR_THEME = 'polar';
+
+function getThemeTargets() {
+  if (typeof document === 'undefined') {
+    return [];
+  }
+
+  return [document.documentElement, document.body].filter(Boolean);
+}
+
+function prefersDarkMode() {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return false;
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+function updateThemeCache(updates) {
+  if (typeof localStorage === 'undefined') {
+    return;
+  }
+
+  let cachedPreferences = {
+    theme: DEFAULT_THEME,
+    colorTheme: DEFAULT_COLOR_THEME
+  };
+
+  try {
+    const rawValue = localStorage.getItem(THEME_CACHE_KEY);
+    if (rawValue) {
+      const parsedValue = JSON.parse(rawValue);
+      if (parsedValue && typeof parsedValue === 'object') {
+        cachedPreferences = {
+          ...cachedPreferences,
+          ...parsedValue
+        };
+      }
+    }
+  } catch {
+    // Ignore invalid cache contents and overwrite with the new values below.
+  }
+
+  try {
+    localStorage.setItem(THEME_CACHE_KEY, JSON.stringify({
+      ...cachedPreferences,
+      ...updates
+    }));
+  } catch {
+    // Ignore localStorage write failures. Live theme application still succeeds.
+  }
+}
+
 /**
  * Apply theme based on user preference
  * @param {string} theme - 'light', 'dark', or 'system'
  */
 export function applyTheme(theme) {
-  if (theme === 'system') {
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    document.body.classList.toggle('dark-mode', prefersDark);
-  } else if (theme === 'dark') {
-    document.body.classList.add('dark-mode');
-  } else {
-    document.body.classList.remove('dark-mode');
+  const normalizedTheme = theme || DEFAULT_THEME;
+  const useDarkMode = normalizedTheme === 'dark' || (normalizedTheme === 'system' && prefersDarkMode());
+
+  getThemeTargets().forEach((target) => {
+    target.classList.toggle('dark-mode', useDarkMode);
+  });
+
+  if (typeof document !== 'undefined' && document.documentElement) {
+    document.documentElement.style.colorScheme = useDarkMode ? 'dark' : 'light';
   }
+
+  updateThemeCache({ theme: normalizedTheme });
 }
 
 /**
@@ -22,7 +81,13 @@ export function applyTheme(theme) {
  * @param {string} colorTheme - Theme name: 'polar', 'graphite', 'nightfall', 'obsidian', 'sand', 'terminal-ledger'
  */
 export function applyColorTheme(colorTheme) {
-  document.body.setAttribute('data-color-theme', colorTheme || 'polar');
+  const normalizedColorTheme = colorTheme || DEFAULT_COLOR_THEME;
+
+  getThemeTargets().forEach((target) => {
+    target.setAttribute('data-color-theme', normalizedColorTheme);
+  });
+
+  updateThemeCache({ colorTheme: normalizedColorTheme });
 }
 
 /**
diff --git a/tests/accessibility.test.js b/tests/accessibility.test.js
index ca2d5d9..1c8d400 100644
--- a/tests/accessibility.test.js
+++ b/tests/accessibility.test.js
@@ -74,10 +74,13 @@ describe('Options accessibility', () => {
     expect(getPanel('setup')).toHaveAttribute('hidden');
   });
 
-  it('supports arrow-key navigation between actual settings tabs', () => {
+  it('supports arrow-key navigation in the shipped tab order', () => {
     setupTabNavigation();
 
+    const tabs = Array.from(document.querySelectorAll('[role="tab"]'));
     const setupTab = getTab('setup');
+    const setupIndex = tabs.indexOf(setupTab);
+    const expectedNextTab = tabs[(setupIndex + 1) % tabs.length];
 
     setupTab.focus();
     setupTab.dispatchEvent(new KeyboardEvent('keydown', {
@@ -85,32 +88,35 @@ describe('Options accessibility', () => {
       bubbles: true
     }));
 
-    expect(document.activeElement).toBe(getTab('repositories'));
-    expect(getTab('repositories')).toHaveAttribute('aria-selected', 'true');
-    expect(getTab('repositories')).toHaveAttribute('tabindex', '0');
-    expect(getPanel('repositories')).not.toHaveAttribute('hidden');
+    expect(document.activeElement).toBe(expectedNextTab);
+    expect(expectedNextTab).toHaveAttribute('aria-selected', 'true');
+    expect(expectedNextTab).toHaveAttribute('tabindex', '0');
+    expect(getPanel(expectedNextTab.dataset.tab)).not.toHaveAttribute('hidden');
     expect(getPanel('setup')).toHaveAttribute('hidden');
-    expect(localStorage.getItem('activeTab')).toBe('repositories');
+    expect(localStorage.getItem('activeTab')).toBe(expectedNextTab.dataset.tab);
   });
 
   it('supports Home and End keys across the vertical tablist', () => {
     setupTabNavigation();
 
+    const tabs = Array.from(document.querySelectorAll('[role="tab"]'));
+    const firstTab = tabs[0];
+    const lastTab = tabs[tabs.length - 1];
     const setupTab = getTab('setup');
 
     setupTab.dispatchEvent(new KeyboardEvent('keydown', {
       key: 'End',
       bubbles: true
     }));
-    expect(document.activeElement).toBe(getTab('help'));
-    expect(getTab('help')).toHaveAttribute('aria-selected', 'true');
+    expect(document.activeElement).toBe(lastTab);
+    expect(lastTab).toHaveAttribute('aria-selected', 'true');
 
-    getTab('help').dispatchEvent(new KeyboardEvent('keydown', {
+    lastTab.dispatchEvent(new KeyboardEvent('keydown', {
       key: 'Home',
       bubbles: true
     }));
-    expect(document.activeElement).toBe(getTab('setup'));
-    expect(getTab('setup')).toHaveAttribute('aria-selected', 'true');
+    expect(document.activeElement).toBe(firstTab);
+    expect(firstTab).toHaveAttribute('aria-selected', 'true');
   });
 
   it('lets setup-step links switch tabs without losing keyboard focus', () => {
diff --git a/tests/activity-item-view.test.js b/tests/activity-item-view.test.js
index 59f1d46..ed5065a 100644
--- a/tests/activity-item-view.test.js
+++ b/tests/activity-item-view.test.js
@@ -33,7 +33,9 @@ describe('activity-item-view', () => {
     });
 
     expect(html).toContain('activity-item unread');
-    expect(html).toContain('Pull Request');
+    expect(html).toContain('>PR<');
+    expect(html).toContain('title="Pull Request"');
+    expect(html).toContain('aria-label="Open Pull Request: Improve cache handling by octocat"');
     expect(html).toContain('5m ago');
     expect(html).toContain('data-action="mark-read"');
     expect(html).toContain('src="https://avatars.githubusercontent.com/u/1?v=4"');
@@ -54,7 +56,7 @@ describe('activity-item-view', () => {
     });
 
     expect(html).toContain('activity-item read');
-    expect(html).toContain('Issue');
+    expect(html).toContain('>Issue<');
     expect(html).not.toContain('mark-read-btn');
   });
 
diff --git a/tests/background.test.js b/tests/background.test.js
index 9a85e8b..78bc10c 100644
--- a/tests/background.test.js
+++ b/tests/background.test.js
@@ -208,6 +208,29 @@ describe('Background Service Worker', () => {
       );
     });
 
+    test('uses unauthenticated headers when no token is available', async () => {
+      fetch.mockResolvedValue({
+        ok: true,
+        headers: { get: () => null },
+        json: async () => []
+      });
+
+      await fetchRepoActivity(mockRepo, null, mockSince, {
+        prs: true,
+        issues: false,
+        releases: false
+      });
+
+      expect(fetch).toHaveBeenCalledWith(
+        expect.stringContaining('/pulls'),
+        expect.objectContaining({
+          headers: {
+            Accept: 'application/vnd.github.v3+json'
+          }
+        })
+      );
+    });
+
     test('filters activities by since date', async () => {
 
       const oldPR = {
@@ -853,24 +876,17 @@ describe('Background Service Worker', () => {
         callback(result);
       });
 
-      chrome.storage.session.get.mockImplementation((keys, callback) => {
-        const result = {};
-        if (Array.isArray(keys) && keys.includes('githubAuthSession')) {
-          result.githubAuthSession = { accessToken: mockToken };
-        } else if (keys === 'githubAuthSession') {
-          result.githubAuthSession = { accessToken: mockToken };
-        }
-        callback(result);
-      });
-
       chrome.storage.local.get.mockImplementation((keys, callback) => {
         const result = {};
         if (Array.isArray(keys)) {
           keys.forEach(key => {
-            if (key === 'encryptedGithubAuthSession') result[key] = null;
+            if (key === 'githubAuthSession') result[key] = { accessToken: mockToken };
+            else if (key === 'encryptedGithubAuthSession') result[key] = null;
             else if (key === 'activities') result[key] = [];
             else if (key === 'rateLimit') result[key] = null;
           });
+        } else if (keys === 'githubAuthSession') {
+          result.githubAuthSession = { accessToken: mockToken };
         } else if (keys === 'encryptedGithubAuthSession') {
           result.encryptedGithubAuthSession = null;
         }
@@ -888,22 +904,35 @@ describe('Background Service Worker', () => {
       });
     });
 
-    test('returns early if no token found', async () => {
-      allowUnexpectedConsole('warn');
-      chrome.storage.session.get.mockImplementation((keys, callback) => {
+    test('continues checking public repositories when no token is found', async () => {
+      chrome.storage.local.get.mockImplementation((keys, callback) => {
         const result = {};
-        if (typeof keys === 'string' && keys === 'githubAuthSession') {
-          result.githubAuthSession = null;
-        } else if (Array.isArray(keys) && keys.includes('githubAuthSession')) {
+        if (Array.isArray(keys)) {
+          keys.forEach(key => {
+            if (key === 'githubAuthSession') result[key] = null;
+            else if (key === 'activities') result[key] = [];
+            else if (key === 'rateLimit') result[key] = null;
+          });
+        } else if (keys === 'githubAuthSession') {
           result.githubAuthSession = null;
+        } else if (keys === 'activities') {
+          result.activities = [];
+        } else if (keys === 'rateLimit') {
+          result.rateLimit = null;
         }
         callback(result);
       });
 
       await checkGitHubActivity();
 
-      // Verify that no fetch was made
-      expect(fetch).not.toHaveBeenCalled();
+      expect(fetch).toHaveBeenCalled();
+      expect(fetch.mock.calls[0][1]).toEqual(
+        expect.objectContaining({
+          headers: {
+            Accept: 'application/vnd.github.v3+json'
+          }
+        })
+      );
     });
 
     test('returns early if no watched repos', async () => {
@@ -967,15 +996,12 @@ describe('Background Service Worker', () => {
         callback(result);
       });
 
-      chrome.storage.session.get.mockImplementation((keys, callback) => {
-        callback({ githubAuthSession: { accessToken: mockToken } });
-      });
-
       chrome.storage.local.get.mockImplementation((keys, callback) => {
         const result = {};
         if (Array.isArray(keys)) {
           keys.forEach(key => {
-            if (key === 'activities') result[key] = [];
+            if (key === 'githubAuthSession') result[key] = { accessToken: mockToken };
+            else if (key === 'activities') result[key] = [];
             else if (key === 'rateLimit') result[key] = null;
             else if (key === 'watchedRepos') {
               result[key] = [
diff --git a/tests/dom-optimizer.test.js b/tests/dom-optimizer.test.js
index f3d4f65..ca07afc 100644
--- a/tests/dom-optimizer.test.js
+++ b/tests/dom-optimizer.test.js
@@ -464,7 +464,8 @@ describe('ActivityListRenderer', () => {
       const html = renderer.generateSingleActivityHTML(activity);
 
       expect(html).toContain('Test PR');
-      expect(html).toContain('Pull Request');
+      expect(html).toContain('>PR<');
+      expect(html).toContain('title="Pull Request"');
       expect(html).toContain('Test description');
       expect(html).toContain('https://github.com/test/repo/pull/1');
     });
diff --git a/tests/error-handler.test.js b/tests/error-handler.test.js
index 72cdab2..4858428 100644
--- a/tests/error-handler.test.js
+++ b/tests/error-handler.test.js
@@ -14,8 +14,8 @@ import {
 
 // Mock DOM
 document.body.innerHTML = `
-  <div id="errorMessage" style="display: none;"></div>
-  <div id="statusMessage" style="display: none;"></div>
+  <div id="errorMessage" class="hidden"></div>
+  <div id="statusMessage" class="hidden"></div>
 `;
 
 describe('Error Handler', () => {
@@ -148,7 +148,7 @@ describe('Error Handler', () => {
       showError('errorMessage', error);
 
       const element = document.getElementById('errorMessage');
-      expect(element.style.display).toBe('block');
+      expect(element.classList.contains('hidden')).toBe(false);
       expect(element.innerHTML).toContain('Unexpected Error');
       expect(element.innerHTML).toContain('Something went wrong');
       // ARIA attributes are on the inner error-toast div, not the container
@@ -162,10 +162,10 @@ describe('Error Handler', () => {
       showError('errorMessage', error, null, {}, 1000);
 
       const element = document.getElementById('errorMessage');
-      expect(element.style.display).toBe('block');
+      expect(element.classList.contains('hidden')).toBe(false);
 
       jest.advanceTimersByTime(1000);
-      expect(element.style.display).toBe('none');
+      expect(element.classList.contains('hidden')).toBe(true);
     });
 
     it('should not auto-hide if duration is 0', () => {
@@ -174,10 +174,10 @@ describe('Error Handler', () => {
       showError('errorMessage', error, null, {}, 0);
 
       const element = document.getElementById('errorMessage');
-      expect(element.style.display).toBe('block');
+      expect(element.classList.contains('hidden')).toBe(false);
 
       jest.advanceTimersByTime(10000);
-      expect(element.style.display).toBe('block');
+      expect(element.classList.contains('hidden')).toBe(false);
     });
 
     it('should include dismiss button', () => {
@@ -212,12 +212,12 @@ describe('Error Handler', () => {
       // First show an error
       showError('errorMessage', new Error('test'));
       let element = document.getElementById('errorMessage');
-      expect(element.style.display).toBe('block');
+      expect(element.classList.contains('hidden')).toBe(false);
 
       // Then clear it
       clearError('errorMessage');
       element = document.getElementById('errorMessage');
-      expect(element.style.display).toBe('none');
+      expect(element.classList.contains('hidden')).toBe(true);
       expect(element.innerHTML).toBe('');
       expect(element).not.toHaveAttribute('role');
       expect(element).not.toHaveAttribute('aria-live');
@@ -243,7 +243,7 @@ describe('Error Handler', () => {
       showSuccess('statusMessage', 'Operation completed successfully');
 
       const element = document.getElementById('statusMessage');
-      expect(element.style.display).toBe('block');
+      expect(element.classList.contains('hidden')).toBe(false);
       expect(element.innerHTML).toContain('Success');
       expect(element.innerHTML).toContain('Operation completed successfully');
       expect(element).toHaveAttribute('role', 'status');
@@ -254,10 +254,10 @@ describe('Error Handler', () => {
       showSuccess('statusMessage', 'Success!', 1000);
 
       const element = document.getElementById('statusMessage');
-      expect(element.style.display).toBe('block');
+      expect(element.classList.contains('hidden')).toBe(false);
 
       jest.advanceTimersByTime(1000);
-      expect(element.style.display).toBe('none');
+      expect(element.classList.contains('hidden')).toBe(true);
     });
 
     it('should handle missing element gracefully', () => {
diff --git a/tests/import-controller.test.js b/tests/import-controller.test.js
index 788f931..e06e6e9 100644
--- a/tests/import-controller.test.js
+++ b/tests/import-controller.test.js
@@ -45,6 +45,15 @@ describe('import-controller', () => {
     // Setup DOM
     document.body.innerHTML = '';
 
+    const style = document.createElement('style');
+    style.textContent = `
+      .hidden { display: none !important; }
+      .import-loading { display: flex; }
+      .import-repos-list { display: block; }
+      .import-error { display: block; }
+    `;
+    document.head.appendChild(style);
+
     // Create modal structure
     modal = document.createElement('div');
     modal.id = 'importModal';
@@ -56,17 +65,17 @@ describe('import-controller', () => {
 
     loadingState = document.createElement('div');
     loadingState.id = 'importLoadingState';
-    loadingState.style.display = 'none';
+    loadingState.className = 'import-loading hidden';
     modal.appendChild(loadingState);
 
     reposList = document.createElement('div');
     reposList.id = 'importReposList';
-    reposList.style.display = 'none';
+    reposList.className = 'import-repos-list hidden';
     modal.appendChild(reposList);
 
     errorState = document.createElement('div');
     errorState.id = 'importErrorState';
-    errorState.style.display = 'none';
+    errorState.className = 'import-error hidden';
     modal.appendChild(errorState);
 
     errorMessage = document.createElement('p');
@@ -184,9 +193,9 @@ describe('import-controller', () => {
 
       await new Promise(resolve => setTimeout(resolve, 0));
 
-      expect(loadingState.style.display).toBe('flex');
-      expect(reposList.style.display).toBe('none');
-      expect(errorState.style.display).toBe('none');
+      expect(loadingState.classList.contains('hidden')).toBe(false);
+      expect(reposList.classList.contains('hidden')).toBe(true);
+      expect(errorState.classList.contains('hidden')).toBe(true);
     });
 
     test('fetches and displays repos successfully', async () => {
@@ -209,9 +218,9 @@ describe('import-controller', () => {
 
       await openImportModal('starred', []);
 
-      expect(loadingState.style.display).toBe('none');
-      expect(reposList.style.display).toBe('block');
-      expect(errorState.style.display).toBe('none');
+      expect(loadingState.classList.contains('hidden')).toBe(true);
+      expect(reposList.classList.contains('hidden')).toBe(false);
+      expect(errorState.classList.contains('hidden')).toBe(true);
     });
 
     test('marks already watched repos as added', async () => {
@@ -247,7 +256,7 @@ describe('import-controller', () => {
 
       await openImportModal('starred', []);
 
-      expect(errorState.style.display).toBe('block');
+      expect(errorState.classList.contains('hidden')).toBe(false);
       expect(errorMessage.textContent).toContain('GitHub sign-in expired or was revoked');
     });
 
@@ -259,7 +268,7 @@ describe('import-controller', () => {
 
       await openImportModal('starred', []);
 
-      expect(errorState.style.display).toBe('block');
+      expect(errorState.classList.contains('hidden')).toBe(false);
       expect(errorMessage.textContent).toContain('Rate limit exceeded');
     });
 
@@ -271,7 +280,7 @@ describe('import-controller', () => {
 
       await openImportModal('starred', []);
 
-      expect(errorState.style.display).toBe('block');
+      expect(errorState.classList.contains('hidden')).toBe(false);
       expect(errorMessage.textContent).toContain('GitHub API error');
     });
 
@@ -708,7 +717,7 @@ describe('import-controller', () => {
 
       await openImportModal('starred', []);
 
-      expect(errorState.style.display).toBe('block');
+      expect(errorState.classList.contains('hidden')).toBe(false);
       expect(errorMessage.textContent).toContain('Network error');
     });
   });
diff --git a/tests/offline.test.js b/tests/offline.test.js
index 95c15ef..498e4c9 100644
--- a/tests/offline.test.js
+++ b/tests/offline.test.js
@@ -18,7 +18,7 @@ import {
 
 // Mock DOM
 document.body.innerHTML = `
-  <div id="offlineStatus" style="display: none;"></div>
+  <div id="offlineStatus" class="hidden"></div>
   <div id="activityList">
     <div class="empty-state">
       <p>No recent activity</p>
@@ -84,9 +84,9 @@ describe('Offline Manager', () => {
       showOfflineStatus('offlineStatus', true);
 
       const element = document.getElementById('offlineStatus');
-      expect(element.style.display).toBe('block');
+      expect(element.classList.contains('hidden')).toBe(false);
       expect(element.innerHTML).toContain('Offline Mode');
-      expect(element.className).toBe('offline-message');
+      expect(element.classList.contains('offline-message')).toBe(true);
     });
 
     it('should hide offline status when online', () => {
@@ -94,8 +94,8 @@ describe('Offline Manager', () => {
       showOfflineStatus('offlineStatus', false);
 
       const element = document.getElementById('offlineStatus');
-      expect(element.style.display).toBe('none');
-      expect(element.className).toBe('');
+      expect(element.classList.contains('hidden')).toBe(true);
+      expect(element.classList.contains('offline-message')).toBe(false);
     });
 
     it('should handle missing element gracefully', () => {
diff --git a/tests/onboarding.test.js b/tests/onboarding.test.js
index f865b3c..b3f3197 100644
--- a/tests/onboarding.test.js
+++ b/tests/onboarding.test.js
@@ -3,6 +3,7 @@ import { TextEncoder } from 'node:util';
 
 // Simple mock storage to simulate chrome.storage.local for onboarding flows
 let _localStorage = {};
+let _sessionStorage = {};
 
 global.chrome = {
   storage: {
@@ -40,23 +41,23 @@ global.chrome = {
         // keys can be array or single key
         const result = {};
         if (Array.isArray(keys)) {
-          keys.forEach(k => result[k] = _localStorage[k]);
+          keys.forEach(k => result[k] = _sessionStorage[k]);
         } else {
-          result[keys] = _localStorage[keys];
+          result[keys] = _sessionStorage[keys];
         }
 
         if (callback) callback(result);
         return Promise.resolve(result);
       }),
       set: jest.fn((items, callback) => {
-        _localStorage = { ..._localStorage, ...items };
+        _sessionStorage = { ..._sessionStorage, ...items };
         if (callback) callback();
         return Promise.resolve();
       }),
       remove: jest.fn((keys, callback) => {
         const keyArray = Array.isArray(keys) ? keys : [keys];
         keyArray.forEach((key) => {
-          delete _localStorage[key];
+          delete _sessionStorage[key];
         });
         if (callback) callback();
         return Promise.resolve();
@@ -87,6 +88,7 @@ async function renderTokenStep(stateOverrides = {}) {
       ...stateOverrides
     }
   };
+  _sessionStorage = {};
 
   document.body.innerHTML = `
     <div id="onboardingView"></div>
@@ -111,6 +113,7 @@ describe('Onboarding - token persistence', () => {
         }
       }
     };
+    _sessionStorage = {};
 
     jest.clearAllMocks();
     document.body.innerHTML = '';
@@ -257,6 +260,24 @@ describe('Onboarding - token persistence', () => {
     global.fetch = oldFetch;
   });
 
+  test('renderReposStep caps saved popular repositories to three cards', async () => {
+    const manager = new OnboardingManager();
+    const saved = [
+      { owner: { login: 'alice' }, name: 'one', description: 'desc', language: 'JS' },
+      { owner: { login: 'bob' }, name: 'two', description: 'desc', language: 'TS' },
+      { owner: { login: 'carol' }, name: 'three', description: 'desc', language: 'Go' },
+      { owner: { login: 'dave' }, name: 'four', description: 'desc', language: 'Rust' }
+    ];
+    await manager.saveStepData('popularRepos', saved);
+
+    const html = await _renderReposStep();
+
+    expect(html).toContain('alice/one');
+    expect(html).toContain('bob/two');
+    expect(html).toContain('carol/three');
+    expect(html).not.toContain('dave/four');
+  });
+
   test('renderReposStep escapes repository metadata before building HTML', async () => {
     const manager = new OnboardingManager();
     const saved = [
@@ -290,11 +311,10 @@ describe('Onboarding - token persistence', () => {
     });
 
     const onboardingHtml = document.getElementById('onboardingView').innerHTML;
-    const tokenInput = document.getElementById('tokenInput');
     const tokenStatus = document.getElementById('tokenStatus');
 
-    expect(tokenInput.value).toBe('ABCD"&quot; autofocus="true');
-    expect(tokenInput.outerHTML).toContain('&quot;');
+    expect(document.getElementById('tokenInput')).toBeNull();
+    expect(document.getElementById('validateTokenBtn')).toBeNull();
     expect(tokenStatus.textContent).toContain('Connected as <img src=x onerror=alert(1)>');
     expect(onboardingHtml).toContain('&lt;img src=x onerror=alert(1)&gt;');
     expect(onboardingHtml).not.toContain('<img src=x onerror=alert(1)>');
@@ -312,11 +332,25 @@ describe('Onboarding - token persistence', () => {
     const onboardingHtml = document.getElementById('onboardingView').innerHTML;
     const tokenStatus = document.getElementById('tokenStatus');
 
-    expect(tokenStatus.textContent).toContain('GitHub is connected');
-    expect(onboardingHtml).toContain('Connected');
+    expect(tokenStatus.textContent).toContain('GitHub connected');
+    expect(tokenStatus.textContent).toContain("You're done here");
+    expect(onboardingHtml).toContain('Ready');
+  });
+
+  test('connect step renders without a dedicated copy button', async () => {
+    await renderTokenStep({
+      data: {
+        token: {
+          userCode: 'ABCD-EFGH',
+          validated: false
+        }
+      }
+    });
+
+    expect(document.getElementById('copyTokenCodeBtn')).toBeNull();
   });
 
-  test('connect step lets you copy the saved device code', async () => {
+  test('connect step lets you copy the saved device code by focusing the field', async () => {
     await renderTokenStep({
       data: {
         token: {
@@ -326,12 +360,234 @@ describe('Onboarding - token persistence', () => {
       }
     });
 
-    document.getElementById('copyTokenCodeBtn').click();
+    document.getElementById('tokenInput').dispatchEvent(new Event('focus'));
     await Promise.resolve();
     await Promise.resolve();
 
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith('ABCD-EFGH');
-    expect(document.getElementById('tokenStatus').textContent).toContain('Copied ABCD-EFGH');
+    expect(document.getElementById('tokenStatus').textContent).toContain('Code ABCD-EFGH copied to clipboard');
+  });
+
+  test('continue without GitHub skips the token step and advances to repos', async () => {
+    await renderTokenStep({
+      data: {
+        token: {
+          validated: false
+        }
+      }
+    });
+
+    document.getElementById('skipTokenStepBtn').click();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    const waitForSkippedState = async (timeout = 400) => {
+      const start = Date.now();
+      while (Date.now() - start < timeout) {
+        const state = await new Promise((resolve) => {
+          chrome.storage.local.get(['onboarding_state'], (res) => resolve(res.onboarding_state));
+        });
+
+        if (state?.currentStep === 2) {
+          return state;
+        }
+
+        await new Promise(resolve => setTimeout(resolve, 20));
+      }
+
+      return null;
+    };
+
+    const state = await waitForSkippedState();
+
+    expect(state).toBeTruthy();
+    expect(state.currentStep).toBe(2);
+    expect(state.skippedSteps).toContain('token');
+    expect(state.data.token).toEqual({
+      validated: false,
+      skipped: true
+    });
+  });
+
+  test('repos step shows anonymous guidance when no GitHub session exists', async () => {
+    const manager = new OnboardingManager();
+    await manager.saveStepData('popularRepos', [
+      { owner: { login: 'owner' }, name: 'repo', description: 'desc', language: 'JS' }
+    ]);
+
+    const html = await _renderReposStep();
+
+    expect(html).toContain('You can add public repositories now');
+  });
+
+  test('signed-in repos step shows GitHub source buttons and defaults to Mine', async () => {
+    _localStorage.githubAuthSession = {
+      accessToken: 'gho_TEST_TOKEN',
+      authType: 'oauth_device'
+    };
+
+    const manager = new OnboardingManager();
+    await manager.saveStepData('popularRepos', [
+      { owner: { login: 'popular' }, name: 'starter', description: 'desc', language: 'JS', stargazers_count: 100 }
+    ]);
+    await manager.saveStepData('repoSource', {
+      selectedSource: 'mine',
+      previews: {
+        mine: [
+          { owner: { login: 'owner' }, name: 'repo', description: 'desc', language: 'JS', stargazers_count: 42 }
+        ]
+      },
+      loadedSources: ['mine']
+    });
+
+    const html = await _renderReposStep();
+
+    expect(html).toContain('Add from GitHub');
+    expect(html).toContain('Popular repositories');
+    expect(html).toContain('data-source="mine"');
+    expect(html).toContain('repo-source-btn active');
+    expect(html).toContain('owner/repo');
+    expect(html).toContain('popular/starter');
+    expect(html).not.toContain('You can add public repositories now');
+  });
+
+  test('signed-in repos step lets you switch GitHub preview sources', async () => {
+    _localStorage.githubAuthSession = {
+      accessToken: 'gho_TEST_TOKEN',
+      authType: 'oauth_device'
+    };
+    _localStorage.onboarding_state = {
+      currentStep: 2,
+      completed: false,
+      skippedSteps: [],
+      data: {
+        popularRepos: [
+          { owner: { login: 'popular' }, name: 'starter', description: 'desc', language: 'JS' }
+        ]
+      }
+    };
+
+    global.fetch = jest.fn()
+      .mockResolvedValueOnce({
+        ok: true,
+        headers: new Map(),
+        json: async () => ([{
+          full_name: 'mine/repo',
+          description: 'Mine repo',
+          language: 'TypeScript',
+          stargazers_count: 10,
+          forks_count: 1,
+          updated_at: '2026-04-20T00:00:00Z'
+        }])
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        headers: new Map(),
+        json: async () => ([{
+          full_name: 'starred/repo',
+          description: 'Starred repo',
+          language: 'JavaScript',
+          stargazers_count: 20,
+          forks_count: 2,
+          updated_at: '2026-04-20T00:00:00Z'
+        }])
+      });
+
+    document.body.innerHTML = `
+      <div id="onboardingView"></div>
+      <button id="footerSkipBtn" class="hidden"></button>
+    `;
+
+    await _renderOnboardingStep();
+    await Promise.resolve();
+    await Promise.resolve();
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    const waitForRepoSuggestion = async (expectedText, timeout = 400) => {
+      const start = Date.now();
+      while (Date.now() - start < timeout) {
+        if (document.getElementById('repoSuggestions').textContent.includes(expectedText)) {
+          return true;
+        }
+        await new Promise(resolve => setTimeout(resolve, 20));
+      }
+      return false;
+    };
+
+    expect(await waitForRepoSuggestion('mine/repo')).toBe(true);
+
+    document.querySelector('[data-source="starred"]').click();
+    await Promise.resolve();
+    await Promise.resolve();
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(await waitForRepoSuggestion('starred/repo')).toBe(true);
+  });
+
+  test('signed-in repos step shows an empty state when a source has no addable repos', async () => {
+    _localStorage.githubAuthSession = {
+      accessToken: 'gho_TEST_TOKEN',
+      authType: 'oauth_device'
+    };
+
+    const manager = new OnboardingManager();
+    await manager.saveStepData('popularRepos', [
+      { owner: { login: 'popular' }, name: 'starter', description: 'desc', language: 'JS' }
+    ]);
+    await manager.saveStepData('repoSource', {
+      selectedSource: 'mine',
+      previews: {
+        mine: []
+      },
+      loadedSources: ['mine']
+    });
+
+    const html = await _renderReposStep();
+
+    expect(html).toContain('No repositories found in your account yet.');
+  });
+
+  test('getPopularRepos filters noisy meta repositories and backfills sane defaults', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+      headers: new Map(),
+      json: async () => ({
+        items: [
+          {
+            owner: { login: 'vinta' },
+            name: 'awesome-python',
+            description: 'A curated list of Python frameworks',
+            language: 'Python',
+            stargazers_count: 100000
+          },
+          {
+            owner: { login: 'ByteByteGoHq' },
+            name: 'system-design-101',
+            description: 'System design interview prep',
+            language: 'Markdown',
+            stargazers_count: 80000
+          },
+          {
+            owner: { login: 'supabase' },
+            name: 'supabase',
+            description: 'The open source Firebase alternative',
+            language: 'TypeScript',
+            stargazers_count: 90000
+          }
+        ]
+      }),
+      text: async () => ''
+    });
+
+    const manager = new OnboardingManager();
+    const result = await manager.getPopularRepos();
+
+    expect(result).toHaveLength(3);
+    expect(result.some(repo => `${repo.owner.login}/${repo.name}` === 'supabase/supabase')).toBe(true);
+    expect(result.some(repo => `${repo.owner.login}/${repo.name}` === 'microsoft/vscode')).toBe(true);
+    expect(result.some(repo => /awesome-python/i.test(`${repo.owner.login}/${repo.name}`))).toBe(false);
   });
 
   test('connect step shows device instructions when sign-in starts', async () => {
@@ -450,6 +706,8 @@ describe('Onboarding - token persistence', () => {
     const tokenStatus = document.getElementById('tokenStatus');
     expect(tokenStatus.textContent).toContain('Connected as <img src=x onerror=alert(1)>');
     expect(tokenStatus.innerHTML).toContain('&lt;img src=x onerror=alert(1)&gt;');
+    expect(document.getElementById('tokenInput')).toBeNull();
+    expect(document.getElementById('validateTokenBtn')).toBeNull();
   });
 
   test('saves categories preferences during onboarding', async () => {
@@ -533,11 +791,11 @@ describe('Onboarding - token persistence', () => {
     };
 
     document.body.innerHTML = `
-      <header style="display:flex"></header>
-      <div class="toolbar" style="display:flex"></div>
-      <div id="searchBox" style="display:block"></div>
-      <div id="activityList" style="display:block"></div>
-      <div id="onboardingView" class="hidden" style="display:none"></div>
+      <header></header>
+      <div class="toolbar"></div>
+      <div id="searchBox"></div>
+      <div id="activityList"></div>
+      <div id="onboardingView" class="hidden"></div>
       <button id="footerSkipBtn" class="hidden"></button>
     `;
 
@@ -545,17 +803,17 @@ describe('Onboarding - token persistence', () => {
 
     await _showOnboarding(loadActivitiesCallback);
 
-    expect(document.getElementById('onboardingView').style.display).toBe('block');
-    expect(document.getElementById('activityList').style.display).toBe('none');
-    expect(document.querySelector('.toolbar').style.display).toBe('none');
-    expect(document.querySelector('header').style.display).toBe('none');
+    expect(document.getElementById('onboardingView').classList.contains('hidden')).toBe(false);
+    expect(document.getElementById('activityList').classList.contains('hidden')).toBe(true);
+    expect(document.querySelector('.toolbar').classList.contains('hidden')).toBe(true);
+    expect(document.querySelector('header').classList.contains('hidden')).toBe(true);
 
     _exitOnboarding(loadActivitiesCallback);
 
-    expect(document.getElementById('onboardingView').style.display).toBe('none');
-    expect(document.getElementById('activityList').style.display).toBe('block');
-    expect(document.querySelector('.toolbar').style.display).toBe('flex');
-    expect(document.querySelector('header').style.display).toBe('flex');
+    expect(document.getElementById('onboardingView').classList.contains('hidden')).toBe(true);
+    expect(document.getElementById('activityList').classList.contains('hidden')).toBe(false);
+    expect(document.querySelector('.toolbar').classList.contains('hidden')).toBe(false);
+    expect(document.querySelector('header').classList.contains('hidden')).toBe(false);
     expect(loadActivitiesCallback).toHaveBeenCalled();
   });
 
@@ -598,7 +856,7 @@ describe('Onboarding - token persistence', () => {
     await Promise.resolve();
     await Promise.resolve();
 
-    expect(document.getElementById('footerSkipBtn').style.display).toBe('block');
+    expect(document.getElementById('footerSkipBtn').classList.contains('hidden')).toBe(false);
     expect(document.getElementById('repoSuggestions').innerHTML).toContain('owner/repo');
     expect(document.querySelector('.add-repo-btn').dataset.listenerAttached).toBe('true');
   });
@@ -653,9 +911,9 @@ describe('Onboarding - token persistence', () => {
     };
 
     document.body.innerHTML = `
-      <header style="display:none"></header>
-      <div class="toolbar" style="display:none"></div>
-      <div id="activityList" style="display:none"></div>
+      <header class="hidden"></header>
+      <div class="toolbar hidden"></div>
+      <div id="activityList" class="hidden"></div>
       <div id="onboardingView"></div>
       <button id="footerSkipBtn" class="hidden"></button>
     `;
@@ -673,9 +931,9 @@ describe('Onboarding - token persistence', () => {
 
     _localStorage.onboarding_state.currentStep = 4;
     document.body.innerHTML = `
-      <header style="display:none"></header>
-      <div class="toolbar" style="display:none"></div>
-      <div id="activityList" style="display:none"></div>
+      <header class="hidden"></header>
+      <div class="toolbar hidden"></div>
+      <div id="activityList" class="hidden"></div>
       <div id="onboardingView"></div>
       <button id="footerSkipBtn" class="hidden"></button>
     `;
diff --git a/tests/options-interactions.test.js b/tests/options-interactions.test.js
index 7d4ffc2..c26c9a7 100644
--- a/tests/options-interactions.test.js
+++ b/tests/options-interactions.test.js
@@ -1,9 +1,11 @@
+import { readFileSync } from 'node:fs';
 import { beforeEach, describe, expect, jest, test } from '@jest/globals';
 
 const mockApplyTheme = jest.fn();
 const mockApplyColorTheme = jest.fn();
 const mockGetSettings = jest.fn();
 const mockGetWatchedRepos = jest.fn();
+const mockGetLocalItem = jest.fn();
 const mockUpdateSettings = jest.fn();
 const mockGetAuthSession = jest.fn();
 const mockClearAuthSession = jest.fn();
@@ -46,6 +48,7 @@ jest.unstable_mockModule('../shared/storage-helpers.js', () => ({
   clearAuthSession: mockClearAuthSession,
   getAuthSession: mockGetAuthSession,
   getAccessToken: mockGetAccessToken,
+  getLocalItem: mockGetLocalItem,
   getSettings: mockGetSettings,
   getWatchedRepos: mockGetWatchedRepos,
   setLocalItem: mockSetLocalItem,
@@ -101,6 +104,7 @@ jest.unstable_mockModule('../options/views/repository-list-view.js', () => ({
 }));
 
 const {
+  addRepo,
   clearAllData,
   clearCacheData,
   loadSettings,
@@ -110,6 +114,8 @@ const {
   state
 } = await import('../options/options.js');
 
+const optionsStyles = readFileSync(new URL('../options/options.css', import.meta.url), 'utf8');
+
 function renderOptionsDom() {
   document.body.innerHTML = `
     <button id="connectGitHubBtn">Connect GitHub</button>
@@ -119,23 +125,42 @@ function renderOptionsDom() {
     <button id="addRepoBtn"></button>
     <div id="repoHelpText"></div>
     <div id="importReposSection"></div>
+    <button id="togglePopularReposBtn" aria-expanded="false"></button>
+    <div id="popularReposPanel" class="repo-panel"></div>
+    <button id="importWatchedBtn" class="github-import-btn hidden"></button>
+    <button id="importStarredBtn" class="github-import-btn hidden"></button>
+    <button id="importParticipatingBtn" class="github-import-btn hidden"></button>
+    <button id="importMineBtn" class="github-import-btn hidden"></button>
     <div id="repoValidationStatus"></div>
     <div id="repoError"></div>
+    <div id="popularReposState"></div>
+    <div id="popularReposList" class="hidden"></div>
     <div id="repoList"></div>
     <div id="repoCountBadge"></div>
-    <div id="paginationControls"></div>
+    <div id="paginationControls" class="pagination-controls hidden"></div>
     <button id="prevPage"></button>
     <button id="nextPage"></button>
     <div id="pageInfo"></div>
     <input id="repoSearch" />
-    <button id="repoSearchClear"></button>
+    <button id="repoSearchClear" class="search-clear-btn hidden"></button>
     <button id="hidePinnedToggleBtn2"></button>
-
-    <button class="tab-button" data-tab="setup">Setup</button>
+    <p id="sidebarAuthAccount"></p>
+    <p id="sidebarAuthMeta"></p>
+    <p id="sidebarRateLimitValue"></p>
+    <p id="sidebarRateLimitMeta"></p>
+
+    <button class="tab-button" data-tab="repositories">Repositories</button>
+    <button class="tab-button" data-tab="filters">Filters</button>
+    <button class="tab-button" data-tab="preferences">Preferences</button>
     <button class="tab-button" data-tab="advanced">Advanced</button>
-    <div class="tab-panel" data-tab="setup"></div>
+    <button class="tab-button" data-tab="setup">Setup</button>
+    <div class="tab-panel" data-tab="repositories"></div>
+    <div class="tab-panel" data-tab="filters"></div>
+    <div class="tab-panel" data-tab="preferences"></div>
     <div class="tab-panel" data-tab="advanced"></div>
+    <div class="tab-panel" data-tab="setup"></div>
     <a class="setup-step clickable" data-tab="advanced"></a>
+    <a class="setup-inline-link" data-tab="preferences" href="#preferences">Preferences</a>
 
     <input id="filterPrs" type="checkbox" checked />
     <input id="filterIssues" type="checkbox" checked />
@@ -156,15 +181,11 @@ function renderOptionsDom() {
     <input id="snooze-4" name="snoozeHours" type="radio" value="4" />
     <input id="itemExpiryEnabled" type="checkbox" />
     <input id="itemExpiryHours" value="24" />
-    <div id="itemExpiryInputRow" style="display:none"></div>
+    <div id="itemExpiryInputRow" class="expiry-settings d-none"></div>
     <input id="markReadOnSnooze" type="checkbox" />
     <input id="allowUnlimitedRepos" type="checkbox" />
 
     <div id="snoozedReposList"></div>
-    <button id="importWatchedBtn"></button>
-    <button id="importStarredBtn"></button>
-    <button id="importParticipatingBtn"></button>
-    <button id="importMineBtn"></button>
     <button id="importBtn"></button>
     <input id="importFileInput" type="file" />
     <button id="exportBtn"></button>
@@ -173,7 +194,7 @@ function renderOptionsDom() {
     <button id="confirmImportBtn"></button>
     <input id="selectAllImport" type="checkbox" />
     <input id="importRepoSearch" />
-    <button id="importSearchClear"></button>
+    <button id="importSearchClear" class="search-clear-btn hidden"></button>
     <div id="importModal"></div>
 
     <button id="clearCacheBtn"></button>
@@ -198,6 +219,16 @@ beforeEach(() => {
   history.replaceState(null, '', '/options/options.html');
   renderOptionsDom();
 
+  const style = document.createElement('style');
+  style.textContent = `
+    .hidden { display: none !important; }
+    .d-none { display: none !important; }
+    .search-clear-btn { display: flex; }
+    .pagination-controls { display: flex; }
+    .expiry-settings { display: block; }
+  `;
+  document.head.appendChild(style);
+
   Object.assign(state, {
     watchedRepos: [],
     mutedRepos: [],
@@ -226,6 +257,7 @@ beforeEach(() => {
   mockGetWatchedRepos.mockResolvedValue([]);
   mockGetAuthSession.mockResolvedValue(null);
   mockGetAccessToken.mockResolvedValue('token');
+  mockGetLocalItem.mockResolvedValue(null);
   mockUpdateSettings.mockResolvedValue();
   mockSetLocalItem.mockResolvedValue();
   mockSetWatchedRepos.mockResolvedValue();
@@ -247,17 +279,33 @@ beforeEach(() => {
   fetch.mockImplementation(async (url) => {
     if (url === 'manifest.json') {
       return {
+        ok: true,
         json: async () => ({ version: '1.2.3' })
       };
     }
 
     if (url === 'CHANGELOG.md') {
       return {
+        ok: true,
         text: async () => '# Changelog\n\n- Added tests'
       };
     }
 
+    if (url === 'https://api.github.com/repos/jonmartin721/devwatch-github/releases/latest') {
+      return {
+        ok: true,
+        json: async () => ({
+          tag_name: 'v1.2.3',
+          name: 'v1.2.3',
+          body: '## Highlights\n- Added tests',
+          published_at: '2026-04-20T00:00:00Z',
+          html_url: 'https://github.com/jonmartin721/devwatch-github/releases/tag/v1.2.3'
+        })
+      };
+    }
+
     return {
+      ok: true,
       json: async () => ({}),
       text: async () => ''
     };
@@ -287,11 +335,31 @@ describe('options interactions', () => {
 
     expect(buttons[1].classList.contains('active')).toBe(true);
     expect(buttons[1].focus).toHaveBeenCalled();
-    expect(localStorage.getItem('activeTab')).toBe('advanced');
-    expect(document.querySelector('.tab-panel[data-tab="advanced"]').hidden).toBe(false);
+    expect(localStorage.getItem('activeTab')).toBe('filters');
+    expect(document.querySelector('.tab-panel[data-tab="filters"]').hidden).toBe(false);
+    expect(document.querySelector('.tab-panel[data-tab="repositories"]').hidden).toBe(true);
+  });
+
+  test('defaults to repositories when there is no saved tab or hash', () => {
+    setupTabNavigation();
+
+    expect(localStorage.getItem('activeTab')).toBe('repositories');
+    expect(document.querySelector('.tab-button[data-tab="repositories"]').classList.contains('active')).toBe(true);
+    expect(document.querySelector('.tab-panel[data-tab="repositories"]').hidden).toBe(false);
     expect(document.querySelector('.tab-panel[data-tab="setup"]').hidden).toBe(true);
   });
 
+  test('setup inline links can switch directly to another tab', () => {
+    const preferencesLink = document.querySelector('.setup-inline-link');
+
+    setupTabNavigation();
+    preferencesLink.click();
+
+    expect(localStorage.getItem('activeTab')).toBe('preferences');
+    expect(document.querySelector('.tab-button[data-tab="preferences"]').classList.contains('active')).toBe(true);
+    expect(document.querySelector('.tab-panel[data-tab="preferences"]').hidden).toBe(false);
+  });
+
   test('search, hide-pinned, and modal close interactions update local state and controller calls', () => {
     const repoSearch = document.getElementById('repoSearch');
     const repoSearchClear = document.getElementById('repoSearchClear');
@@ -303,10 +371,11 @@ describe('options interactions', () => {
     repoSearch.dispatchEvent(new Event('input', { bubbles: true }));
     expect(state.searchQuery).toBe('react');
     expect(state.currentPage).toBe(1);
-    expect(repoSearchClear.style.display).toBe('flex');
+    expect(repoSearchClear.classList.contains('hidden')).toBe(false);
 
     repoSearchClear.click();
     expect(state.searchQuery).toBe('');
+    expect(repoSearchClear.classList.contains('hidden')).toBe(true);
     expect(repoSearch.focus).toHaveBeenCalled();
 
     document.getElementById('hidePinnedToggleBtn2').click();
@@ -316,6 +385,20 @@ describe('options interactions', () => {
     expect(mockCloseImportModal).toHaveBeenCalled();
   });
 
+  test('popular repositories open from the quick-action button instead of a standalone card', async () => {
+    const popularBtn = document.getElementById('togglePopularReposBtn');
+    const popularPanel = document.getElementById('popularReposPanel');
+
+    setupEventListeners();
+
+    popularBtn.click();
+    await Promise.resolve();
+
+    expect(popularPanel.classList.contains('show')).toBe(true);
+    expect(popularBtn.classList.contains('active')).toBe(true);
+    expect(popularBtn.getAttribute('aria-expanded')).toBe('true');
+  });
+
   test('persists radio, checkbox, and category dependency changes through updateSettings', async () => {
     setupEventListeners();
 
@@ -356,20 +439,134 @@ describe('options interactions', () => {
   });
 
   test('loadSettings applies normalized settings to the UI and renders snoozed repos', async () => {
-    mockGetAuthSession.mockResolvedValue({ accessToken: 'stored-token' });
+    mockGetAuthSession.mockResolvedValue({
+      accessToken: 'stored-token',
+      username: 'octocat',
+      authType: 'oauth_device',
+      scopes: ['repo', 'read:user'],
+      grantedAt: '2026-04-21T14:20:00.000Z'
+    });
+    mockGetLocalItem.mockResolvedValue({
+      remaining: 1234,
+      limit: 5000,
+      reset: Date.UTC(2026, 3, 21, 20, 0, 0)
+    });
 
     await loadSettings();
 
-    expect(mockApplyStoredConnection).toHaveBeenCalledWith({ accessToken: 'stored-token' });
+    expect(mockApplyStoredConnection).toHaveBeenCalledWith(expect.objectContaining({ accessToken: 'stored-token' }));
     expect(mockApplyTheme).toHaveBeenCalledWith('dark');
     expect(mockApplyColorTheme).toHaveBeenCalledWith('graphite');
     expect(document.getElementById('theme-dark').checked).toBe(true);
     expect(document.getElementById('color-graphite').checked).toBe(true);
     expect(document.getElementById('itemExpiryEnabled').checked).toBe(true);
-    expect(document.getElementById('itemExpiryInputRow').style.display).toBe('block');
+    expect(document.getElementById('itemExpiryInputRow').classList.contains('d-none')).toBe(false);
+    expect(document.getElementById('sidebarAuthAccount').textContent).toBe('@octocat');
+    expect(document.getElementById('sidebarRateLimitValue').textContent).toBe('1234/5000 left');
     expect(mockRenderSnoozedRepos).toHaveBeenCalledWith([]);
   });
 
+  test('loadSettings renders a popular public repositories section', async () => {
+    fetch.mockImplementation(async (url) => {
+      if (String(url).includes('/search/repositories')) {
+        return {
+          ok: true,
+          status: 200,
+          statusText: 'OK',
+          headers: new Map(),
+          json: async () => ({
+            items: [
+              {
+                owner: { login: 'facebook' },
+                name: 'react',
+                description: 'A JavaScript library for building user interfaces',
+                language: 'JavaScript',
+                stargazers_count: 200000
+              }
+            ]
+          })
+        };
+      }
+
+      return {
+        ok: true,
+        json: async () => ({}),
+        text: async () => ''
+      };
+    });
+
+    await loadSettings();
+
+    expect(document.getElementById('popularReposList').innerHTML).toContain('microsoft/vscode');
+    expect(document.getElementById('popularReposState').classList.contains('hidden')).toBe(true);
+  });
+
+  test('import search clear button actually hides when the query is cleared', () => {
+    const importSearch = document.getElementById('importRepoSearch');
+    const importSearchClear = document.getElementById('importSearchClear');
+
+    setupEventListeners();
+
+    importSearch.value = 'react';
+    importSearch.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(importSearchClear.classList.contains('hidden')).toBe(false);
+
+    importSearchClear.click();
+    expect(importSearch.value).toBe('');
+    expect(importSearchClear.classList.contains('hidden')).toBe(true);
+  });
+
+  test('disconnected users can still add public repositories manually', async () => {
+    mockGetAccessToken.mockResolvedValueOnce(null);
+    mockResolveWatchedRepoInput.mockResolvedValueOnce({
+      valid: true,
+      normalizedRepo: 'facebook/react',
+      record: { fullName: 'facebook/react', description: 'React', language: 'JS' }
+    });
+
+    state.watchedRepos = [];
+    document.getElementById('repoInput').value = 'facebook/react';
+
+    await addRepo();
+
+    expect(mockResolveWatchedRepoInput).toHaveBeenCalled();
+    expect(mockResolveWatchedRepoInput.mock.calls[0][0]).toBe('facebook/react');
+    expect(mockResolveWatchedRepoInput.mock.calls[0][1].githubToken).toBeNull();
+    expect(state.watchedRepos).toEqual([
+      { fullName: 'facebook/react', description: 'React', language: 'JS' }
+    ]);
+  });
+
+  test('options hide utilities override later component display rules', () => {
+    expect(optionsStyles).toMatch(/\.hidden\s*\{[\s\S]*display:\s*none\s*!important;/);
+    expect(optionsStyles).toMatch(/\.d-none\s*\{[\s\S]*display:\s*none\s*!important;/);
+  });
+
+  test('setup inline links use the themed link treatment', () => {
+    expect(optionsStyles).toMatch(/\.setup-inline-link\s*\{[\s\S]*font-weight:\s*600/);
+    expect(optionsStyles).toMatch(/\.setup-inline-link:focus-visible\s*\{[\s\S]*outline:\s*2px solid var\(--link-color\)/);
+  });
+
+  test('setup connection status actions share the same pill language', () => {
+    expect(optionsStyles).toMatch(/\.github-disconnect-btn\s*\{[\s\S]*border-radius:\s*999px/);
+    expect(optionsStyles).toMatch(/\.github-disconnect-btn\s*\{[\s\S]*background:\s*var\(--error-bg\)/);
+    expect(optionsStyles).toMatch(/\.github-disconnect-btn\s*\{[\s\S]*color:\s*var\(--error-text\)/);
+    expect(optionsStyles).toMatch(/\.github-connect-status-row\s*\{[\s\S]*justify-content:\s*space-between/);
+    expect(optionsStyles).toMatch(/\.github-connect-inline-help\s*\{[\s\S]*flex-direction:\s*column/);
+    expect(optionsStyles).toMatch(/\.github-connect-card\.is-connected [\s\S]*\.github-connect-flow[\s\S]*display:\s*none/);
+  });
+
+  test('popular repositories are tucked behind a toggleable utility panel', () => {
+    expect(optionsStyles).toMatch(/\.popular-repos-panel\.show\s*\{[\s\S]*max-height:\s*520px/);
+    expect(optionsStyles).toMatch(/\.import-btn\.active\s*\{[\s\S]*border-color:\s*var\(--border-hover\)/);
+  });
+
+  test('import selection and focus styles use themed treatment instead of default outlines', () => {
+    expect(optionsStyles).toMatch(/\.repo-item\.import-variant\.selected\s*\{[\s\S]*rgba\(16,\s*185,\s*129,\s*0\.12\)/);
+    expect(optionsStyles).toMatch(/\.repo-item\.import-variant:focus\s*\{[\s\S]*outline:\s*none/);
+    expect(optionsStyles).toMatch(/\.repo-item\.import-variant:focus-visible\s*\{[\s\S]*box-shadow:/);
+  });
+
   test('clears cache data and handles destructive actions', async () => {
     const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
 
diff --git a/tests/options-main.test.js b/tests/options-main.test.js
index f5d59bc..e5dd534 100644
--- a/tests/options-main.test.js
+++ b/tests/options-main.test.js
@@ -17,17 +17,25 @@ describe('Options Main Functions', () => {
     // Setup complete DOM structure for options page
     document.body.innerHTML = `
       <button id="connectGitHubBtn">Connect GitHub</button>
-      <div id="deviceCodeSection" class="hidden" style="display: none;">
+      <div id="deviceCodeSection" class="hidden">
         <input id="githubToken" type="text" />
       </div>
       <div id="tokenStatus" class="token-status"></div>
-      <button id="clearTokenBtn">Disconnect</button>
+      <button id="clearTokenBtn" class="hidden">Disconnect</button>
       <input id="repoInput" />
       <button id="addRepoBtn">Add</button>
       <div id="repoHelpText"></div>
       <div id="importReposSection"></div>
+      <button id="togglePopularReposBtn"></button>
+      <button id="importWatchedBtn" class="github-import-btn hidden"></button>
+      <button id="importStarredBtn" class="github-import-btn hidden"></button>
+      <button id="importParticipatingBtn" class="github-import-btn hidden"></button>
+      <button id="importMineBtn" class="github-import-btn hidden"></button>
+      <div id="popularReposPanel" class="repo-panel"></div>
       <div id="repoValidationStatus" class="repo-validation-status"></div>
       <div id="repoError"></div>
+      <div id="popularReposState"></div>
+      <div id="popularReposList" class="hidden"></div>
       <div id="repoList"></div>
       <div id="repoCountBadge"></div>
       <div id="paginationControls"></div>
@@ -35,7 +43,7 @@ describe('Options Main Functions', () => {
       <button id="nextPage"></button>
       <div id="pageInfo"></div>
       <input id="repoSearch" />
-      <div id="repoSearchClear"></div>
+      <div id="repoSearchClear" class="hidden"></div>
       <button id="hidePinnedToggleBtn"></button>
       <button id="hidePinnedToggleBtn2"></button>
       <input id="filterPrs" type="checkbox" />
@@ -54,14 +62,10 @@ describe('Options Main Functions', () => {
       <input id="snooze-1" name="snoozeHours" type="radio" value="1" />
       <input id="itemExpiryEnabled" type="checkbox" />
       <input id="itemExpiryHours" />
-      <div id="itemExpiryInputRow"></div>
+      <div id="itemExpiryInputRow" class="d-none"></div>
       <input id="markReadOnSnooze" type="checkbox" />
       <input id="allowUnlimitedRepos" type="checkbox" />
       <div id="snoozedReposList"></div>
-      <button id="importWatchedBtn"></button>
-      <button id="importStarredBtn"></button>
-      <button id="importParticipatingBtn"></button>
-      <button id="importMineBtn"></button>
       <button id="importBtn"></button>
       <input id="importFileInput" type="file" />
       <button id="exportBtn"></button>
@@ -70,7 +74,7 @@ describe('Options Main Functions', () => {
       <button id="confirmImportBtn"></button>
       <input id="selectAllImport" type="checkbox" />
       <input id="importRepoSearch" />
-      <div id="importSearchClear"></div>
+      <div id="importSearchClear" class="hidden"></div>
       <div id="importModal"></div>
       <button id="clearCacheBtn"></button>
       <button id="clearAllDataBtn"></button>
@@ -156,7 +160,14 @@ describe('Options Main Functions', () => {
       }
     };
 
-    global.fetch = jest.fn();
+    global.fetch = jest.fn(async () => ({
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+      headers: new Map(),
+      json: async () => ({ items: [] }),
+      text: async () => ''
+    }));
     global.confirm = jest.fn(() => true);
     window.matchMedia = jest.fn().mockReturnValue({
       matches: false,
@@ -329,23 +340,22 @@ describe('Options Main Functions', () => {
       const addBtn = document.getElementById('addRepoBtn');
       const helpText = document.getElementById('repoHelpText');
       const importSection = document.getElementById('importReposSection');
+      const importMineBtn = document.getElementById('importMineBtn');
 
-      clearBtn.style.display = 'none';
       repoInput.disabled = true;
       addBtn.disabled = true;
       helpText.textContent = 'GitHub sign-in expired or was revoked. Reconnect GitHub and try again.';
-      importSection.classList.add('hidden');
-      importSection.style.display = 'none';
+      importMineBtn.classList.add('hidden');
 
       syncTokenUiWithStoredCredential(true);
 
       expect(connectBtn.textContent).toBe('Reconnect GitHub');
-      expect(clearBtn.style.display).toBe('block');
+      expect(clearBtn.classList.contains('hidden')).toBe(false);
       expect(repoInput.disabled).toBe(false);
       expect(addBtn.disabled).toBe(false);
       expect(helpText.textContent).toContain('Add repositories to monitor');
-      expect(importSection.classList.contains('hidden')).toBe(false);
-      expect(importSection.style.display).toBe('block');
+      expect(importSection).not.toBeNull();
+      expect(importMineBtn.classList.contains('hidden')).toBe(false);
     });
 
     test('restores unauthenticated UI when no stored token is available', () => {
@@ -355,26 +365,40 @@ describe('Options Main Functions', () => {
       const addBtn = document.getElementById('addRepoBtn');
       const helpText = document.getElementById('repoHelpText');
       const importSection = document.getElementById('importReposSection');
+      const importMineBtn = document.getElementById('importMineBtn');
 
       syncTokenUiWithStoredCredential(false);
 
       expect(connectBtn.textContent).toBe('Connect GitHub');
-      expect(clearBtn.style.display).toBe('none');
-      expect(repoInput.disabled).toBe(true);
-      expect(addBtn.disabled).toBe(true);
-      expect(helpText.textContent).toContain('Connect GitHub above');
-      expect(importSection.classList.contains('hidden')).toBe(true);
-      expect(importSection.style.display).toBe('none');
+      expect(clearBtn.classList.contains('hidden')).toBe(true);
+      expect(repoInput.disabled).toBe(false);
+      expect(addBtn.disabled).toBe(false);
+      expect(helpText.textContent).toContain('Add public repositories manually now');
+      expect(importSection).not.toBeNull();
+      expect(importMineBtn.classList.contains('hidden')).toBe(true);
     });
 
     test('loadSettings restores a stored auth session', async () => {
-      chrome.storage.session.get.mockImplementation((keys, callback) => {
-        callback({
-          githubAuthSession: {
-            accessToken: 'persisted-token',
-            username: 'persisted-user'
+      chrome.storage.local.get.mockImplementation((keys, callback) => {
+        const requestedKeys = Array.isArray(keys) ? keys : [keys];
+        const result = {};
+
+        requestedKeys.forEach((key) => {
+          if (key === 'githubAuthSession') {
+            result.githubAuthSession = {
+              accessToken: 'persisted-token',
+              username: 'persisted-user'
+            };
+          } else if (key === 'activities') {
+            result.activities = [];
+          } else if (key === 'readItems') {
+            result.readItems = [];
+          } else if (key === 'rateLimit') {
+            result.rateLimit = null;
           }
         });
+
+        callback(result);
       });
       chrome.storage.sync.get.mockImplementation((keys, callback) => {
         const result = Array.isArray(keys) && keys.includes('snoozedRepos')
@@ -391,7 +415,7 @@ describe('Options Main Functions', () => {
 
       expect(document.getElementById('tokenStatus').textContent).toContain('persisted-user');
       expect(document.getElementById('connectGitHubBtn').textContent).toBe('Reconnect GitHub');
-      expect(document.getElementById('clearTokenBtn').style.display).toBe('block');
+      expect(document.getElementById('clearTokenBtn').classList.contains('hidden')).toBe(false);
       expect(document.getElementById('repoInput').disabled).toBe(false);
     });
 
@@ -429,8 +453,12 @@ describe('Options Main Functions', () => {
 
       document.getElementById('clearTokenBtn').click();
       await Promise.resolve();
+      await Promise.resolve();
 
-      expect(chrome.storage.session.remove).toHaveBeenCalledWith(['githubAuthSession'], expect.any(Function));
+      expect(chrome.storage.local.remove).toHaveBeenCalledWith(
+        ['githubAuthSession'],
+        expect.any(Function)
+      );
       expect(chrome.storage.local.remove).toHaveBeenCalledWith(
         ['encryptedGithubAuthSession', 'encryptionKey'],
         expect.any(Function)
@@ -470,10 +498,10 @@ describe('Options Main Functions', () => {
       await Promise.resolve();
       await new Promise(resolve => setTimeout(resolve, 0));
 
-      expect(document.getElementById('clearTokenBtn').style.display).toBe('block');
+      expect(document.getElementById('clearTokenBtn').classList.contains('hidden')).toBe(false);
       expect(document.getElementById('repoInput').disabled).toBe(false);
       expect(document.getElementById('addRepoBtn').disabled).toBe(false);
-      expect(chrome.storage.session.set).toHaveBeenCalledWith(
+      expect(chrome.storage.local.set).toHaveBeenCalledWith(
         expect.objectContaining({
           githubAuthSession: expect.objectContaining({
             accessToken: 'oauth-token',
diff --git a/tests/options-token-controller.test.js b/tests/options-token-controller.test.js
index a64db0a..1d21f3c 100644
--- a/tests/options-token-controller.test.js
+++ b/tests/options-token-controller.test.js
@@ -24,30 +24,54 @@ const {
 describe('Token Controller', () => {
   beforeEach(() => {
     document.body.innerHTML = `
+      <div class="github-connect-card">
+        <p id="githubConnectIntroText"></p>
+        <p id="githubConnectConnectedNote"></p>
+        <h4 id="githubConnectPanelHeading"></h4>
+        <p id="githubConnectPanelCopy"></p>
+      </div>
       <button id="connectGitHubBtn">Connect GitHub</button>
-      <button id="clearTokenBtn" style="display: none;">Disconnect</button>
-      <div id="deviceCodeSection" class="hidden" style="display: none;">
+      <button id="clearTokenBtn" class="hidden">Disconnect</button>
+      <div class="github-connect-status-row">
+        <div id="tokenStatus" class="token-status"></div>
+      </div>
+      <div id="deviceCodeSection" class="hidden">
         <input id="githubToken" type="text" value="" />
       </div>
-      <div id="tokenStatus" class="token-status"></div>
+      <div id="token-help"></div>
       <input id="repoInput" />
       <button id="addRepoBtn">Add</button>
       <div id="repoHelpText"></div>
-      <div id="importReposSection" class="hidden" style="display: none;"></div>
+      <div id="importReposSection"></div>
+      <button id="togglePopularReposBtn"></button>
+      <button id="importWatchedBtn" class="github-import-btn hidden"></button>
+      <button id="importStarredBtn" class="github-import-btn hidden"></button>
+      <button id="importParticipatingBtn" class="github-import-btn hidden"></button>
+      <button id="importMineBtn" class="github-import-btn hidden"></button>
     `;
 
     jest.clearAllMocks();
     global.confirm = jest.fn(() => true);
+    Object.defineProperty(globalThis.navigator, 'clipboard', {
+      configurable: true,
+      value: {
+        writeText: jest.fn(() => Promise.resolve())
+      }
+    });
   });
 
   test('applyStoredConnection restores signed-out state', () => {
     applyStoredConnection(null);
 
     expect(document.getElementById('connectGitHubBtn').textContent).toBe('Connect GitHub');
-    expect(document.getElementById('clearTokenBtn').style.display).toBe('none');
-    expect(document.getElementById('repoInput').disabled).toBe(true);
-    expect(document.getElementById('addRepoBtn').disabled).toBe(true);
-    expect(document.getElementById('repoHelpText').textContent).toContain('Connect GitHub above');
+    expect(document.getElementById('clearTokenBtn').classList.contains('hidden')).toBe(true);
+    expect(document.getElementById('repoInput').disabled).toBe(false);
+    expect(document.getElementById('addRepoBtn').disabled).toBe(false);
+    expect(document.getElementById('repoHelpText').textContent).toContain('Add public repositories manually now');
+    expect(document.getElementById('token-help').textContent).toContain('copy the code for you');
+    expect(document.querySelector('.github-connect-status-row').classList.contains('hidden')).toBe(true);
+    expect(document.querySelector('.github-connect-card').classList.contains('is-connected')).toBe(false);
+    expect(document.getElementById('githubConnectPanelHeading').textContent).toContain('Connect once');
   });
 
   test('applyStoredConnection restores connected state', () => {
@@ -57,10 +81,14 @@ describe('Token Controller', () => {
     });
 
     expect(document.getElementById('connectGitHubBtn').textContent).toBe('Reconnect GitHub');
-    expect(document.getElementById('clearTokenBtn').style.display).toBe('block');
+    expect(document.getElementById('clearTokenBtn').classList.contains('hidden')).toBe(false);
     expect(document.getElementById('tokenStatus').textContent).toContain('octocat');
     expect(document.getElementById('repoInput').disabled).toBe(false);
-    expect(document.getElementById('importReposSection').style.display).toBe('block');
+    expect(document.getElementById('importMineBtn').classList.contains('hidden')).toBe(false);
+    expect(document.getElementById('token-help').textContent).toContain('just paste the one DevWatch copies for you');
+    expect(document.querySelector('.github-connect-status-row').classList.contains('hidden')).toBe(false);
+    expect(document.querySelector('.github-connect-card').classList.contains('is-connected')).toBe(true);
+    expect(document.getElementById('githubConnectPanelHeading').textContent).toContain('Reconnect only if GitHub asks again');
   });
 
   test('clearToken does nothing when cancelled', async () => {
@@ -82,8 +110,9 @@ describe('Token Controller', () => {
 
     expect(result).toBe(true);
     expect(mockClearAuthSession).toHaveBeenCalled();
-    expect(document.getElementById('clearTokenBtn').style.display).toBe('none');
-    expect(document.getElementById('repoInput').disabled).toBe(true);
+    expect(document.getElementById('clearTokenBtn').classList.contains('hidden')).toBe(true);
+    expect(document.getElementById('repoInput').disabled).toBe(false);
+    expect(document.getElementById('repoHelpText').textContent).toContain('Add public repositories manually now');
   });
 
   test('connectGitHub stores auth session after a successful device flow', async () => {
@@ -112,9 +141,13 @@ describe('Token Controller', () => {
       accessToken: 'oauth-token',
       username: 'octocat'
     });
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('ABCD-EFGH');
     expect(document.getElementById('connectGitHubBtn').textContent).toBe('Reconnect GitHub');
     expect(document.getElementById('tokenStatus').textContent).toContain('octocat');
+    expect(document.getElementById('token-help').textContent).toContain('just paste the one DevWatch copies for you');
     expect(document.getElementById('githubToken').value).toBe('');
+    expect(document.querySelector('.github-connect-status-row').classList.contains('hidden')).toBe(false);
+    expect(document.querySelector('.github-connect-card').classList.contains('is-connected')).toBe(true);
   });
 
   test('connectGitHub keeps the existing session enabled when reconnect fails', async () => {
@@ -129,7 +162,7 @@ describe('Token Controller', () => {
     const result = await connectGitHub({});
 
     expect(result).toEqual({ isValid: false, reason: 'access_denied' });
-    expect(document.getElementById('clearTokenBtn').style.display).toBe('block');
+    expect(document.getElementById('clearTokenBtn').classList.contains('hidden')).toBe(false);
     expect(document.getElementById('repoInput').disabled).toBe(false);
     expect(document.getElementById('tokenStatus').textContent).toContain('cancelled');
   });
diff --git a/tests/options.test.js b/tests/options.test.js
index f2da861..588b16e 100644
--- a/tests/options.test.js
+++ b/tests/options.test.js
@@ -178,7 +178,7 @@ describe('Options Page - Repository Management', () => {
   describe('validateRepo', () => {
     beforeEach(() => {
       // Mock auth session storage for validateRepo tests
-      chrome.storage.session.get.mockImplementation((keys, callback) => {
+      chrome.storage.local.get.mockImplementation((keys, callback) => {
         const result = {};
         if (Array.isArray(keys) && keys.includes('githubAuthSession')) {
           result.githubAuthSession = { accessToken: 'test-token' };
diff --git a/tests/phase1.test.js b/tests/phase1.test.js
index a3f477c..507a72f 100644
--- a/tests/phase1.test.js
+++ b/tests/phase1.test.js
@@ -70,9 +70,9 @@ describe('Dark Mode', () => {
     document.body.className = '';
     document.body.innerHTML = `
       <button id="darkModeBtn">
-        <svg class="system-icon" style="display: block;"></svg>
-        <svg class="moon-icon" style="display: block;"></svg>
-        <svg class="sun-icon" style="display: none;"></svg>
+        <svg class="system-icon"></svg>
+        <svg class="moon-icon"></svg>
+        <svg class="sun-icon hidden"></svg>
       </button>
     `;
   });
@@ -130,9 +130,8 @@ describe('Rate Limit Display', () => {
 
     const info = document.getElementById('rateLimitInfo');
     expect(info.textContent).toContain('500/5000 API calls remaining');
-    expect(info.style.display).toBe('block');
-    // Check warning color (accept both hex and rgb formats)
-    expect(['#f0ad4e', 'rgb(240, 173, 78)']).toContain(info.style.color);
+    expect(info.classList.contains('hidden')).toBe(false);
+    expect(info.classList.contains('warning')).toBe(true);
     // Either SVG or text content should be present - the SVG might be rendered differently in test environment
     expect(info.innerHTML.length > 0).toBe(true);
   });
@@ -148,7 +147,7 @@ describe('Rate Limit Display', () => {
 
     const info = document.getElementById('rateLimitInfo');
     expect(info.textContent).toBe('');
-    expect(info.style.display).toBe('none');
+    expect(info.classList.contains('hidden')).toBe(true);
   });
 
   test('hides rate limit when no data', () => {
@@ -156,13 +155,13 @@ describe('Rate Limit Display', () => {
 
     const info = document.getElementById('rateLimitInfo');
     expect(info.textContent).toBe('');
-    expect(info.style.display).toBe('none');
+    expect(info.classList.contains('hidden')).toBe(true);
   });
 });
 
 describe('Error Display', () => {
   beforeEach(() => {
-    document.body.innerHTML = '<div id="errorMessage" style="display: none;"></div>';
+    document.body.innerHTML = '<div id="errorMessage" class="hidden"></div>';
   });
 
   test('shows recent errors', () => {
@@ -176,7 +175,7 @@ describe('Error Display', () => {
     showError('errorMessage', error);
 
     const errorMsg = document.getElementById('errorMessage');
-    expect(errorMsg.style.display).toBe('block');
+    expect(errorMsg.classList.contains('hidden')).toBe(false);
     expect(errorMsg.textContent).toContain('GitHub Sign-In Needed');
     expect(errorMsg.textContent).toContain('revoked');
   });
@@ -190,7 +189,7 @@ describe('Error Display', () => {
     showError('errorMessage', error);
 
     const errorMsg = document.getElementById('errorMessage');
-    expect(errorMsg.style.display).toBe('block');
+    expect(errorMsg.classList.contains('hidden')).toBe(false);
     expect(errorMsg.textContent).toContain('Unexpected Error');
   });
 });
diff --git a/tests/popup-activity-controller-extra.test.js b/tests/popup-activity-controller-extra.test.js
index eef50cb..c3d6c85 100644
--- a/tests/popup-activity-controller-extra.test.js
+++ b/tests/popup-activity-controller-extra.test.js
@@ -215,7 +215,9 @@ describe('popup activity controller coverage', () => {
     const error = new Error('refresh failed');
     chrome.runtime.sendMessage.mockRejectedValue(error);
 
-    await handleRefresh(loadCallback);
+    const refreshPromise = handleRefresh(loadCallback);
+    await jest.advanceTimersByTimeAsync(500);
+    await refreshPromise;
 
     expect(mockClearError).toHaveBeenCalledWith('errorMessage');
     expect(mockShowError).toHaveBeenCalledWith(
@@ -228,21 +230,43 @@ describe('popup activity controller coverage', () => {
     expect(loadCallback).not.toHaveBeenCalled();
     expect(document.getElementById('refreshBtn').disabled).toBe(false);
     expect(document.getElementById('refreshBtn').classList.contains('spinning')).toBe(false);
-    expect(document.getElementById('refreshBtn').classList.contains('refresh-complete')).toBe(true);
-
-    await jest.advanceTimersByTimeAsync(400);
     expect(document.getElementById('refreshBtn').classList.contains('refresh-complete')).toBe(false);
   });
 
   test('passes skipLoadingIndicator when refresh succeeds', async () => {
     const loadCallback = jest.fn().mockResolvedValue();
 
-    await handleRefresh(loadCallback);
+    const refreshPromise = handleRefresh(loadCallback);
+    await jest.advanceTimersByTimeAsync(500);
+    await refreshPromise;
 
     expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({ action: 'checkNow' });
     expect(loadCallback).toHaveBeenCalledWith({ skipLoadingIndicator: true });
   });
 
+  test('keeps the refresh button spinning briefly even when refresh returns immediately', async () => {
+    const loadCallback = jest.fn().mockResolvedValue();
+    const refreshPromise = handleRefresh(loadCallback);
+    const refreshBtn = document.getElementById('refreshBtn');
+
+    expect(refreshBtn.classList.contains('spinning')).toBe(true);
+
+    await Promise.resolve();
+    expect(refreshBtn.classList.contains('spinning')).toBe(true);
+
+    await jest.advanceTimersByTimeAsync(499);
+    expect(refreshBtn.classList.contains('spinning')).toBe(true);
+
+    await jest.advanceTimersByTimeAsync(1);
+    await refreshPromise;
+
+    expect(refreshBtn.classList.contains('spinning')).toBe(false);
+    expect(refreshBtn.classList.contains('refresh-complete')).toBe(true);
+
+    await jest.advanceTimersByTimeAsync(400);
+    expect(refreshBtn.classList.contains('refresh-complete')).toBe(false);
+  });
+
   test('shows Never updated when no lastCheck exists', async () => {
     chrome.storage.sync.get.mockResolvedValue({ lastCheck: null });
 
@@ -264,6 +288,6 @@ describe('popup activity controller coverage', () => {
   test('hides the rate limit footer when the budget is healthy', () => {
     updateRateLimit({ remaining: 2000, limit: 5000 });
 
-    expect(document.getElementById('rateLimitInfo').style.display).toBe('none');
+    expect(document.getElementById('rateLimitInfo').classList.contains('hidden')).toBe(true);
   });
 });
diff --git a/tests/popup-activity-controller.test.js b/tests/popup-activity-controller.test.js
index 219b92b..b5f8aa6 100644
--- a/tests/popup-activity-controller.test.js
+++ b/tests/popup-activity-controller.test.js
@@ -65,6 +65,6 @@ describe('Activity Controller', () => {
     updateRateLimit(rateLimit);
 
     const info = document.getElementById('rateLimitInfo');
-    expect(info.style.display).toBe('none');
+    expect(info.classList.contains('hidden')).toBe(true);
   });
 });
diff --git a/tests/popup-activity-list-view.test.js b/tests/popup-activity-list-view.test.js
index d63ad7e..7eaed46 100644
--- a/tests/popup-activity-list-view.test.js
+++ b/tests/popup-activity-list-view.test.js
@@ -160,6 +160,33 @@ describe('Activity List View', () => {
       expect(mockOptionsLink.addEventListener).toHaveBeenCalledWith('click', expect.any(Function));
     });
 
+    test('options link opens the repositories tab with the add-repo query preserved', async () => {
+      const mockOptionsLink = {
+        addEventListener: jest.fn()
+      };
+
+      mockFilteredActivities = [];
+      mockState.showArchive = false;
+
+      document.getElementById = jest.fn((id) => {
+        if (id === 'activityList') return mockList;
+        if (id === 'optionsLink') return mockOptionsLink;
+        return null;
+      });
+
+      renderActivities(null, new Set(), [], jest.fn(), jest.fn(), jest.fn(), jest.fn(), jest.fn(), jest.fn(), jest.fn(), jest.fn());
+
+      const clickHandler = mockOptionsLink.addEventListener.mock.calls[0][1];
+      const event = { preventDefault: jest.fn() };
+
+      await clickHandler(event);
+
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(chrome.tabs.create).toHaveBeenCalledWith({
+        url: 'chrome-extension://test/options/options.html?showAdd=true#repositories'
+      });
+    });
+
     test('does not add options link listener in archive mode', () => {
       const mockOptionsLink = {
         addEventListener: jest.fn()
diff --git a/tests/popup-bootstrap.test.js b/tests/popup-bootstrap.test.js
index 62c2249..37db19a 100644
--- a/tests/popup-bootstrap.test.js
+++ b/tests/popup-bootstrap.test.js
@@ -137,9 +137,9 @@ jest.unstable_mockModule('../popup/controllers/theme-controller.js', () => ({
 
 function renderPopupDom() {
   document.body.innerHTML = `
-    <header style="display:none"></header>
-    <div class="toolbar" style="display:none"></div>
-    <div id="activityList" style="display:none"></div>
+    <header class="hidden"></header>
+    <div class="toolbar hidden"></div>
+    <div id="activityList" class="hidden"></div>
     <div id="errorMessage"></div>
     <div id="searchBox" class="hidden"></div>
     <button id="refreshBtn"></button>
@@ -233,11 +233,11 @@ describe('popup bootstrap integration', () => {
     expect(mockLoadActivitiesController).toHaveBeenCalledWith(expect.any(Function), {});
     expect(mockSetupKeyboardNavigationController).toHaveBeenCalled();
     expect(mockSetupOfflineListeners).toHaveBeenCalled();
-    expect(document.querySelector('header').style.display).toBe('flex');
-    expect(document.querySelector('.toolbar').style.display).toBe('flex');
-    expect(document.getElementById('activityList').style.display).toBe('block');
+    expect(document.querySelector('header').classList.contains('hidden')).toBe(false);
+    expect(document.querySelector('.toolbar').classList.contains('hidden')).toBe(false);
+    expect(document.getElementById('activityList').classList.contains('hidden')).toBe(false);
     expect(document.getElementById('footerSkipBtn').classList.contains('hidden')).toBe(true);
-    expect(document.getElementById('repoCount').textContent).toBe('Watching 2 repos');
+    expect(document.getElementById('repoCount').textContent).toBe('2 repos');
     expect(mockApplyTheme).toHaveBeenCalledWith('dark');
     expect(mockApplyColorTheme).toHaveBeenCalledWith('graphite');
     expect(mockUpdateDarkModeIcon).toHaveBeenCalled();
diff --git a/tests/popup-keyboard-controller.test.js b/tests/popup-keyboard-controller.test.js
index ac3f66f..7ef4ce7 100644
--- a/tests/popup-keyboard-controller.test.js
+++ b/tests/popup-keyboard-controller.test.js
@@ -7,7 +7,7 @@ import {
 describe('Keyboard Controller', () => {
   beforeEach(() => {
     document.body.innerHTML = `
-      <input id="searchBox" style="display: none" />
+      <input id="searchBox" class="hidden" />
       <button class="filter-btn">All</button>
       <button class="filter-btn active">Unread</button>
       <button class="filter-btn">PRs</button>
@@ -59,7 +59,7 @@ describe('Keyboard Controller', () => {
       const mockToggleSearch = jest.fn();
       const mockToggleArchive = jest.fn();
       const searchBox = document.getElementById('searchBox');
-      searchBox.style.display = 'block';
+      searchBox.classList.remove('hidden');
 
       setupKeyboardNavigation(mockRefresh, mockToggleSearch, mockToggleArchive);
 
diff --git a/tests/repo-service.test.js b/tests/repo-service.test.js
index f97790d..87ecc23 100644
--- a/tests/repo-service.test.js
+++ b/tests/repo-service.test.js
@@ -16,6 +16,7 @@ const {
   isWatchedRepoDuplicate,
   normalizeRepoInput,
   normalizeWatchedRepoRecord,
+  validateWatchedRepo,
   resolveWatchedRepoInput
 } = await import('../shared/repo-service.js');
 
@@ -179,4 +180,50 @@ describe('repo-service', () => {
       normalizedRepo: 'facebook/react'
     });
   });
+
+  test('validateWatchedRepo allows public repositories without GitHub auth', async () => {
+    mockValidateRepository.mockResolvedValueOnce({
+      valid: true,
+      metadata: {
+        fullName: 'facebook/react',
+        name: 'react',
+        description: 'UI library',
+        language: 'JavaScript',
+        stars: 100,
+        forks: 20,
+        updatedAt: '2026-04-01T00:00:00Z'
+      }
+    });
+
+    const result = await validateWatchedRepo('facebook/react', null);
+
+    expect(result).toEqual({
+      valid: true,
+      metadata: {
+        fullName: 'facebook/react',
+        name: 'react',
+        description: 'UI library',
+        language: 'JavaScript',
+        stars: 100,
+        forks: 20,
+        updatedAt: '2026-04-01T00:00:00Z',
+        latestRelease: null
+      }
+    });
+    expect(global.fetch).not.toHaveBeenCalled();
+  });
+
+  test('validateWatchedRepo suggests GitHub when an unauthenticated lookup cannot see the repo', async () => {
+    mockValidateRepository.mockResolvedValueOnce({
+      valid: false,
+      error: 'Repository "owner/private-repo" not found or access denied.'
+    });
+
+    const result = await validateWatchedRepo('owner/private-repo', null);
+
+    expect(result).toEqual({
+      valid: false,
+      error: 'Repository "owner/private-repo" was not found publicly. If it\'s private, connect GitHub and try again.'
+    });
+  });
 });
diff --git a/tests/repository-list-view.test.js b/tests/repository-list-view.test.js
index 84ec467..033dbc3 100644
--- a/tests/repository-list-view.test.js
+++ b/tests/repository-list-view.test.js
@@ -22,15 +22,22 @@ describe('repository-list-view', () => {
     // Set up DOM elements
     document.body.innerHTML = `
       <div id="repoList"></div>
-      <div id="paginationControls" style="display: none;">
+      <div id="paginationControls" class="pagination-controls hidden">
         <button id="prevPage">Previous</button>
         <span id="pageInfo"></span>
         <button id="nextPage">Next</button>
       </div>
-      <button id="hidePinnedToggleBtn2" style="display: none;"></button>
+      <button id="hidePinnedToggleBtn2" hidden></button>
       <span id="repoCountBadge">0</span>
     `;
 
+    const style = document.createElement('style');
+    style.textContent = `
+      .hidden { display: none !important; }
+      .pagination-controls { display: flex; }
+    `;
+    document.head.appendChild(style);
+
     repoList = document.getElementById('repoList');
     paginationControls = document.getElementById('paginationControls');
     hidePinnedToggleBtn = document.getElementById('hidePinnedToggleBtn2');
@@ -60,8 +67,8 @@ describe('repository-list-view', () => {
 
       expect(repoList.querySelector('.empty-repos-card')).not.toBeNull();
       expect(repoList.textContent).toContain('No Repositories Yet');
-      expect(paginationControls.style.display).toBe('none');
-      expect(hidePinnedToggleBtn.style.display).toBe('none');
+      expect(paginationControls.classList.contains('hidden')).toBe(true);
+      expect(hidePinnedToggleBtn.hidden).toBe(true);
       expect(repoCountBadge.textContent).toBe('0');
     });
 
@@ -100,7 +107,7 @@ describe('repository-list-view', () => {
 
       const repoItems = repoList.querySelectorAll('.repo-item');
       expect(repoItems.length).toBe(2);
-      expect(hidePinnedToggleBtn.style.display).toBe('flex');
+      expect(hidePinnedToggleBtn.hidden).toBe(false);
       expect(repoCountBadge.textContent).toBe('2');
     });
 
@@ -264,7 +271,7 @@ describe('repository-list-view', () => {
     test('should show pagination controls when repos exceed page size', () => {
       renderRepoList(mockState, mockOnToggleMute, mockOnTogglePin, mockOnRemove);
 
-      expect(paginationControls.style.display).toBe('flex');
+      expect(paginationControls.classList.contains('hidden')).toBe(false);
       expect(pageInfo.textContent).toBe('Page 1 of 3');
     });
 
@@ -303,7 +310,7 @@ describe('repository-list-view', () => {
 
       renderRepoList(mockState, mockOnToggleMute, mockOnTogglePin, mockOnRemove);
 
-      expect(paginationControls.style.display).toBe('none');
+      expect(paginationControls.classList.contains('hidden')).toBe(true);
     });
   });
 
@@ -374,7 +381,7 @@ describe('repository-list-view', () => {
       renderRepoList(mockState, mockOnToggleMute, mockOnTogglePin, mockOnRemove);
 
       expect(repoList.textContent).toContain('No repositories match your search');
-      expect(paginationControls.style.display).toBe('none');
+      expect(paginationControls.classList.contains('hidden')).toBe(true);
     });
   });
 
diff --git a/tests/repository-validator.test.js b/tests/repository-validator.test.js
index 2eda289..168dd64 100644
--- a/tests/repository-validator.test.js
+++ b/tests/repository-validator.test.js
@@ -213,6 +213,30 @@ describe('repository-validator', () => {
         })
       );
     });
+
+    test('uses unauthenticated headers when no token is provided', async () => {
+      fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({
+          full_name: 'test/repo',
+          name: 'repo',
+          stargazers_count: 0,
+          private: false,
+          archived: false
+        })
+      });
+
+      await validateRepository('test/repo');
+
+      expect(fetch).toHaveBeenCalledWith(
+        expect.stringContaining('/repos/test/repo'),
+        expect.objectContaining({
+          headers: {
+            Accept: 'application/vnd.github.v3+json'
+          }
+        })
+      );
+    });
   });
 
   describe('quickValidateRepo', () => {
diff --git a/tests/storage-helpers.test.js b/tests/storage-helpers.test.js
index ea36814..92447f8 100644
--- a/tests/storage-helpers.test.js
+++ b/tests/storage-helpers.test.js
@@ -450,8 +450,8 @@ describe('Storage Helpers', () => {
   });
 
   describe('auth session helpers', () => {
-    it('returns auth session from session storage when available', async () => {
-      mockSessionStorage.githubAuthSession = {
+    it('returns auth session from persistent local storage when available', async () => {
+      mockLocalStorage.githubAuthSession = {
         accessToken: 'oauth-token',
         username: 'octocat'
       };
@@ -462,12 +462,35 @@ describe('Storage Helpers', () => {
         accessToken: 'oauth-token',
         username: 'octocat'
       });
+      expect(chrome.storage.session.remove).toHaveBeenCalledWith(
+        ['githubAuthSession'],
+        expect.any(Function)
+      );
       expect(chrome.storage.local.remove).toHaveBeenCalledWith(
         ['encryptedGithubAuthSession', 'encryptionKey'],
         expect.any(Function)
       );
     });
 
+    it('migrates a session-stored auth session into persistent local storage', async () => {
+      mockSessionStorage.githubAuthSession = {
+        accessToken: 'oauth-token',
+        username: 'octocat'
+      };
+
+      const result = await getAuthSession();
+
+      expect(result).toEqual({
+        accessToken: 'oauth-token',
+        username: 'octocat'
+      });
+      expect(mockLocalStorage.githubAuthSession).toEqual({
+        accessToken: 'oauth-token',
+        username: 'octocat'
+      });
+      expect(mockSessionStorage.githubAuthSession).toBeUndefined();
+    });
+
     it('clears legacy persisted auth data when no session exists', async () => {
       mockLocalStorage.encryptedGithubAuthSession = { iv: [1], data: [2] };
       mockLocalStorage.encryptionKey = [3, 4, 5];
@@ -477,16 +500,17 @@ describe('Storage Helpers', () => {
       expect(result).toBeNull();
     });
 
-    it('stores auth session in session storage only', async () => {
+    it('stores auth session in persistent local storage', async () => {
       await setAuthSession({
         accessToken: 'oauth-token',
         username: 'octocat'
       });
 
-      expect(mockSessionStorage.githubAuthSession).toEqual({
+      expect(mockLocalStorage.githubAuthSession).toEqual({
         accessToken: 'oauth-token',
         username: 'octocat'
       });
+      expect(mockSessionStorage.githubAuthSession).toBeUndefined();
       expect(chrome.storage.local.remove).toHaveBeenCalledWith(
         ['encryptedGithubAuthSession', 'encryptionKey'],
         expect.any(Function)
@@ -494,20 +518,22 @@ describe('Storage Helpers', () => {
     });
 
     it('clears the session when the payload is invalid', async () => {
-      mockSessionStorage.githubAuthSession = { accessToken: 'old-token' };
+      mockLocalStorage.githubAuthSession = { accessToken: 'old-token' };
 
       await setAuthSession({ username: 'octocat' });
 
-      expect(mockSessionStorage.githubAuthSession).toBeUndefined();
+      expect(mockLocalStorage.githubAuthSession).toBeUndefined();
     });
 
-    it('clears auth session from session storage and removes legacy persisted data', async () => {
+    it('clears auth session from local and session storage and removes legacy persisted data', async () => {
+      mockLocalStorage.githubAuthSession = { accessToken: 'oauth-token' };
       mockSessionStorage.githubAuthSession = { accessToken: 'oauth-token' };
       mockLocalStorage.encryptedGithubAuthSession = { iv: [], data: [] };
       mockLocalStorage.encryptionKey = [1, 2, 3];
 
       await clearAuthSession();
 
+      expect(mockLocalStorage.githubAuthSession).toBeUndefined();
       expect(mockSessionStorage.githubAuthSession).toBeUndefined();
       expect(chrome.storage.local.remove).toHaveBeenCalledWith(
         ['encryptedGithubAuthSession', 'encryptionKey'],
@@ -516,7 +542,7 @@ describe('Storage Helpers', () => {
     });
 
     it('returns the access token from the current auth session', async () => {
-      mockSessionStorage.githubAuthSession = {
+      mockLocalStorage.githubAuthSession = {
         accessToken: 'oauth-token',
         username: 'octocat'
       };
diff --git a/tests/theme-boot.test.js b/tests/theme-boot.test.js
new file mode 100644
index 0000000..6af2e8d
--- /dev/null
+++ b/tests/theme-boot.test.js
@@ -0,0 +1,65 @@
+import { beforeEach, describe, expect, jest, test } from '@jest/globals';
+
+async function loadThemeBootModule() {
+  jest.resetModules();
+  return import(`../shared/theme-boot.js?test=${Date.now()}-${Math.random()}`);
+}
+
+describe('theme boot', () => {
+  beforeEach(() => {
+    document.documentElement.className = '';
+    document.documentElement.removeAttribute('data-color-theme');
+    document.documentElement.style.colorScheme = '';
+    document.body.className = '';
+    document.body.removeAttribute('data-color-theme');
+    localStorage.clear();
+
+    window.matchMedia = jest.fn().mockReturnValue({
+      matches: false,
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn()
+    });
+
+    global.chrome = {
+      storage: {
+        sync: {
+          get: jest.fn((keys, callback) => {
+            callback({
+              theme: 'dark',
+              colorTheme: 'graphite'
+            });
+          })
+        }
+      }
+    };
+  });
+
+  test('hydrates the document theme from cached preferences immediately', async () => {
+    localStorage.setItem('devwatch:theme-preferences', JSON.stringify({
+      theme: 'dark',
+      colorTheme: 'obsidian'
+    }));
+
+    await loadThemeBootModule();
+
+    expect(document.documentElement.classList.contains('dark-mode')).toBe(true);
+    expect(document.body.classList.contains('dark-mode')).toBe(true);
+    expect(document.documentElement.getAttribute('data-color-theme')).toBe('graphite');
+    expect(document.body.getAttribute('data-color-theme')).toBe('graphite');
+    expect(document.documentElement.style.colorScheme).toBe('dark');
+  });
+
+  test('falls back to system + polar when nothing is cached or stored', async () => {
+    chrome.storage.sync.get.mockImplementation((keys, callback) => {
+      callback({});
+    });
+
+    await loadThemeBootModule();
+
+    expect(document.documentElement.classList.contains('dark-mode')).toBe(false);
+    expect(document.body.classList.contains('dark-mode')).toBe(false);
+    expect(document.documentElement.getAttribute('data-color-theme')).toBe('polar');
+    expect(document.body.getAttribute('data-color-theme')).toBe('polar');
+    expect(document.documentElement.style.colorScheme).toBe('light');
+  });
+});
diff --git a/tests/utils.test.js b/tests/utils.test.js
index 7e11e50..dd950b2 100644
--- a/tests/utils.test.js
+++ b/tests/utils.test.js
@@ -21,7 +21,7 @@ global.chrome = {
 };
 
 // Import functions from shared utilities
-import { formatDate, applyColorTheme } from '../shared/utils.js';
+import { formatDate, applyTheme, applyColorTheme } from '../shared/utils.js';
 
 describe('Date Formatting', () => {
 
@@ -82,12 +82,22 @@ describe('Activity Filtering', () => {
 
 describe('Color Theme Application', () => {
   beforeEach(() => {
+    document.documentElement.className = '';
+    document.documentElement.removeAttribute('data-color-theme');
+    document.documentElement.style.colorScheme = '';
+    document.body.className = '';
     document.body.removeAttribute('data-color-theme');
+    window.matchMedia = jest.fn().mockReturnValue({
+      matches: false,
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn()
+    });
   });
 
   test('applies color theme via data attribute', () => {
     applyColorTheme('graphite');
     expect(document.body.getAttribute('data-color-theme')).toBe('graphite');
+    expect(document.documentElement.getAttribute('data-color-theme')).toBe('graphite');
   });
 
   test('defaults to polar when called with null', () => {
@@ -106,5 +116,28 @@ describe('Color Theme Application', () => {
 
     applyColorTheme('obsidian');
     expect(document.body.getAttribute('data-color-theme')).toBe('obsidian');
+    expect(document.documentElement.getAttribute('data-color-theme')).toBe('obsidian');
+  });
+
+  test('applies dark mode to html and body when theme is dark', () => {
+    applyTheme('dark');
+
+    expect(document.body.classList.contains('dark-mode')).toBe(true);
+    expect(document.documentElement.classList.contains('dark-mode')).toBe(true);
+    expect(document.documentElement.style.colorScheme).toBe('dark');
+  });
+
+  test('follows system theme when theme is system', () => {
+    window.matchMedia = jest.fn().mockReturnValue({
+      matches: true,
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn()
+    });
+
+    applyTheme('system');
+
+    expect(document.body.classList.contains('dark-mode')).toBe(true);
+    expect(document.documentElement.classList.contains('dark-mode')).toBe(true);
+    expect(document.documentElement.style.colorScheme).toBe('dark');
   });
 });