From eb7efae32a585f1a266d613debdc7eb2403218fb Mon Sep 17 00:00:00 2001
From: zs <you@example.com>
Date: Tue, 3 Mar 2026 03:08:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=A9=E5=B1=95=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 extension/src/App.vue                 | 312 +++++++++++++-------------
 extension/src/options/Competitors.vue |  84 +++----
 extension/src/options/HotTweets.vue   |  52 ++---
 extension/src/options/Profile.vue     |  38 ++--
 extension/src/options/Strategies.vue  |  67 +++---
 5 files changed, 262 insertions(+), 291 deletions(-)

diff --git a/extension/src/App.vue b/extension/src/App.vue
index 7edfa07..bd892c2 100644
--- a/extension/src/App.vue
+++ b/extension/src/App.vue
@@ -1,24 +1,37 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import Auth from './options/Auth.vue'
+import Profile from './options/Profile.vue'
+import Strategies from './options/Strategies.vue'
+import Competitors from './options/Competitors.vue'
+import HotTweets from './options/HotTweets.vue'
 
-const activeTab = ref<'settings' | 'history'>('settings')
-
-// Settings State
-const identity = ref('Independent Developer / Founder')
-const language = ref('auto')
-const isSaving = ref(false)
-
-// History State
-const historyList = ref<Array<any>>([])
+const activeTab = ref<'profile' | 'strategies' | 'radar' | 'growth' | 'history'>('growth')
+const token = ref('')
+const isLoading = ref(true)
 
 onMounted(() => {
-  // Load settings
-  chrome.storage.sync.get(['identity', 'language'], (res) => {
-    if (res.identity) identity.value = String(res.identity)
-    if (res.language) language.value = String(res.language)
+  chrome.storage.local.get(['jwt_token'], (res) => {
+    if (res.jwt_token) {
+      token.value = String(res.jwt_token)
+    }
+    isLoading.value = false
   })
+})
 
-  // Load history
+const onAuthenticated = (newToken: string) => {
+  token.value = newToken
+}
+
+const logout = () => {
+  chrome.storage.local.remove(['jwt_token', 'user_id'], () => {
+    token.value = ''
+  })
+}
+
+// History State (Moved to separate view or handled here)
+const historyList = ref<Array<any>>([])
+onMounted(() => {
   chrome.storage.local.get(['history'], (res) => {
     if (Array.isArray(res.history)) {
       historyList.value = res.history
@@ -26,18 +39,6 @@ onMounted(() => {
   })
 })
 
-const saveSettings = () => {
-  isSaving.value = true
-  chrome.storage.sync.set({
-    identity: identity.value,
-    language: language.value
-  }, () => {
-    setTimeout(() => {
-      isSaving.value = false
-    }, 600)
-  })
-}
-
 const copyToClipboard = (text: string) => {
   navigator.clipboard.writeText(text)
 }
@@ -47,158 +48,163 @@ const clearHistory = () => {
     historyList.value = []
   })
 }
-
-const launchDashboard = () => {
-  chrome.tabs.create({ url: chrome.runtime.getURL('options.html') })
-}
 </script>
 
 <template>
-  <div class="w-[400px] h-[600px] glass-card flex flex-col overflow-hidden text-[#f8fafc] selection:bg-rose-500/30">
+  <div class="w-[400px] h-[600px] glass-card flex flex-col overflow-hidden text-[#f8fafc] selection:bg-rose-500/30 font-sans">
     
+    <!-- Background Decor -->
+    <div class="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden -z-10">
+      <div class="absolute -top-[10%] -left-[10%] w-[50%] h-[50%] bg-rose-900/10 blur-[100px] rounded-full"></div>
+      <div class="absolute top-[40%] -right-[5%] w-[40%] h-[60%] bg-blue-900/10 blur-[100px] rounded-full"></div>
+    </div>
+
     <!-- Premium Header -->
-    <div class="px-6 py-5 flex justify-between items-center border-b border-white/5 bg-white/[0.02]">
-      <div>
-        <h1 class="text-xl font-bold tracking-tight bg-gradient-to-br from-rose-400 via-violet-400 to-blue-400 bg-clip-text text-transparent opacity-90">
-          InsightReply
-        </h1>
-        <div class="flex items-center gap-2 mt-0.5">
-          <span class="text-[10px] text-zinc-500 uppercase tracking-[0.2em] font-bold">Social Copilot</span>
-          <span class="h-1 w-1 rounded-full bg-zinc-700"></span>
-          <span class="text-[10px] text-zinc-500 font-medium">Pro Max</span>
+    <div class="px-6 py-4 flex justify-between items-center border-b border-white/5 bg-white/[0.02] backdrop-blur-md sticky top-0 z-50">
+      <div class="flex items-center gap-3">
+        <div class="p-2 rounded-lg bg-gradient-to-br from-rose-500 to-rose-600 shadow-lg shadow-rose-900/20">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="text-white"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
+        </div>
+        <div>
+          <h1 class="text-sm font-black tracking-tight bg-gradient-to-br from-white to-zinc-400 bg-clip-text text-transparent">
+            InsightReply
+          </h1>
+          <div class="flex items-center gap-1.5 mt-[-2px]">
+            <div class="w-1 h-1 rounded-full bg-emerald-500 animate-pulse" v-if="token"></div>
+            <span class="text-[8px] text-zinc-500 uppercase tracking-[0.2em] font-black">{{ token ? 'Pro Max Online' : 'Authentication Required' }}</span>
+          </div>
         </div>
       </div>
       
-      <!-- Launch Dashboard Button -->
-      <button 
-        @click="launchDashboard"
-        class="p-2 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition-apple group"
-        title="Open Dashboard"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-zinc-400 group-hover:text-rose-400 transition-apple"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
-      </button>
+      <button v-if="token" @click="logout" class="text-[10px] font-bold text-zinc-500 hover:text-rose-400 transition-apple uppercase tracking-widest">Logout</button>
     </div>
 
-    <!-- Segmented Control (Tabs) -->
-    <div class="px-6 pt-5">
-      <div class="flex p-1 bg-black/40 rounded-xl border border-white/5 backdrop-blur-md">
-        <button 
-          @click="activeTab = 'settings'" 
-          :class="['flex-1 py-1.5 text-xs font-semibold rounded-lg transition-apple', activeTab === 'settings' ? 'bg-zinc-800 text-white shadow-[0_2px_8px_rgba(0,0,0,0.4)]' : 'text-zinc-500 hover:text-zinc-300']"
-        >
-          Settings
-        </button>
-        <button 
-          @click="activeTab = 'history'" 
-          :class="['flex-1 py-1.5 text-xs font-semibold rounded-lg transition-apple', activeTab === 'history' ? 'bg-zinc-800 text-white shadow-[0_2px_8px_rgba(0,0,0,0.4)]' : 'text-zinc-500 hover:text-zinc-300']"
-        >
-          History
-        </button>
+    <!-- Content Area -->
+    <div class="flex-1 overflow-y-auto custom-scrollbar relative">
+      <div v-if="isLoading" class="flex items-center justify-center h-full">
+        <div class="w-8 h-8 border-2 border-white/10 border-t-rose-500 rounded-full animate-spin"></div>
       </div>
-    </div>
 
-    <!-- Main Content Area -->
-    <div class="flex-1 overflow-y-auto px-6 py-5 custom-scrollbar">
-      
-      <!-- Settings Tab -->
-      <div v-if="activeTab === 'settings'" class="animate-in fade-in slide-in-from-bottom-2 duration-500 space-y-6">
-        <div class="space-y-4">
-          <div class="bg-white/[0.03] border border-white/5 rounded-2xl p-4 space-y-4">
-            <h2 class="text-xs font-bold text-zinc-500 uppercase tracking-widest flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-rose-500"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
-              Identity Profile
-            </h2>
-            
-            <div class="space-y-4">
-              <div class="space-y-2">
-                <label class="text-[11px] font-semibold text-zinc-400 ml-1">Identity Label</label>
-                <input 
-                  v-model="identity"
-                  type="text" 
-                  class="w-full bg-black/40 border border-white/5 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:ring-2 focus:ring-rose-500/20 focus:border-rose-500/40 transition-apple placeholder:text-zinc-600"
-                  placeholder="e.g. AI Founder, Indie Hacker"
-                />
+      <div v-else-if="!token" class="p-8 h-full flex flex-col justify-center animate-in fade-in zoom-in-95 duration-500">
+        <div class="text-center space-y-3 mb-8">
+           <h2 class="text-xl font-black tracking-tight">Welcome Back</h2>
+           <p class="text-xs text-zinc-500 font-medium px-4">Synchronize your AI personality and custom strategies across all sessions.</p>
+        </div>
+        <Auth @authenticated="onAuthenticated" />
+      </div>
+
+      <div v-else class="h-full">
+        <div v-if="activeTab === 'growth'" class="p-6 pb-24 animate-in fade-in slide-in-from-right-4 duration-500">
+          <HotTweets :token="token" />
+        </div>
+
+        <div v-if="activeTab === 'profile'" class="p-6 pb-24 animate-in fade-in slide-in-from-right-4 duration-500">
+          <Profile :token="token" />
+        </div>
+
+        <div v-if="activeTab === 'strategies'" class="p-6 pb-24 animate-in fade-in slide-in-from-right-4 duration-500">
+          <Strategies :token="token" />
+        </div>
+
+        <div v-if="activeTab === 'radar'" class="p-6 pb-24 animate-in fade-in slide-in-from-right-4 duration-500">
+          <Competitors :token="token" />
+        </div>
+
+        <div v-if="activeTab === 'history'" class="p-6 pb-24 animate-in fade-in slide-in-from-right-4 duration-500 space-y-6">
+           <div class="flex justify-between items-center mb-6">
+              <h2 class="text-xs font-bold text-zinc-500 uppercase tracking-[0.2em]">Activity Log</h2>
+              <button @click="clearHistory" class="text-[10px] font-bold text-rose-500/80 hover:text-rose-400 transition-apple uppercase tracking-widest">Clear</button>
+            </div>
+
+            <div v-if="historyList.length === 0" class="flex flex-col items-center justify-center py-20 text-zinc-600 space-y-4">
+              <div class="p-5 rounded-full bg-white/[0.02] border border-white/5">
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="opacity-30"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
               </div>
+              <p class="text-xs font-bold">No activity detected</p>
+            </div>
 
-              <div class="space-y-2">
-                <label class="text-[11px] font-semibold text-zinc-400 ml-1">Reply Language</label>
-                <div class="relative">
-                  <select 
-                    v-model="language"
-                    class="w-full bg-black/40 border border-white/5 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:ring-2 focus:ring-rose-500/20 focus:border-rose-500/40 transition-apple appearance-none cursor-pointer"
-                  >
-                    <option value="auto">Auto (Match Tweet)</option>
-                    <option value="en">English (en)</option>
-                    <option value="zh">Chinese (zh)</option>
-                  </select>
-                  <div class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-zinc-500">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+            <div v-else class="space-y-6">
+              <div v-for="(item, idx) in historyList" :key="idx" class="bg-white/[0.02] border border-white/5 rounded-2xl p-5 space-y-4">
+                <div class="flex justify-between items-center">
+                  <div class="text-[9px] font-mono text-zinc-600 tracking-tighter">{{ new Date(item.timestamp).toLocaleString() }}</div>
+                  <div class="h-1 w-1 rounded-full bg-rose-500/40"></div>
+                </div>
+                <div class="text-[11px] leading-relaxed text-zinc-400 italic bg-black/20 rounded-xl p-3 border border-white/[0.02]">
+                  "{{ item.tweetContent?.substring(0, 80) }}..."
+                </div>
+                <div class="space-y-3">
+                  <div v-for="(reply, rIdx) in item.replies" :key="rIdx" class="bg-white/[0.03] rounded-xl p-4 group relative border border-white/5 hover:border-rose-500/20 transition-apple">
+                    <div class="flex justify-between items-center mb-2">
+                      <span class="text-[8px] font-bold text-rose-400 bg-rose-400/10 px-2 py-0.5 rounded-full uppercase tracking-widest">{{ reply.strategy }}</span>
+                      <button @click="copyToClipboard(reply.content)" class="opacity-0 group-hover:opacity-100 transition-apple text-[9px] text-zinc-400 hover:text-white flex items-center gap-1.5">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+                        Copy
+                      </button>
+                    </div>
+                    <div class="text-[11px] text-zinc-300 leading-relaxed font-medium">{{ reply.content }}</div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-        </div>
-
-        <button 
-          @click="saveSettings"
-          :disabled="isSaving"
-          class="w-full py-3.5 bg-gradient-to-r from-rose-600 to-rose-500 hover:from-rose-500 hover:to-rose-400 text-white rounded-2xl text-sm font-bold transition-apple shadow-[0_8px_20px_rgba(136,19,55,0.3)] flex items-center justify-center gap-2 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          <span v-if="isSaving" class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></span>
-          {{ isSaving ? 'Saving...' : 'Save Preferences' }}
-        </button>
-      </div>
-
-      <!-- History Tab -->
-      <div v-if="activeTab === 'history'" class="animate-in fade-in slide-in-from-bottom-2 duration-500 flex flex-col h-full">
-        <div class="flex justify-between items-center mb-6 px-1">
-          <h2 class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em]">Activity Log</h2>
-          <button @click="clearHistory" class="text-[10px] font-bold text-rose-500/80 hover:text-rose-400 transition-apple uppercase tracking-widest">Clear All</button>
-        </div>
-
-        <div v-if="historyList.length === 0" class="flex-1 flex flex-col items-center justify-center text-zinc-500 space-y-4 pb-12">
-          <div class="p-5 rounded-full bg-white/[0.02] border border-white/5">
-            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="opacity-20"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
-          </div>
-          <p class="text-xs font-medium tracking-wide">No generations found</p>
-        </div>
-
-        <div v-else class="space-y-6">
-          <div v-for="(item, idx) in historyList" :key="idx" class="bg-white/[0.02] border border-white/5 rounded-2xl p-5 space-y-4 hover:border-white/10 transition-apple">
-            <div class="flex justify-between items-center">
-              <div class="text-[10px] font-mono text-zinc-600 tracking-tighter">{{ new Date(item.timestamp).toLocaleString() }}</div>
-              <div class="h-1.5 w-1.5 rounded-full bg-rose-500/40"></div>
-            </div>
-            
-            <div class="text-[11px] leading-relaxed text-zinc-400 italic bg-black/20 rounded-xl p-3 border border-white/[0.02]">
-              "{{ item.tweetContent?.substring(0, 80) }}{{ item.tweetContent?.length > 80 ? '...' : '' }}"
-            </div>
-            
-            <div class="space-y-3">
-              <div v-for="(reply, rIdx) in item.replies" :key="rIdx" class="bg-white/[0.03] rounded-xl p-4 group relative border border-white/5 hover:border-rose-500/20 transition-apple">
-                <div class="flex justify-between items-center mb-2">
-                  <span class="text-[9px] font-bold text-rose-400 bg-rose-400/10 px-2 py-0.5 rounded-full uppercase tracking-widest">{{ reply.strategy }}</span>
-                  <button @click="copyToClipboard(reply.content)" class="opacity-0 group-hover:opacity-100 transition-apple text-[10px] text-zinc-400 hover:text-white flex items-center gap-1.5">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
-                    Copy
-                  </button>
-                </div>
-                <div class="text-xs text-zinc-300 leading-relaxed font-medium">{{ reply.content }}</div>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
-
     </div>
+
+    <!-- Apple Style Bottom Tab Bar -->
+    <nav v-if="token" class="h-20 bg-black/40 backdrop-blur-3xl border-t border-white/5 flex items-center justify-around px-4 pb-4 shrink-0 z-[100]">
+      <button @click="activeTab = 'growth'" :class="['tab-item', activeTab === 'growth' ? 'text-orange-400 drop-shadow-[0_0_10px_rgba(251,146,60,0.4)]' : 'text-zinc-600']">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5Z"/></svg>
+        <span>Growth</span>
+      </button>
+
+      <button @click="activeTab = 'radar'" :class="['tab-item', activeTab === 'radar' ? 'text-blue-400 drop-shadow-[0_0_10px_rgba(59,130,246,0.4)]' : 'text-zinc-600']">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M2 12h2"/><path d="M20 12h2"/></svg>
+        <span>Radar</span>
+      </button>
+
+      <button @click="activeTab = 'strategies'" :class="['tab-item', activeTab === 'strategies' ? 'text-rose-400 drop-shadow-[0_0_10px_rgba(244,63,94,0.4)]' : 'text-zinc-600']">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m16 4 4 4-4 4"/><path d="M20 8H4v12"/></svg>
+        <span>AI logic</span>
+      </button>
+
+      <button @click="activeTab = 'profile'" :class="['tab-item', activeTab === 'profile' ? 'text-rose-400 drop-shadow-[0_0_10px_rgba(244,63,94,0.4)]' : 'text-zinc-600']">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+        <span>DNA</span>
+      </button>
+
+      <button @click="activeTab = 'history'" :class="['tab-item', activeTab === 'history' ? 'text-rose-400 drop-shadow-[0_0_10px_rgba(244,63,94,0.4)]' : 'text-zinc-600']">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        <span>Logs</span>
+      </button>
+    </nav>
   </div>
 </template>
 
 <style>
-body {
-  width: 400px;
-  height: 600px;
+.tab-item {
+  display: flex;
+  flex-direction: column;
+  items-center: center;
+  gap: 0.375rem;
+  transition-property: all;
+  transition-duration: 400ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.tab-item:active {
+  transform: scale(0.95);
+}
+.tab-item span {
+  font-size: 9px;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  transition-property: all;
+  transition-duration: 400ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .custom-scrollbar::-webkit-scrollbar {
diff --git a/extension/src/options/Competitors.vue b/extension/src/options/Competitors.vue
index e241444..8edfd04 100644
--- a/extension/src/options/Competitors.vue
+++ b/extension/src/options/Competitors.vue
@@ -84,35 +84,30 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="space-y-12">
+  <div class="space-y-8 animate-in fade-in duration-700">
     
-    <header class="flex justify-between items-end">
-      <div class="space-y-1">
-        <h2 class="text-2xl font-bold tracking-tight">Competitor Radar</h2>
-        <p class="text-sm text-zinc-500 font-medium">Identify and engage in conversations happening around your alternatives.</p>
-      </div>
+    <div v-if="!showForm" class="flex justify-end">
       <button 
-        v-if="!showForm"
         @click="showForm = true"
-        class="px-5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-[14px] text-sm font-bold transition-apple shadow-lg shadow-blue-900/20 active:scale-95 flex items-center gap-2"
+        class="w-full py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl text-sm font-bold transition-apple shadow-lg shadow-blue-900/20 active:scale-95 flex items-center justify-center gap-2"
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
         Add Target
       </button>
-    </header>
+    </div>
 
     <div v-if="isLoading" class="py-20 flex justify-center">
       <div class="w-8 h-8 border-2 border-white/10 border-t-blue-500 rounded-full animate-spin"></div>
     </div>
 
-    <div v-else class="space-y-8">
+    <div v-else class="space-y-6">
       <!-- Create Form Modal View -->
       <transition enter-active-class="transition duration-500 ease-out transform" enter-from-class="opacity-0 scale-95 -translate-y-4" enter-to-class="opacity-100 scale-100 translate-y-0">
-        <form v-if="showForm" @submit.prevent="createCompetitor" class="bg-white/[0.03] border border-white/5 rounded-[32px] p-8 space-y-8 shadow-2xl relative">
+        <form v-if="showForm" @submit.prevent="createCompetitor" class="bg-white/[0.03] border border-white/5 rounded-[32px] p-6 space-y-6 shadow-2xl relative">
           <div class="flex justify-between items-center">
-            <h3 class="text-lg font-bold">New Radar Target</h3>
+            <h3 class="text-base font-bold">New Radar Target</h3>
             <button type="button" @click="showForm = false" class="p-2 rounded-full hover:bg-white/5 transition-apple">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
             </button>
           </div>
 
@@ -120,7 +115,7 @@ onMounted(() => {
             {{ errorMsg }}
           </div>
 
-          <div class="grid grid-cols-2 gap-8">
+          <div class="grid grid-cols-1 gap-6">
             <div class="space-y-3">
               <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Competitor Name</label>
               <input v-model="form.competitor_name" required class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500/40 placeholder:text-zinc-700" placeholder="e.g. Acme Corp" />
@@ -130,7 +125,7 @@ onMounted(() => {
               <div class="relative">
                 <select v-model="form.platform" class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500/40 placeholder:text-zinc-700 appearance-none cursor-pointer">
                     <option value="twitter">Twitter / X</option>
-                    <option value="reddit">Reddit (Coming Soon)</option>
+                    <option value="reddit">Reddit (Soon)</option>
                 </select>
                 <div class="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-zinc-600">
                   <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
@@ -139,9 +134,9 @@ onMounted(() => {
             </div>
           </div>
           
-          <div class="grid grid-cols-2 gap-8">
+          <div class="grid grid-cols-1 gap-6">
             <div class="space-y-3">
-              <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">X Handle <span class="text-zinc-700">(optional)</span></label>
+              <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">X Handle</label>
               <div class="relative">
                   <span class="absolute inset-y-0 left-5 flex items-center text-zinc-600 pointer-events-none text-sm font-bold">@</span>
                   <input v-model="form.target_handle" class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500/40 placeholder:text-zinc-700 pl-10" placeholder="handle" />
@@ -149,16 +144,14 @@ onMounted(() => {
             </div>
             <div class="space-y-3">
               <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Monitor Keywords</label>
-              <input v-model="form.keywords" required class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500/40 placeholder:text-zinc-700" placeholder="e.g. acme sucks, alternative to acme" />
+              <input v-model="form.keywords" required class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500/40 placeholder:text-zinc-700" placeholder="e.g. acme sucks..." />
             </div>
           </div>
 
-          <div class="flex justify-end">
-            <button type="submit" :disabled="isSubmitting" class="px-8 py-3.5 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl text-[15px] font-bold transition-apple shadow-xl shadow-blue-900/30 flex items-center gap-3 active:scale-95 disabled:opacity-50">
-               <div v-if="isSubmitting" class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
-               {{ isSubmitting ? 'Calibrating...' : 'Initialize Radar' }}
-            </button>
-          </div>
+          <button type="submit" :disabled="isSubmitting" class="w-full py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl text-sm font-bold transition-apple shadow-xl shadow-blue-900/30 flex items-center justify-center gap-3 active:scale-95 disabled:opacity-50">
+             <div v-if="isSubmitting" class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
+             {{ isSubmitting ? 'Calibrating...' : 'Initialize Radar' }}
+          </button>
         </form>
       </transition>
 
@@ -170,44 +163,37 @@ onMounted(() => {
         <p class="text-zinc-500 font-bold tracking-tight">Radar is currently silent. No competitors added.</p>
       </div>
 
-      <div class="grid grid-cols-2 gap-6">
-        <div v-for="c in competitors" :key="c.id" class="group bg-white/[0.02] border border-white/5 rounded-[32px] p-6 flex flex-col justify-between transition-apple hover:bg-white/[0.04] hover:border-white/10 hover:shadow-2xl relative overflow-hidden">
+      <div class="grid grid-cols-1 gap-4">
+        <div v-for="c in competitors" :key="c.id" class="group bg-white/[0.02] border border-white/5 rounded-[24px] p-4 flex flex-col justify-between transition-apple hover:bg-white/[0.04] relative overflow-hidden">
             
-            <div class="flex justify-between items-start mb-6 z-10">
-                <div class="flex items-center gap-4">
-                    <div class="w-12 h-12 rounded-2xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-500 group-hover:scale-110 transition-apple">
-                        <svg v-if="c.platform === 'twitter'" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
-                        <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M2 12h2"/><path d="M20 12h2"/></svg>
+            <div class="flex justify-between items-start mb-4 z-10">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-500 group-hover:scale-110 transition-apple shrink-0">
+                        <svg v-if="c.platform === 'twitter'" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
+                        <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M2 12h2"/><path d="M20 12h2"/></svg>
                     </div>
-                    <div>
-                        <h4 class="text-[17px] font-black tracking-tight group-hover:text-blue-400 transition-apple">{{ c.competitor_name }}</h4>
-                        <p v-if="c.target_handle" class="text-[11px] font-bold text-zinc-600 mt-0.5 tracking-tight font-mono">@{{ c.target_handle }}</p>
+                    <div class="min-w-0">
+                        <h4 class="text-sm font-black tracking-tight group-hover:text-blue-400 transition-apple truncate">{{ c.competitor_name }}</h4>
+                        <p v-if="c.target_handle" class="text-[9px] font-bold text-zinc-600 mt-0.5 tracking-tight font-mono">@{{ c.target_handle }}</p>
                     </div>
                 </div>
-                <div class="group/pulse flex items-center gap-2 px-3 py-1 bg-emerald-500/10 rounded-full border border-emerald-500/20">
-                   <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
-                   <span class="text-[9px] font-black text-emerald-400 uppercase tracking-widest">Tracking</span>
+                <div class="flex items-center gap-1.5 px-2 py-0.5 bg-emerald-500/10 rounded-full border border-emerald-500/20">
+                   <div class="w-1 h-1 rounded-full bg-emerald-500 animate-pulse"></div>
+                   <span class="text-[7px] font-black text-emerald-400 uppercase tracking-widest">Active</span>
                 </div>
             </div>
 
-            <div class="space-y-3 z-10">
-                <span class="text-[9px] font-black text-zinc-700 uppercase tracking-[0.2em] flex items-center gap-2">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-                  Search Logic
-                </span>
-                <div class="flex flex-wrap gap-2">
-                    <span v-for="kw in c.keywords.split(',')" :key="kw" class="px-3 py-1 bg-black/40 text-zinc-400 text-[11px] font-bold rounded-lg border border-white/5 transition-apple group-hover:border-blue-500/30 group-hover:text-zinc-200">
+            <div class="space-y-2 z-10">
+                <div class="flex flex-wrap gap-1.5">
+                    <span v-for="kw in c.keywords.split(',')" :key="kw" class="px-2 py-0.5 bg-black/40 text-zinc-500 text-[10px] font-bold rounded border border-white/5 transition-apple group-hover:border-blue-500/30 group-hover:text-zinc-300">
                         {{ kw.trim() }}
                     </span>
                 </div>
             </div>
 
-            <button @click="deleteCompetitor(c.id)" class="absolute top-2 right-2 p-3 text-zinc-800 hover:text-rose-500 transition-apple opacity-0 group-hover:opacity-100 z-20 active:scale-90">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
+            <button @click="deleteCompetitor(c.id)" class="absolute bottom-2 right-2 p-3 text-zinc-800 hover:text-rose-500 transition-apple active:scale-90 z-20">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
             </button>
-
-            <!-- Abstract Decor -->
-            <div class="absolute -right-10 -bottom-10 w-32 h-32 bg-blue-500/5 blur-3xl rounded-full group-hover:bg-blue-500/10 transition-apple"></div>
         </div>
       </div>
       
diff --git a/extension/src/options/HotTweets.vue b/extension/src/options/HotTweets.vue
index 0d24475..63077fe 100644
--- a/extension/src/options/HotTweets.vue
+++ b/extension/src/options/HotTweets.vue
@@ -63,22 +63,19 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="h-full flex flex-col space-y-10 animate-in fade-in duration-700">
+  <div class="h-full flex flex-col space-y-6 animate-in fade-in duration-700">
     <header class="flex items-center justify-between">
-      <div class="space-y-1">
-        <h2 class="text-2xl font-bold tracking-tight flex items-center gap-3">
-          Growth Opportunities
-          <div class="px-2.5 py-1 bg-orange-500/10 text-orange-500 border border-orange-500/20 rounded-full text-[9px] font-black uppercase tracking-widest animate-pulse">Live Radar</div>
-        </h2>
-        <p class="text-sm text-zinc-500 font-medium">Threads where your product DNA has the highest relevance and conversion potential.</p>
+      <div class="flex items-center gap-3">
+        <h2 class="text-sm font-black uppercase tracking-widest text-zinc-400">Opportunities</h2>
+        <div class="px-2 py-0.5 bg-orange-500/10 text-orange-500 border border-orange-500/20 rounded-full text-[8px] font-black uppercase tracking-widest animate-pulse font-mono">Live</div>
       </div>
       
       <button 
         @click="loadHotTweets" 
-        class="p-3 bg-white/[0.03] border border-white/10 rounded-2xl hover:bg-white/[0.08] transition-apple active:scale-95 group shadow-xl"
+        class="p-2 bg-white/[0.03] border border-white/10 rounded-xl hover:bg-white/[0.08] transition-apple active:scale-95 group shadow-xl"
         title="Refresh Radar"
       >
-        <svg :class="['w-5 h-5 text-zinc-400 group-hover:text-white transition-apple', loading ? 'animate-spin' : '']" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+        <svg :class="['w-4 h-4 text-zinc-500 group-hover:text-white transition-apple', loading ? 'animate-spin' : '']" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
           <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>
@@ -106,49 +103,46 @@ onMounted(() => {
     </div>
 
     <!-- Feed Grid -->
-    <div v-else class="grid gap-6 md:grid-cols-2">
-      <div v-for="tweet in tweets" :key="tweet.id" class="group bg-white/[0.02] border border-white/5 hover:border-orange-500/20 hover:bg-white/[0.04] transition-apple rounded-[32px] overflow-hidden p-8 flex flex-col justify-between shadow-xl relative hover:shadow-orange-950/20">
+    <div v-else class="grid gap-4 grid-cols-1">
+      <div v-for="tweet in tweets" :key="tweet.id" class="group bg-white/[0.02] border border-white/5 hover:border-orange-500/20 hover:bg-white/[0.04] transition-apple rounded-[24px] overflow-hidden p-5 flex flex-col justify-between shadow-xl relative">
         
-        <!-- Heat score visualizer -->
-        <div class="absolute top-0 right-0 w-32 h-32 bg-orange-500/5 blur-[40px] rounded-full -mr-10 -mt-10 group-hover:bg-orange-500/15 transition-apple"></div>
-
         <div>
-          <header class="flex justify-between items-start mb-6">
+          <header class="flex justify-between items-start mb-4">
             <div class="flex items-center gap-3">
-               <div class="w-10 h-10 rounded-full bg-black/40 border border-white/5 flex items-center justify-center text-[11px] font-black font-mono text-zinc-400 uppercase">
+               <div class="w-8 h-8 rounded-full bg-black/40 border border-white/5 flex items-center justify-center text-[9px] font-black font-mono text-zinc-500 uppercase">
                  {{ tweet.author_handle.slice(0, 2) }}
                </div>
                <div class="flex flex-col">
-                  <span class="font-black text-[15px] text-white tracking-tight group-hover:text-orange-400 transition-apple">@{{ tweet.author_handle }}</span>
-                  <span class="text-[9px] text-zinc-600 font-black uppercase tracking-widest">{{ new Date(tweet.posted_at).toLocaleDateString() }}</span>
+                  <span class="font-black text-sm text-white tracking-tight group-hover:text-orange-400 transition-apple">@{{ tweet.author_handle }}</span>
+                  <span class="text-[8px] text-zinc-600 font-black uppercase tracking-widest">{{ new Date(tweet.posted_at).toLocaleDateString() }}</span>
                </div>
             </div>
-            <div class="flex items-center gap-2.5 px-3 py-1 bg-rose-500/10 border border-rose-500/20 rounded-full">
-               <div class="w-1.5 h-1.5 rounded-full bg-rose-500 shadow-[0_0_8px_#f43f5e]"></div>
-               <span class="text-[9px] font-black text-rose-400 uppercase tracking-[0.2em]">{{ tweet.heat_score }}</span>
+            <div class="flex items-center gap-1.5 px-2 py-0.5 bg-rose-500/10 border border-rose-500/20 rounded-full">
+               <div class="w-1 h-1 rounded-full bg-rose-500"></div>
+               <span class="text-[8px] font-black text-rose-400 uppercase tracking-widest">{{ tweet.heat_score }}</span>
             </div>
           </header>
 
-          <p class="text-zinc-400 text-[13px] leading-relaxed mb-6 font-medium line-clamp-4 relative group-hover:text-zinc-300 transition-apple">
+          <p class="text-zinc-400 text-[12px] leading-relaxed mb-4 font-medium line-clamp-3 relative group-hover:text-zinc-300 transition-apple">
             "{{ tweet.content }}"
           </p>
         </div>
 
-        <footer class="flex items-center justify-between border-t border-white/5 pt-6 mt-4">
-          <div class="flex gap-4">
-             <div class="flex items-center gap-1.5 text-zinc-600 group-hover:text-zinc-400 transition-apple font-bold text-[11px]">
-               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+        <footer class="flex items-center justify-between border-t border-white/5 pt-4 mt-2">
+          <div class="flex gap-3">
+             <div class="flex items-center gap-1 text-zinc-600 group-hover:text-zinc-500 transition-apple font-bold text-[9px]">
+               <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                {{ tweet.reply_count }}
              </div>
-             <div class="flex items-center gap-1.5 text-zinc-600 group-hover:text-zinc-400 transition-apple font-bold text-[11px]">
-               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
+             <div class="flex items-center gap-1 text-zinc-600 group-hover:text-zinc-500 transition-apple font-bold text-[9px]">
+               <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
                {{ tweet.like_count }}
              </div>
           </div>
           
           <button 
             @click="openTweet(tweet.author_handle, tweet.x_tweet_id)"
-            class="px-6 py-2.5 bg-zinc-800 hover:bg-orange-500 text-white text-[11px] font-black uppercase tracking-[0.1em] rounded-xl transition-apple shadow-lg active:scale-95"
+            class="px-4 py-2 bg-zinc-800 hover:bg-orange-500 text-white text-[9px] font-black uppercase tracking-widest rounded-lg transition-apple shadow-lg active:scale-95"
           >
             Engage ↗
           </button>
diff --git a/extension/src/options/Profile.vue b/extension/src/options/Profile.vue
index c90c975..d69642e 100644
--- a/extension/src/options/Profile.vue
+++ b/extension/src/options/Profile.vue
@@ -97,13 +97,8 @@ onMounted(() => {
     <div class="w-8 h-8 border-2 border-white/10 border-t-rose-500 rounded-full animate-spin"></div>
   </div>
 
-  <div v-else class="space-y-12 animate-in fade-in duration-700">
-    <header class="space-y-1">
-      <h2 class="text-2xl font-bold tracking-tight">Product DNA</h2>
-      <p class="text-sm text-zinc-500 font-medium">Shape your AI's core knowledge about what you're building.</p>
-    </header>
-
-    <form @submit.prevent="saveProfile" class="space-y-10">
+  <div v-else class="space-y-8 animate-in fade-in duration-700">
+    <form @submit.prevent="saveProfile" class="space-y-8">
       
       <!-- Notifications -->
       <transition enter-active-class="transition duration-300 transform" enter-from-class="opacity-0 -translate-y-2" enter-to-class="opacity-100 translate-y-0">
@@ -119,10 +114,8 @@ onMounted(() => {
           {{ savedMessage }}
         </div>
       </transition>
-
-      <!-- Basic Info Section -->
-      <section class="space-y-6">
-        <div class="grid grid-cols-2 gap-8">
+      <div class="space-y-6">
+        <div class="grid grid-cols-1 gap-6">
           <div class="space-y-3">
             <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Product Name</label>
             <input v-model="form.product_name" required class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700" placeholder="e.g. InsightReply" />
@@ -138,7 +131,7 @@ onMounted(() => {
           <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Target Persona</label>
           <input v-model="form.target_audience" class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700" placeholder="e.g. Founders & Indie Hackers on X" />
         </div>
-      </section>
+      </div>
 
       <!-- Knowledge Base Section -->
       <section class="space-y-8 pt-4">
@@ -164,16 +157,15 @@ onMounted(() => {
       <!-- System Logic Section -->
       <section class="pt-8 border-t border-white/5 space-y-6">
         <header class="space-y-1">
-          <h3 class="text-sm font-bold text-zinc-400">Advanced: Neutral Intelligence</h3>
-          <p class="text-[11px] text-zinc-600 font-medium">Override the primary engine models if you have specific performance needs.</p>
+          <h3 class="text-xs font-bold text-zinc-400 uppercase tracking-[0.1em]">Engine Overrides</h3>
         </header>
 
-        <div class="grid grid-cols-2 gap-8">
+        <div class="grid grid-cols-1 gap-6">
           <div class="space-y-3">
             <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">LLM Provider</label>
             <div class="relative">
               <select v-model="form.default_llm_provider" class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700 appearance-none cursor-pointer">
-                <option value="">Global Default (Automated)</option>
+                <option value="">Global Default</option>
                 <option v-for="p in providers" :key="p" :value="p">{{ p.charAt(0).toUpperCase() + p.slice(1) }}</option>
               </select>
               <div class="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-zinc-600">
@@ -182,22 +174,22 @@ onMounted(() => {
             </div>
           </div>
           <div class="space-y-3">
-            <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Engine Model Override</label>
-            <input v-model="form.default_llm_model" class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700" placeholder="e.g. gpt-4o, claude-3-5-sonnet" />
+            <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Model Override</label>
+            <input v-model="form.default_llm_model" class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700" placeholder="e.g. gpt-4o" />
           </div>
         </div>
       </section>
 
       <!-- Action -->
-      <footer class="pt-10 flex justify-end">
+      <footer class="pt-4 pb-8">
         <button 
           type="submit"
           :disabled="isSaving"
-          class="px-10 py-4 bg-rose-500 hover:bg-rose-400 text-white rounded-2xl text-[15px] font-bold transition-apple shadow-xl shadow-rose-900/40 flex items-center gap-3 active:scale-95 disabled:opacity-50"
+          class="w-full py-4 bg-rose-500 hover:bg-rose-400 text-white rounded-2xl text-sm font-bold transition-apple shadow-xl shadow-rose-900/40 flex items-center justify-center gap-3 active:scale-95 disabled:opacity-50"
         >
-          <div v-if="isSaving" class="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
-          <svg v-else xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-rose-100"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
-          {{ isSaving ? 'Committing Changes...' : 'Synchronize Product DNA' }}
+          <div v-if="isSaving" class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
+          <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-rose-100"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+          {{ isSaving ? 'Committing...' : 'Save Product DNA' }}
         </button>
       </footer>
     </form>
diff --git a/extension/src/options/Strategies.vue b/extension/src/options/Strategies.vue
index 595a16f..1a17d56 100644
--- a/extension/src/options/Strategies.vue
+++ b/extension/src/options/Strategies.vue
@@ -83,46 +83,41 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="space-y-12">
+  <div class="space-y-8 animate-in fade-in duration-700">
     
-    <header class="flex justify-between items-end">
-      <div class="space-y-1">
-        <h2 class="text-2xl font-bold tracking-tight">AI Content Strategies</h2>
-        <p class="text-sm text-zinc-500 font-medium">Fine-tune how your AI assistant approaches engagement for different personas.</p>
-      </div>
+    <div v-if="!showForm" class="flex justify-end">
       <button 
-        v-if="!showForm"
         @click="showForm = true"
-        class="px-5 py-2.5 bg-rose-500 hover:bg-rose-400 text-white rounded-[14px] text-sm font-bold transition-apple shadow-lg shadow-rose-900/20 active:scale-95 flex items-center gap-2"
+        class="w-full py-4 bg-rose-500 hover:bg-rose-400 text-white rounded-2xl text-sm font-bold transition-apple shadow-lg shadow-rose-900/20 active:scale-95 flex items-center justify-center gap-2"
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
-        New Strategy
+        New Prompt Angle
       </button>
-    </header>
+    </div>
 
     <div v-if="isLoading" class="py-20 flex justify-center">
       <div class="w-8 h-8 border-2 border-white/10 border-t-rose-500 rounded-full animate-spin"></div>
     </div>
 
-    <div v-else class="space-y-8">
+    <div v-else class="space-y-6">
       <!-- Create Form Modal View -->
       <transition enter-active-class="transition duration-500 ease-out transform" enter-from-class="opacity-0 scale-95 -translate-y-4" enter-to-class="opacity-100 scale-100 translate-y-0">
-        <form v-if="showForm" @submit.prevent="createStrategy" class="bg-white/[0.03] border border-white/5 rounded-[32px] p-8 space-y-8 shadow-2xl relative">
+        <form v-if="showForm" @submit.prevent="createStrategy" class="bg-white/[0.03] border border-white/5 rounded-[32px] p-6 space-y-6 shadow-2xl relative">
           <div class="flex justify-between items-center">
-            <h3 class="text-lg font-bold">New Prompt Angle</h3>
+            <h3 class="text-base font-bold">Configure Angle</h3>
             <button type="button" @click="showForm = false" class="p-2 rounded-full hover:bg-white/5 transition-apple">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
             </button>
           </div>
 
-          <div v-if="errorMsg" class="p-4 bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-bold rounded-xl animate-pulse">
+          <div v-if="errorMsg" class="p-4 bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-bold rounded-xl">
             {{ errorMsg }}
           </div>
 
-          <div class="grid grid-cols-2 gap-8">
+          <div class="grid grid-cols-1 gap-6">
             <div class="space-y-3">
-              <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Internal Reference ID</label>
-              <input v-model="form.strategy_key" required class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700" placeholder="e.g. vc_advisor" />
+              <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Internal key</label>
+              <input v-model="form.strategy_key" required class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700 font-mono" placeholder="e.g. vc_advisor" />
             </div>
             <div class="space-y-3">
               <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Display Label</label>
@@ -131,16 +126,14 @@ onMounted(() => {
           </div>
 
           <div class="space-y-3">
-            <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Prompt Instructions & constraints</label>
-            <textarea v-model="form.description" required rows="4" class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700 resize-none py-4" placeholder="Be authoritative yet encouraging. Focus on market metrics. Avoid safe 'that's great' comments."></textarea>
+            <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Instructions</label>
+            <textarea v-model="form.description" required rows="4" class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700 resize-none py-4" placeholder="Be authoritative yet encouraging..."></textarea>
           </div>
 
-          <div class="flex justify-end">
-            <button type="submit" :disabled="isSubmitting" class="px-8 py-3.5 bg-rose-500 hover:bg-rose-400 text-white rounded-2xl text-[15px] font-bold transition-apple shadow-xl shadow-rose-900/30 flex items-center gap-3 active:scale-95 disabled:opacity-50">
-               <div v-if="isSubmitting" class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
-               {{ isSubmitting ? 'Architecting...' : 'Save Strategy' }}
-            </button>
-          </div>
+          <button type="submit" :disabled="isSubmitting" class="w-full py-4 bg-rose-500 hover:bg-rose-400 text-white rounded-2xl text-sm font-bold transition-apple shadow-xl shadow-rose-900/30 flex items-center justify-center gap-3 active:scale-95 disabled:opacity-50">
+             <div v-if="isSubmitting" class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
+             {{ isSubmitting ? 'Architecting...' : 'Deploy Strategy' }}
+          </button>
         </form>
       </transition>
 
@@ -153,21 +146,21 @@ onMounted(() => {
       </div>
 
       <div class="grid grid-cols-1 gap-4">
-        <div v-for="s in strategies" :key="s.id" class="group bg-white/[0.02] border border-white/5 rounded-[28px] p-6 flex justify-between items-center transition-apple hover:bg-white/[0.04] hover:border-white/10 hover:shadow-2xl">
-          <div class="flex items-center gap-6">
-            <div class="w-14 h-14 bg-rose-500/5 border border-rose-500/10 rounded-2xl flex items-center justify-center text-rose-500 group-hover:scale-110 transition-apple">
-               <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+        <div v-for="s in strategies" :key="s.id" class="group bg-white/[0.02] border border-white/5 rounded-[24px] p-4 flex justify-between items-center transition-apple hover:bg-white/[0.04]">
+          <div class="flex items-center gap-4">
+            <div class="w-10 h-10 bg-rose-500/5 border border-rose-500/10 rounded-xl flex items-center justify-center text-rose-500 transition-apple shrink-0">
+               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
             </div>
-            <div class="space-y-1.5">
-              <div class="flex items-center gap-3">
-                <span class="text-[17px] font-black tracking-tight group-hover:text-rose-400 transition-apple">{{ s.label }}</span>
-                <span class="text-[9px] font-black font-mono text-zinc-500 bg-black/40 px-2 py-0.5 rounded-md border border-white/5 uppercase tracking-tighter">{{ s.strategy_key }}</span>
+            <div class="min-w-0">
+              <div class="flex items-center gap-2">
+                <span class="text-sm font-black tracking-tight truncate group-hover:text-rose-400 transition-apple">{{ s.label }}</span>
+                <span class="text-[8px] font-black font-mono text-zinc-600 bg-black/40 px-1.5 py-0.5 rounded border border-white/5 uppercase tracking-tighter">{{ s.strategy_key }}</span>
               </div>
-              <p class="text-[13px] text-zinc-500 leading-relaxed font-medium max-w-xl group-hover:text-zinc-400 transition-apple">{{ s.description }}</p>
+              <p class="text-[11px] text-zinc-500 leading-relaxed font-medium truncate group-hover:text-zinc-400 transition-apple">{{ s.description }}</p>
             </div>
           </div>
-          <button @click="deleteStrategy(s.id)" class="p-4 rounded-2xl text-zinc-700 hover:text-rose-500 hover:bg-rose-500/10 transition-apple opacity-0 group-hover:opacity-100 active:scale-95">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
+          <button @click="deleteStrategy(s.id)" class="p-3 rounded-xl text-zinc-700 hover:text-rose-500 transition-apple active:scale-95">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
           </button>
         </div>
       </div>