diff --git a/data/tech-stack-data/1-0-0-beta.json b/data/tech-stack-data/1-0-0-beta.json
index 2e6ae5a..9799221 100644
--- a/data/tech-stack-data/1-0-0-beta.json
+++ b/data/tech-stack-data/1-0-0-beta.json
@@ -61,56 +61,48 @@
         {
           "name": "React",
           "version": "v19.2.3",
-
           "description": "Platform for building desktop web applications",
           "link": "https://react.dev/"
         },
         {
           "name": "Next Js",
           "version": "v16.1.1",
-
           "description": "React framework that helps to build fast web apps",
           "link": "https://nextjs.org/"
         },
         {
           "name": "Material UI",
           "version": "v6.3.1",
-
           "description": "Ready to use Material Design components",
           "link": "https://mui.com/material-ui/"
         },
         {
           "name": "D3",
           "version": "v7.8.5",
-
           "description": "JavaScript library for manipulating documents based on data.",
           "link": "https://d3js.org/"
         },
         {
           "name": "NVD3",
           "version": "v1.8.16",
-
           "description": "Re-usable charts for D3.js.",
           "link": "https://nvd3.org/"
         },
         {
           "name": "Fullcalendar",
           "version": "v6.1.15",
-
           "description": "Full-sized drag & drop event calendar.",
           "link": "https://fullcalendar.io/"
         },
         {
           "name": "Lodash (lodash-es)",
           "version": "v4.17.21",
-
           "description": "A modern JavaScript utility library delivering modularity, performance, & extras.",
           "link": "https://lodash.com/"
         },
         {
           "name": "Moment",
           "version": "v2.30.1",
-
           "description": "Parse, validate, manipulate, and display dates and times in JavaScript",
           "link": "https://momentjs.com/"
         }
@@ -127,6 +119,12 @@
           "description": "Platform for universal React applications.",
           "link": "https://expo.dev/",
           "version": "54.0.12"
+        },
+        {
+          "name": "UI Kitten",
+          "description": "React Native UI library based on Eva Design System for building rich cross-platform mobile applicationss.",
+          "link": "https://akveo.github.io/react-native-ui-kitten/",
+          "version": "1.0.0"
         }
       ]
     },
@@ -452,4 +450,4 @@
       "Java": []
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/MDXComponents/VideoCard/VideoCard.css b/src/components/MDXComponents/VideoCard/VideoCard.css
index 397af3e..632f9f3 100644
--- a/src/components/MDXComponents/VideoCard/VideoCard.css
+++ b/src/components/MDXComponents/VideoCard/VideoCard.css
@@ -156,6 +156,17 @@
   transform: scale(1.05);
 }
 
+/* ── Dark mode ──────────────────────────────────────────────── */
+[data-theme='dark'] .thumbnail-text {
+  color: #ffffff;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+}
+
+[data-theme='dark'] .thumbnail-subtext {
+  color: rgba(255, 255, 255, 0.8);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
 @media (max-width: 640px) {
   .video-card-container {
     flex-direction: column-reverse;
diff --git a/src/css/custom.css b/src/css/custom.css
index 4062563..bac5621 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -8,8 +8,8 @@
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 :root {
-  --ifm-container-width-xl: 1440px;
-
+  --ifm-container-width-xl: 2000px;
+  --ifm-container-width:1600px;
   --ifm-color-primary: rgba(23, 148, 239, 1);
   --ifm-color-primary-hover: var(--ifm-color-secondary);
   --ifm-color-dark: rgba(24, 24, 27, 1);
@@ -204,6 +204,85 @@
   background-image: none;
 }
 
+/* ── Dropdown popover ──────────────────────────────────────── */
+[data-theme='dark'] .dropdown-popover {
+  background: #1e3050;
+  box-shadow:
+    0px 4px 8px 0px rgba(0, 0, 0, 0.3),
+    0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='dark'] .dropdown-popover .popover-content {
+  box-shadow:
+    0px 4px 8px 0px rgba(0, 0, 0, 0.3),
+    0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='dark'] .menu-item:hover {
+  background-color: rgba(76, 141, 255, 0.1);
+}
+
+[data-theme='dark'] .menu-label {
+  color: rgba(255, 255, 255, 0.85);
+}
+[data-theme='dark'] .launcher-ecosystem>div>button>div div {
+    background:rgba(255, 255, 255, 0.85) !important;
+} 
+[data-theme='dark'] .launcher-ecosystem>div>button:hover,[data-theme='dark'] .launcher-ecosystem>div>button:focus{
+   background:rgba(255, 255, 255, 0.2) !important;
+}
+
+/* ── Sidebar ───────────────────────────────────────────────── */
+[data-theme='dark'] .theme-doc-sidebar-container {
+  border-right-color: rgba(255, 255, 255, 0.08);
+}
+
+/* ── Icon buttons ──────────────────────────────────────────── */
+[data-theme='dark'] button.btn.btn-icon:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+/* ── Homepage search bar ───────────────────────────────────── */
+[data-theme='dark'] .top-banner-section .search-bar-with-ai {
+  background:
+    linear-gradient(#1a2d4a, #1a2d4a) padding-box,
+    conic-gradient(
+        from 187.27deg at 50% 50%,
+        #eead92 0deg,
+        #ff44ec 192.12deg,
+        #fe4ce5 221.27deg,
+        #6018dc 360deg
+      )
+      border-box;
+}
+
+[data-theme='dark'] .top-banner-section .search-bar-with-ai:hover {
+  background:
+    linear-gradient(#1a2d4a, #1a2d4a) padding-box,
+    conic-gradient(
+        from 220deg at 50% 50%,
+        #f2b29b 0deg,
+        #ff63f1 190deg,
+        #1694ef 225deg,
+        #1694ef 360deg
+      )
+      border-box;
+}
+
+[data-theme='dark'] .top-banner-section .text-greeting-desc {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+/* ── Navbar search hover ───────────────────────────────────── */
+[data-theme='dark'] .navbar .navbar__items .search-bar-with-ai .DocSearch-Button:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* ── Footer ────────────────────────────────────────────────── */
+[data-theme='dark'] .footer .send-message-section {
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
 .markdown h1:first-child,
 .markdown h1 {
   --ifm-h1-font-size: 2.5rem;
@@ -222,7 +301,8 @@ body {
     outline: none;
   }
 }
-.DocSearch-Hit-action-button:focus, .DocSearch-Hit-action-button:hover{
+.DocSearch-Hit-action-button:focus,
+.DocSearch-Hit-action-button:hover {
   background-color: rgba(255, 255, 255, 0.5) !important;
 }
 .line-clamp-1 {
@@ -337,6 +417,10 @@ span.DocSearch-Button-Keys {
   padding-right: 16px;
 }
 
+.top_nav + .container .thin-scrollbar ,.thin-scrollbar.theme-doc-toc-desktop{
+  top: calc(var(--ifm-navbar-height) + 2rem + var(--ifm-top-nav-height));
+}
+
 /* Navbar inner: relative so the center wrapper can be absolutely positioned */
 .navbar__inner {
   position: relative;
@@ -383,6 +467,9 @@ span.DocSearch-Button-Keys {
   vertical-align: bottom;
   margin-left: 6px;
 }
+[data-theme='dark'] .dropdown > .navbar__link:after {
+  background-image: url('/img/dropdown-white.svg');
+}
 
 .menu-wrapper {
   position: relative;
@@ -877,7 +964,7 @@ button.clean-btn.menu__caret::before {
   white-space: nowrap;
   flex-shrink: 0;
   transition:
-    background 0.2s ease,   
+    background 0.2s ease,
     border-color 0.2s ease;
 }
 
diff --git a/src/theme/Navbar/Content/index.js b/src/theme/Navbar/Content/index.js
index eeccb81..f2d1615 100644
--- a/src/theme/Navbar/Content/index.js
+++ b/src/theme/Navbar/Content/index.js
@@ -95,7 +95,10 @@ export default function NavbarContent() {
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          <AppLauncher excludeId="docs" />
+          <div className="launcher-ecosystem">
+            <AppLauncher excludeId="docs" />
+          </div>
+
           {/* <MenuSection /> */}
           <Link
             to="https://wavemaker.ai/ai-early-bird/"
diff --git a/src/theme/SearchBar/AIConversation.jsx b/src/theme/SearchBar/AIConversation.jsx
index a5f40ba..2601f2d 100644
--- a/src/theme/SearchBar/AIConversation.jsx
+++ b/src/theme/SearchBar/AIConversation.jsx
@@ -57,9 +57,12 @@ function resolveImageSrc(src) {
   ) {
     return src;
   }
-  // Strip leading ./ or ../
-  const cleaned = src.replace(/^(\.\.?\/)+/, '');
-  return `${GITHUB_RAW_BASE}${cleaned}`;
+  // Only prepend the repo base for already-resolved repo-relative asset paths.
+  // Raw doc-relative paths like ./assets/... lose their document context if we trim them.
+  if (src.startsWith('docs/') || src.startsWith('static/') || src.startsWith('blogs/')) {
+    return `${GITHUB_RAW_BASE}${src}`;
+  }
+  return src;
 }
 
 function buildMarkdownComponents(navigate) {
@@ -227,16 +230,43 @@ export default function AIConversation({
     [history],
   );
   const scrollRef = useRef(null);
+  // true once the user has scrolled up away from the bottom
+  const isUserScrolled = useRef(false);
+  const SCROLL_THRESHOLD = 80; // px from bottom before we consider it "scrolled away"
+
   // Mobile: only one message's sources can be expanded at a time
   const [expandedMobileId, setExpandedMobileId] = useState(null);
   const [feedbackPromptId, setFeedbackPromptId] = useState(null);
   const [feedbackReasonByMessage, setFeedbackReasonByMessage] = useState({});
 
+  // Detect when the user manually scrolls
   useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => {
+      const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+      isUserScrolled.current = distFromBottom > SCROLL_THRESHOLD;
+    };
+    el.addEventListener('scroll', onScroll, { passive: true });
+    return () => el.removeEventListener('scroll', onScroll);
+  }, []);
+
+  // New message added (user query or completed AI response) → always scroll to
+  // bottom and reset the user-scrolled lock so streaming continues to follow.
+  useEffect(() => {
+    isUserScrolled.current = false;
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
-  }, [messages, currentFragments, currentTraceSteps]);
+  }, [messages.length]);
+
+  // Streaming updates (fragments / trace steps) → only scroll if the user
+  // hasn't manually scrolled away to read earlier content.
+  useEffect(() => {
+    if (!isUserScrolled.current && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [currentFragments, currentTraceSteps]);
 
   const toggleMobileSources = (msgId) => {
     setExpandedMobileId((prev) => (prev === msgId ? null : msgId));
@@ -280,7 +310,6 @@ export default function AIConversation({
             feedbackPromptId === msg.id && msg.feedbackStatus !== 'submitted';
           const canRateMessage =
             msg.traceId &&
-            !isStreaming &&
             msg.feedbackStatus !== 'submitted' &&
             msg.feedbackStatus !== 'submitting';
 
@@ -535,7 +564,7 @@ export default function AIConversation({
             <div className={styles.agentHeader}>
               <div className={styles.agentIconCircle}>
                 <img
-                  src="/img/icon/AskAI-Icon.svg"
+                  src="/img/icon/doc-ai-agent.svg"
                   alt="AI"
                   width="18"
                   height="18"
diff --git a/src/theme/SearchBar/AIConverstion.module.css b/src/theme/SearchBar/AIConverstion.module.css
index 4fa923b..45ce8a7 100644
--- a/src/theme/SearchBar/AIConverstion.module.css
+++ b/src/theme/SearchBar/AIConverstion.module.css
@@ -22,6 +22,7 @@
   --shadow:
     0 8px 40px rgba(27, 67, 130, 0.14), 0 2px 12px rgba(27, 67, 130, 0.08);
   --shadow-card: 0 2px 8px rgba(27, 67, 130, 0.08);
+  --askai-source-card-label:rgba(90, 90, 90, 1);
 }
 
 /* Dark mode — follows Docusaurus [data-theme='dark'] convention */
@@ -44,6 +45,8 @@
   --purple: #a78bfa;
   --shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 2px 12px rgba(0, 0, 0, 0.3);
   --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --askai-source-card-label:rgba(255, 255, 255, 0.92);
+  
 }
 
 /* OVERLAY */
@@ -312,12 +315,7 @@
 
 .msgUserBubble {
   background: rgba(255, 255, 255, 0.7);
-  border: 1.22px solid;
-  border-image-source: linear-gradient(
-    91.21deg,
-    #ffffff 0%,
-    rgba(255, 255, 255, 0.44) 94.21%
-  );
+  border: none;
   color: rgba(26, 26, 26, 1);
   border-radius: 12px;
   padding: 10px 14px;
@@ -383,7 +381,7 @@
   font-size: 10px;
   font-family: 'Inter', sans-serif;
   font-weight: 600;
-  color: rgba(90, 90, 90, 1);
+  color: var(--askai-source-card-label);
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -2107,7 +2105,7 @@
 .agentIconCircle {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   text-box-trim: trim-both;
 }
 
@@ -2122,6 +2120,7 @@
   font-family: 'Inter', sans-serif;
   color: var(--text);
   letter-spacing: -0.01em;
+  text-box-trim: trim-both;
 }
 
 /* ── Streaming circular loader ──────────────────────────────── */
diff --git a/src/theme/SearchBar/AskAIDialog.jsx b/src/theme/SearchBar/AskAIDialog.jsx
index 9f7e9a8..1b74a70 100644
--- a/src/theme/SearchBar/AskAIDialog.jsx
+++ b/src/theme/SearchBar/AskAIDialog.jsx
@@ -118,11 +118,8 @@ export default function AskAIDialog({ apiUrl, onClose, initialQuery = '' }) {
 
   // Trigger fade-out then call onClose
   const handleClose = useCallback(() => {
-    if (chat.messages.length === 0) {
-      localStorage.removeItem('wm-search-session-messages');
-    }
     setIsClosing(true);
-  }, [chat.messages.length]);
+  }, []);
 
   const handleAnimationEnd = useCallback(() => {
     if (isClosing) onClose();
@@ -316,10 +313,7 @@ export default function AskAIDialog({ apiUrl, onClose, initialQuery = '' }) {
                 </div>
                 <button
                   className={styles.closeBtn}
-                  onClick={() => {
-                    localStorage.removeItem('wm-search-session-messages');
-                    handleClose();
-                  }}
+                  onClick={handleClose}
                   aria-label="Close"
                 >
                   <svg
diff --git a/src/theme/SearchBar/AskAIDialog.module.css b/src/theme/SearchBar/AskAIDialog.module.css
index 47e2ded..250e2af 100644
--- a/src/theme/SearchBar/AskAIDialog.module.css
+++ b/src/theme/SearchBar/AskAIDialog.module.css
@@ -2,6 +2,69 @@
    AskAI Dialog — Full-screen modal, styled from AskAi.css reference
    ═══════════════════════════════════════════════════════════════ */
 
+/* ── Theme tokens ────────────────────────────────────────────── */
+:root {
+  --askai-bg: #ffffff;
+  --askai-bg-img-opacity: 1;
+  --askai-brand-name: rgba(36, 36, 36, 1);
+  --askai-close-icon: #6b7280;
+  --askai-close-hover-bg: rgba(0, 0, 0, 0.06);
+  --askai-close-hover-icon: #111827;
+  --askai-title: #111827;
+  --askai-subtitle: #6b7280;
+  --askai-input-bg: #ffffff;
+  --askai-input-text: #111827;
+  --askai-placeholder: #9ca3af;
+  --askai-input-focus-shadow: rgba(168, 85, 247, 0.26);
+  --askai-chip-bg: #ffffff;
+  --askai-chip-border: #e5e7eb;
+  --askai-chip-text: #374151;
+  --askai-chip-hover-border: #a855f7;
+  --askai-chip-hover-text: #7c3aed;
+  --askai-chip-hover-bg: rgba(168, 85, 247, 0.05);
+  --askai-chat-surface: transparent;
+  --askai-stop-btn-bg: transparent;
+  --askai-stop-btn-border: #e5e7eb;
+  --askai-clear-btn-bg: transparent;
+  --askai-clear-btn-border: #e5e7eb;
+  --askai-clear-btn-text: #6b7280;
+  --askai-clear-btn-hover-bg: #f0f4ff;
+  --askai-clear-btn-hover-border: #c7d2fe;
+  --askai-clear-btn-hover-text: #3b5aa3;
+  --askai-hint: #9ca3af;
+}
+
+[data-theme='dark'] {
+  --askai-bg: #12223f;
+  --askai-bg-img-opacity: 0;
+  --askai-brand-name: rgba(255, 255, 255, 0.85);
+  --askai-close-icon: rgba(255, 255, 255, 0.5);
+  --askai-close-hover-bg: rgba(255, 255, 255, 0.08);
+  --askai-close-hover-icon: rgba(255, 255, 255, 0.92);
+  --askai-title: rgba(255, 255, 255, 0.92);
+  --askai-subtitle: rgba(255, 255, 255, 0.55);
+  --askai-input-bg: #1a2d4a;
+  --askai-input-text: rgba(255, 255, 255, 0.92);
+  --askai-placeholder: rgba(255, 255, 255, 0.35);
+  --askai-input-focus-shadow: rgba(99, 102, 241, 0.3);
+  --askai-chip-bg: rgba(255, 255, 255, 0.06);
+  --askai-chip-border: rgba(255, 255, 255, 0.12);
+  --askai-chip-text: rgba(255, 255, 255, 0.72);
+  --askai-chip-hover-border: rgba(168, 85, 247, 0.6);
+  --askai-chip-hover-text: #c084fc;
+  --askai-chip-hover-bg: rgba(168, 85, 247, 0.12);
+  --askai-chat-surface: #0f1e35;
+  --askai-stop-btn-bg: linear-gradient(185deg, #498fd9b9 0%, #3745b0d7 100%);
+  --askai-stop-btn-border:rgba(255, 255, 255, 0.1);
+  --askai-clear-btn-bg: linear-gradient(185deg, #498fd9b9 0%, #3745b0d7 100%);
+  --askai-clear-btn-border: rgba(255, 255, 255, 0.1);
+  --askai-clear-btn-text: rgba(255, 255, 255, 0.5);
+  --askai-clear-btn-hover-bg: rgba(76, 141, 255, 0.15);
+  --askai-clear-btn-hover-border: rgba(76, 141, 255, 0.4);
+  --askai-clear-btn-hover-text: #4c8dff;
+  --askai-hint: rgba(255, 255, 255, 0.35);
+}
+
 /* ── Full-screen overlay ─────────────────────────────────────── */
 .overlay {
   position: fixed;
@@ -10,7 +73,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: #ffffff;
+  background: var(--askai-bg);
   font-family:
     'DM Sans',
     -apple-system,
@@ -54,6 +117,8 @@
   background: url('/img/background/ask-ai-bg.png') center top / cover no-repeat;
   pointer-events: none;
   z-index: 0;
+  opacity: var(--askai-bg-img-opacity);
+  transition: opacity 0.2s ease;
 }
 
 /* ── Header ─────────────────────────────────────────────────── */
@@ -82,7 +147,7 @@
 .brandName {
   font-size: 14px;
   font-weight: 500;
-  color: rgba(36, 36, 36, 1);
+  color: var(--askai-brand-name);
   font-family: inherit;
   text-box-trim: trim-both;
 }
@@ -96,7 +161,7 @@
   border-radius: 8px;
   border: none;
   background: transparent;
-  color: #6b7280;
+  color: var(--askai-close-icon);
   cursor: pointer;
   transition:
     background 0.15s ease,
@@ -104,8 +169,8 @@
 }
 
 .closeBtn:hover {
-  background: rgba(0, 0, 0, 0.06);
-  color: #111827;
+  background: var(--askai-close-hover-bg);
+  color: var(--askai-close-hover-icon);
 }
 
 /* ── Body ────────────────────────────────────────────────────── */
@@ -147,7 +212,7 @@
   border-radius: 8px;
   border: none;
   background: transparent;
-  color: #6b7280;
+  color: var(--askai-close-icon);
   cursor: pointer;
   transition:
     background 0.15s ease,
@@ -156,8 +221,8 @@
 }
 
 .landingCloseBtn:hover {
-  background: rgba(0, 0, 0, 0.06);
-  color: #111827;
+  background: var(--askai-close-hover-bg);
+  color: var(--askai-close-hover-icon);
 }
 
 .landingHero {
@@ -174,7 +239,7 @@
 .title {
   font-size: 2.25rem;
   font-weight: 800;
-  color: #111827;
+  color: var(--askai-title);
   margin: 0;
   line-height: 1.15;
   text-align: center;
@@ -183,7 +248,7 @@
 
 .subtitle {
   font-size: 1rem;
-  color: #6b7280;
+  color: var(--askai-subtitle);
   margin: 0;
   font-weight: 400;
   line-height: 1.5;
@@ -201,7 +266,7 @@
   min-height: 10rem;
   border-radius: 18px;
   background:
-    linear-gradient(#ffffff, #ffffff) padding-box,
+    linear-gradient(var(--askai-input-bg), var(--askai-input-bg)) padding-box,
     linear-gradient(135deg, #e879f9 0%, #a855f7 45%, #498fd9b9 100%) border-box;
   border: 1.5px solid transparent;
   transition: box-shadow 0.25s ease;
@@ -209,7 +274,7 @@
 }
 
 .inputContainer:focus-within {
-  box-shadow: 0 6px 36px rgba(168, 85, 247, 0.26);
+  box-shadow: 0 6px 36px var(--askai-input-focus-shadow);
 }
 
 .textarea {
@@ -222,7 +287,7 @@
   font-family: inherit;
   font-size: 0.95rem;
   line-height: 1.6;
-  color: #111827;
+  color: var(--askai-input-text);
   padding: 1.1rem 4.5rem 1.1rem 1.25rem;
   min-height: 80px;
   max-height: 160px;
@@ -231,7 +296,7 @@
 }
 
 .textarea::placeholder {
-  color: #9ca3af;
+  color: var(--askai-placeholder);
 }
 
 /* ── Send button (landing) ───────────────────────────────────── */
@@ -278,9 +343,9 @@
 .chip {
   padding: 0.5rem 1.1rem;
   border-radius: 999px;
-  border: 1.2px solid #e5e7eb;
-  background: #ffffff;
-  color: #374151;
+  border: 1.2px solid var(--askai-chip-border);
+  background: var(--askai-chip-bg);
+  color: var(--askai-chip-text);
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
@@ -290,9 +355,9 @@
 }
 
 .chip:hover {
-  border-color: #a855f7;
-  color: #7c3aed;
-  background: rgba(168, 85, 247, 0.05);
+  border-color: var(--askai-chip-hover-border);
+  color: var(--askai-chip-hover-text);
+  background: var(--askai-chip-hover-bg);
   transform: translateY(-1px);
 }
 
@@ -306,6 +371,7 @@
   min-height: 0;
   overflow: hidden;
   padding: 12px;
+  background: var(--askai-chat-surface);
 }
 
 .conversationCol {
@@ -320,7 +386,7 @@
 .chatInputArea {
   flex-shrink: 0;
   padding: 0.85rem 5rem 1rem;
-  background: #ffffff;
+  background: var(--askai-chat-surface);
   position: relative;
   z-index: 1;
 }
@@ -329,19 +395,18 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  background: #ffffff;
   border-radius: 14px;
   padding: 0.55rem 0.55rem 0.55rem 1.1rem;
   transition: all 0.2s ease;
   background:
-    linear-gradient(#ffffff, #ffffff) padding-box,
+    linear-gradient(var(--askai-input-bg), var(--askai-input-bg)) padding-box,
     linear-gradient(135deg, #f0abfc 0%, #c084fc 50%, #498fd9b9 100%) border-box;
   border: 1.5px solid transparent;
   box-shadow: 0 2px 12px rgba(168, 85, 247, 0.1);
 }
 
 .chatInputWrapper:focus-within {
-  box-shadow: 0 6px 36px rgba(168, 85, 247, 0.26);
+  box-shadow: 0 6px 36px var(--askai-input-focus-shadow);
 }
 
 .chatInputField {
@@ -352,7 +417,7 @@
   resize: none;
   font-size: 0.92rem;
   line-height: 1.5;
-  color: #111827;
+  color: var(--askai-input-text);
   padding: 0.3rem 0;
   min-height: 1.4rem;
   max-height: 9rem;
@@ -360,13 +425,13 @@
 }
 
 .chatInputField::placeholder {
-  color: #9ca3af;
+  color: var(--askai-placeholder);
 }
 
 .chatSendBtn {
   flex-shrink: 0;
-  width: 2.15rem;
-  height: 2.15rem;
+  width: 2rem;
+  height: 2rem;
   border-radius: 50%;
   border: none;
   display: flex;
@@ -393,16 +458,15 @@
 /* Stop generation button — shown while streaming */
 .chatStopBtn {
   flex-shrink: 0;
-  width: 2.15rem;
-  height: 2.15rem;
+  width: 2rem;
+  height: 2rem;
   border-radius: 50%;
-  border: 2px solid #ef4444;
+  border: 1px solid var(--askai-stop-btn-border);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background: #fff1f2;
-  color: #ef4444;
+  background: var(--askai-stop-btn-bg);
   transition: all 0.18s ease;
   animation: stopBtnIn 0.2s ease forwards;
 }
@@ -430,28 +494,28 @@
   flex-shrink: 0;
   width: 2rem;
   height: 2rem;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  border-radius: 50%;
+  border: 1px solid var(--askai-clear-btn-border);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background: #f9fafb;
-  color: #6b7280;
+  background: var(--askai-clear-btn-bg);
+  color: var(--askai-clear-btn-text);
   transition: all 0.15s ease;
 }
 
 .chatClearBtn:hover {
-  background: #f0f4ff;
-  border-color: #c7d2fe;
-  color: #3b5aa3;
+  background: var(--askai-clear-btn-hover-bg);
+  border-color: var(--askai-clear-btn-hover-border);
+  color: var(--askai-clear-btn-hover-text);
   box-shadow: 0 2px 8px rgba(59, 90, 163, 0.12);
 }
 
 .chatInputHint {
   text-align: center;
   font-size: 0.68rem;
-  color: #9ca3af;
+  color: var(--askai-hint);
   margin-top: 0.35rem;
 }
 
diff --git a/src/theme/SearchBar/styles.css b/src/theme/SearchBar/styles.css
index 52e78c6..6ee61b7 100644
--- a/src/theme/SearchBar/styles.css
+++ b/src/theme/SearchBar/styles.css
@@ -1320,7 +1320,7 @@
   font-size: 16px;
   font-weight: 700;
   font-family: 'Inter', sans-serif;
-  color: #1a2035;
+  color:var(--text);
   letter-spacing: -0.01em;
 }
 
@@ -1780,7 +1780,7 @@
 
 [data-theme='dark'] .DocSearch-Tabs-Container,
 [data-theme='dark'] .DocSearch-Footer {
-  background: rgba(255, 255, 255, 0.03) !important;
+  background: transparent !important;
   border-color: rgba(255, 255, 255, 0.07) !important;
 }
 
diff --git a/src/theme/SearchBar/useAIChat.js b/src/theme/SearchBar/useAIChat.js
index 0a03c7d..f8b4abf 100644
--- a/src/theme/SearchBar/useAIChat.js
+++ b/src/theme/SearchBar/useAIChat.js
@@ -59,7 +59,9 @@ export function useAIChat(pageContext, apiUrl) {
   const [activeActions, setActiveActions] = useState([]);
   const [activeMessageId, setActiveMessageId] = useState(() => {
     const saved = loadMessages();
-    const lastAssistant = [...saved].reverse().find((m) => m.role === 'assistant');
+    const lastAssistant = [...saved]
+      .reverse()
+      .find((m) => m.role === 'assistant');
     return lastAssistant?.id ?? null;
   });
   const abortRef = useRef(null);
@@ -80,6 +82,22 @@ export function useAIChat(pageContext, apiUrl) {
     saveMessages(messages);
   }, [messages]);
 
+  // Clear session on unmount (close button, Escape, navigation) and on
+  // page refresh / tab close (beforeunload).  This ensures that no matter
+  // how the Ask AI panel disappears the stale session cannot leak.
+  useEffect(() => {
+    const clearSession = () => {
+      localStorage.removeItem(SESSION_KEY_PREFIX + 'messages');
+      sessionStorage.removeItem('wm-search-session-id');
+    };
+
+    window.addEventListener('beforeunload', clearSession);
+    return () => {
+      window.removeEventListener('beforeunload', clearSession);
+      clearSession(); // fires on React unmount (close / navigation)
+    };
+  }, []);
+
   const sendMessage = useCallback(
     async (text) => {
       if (!text.trim() || isStreaming) return;
diff --git a/static/img/dropdown-white.svg b/static/img/dropdown-white.svg
new file mode 100644
index 0000000..230fcf5
--- /dev/null
+++ b/static/img/dropdown-white.svg
@@ -0,0 +1,4 @@
+<svg width="9" height="5" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.524902 0.525024L4.0249 4.02502L7.5249 0.525024" stroke="white" stroke-width="1.05"
+        stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/static/img/dropdown.svg b/static/img/dropdown.svg
index f34aabc..8c0fe89 100644
--- a/static/img/dropdown.svg
+++ b/static/img/dropdown.svg
@@ -1,3 +1,4 @@
 <svg width="9" height="5" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.524902 0.525024L4.0249 4.02502L7.5249 0.525024" stroke="black" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M0.524902 0.525024L4.0249 4.02502L7.5249 0.525024" stroke="black" stroke-width="1.05"
+        stroke-linecap="round" stroke-linejoin="round" />
 </svg>