diff --git a/extension/src/content/Sidebar.vue b/extension/src/content/Sidebar.vue
index dada3eb..29724a4 100644
--- a/extension/src/content/Sidebar.vue
+++ b/extension/src/content/Sidebar.vue
@@ -107,28 +107,28 @@ const copyToClipboard = async (reply: any) => {
 
 <template>
   <transition
-    enter-active-class="transition duration-500 ease-out transform"
-    enter-from-class="translate-x-full opacity-0 scale-95"
-    enter-to-class="translate-x-0 opacity-100 scale-100"
-    leave-active-class="transition duration-400 ease-in transform"
-    leave-from-class="translate-x-0 opacity-100 scale-100"
-    leave-to-class="translate-x-full opacity-0 scale-95"
+    enter-active-class="transition-transform duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)]"
+    enter-from-class="translate-x-full"
+    enter-to-class="translate-x-0"
+    leave-active-class="transition-transform duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)]"
+    leave-from-class="translate-x-0"
+    leave-to-class="translate-x-full"
   >
-    <div v-if="isVisible" class="fixed right-6 top-1/2 -translate-y-1/2 w-[380px] max-h-[90vh] flex flex-col glass-card rounded-[24px] shadow-[0_32px_64px_rgba(0,0,0,0.5)] text-[#f8fafc] font-sans z-[2147483647] overflow-hidden border border-white/5 selection:bg-rose-500/30">
+    <div v-if="isVisible" class="fixed right-0 top-0 bottom-0 w-[400px] flex flex-col bg-zinc-950/90 backdrop-blur-[40px] border-l border-white/10 shadow-[-10px_0_40px_rgba(0,0,0,0.5)] text-[#f8fafc] font-sans z-[2147483647] overflow-hidden selection:bg-rose-500/30">
       
       <!-- Premium Header -->
-      <div class="px-6 py-5 flex justify-between items-center bg-white/[0.02] border-b border-white/5">
+      <div class="px-6 py-5 flex justify-between items-center bg-white/[0.02] border-b border-white/5 shrink-0">
         <div class="flex items-center gap-3">
-          <div class="p-2 rounded-lg bg-rose-500/10 border border-rose-500/20">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-rose-500"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
+          <div class="p-2 rounded-xl 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="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-white"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
           </div>
           <div>
-            <span class="text-sm font-bold tracking-tight block">InsightReply</span>
-            <span class="text-[9px] text-zinc-500 uppercase tracking-[0.2em] font-bold">Spatial Copilot</span>
+            <span class="text-[15px] font-black tracking-tight block text-white drop-shadow-sm">InsightReply</span>
+            <span class="text-[9px] text-zinc-400 uppercase tracking-[0.2em] font-bold">Spatial Copilot</span>
           </div>
         </div>
-        <button @click="isVisible = false" class="p-2 rounded-full hover:bg-white/10 transition-apple group">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-zinc-500 group-hover:text-white transition-apple"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        <button @click="isVisible = false" class="p-2.5 rounded-full bg-white/5 hover:bg-rose-500/20 hover:text-rose-400 border border-white/5 transition-apple group">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-zinc-400 group-hover:text-rose-400 transition-apple"><path d="M18 6L6 18M6 6l12 12"/></svg>
         </button>
       </div>