diff --git a/.gitignore b/.gitignore
index c7e062c..be3cf8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,9 +6,11 @@ packages/sidebar/script.js
 packages/sidebar/icon.svg
 packages/sidebar/preload.js
 packages/sidebar/export.js
+packages/sidebar/colors.js
 packages/newtab/styles.css
 packages/newtab/script.js
 packages/newtab/icon.svg
 packages/newtab/preload.js
 packages/newtab/export.js
+packages/newtab/colors.js
 web-ext-artifacts
diff --git a/packages/newtab/newtab.html b/packages/newtab/newtab.html
index 7b9934e..a3579e3 100644
--- a/packages/newtab/newtab.html
+++ b/packages/newtab/newtab.html
@@ -56,6 +56,17 @@
         <div class="col-right" style="position: relative;">
             <!-- Settings Menu Popover -->
             <div id="settings-menu" class="settings-menu" hidden>
+                <div class="setting-row">
+                    <label for="theme-selector">Theme</label>
+                </div>
+                <select id="theme-selector">
+                    <option value="default">Default</option>
+                    <option value="catppuccin">Catppuccin</option>
+                    <option value="nord">Nord</option>
+                    <option value="solarized">Solarized</option>
+                    <option value="dracula">Dracula</option>
+                </select>
+                
                 <div class="setting-row">
                     <label for="font-slider">Font Size</label>
                     <span id="font-display">18px</span>
@@ -99,6 +110,7 @@
         </div>
     </footer>
 
+    <script type="text/javascript" src="colors.js"></script>
     <script type="text/javascript" src="script.js"></script>
     <script type="text/javascript" src="export.js"></script>
 </body>
diff --git a/packages/sidebar/panel.html b/packages/sidebar/panel.html
index 22a16a3..c7250ae 100644
--- a/packages/sidebar/panel.html
+++ b/packages/sidebar/panel.html
@@ -56,6 +56,17 @@
         <div class="col-right" style="position: relative;">
             <!-- Settings Menu Popover -->
             <div id="settings-menu" class="settings-menu" hidden>
+                <div class="setting-row">
+                    <label for="theme-selector">Theme</label>
+                </div>
+                <select id="theme-selector">
+                    <option value="default">Default</option>
+                    <option value="catppuccin">Catppuccin</option>
+                    <option value="nord">Nord</option>
+                    <option value="solarized">Solarized</option>
+                    <option value="dracula">Dracula</option>
+                </select>
+                
                 <div class="setting-row">
                     <label for="font-slider">Font Size</label>
                     <span id="font-display">18px</span>
@@ -99,6 +110,7 @@
         </div>
     </footer>
 
+    <script type="text/javascript" src="colors.js"></script>
     <script type="text/javascript" src="script.js"></script>
     <script type="text/javascript" src="export.js"></script>
 </body>
diff --git a/scripts/copy-shared.js b/scripts/copy-shared.js
index d957e60..6b2a481 100644
--- a/scripts/copy-shared.js
+++ b/scripts/copy-shared.js
@@ -6,7 +6,7 @@ const path = require('path');
 // Configuration
 const sharedDir = path.join(__dirname, '../shared');
 const packagesDir = path.join(__dirname, '../packages');
-const sharedFiles = ['script.js', 'styles.css', 'icon.svg', 'preload.js', 'export.js'];
+const sharedFiles = ['script.js', 'styles.css', 'icon.svg', 'preload.js', 'export.js', 'colors.js'];
 const targets = ['newtab', 'sidebar'];
 
 // Colors for console output
diff --git a/scripts/watch-shared.js b/scripts/watch-shared.js
index 7f9c77f..67791cb 100644
--- a/scripts/watch-shared.js
+++ b/scripts/watch-shared.js
@@ -8,7 +8,7 @@ const { build } = require('./copy-shared.js');
 
 // Configuration
 const sharedDir = path.join(__dirname, '../shared');
-const sharedFiles = ['script.js', 'styles.css', 'icon.svg', 'preload.js', 'export.js'];
+const sharedFiles = ['script.js', 'styles.css', 'icon.svg', 'preload.js', 'export.js', 'colors.js'];
 
 // Colors for console output
 const colors = {
diff --git a/shared/colors.js b/shared/colors.js
new file mode 100644
index 0000000..62653f4
--- /dev/null
+++ b/shared/colors.js
@@ -0,0 +1,291 @@
+// Color Management System for NoteKeeper
+const colorManager = {
+  // Default themes (original)
+  defaults: {
+    light: {
+      name: 'Default Light',
+      bg: '#ffffff',
+      fg: '#1a1a1a',
+      accent: '#27ae60',
+      border: '#e0e0e0',
+      subtle: '#666',
+      shadow: 'rgba(0, 0, 0, 0.1)'
+    },
+    dark: {
+      name: 'Default Dark',
+      bg: '#111111',
+      fg: '#f0f0f0',
+      accent: '#27ae60',
+      border: '#333333',
+      subtle: '#888',
+      shadow: 'rgba(0, 0, 0, 0.5)'
+    }
+  },
+
+  // Catppuccin
+  catppuccin: {
+    latte: {
+      name: 'Catppuccin Latte',
+      bg: '#eff1f5',
+      fg: '#4c4f69',
+      accent: '#1e66f5',
+      border: '#dce0e8',
+      subtle: '#8c8fa1',
+      shadow: 'rgba(220, 224, 232, 0.5)'
+    },
+    frappe: {
+      name: 'Catppuccin Frappé',
+      bg: '#303446',
+      fg: '#c6d0f5',
+      accent: '#8caaee',
+      border: '#51576d',
+      subtle: '#838ba7',
+      shadow: 'rgba(30, 32, 48, 0.5)'
+    }
+  },
+
+  // Nord theme
+  nord: {
+    light: {
+      name: 'Nord Light',
+      bg: '#eceff4',
+      fg: '#4c566a',
+      accent: '#5e81ac',
+      border: '#d8dee9',
+      subtle: '#81a1c1',
+      shadow: 'rgba(216, 222, 233, 0.5)'
+    },
+    dark: {
+      name: 'Nord Dark',
+      bg: '#2e3440',
+      fg: '#d8dee9',
+      accent: '#88c0d0',
+      border: '#4c566a',
+      subtle: '#81a1c1',
+      shadow: 'rgba(46, 52, 64, 0.5)'
+    }
+  },
+
+  // Solarized
+  solarized: {
+    light: {
+      name: 'Solarized Light',
+      bg: '#fdf6e3',
+      fg: '#657b83',
+      accent: '#268bd2',
+      border: '#93a1a1',
+      subtle: '#586e75',
+      shadow: 'rgba(147, 161, 161, 0.5)'
+    },
+    dark: {
+      name: 'Solarized Dark',
+      bg: '#002b36',
+      fg: '#839496',
+      accent: '#2aa198',
+      border: '#073642',
+      subtle: '#586e75',
+      shadow: 'rgba(7, 54, 66, 0.5)'
+    }
+  },
+
+  // Dracula
+  dracula: {
+    dark: {
+      name: 'Dracula',
+      bg: '#282A36',
+      fg: '#F8F8F2',
+      accent: '#FF79C6',
+      border: '#44475A',
+      subtle: '#6272A4',
+      shadow: 'rgba(40, 42, 54, 0.5)'
+    },
+    light: {
+      name: 'Alucard',
+      bg: '#FFFBEB',
+      fg: '#1F1F1F',
+      accent: '#A3144D',
+      border: '#CFCFDE',
+      subtle: '#6C664B',
+      shadow: 'rgba(255, 251, 235, 0.5)'
+    }
+  },
+
+  // Initialize color system
+  init() {
+    const savedTheme = localStorage.getItem('notekeeper-theme') || 'default';
+    this.applyTheme(savedTheme);
+  },
+
+  // Apply theme colors
+  applyTheme(themeName) {
+    let theme;
+    let isDarkMode = false;
+
+    // Handle theme selection
+    if (themeName === 'default') {
+      // Use original light/dark toggle behavior
+      const currentMode = localStorage.getItem('theme') || 'light';
+      theme = this.defaults[currentMode];
+      isDarkMode = currentMode === 'dark';
+    } else if (themeName === 'catppuccin') {
+      // Use Catppuccin behavior
+      const currentVariant = localStorage.getItem('catppuccin-variant') || 'latte';
+      theme = this.catppuccin[currentVariant];
+      isDarkMode = currentVariant === 'frappe';
+    } else if (themeName === 'nord') {
+      // Use Nord behavior
+      const currentVariant = localStorage.getItem('nord-variant') || 'light';
+      theme = this.nord[currentVariant];
+      isDarkMode = currentVariant === 'dark';
+    } else if (themeName === 'solarized') {
+      // Use Solarized behavior
+      const currentVariant = localStorage.getItem('solarized-variant') || 'light';
+      theme = this.solarized[currentVariant];
+      isDarkMode = currentVariant === 'dark';
+    } else if (themeName === 'dracula') {
+      // Use Dracula behavior
+      const currentVariant = localStorage.getItem('dracula-variant') || 'dark';
+      theme = this.dracula[currentVariant];
+      isDarkMode = currentVariant === 'dark';
+    } else {
+      // Direct theme selection
+      if (themeName.startsWith('catppuccin-')) {
+        const catppuccinVariant = themeName.replace('catppuccin-', '');
+        theme = this.catppuccin[catppuccinVariant];
+        isDarkMode = catppuccinVariant === 'frappe';
+      } else if (themeName.startsWith('nord-')) {
+        const nordVariant = themeName.replace('nord-', '');
+        theme = this.nord[nordVariant];
+        isDarkMode = nordVariant === 'dark';
+        } else if (themeName.startsWith('solarized-')) {
+          const solarizedVariant = themeName.replace('solarized-', '');
+          theme = this.solarized[solarizedVariant];
+          isDarkMode = solarizedVariant === 'dark';
+        } else if (themeName.startsWith('dracula-')) {
+          const draculaVariant = themeName.replace('dracula-', '');
+          theme = this.dracula[draculaVariant];
+          isDarkMode = draculaVariant === 'dark';
+        } else {
+        theme = this.defaults[themeName];
+        isDarkMode = themeName === 'dark';
+      }
+    }
+
+    if (!theme) return;
+
+    // Apply colors to CSS custom properties
+    Object.entries(theme).forEach(([key, value]) => {
+      if (key !== 'name') {
+        document.documentElement.style.setProperty(`--user-${key}`, value);
+      }
+    });
+
+    // Update theme attribute for existing CSS
+    document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
+
+    // Save preference
+    localStorage.setItem('notekeeper-theme', themeName);
+
+    // Update theme toggle aria-label
+    const themeToggle = document.getElementById('theme-toggle');
+    if (themeToggle) {
+      const isCurrentDark = isDarkMode;
+      themeToggle.setAttribute('aria-label', `Switch to ${isCurrentDark ? 'light' : 'dark'} theme`);
+    }
+  },
+
+  // Toggle between themes
+  toggleTheme() {
+    const currentTheme = localStorage.getItem('notekeeper-theme') || 'default';
+
+    if (currentTheme === 'default') {
+      // Toggle light/dark in default mode
+      const currentMode = localStorage.getItem('theme') || 'light';
+      const nextMode = currentMode === 'light' ? 'dark' : 'light';
+      localStorage.setItem('theme', nextMode);
+      this.applyTheme('default');
+    } else if (currentTheme === 'catppuccin') {
+      // Toggle latte/frappe in catppuccin mode
+      const currentVariant = localStorage.getItem('catppuccin-variant') || 'latte';
+      const nextVariant = currentVariant === 'latte' ? 'frappe' : 'latte';
+      localStorage.setItem('catppuccin-variant', nextVariant);
+      this.applyTheme('catppuccin');
+    } else if (currentTheme === 'nord') {
+      // Toggle light/dark in nord mode
+      const currentVariant = localStorage.getItem('nord-variant') || 'light';
+      const nextVariant = currentVariant === 'light' ? 'dark' : 'light';
+      localStorage.setItem('nord-variant', nextVariant);
+      this.applyTheme('nord');
+    } else if (currentTheme === 'solarized') {
+      // Toggle light/dark in solarized mode
+      const currentVariant = localStorage.getItem('solarized-variant') || 'light';
+      const nextVariant = currentVariant === 'light' ? 'dark' : 'light';
+      localStorage.setItem('solarized-variant', nextVariant);
+      this.applyTheme('solarized');
+    } else if (currentTheme === 'dracula') {
+      // Toggle light/dark in dracula mode
+      const currentVariant = localStorage.getItem('dracula-variant') || 'dark';
+      const nextVariant = currentVariant === 'light' ? 'dark' : 'light';
+      localStorage.setItem('dracula-variant', nextVariant);
+      this.applyTheme('dracula');
+    } else {
+      // Direct theme selection - toggle between default themes
+      const nextTheme = currentTheme === 'light' ? 'dark' : 'light';
+      localStorage.setItem('notekeeper-theme', nextTheme);
+      localStorage.setItem('theme', nextTheme);
+      this.applyTheme('default');
+    }
+  },
+
+  // Get next theme for aria-label (informational only)
+  getNextTheme(currentTheme) {
+    if (currentTheme === 'default') {
+      const currentMode = localStorage.getItem('theme') || 'light';
+      return currentMode === 'light' ? 'dark' : 'light';
+    } else if (currentTheme === 'catppuccin') {
+      const currentVariant = localStorage.getItem('catppuccin-variant') || 'latte';
+      return currentVariant === 'latte' ? 'frappe' : 'latte';
+    } else if (currentTheme === 'nord') {
+      const currentVariant = localStorage.getItem('nord-variant') || 'light';
+      return currentVariant === 'light' ? 'dark' : 'light';
+    } else if (currentTheme === 'solarized') {
+      const currentVariant = localStorage.getItem('solarized-variant') || 'light';
+      return currentVariant === 'light' ? 'dark' : 'light';
+    } else if (currentTheme === 'dracula') {
+      const currentVariant = localStorage.getItem('dracula-variant') || 'dark';
+      return currentVariant === 'light' ? 'dark' : 'light';
+    }
+    return currentTheme === 'light' ? 'dark' : 'light';
+  },
+
+  // Get current theme
+  getCurrentTheme() {
+    return localStorage.getItem('notekeeper-theme') || 'default';
+  }
+};
+
+  // Initialize theme selector dropdown value
+const initThemeSelector = () => {
+  const currentTheme = colorManager.getCurrentTheme();
+  const themeSelector = document.getElementById('theme-selector');
+  if (themeSelector) {
+    themeSelector.value = currentTheme;
+  }
+};
+
+// Initialize on DOM load
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize default variants for new themes if not set
+  if (!localStorage.getItem('nord-variant')) {
+    localStorage.setItem('nord-variant', 'light');
+  }
+  if (!localStorage.getItem('solarized-variant')) {
+    localStorage.setItem('solarized-variant', 'light');
+  }
+  if (!localStorage.getItem('dracula-variant')) {
+    localStorage.setItem('dracula-variant', 'dark');
+  }
+
+  colorManager.init();
+  initThemeSelector();
+});
diff --git a/shared/preload.js b/shared/preload.js
index 30f0f4f..a9913ee 100644
--- a/shared/preload.js
+++ b/shared/preload.js
@@ -1,7 +1,32 @@
 // Prevent FOUC by setting theme and font size before page renders
-const savedTheme = localStorage.getItem("theme");
+const savedTheme = localStorage.getItem("notekeeper-theme") || localStorage.getItem("theme");
 const sysTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
-document.documentElement.setAttribute("data-theme", savedTheme || (sysTheme ? "dark" : "light"));
+
+// Determine actual theme to apply
+let actualTheme = savedTheme;
+if (savedTheme === 'default') {
+  // For default theme, check the legacy theme storage
+  const legacyTheme = localStorage.getItem("theme");
+  actualTheme = legacyTheme || (sysTheme ? "dark" : "light");
+} else if (savedTheme === 'catppuccin') {
+  // For catppuccin theme, check the variant storage
+  const catppuccinVariant = localStorage.getItem("catppuccin-variant") || "latte";
+  actualTheme = catppuccinVariant === "frappe" ? "dark" : "light";
+} else if (savedTheme === 'nord') {
+  // For nord theme, check the variant storage
+  const nordVariant = localStorage.getItem("nord-variant") || "light";
+  actualTheme = nordVariant === "dark" ? "dark" : "light";
+} else if (savedTheme === 'solarized') {
+  // For solarized theme, check variant storage
+  const solarizedVariant = localStorage.getItem("solarized-variant") || "light";
+  actualTheme = solarizedVariant === "dark" ? "dark" : "light";
+} else if (savedTheme === 'dracula') {
+  // For dracula theme, check variant storage
+  const draculaVariant = localStorage.getItem("dracula-variant") || "dark";
+  actualTheme = draculaVariant === "dark" ? "dark" : "light";
+}
+
+document.documentElement.setAttribute("data-theme", actualTheme || (sysTheme ? "dark" : "light"));
 
 // Pre-load font size
 const savedSize = localStorage.getItem("fontsize");
diff --git a/shared/script.js b/shared/script.js
index abd2d34..1b5e0bf 100644
--- a/shared/script.js
+++ b/shared/script.js
@@ -7,6 +7,7 @@ const els = {
   slider: document.getElementById("font-slider"),
   fontDisplay: document.getElementById("font-display"),
   fontFamily: document.getElementById("font-family"),
+  themeSelector: document.getElementById("theme-selector"),
   words: document.getElementById("word-count"),
   status: document.getElementById("save-status"),
 };
@@ -82,16 +83,9 @@ const localStore = {
   },
 };
 
-// Theme Logic
+// Theme Logic - Now uses colorManager
 const toggleTheme = () => {
-  const next =
-    els.html.getAttribute("data-theme") === "dark" ? "light" : "dark";
-  els.html.setAttribute("data-theme", next);
-  localStore.set("theme", next);
-  els.toggleTheme.setAttribute(
-    "aria-label",
-    `Switch to ${next === "dark" ? "light" : "dark"}`
-  );
+  colorManager.toggleTheme();
 };
 
 els.toggleTheme.addEventListener("click", toggleTheme);
@@ -127,6 +121,10 @@ els.fontFamily.addEventListener("change", (e) => {
   updateFontFamily(e.target.value);
 });
 
+els.themeSelector.addEventListener("change", (e) => {
+  colorManager.applyTheme(e.target.value);
+});
+
 // Close menu when clicking outside
 document.addEventListener("click", (e) => {
   if (
@@ -252,6 +250,28 @@ if (storedFontFamily) {
   updateFontFamily(storedFontFamily);
 }
 
+// Migrate legacy theme storage for backward compatibility
+const migrateLegacyTheme = () => {
+  const legacyTheme = localStore.get("theme");
+  if (legacyTheme && !localStorage.getItem('notekeeper-theme')) {
+    // Migrate old theme to new system
+    if (legacyTheme === 'light' || legacyTheme === 'dark') {
+      localStorage.setItem('notekeeper-theme', legacyTheme);
+      localStorage.setItem('theme', legacyTheme);
+    } else if (legacyTheme === 'latte') {
+      localStorage.setItem('notekeeper-theme', 'catppuccin');
+      localStorage.setItem('catppuccin-variant', 'latte');
+    } else if (legacyTheme === 'frappe') {
+      localStorage.setItem('notekeeper-theme', 'catppuccin');
+      localStorage.setItem('catppuccin-variant', 'frappe');
+    }
+    // Remove old theme key
+    localStore.remove("theme");
+  }
+};
+
+migrateLegacyTheme();
+
 els.note.addEventListener("input", (e) => {
   updateStats(e.target.value);
   save(e.target.value);
diff --git a/shared/styles.css b/shared/styles.css
index d9ff2c3..9f19a18 100644
--- a/shared/styles.css
+++ b/shared/styles.css
@@ -1,11 +1,21 @@
 :root {
-  --bg: #ffffff;
-  --fg: #1a1a1a;
-  --border: #e0e0e0;
-  --subtle: #666;
-  --accent: #27ae60;
-  --shadow: rgba(0, 0, 0, 0.1);
-
+  /* User Customizable Colors - Set by colorManager */
+  --user-bg: #eff1f5;
+  --user-fg: #4c4f69;
+  --user-accent: #1e66f5;
+  --user-border: #dce0e8;
+  --user-subtle: #8c8fa1;
+  --user-shadow: rgba(220, 224, 232, 0.5);
+
+  /* Derived Colors - Use user colors */
+  --bg: var(--user-bg);
+  --fg: var(--user-fg);
+  --accent: var(--user-accent);
+  --border: var(--user-border);
+  --subtle: var(--user-subtle);
+  --shadow: var(--user-shadow);
+
+  /* Font & Layout */
   --font-ui: ui-monospace, SFMono-Regular, Menlo, monospace;
   --font-body: "Georgia", serif;
   --measure: 65ch;
@@ -14,11 +24,12 @@
 }
 
 [data-theme="dark"] {
-  --bg: #111111;
-  --fg: #f0f0f0;
-  --border: #333333;
-  --subtle: #888;
-  --shadow: rgba(0, 0, 0, 0.5);
+  --user-bg: #303446;
+  --user-fg: #c6d0f5;
+  --user-accent: #8caaee;
+  --user-border: #51576d;
+  --user-subtle: #838ba7;
+  --user-shadow: rgba(30, 32, 48, 0.5);
 }
 
 *,
@@ -221,7 +232,20 @@ textarea:focus {
   /* font-size: 0.85rem; */
 }
 
-#font-family:focus {
+#font-family:focus,
+#theme-selector:focus {
   outline: none;
   border-color: var(--subtle);
+}
+
+#theme-selector {
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: var(--font-ui);
+  /* font-size: 0.85rem; */
 }
\ No newline at end of file