diff --git a/extension/public/popup.html b/extension/public/popup.html
index a04acd4..55fee85 100644
--- a/extension/public/popup.html
+++ b/extension/public/popup.html
@@ -79,6 +79,22 @@ <h2 id="account-heading" class="visually-hidden">Account</h2>
             </svg>
           </div>
         </div>
+
+        <!-- Display Mode Section -->
+        <div class="popup__setting">
+          <label class="popup__setting-label" for="displayMode"
+            >Display Mode</label
+          >
+          <select
+            id="displayMode"
+            class="popup__setting-select"
+            aria-label="Choose badge display mode"
+          >
+            <option value="full">Default</option>
+            <option value="compact">Compact</option>
+          </select>
+        </div>
+
         <button
           id="logoutBtn"
           class="popup__btn popup__btn--danger"
diff --git a/extension/public/styles.css b/extension/public/styles.css
index 3a8f66c..9015714 100644
--- a/extension/public/styles.css
+++ b/extension/public/styles.css
@@ -1,3 +1,15 @@
+:root {
+  --badge-dark-bg: rgba(110, 118, 129, 0.15);
+  --badge-dark-color: #e6edf3;
+  --badge-dark-border: rgba(110, 118, 129, 0.3);
+  --badge-dark-dot-shadow: 0 0 0 1px rgba(13, 17, 23, 0.4);
+  --badge-dark-compact-border: rgba(13, 17, 23, 0.8);
+  --badge-dark-compact-shadow: 0 0 0 1px rgba(205, 217, 229, 0.1),
+    0 1px 2px rgba(1, 4, 9, 0.3);
+  --badge-dark-compact-hover-shadow: 0 0 0 2px rgba(13, 17, 23, 0.8),
+    0 0 0 3px rgba(205, 217, 229, 0.15), 0 2px 8px rgba(1, 4, 9, 0.4);
+}
+
 .Title-module__container--XD9YG {
   display: flex !important;
   align-items: center !important;
@@ -30,6 +42,7 @@
   border: 1px solid rgba(208, 215, 222, 0.8);
   box-sizing: border-box;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  cursor: default;
 }
 
 .project-status-badge::before {
@@ -45,30 +58,81 @@
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
 }
 
+.project-status-badge--compact {
+  width: 10px;
+  height: 10px;
+  padding: 0;
+  border-radius: 50%;
+  background-color: var(--status-color);
+  border: 2px solid #ffffff;
+  box-shadow: 0 0 0 1px rgba(31, 35, 40, 0.15), 0 1px 2px rgba(31, 35, 40, 0.12);
+  cursor: help;
+  min-width: auto !important;
+  font-size: 0;
+  line-height: 0;
+  transition: transform 0.15s cubic-bezier(0.2, 0, 0.38, 0.9),
+    box-shadow 0.15s cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.project-status-badge--compact::before {
+  display: none;
+}
+
+.project-status-badge--compact:hover {
+  transform: scale(1.3);
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(31, 35, 40, 0.2),
+    0 2px 8px rgba(31, 35, 40, 0.18);
+  z-index: 1;
+}
+
+.project-status-badge--compact:focus-visible {
+  outline: 2px solid #0969da;
+  outline-offset: 2px;
+  transform: scale(1.3);
+}
+
 /* Dark mode styles - supports both system preference and GitHub's manual theme selection */
 @media (prefers-color-scheme: dark) {
   .project-status-badge {
-    background-color: rgba(110, 118, 129, 0.15);
-    color: #e6edf3;
-    border: 1px solid rgba(110, 118, 129, 0.3);
+    background-color: var(--badge-dark-bg);
+    color: var(--badge-dark-color);
+    border: 1px solid var(--badge-dark-border);
     box-shadow: none;
   }
 
   .project-status-badge::before {
     opacity: 0.85;
-    box-shadow: 0 0 0 1px rgba(13, 17, 23, 0.4);
+    box-shadow: var(--badge-dark-dot-shadow);
+  }
+
+  .project-status-badge--compact {
+    border-color: var(--badge-dark-compact-border);
+    box-shadow: var(--badge-dark-compact-shadow);
+  }
+
+  .project-status-badge--compact:hover {
+    box-shadow: var(--badge-dark-compact-hover-shadow);
   }
 }
 
 /* GitHub manual dark theme selection (data-color-mode="dark") */
 [data-color-mode="dark"] .project-status-badge {
-  background-color: rgba(110, 118, 129, 0.15);
-  color: #e6edf3;
-  border: 1px solid rgba(110, 118, 129, 0.3);
+  background-color: var(--badge-dark-bg);
+  color: var(--badge-dark-color);
+  border: 1px solid var(--badge-dark-border);
   box-shadow: none;
 }
 
 [data-color-mode="dark"] .project-status-badge::before {
   opacity: 0.85;
-  box-shadow: 0 0 0 1px rgba(13, 17, 23, 0.4);
+  box-shadow: var(--badge-dark-dot-shadow);
+}
+
+[data-color-mode="dark"] .project-status-badge--compact {
+  border-color: var(--badge-dark-compact-border);
+  box-shadow: var(--badge-dark-compact-shadow);
+}
+
+[data-color-mode="dark"] .project-status-badge--compact:hover {
+  box-shadow: var(--badge-dark-compact-hover-shadow);
 }
diff --git a/extension/public/styles/popup.css b/extension/public/styles/popup.css
index 47403ac..1134ab4 100644
--- a/extension/public/styles/popup.css
+++ b/extension/public/styles/popup.css
@@ -50,7 +50,7 @@
   --btn-primary-hover: #1f2328;
   --btn-primary-active: #1c2128;
   --btn-primary-shadow: 0 1px 0 rgba(31, 35, 40, 0.1),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.03);
+    inset 0 1px 0 rgba(255, 255, 255, 0.03);
 
   --btn-danger-bg: #cf222e;
   --btn-danger-hover: #a40e26;
@@ -63,7 +63,7 @@
 
   /* Typography */
   --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
-                 Helvetica, Arial, sans-serif;
+    Helvetica, Arial, sans-serif;
   --font-size-xs: 12px;
   --font-size-sm: 13px;
   --font-size-base: 14px;
@@ -217,8 +217,7 @@ body {
 .popup__btn--primary:hover:not(:disabled) {
   background-color: var(--btn-github-hover);
   border-color: rgba(31, 35, 40, 0.25);
-  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1),
-              0 0 0 3px rgba(36, 41, 47, 0.1);
+  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1), 0 0 0 3px rgba(36, 41, 47, 0.1);
 }
 
 .popup__btn--primary:active:not(:disabled) {
@@ -309,7 +308,11 @@ body {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--color-success-emphasis) 0%, var(--color-accent-emphasis) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--color-success-emphasis) 0%,
+    var(--color-accent-emphasis) 100%
+  );
   display: flex;
   align-items: center;
   justify-content: center;
@@ -467,7 +470,8 @@ body {
 }
 
 @keyframes successPulse {
-  0%, 100% {
+  0%,
+  100% {
     transform: scale(1);
   }
   50% {
@@ -479,6 +483,49 @@ body {
   animation: successPulse 0.5s ease-out;
 }
 
+/* ============================================
+   Settings
+   ============================================ */
+
+.popup__setting {
+  margin-bottom: var(--space-4);
+  padding: var(--space-4);
+  background-color: var(--color-canvas-subtle);
+  border: 1px solid var(--color-border-muted);
+  border-radius: var(--radius-md);
+}
+
+.popup__setting-label {
+  display: block;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg-default);
+  margin-bottom: var(--space-2);
+}
+
+.popup__setting-select {
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.popup__setting-select:hover {
+  border-color: var(--color-accent-emphasis);
+}
+
+.popup__setting-select:focus {
+  outline: none;
+  border-color: var(--color-accent-emphasis);
+  box-shadow: 0 0 0 3px var(--color-accent-bg);
+}
+
 /* ============================================
    Utilities
    ============================================ */
diff --git a/extension/src/content.ts b/extension/src/content.ts
index 2c8ecfa..c9cd3ab 100644
--- a/extension/src/content.ts
+++ b/extension/src/content.ts
@@ -1,4 +1,6 @@
 (() => {
+  type DisplayMode = "compact" | "full";
+
   type IssueStatus = {
     color: string | null;
     number: number;
@@ -18,8 +20,10 @@
   };
 
   const BADGE_CLASS = "project-status-badge";
+  const BADGE_COMPACT_CLASS = "project-status-badge--compact";
   const DEBOUNCE_DELAY_MS = 500;
   const DEFAULT_BADGE_COLOR = "#6e7781";
+  const DISPLAY_MODE_KEY = "displayMode";
   const GITHUB_ISSUES_URL_PATTERN =
     /https:\/\/github\.com\/[^/]+\/[^/]+\/issues/;
   const ISSUE_LINK_SELECTOR = '[data-testid="issue-pr-title-link"]';
@@ -66,21 +70,74 @@
     return maxWidth;
   };
 
-  const updateBadgeWidths = () => {
+  const updateBadgeWidths = async () => {
+    const displayMode = await getDisplayMode();
+    if (displayMode === "compact") return;
+
     const maxWidth = calculateMaxBadgeWidth();
     if (maxWidth === 0) return;
 
-    const badges = document.querySelectorAll(`.${BADGE_CLASS}`);
+    const badges = document.querySelectorAll(
+      `.${BADGE_CLASS}:not(.${BADGE_COMPACT_CLASS})`
+    );
     badges.forEach((badge) => {
       (badge as HTMLElement).style.minWidth = `${maxWidth}px`;
     });
   };
 
-  const addStatusBadge = (
+  const updateBadgeDisplay = async (
+    badge: HTMLElement,
+    displayMode: DisplayMode,
+    status: string
+  ) => {
+    if (displayMode === "compact") {
+      badge.classList.add(BADGE_COMPACT_CLASS);
+      badge.textContent = "";
+      badge.title = status;
+      badge.setAttribute("role", "img");
+      badge.setAttribute("aria-label", `Status: ${status}`);
+      badge.tabIndex = 0;
+      badge.style.minWidth = "";
+    } else {
+      badge.classList.remove(BADGE_COMPACT_CLASS);
+      badge.textContent = status;
+      badge.title = "";
+      badge.removeAttribute("role");
+      badge.removeAttribute("aria-label");
+      badge.tabIndex = -1;
+    }
+  };
+
+  const refreshAllBadges = async () => {
+    const displayMode = await getDisplayMode();
+    const badges = document.querySelectorAll(`.${BADGE_CLASS}`);
+
+    for (const badge of Array.from(badges)) {
+      const statusText = badge.getAttribute("data-status");
+      if (statusText) {
+        await updateBadgeDisplay(badge as HTMLElement, displayMode, statusText);
+      }
+    }
+
+    if (displayMode === "full") {
+      requestAnimationFrame(() => {
+        updateBadgeWidths();
+      });
+    }
+  };
+
+  const getDisplayMode = async (): Promise<DisplayMode> => {
+    const result = await chrome.storage.sync.get([DISPLAY_MODE_KEY]);
+    const value = result[DISPLAY_MODE_KEY];
+    return value === "compact" ? "compact" : "full";
+  };
+
+  const addStatusBadge = async (
     issueNumber: number,
     status: string,
     color: string | null
   ) => {
+    const displayMode = await getDisplayMode();
     const issueLinks = document.querySelectorAll(ISSUE_LINK_SELECTOR);
 
     for (const link of Array.from(issueLinks)) {
@@ -97,9 +154,11 @@
 
       const badge = document.createElement("span");
       badge.className = BADGE_CLASS;
-      badge.textContent = status;
+      badge.setAttribute("data-status", status);
       badge.style.setProperty("--status-color", color || DEFAULT_BADGE_COLOR);
 
+      await updateBadgeDisplay(badge, displayMode, status);
+
       container.insertBefore(badge, h3Element);
       return;
     }
@@ -142,15 +201,13 @@
 
       const statuses = response.statuses || [];
 
-      statuses.forEach(({ color, number, status }) => {
+      for (const { color, number, status } of statuses) {
         if (status) {
-          addStatusBadge(number, status, color);
+          await addStatusBadge(number, status, color);
         }
-      });
+      }
 
-      requestAnimationFrame(() => {
-        updateBadgeWidths();
-      });
+      await updateBadgeWidths();
     } catch (error) {
       // Silent fail
     } finally {
@@ -235,7 +292,12 @@
 
   chrome.runtime.onMessage.addListener((message) => {
     if (message.type === "RELOAD_BADGES") {
-      updateIssueStatuses();
+      const badges = document.querySelectorAll(`.${BADGE_CLASS}`);
+      if (badges.length > 0) {
+        refreshAllBadges();
+      } else {
+        updateIssueStatuses();
+      }
     }
   });
 
diff --git a/extension/src/popup.ts b/extension/src/popup.ts
index 264c8d3..b5b173e 100644
--- a/extension/src/popup.ts
+++ b/extension/src/popup.ts
@@ -4,9 +4,12 @@
     refresh_token: string;
   };
 
+  type DisplayMode = "compact" | "full";
+
   type StatusType = "error" | "info" | "success";
 
   type UIElements = {
+    displayModeSelect: HTMLSelectElement;
     loginBtn: HTMLButtonElement;
     loginSection: HTMLElement;
     loggedInSection: HTMLElement;
@@ -25,7 +28,9 @@
     SUCCESS_PULSE: "popup__user-info--success",
     VISIBLE: "popup__status--visible",
   } as const;
+  const DISPLAY_MODE_KEY = "displayMode";
   const ELEMENT_ID = {
+    DISPLAY_MODE: "displayMode",
     LOGIN_BTN: "loginBtn",
     LOGIN_SECTION: "loginSection",
     LOGGED_IN_SECTION: "loggedInSection",
@@ -69,6 +74,7 @@
     };
 
     return {
+      displayModeSelect: getElement<HTMLSelectElement>(ELEMENT_ID.DISPLAY_MODE),
       loginBtn: getElement<HTMLButtonElement>(ELEMENT_ID.LOGIN_BTN),
       loginSection: getElement<HTMLElement>(ELEMENT_ID.LOGIN_SECTION),
       loggedInSection: getElement<HTMLElement>(ELEMENT_ID.LOGGED_IN_SECTION),
@@ -259,11 +265,35 @@
     }
   };
 
+  const loadDisplayMode = async (elements: UIElements) => {
+    const { displayModeSelect } = elements;
+    const result = await chrome.storage.sync.get([DISPLAY_MODE_KEY]);
+    const value = result[DISPLAY_MODE_KEY];
+    const mode = value === "compact" ? "compact" : "full";
+    displayModeSelect.value = mode;
+  };
+
+  const handleDisplayModeChange = async (
+    elements: UIElements,
+    mode: DisplayMode
+  ) => {
+    await chrome.storage.sync.set({ [DISPLAY_MODE_KEY]: mode });
+
+    const [tab] = await chrome.tabs.query({
+      active: true,
+      currentWindow: true,
+    });
+    if (tab?.id) {
+      chrome.tabs.sendMessage(tab.id, { type: "RELOAD_BADGES" });
+    }
+  };
+
   const init = async () => {
     try {
       const elements = getUIElements();
 
       await updateUI(elements);
+      await loadDisplayMode(elements);
 
       elements.loginBtn.addEventListener("click", () => handleLogin(elements));
       elements.logoutBtn.addEventListener("click", () =>
@@ -272,6 +302,12 @@
       elements.statusClose.addEventListener("click", () =>
         hideStatus(elements)
       );
+      elements.displayModeSelect.addEventListener("change", (e) => {
+        if (!(e.target instanceof HTMLSelectElement)) return;
+        const value = e.target.value;
+        const mode: DisplayMode = value === "compact" ? "compact" : "full";
+        handleDisplayModeChange(elements, mode);
+      });
     } catch (error) {
       console.error("Failed to initialize popup:", error);
     }