diff --git a/src/popup.html b/src/popup.html
index b5ac4cc..6838625 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -6,7 +6,7 @@
   <title>OpenScript</title>
   <link rel="stylesheet" href="./styles/index.css" />
 </head>
-<body class="bg-navy-950 text-slate-100 flex flex-col h-[560px] w-[480px] overflow-hidden select-none">
+<body class="bg-slate-50 text-slate-900 flex flex-col h-[560px] w-[480px] overflow-hidden select-none">
   <div id="app" class="flex flex-col h-full"></div>
   <script type="module" src="./popup.js"></script>
 </body>
diff --git a/src/popup.js b/src/popup.js
index a430502..e8e6143 100644
--- a/src/popup.js
+++ b/src/popup.js
@@ -117,26 +117,26 @@ const removeSecret = async k => {
 
 // UI Templates
 const renderHeader = () => `
-  <header class="bg-navy-900 border-b border-navy-700/60 px-3 py-2 flex items-center justify-between shrink-0">
+  <header class="bg-white border-b border-slate-200 px-3 py-2 flex items-center justify-between shrink-0 shadow-xs">
     <div class="flex items-center gap-2 cursor-pointer" id="nav-brand">
       <img src="/icons/icon-16.png" class="w-4 h-4 rounded-sm" />
-      <span class="font-bold text-sm tracking-tight text-white flex items-center gap-1.5">
+      <span class="font-bold text-sm tracking-tight text-slate-900 flex items-center gap-1.5">
         OpenScript
-        <span class="text-[10px] font-mono px-1 py-0.2 rounded bg-navy-800 text-sky-400 border border-navy-700">1.0</span>
+        <span class="text-[10px] font-mono px-1 py-0.2 rounded bg-slate-100 text-sky-700 border border-slate-200">1.0</span>
       </span>
     </div>
     <nav class="flex items-center gap-1.5 text-xs font-medium">
       <button id="nav-list" class="px-2.5 py-1 rounded transition-colors ${
-        state.tab === 'list' ? 'bg-navy-700 text-white font-semibold' : 'text-slate-300 hover:text-white hover:bg-navy-800'
+        state.tab === 'list' ? 'bg-slate-100 text-slate-900 font-semibold border border-slate-300 shadow-xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
       }">
         Scripts <span class="text-[10px] opacity-75">(${state.scripts.length})</span>
       </button>
       <button id="nav-secrets" class="px-2.5 py-1 rounded transition-colors ${
-        state.tab === 'secrets' ? 'bg-navy-700 text-white font-semibold' : 'text-slate-300 hover:text-white hover:bg-navy-800'
+        state.tab === 'secrets' ? 'bg-slate-100 text-slate-900 font-semibold border border-slate-300 shadow-xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
       }">
         Secrets <span class="text-[10px] opacity-75">(${Object.keys(state.secrets).length})</span>
       </button>
-      <button id="nav-new" class="ml-1 text-amber-400 hover:text-amber-300 font-bold px-2 py-0.5 rounded border border-amber-500/40 bg-amber-500/10 transition-colors flex items-center gap-1">
+      <button id="nav-new" class="ml-1 text-amber-900 hover:text-amber-950 font-bold px-2 py-0.5 rounded border border-amber-300 bg-amber-100 hover:bg-amber-200 transition-colors flex items-center gap-1 cursor-pointer">
         ${icon('Plus', 'w-3 h-3')} New
       </button>
     </nav>
@@ -144,14 +144,14 @@ const renderHeader = () => `
 `;
 
 const renderBanner = () => state.userScriptsReady ? '' : `
-  <div class="bg-amber-500/15 border-b border-amber-500/30 px-3 py-2 flex items-center justify-between text-amber-300 text-xs shrink-0 gap-2">
+  <div class="bg-amber-50 border-b border-amber-200 px-3 py-2 flex items-center justify-between text-amber-900 text-xs shrink-0 gap-2">
     <div class="flex items-center gap-1.5 min-w-0">
-      ${icon('AlertTriangle', 'w-4 h-4 text-amber-400 shrink-0')}
+      ${icon('AlertTriangle', 'w-4 h-4 text-amber-600 shrink-0')}
       <span class="leading-tight">
-        Enable <strong class="text-amber-200">"Allow User Scripts"</strong> in extension details to run scripts.
+        Enable <strong class="text-amber-950">"Allow User Scripts"</strong> in extension details to run scripts.
       </span>
     </div>
-    <button id="btn-open-settings" class="bg-amber-500/20 hover:bg-amber-500/30 border border-amber-500/40 text-amber-200 px-2 py-1 rounded text-[11px] font-medium shrink-0 flex items-center gap-1 transition-colors cursor-pointer">
+    <button id="btn-open-settings" class="bg-white hover:bg-amber-100/60 border border-amber-300 text-amber-900 px-2 py-1 rounded text-[11px] font-medium shrink-0 flex items-center gap-1 transition-colors cursor-pointer shadow-xs">
       ${icon('ExternalLink', 'w-3 h-3')} Details
     </button>
   </div>
@@ -165,69 +165,69 @@ const renderScriptList = () => {
   );
 
   return `
-    <div class="flex flex-col flex-1 overflow-hidden bg-navy-950">
-      <div class="p-2.5 border-b border-navy-800/80 flex items-center gap-2 shrink-0">
+    <div class="flex flex-col flex-1 overflow-hidden bg-slate-50">
+      <div class="p-2.5 border-b border-slate-200/90 bg-white flex items-center gap-2 shrink-0">
         <input 
           id="script-search" 
           type="text" 
           placeholder="Filter scripts or matches..." 
           value="${state.search}"
-          class="bg-navy-900 border border-navy-800 text-slate-200 placeholder-slate-500 text-xs px-2.5 py-1 rounded w-full focus:outline-none focus:border-navy-600 font-mono"
+          class="bg-slate-50 border border-slate-300 text-slate-900 placeholder-slate-400 text-xs px-2.5 py-1 rounded w-full focus:outline-none focus:border-slate-500 font-mono"
         />
       </div>
       <div class="flex-1 overflow-y-auto p-2.5 space-y-2">
         ${filtered.length ? filtered.map(s => `
-          <div class="bg-navy-900/90 border border-navy-800 hover:border-navy-700/80 rounded p-2.5 transition-all flex flex-col gap-1.5">
+          <div class="bg-white border border-slate-200 shadow-xs hover:border-slate-300 rounded p-2.5 transition-all flex flex-col gap-1.5">
             <div class="flex items-center justify-between gap-2">
               <div class="flex items-center gap-2 min-w-0">
                 <button 
                   data-action="toggle" 
                   data-id="${s.id}" 
                   class="relative inline-flex h-4 w-7 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                    s.enabled ? 'bg-emerald-500' : 'bg-slate-700'
+                    s.enabled ? 'bg-emerald-500' : 'bg-slate-300'
                   }">
                   <span class="pointer-events-none inline-block h-3 w-3 transform rounded-full bg-white shadow transition duration-200 ease-in-out ${
                     s.enabled ? 'translate-x-3' : 'translate-x-0'
                   }"></span>
                 </button>
-                <span class="font-semibold text-xs text-slate-100 truncate cursor-pointer hover:text-sky-300" data-action="edit" data-id="${s.id}">
+                <span class="font-semibold text-xs text-slate-900 truncate cursor-pointer hover:text-sky-600" data-action="edit" data-id="${s.id}">
                   ${s.name}
                 </span>
-                <span class="text-[10px] font-mono text-slate-400 bg-navy-800 px-1 rounded border border-navy-700/60 shrink-0">
+                <span class="text-[10px] font-mono text-slate-600 bg-slate-100 px-1 rounded border border-slate-200 shrink-0">
                   v${s.version || '1.0'}
                 </span>
               </div>
               <div class="flex items-center gap-1 shrink-0">
-                <button data-action="edit" data-id="${s.id}" class="p-1 hover:bg-navy-800 rounded text-slate-400 hover:text-sky-400" title="Edit Script">
+                <button data-action="edit" data-id="${s.id}" class="p-1 hover:bg-slate-100 rounded text-slate-500 hover:text-sky-600 cursor-pointer" title="Edit Script">
                   ${icon('Pencil', 'w-3.5 h-3.5')}
                 </button>
-                <button data-action="delete" data-id="${s.id}" class="p-1 hover:bg-navy-800 rounded text-slate-400 hover:text-red-400" title="Delete Script">
+                <button data-action="delete" data-id="${s.id}" class="p-1 hover:bg-slate-100 rounded text-slate-500 hover:text-red-600 cursor-pointer" title="Delete Script">
                   ${icon('Trash2', 'w-3.5 h-3.5')}
                 </button>
               </div>
             </div>
-            ${s.description ? `<p class="text-[11px] text-slate-400 line-clamp-1">${s.description}</p>` : ''}
+            ${s.description ? `<p class="text-[11px] text-slate-600 line-clamp-1">${s.description}</p>` : ''}
             <div class="flex flex-wrap gap-1 mt-0.5">
               ${(s.matches || ['*://*/*']).slice(0, 3).map(m => `
-                <span class="text-[10px] font-mono px-1.5 py-0.2 bg-navy-950 text-sky-300 border border-navy-800 rounded">
+                <span class="text-[10px] font-mono px-1.5 py-0.2 bg-slate-100 text-sky-700 border border-slate-200 rounded">
                   ${m}
                 </span>
               `).join('')}
-              ${(s.matches?.length > 3) ? `<span class="text-[10px] font-mono text-slate-400">+${s.matches.length - 3}</span>` : ''}
+              ${(s.matches?.length > 3) ? `<span class="text-[10px] font-mono text-slate-500">+${s.matches.length - 3}</span>` : ''}
             </div>
           </div>
         `).join('') : `
-          <div class="h-full flex flex-col items-center justify-center text-center p-6 text-slate-400">
-            ${icon('FileCode', 'w-10 h-10 text-navy-700 mb-2')}
-            <p class="text-xs font-medium text-slate-300">No user scripts found</p>
+          <div class="h-full flex flex-col items-center justify-center text-center p-6 text-slate-500">
+            ${icon('FileCode', 'w-10 h-10 text-slate-300 mb-2')}
+            <p class="text-xs font-medium text-slate-700">No user scripts found</p>
             <p class="text-[11px] text-slate-500 mt-1 max-w-[240px]">Create a new script or import a Tampermonkey script to get started.</p>
-            <button id="btn-empty-new" class="mt-4 bg-white text-navy-950 hover:bg-slate-100 font-semibold text-xs px-3.5 py-1.5 rounded border border-slate-300 shadow-sm cursor-pointer">
+            <button id="btn-empty-new" class="mt-4 bg-slate-900 text-white hover:bg-slate-800 font-semibold text-xs px-3.5 py-1.5 rounded shadow-sm cursor-pointer transition-colors">
               + New Script
             </button>
           </div>
         `}
       </div>
-      <footer class="bg-navy-900 border-t border-navy-800/80 px-3 py-1.5 flex items-center justify-between text-[10px] text-slate-400 shrink-0 font-mono">
+      <footer class="bg-white border-t border-slate-200 px-3 py-1.5 flex items-center justify-between text-[10px] text-slate-500 shrink-0 font-mono">
         <span>${state.scripts.filter(s => s.enabled).length} active / ${state.scripts.length} total</span>
         <span>Storage: chrome.storage.local</span>
       </footer>
@@ -241,34 +241,34 @@ const renderEditor = () => {
   const runAt = script?.runAt || 'document_idle';
 
   return `
-    <div class="flex flex-col flex-1 overflow-hidden bg-navy-950">
-      <!-- Editor Textarea Area styled like reference image -->
-      <div class="flex-1 p-2 bg-navy-900 flex flex-col min-h-0">
+    <div class="flex flex-col flex-1 overflow-hidden bg-slate-50">
+      <!-- Editor Textarea Area -->
+      <div class="flex-1 p-2 bg-slate-100 flex flex-col min-h-0">
         <textarea
           id="editor-code"
           spellcheck="false"
           placeholder="// ==UserScript==&#10;// Paste or write script here..."
-          class="flex-1 w-full p-2.5 bg-[#eef1f5] text-slate-900 font-mono text-[11px] leading-relaxed rounded border border-navy-800 focus:outline-none focus:ring-1 focus:ring-sky-500 resize-none overflow-y-auto"
+          class="flex-1 w-full p-2.5 bg-white text-slate-900 font-mono text-[11px] leading-relaxed rounded border border-slate-300 focus:outline-none focus:ring-1 focus:ring-slate-400 resize-none overflow-y-auto shadow-inner"
         >${code}</textarea>
       </div>
 
-      <!-- Action Bar styled after reference image -->
-      <div class="bg-navy-900 border-t border-navy-800 px-3 py-2 flex items-center justify-between gap-2 shrink-0">
+      <!-- Action Bar -->
+      <div class="bg-white border-t border-slate-200 px-3 py-2 flex items-center justify-between gap-2 shrink-0">
         <div class="flex items-center gap-1.5">
-          <button id="btn-save-script" class="bg-white hover:bg-slate-100 text-navy-950 font-semibold text-xs px-3 py-1 rounded border border-slate-300 shadow-sm cursor-pointer transition-colors">
+          <button id="btn-save-script" class="bg-slate-900 hover:bg-slate-800 text-white font-semibold text-xs px-3 py-1 rounded shadow-sm cursor-pointer transition-colors">
             save script
           </button>
-          <button id="btn-cancel-edit" class="bg-navy-800 hover:bg-navy-700 text-slate-200 text-xs px-2.5 py-1 rounded border border-navy-700 cursor-pointer transition-colors">
+          <button id="btn-cancel-edit" class="bg-white hover:bg-slate-100 text-slate-700 text-xs px-2.5 py-1 rounded border border-slate-300 cursor-pointer transition-colors">
             cancel
           </button>
-          <button id="btn-reset-boilerplate" class="bg-navy-800 hover:bg-navy-700 text-slate-300 text-xs px-2 py-1 rounded border border-navy-700 cursor-pointer transition-colors" title="Insert default template">
+          <button id="btn-reset-boilerplate" class="bg-white hover:bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded border border-slate-300 cursor-pointer transition-colors" title="Insert default template">
             template
           </button>
         </div>
 
         <div class="flex items-center gap-1.5">
-          <label class="text-[10px] text-slate-400 font-mono">run-at:</label>
-          <select id="run-at-select" class="bg-navy-950 border border-navy-700 text-slate-200 text-[11px] font-mono rounded px-1.5 py-1 focus:outline-none">
+          <label class="text-[10px] text-slate-500 font-mono">run-at:</label>
+          <select id="run-at-select" class="bg-white border border-slate-300 text-slate-800 text-[11px] font-mono rounded px-1.5 py-1 focus:outline-none">
             <option value="document_idle" ${runAt === 'document_idle' ? 'selected' : ''}>document_idle</option>
             <option value="document_start" ${runAt === 'document_start' ? 'selected' : ''}>document_start</option>
             <option value="document_end" ${runAt === 'document_end' ? 'selected' : ''}>document_end</option>
@@ -276,8 +276,8 @@ const renderEditor = () => {
         </div>
       </div>
 
-      <!-- Notice Bar matching reference image -->
-      <footer class="bg-navy-950 border-t border-navy-800/80 px-3 py-1 text-[10px] text-slate-400 font-mono shrink-0">
+      <!-- Notice Bar -->
+      <footer class="bg-slate-100 border-t border-slate-200 px-3 py-1 text-[10px] text-slate-500 font-mono shrink-0">
         notice: scripts run on matched URLs with synced secrets injected.
       </footer>
     </div>
@@ -288,13 +288,13 @@ const renderSecrets = () => {
   const keys = Object.keys(state.secrets);
 
   return `
-    <div class="flex flex-col flex-1 overflow-hidden bg-navy-950">
-      <div class="p-3 border-b border-navy-800/80 bg-navy-900/60 shrink-0">
-        <h2 class="text-xs font-semibold text-slate-200 mb-1 flex items-center gap-1.5">
-          ${icon('Key', 'w-3.5 h-3.5 text-sky-400')} Synced Secrets / Environment Variables
+    <div class="flex flex-col flex-1 overflow-hidden bg-slate-50">
+      <div class="p-3 border-b border-slate-200 bg-white shrink-0 shadow-xs">
+        <h2 class="text-xs font-semibold text-slate-800 mb-1 flex items-center gap-1.5">
+          ${icon('Key', 'w-3.5 h-3.5 text-sky-600')} Synced Secrets / Environment Variables
         </h2>
-        <p class="text-[11px] text-slate-400 leading-tight">
-          Secrets are saved to <span class="text-sky-300 font-mono">chrome.storage.sync</span> and available across all devices.
+        <p class="text-[11px] text-slate-500 leading-tight">
+          Secrets are saved to <span class="text-sky-700 font-mono font-medium">chrome.storage.sync</span> and available across all devices.
         </p>
 
         <!-- Add Secret Form -->
@@ -302,16 +302,16 @@ const renderSecrets = () => {
           <input 
             id="new-secret-key" 
             type="text" 
-            placeholder="KEY (e.g. API_KEY)" 
-            class="w-1/3 bg-navy-950 border border-navy-700 text-slate-100 text-xs px-2 py-1 rounded font-mono uppercase placeholder-slate-500 focus:outline-none focus:border-sky-500"
+            placeholder="KEY (e.g. GH_PAT)" 
+            class="w-1/3 bg-slate-50 border border-slate-300 text-slate-900 text-xs px-2 py-1 rounded font-mono uppercase placeholder-slate-400 focus:outline-none focus:border-slate-500"
           />
           <input 
             id="new-secret-val" 
             type="text" 
             placeholder="Value..." 
-            class="flex-1 bg-navy-950 border border-navy-700 text-slate-100 text-xs px-2 py-1 rounded font-mono placeholder-slate-500 focus:outline-none focus:border-sky-500"
+            class="flex-1 bg-slate-50 border border-slate-300 text-slate-900 text-xs px-2 py-1 rounded font-mono placeholder-slate-400 focus:outline-none focus:border-slate-500"
           />
-          <button id="btn-add-secret" class="bg-white hover:bg-slate-100 text-navy-950 font-semibold text-xs px-3 py-1 rounded border border-slate-300 shadow-sm shrink-0 cursor-pointer">
+          <button id="btn-add-secret" class="bg-slate-900 hover:bg-slate-800 text-white font-semibold text-xs px-3 py-1 rounded shadow-sm shrink-0 cursor-pointer transition-colors">
             + Add
           </button>
         </div>
@@ -322,44 +322,44 @@ const renderSecrets = () => {
           const isRevealed = state.revealedSecrets.has(k);
           const val = state.secrets[k];
           return `
-            <div class="bg-navy-900 border border-navy-800 rounded p-2 flex items-center justify-between gap-2">
+            <div class="bg-white border border-slate-200 shadow-xs rounded p-2 flex items-center justify-between gap-2">
               <div class="flex items-center gap-2 min-w-0 flex-1">
-                <span class="font-mono font-semibold text-xs text-sky-300 shrink-0">${k}</span>
-                <span class="text-slate-500 text-xs shrink-0">=</span>
-                <span class="font-mono text-xs text-slate-300 truncate select-all">
+                <span class="font-mono font-semibold text-xs text-sky-700 shrink-0">${k}</span>
+                <span class="text-slate-400 text-xs shrink-0">=</span>
+                <span class="font-mono text-xs text-slate-700 truncate select-all">
                   ${isRevealed ? val : '••••••••••••'}
                 </span>
               </div>
               <div class="flex items-center gap-1 shrink-0">
-                <button data-action="toggle-secret" data-key="${k}" class="p-1 hover:bg-navy-800 rounded text-slate-400 hover:text-slate-200" title="${isRevealed ? 'Hide' : 'Reveal'}">
+                <button data-action="toggle-secret" data-key="${k}" class="p-1 hover:bg-slate-100 rounded text-slate-500 hover:text-slate-800 cursor-pointer" title="${isRevealed ? 'Hide' : 'Reveal'}">
                   ${icon(isRevealed ? 'EyeOff' : 'Eye', 'w-3.5 h-3.5')}
                 </button>
-                <button data-action="copy-secret" data-key="${k}" class="p-1 hover:bg-navy-800 rounded text-slate-400 hover:text-sky-400" title="Copy Value">
+                <button data-action="copy-secret" data-key="${k}" class="p-1 hover:bg-slate-100 rounded text-slate-500 hover:text-sky-600 cursor-pointer" title="Copy Value">
                   ${icon('Copy', 'w-3.5 h-3.5')}
                 </button>
-                <button data-action="delete-secret" data-key="${k}" class="p-1 hover:bg-navy-800 rounded text-slate-400 hover:text-red-400" title="Delete Secret">
+                <button data-action="delete-secret" data-key="${k}" class="p-1 hover:bg-slate-100 rounded text-slate-500 hover:text-red-600 cursor-pointer" title="Delete Secret">
                   ${icon('Trash2', 'w-3.5 h-3.5')}
                 </button>
               </div>
             </div>
           `;
         }).join('') : `
-          <div class="h-full flex flex-col items-center justify-center text-center p-6 text-slate-400">
-            ${icon('Key', 'w-8 h-8 text-navy-700 mb-2')}
-            <p class="text-xs font-medium text-slate-300">No secrets configured</p>
-            <p class="text-[11px] text-slate-500 mt-1 max-w-[240px]">Add API tokens or credentials here to securely access them in your user scripts.</p>
+          <div class="h-full flex flex-col items-center justify-center text-center p-6 text-slate-500">
+            ${icon('Key', 'w-8 h-8 text-slate-300 mb-2')}
+            <p class="text-xs font-medium text-slate-700">No secrets configured</p>
+            <p class="text-[11px] text-slate-500 mt-1 max-w-[240px]">Add API tokens or credentials (like GH_PAT) here to securely access them in your user scripts.</p>
           </div>
         `}
 
-        <div class="mt-4 p-2.5 bg-navy-900/40 border border-navy-800/80 rounded">
-          <p class="text-[11px] text-slate-400 font-semibold mb-1">Code usage in scripts:</p>
-          <pre class="bg-navy-950 p-2 rounded text-[10px] font-mono text-emerald-400 overflow-x-auto">const token = OpenScript.env.MY_API_KEY;
-// or: const token = env.MY_API_KEY;
-// or: const token = GM_getValue('MY_API_KEY');</pre>
+        <div class="mt-4 p-2.5 bg-white border border-slate-200 rounded shadow-xs">
+          <p class="text-[11px] text-slate-600 font-semibold mb-1">Code usage in scripts:</p>
+          <pre class="bg-slate-100 p-2 rounded text-[10px] font-mono text-emerald-800 border border-slate-200/80 overflow-x-auto">const token = OpenScript.env.GH_PAT;
+// or: const token = env.GH_PAT;
+// or: const token = GM_getValue('GH_PAT');</pre>
         </div>
       </div>
 
-      <footer class="bg-navy-900 border-t border-navy-800/80 px-3 py-1.5 flex items-center justify-between text-[10px] text-slate-400 shrink-0 font-mono">
+      <footer class="bg-white border-t border-slate-200 px-3 py-1.5 flex items-center justify-between text-[10px] text-slate-500 shrink-0 font-mono">
         <span>${keys.length} secrets stored</span>
         <span>Storage: chrome.storage.sync</span>
       </footer>
diff --git a/src/styles/index.css b/src/styles/index.css
index 38259da..35ce430 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -10,6 +10,8 @@ body {
   overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   user-select: none;
+  background-color: #f8fafc;
+  color: #0f172a;
 }
 
 ::-webkit-scrollbar {
@@ -17,12 +19,12 @@ body {
   height: 6px;
 }
 ::-webkit-scrollbar-track {
-  background: #072138;
+  background: #f1f5f9;
 }
 ::-webkit-scrollbar-thumb {
-  background: #1e3a5f;
+  background: #cbd5e1;
   border-radius: 3px;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #2563eb;
+  background: #94a3b8;
 }
