diff --git a/app/globals.css b/app/globals.css
index a58bdeec..1010887e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,12 +4,24 @@
 @plugin "daisyui";
 @plugin "@tailwindcss/typography";
 
+/* Hide Scrollbar */
+* {
+  scrollbar-width: none;
+}
+
+::-webkit-scrollbar {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: none;
+}
+
 :root {
   --background: #ffffff;
   --foreground: #171717;
   --message-card-background: #f0f0f0;
   --icon-color: #555555;
-  --drawer-color: #f2f2f2;
+  --drawer-color: #ffffff;
 }
 
 [data-theme="dark"] {
@@ -82,10 +94,21 @@ html:has(.drawer-toggle:checked) {
 
 
 .icn {
+  /* color: var(--icon-color); */
+  border-radius: 9999px;
+  transition: color 200ms ease, background-color 200ms ease;
+}
+
+.icn:hover {
+  background-color: #e5e7eb;
+  color: #1f2937;
+}
+
+[data-theme="dark"] .icn:hover {
+  background-color: color-mix(in srgb, var(--icon-color) 12%, transparent);
   color: var(--icon-color);
-  @apply hover:bg-gray-200 hover:text-gray-800
 }
 
-[data-theme="dark"] .icn {
-  @apply hover:bg-gray-800 hover:text-gray-200
+input, select {
+  outline: none !important;
 }
\ No newline at end of file
diff --git a/components/Chatbot/Chatbot.tsx b/components/Chatbot/Chatbot.tsx
index 301b4e3c..39088f2b 100644
--- a/components/Chatbot/Chatbot.tsx
+++ b/components/Chatbot/Chatbot.tsx
@@ -80,7 +80,7 @@ function Chatbot({ chatSessionId, tabSessionId }: ChatbotProps) {
   const messageRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
   const timeoutIdRef = useRef<NodeJS.Timeout | null>(null);
 
-  const { backgroundColor } = useColor();
+  const { primaryBgColor } = useColor();
   const { isSmallScreen } = useScreenSize();
   const dispatch = useAppDispatch();
 
@@ -145,7 +145,7 @@ function Chatbot({ chatSessionId, tabSessionId }: ChatbotProps) {
     <MessageContext.Provider value={contextValue}>
       <div className="flex h-screen w-full overflow-hidden relative">
         {/* Sidebar - visible on large screens */}
-        <div className={`border-r overflow-y-auto transition-all duration-300 ease-in-out ${isToggledrawer && !isSmallScreen ? 'w-96 max-w-[286px]' : 'w-0'}`}>
+        <div className={`border-r overflow-y-auto transition-all duration-300 ease-in-out ${isToggledrawer && !isSmallScreen ? 'w-96 max-w-[286px]' : 'w-0 invisible absolute'}`}>
           <ChatbotDrawer
             setToggleDrawer={(data: boolean) => { dispatch(setToggleDrawer(data)) }}
             isToggledrawer={isToggledrawer}
@@ -162,7 +162,7 @@ function Chatbot({ chatSessionId, tabSessionId }: ChatbotProps) {
             <div className="w-full">
               <LinearProgress
                 color="inherit"
-                style={{ color: backgroundColor }}
+                style={{ color: primaryBgColor }}
               />
             </div>
           )}
diff --git a/components/Chatbot/hooks/useColor.ts b/components/Chatbot/hooks/useColor.ts
index 9b7ad0ce..03472fc3 100644
--- a/components/Chatbot/hooks/useColor.ts
+++ b/components/Chatbot/hooks/useColor.ts
@@ -1,10 +1,25 @@
-import { isColorLight } from "@/utils/themeUtility";
+import { getGradientBackground, isColorLight, withAlpha } from "@/utils/themeUtility";
 import { useTheme } from "@mui/material";
 
 export const useColor = () => {
     const theme = useTheme();
-    const backgroundColor = theme.palette.primary.main;
-    const textColor = isColorLight(backgroundColor) ? "black" : "white";
-
-    return { backgroundColor, textColor }
+    const primaryColor = theme.palette.primary.main;
+    const mode = theme.palette.mode;
+    const isLight = isColorLight(primaryColor);
+    const foregroundColor = mode === "dark" ? "white" : isLight ? "black" : "white";
+  
+    return { 
+      primaryBgColor: primaryColor,
+      // Kept separate from primaryBgColor so the text color can be customized independently in the future.
+      primaryTextColor: primaryColor,
+      foregroundColor: foregroundColor,
+      primaryGradientBg: getGradientBackground(primaryColor, mode),
+      primaryTintColor: withAlpha(primaryColor, mode === "dark" ? 0.18 : 0.12),
+      primaryHoverTintColor: withAlpha(primaryColor, mode === "dark" ? 0.12 : 0.08),
+      headerHoverBg: mode === "dark"
+        ? "rgba(255, 255, 255, 0.12)"
+        : isLight
+          ? "rgba(0, 0, 0, 0.08)"
+          : "rgba(255, 255, 255, 0.18)",
+     }
 }
\ No newline at end of file
diff --git a/components/FormComponent.tsx b/components/FormComponent.tsx
index 98713c5d..2ce3732d 100644
--- a/components/FormComponent.tsx
+++ b/components/FormComponent.tsx
@@ -6,7 +6,7 @@ import { setHelloClientInfo, setHelloKeysData } from "@/store/hello/helloSlice";
 import { GetSessionStorageData } from "@/utils/ChatbotUtility";
 import { useCustomSelector } from "@/utils/deepCheckSelector";
 import { splitNumber } from "@/utils/utilities";
-import { BookText, Loader2, Mail, Phone, Send, User } from "lucide-react";
+import { Loader2, Mail, MessageSquare, Phone, Send, User } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { useColor } from "./Chatbot/hooks/useColor";
@@ -36,13 +36,17 @@ interface FormErrors {
 }
 
 function FormComponent({ chatSessionId }: FormComponentProps) {
-  const { textColor, backgroundColor } = useColor();
+  const { foregroundColor, primaryTextColor, primaryBgColor } = useColor();
   const dispatch = useDispatch();
-  const { showWidgetForm, open, userData } = useCustomSelector((state) => ({
-    showWidgetForm: state.Hello?.[chatSessionId]?.showWidgetForm ?? true,
-    open: state.Chat.openHelloForm,
-    userData: state.Hello?.[chatSessionId]?.clientInfo
-  }));
+  const { showWidgetForm, open, userData, isFullScreen } = useCustomSelector((state) => {
+    const fullScreen = state.Hello?.[chatSessionId]?.helloConfig?.fullScreen;
+    return {
+      showWidgetForm: state.Hello?.[chatSessionId]?.showWidgetForm ?? true,
+      open: state.Chat.openHelloForm,
+      userData: state.Hello?.[chatSessionId]?.clientInfo,
+      isFullScreen: (fullScreen === true || fullScreen === 'true') ?? false
+    };
+  });
   const scriptParams = JSON.parse(GetSessionStorageData('helloConfig') || '{}')
   const { isSmallScreen } = useScreenSize();
   const [formData, setFormData] = useState<FormData>({
@@ -137,32 +141,39 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
 
   if (!open && !showWidgetForm) return null;
   if (!open && showWidgetForm) return (
-    <div
-      className={`bg-white p-2 px-4 cursor-pointer z-[9999] hover:shadow-md transition-all mx-auto rounded-br-md rounded-bl-md ${isSmallScreen ? 'w-full' : 'w-1/2 max-w-lg'}`}
-      onClick={() => setOpen(true)}
-      style={{
-        background: `linear-gradient(to right, ${backgroundColor}, ${backgroundColor}CC)`,
-        color: textColor
-      }}
-    >
-      <div className="flex items-center">
-        <div className="flex-shrink-0">
-          <BookText className="h-7 w-7 mr-1" />
+    <div className={`px-3 pt-2 ${isSmallScreen ? '' : 'mx-auto w-full max-w-2xl'}`}>
+      <div
+        onClick={() => setOpen(true)}
+        className="flex items-center gap-3 rounded-xl px-3 py-2.5 cursor-pointer transition-all hover:opacity-95 hover:shadow-md"
+        style={{ backgroundColor: primaryBgColor, color: foregroundColor }}
+      >
+        <div
+          className="flex-shrink-0 grid place-items-center w-9 h-9 rounded-lg"
+          style={{ backgroundColor: 'rgba(255,255,255,0.18)' }}
+        >
+          <MessageSquare size={18} />
         </div>
-        <div className="ml-2">
-          <span className="font-medium block text-base">Enter your details</span>
-          <p className="text-xs opacity-90">Click here to provide your information</p>
+        <div className="min-w-0 flex-1 leading-tight">
+          <div className="font-semibold text-sm truncate">Enter your details</div>
+          <div className="text-xs opacity-80 truncate">Click here to provide your information</div>
         </div>
       </div>
     </div>
   );
   return (
-    <div className="fixed inset-0 bg-black/50 z-[9999] overflow-y-auto flex items-start justify-center py-4 backdrop-blur-sm">
-      <div className="rounded-lg shadow-xl w-full max-w-md mx-4 relative my-auto dark:border dark:border-gray-500" style={{ backgroundColor: 'var(--background)' }}>
-        {/* Card header */}
-        < div className="bg-primary text-white p-5 rounded-t-lg" style={{
-          background: `linear-gradient(to right, ${backgroundColor}, ${backgroundColor}CC)`,
-          color: textColor
+    <div
+      className={`fixed inset-0 bg-black/50 z-[9999] flex justify-center backdrop-blur-sm animate-fadeIn ${isFullScreen ? 'items-center p-4' : 'items-end'}`}
+      onClick={() => setOpen(false)}
+    >
+      <div
+        className={`shadow-2xl w-full max-w-md relative dark:border dark:border-gray-500 overflow-y-auto ${isFullScreen ? 'rounded-2xl max-h-[90vh] animate-fadeIn' : 'rounded-t-2xl max-h-[92%] animate-slideUp'}`}
+        style={{ backgroundColor: 'var(--background)' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Card header (sticky); drag handle shown only in bottom-sheet mode */}
+        < div className={`bg-primary text-white px-5 py-4 rounded-t-2xl sticky top-0 z-10`} style={{
+          background: `linear-gradient(to right, ${primaryBgColor}, ${primaryBgColor}CC)`,
+          color: foregroundColor
         }}>
           <h2 className="text-lg font-bold">Enter your details</h2>
           <p className="text-sm opacity-90 mt-1">
@@ -171,11 +182,15 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
         </div>
 
         {/* Form content */}
-        <form onSubmit={handleSubmit} className="p-5 gap-2 flex flex-col">
+        <form
+          onSubmit={handleSubmit}
+          className="p-5 gap-2 flex flex-col"
+          style={{ ['--theme-primary' as any]: primaryBgColor }}
+        >
           {/* Name field */}
           <div className="form-control w-full">
-            <label className="label">
-              <span className="label-text font-medium">Name *</span>
+            <label className="label pt-0">
+              <span className="label-text font-medium">Name <span className="text-red-400">*</span></span>
             </label>
             <div className="relative">
               <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
@@ -188,7 +203,7 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
                 onChange={handleChange}
                 placeholder="Enter your name"
                 disabled={scriptParams?.name ? true : false}
-                className={`input input-bordered w-full pl-10 ${errors.name ? "input-error" : ""
+                className={`input input-bordered focus:outline-none focus:ring-1 focus:border-[var(--theme-primary)] focus:ring-[var(--theme-primary)] w-full pl-10 ${errors.name ? "input-error" : ""
                   }`}
                 required
               />
@@ -216,7 +231,7 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
                 onChange={handleChange}
                 disabled={scriptParams?.mail || scriptParams?.Email ? true : false}
                 placeholder="Enter your email"
-                className={`input input-bordered w-full pl-10 ${errors.email ? "input-error" : ""}`}
+                className={`input input-bordered focus:outline-none focus:ring-1 focus:border-[var(--theme-primary)] focus:ring-[var(--theme-primary)] w-full pl-10 ${errors.email ? "input-error" : ""}`}
               />
             </div>
             {errors.email && (
@@ -231,13 +246,13 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
             <label className="label">
               <span className="label-text font-medium">Phone Number</span>
             </label>
-            <div className="flex flex-col sm:flex-row gap-2">
+            <div className="flex gap-2">
               <div className="relative">
                 <select
                   name="countryCode"
                   value={formData.countryCode}
                   onChange={handleChange}
-                  className={`select select-bordered select-md max-w-36 pl-10 ${errors.countryCode ? "select-error" : ""}`}
+                  className={`select select-bordered focus:outline-none focus:ring-1 focus:border-[var(--theme-primary)] focus:ring-[var(--theme-primary)] select-md max-w-36 pl-10 ${errors.countryCode ? "select-error" : ""}`}
                   style={{ width: 'auto' }}
                 >
                   {countryCodes
@@ -262,7 +277,7 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
                   onChange={handleChange}
                   disabled={scriptParams?.number || scriptParams?.Phonenumber ? true : false}
                   placeholder="Enter your phone number"
-                  className={`input input-bordered w-full ${errors.number ? "input-error" : ""}`}
+                  className={`input input-bordered focus:outline-none focus:ring-1 focus:border-[var(--theme-primary)] focus:ring-[var(--theme-primary)] w-full ${errors.number ? "input-error" : ""}`}
                 />
               </div>
             </div>
@@ -274,7 +289,7 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
           </div>
 
           {/* Submit button */}
-          <div className="flex gap-3 mt-2">
+          <div className="flex gap-3 mt-5">
             <button
               type="button"
               className="btn btn-outline flex-1"
@@ -288,8 +303,8 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
               className="btn flex-1"
               style={{
                 opacity: isLoading ? 0.5 : 1,
-                backgroundColor: backgroundColor,
-                color: textColor
+                backgroundColor: primaryBgColor,
+                color: foregroundColor
               }}
             >
               {isLoading ? (
diff --git a/components/Hello/RenderHelloInteractiveMessage.tsx b/components/Hello/RenderHelloInteractiveMessage.tsx
index f752f3bb..7767faa7 100644
--- a/components/Hello/RenderHelloInteractiveMessage.tsx
+++ b/components/Hello/RenderHelloInteractiveMessage.tsx
@@ -7,7 +7,7 @@ import ImageWithFallback from '../Interface-Chatbot/Messages/ImageWithFallback';
 function RenderHelloInteractiveMessage({ message }: { message: any }) {
   const messageJson = message?.messageJson || {};
   const sendMessageToHello = useSendMessageToHello({});
-  const { textColor, backgroundColor } = useColor();
+  const { foregroundColor, primaryBgColor } = useColor();
 
   const renderHeader = (header: any) => {
     if (header?.type === "text") {
@@ -67,7 +67,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
                         target="_blank"
                         rel="noopener noreferrer"
                         className="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium w-full max-w-md justify-start"
-                        style={{ backgroundColor: backgroundColor, color: textColor }}
+                        style={{ backgroundColor: primaryBgColor, color: foregroundColor }}
                         onClick={(e) => e.stopPropagation()}
                       >
                         <ExternalLink size={16} strokeWidth={2} />
@@ -125,7 +125,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
                   target="_blank"
                   rel="noopener noreferrer"
                   className="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium"
-                  style={{ backgroundColor: backgroundColor, color: textColor }}
+                  style={{ backgroundColor: primaryBgColor, color: foregroundColor }}
                 >
                   <ExternalLink size={16} strokeWidth={2} />
                   {action.parameters.display_text || "View"}
@@ -143,7 +143,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
                     target="_blank"
                     rel="noopener noreferrer"
                     className="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium w-full max-w-md justify-start"
-                    style={{ backgroundColor: backgroundColor, color: textColor }}
+                    style={{ backgroundColor: primaryBgColor, color: foregroundColor }}
                     onClick={(e) => e.stopPropagation()}
                   >
                     <ExternalLink size={16} strokeWidth={2} />
@@ -224,7 +224,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
           <CarouselMessage
             messageJson={messageJson}
             backgroundColor={backgroundColor}
-            textColor={textColor}
+            foregroundColor={foregroundColor}
             sendMessageToHello={sendMessageToHello}
             renderHeader={renderHeader}
           />
@@ -329,7 +329,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
   );
 }
 
-function CarouselMessage({ messageJson, backgroundColor, textColor, sendMessageToHello, renderHeader }: any) {
+function CarouselMessage({ messageJson, backgroundColor, foregroundColor, sendMessageToHello, renderHeader }: any) {
   return (
     <div className="flex flex-col gap-2 max-w-[320px] sm:max-w-[400px] md:max-w-[500px] lg:max-w-[600px]">
       {messageJson.body?.text && (
@@ -358,7 +358,7 @@ function CarouselMessage({ messageJson, backgroundColor, textColor, sendMessageT
                       target="_blank"
                       rel="noopener noreferrer"
                       className="btn btn-sm rounded-md normal-case font-medium flex items-center justify-center gap-2"
-                      style={{ backgroundColor, color: textColor, border: "none" }}
+                      style={{ backgroundColor, color: foregroundColor, border: "none" }}
                       onClick={(e) => e.stopPropagation()}
                     >
                       <ExternalLink size={14} />
diff --git a/components/Interface-Chatbot/CallButton.tsx b/components/Interface-Chatbot/CallButton.tsx
index bf1fdb73..b49b5613 100644
--- a/components/Interface-Chatbot/CallButton.tsx
+++ b/components/Interface-Chatbot/CallButton.tsx
@@ -21,7 +21,7 @@ function CallButton({ chatSessionId, currentChannelId }: CallButtonProps) {
         voice_call_widget: state.Hello?.[chatSessionId]?.widgetInfo?.voice_call_widget || false,
     }));
     const sendMessageToHello = useOnSendHello();
-    const { backgroundColor } = useColor();
+    const { primaryBgColor } = useColor();
     const { callState } = useCallUI();
 
     // Handler for voice call
@@ -50,10 +50,10 @@ function CallButton({ chatSessionId, currentChannelId }: CallButtonProps) {
                 ? "cursor-not-allowed opacity-50"
                 : "cursor-pointer hover:bg-gray-200"
                 }`}
-            style={{ backgroundColor: lighten(backgroundColor, 0.8) }}
+            style={{ backgroundColor: lighten(primaryBgColor, 0.8) }}
             onClick={() => { if (!isCallDisabled) handleVoiceCall() }}
         >
-            <Phone className={`w-4 h-4 md:w-4 md:h-4`} style={{ color: darken(backgroundColor, 0.2) }} />
+            <Phone className={`w-4 h-4 md:w-4 md:h-4`} style={{ color: darken(primaryBgColor, 0.2) }} />
         </div>
     );
 }
diff --git a/components/Interface-Chatbot/ChatbotDrawer.tsx b/components/Interface-Chatbot/ChatbotDrawer.tsx
index 1a036ae8..4a32b153 100644
--- a/components/Interface-Chatbot/ChatbotDrawer.tsx
+++ b/components/Interface-Chatbot/ChatbotDrawer.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { lighten } from "@mui/material";
-import { AlignLeft, ChevronRight, SquarePen, Users, X } from "lucide-react";
-import { useContext, useEffect, useMemo } from "react";
+import { AlignLeft, ChevronRight, ChevronUp, ChevronDown, SquarePen, Users, Phone, Send, X, MessageSquareText } from "lucide-react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { useDispatch } from "react-redux";
 
 // API and Services
@@ -16,6 +16,7 @@ import { useReduxStateManagement } from "../Chatbot/hooks/useReduxManagement";
 
 // Redux Actions
 import { setDataInAppInfoReducer } from "@/store/appInfo/appInfoSlice";
+import { setDataInDraftReducer } from "@/store/draftData/draftDataSlice";
 import { setThreads } from "@/store/interface/interfaceSlice";
 
 // Utils and Types
@@ -25,9 +26,33 @@ import { useColor } from "../Chatbot/hooks/useColor";
 import { useScreenSize } from "../Chatbot/hooks/useScreenSize";
 import { MessageContext } from "./InterfaceChatbot";
 import { useOnSendHello } from "../Chatbot/hooks/useHelloIntegration";
+import { emitEventToParent } from "@/utils/emitEventsToParent/emitEventsToParent";
+import QuickActionsMenu from "./QuickActionsMenu";
 
 const createRandomId = () => Math.random().toString(36).substring(2, 15);
 
+const formatRelativeTime = (input: any): string => {
+  if (input === null || input === undefined || input === '') return '';
+  let ts: number;
+  if (typeof input === 'number' || /^\d+$/.test(String(input))) {
+    const num = Number(input);
+    // PubNub timetoken is in 100ns units (17-digit). Convert to ms.
+    ts = num > 1e14 ? Math.floor(num / 10000) : num;
+  } else {
+    ts = new Date(input).getTime();
+  }
+  if (!ts || isNaN(ts)) return '';
+  const diffSec = Math.floor((Date.now() - ts) / 1000);
+  if (diffSec < 60) return 'now';
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h`;
+  const diffDay = Math.floor(diffHr / 24);
+  if (diffDay < 7) return `${diffDay}d`;
+  return `${Math.floor(diffDay / 7)}w`;
+};
+
 interface ChatbotDrawerProps {
   preview?: boolean;
   chatSessionId: string
@@ -46,7 +71,7 @@ const ChatbotDrawer = ({
   threadId
 }: ChatbotDrawerProps) => {
   const dispatch = useDispatch();
-  const { backgroundColor, textColor } = useColor();
+  const { primaryTextColor, primaryBgColor, foregroundColor, primaryGradientBg, primaryTintColor, headerHoverBg } = useColor();
 
   // Context hooks
   const { messageRef } = useContext(MessageContext);
@@ -64,6 +89,27 @@ const ChatbotDrawer = ({
   const { currentChatId, currentTeamId, currentChannelId } = useReduxStateManagement({ chatSessionId, tabSessionId });
   const { callState } = useCallUI();
   const sendMessageToHello = useOnSendHello();
+  const [showAllChannels, setShowAllChannels] = useState(false);
+  const [showAllTeams, setShowAllTeams] = useState(false);
+
+  // Tick state — bumps every 30s AND on every inbound `SET_BADGE_COUNT` postMessage,
+  // forcing time labels like "14m" → "15m" to re-render against fresh `Date.now()`.
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => setTick((t) => t + 1), 30_000);
+    return () => clearInterval(interval);
+  }, []);
+  useEffect(() => {
+    const onMessage = (e: MessageEvent) => {
+      const data: any = e?.data;
+      const type = typeof data === 'string' ? data : data?.type;
+      if (type === 'SET_BADGE_COUNT') {
+        setTick((t) => t + 1);
+      }
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, []);
 
   // Consolidated Redux state selection
   const {
@@ -75,9 +121,14 @@ const ChatbotDrawer = ({
     tagline,
     hideCloseButton,
     voice_call_widget,
-    show_msg91
+    show_msg91,
+    isChatbotMinimized,
+    isMobileSDK,
+    isFullScreen,
+    isChatbotFullScreen
   } = useCustomSelector((state) => {
     const show_close_button = state.Hello?.[chatSessionId]?.helloConfig?.show_close_button
+    const helloFullScreen = state.Hello?.[chatSessionId]?.helloConfig?.fullScreen
     return {
       subThreadList: state.Interface?.[chatSessionId]?.interfaceContext?.[bridgeName]?.threadList?.[threadId] || [],
       teamsList: state.Hello?.[chatSessionId]?.widgetInfo?.teams || [],
@@ -87,10 +138,39 @@ const ChatbotDrawer = ({
       tagline: state.Hello?.[chatSessionId]?.widgetInfo?.tagline || '',
       hideCloseButton: typeof show_close_button === 'boolean' ? !show_close_button : state.appInfo?.[tabSessionId]?.hideCloseButton || false,
       voice_call_widget: state.Hello?.[chatSessionId]?.widgetInfo?.voice_call_widget || false,
-      show_msg91: state.Hello?.[chatSessionId]?.widgetInfo?.show_msg91 || false
+      show_msg91: state.Hello?.[chatSessionId]?.widgetInfo?.show_msg91 || false,
+      isChatbotMinimized: state.draftData?.isChatbotMinimized || false,
+      isMobileSDK: state.Hello?.[chatSessionId]?.helloConfig?.isMobileSDK || false,
+      isFullScreen: (helloFullScreen === true || helloFullScreen === 'true') ?? false,
+      isChatbotFullScreen: state.draftData?.isChatbotFullScreen || false
     };
   });
 
+  const VISIBLE_ITEMS_COUNT = 3;
+  const filteredChannels = (channelList || []).filter(
+    (channel: any) => channel?.id
+  );
+
+  const closedChatsCount = filteredChannels.filter(
+    (channel: any) => channel?.is_closed
+  ).length;
+
+  const displayedChannels = showAllChannels
+  ? filteredChannels
+  : filteredChannels.slice(0, VISIBLE_ITEMS_COUNT);
+
+  const displayedTeams = showAllTeams
+  ? teamsList
+  : teamsList.slice(0, VISIBLE_ITEMS_COUNT);
+
+
+  const hiddenChannels = filteredChannels.slice(VISIBLE_ITEMS_COUNT);
+  const hiddenCount = hiddenChannels.length;
+
+  const areAllHiddenChatsClosed =
+    hiddenCount > 0 &&
+    hiddenChannels.every((channel: any) => channel?.is_closed);
+
   useEffect(() => {
     if (chatSessionId) {
       setToggleDrawer(true);
@@ -165,38 +245,30 @@ const ChatbotDrawer = ({
   };
 
   const handleVoiceCall = async () => {
-    // If no channel is selected, pick the most recent (first valid) channel just for this action
-    let overrideChannelId;
-    let overrideChatId;
+    // Voice call should always start a FRESH chat — never reuse an existing
+    // chat_id. We only use the team selection (if any) to route the call.
     let overrideTeamId;
-    if (!currentChannelId && Array.isArray(channelList) && channelList.length > 0 && channelList?.[0]?.id) {
-      const firstValid = channelList.find((ch: any) => ch?.id);
-      if (firstValid) {
-        overrideChannelId = firstValid?.channel;
-        overrideChatId = firstValid?.id;
-        dispatch(
-          setDataInAppInfoReducer({
-            subThreadId: firstValid?.channel,
-            currentChannelId: firstValid?.channel,
-            currentChatId: firstValid?.id,
-            currentTeamId: firstValid?.team_id,
-          })
-        );
-      }
-    } else if (teamsList?.length > 0) {
-      const firstValid = teamsList[0]
+    if (Array.isArray(teamsList) && teamsList.length > 0) {
+      const firstValid = teamsList[0];
       if (firstValid) {
+        overrideTeamId = firstValid?.id;
         dispatch(
           setDataInAppInfoReducer({
             currentTeamId: firstValid?.id,
           })
         );
-        overrideTeamId = firstValid?.id;
       }
     }
     if (isSmallScreen) setToggleDrawer(false);
-    // pass overrides so sendMessageToHello uses latest values in the same tick
-    const data = await sendMessageToHello('', '', true, overrideChannelId || currentChannelId, overrideChatId || currentChatId, overrideTeamId || currentTeamId);
+    // Force a fresh chat by clearing chat_id / channel_id before sending.
+    dispatch(setDataInAppInfoReducer({
+      subThreadId: '',
+      currentChannelId: '',
+      currentChatId: '',
+      overrideChannelId: '',
+    }));
+    // Pass empty chatId/channelId overrides so sendMessageToHello creates a new chat.
+    const data = await sendMessageToHello('', '', true, '', '', overrideTeamId || currentTeamId);
     helloVoiceService.initiateCall(data?.['call_jwt_token'] || '');
   };
 
@@ -233,153 +305,298 @@ const ChatbotDrawer = ({
   ), [subThreadList, subThreadId, handleChangeSubThread]);
 
   const TeamsList = useMemo(() => (
-    <div className="teams-container pb-2 relative gap-6 flex flex-col">
+      <>
+        {((channelList?.length > 0 && channelList.some((thread: any) => thread?.id)) || teamsList?.length > 0) && (
+          <div className="teams-container pb-2 relative gap-5 flex flex-col h-[calc(100vh_-_185px)] overflow-y-auto">
       {/* Conversations Section */}
       {(channelList || []).length > 0 && channelList.some((thread: any) => thread?.id) && (
         <div className="conversations-section">
           <div className="conversations-header pb-2">
-            <h3 className="text-base font-semibold">Continue Conversations</h3>
+            <h3 className="px-4 text-[11px] font-semibold tracking-wider opacity-60 uppercase">Continue Conversations</h3>
           </div>
-          <div className="conversations-list space-y-2">
-            {channelList
-              .filter((channel: any) => channel?.id)
-              .map((channel: any, index: number) => (
+          <div className="conversations-list flex flex-col">
+            { displayedChannels.map((channel: any, index: number) => {
+              const isActive = channel?.id === currentChatId;
+              const unread = channel?.widget_unread_count || 0;
+              const isClosed = !!channel?.is_closed;
+              const channelMessages = allMessages?.[channel?.channel];
+              const lastMessageId = channelMessages?.[0];
+              const lastMessage = lastMessageId ? allMessagesData?.[channel?.channel]?.[lastMessageId] : null;
+
+              const lastMsgType = channel?.last_message?.message?.message_type
+                || lastMessage?.messageJson?.message_type
+                || lastMessage?.message_type;
+
+              const titleByType: Record<string, string> = {
+                voice_call: 'Voice Call',
+                text: 'Chat',
+                pushNotification: 'Notification',
+                image: 'Image',
+                video: 'Video',
+                file: 'Attachment',
+                audio: 'Audio',
+              };
+
+              const title = channel?.assigned_to?.name
+                || (lastMsgType && titleByType[lastMsgType])
+                || 'Conversation';
+
+              const subtitleHtml = (() => {
+                if (lastMessage) {
+                  const isUserMessage = lastMessage?.role == "user" || lastMessage?.role === "voice_call";
+                  const text = lastMessage?.message_type === 'pushNotification'
+                    ? "Custom Notification"
+                    : (lastMessage.messageJson?.text
+                      || (lastMessage.messageJson?.attachment?.length > 0 ? "Attachment"
+                        : lastMessage.messageJson?.message_type || "New conversation"));
+                  return `${isUserMessage ? "You: " : ""}${text}`;
+                }
+                if (channel?.last_message) {
+                  const isYou = !channel?.last_message?.message?.sender_id;
+                  const text = channel?.last_message?.message?.content?.text
+                    || (channel?.last_message?.message?.content?.attachment?.length > 0 ? "Attachment"
+                      : channel?.last_message?.message?.message_type || "New conversation");
+                  return `${isYou ? "You: " : ""}${text}`;
+                }
+                return "New conversation";
+              })();
+
+              const timeLabel = formatRelativeTime(
+                channel?.last_message?.timetoken
+                || channel?.last_message?.message?.timetoken
+                || channel?.last_message?.created_at
+                || channel?.updated_at
+                || channel?.last_message_at
+                || channel?.created_at
+              );
+
+              const initials = (() => {
+                if (channel?.assigned_to?.name) {
+                  const name = channel.assigned_to.name.toString() || '';
+                  const parts = name.split(' ').filter(Boolean);
+                  if (parts.length > 1) return (parts[0][0] + parts[1][0]).toUpperCase();
+                  return name.length > 1
+                    ? (name[0] + name[1]).toUpperCase()
+                    : (name[0] || 'A').toUpperCase();
+                }
+                return 'A';
+              })();
+
+              return (
                 <div
                   key={`${channel?._id}-${index}`}
-                  className={`conversation-card max-h-16 h-full overflow-hidden text-ellipsis p-3 ${channel?.id === currentChatId ? 'border-2 border-primary' : ''} bg-white dark:bg-[var(--background)] rounded-lg shadow-sm hover:shadow-md transition-all cursor-pointer flex items-center`}
                   style={{
-                    borderColor: channel?.id === currentChatId ? backgroundColor : ''
+                    background: isActive ? primaryGradientBg : undefined,
+                    opacity: isClosed ? 0.7 : undefined,
                   }}
+                  className={`conversation-card group relative px-4 py-3 cursor-pointer flex items-center gap-3 transition-all ${isActive ? 'text-white' : 'text-[var(--foreground)] hover:bg-gray-100 dark:hover:bg-white/5'}`}
                   onClick={() => handleChangeChannel(channel?.channel, channel?.id, channel?.team_id)}
                 >
-                  <div className="w-9 h-9 flex items-center justify-center text-xs font-bold rounded-full mr-3" style={{ background: lighten(backgroundColor, 0.8), color: "#606060" }}>
-                    {(() => {
-                      if (channel?.assigned_to?.name) {
-                        const name = channel.assigned_to.name.toString() || '';
-                        const nameParts = name.split(' ');
-                        if (nameParts.length > 1) {
-                          // If there are multiple words, take first letter of first and second word
-                          return nameParts[0].charAt(0).toUpperCase() + nameParts[1].charAt(0).toUpperCase();
-                        } else {
-                          // If there's only one word, take first two letters
-                          return name.length > 1 ?
-                            name.charAt(0).toUpperCase() + name.charAt(1).toUpperCase() :
-                            name.charAt(0).toUpperCase();
-                        }
-                      } else {
-                        return "A";
-                      }
-                    })()}
-                  </div>
-                  <div className="conversation-info flex-1 min-w-0 pr-1">
-                    {channel?.channel && allMessages && allMessagesData && (
-                      <div className="last-message text-sm font-medium truncate flex flex-row items-center gap-1 text-ellipsis overflow-hidden">
-                        {(() => {
-                          const channelMessages = allMessages[channel?.channel];
-                          if (channelMessages && channelMessages?.length > 0) {
-                            const lastMessageId = channelMessages[0];
-                            const lastMessage = allMessagesData[channel?.channel]?.[lastMessageId];
-                            if (lastMessage) {
-                              const isUserMessage = lastMessage?.role == "user" || lastMessage?.role === "voice_call";
-                              return (
-                                <>
-                                  {isUserMessage ? "You: " : "Sender: "}
-                                  <div className="line-clamp-1" dangerouslySetInnerHTML={{
-                                    __html: lastMessage?.message_type === 'pushNotification'
-                                      ? "Custom Notification"
-                                      : (lastMessage.messageJson?.text ||
-                                        (lastMessage.messageJson?.attachment?.length > 0 ? "Attachment" :
-                                          lastMessage.messageJson?.message_type ||
-                                          "New conversation"))
-                                  }}></div>
-                                </>
-                              );
-                            }
-                          }
-
-                          // Fallback to channel.last_message if no message found in allMessagesData
-                          if (channel?.last_message) {
-                            return (
-                              <>
-                                {!channel?.last_message?.message?.sender_id ? "You: " : "Sender: "}
-                                <div className="line-clamp-1" dangerouslySetInnerHTML={{
-                                  __html: channel?.last_message?.message?.content?.text ||
-                                    (channel?.last_message?.message?.content?.attachment?.length > 0 ? "Attachment" :
-                                      channel?.last_message?.message?.message_type ||
-                                      "New conversation")
-                                }}></div>
-                              </>
-                            );
-                          }
-
-                          return "New conversation";
-                        })()}
-                      </div>
+                  <div className="relative flex-shrink-0">
+                    <div
+                      className="w-10 h-10 rounded-full flex items-center justify-center text-[12px] font-semibold select-none"
+                      style={{
+                        backgroundColor: isActive ? 'rgba(255, 255, 255, 0.22)' : primaryTintColor,
+                        color: isActive ? '#ffffff' : (isClosed ? 'var(--icon-color)' : primaryTextColor),
+                      }}
+                    >
+                      {initials}
+                    </div>
+                    {unread > 0 && (
+                      <span
+                        className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full flex items-center justify-center text-[10px] font-bold"
+                        style={{ backgroundColor: primaryBgColor, color: foregroundColor }}
+                      >
+                        {unread}
+                      </span>
                     )}
                   </div>
-                  <div className="flex-shrink-0 flex items-center">
-                    {channel?.widget_unread_count > 0 && (
-                      <div className="text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center mr-2" style={{ backgroundColor: backgroundColor, color: textColor }}>
-                        {channel?.widget_unread_count}
-                      </div>
+
+                  <div className="conversation-info flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-0.5">
+                      <span className={`text-sm truncate ${isActive || unread > 0 ? 'font-semibold' : 'font-normal'}`}>
+                        {title}
+                      </span>
+                      {isClosed && (
+                        <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-lg border border-[var(--icon-color)] bg-transparent text-[var(--icon-color)] flex-shrink-0">
+                          Closed
+                        </span>
+                      )}
+                    </div>
+                    <div
+                      className="text-xs opacity-70 line-clamp-1"
+                      dangerouslySetInnerHTML={{ __html: subtitleHtml }}
+                    />
+                  </div>
+
+                  <div className="flex-shrink-0 flex items-center gap-1 opacity-60">
+                    {timeLabel && (
+                      <span className="text-[11px] whitespace-nowrap">{timeLabel}</span>
                     )}
-                    <ChevronRight size={16} className="var(--icon-color)" />
+                    <ChevronRight size={14} />
                   </div>
                 </div>
-              ))}
+              );
+            })}
+            {filteredChannels.length > VISIBLE_ITEMS_COUNT && (
+              <div className="flex justify-between items-center mt-2 px-4">
+                <button
+                  type="button"
+                  className="text-sm font-medium hover:underline"
+                  style={{ color: primaryTextColor }}
+                  onClick={() => setShowAllChannels(!showAllChannels)}
+                >
+                  {showAllChannels
+                    ? "Show less"
+                    : areAllHiddenChatsClosed
+                      ? `Show (${hiddenCount}) Closed Conversations`
+                      : `See all ${hiddenCount} conversations`
+                  }
+                </button>
+                { showAllChannels ? <ChevronUp size={14} style={{ color: primaryTextColor }} /> : <ChevronDown size={14} style={{ color: primaryTextColor }} /> }
+              </div>
+            )}
           </div>
         </div>
       )}
 
       {/* Teams Section */}
+      {(teamsList || []).length > 0 && (
       <div className="teams-section">
         <div className="teams-header pb-2 flex items-center">
-          <h3 className="text-base font-semibold">Talk to our experts</h3>
+          <h3 className="px-4 text-[11px] font-semibold tracking-wider opacity-60 uppercase">Talk to our teams</h3>
         </div>
-        <div className="teams-list space-y-0">
-          {teamsList.length === 0 ? (
-            <div className="flex">
-              <button className="btn w-full" style={{ backgroundColor: backgroundColor, color: textColor }} onClick={handleSendMessageWithNoTeam}>Send us a message</button>
-            </div>
-          ) : (
-            <div className="flex flex-col gap-1">
-              {teamsList.map((team: any, index: number) => (
-                <div
-                  key={`${team?.id}-${index}`}
-                  className={`team-card p-3 bg-white shadow-sm hover:shadow-md transition-all cursor-pointer rounded-lg flex items-center justify-between`}
-                  onClick={() => handleChangeTeam(team?.id)}
-                >
-                  <div className="flex items-center overflow-hidden">
-                    <div className="team-avatar mr-3 bg-primary/10 p-2 rounded-md flex-shrink-0">
-                      {team?.icon || <Users size={12} className="text-primary" />}
+        <div className="teams-list">
+            <div className="flex flex-col">
+              {displayedTeams.map((team: any, index: number) => {
+                const onlineCount = team?.online_users_count ?? team?.online_count ?? team?.online;
+                const memberCount = team?.members_count ?? team?.total_members ?? team?.member_count;
+                const initials = (team?.name?.split(' ').filter(Boolean) || [])
+                  .slice(0, 2)
+                  .map((w: string) => w[0]?.toUpperCase())
+                  .join('') || 'T';
+                return (
+                  <div
+                    key={`${team?.id}-${index}`}
+                    className="team-card px-4 py-3 transition-all cursor-pointer flex items-center justify-between gap-3 hover:bg-gray-100 dark:hover:bg-white/5"
+                    onClick={() => handleChangeTeam(team?.id)}
+                  >
+                    <div className="flex items-center gap-3 overflow-hidden flex-1 min-w-0">
+                      <div className="relative flex-shrink-0">
+                        <div
+                          className="w-10 h-10 rounded-full flex items-center justify-center text-[12px] font-semibold select-none"
+                          style={{ backgroundColor: primaryTintColor, color: primaryTextColor }}
+                        >
+                          {initials || (team?.icon || <Users size={14} />)}
+                        </div>
+                        {team?.widget_unread_count > 0 && (
+                          <span
+                            className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full flex items-center justify-center text-[9px] font-bold"
+                            style={{ backgroundColor: primaryBgColor, color: foregroundColor }}
+                          >
+                            {team?.widget_unread_count}
+                          </span>
+                        )}
+                      </div>
+
+                      <div className="team-info overflow-hidden min-w-0">
+                        <div className="team-name text-sm font-normal truncate" style={{ color: 'var(--foreground)' }}>
+                          {team?.name}
+                        </div>
+                        {(onlineCount != null || memberCount != null) && (
+                          <div className="flex items-center gap-1.5 text-xs opacity-60 mt-0.5">
+                            {onlineCount != null && (
+                              <span className="inline-flex items-center gap-1">
+                                <span className="w-1.5 h-1.5 rounded-full bg-green-500" />
+                                <span className="font-medium">{onlineCount} online</span>
+                              </span>
+                            )}
+                            {onlineCount != null && memberCount != null && (
+                              <span>·</span>
+                            )}
+                            {memberCount != null && (
+                              <span>{memberCount} members</span>
+                            )}
+                          </div>
+                        )}
+                      </div>
                     </div>
-                    <div className="team-info overflow-hidden">
-                      <div className="team-name font-medium truncate max-w-full">{team?.name}</div>
+                    <div className="flex-shrink-0 flex gap-3 items-center">
+                      <MessageSquareText size={18} style={{ color: primaryTextColor }} />
+                      <ChevronRight size={14} className="opacity-50" />
                     </div>
                   </div>
-                  <div className="flex-shrink-0 ml-2">
-                    <SquarePen size={16} color="var(--icon-color)" />
-                  </div>
+                );
+              })}
+              {teamsList.length > VISIBLE_ITEMS_COUNT && (
+                <div className="flex justify-between items-center mt-2 px-4">
+                  <button
+                    type="button"
+                    style={{ color: primaryTextColor }}
+                    className="text-sm font-medium hover:underline"
+                    onClick={() => setShowAllTeams(!showAllTeams)}
+                  >
+                    {showAllTeams
+                      ? "Show less"
+                      : `See all ${teamsList.length - VISIBLE_ITEMS_COUNT} team${teamsList.length - VISIBLE_ITEMS_COUNT > 1 ? "s" : ""}`}
+                  </button>
+                  { showAllTeams ? <ChevronUp size={14} style={{ color: primaryTextColor }} /> : <ChevronDown size={14} style={{ color: primaryTextColor }} /> }
                 </div>
-              ))}
+              )}
             </div>
+        </div>
+      </div>
+      )}
+    </div>
+    )}
+
+    {/* Voice Call Section */}
+    {(voice_call_widget || (teamsList || []).length ===  0)&& (
+      <div className={`marketing-banner bg-[var(--drawer-color)] px-4 pt-3 pb-3 ${
+        (teamsList || []).length === 0 && (filteredChannels || []).length === 0
+          ? ''
+          : 'mt-auto border-t border-[var(--foreground)]/10'
+      }`}>
+        <p className="text-sm mb-2" style={{ color: 'var(--foreground)' }}>Need specialized help?</p>
+        <div className="flex gap-2">
+        {voice_call_widget &&
+          <button
+            className={`grid place-items-center flex-1 text-sm py-2.5 rounded-xl transition-colors ${
+              callState !== "idle"
+                ? "bg-gray-400 cursor-not-allowed"
+                : "hover:opacity-90"
+            }`}
+            style={{
+              background: callState !== "idle" ? undefined : primaryBgColor,
+              color: foregroundColor,
+            }}
+            onClick={handleVoiceCall}
+            disabled={callState !== "idle"}
+          >
+            <span className="inline-flex items-center gap-2">
+              <Phone size={16} />
+              <strong>Call Us</strong>
+            </span>
+          </button>
+        }
+
+          {/*Send Message button in case of no team assign */}
+          { (teamsList || []).length ===  0 && (
+            <button
+              className="grid place-items-center flex-1 text-sm py-2.5 rounded-xl transition-colors hover:opacity-80"
+              style={{ border: "1.5px solid currentColor", color: primaryTextColor }}
+              onClick={handleSendMessageWithNoTeam}
+            >
+              <span className="inline-flex items-center gap-2">
+                <Send size={16} />
+                <strong>Message</strong>
+              </span>
+            </button>
           )}
         </div>
       </div>
-
-      {voice_call_widget && <div className="marketing-banner p-3 bg-gradient-to-r from-primaryTheme/20 to-secondaryTheme/20 rounded-lg">
-        <p className="text-sm font-medium">Need specialized help?</p>
-        <p className="text-xs">Our teams are ready to assist you with any questions</p>
-        <button
-          className={`mt-2 text-xs py-1 px-3 rounded-md transition-colors ${callState !== "idle" ? "bg-gray-400 cursor-not-allowed" : "bg-primaryTheme hover:bg-primaryTheme/80"}`}
-          style={{ color: textColor }}
-          onClick={handleVoiceCall}
-          disabled={callState !== "idle"}
-        >
-          Call Us
-        </button>
-      </div>}
-    </div >
+    )}
+    </>
   ), [
     channelList,
     teamsList,
@@ -387,13 +604,15 @@ const ChatbotDrawer = ({
     currentTeamId,
     callState,
     voice_call_widget,
-    backgroundColor,
+    primaryTextColor,
+    primaryBgColor,
     handleChangeChannel,
     handleChangeTeam,
     handleSendMessageWithNoTeam,
     handleVoiceCall,
     allMessages,
-    allMessagesData
+    allMessagesData,
+    tick
   ]);
 
   const handleCloseChatbot = () => {
@@ -401,18 +620,85 @@ const ChatbotDrawer = ({
     window.parent.postMessage({ type: "CLOSE_CHATBOT" }, "*");
   };
 
-  const CloseButton = useMemo(() => {
-    if (hideCloseButton === true || hideCloseButton === "true" || !isSmallScreen) return null;
+  const handleMinimizeChatbot = (value: boolean) => {
+    dispatch(setDataInDraftReducer({ isChatbotMinimized: value }));
+  };
+
+  // Fullscreen state lives in redux (draftData) so the header and drawer share a
+  // single source of truth and never drift (prevents the double-click collapse bug).
+  const fullScreen = isChatbotFullScreen;
+
+  const toggleFullScreen = (enter: boolean) => {
+    if (!window?.parent) return;
+    dispatch(setDataInDraftReducer({ isChatbotFullScreen: enter }));
+    const message = enter
+      ? { type: "ENTER_FULL_SCREEN_CHATBOT" }
+      : { type: "EXIT_FULL_SCREEN_CHATBOT" };
+    window.parent.postMessage(message, "*");
+  };
+
+  const handleToggleMinimize = () => {
+    if (!isChatbotMinimized && fullScreen) {
+      toggleFullScreen(false);
+    }
+    handleMinimizeChatbot(!isChatbotMinimized);
+    if (!isChatbotMinimized) {
+      emitEventToParent('MINIMIZE_CHATBOT');
+    } else {
+      toggleFullScreen(false);
+    }
+  };
+
+  // Quick Actions dropdown for the drawer header
+  const canMinimize = false; //isHelloUser && !isMobileSDK;
+  const canFullScreen = !isMobileSDK && !isFullScreen;
+
+  const DrawerQuickActionsMenu = useMemo(() => {
+    if (fullScreen || isFullScreen) return null;
+    if (!isToggledrawer) return null;
 
     return (
-      <div
-        className="cursor-pointer p-2 hover:bg-gray-200 rounded-full transition-colors icn"
-        onClick={handleCloseChatbot}
-      >
-        <X size={22} color="var(--icon-color)" />
-      </div>
+      <QuickActionsMenu
+        isChatbotMinimized={isChatbotMinimized}
+        fullScreen={fullScreen}
+        showMinimize={canMinimize}
+        showFullScreen={canFullScreen}
+        showNewConversation={!isHelloUser}
+        onMinimize={handleToggleMinimize}
+        onToggleFullScreen={() => toggleFullScreen(!fullScreen)}
+        onNewConversation={handleCreateNewSubThread}
+        triggerClassName="p-2 rounded-full transition-colors"
+        triggerHoverBg={headerHoverBg}
+      />
     );
-  }, [hideCloseButton, handleCloseChatbot]);
+  }, [
+    isToggledrawer,
+    isHelloUser,
+    isChatbotMinimized,
+    fullScreen,
+    isFullScreen,
+    canMinimize,
+    canFullScreen,
+    handleToggleMinimize,
+    toggleFullScreen,
+    handleCreateNewSubThread,
+    headerHoverBg,
+  ]);
+
+  const headerIconBtnClass =
+    'p-2 rounded-full transition-colors';
+  // Inline hover via onMouseEnter/Leave keeps the wash on-theme regardless
+  // of Tailwind / dark-mode variants. Icons take the header foreground color
+  // so they contrast against the primary gradient header.
+  const bindHeaderHover = () => ({
+    onMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => {
+      (e.currentTarget as HTMLButtonElement).style.backgroundColor = headerHoverBg;
+    },
+    onMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => {
+      (e.currentTarget as HTMLButtonElement).style.backgroundColor = '';
+    },
+  });
+  const headerIconStyle: React.CSSProperties = { color: foregroundColor };
 
   return (
     <div className={`drawer ${isSmallScreen ? 'z-[99999]' : 'z-[999]'}`}>
@@ -435,69 +721,72 @@ const ChatbotDrawer = ({
       <div className={`drawer-side ${isHelloUser && isSmallScreen ? '100%' : 'max-w-[286px]'} ${isToggledrawer ? 'lg:translate-x-0' : 'lg:-translate-x-full'} transition-transform duration-100`}>
         <div className="w-full h-full relative flex flex-col bg-[var(--drawer-color)]">
           {/* Header with padding */}
-          <div className="px-4 pt-4 pb-4">
+          <div className="px-4 py-4" style={{ background: primaryGradientBg }}>
             <div className="flex items-center justify-between">
               <div className="w-10">
                 {isToggledrawer && (
                   <button
-                    className="p-2 hover:bg-gray-200 rounded-full transition-colors icn"
+                    className={headerIconBtnClass}
+                    {...bindHeaderHover()}
+                    style={headerIconStyle}
                     onClick={() => closeToggleDrawer(!isToggledrawer)}
                   >
                     <AlignLeft size={22} />
                   </button>
                 )}
               </div>
-              <div className="flex flex-col items-center justify-center flex-1">
+              <div className="flex flex-col items-center justify-center flex-1 p-2" style={{ color: foregroundColor }}>
                 <h2 className="text-lg font-bold text-center">
-                  {Name ? `Hello ${Name.split(' ')[0]}` : 'Hello There!'}
+                  {Name ? `Hello, ${Name.split(' ')[0]} 👋` : 'Hello there! 👋'}
                 </h2>
                 {tagline && (
-                  <p className="text-xs text-gray-500 text-center">{tagline}</p>
+                  <p className="text-xs text-center opacity-80">{tagline}</p>
                 )}
               </div>
-              <div className="w-10 flex items-center justify-end">
-                {isToggledrawer && !isHelloUser && (
-                  <div className="tooltip tooltip-bottom z-[9999]" data-tip="New Chat">
-                    <button
-                      className="p-2 hover:bg-gray-200 rounded-full transition-colors"
-                      onClick={handleCreateNewSubThread}
-                    >
-                      <SquarePen size={22} color="var(--icon-color)" />
-                    </button>
-                  </div>
+              <div className="w-10 flex items-center justify-end gap-1">
+                {isToggledrawer && !(fullScreen || isFullScreen) && DrawerQuickActionsMenu}
+                {isToggledrawer && !(fullScreen || isFullScreen) && !hideCloseButton && (
+                  <button
+                    className={headerIconBtnClass}
+                    {...bindHeaderHover()}
+                    style={headerIconStyle}
+                    onClick={handleCloseChatbot}
+                    aria-label="Close chat"
+                  >
+                    <X size={20} />
+                  </button>
                 )}
-                {isHelloUser && CloseButton}
               </div>
             </div>
           </div>
 
           {/* Content area with overflow handling - the scrollbar will appear at the edge */}
-          <div className="flex-1 overflow-y-auto">
-            <div className="px-4">
+          <div className="flex-1 overflow-y-auto flex flex-col pt-4">
               {!isHelloUser ? DrawerList : TeamsList}
-            </div>
           </div>
 
           {/* Footer with branding - always stays at bottom */}
-          <div className="px-4 pt-2 pb-2 flex items-center justify-center mt-auto">
-            <div className="text-xs text-gray-500 flex items-baseline gap-1">
-              {isHelloUser && show_msg91 ? (
-                <>
-                  Powered by
-                  <a href="https://msg91.com" target="_blank" rel="noopener noreferrer" className="flex hover:opacity-80 transition-opacity ml-1">
-                    <img src="/msg91-logo.svg" alt="MSG91" className="h-4" />
-                  </a>
-                </>
-              ) : !isHelloUser ? (
-                <>
-                  Powered by
-                  <a href="https://gtwy.ai" target="_blank" rel="noopener noreferrer" className="flex hover:opacity-80 transition-opacity">
-                    <span className="font-bold">GTWY</span>
-                  </a>
-                </>
-              ) : null}
+          {(isHelloUser && show_msg91) || !isHelloUser ? (
+            <div className="px-4 pt-2 pb-2 flex items-center justify-center mt-auto">
+              <div className="text-xs opacity-50 flex items-baseline gap-1" style={{ color: 'var(--foreground)' }}>
+                {isHelloUser && show_msg91 ? (
+                  <>
+                    Powered by
+                    <a href="https://msg91.com" target="_blank" rel="noopener noreferrer" className="flex hover:opacity-80 transition-opacity ml-1">
+                      <img src="/msg91-logo.svg" alt="MSG91" className="h-4" />
+                    </a>
+                  </>
+                ) : (
+                  <>
+                    Powered by
+                    <a href="https://gtwy.ai" target="_blank" rel="noopener noreferrer" className="flex hover:opacity-80 transition-opacity">
+                      <span className="font-bold">GTWY</span>
+                    </a>
+                  </>
+                )}
+              </div>
             </div>
-          </div>
+          ) : null}
         </div>
       </div>
     </div>
diff --git a/components/Interface-Chatbot/ChatbotHeader.tsx b/components/Interface-Chatbot/ChatbotHeader.tsx
index 1b328b13..a496eb09 100644
--- a/components/Interface-Chatbot/ChatbotHeader.tsx
+++ b/components/Interface-Chatbot/ChatbotHeader.tsx
@@ -28,7 +28,9 @@ import { useCustomSelector } from "@/utils/deepCheckSelector";
 import { emitEventToParent } from "@/utils/emitEventsToParent/emitEventsToParent";
 import { createRandomId, DEFAULT_AI_SERVICE_MODALS, ParamsEnums } from "@/utils/enums";
 import { useChatActions } from "../Chatbot/hooks/useChatActions";
+import { useColor } from "../Chatbot/hooks/useColor";
 import { ChatbotContext } from "../context";
+import QuickActionsMenu from "./QuickActionsMenu";
 import "./InterfaceChatbot.css";
 
 export function ChatbotHeaderPreview() {
@@ -51,14 +53,29 @@ export function ChatbotHeaderPreview() {
   );
 }
 
-const SendEventOnComponentPress = ({ item, children }: { item: { type: string }, children: React.ReactNode }) => (
-  <button
-    className="p-2 hover:bg-gray-200 rounded-full transition-colors"
-    onClick={() => emitEventToParent("HEADER_BUTTON_PRESS", item)}
-  >
-    {children}
-  </button>
-);
+const SendEventOnComponentPress = ({ item, children }: { item: { type: string }, children: React.ReactNode }) => {
+  const { foregroundColor, headerHoverBg } = useColor();
+  const bindHover = () => ({
+    onMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => {
+      (e.currentTarget as HTMLButtonElement).style.backgroundColor = headerHoverBg;
+    },
+    onMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => {
+      (e.currentTarget as HTMLButtonElement).style.backgroundColor = '';
+    },
+  });
+
+  return (
+    <button
+      type="button"
+      className="p-2 rounded-full transition-colors"
+      style={{ color: foregroundColor }}
+      {...bindHover()}
+      onClick={() => emitEventToParent("HEADER_BUTTON_PRESS", item)}
+    >
+      {children}
+    </button>
+  );
+};
 
 const renderIconsByType = (item: { type: string }) => {
   switch (item.type) {
@@ -294,8 +311,31 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
     setOptions,
     setToggleDrawer,
   } = useChatActions();
+  const { primaryGradientBg, foregroundColor, headerHoverBg } = useColor();
+
+  // Wrapper component so header icon peers (buttons, dropdowns) inherit the
+  // correct icon/text color based on the primary gradient (white for dark mode,
+  // auto/light for light mode). The #chatbot-header-root selector is used by
+  // any downstream dropdowns/menus that mount outside the header root.
+  const HeaderColorWrapper = ({ children }: { children: React.ReactNode }) => (
+    <div
+      id="chatbot-header-root"
+      className="w-full"
+      style={{ background: primaryGradientBg, color: foregroundColor }}
+    >
+      {children}
+    </div>
+  );
+  const bindHeaderHover = () => ({
+    onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {
+      (e.currentTarget as HTMLElement).style.backgroundColor = headerHoverBg;
+    },
+    onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {
+      (e.currentTarget as HTMLElement).style.backgroundColor = '';
+    },
+  });
 
-  const { isToggledrawer, bridgeName: reduxBridgeName, headerButtons, messageIds, lastMessage, unReadCount, isChatbotMinimized, isFullScreen } = useCustomSelector((state) => {
+  const { isToggledrawer, bridgeName: reduxBridgeName, headerButtons, messageIds, lastMessage, unReadCount, isChatbotMinimized, isFullScreen, isChatbotFullScreen } = useCustomSelector((state) => {
     const fullScreen = state.Hello?.[chatSessionId]?.helloConfig?.fullScreen
     return {
       isToggledrawer: state.Chat?.isToggledrawer,
@@ -310,7 +350,8 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
         (channel: any) => channel?.channel === currentChannelId
       )?.widget_unread_count || 0,
       isChatbotMinimized: state.draftData?.isChatbotMinimized || false,
-      isFullScreen: (fullScreen === true || fullScreen === 'true') ?? false
+      isFullScreen: (fullScreen === true || fullScreen === 'true') ?? false,
+      isChatbotFullScreen: state.draftData?.isChatbotFullScreen || false
     }
   }
   )
@@ -325,7 +366,9 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
     bridges = []
   } = chatbotConfig || {};
 
-  const [fullScreen, setFullScreen] = useState(false);
+  // Fullscreen state lives in redux (draftData) so the header and drawer share a
+  // single source of truth and never drift (prevents the double-click collapse bug).
+  const fullScreen = isChatbotFullScreen;
   const [teamName, setTeamName] = useState(false);
 
   const shouldToggleScreenSize = `${width}${widthUnit}` !== '1200%';
@@ -400,7 +443,7 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
   const toggleFullScreen = (enter: boolean) => {
     if (!window?.parent) return;
 
-    setFullScreen(enter);
+    dispatch(setDataInDraftReducer({ isChatbotFullScreen: enter }));
     const message = enter
       ? { type: "ENTER_FULL_SCREEN_CHATBOT" }
       : { type: "EXIT_FULL_SCREEN_CHATBOT" };
@@ -431,13 +474,14 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
 
     return (
       <button
-        className="p-2 hover:bg-gray-200 rounded-full transition-colors icn"
+        className="p-2 rounded-full transition-colors text-current"
+        {...bindHeaderHover()}
         onClick={() => setToggleDrawer(!isToggledrawer)}
       >
         {isToggledrawer ? null : <AlignLeft size={22} />}
       </button>
     );
-  }, [subThreadList?.length, isHelloUser, isToggledrawer, setToggleDrawer]);
+  }, [subThreadList?.length, isHelloUser, isToggledrawer, setToggleDrawer, headerHoverBg]);
 
   // Memoized create thread button
   const CreateThreadButton = useMemo(() => {
@@ -446,18 +490,19 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
     return (
       <div className="tooltip tooltip-right" data-tip="Create new thread">
         <button
-          className="p-2 hover:bg-gray-200 rounded-full transition-colors icn"
+          className="p-2 rounded-full transition-colors text-current"
+          {...bindHeaderHover()}
           onClick={handleCreateNewSubThread}
         >
           <SquarePen size={22} />
         </button>
       </div>
     );
-  }, [showCreateThreadButton, isToggledrawer, handleCreateNewSubThread]);
+  }, [showCreateThreadButton, isToggledrawer, handleCreateNewSubThread, headerHoverBg]);
 
   // Memoized header title section
   const HeaderTitleSection = useMemo(() => {
-    const displayTitle = isChatbotMinimized && lastMessage?.role === 'user' ? 'You' : chatTitle || chatbotTitle || (isHelloUser ? (agentTeamName || teamName || "Conversation")?.toString().split(" ")?.[0] : "AI Assistant");
+    const displayTitle = isChatbotMinimized && lastMessage?.role === 'user' ? 'You' : chatTitle || chatbotTitle || (isHelloUser ? (agentTeamName || teamName || "Conversation") : "AI Assistant");
     const displaySubtitle = chatSubTitle || chatbotSubtitle || "Do you have any questions? Ask us!";
 
     // Minimized version of the header
@@ -475,7 +520,7 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
           )}
           <div className="flex items-center">
             <div className="relative">
-              <h1 className="text-center font-semibold whitespace-nowrap overflow-hidden overflow-ellipsis text-sm">
+              <h1 className="text-center font-semibold whitespace-nowrap overflow-hidden overflow-ellipsis text-sm max-w-80">
                 {displayTitle}
               </h1>
               {unReadCount > 0 && (
@@ -554,7 +599,8 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
 
     return fullScreen ? (
       <div
-        className="cursor-pointer p-2 rounded-full hover:bg-gray-200 transition-colors icn"
+        className="cursor-pointer p-2 rounded-full transition-colors text-current"
+        {...bindHeaderHover()}
         onClick={() => toggleFullScreen(false)}
       >
         {/* <PictureInPicture2 size={22} color="var(--icon-color)" /> */}
@@ -562,14 +608,15 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
       </div>
     ) : (
       <div
-        className="cursor-pointer p-2 rounded-full transition-colors hover:bg-gray-200 icn"
+        className="cursor-pointer p-2 rounded-full transition-colors text-current"
+        {...bindHeaderHover()}
         onClick={() => toggleFullScreen(true)}
       >
         {/* <Maximize size={22} color="var(--icon-color)" /> */}
         <Maximize2 size={22} style={{ transform: 'rotate(90deg)' }} />
       </div>
     );
-  }, [shouldToggleScreenSize, hideFullScreenButton, fullScreen, toggleFullScreen]);
+  }, [shouldToggleScreenSize, hideFullScreenButton, fullScreen, toggleFullScreen, headerHoverBg]);
 
   // Memoized close button
   const CloseButton = useMemo(() => {
@@ -577,13 +624,14 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
 
     return (
       <div
-        className="cursor-pointer p-2 py-2 rounded-full hover:bg-gray-200 transition-colors icn"
+        className="cursor-pointer p-2 py-2 rounded-full transition-colors text-current"
+        {...bindHeaderHover()}
         onClick={handleCloseChatbot}
       >
         <X size={22} />
       </div>
     );
-  }, [hideCloseButton, handleCloseChatbot]);
+  }, [hideCloseButton, handleCloseChatbot, headerHoverBg]);
 
   const handleToggleMinimize = () => {
     if (!isChatbotMinimized && fullScreen) {
@@ -601,66 +649,126 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
     if (!isHelloUser) return null;
     return (
       <div
-        className="cursor-pointer p-2 py-2 rounded-full hover:bg-gray-200 transition-colors icn"
+        className="cursor-pointer p-2 py-2 rounded-full transition-colors text-current"
+        {...bindHeaderHover()}
         onClick={handleToggleMinimize}
       >
         {isChatbotMinimized ? <Maximize2 size={22} style={{ transform: 'rotate(90deg)' }} /> : <Minus size={22} />}
       </div>
     );
-  }, [isHelloUser, isChatbotMinimized, fullScreen, toggleFullScreen])
+  }, [isHelloUser, isChatbotMinimized, fullScreen, toggleFullScreen, headerHoverBg])
+
+  // Expand button for the collapsed header — un-minimizes the chat back to default size
+  const ExpandButton = useMemo(() => {
+    if (!isChatbotMinimized) return null;
+    return (
+      <div
+        className="cursor-pointer p-2 rounded-full transition-colors text-current"
+        {...bindHeaderHover()}
+        onClick={(e) => { e.stopPropagation(); handleToggleMinimize(); }}
+      >
+        <Maximize2 size={22} style={{ transform: 'rotate(90deg)' }} />
+      </div>
+    );
+  }, [isChatbotMinimized, handleToggleMinimize, headerHoverBg])
+
+  // Determine which quick-action items are available
+  const hasMinimizeAction = !!MinimizeButton;
+  const hasFullScreenAction = !!ScreenSizeToggleButton && !isFullScreen;
+  const hasExitFullScreenAction = !!ScreenSizeToggleButton && isFullScreen;
+  const hasNewConversationAction = !!CreateThreadButton;
+
+  const showQuickActions = (
+    hasMinimizeAction ||
+    hasFullScreenAction ||
+    hasExitFullScreenAction ||
+    hasNewConversationAction
+  );
+
+  const QuickActionsMenuComponent = useMemo(() => (
+    <QuickActionsMenu
+      isChatbotMinimized={isChatbotMinimized}
+      fullScreen={fullScreen}
+      showMinimize={hasMinimizeAction}
+      showFullScreen={hasFullScreenAction || hasExitFullScreenAction}
+      showNewConversation={hasNewConversationAction}
+      onMinimize={handleToggleMinimize}
+      onToggleFullScreen={() => toggleFullScreen(!fullScreen)}
+      onNewConversation={handleCreateNewSubThread}
+      position={isChatbotMinimized ? 'top' : 'bottom'}
+      triggerHoverBg={headerHoverBg}
+    />
+  ), [
+    isChatbotMinimized,
+    fullScreen,
+    hasMinimizeAction,
+    hasFullScreenAction,
+    hasExitFullScreenAction,
+    hasNewConversationAction,
+    handleToggleMinimize,
+    toggleFullScreen,
+    handleCreateNewSubThread,
+    headerHoverBg,
+  ])
 
   return isChatbotMinimized ?
-    <div className="px-2 sm:py-4 py-3 w-full cursor-pointer" onClick={handleToggleMinimize}>
-      <div className="flex items-center w-full relative px-2">
-        <div className="justify-start">
-          {HeaderTitleSection}
-        </div>
-        <div className="flex justify-end items-center gap-1 flex-1 sm:absolute sm:right-0">
-          <div className="flex items-center">
-            {MinimizeButton}
-            {CloseButton}
+    <HeaderColorWrapper>
+      <div className="px-2 sm:py-4 py-3 w-full cursor-pointer" onClick={handleToggleMinimize}>
+        <div className="flex items-center w-full relative px-2">
+          <div className="justify-start">
+            {HeaderTitleSection}
+          </div>
+          <div className="flex justify-end items-center gap-1 flex-1 sm:absolute sm:right-0">
+            <div className="flex items-center" onClick={(e) => e.stopPropagation()}>
+              {ExpandButton}
+              {CloseButton}
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </HeaderColorWrapper>
     :
-    <div className="px-2 sm:py-4 py-3 w-full">
-      <div className="flex items-center w-full relative">
-        {/* Left side buttons */}
-        <div className="flex items-center flex-1 sm:absolute sm:left-0 sm:flex sm:items-center">
-          {DrawerToggleButton}
-          {CreateThreadButton}
-        </div>
+    <HeaderColorWrapper>
+      <div className="px-2 sm:py-4 py-3 w-full">
+        <div className="flex items-center w-full relative">
+          {/* Left side buttons */}
+          <div className="flex items-center flex-1 sm:absolute sm:left-0 sm:flex sm:items-center">
+            {DrawerToggleButton}
+            {CreateThreadButton}
+          </div>
 
-        {/* Center title section */}
-        <div className="flex justify-center items-center flex-1">
-          {HeaderTitleSection}
-        </div>
+          {/* Center title section */}
+          <div className="flex justify-center items-center flex-1">
+            {HeaderTitleSection}
+          </div>
 
-        {/* Right side buttons */}
-        <div className="flex justify-end items-center gap-1 flex-1 sm:absolute sm:right-0">
-          {allowBridgeSwitchViaProp && allowBridgeSwitch && (
-            <BridgeSwitchDropdown
-              currentSelectedBridgeSlug={bridgeName}
-              bridges={bridges}
-            />
-          )}
+          {/* Right side buttons */}
+          <div className="flex justify-end items-center gap-1 flex-1 sm:absolute sm:right-0">
+            {allowBridgeSwitchViaProp && allowBridgeSwitch && (
+              <BridgeSwitchDropdown
+                currentSelectedBridgeSlug={bridgeName}
+                bridges={bridges}
+              />
+            )}
 
-          {allowModalSwitch && <AiServicesToSwitch chatSessionId={chatSessionId} />}
+            {allowModalSwitch && <AiServicesToSwitch chatSessionId={chatSessionId} />}
 
-          {headerButtons?.map((item, index) => (
-            <React.Fragment key={`header-button-${index}`}>
-              {renderIconsByType(item)}
-            </React.Fragment>
-          ))}
+            {headerButtons?.map((item, index) => (
+              <React.Fragment key={`header-button-${index}`}>
+                {renderIconsByType(item)}
+              </React.Fragment>
+            ))}
 
-          {!isFullScreen && <div className="flex items-center">
-            {ScreenSizeToggleButton}
-            {(isMobileSDK || !isHelloUser) ? CloseButton : MinimizeButton}
-          </div>}
+            {showQuickActions && (
+              <div className="flex items-center">
+                {QuickActionsMenuComponent}
+              </div>
+            )}
+            {CloseButton}
+          </div>
         </div>
       </div>
-    </div>
+    </HeaderColorWrapper>
 };
 
 export default React.memo(addUrlDataHoc(ChatbotHeader, [ParamsEnums.currentTeamId, ParamsEnums.currentChannelId, ParamsEnums.threadId, ParamsEnums.bridgeName]));
\ No newline at end of file
diff --git a/components/Interface-Chatbot/InterfaceChatbot.css b/components/Interface-Chatbot/InterfaceChatbot.css
index 6dc00a92..2eabfd2b 100644
--- a/components/Interface-Chatbot/InterfaceChatbot.css
+++ b/components/Interface-Chatbot/InterfaceChatbot.css
@@ -36,7 +36,7 @@
   padding: 5px !important;
   border-radius: 50px !important;
   cursor: pointer !important;
-  z-index: 999999 !important;
+  z-index: 99 !important;
   pointer-events: auto !important;
   background-color: var(--down-btn-bg-color, #333) !important;
   color: var(--down-btn-text-color, white) !important;
diff --git a/components/Interface-Chatbot/Messages/DateGroup.tsx b/components/Interface-Chatbot/Messages/DateGroup.tsx
index 3fa75bec..9f925ea7 100644
--- a/components/Interface-Chatbot/Messages/DateGroup.tsx
+++ b/components/Interface-Chatbot/Messages/DateGroup.tsx
@@ -9,7 +9,7 @@ import dayjs from 'dayjs';
  * if they are from different dates.
  */
 
-function DateGroup({ prevTime, messageTime, backgroundColor, textColor }: { prevTime: any, messageTime: number, backgroundColor: string, textColor: string }) {
+function DateGroup({ prevTime, messageTime, backgroundColor, foregroundColor }: { prevTime: any, messageTime: number, backgroundColor: string, foregroundColor: string }) {
     const messageTimeRange = dayjs(messageTime);
     const prevTimeRange = dayjs(prevTime);
 
diff --git a/components/Interface-Chatbot/Messages/Message.tsx b/components/Interface-Chatbot/Messages/Message.tsx
index 7f572580..fda6345f 100644
--- a/components/Interface-Chatbot/Messages/Message.tsx
+++ b/components/Interface-Chatbot/Messages/Message.tsx
@@ -30,7 +30,7 @@ const ROLE_TOOLS_CALL = "tools_call";
 const ROLE_VOICE_CALL = "voice_call";
 
 function Message({ message, addMessage, prevTime, isLastMessage }: MessageProps) {
-  const { backgroundColor, textColor } = useColor();
+  const { primaryBgColor, foregroundColor } = useColor();
 
   /**
    * Memoize role-based rendering to prevent unnecessary re-computations
@@ -44,15 +44,15 @@ function Message({ message, addMessage, prevTime, isLastMessage }: MessageProps)
           <>
             <UserMessageCard
               message={message}
-              textColor={textColor}
-              backgroundColor={backgroundColor}
+              foregroundColor={foregroundColor}
+              backgroundColor={primaryBgColor}
             />
             {message?.error && (
               <AssistantMessageCard
                 message={message}
                 isError={true}
-                textColor={textColor}
-                backgroundColor={backgroundColor}
+                foregroundColor={foregroundColor}
+                backgroundColor={primaryBgColor}
               />
             )}
           </>
@@ -62,8 +62,8 @@ function Message({ message, addMessage, prevTime, isLastMessage }: MessageProps)
         return (
           <AssistantMessageCard
             message={message}
-            textColor={textColor}
-            backgroundColor={backgroundColor}
+            foregroundColor={foregroundColor}
+            backgroundColor={primaryBgColor}
           />
         );
 
@@ -82,7 +82,7 @@ function Message({ message, addMessage, prevTime, isLastMessage }: MessageProps)
       default:
         return null;
     }
-  }, [message, textColor, backgroundColor, addMessage]);
+  }, [message, foregroundColor, primaryBgColor, addMessage]);
 
   return (
     <div className="w-full">
@@ -91,8 +91,8 @@ function Message({ message, addMessage, prevTime, isLastMessage }: MessageProps)
           prevTime={prevTime}
           messageTime={message.time}
           key={message.time}
-          backgroundColor={backgroundColor}
-          textColor={textColor}
+          backgroundColor={primaryBgColor}
+          foregroundColor={foregroundColor}
         />
       )}
       {messageContent}
diff --git a/components/Interface-Chatbot/Messages/MessageList.tsx b/components/Interface-Chatbot/Messages/MessageList.tsx
index 71a9b672..ae82514c 100644
--- a/components/Interface-Chatbot/Messages/MessageList.tsx
+++ b/components/Interface-Chatbot/Messages/MessageList.tsx
@@ -30,7 +30,7 @@ function MessageList({ chatSessionId, currentChannelId = "" }: { chatSessionId:
   const getMoreHelloChats = useGetMoreHelloChats();
   const getMoreChats = useGetMoreChats();
   const { setNewMessage } = useChatActions();
-  const { backgroundColor, textColor } = useColor();
+  const { primaryBgColor, foregroundColor } = useColor();
 
   const { newMessage, messageIds, msgIdAndDataMap, loading, hasMoreMessages } = useCustomSelector((state) => ({
     newMessage: state.Chat.newMessage || false,
@@ -53,8 +53,8 @@ function MessageList({ chatSessionId, currentChannelId = "" }: { chatSessionId:
   }));
 
   const themePalette = useMemo(() => ({
-    "--primary-main": lighten(backgroundColor, 0.4),
-  }), [backgroundColor]);
+    "--primary-main": lighten(primaryBgColor, 0.4),
+  }), [primaryBgColor]);
 
   const fetchMoreData = useCallback(() => {
     if (isHelloUser) {
@@ -221,8 +221,8 @@ function MessageList({ chatSessionId, currentChannelId = "" }: { chatSessionId:
         <MoveToDownButton
           movetoDown={moveToDown}
           showScrollButton={showScrollButton}
-          backgroundColor={lighten(backgroundColor, 0.1)}
-          textColor={textColor}
+          backgroundColor={lighten(primaryBgColor, 0.1)}
+          foregroundColor={foregroundColor}
         />
       </div>
     </div>
diff --git a/components/Interface-Chatbot/Messages/RepliedMessage.tsx b/components/Interface-Chatbot/Messages/RepliedMessage.tsx
index 5702c891..c8809d3a 100644
--- a/components/Interface-Chatbot/Messages/RepliedMessage.tsx
+++ b/components/Interface-Chatbot/Messages/RepliedMessage.tsx
@@ -2,11 +2,15 @@ import RenderHelloAttachmentMessage from "@/components/Hello/RenderHelloAttachme
 import RenderHelloInteractiveMessage from "@/components/Hello/RenderHelloInteractiveMessage";
 import RenderHelloVedioCallMessage from "@/components/Hello/RenderHelloVedioCallMessage";
 import { addUrlDataHoc } from "@/hoc/addUrlDataHoc";
+import { withAlpha } from "@/utils/themeUtility";
 import React from "react";
 import InterfaceMarkdown from "../Interface-Markdown/InterfaceMarkdown";
+import { useColor } from "../../Chatbot/hooks/useColor";
 import { MESSAGE_TYPES } from "./MessageType";
 
 const RepliedMessage = ({ chatSessionId, message }: { chatSessionId: string; message: any }) => {
+    const { primaryTextColor, primaryBgColor } = useColor();
+
     if (message?.replied_msg_type !== 'interactive' &&
         !message?.replied_msg_content?.text &&
         !(message?.replied_msg_content?.attachment && message?.replied_msg_content?.attachment?.length > 0)) {
@@ -50,9 +54,28 @@ const RepliedMessage = ({ chatSessionId, message }: { chatSessionId: string; mes
         }
     }
 
+    const isUser = message?.role === 'user';
+    // Match the input-area ReplyPreview: a light card with a primary-colored
+    // accent + sender name. On the primary-colored (outgoing) bubble we use a
+    // near-opaque white so the primary doesn't bleed through and wash it out;
+    // on dark/incoming bubbles a soft primary tint reads the same way.
+    const replyBg = isUser
+        ? 'rgba(255, 255, 255, 0.96)'
+        : withAlpha(primaryBgColor, 0.10);
+    const replyBorder = primaryTextColor;
+    const replyTextColor = isUser ? '#171717' : 'var(--foreground)';
+
     return (
-        <div className={`pointer-events-none mb-1 p-2 rounded-md border-l-2 border-blue-400 not-prose ${message?.role !== 'user' ? 'bg-gray-200 dark:bg-gray-800' : 'bg-black bg-opacity-10 border-white'}`}>
-            <div className={`text-xs text-gray-600 mb-1 font-medium ${message?.role !== 'user' ? 'dark:text-gray-200' : 'text-inherit'}`}>{senderName}</div>
+            <div
+                className="pointer-events-none mb-1 p-2 rounded-md border-l-4 not-prose"
+                style={{ backgroundColor: replyBg, borderLeftColor: replyBorder }}
+            >
+                <div
+                    className="text-xs mb-1 font-medium truncate"
+                    style={{ color: primaryTextColor }}
+                >
+                    {senderName}
+                </div>
             {message.replied_msg_type === MESSAGE_TYPES.INTERACTIVE ? (
                 <RenderHelloInteractiveMessage message={{ messageJson: message.replied_msg_content }} />
             ) :
@@ -60,7 +83,7 @@ const RepliedMessage = ({ chatSessionId, message }: { chatSessionId: string; mes
                     <RenderHelloAttachmentMessage message={{ messageJson: message.replied_msg_content }} isBot={message.replied_msg_sender_id || false} />
                 ) : message.replied_msg_type === MESSAGE_TYPES.VIDEO_CALL ? (<RenderHelloVedioCallMessage message={{ messageJson: message.replied_msg_content }} />)
                     : (
-                        <div className={`text-sm text-gray-700 ${message?.role !== 'user' ? 'dark:text-gray-200' : 'text-inherit'}`}>
+                        <div className="text-sm" style={{ color: replyTextColor }}>
                             {(() => {
                                 const isBotMessage = senderId && typeof senderId === 'string' && senderId.toLowerCase() !== 'user';
                                 const replyContent = (() => {
diff --git a/components/Interface-Chatbot/Messages/UserMessage.tsx b/components/Interface-Chatbot/Messages/UserMessage.tsx
index e5ccdcef..01be5f4f 100644
--- a/components/Interface-Chatbot/Messages/UserMessage.tsx
+++ b/components/Interface-Chatbot/Messages/UserMessage.tsx
@@ -16,7 +16,7 @@ import RepliedMessage from './RepliedMessage';
  * It includes an image with fallback, message content, and sender time.
  */
 
-const UserMessageCard = React.memo(({ message, backgroundColor, textColor, chatSessionId }: any) => {
+const UserMessageCard = React.memo(({ message, backgroundColor, foregroundColor, chatSessionId }: any) => {
     const [showSenderTime, setShowSenderTime] = useState(false);
     const [showReplyButton, setShowReplyButton] = useState(false);
     const { setReplyToMessage } = useReplyContext();
@@ -65,7 +65,7 @@ const UserMessageCard = React.memo(({ message, backgroundColor, textColor, chatS
                         className="p-2.5 min-w-[40px] sm:max-w-[80%] max-w-[90%] rounded-[10px_10px_1px_10px] break-words user-message-bubble"
                         style={{
                             backgroundColor: backgroundColor,
-                            color: textColor
+                            color: foregroundColor
                         }}
                         onClick={() => setShowSenderTime(!showSenderTime)}
                     >
@@ -84,7 +84,7 @@ const UserMessageCard = React.memo(({ message, backgroundColor, textColor, chatS
                                                     alt={`Image ${index + 1}`}
                                                     style={{
                                                         backgroundColor: backgroundColor,
-                                                        color: textColor,
+                                                        color: foregroundColor,
                                                         borderRadius: "10px",
                                                         maxHeight: "300px",
                                                     }}
diff --git a/components/Interface-Chatbot/MoveToDownButton.tsx b/components/Interface-Chatbot/MoveToDownButton.tsx
index 66c08bd6..adaff3b5 100644
--- a/components/Interface-Chatbot/MoveToDownButton.tsx
+++ b/components/Interface-Chatbot/MoveToDownButton.tsx
@@ -3,7 +3,7 @@ import { IconButton } from "@mui/material";
 import React from "react";
 import "./InterfaceChatbot.css";
 
-function MoveToDownButton({ movetoDown, showScrollButton, backgroundColor, textColor }: { movetoDown: () => void, showScrollButton: boolean, backgroundColor: string, textColor: string }) {
+function MoveToDownButton({ movetoDown, showScrollButton, backgroundColor, foregroundColor }: { movetoDown: () => void, showScrollButton: boolean, backgroundColor: string, foregroundColor: string }) {
   if (!showScrollButton) return null;
   return (
     <IconButton
@@ -11,7 +11,7 @@ function MoveToDownButton({ movetoDown, showScrollButton, backgroundColor, textC
       className="move-to-down-button"
       style={{
         '--down-btn-bg-color': backgroundColor || "#333",
-        '--down-btn-text-color': textColor || "white",
+        '--down-btn-text-color': foregroundColor || "white",
       } as React.CSSProperties}
       disableRipple
     >
diff --git a/components/Interface-Chatbot/QuickActionsMenu.tsx b/components/Interface-Chatbot/QuickActionsMenu.tsx
new file mode 100644
index 00000000..bf06e628
--- /dev/null
+++ b/components/Interface-Chatbot/QuickActionsMenu.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import { EllipsisVertical, Maximize2, Minimize2, Minus, Plus } from "lucide-react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useColor } from "../Chatbot/hooks/useColor";
+
+export interface QuickActionsMenuProps {
+  /** Open state (controlled). If omitted, the component manages its own state. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+
+  isChatbotMinimized?: boolean;
+  fullScreen?: boolean;
+
+  showMinimize?: boolean;
+  showFullScreen?: boolean;
+  showNewConversation?: boolean;
+
+  onMinimize?: () => void;
+  onToggleFullScreen?: () => void;
+  onNewConversation?: () => void;
+
+  /** Extra class for the trigger button. */
+  triggerClassName?: string;
+  /** Extra class for the menu panel. */
+  menuClassName?: string;
+  /** Icon size for the trigger. */
+  triggerIconSize?: number;
+  /** Apply the `var(--icon-color)` color to the trigger icon. */
+  useIconColor?: boolean;
+  /** Where to anchor the menu relative to the trigger. Defaults to "bottom". */
+  position?: "top" | "bottom";
+  /**
+   * Background color used for the trigger's hover state. Pass a theme-derived
+   * value (e.g. a translucent overlay) so the wash matches any header color.
+   * If omitted, the trigger falls back to the `hover:bg-gray-200` class.
+   */
+  triggerHoverBg?: string;
+}
+
+const QuickActionsMenu: React.FC<QuickActionsMenuProps> = ({
+  open: controlledOpen,
+  onOpenChange,
+  isChatbotMinimized = false,
+  fullScreen = false,
+  showMinimize = false,
+  showFullScreen = false,
+  showNewConversation = false,
+  onMinimize,
+  onToggleFullScreen,
+  onNewConversation,
+  triggerClassName = "cursor-pointer p-2 rounded-full transition-colors icn",
+  menuClassName = "absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-[var(--drawer-color)] ring-1 ring-black/5 dark:ring-[var(--icon-color)]/20 focus:outline-none z-50 py-1",
+  triggerIconSize = 22,
+  useIconColor = false,
+  position = "bottom",
+  triggerHoverBg,
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? !!controlledOpen : internalOpen;
+  const { foregroundColor } = useColor();
+
+  const setOpen = (next: boolean) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const closeMenu = () => setOpen(false);
+
+  const triggerIconProps = useIconColor ? { color: "var(--icon-color)" as const } : {};
+
+  const triggerHoverHandlers = triggerHoverBg
+    ? {
+        onMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => {
+          (e.currentTarget as HTMLButtonElement).style.backgroundColor = triggerHoverBg;
+        },
+        onMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => {
+          (e.currentTarget as HTMLButtonElement).style.backgroundColor = '';
+        },
+      }
+    : {};
+
+  const trigger = useMemo(() => (
+    <button
+      type="button"
+      aria-label="Quick actions"
+      aria-expanded={open}
+      aria-haspopup="menu"
+      onClick={() => setOpen(!open)}
+      className={triggerClassName}
+      {...triggerHoverHandlers}
+    >
+      <EllipsisVertical style={{ color: foregroundColor }} size={triggerIconSize} {...triggerIconProps} />
+    </button>
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  ), [open, triggerClassName, triggerIconSize, useIconColor]);
+
+  return (
+    <div ref={menuRef} className="relative inline-block text-left">
+      {trigger}
+
+      {open && (
+        <div
+          role="menu"
+          aria-orientation="vertical"
+          tabIndex={-1}
+          className={
+            "w-[180px] " +
+            (position === "top"
+              ? "absolute right-0 bottom-full mb-2 rounded-md shadow-lg bg-white dark:bg-[var(--drawer-color)] ring-1 ring-black/5 dark:ring-[var(--icon-color)]/20 focus:outline-none z-50 py-1"
+              : menuClassName)
+          }
+        >
+          {showMinimize && (
+            <button
+              role="menuitem"
+              tabIndex={-1}
+              onClick={() => { onMinimize?.(); closeMenu(); }}
+              className="w-full flex items-center gap-3 px-4 py-2 text-sm transition-colors text-gray-700 dark:text-[var(--foreground)] hover:bg-gray-100 dark:hover:bg-white/10"
+            >
+              {isChatbotMinimized
+                ? <Maximize2 size={18} style={{ transform: 'rotate(90deg)' }} />
+                : <Minus size={18} />}
+              <span>{isChatbotMinimized ? 'Expand chat' : 'Minimize chat'}</span>
+            </button>
+          )}
+
+          {showFullScreen && (
+            <button
+              role="menuitem"
+              tabIndex={-1}
+              onClick={() => { onToggleFullScreen?.(); closeMenu(); }}
+              className="w-full flex items-center gap-3 px-4 py-2 text-sm transition-colors text-gray-700 dark:text-[var(--foreground)] hover:bg-gray-100 dark:hover:bg-white/10"
+            >
+              {fullScreen
+                ? <Minimize2 size={18} style={{ transform: 'rotate(90deg)' }} />
+                : <Maximize2 size={18} style={{ transform: 'rotate(90deg)' }} />}
+              <span>{fullScreen ? 'Exit full screen' : 'Expand view'}</span>
+            </button>
+          )}
+
+          {showNewConversation && (
+            <button
+              role="menuitem"
+              tabIndex={-1}
+              onClick={() => { onNewConversation?.(); closeMenu(); }}
+              className="w-full flex items-center gap-3 px-4 py-2 text-sm transition-colors text-gray-700 dark:text-[var(--foreground)] hover:bg-gray-100 dark:hover:bg-white/10"
+            >
+              <Plus size={18} />
+              <span>New conversation</span>
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default QuickActionsMenu;
\ No newline at end of file
diff --git a/components/Interface-Chatbot/ReplyPreview.tsx b/components/Interface-Chatbot/ReplyPreview.tsx
index 2d6480cf..ba3ed1d6 100644
--- a/components/Interface-Chatbot/ReplyPreview.tsx
+++ b/components/Interface-Chatbot/ReplyPreview.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { X } from "lucide-react";
 import React from "react";
+import { useColor } from "../Chatbot/hooks/useColor";
 
 interface ReplyPreviewProps {
   replyToMessage: {
@@ -15,6 +16,7 @@ interface ReplyPreviewProps {
 }
 
 const ReplyPreview: React.FC<ReplyPreviewProps> = ({ replyToMessage, onCloseReply }) => {
+  const { primaryBgColor, primaryTextColor, primaryTintColor } = useColor();
   if (!replyToMessage) return null;
 
   const getMessageContent = (content: string | { text: string }): string => {
@@ -53,10 +55,19 @@ const ReplyPreview: React.FC<ReplyPreviewProps> = ({ replyToMessage, onCloseRepl
   const displayContent = getDisplayContent();
 
   return (
-    <div className="relative flex items-start gap-3 p-3 bg-blue-50 border-l-4 border-blue-500 mb-1 rounded-md shadow-sm z-[999]">
+    <div
+      className="relative flex items-start gap-3 p-3 border-l-4 mb-1 rounded-md shadow-sm z-[999]"
+      style={{
+        backgroundColor: primaryTintColor,
+        borderLeftColor: primaryTextColor,
+      }}
+    >
       <div className="flex-1 min-w-0 pr-2">
         <div className="flex items-center gap-2 mb-1">
-          <span className="text-sm font-medium text-blue-700">
+           <span
+              className="text-sm font-medium"
+              style={{ color: primaryTextColor }}
+            >
             {getSenderName()}
           </span>
         </div>
diff --git a/package.json b/package.json
index d894f90e..5c642e85 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev -p 3001 --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
diff --git a/public/chat-widget-local.js b/public/chat-widget-local.js
index 9ea03fb7..3da813e8 100644
--- a/public/chat-widget-local.js
+++ b/public/chat-widget-local.js
@@ -166,13 +166,13 @@
             const imgElement = document.createElement('div');
             imgElement.id = this.elements.chatbotIconImage;
             imgElement.innerHTML = `
-        <svg width="60" height="60" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid #A9A9A9; border-radius: 50%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);">
-            <rect width="48" height="48" rx="24" fill="white"/>
-            <path d="M10.667 16C10.667 13.7909 12.4579 12 14.667 12H33.3337C35.5428 12 37.3337 13.7909 37.3337 16V28C37.3337 30.2091 35.5428 32 33.3337 32H14.667C12.4579 32 10.667 30.2091 10.667 28V16Z" fill="#F2CA55"/>
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M21.1339 22.6665C21.1339 24.2497 22.4173 25.5332 24.0005 25.5332C25.5837 25.5332 26.8672 24.2497 26.8672 22.6665H29.1339C29.1339 25.5016 26.8356 27.7998 24.0005 27.7998C21.1655 27.7998 18.8672 25.5016 18.8672 22.6665H21.1339Z" fill="#8C5D00"/>
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M20.2002 19.9998V16.6665H22.4669V19.9998H20.2002ZM25.5335 19.9998V16.6665H27.8002V19.9998H25.5335Z" fill="#8C5D00"/>
-            <path d="M26.6663 32V36L21.333 32H26.6663Z" fill="#8C5D00"/>
-        </svg>
+                <div style="border-radius: 50%; box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.2); display: grid; place-items: center; width: 48px; height: 48px; background-color: #ffffff;">
+                <span id="chatbot-logo">
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny-ps">
+                        <path d="M2.08891 9.91851L21.8714 3.00563C21.8991 2.9965 21.9292 2.99856 21.9554 3.01136C21.9816 3.02415 22.0017 3.04667 22.0115 3.07411C22.0156 3.08599 22.0177 3.09846 22.0177 3.11102V20.8884C22.0177 20.918 22.006 20.9464 21.9851 20.9673C21.9641 20.9883 21.9357 21 21.9061 21H21.8915L2.10581 20.035C2.07722 20.0335 2.0503 20.0211 2.0306 20.0003C2.0109 19.9796 1.99994 19.952 1.99997 19.9234V10.0275C1.99999 10.0019 2.00885 9.9771 2.02507 9.95732C2.04128 9.93754 2.06384 9.92354 2.08891 9.91851ZM4.24883 11.8223C4.15092 11.8035 4.04954 11.822 3.96451 11.874C3.87949 11.926 3.81696 12.008 3.78914 12.1037C3.76133 12.1994 3.77025 12.3021 3.81414 12.3916C3.85804 12.4811 3.93376 12.551 4.02648 12.5876L11.2542 14.6777L11.4156 14.5443L18.6131 8.60619C18.6596 8.57514 18.6991 8.53469 18.7291 8.48744C18.759 8.44019 18.7787 8.3872 18.7868 8.33187C18.795 8.27655 18.7915 8.22012 18.7766 8.16623C18.7616 8.11234 18.7355 8.06219 18.7 8.019C18.6644 7.97581 18.6202 7.94055 18.5702 7.9155C18.5202 7.89044 18.4656 7.87614 18.4097 7.87351C18.3538 7.87089 18.298 7.88001 18.2459 7.90027C18.1938 7.92054 18.1465 7.9515 18.107 7.99117L11.0719 13.7972L4.24883 11.8223Z" fill="#1E75BA"/>
+                    </svg>
+                </span>
+                </div>
         `;
             chatBotIcon.appendChild(imgElement);
 
@@ -392,12 +392,15 @@
 
         updateBadgeCount(data, channelId) {
             const badgeElement = document.getElementById(this.elements.unReadMsgCountBadge);
+            const iconImageElement = document.getElementById(this.elements.chatbotIconImage);
             if (badgeElement && channelId === '*') {
                 if (!data || parseInt(data) === 0) {
                     badgeElement.style.display = 'none';
+                    if (iconImageElement) iconImageElement.classList.remove('has-badge');
                 } else {
                     badgeElement.textContent = data;
                     badgeElement.style.display = 'block'; // or 'block' depending on your layout
+                    if (iconImageElement) iconImageElement.classList.add('has-badge');
                 }
             }
             const divElement = document.getElementById(`unread-${channelId}`);
@@ -888,6 +891,10 @@
             iframe.allowFullscreen = true;
             iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups allow-forms allow-top-navigation-by-user-activation');
             iframe.allow = 'microphone *; camera *; midi *; encrypted-media *';
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.setAttribute('width', '100%');
+            iframe.setAttribute('height', '100%');
 
             this.parentContainer.appendChild(iframe);
 
diff --git a/public/chat-widget-style.css b/public/chat-widget-style.css
index f401ce79..443e4cbf 100644
--- a/public/chat-widget-style.css
+++ b/public/chat-widget-style.css
@@ -14,7 +14,6 @@
   /* background-color: #3d7bef !important; */
   text-align: center;
   align-content: center;
-  color: white;
   font-size: 18px;
   /* cursor: pointer; */
   z-index: 99999 !important;
@@ -34,6 +33,12 @@
   display: none;
   box-sizing: border-box;
   background-color: #fff;
+  color: #171717;
+}
+
+.rag-theme-dark .pop_over-parent-container {
+  background-color: #1f1f1f;
+  color: #ededed;
 }
 
 .pop_over-interfaceEmbed {
@@ -45,12 +50,18 @@
 /* all space */
 .all_available_space-parent-container {
   background-color: #fff;
+  color: #171717;
   z-index: 9999;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
 }
 
+.rag-theme-dark .all_available_space-parent-container {
+  background-color: #121212;
+  color: #ededed;
+}
+
 .all_available_space-interfaceEmbed {
   top: 1px;
   left: 1px;
@@ -63,25 +74,33 @@
   bottom: 10px;
   right: 10px;
   background-color: #fff;
+  color: #171717;
   z-index: 2147483647;
   display: none;
   box-sizing: border-box;
-  border-radius: 12px;
+  border-radius: 16px;
   overflow: hidden;
   border: 1px solid #cecece;
   box-shadow: rgba(15, 15, 15, 0.08) 0px 5px 40px 0px;
 }
 
+.rag-theme-dark .popup-parent-container {
+  background-color: #1f1f1f;
+  color: #ededed;
+  border-color: #333333;
+}
+
 .popup-interfaceEmbed {
   bottom: 1%;
   right: 10px;
 }
 
 [id$="-hello-chatbot-icon-image"] {
+  position: relative;
   background-color: none !important;
   object-fit: contain;
-  height: 60px !important;
-  width: 60px !important;
+  height: 48px !important;
+  width: 48px !important;
   margin: 8px 0px 0px 2px !important;
   box-sizing: border-box !important;
   float: right;
@@ -93,11 +112,25 @@
   z-index: 99999;
 }
 
+/* Carve a circular notch out of the launcher's top-right corner whenever an
+   unread badge is being shown. The mask matches the launcher's 48x48 inner
+   circle so the badge appears to "punch through" the launcher. */
+[id$="-hello-chatbot-icon-image"].has-badge > div {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Mi45OTkxIDBDNDAuNTcwNyAxLjgyNDQ2IDM5IDQuNzI4OCAzOSA4QzM5IDEzLjE4NTMgNDIuOTQ2NyAxNy40NDg5IDQ4IDE3Ljk1MDZWNDhIMFYwSDQyLjk5OTFaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9zdmc+Cg==");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Mi45OTkxIDBDNDAuNTcwNyAxLjgyNDQ2IDM5IDQuNzI4OCAzOSA4QzM5IDEzLjE4NTMgNDIuOTQ2NyAxNy40NDg5IDQ4IDE3Ljk1MDZWNDhIMFYwSDQyLjk5OTFaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9zdmc+Cg==");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-position: 0 0;
+  mask-position: 0 0;
+}
+
 [id$="-hello-chatbot-launcher-icon"] {
   /* background-color: transparent; */
   object-fit: contain;
   /* cursor: pointer; */
-  z-index: 9999 !important;
+  z-index: 2147483003 !important;
   height: auto;
   width: auto;
   box-sizing: border-box !important;
@@ -107,6 +140,11 @@
   right: 18px !important;
 }
 
+#chatbot-logo {
+  display: inherit;
+  place-items: inherit;
+}
+
 /* Starter Question Styles */
 .hello-starter-question {
   z-index: 999999;
@@ -242,11 +280,17 @@
   top: 50%;
   transform: translate(0%, -50%);
   background-color: #ffffff;
+  color: #171717;
   z-index: 9999;
   display: none;
   box-sizing: border-box;
 }
 
+.rag-theme-dark .left_slider-parent-container {
+  background-color: #1f1f1f;
+  color: #ededed;
+}
+
 .left_slider-interfaceEmbed {
   bottom: 50%;
   left: -30px;
@@ -260,11 +304,17 @@
   top: 50%;
   transform: translate(0%, -50%);
   background-color: #ffffff;
+  color: #171717;
   z-index: 9999;
   display: none;
   box-sizing: border-box;
 }
 
+.rag-theme-dark .right_slider-parent-container {
+  background-color: #1f1f1f;
+  color: #ededed;
+}
+
 .right_slider-interfaceEmbed {
   bottom: 50%;
   right: -30px;
@@ -272,15 +322,15 @@
 }
 
 [id$="-hello-chatbot-iframe-component"] {
-  width: 100%;
-  height: 100%;
+  width: 100% !important;
+  height: 100% !important;
   border: 0px !important;
   /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
 }
 
 .chatbot-icon-interfaceEmbed {
-  width: 60px !important;
-  height: 60px !important;
+  width: 48px !important;
+  height: 48px !important;
   cursor: pointer;
   object-fit: contain;
 }
@@ -418,12 +468,12 @@
 
 .hello-badge-count {
   /* Dimensions & Position */
-  min-width: 20px;
-  height: 20px;
+  min-width: 18px;
+  height: 18px;
   position: absolute;
   top: -2px;
-  right: 5px;
-  padding: 4px;
+  right: -11px;
+  padding: 3px;
   box-sizing: border-box;
 
   /* Centering */
@@ -456,6 +506,12 @@
 .msg-push-loader {
   padding: 20px;
   background: #fff;
+  color: #171717;
   border-radius: 8px;
   font-family: system-ui;
+}
+
+.rag-theme-dark .msg-push-loader {
+  background: #1f1f1f;
+  color: #ededed;
 }
\ No newline at end of file
diff --git a/public/chatbot-style.css b/public/chatbot-style.css
index 964a92a4..e5359632 100644
--- a/public/chatbot-style.css
+++ b/public/chatbot-style.css
@@ -31,6 +31,12 @@
     display: none;
     box-sizing: border-box;
     background-color: #fff;
+    color: #171717;
+}
+
+.rag-theme-dark .pop_over-parent-container {
+    background-color: #1f1f1f;
+    color: #ededed;
 }
 
 .pop_over-interfaceEmbed {
@@ -42,12 +48,18 @@
 /* all space */
 .all_available_space-parent-container {
     background-color: #fff;
+    color: #171717;
     z-index: 9999;
     box-sizing: border-box;
     height: 100%;
     width: 100%;
 }
 
+.rag-theme-dark .all_available_space-parent-container {
+    background-color: #121212;
+    color: #ededed;
+}
+
 .all_available_space-interfaceEmbed {
     top: 1px;
     left: 1px;
@@ -60,14 +72,21 @@
     bottom: 5px;
     right: 5px;
     background-color: #fff;
+    color: #171717;
     z-index: 9999;
     display: none;
     box-sizing: border-box;
-    border-radius: 12px;
+    border-radius: 16px;
     overflow: hidden;
     border: 1px solid #cecece;
 }
 
+.rag-theme-dark .popup-parent-container {
+    background-color: #1f1f1f;
+    color: #ededed;
+    border-color: #333333;
+}
+
 .popup-interfaceEmbed {
     bottom: 1%;
     right: 10px;
@@ -105,11 +124,17 @@
     top: 50%;
     transform: translate(0%, -50%);
     background-color: #ffffff;
+    color: #171717;
     z-index: 9999;
     display: none;
     box-sizing: border-box;
 }
 
+.rag-theme-dark .left_slider-parent-container {
+    background-color: #1f1f1f;
+    color: #ededed;
+}
+
 .left_slider-interfaceEmbed {
     bottom: 50%;
     left: -30px;
@@ -123,11 +148,17 @@
     top: 50%;
     transform: translate(0%, -50%);
     background-color: #ffffff;
+    color: #171717;
     z-index: 9999;
     display: none;
     box-sizing: border-box;
 }
 
+.rag-theme-dark .right_slider-parent-container {
+    background-color: #1f1f1f;
+    color: #ededed;
+}
+
 .right_slider-interfaceEmbed {
     bottom: 50%;
     right: -30px;
diff --git a/public/rag.css b/public/rag.css
index 8077266e..6e348e6e 100644
--- a/public/rag.css
+++ b/public/rag.css
@@ -436,7 +436,7 @@
     height: 90vh;
     max-width: 1200px;
     max-height: 800px;
-    border-radius: 12px;
+    border-radius: 16px;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     overflow: hidden;
diff --git a/store/hello/helloReducer.ts b/store/hello/helloReducer.ts
index ead35c38..8ce38e03 100644
--- a/store/hello/helloReducer.ts
+++ b/store/hello/helloReducer.ts
@@ -71,10 +71,15 @@ export const reducers: ValidateSliceCaseReducers<
   setChannelListData(state, action: actionType<ChannelListData>) {
     const chatSessionId = action.urlData?.chatSessionId
     if (chatSessionId) {
+      const channels = action.payload?.channels || [];
+      const sortedChannels = [...channels].sort((a: any, b: any) => {
+        if (a.is_closed === b.is_closed) return 0;
+        return a.is_closed ? 1 : -1;
+      });
       state[chatSessionId] = {
         ...state[chatSessionId],
-        channelListData: action.payload,
-        Channel: action.payload?.channels?.[0]
+        channelListData: { ...action.payload, channels: sortedChannels },
+        Channel: sortedChannels[0]
       };
     }
   },
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 38a3af2a..39385788 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -15,6 +15,20 @@ export default {
         primaryTheme: "rgb(var(--primary-rgb) / <alpha-value>)",
         secondaryTheme: "rgb(var(--primary-rgb) / <alpha-value>)",
       },
+      keyframes: {
+        slideUp: {
+          "0%": { transform: "translateY(100%)", opacity: "0" },
+          "100%": { transform: "translateY(0)", opacity: "1" },
+        },
+        fadeIn: {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+      },
+      animation: {
+        slideUp: "slideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1)",
+        fadeIn: "fadeIn 0.2s ease-out"
+      },
     },
   },
   plugins: [
diff --git a/utils/themeUtility.js b/utils/themeUtility.js
index bee75cdb..660363c9 100644
--- a/utils/themeUtility.js
+++ b/utils/themeUtility.js
@@ -1,18 +1,108 @@
-export function isColorLight(color) {
-  // Create an offscreen canvas for measuring the color brightness
+// Mix ratios used for the 3-stop gradient.
+const GRADIENT_STOPS = [0.12, 0.20, 0.30];
+
+// Parse a CSS color into its RGB components [r, g, b].
+// Returns null when called outside a browser (SSR/tests) so callers can fall back.
+function getRgbFromColor(color) {
+  if (typeof document === "undefined") return null;
+
   const canvas = document.createElement("canvas");
   canvas.width = 1;
   canvas.height = 1;
-  const context = canvas.getContext("2d");
-  context.fillStyle = color;
-  context.fillRect(0, 0, 1, 1);
 
-  // Get the color data (RGBA) of the filled rectangle
-  const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+
+  const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+  return [r, g, b];
+}
+
+// Memoize RGB lookups
+const rgbCache = new Map();
+
+function getRgbCached(color) {
+  if (rgbCache.has(color)) return rgbCache.get(color);
+
+  const rgb = getRgbFromColor(color);
+  if (rgb) rgbCache.set(color, rgb);
+
+  return rgb;
+}
+
+export function isColorLight(color) {
+  const rgb = getRgbCached(color);
+  if (!rgb) return false;
+
+  const [r, g, b] = rgb.map((v) => {
+    v /= 255;
+    return v <= 0.03928
+      ? v / 12.92
+      : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+
+  const luminance =
+    0.2126 * r +
+    0.7152 * g +
+    0.0722 * b;
+
+  // Lower threshold
+  return luminance > 0.35;
+}
+
+// Mix a base color toward a target color by ratio (0 = base, 1 = target).
+function mixColor(baseRgb, targetRgb, ratio) {
+  const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
+  return baseRgb.map((c, i) => clamp(c + (targetRgb[i] - c) * ratio));
+}
+
+export function getGradientBackground(color, mode = "light") {
+  const rgb = getRgbCached(color);
+  if (!rgb) return color;
+
+  const baseColorIsLight = isColorLight(color);
+
+  // Light mode -> slightly lighten.
+  // Dark mode -> slightly darken.
+  const target =
+    mode === "dark"
+      ? (baseColorIsLight ? [40, 40, 40] : [18, 18, 18])
+      : [255, 255, 255];
+
+  const stops = GRADIENT_STOPS.map((ratio) => {
+    let mixRatio = ratio;
+
+    if (mode === "light") {
+      // Don't wash out the color.
+      if (baseColorIsLight) {
+        mixRatio *= 0.35;
+      } else {
+        mixRatio *= 0.55;
+      }
+    }
+
+    const [r, g, b] = mixColor(rgb, target, mixRatio);
+
+    return `rgb(${r}, ${g}, ${b})`;
+  });
 
-  // Calculate brightness (luminance)
-  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return `linear-gradient(
+    150deg,
+    ${stops[0]} 0%,
+    ${stops[1]} 50%,
+    ${stops[2]} 100%
+  )`;
+}
 
-  // Return true if the color is light, otherwise false
-  return brightness > 128;
+// Returns the color as an `rgba(...)` string at the given opacity.
+// Useful for soft tints / badges that follow the theme without hardcoding.
+export function withAlpha(color, alpha) {
+  if (color === null || color === undefined) return color;
+  const rgb = getRgbCached(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  const a = Math.max(0, Math.min(1, Number(alpha) || 0));
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
 }
\ No newline at end of file