diff --git a/popup/popup.css b/popup/popup.css
new file mode 100644
index 0000000..4001275
--- /dev/null
+++ b/popup/popup.css
@@ -0,0 +1,159 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  width: 320px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 13px;
+  color: #1a1a1a;
+  background: #ffffff;
+}
+
+.popup-container {
+  padding: 16px;
+}
+
+h1 {
+  font-size: 16px;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+h2 {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.section {
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.toggle-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+
+label {
+  display: block;
+  margin-bottom: 4px;
+}
+
+select {
+  width: 100%;
+  padding: 4px 8px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  font-size: 13px;
+  margin-top: 4px;
+}
+
+fieldset {
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 8px 12px;
+  margin-bottom: 8px;
+}
+
+legend {
+  font-weight: 600;
+  font-size: 12px;
+  padding: 0 4px;
+}
+
+fieldset label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+  font-size: 12px;
+}
+
+fieldset input[type="color"] {
+  width: 40px;
+  height: 24px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  padding: 1px;
+  cursor: pointer;
+}
+
+fieldset input[type="text"] {
+  width: 80px;
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: monospace;
+}
+
+.btn-secondary {
+  background: #f0f0f0;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  padding: 4px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  margin-top: 4px;
+}
+
+.btn-secondary:hover {
+  background: #e0e0e0;
+}
+
+.btn-danger {
+  background: #d9534f;
+  color: white;
+  border: 1px solid #c9302c;
+  border-radius: 3px;
+  padding: 6px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  width: 100%;
+}
+
+.btn-danger:hover {
+  background: #c9302c;
+}
+
+.subreddit-entry {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-bottom: 6px;
+  padding: 6px;
+  background: #fafafa;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.subreddit-entry input[type="text"] {
+  flex: 1;
+  min-width: 0;
+}
+
+.subreddit-entry .btn-remove {
+  background: none;
+  border: none;
+  color: #999;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 0 4px;
+}
+
+.subreddit-entry .btn-remove:hover {
+  color: #d9534f;
+}
diff --git a/popup/popup.html b/popup/popup.html
new file mode 100644
index 0000000..49944fc
--- /dev/null
+++ b/popup/popup.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div class="popup-container">
+    <h1>Reddit Tweaks</h1>
+
+    <div class="section">
+      <label class="toggle-row">
+        <span>Enabled</span>
+        <input type="checkbox" id="enabled">
+      </label>
+    </div>
+
+    <div class="section">
+      <label for="darkMode">Dark Mode</label>
+      <select id="darkMode">
+        <option value="auto">Auto (detect RES)</option>
+        <option value="light">Force Light</option>
+        <option value="dark">Force Dark</option>
+      </select>
+    </div>
+
+    <div class="section">
+      <h2>Light Mode Colors</h2>
+      <fieldset>
+        <legend>Subreddit Badge</legend>
+        <label>Background <input type="text" id="light.subredditBgColor"></label>
+        <label>Border <input type="color" id="light.subredditBorderColor"></label>
+        <label>Text <input type="color" id="light.subredditTextColor"></label>
+      </fieldset>
+      <fieldset>
+        <legend>Comments Badge</legend>
+        <label>Background <input type="color" id="light.commentsBgColor"></label>
+        <label>Border <input type="color" id="light.commentsBorderColor"></label>
+        <label>Text <input type="color" id="light.commentsTextColor"></label>
+      </fieldset>
+      <button id="resetLight" class="btn-secondary">Reset Light Defaults</button>
+    </div>
+
+    <div class="section">
+      <h2>Dark Mode Colors</h2>
+      <fieldset>
+        <legend>Subreddit Badge</legend>
+        <label>Background <input type="text" id="dark.subredditBgColor"></label>
+        <label>Border <input type="color" id="dark.subredditBorderColor"></label>
+        <label>Text <input type="color" id="dark.subredditTextColor"></label>
+      </fieldset>
+      <fieldset>
+        <legend>Comments Badge</legend>
+        <label>Background <input type="color" id="dark.commentsBgColor"></label>
+        <label>Border <input type="color" id="dark.commentsBorderColor"></label>
+        <label>Text <input type="color" id="dark.commentsTextColor"></label>
+      </fieldset>
+      <button id="resetDark" class="btn-secondary">Reset Dark Defaults</button>
+    </div>
+
+    <div class="section">
+      <h2>Per-Subreddit Overrides</h2>
+      <div id="subredditList"></div>
+      <button id="addSubreddit" class="btn-secondary">+ Add Subreddit</button>
+    </div>
+
+    <div class="section">
+      <button id="resetAll" class="btn-danger">Reset All Settings</button>
+    </div>
+  </div>
+  <script src="../lib/settings.js"></script>
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/popup/popup.js b/popup/popup.js
new file mode 100644
index 0000000..ac158b3
--- /dev/null
+++ b/popup/popup.js
@@ -0,0 +1,191 @@
+(function () {
+  "use strict";
+
+  const COLOR_KEYS = [
+    "light.subredditBorderColor",
+    "light.subredditTextColor",
+    "light.commentsBgColor",
+    "light.commentsBorderColor",
+    "light.commentsTextColor",
+    "dark.subredditBorderColor",
+    "dark.subredditTextColor",
+    "dark.commentsBgColor",
+    "dark.commentsBorderColor",
+    "dark.commentsTextColor",
+  ];
+
+  const BG_KEYS = [
+    "light.subredditBgColor",
+    "dark.subredditBgColor",
+  ];
+
+  function colorToHex(val) {
+    if (!val || val === "transparent") return "#ffffff";
+    return val;
+  }
+
+  function populateControls(settings) {
+    document.getElementById("enabled").checked = settings.enabled;
+    document.getElementById("darkMode").value = settings.darkMode;
+
+    COLOR_KEYS.forEach(function (key) {
+      const el = document.getElementById(key);
+      if (el) el.value = colorToHex(settings[key]);
+    });
+
+    BG_KEYS.forEach(function (key) {
+      const el = document.getElementById(key);
+      if (el) {
+        el.value = settings[key] === "transparent" ? "" : settings[key];
+        el.placeholder = "transparent";
+      }
+    });
+
+    renderSubredditOverrides(settings.subredditColors || {});
+  }
+
+  function renderSubredditOverrides(overrides) {
+    const list = document.getElementById("subredditList");
+    list.innerHTML = "";
+
+    Object.entries(overrides).forEach(function ([name, colors]) {
+      addSubredditEntry(name, colors);
+    });
+  }
+
+  function addSubredditEntry(name, colors) {
+    const list = document.getElementById("subredditList");
+    const entry = document.createElement("div");
+    entry.className = "subreddit-entry";
+
+    const nameInput = document.createElement("input");
+    nameInput.type = "text";
+    nameInput.placeholder = "subreddit";
+    nameInput.value = name || "";
+
+    const bgInput = document.createElement("input");
+    bgInput.type = "color";
+    bgInput.value = colorToHex(colors?.bg);
+    bgInput.title = "Background";
+
+    const borderInput = document.createElement("input");
+    borderInput.type = "color";
+    borderInput.value = colorToHex(colors?.border);
+    borderInput.title = "Border";
+
+    const textInput = document.createElement("input");
+    textInput.type = "color";
+    textInput.value = colorToHex(colors?.text);
+    textInput.title = "Text";
+
+    const removeBtn = document.createElement("button");
+    removeBtn.className = "btn-remove";
+    removeBtn.textContent = "×";
+    removeBtn.addEventListener("click", function () {
+      entry.remove();
+      saveFromControls();
+    });
+
+    [nameInput, bgInput, borderInput, textInput].forEach(function (input) {
+      input.addEventListener("change", saveFromControls);
+    });
+
+    entry.appendChild(nameInput);
+    entry.appendChild(bgInput);
+    entry.appendChild(borderInput);
+    entry.appendChild(textInput);
+    entry.appendChild(removeBtn);
+    list.appendChild(entry);
+  }
+
+  function collectSubredditOverrides() {
+    const overrides = {};
+    const entries = document.querySelectorAll(".subreddit-entry");
+    entries.forEach(function (entry) {
+      const inputs = entry.querySelectorAll("input");
+      const name = inputs[0].value.trim().replace(/^r\//, "");
+      if (name) {
+        overrides[name] = {
+          bg: inputs[1].value,
+          border: inputs[2].value,
+          text: inputs[3].value,
+        };
+      }
+    });
+    return overrides;
+  }
+
+  function saveFromControls() {
+    const settings = {
+      enabled: document.getElementById("enabled").checked,
+      darkMode: document.getElementById("darkMode").value,
+      subredditColors: collectSubredditOverrides(),
+    };
+
+    COLOR_KEYS.forEach(function (key) {
+      const el = document.getElementById(key);
+      if (el) settings[key] = el.value;
+    });
+
+    BG_KEYS.forEach(function (key) {
+      const el = document.getElementById(key);
+      if (el) {
+        settings[key] = el.value.trim() || "transparent";
+      }
+    });
+
+    window.RedditTweaks.saveSettings(settings);
+  }
+
+  async function init() {
+    const settings = await window.RedditTweaks.loadSettings();
+    populateControls(settings);
+
+    document.getElementById("enabled").addEventListener("change", saveFromControls);
+    document.getElementById("darkMode").addEventListener("change", saveFromControls);
+
+    COLOR_KEYS.forEach(function (key) {
+      const el = document.getElementById(key);
+      if (el) el.addEventListener("input", saveFromControls);
+    });
+
+    BG_KEYS.forEach(function (key) {
+      const el = document.getElementById(key);
+      if (el) el.addEventListener("input", saveFromControls);
+    });
+
+    document.getElementById("addSubreddit").addEventListener("click", function () {
+      addSubredditEntry("", {});
+    });
+
+    document.getElementById("resetLight").addEventListener("click", async function () {
+      const settings = await window.RedditTweaks.loadSettings();
+      const DEFAULTS = window.RedditTweaks.DEFAULTS;
+      Object.keys(DEFAULTS).forEach(function (key) {
+        if (key.startsWith("light.")) settings[key] = DEFAULTS[key];
+      });
+      await window.RedditTweaks.saveSettings(settings);
+      populateControls(settings);
+    });
+
+    document.getElementById("resetDark").addEventListener("click", async function () {
+      const settings = await window.RedditTweaks.loadSettings();
+      const DEFAULTS = window.RedditTweaks.DEFAULTS;
+      Object.keys(DEFAULTS).forEach(function (key) {
+        if (key.startsWith("dark.")) settings[key] = DEFAULTS[key];
+      });
+      await window.RedditTweaks.saveSettings(settings);
+      populateControls(settings);
+    });
+
+    document.getElementById("resetAll").addEventListener("click", async function () {
+      if (confirm("Reset all settings to defaults?")) {
+        await window.RedditTweaks.resetSettings();
+        const settings = await window.RedditTweaks.loadSettings();
+        populateControls(settings);
+      }
+    });
+  }
+
+  init();
+})();