From 737bbf9344de2f46581576845dd1ae20bdb3d485 Mon Sep 17 00:00:00 2001
From: Rustico77 <tchaklidjirustico@gmail.com>
Date: Wed, 15 Apr 2026 15:07:31 +0000
Subject: [PATCH 1/3] init

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4d231cb..4b030b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "contexta-fe",
+  "name": "contexta_fe",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "contexta-fe",
+      "name": "contexta_fe",
       "version": "0.0.0",
       "dependencies": {
         "@tanstack/react-query": "^5.90.21",

From 3c4317b576be616b150d89808d8d49645d442026 Mon Sep 17 00:00:00 2001
From: Rustico77 <tchaklidjirustico@gmail.com>
Date: Wed, 15 Apr 2026 18:20:33 +0000
Subject: [PATCH 2/3] update dashboard max-width, create chatbot

---
 src/App.css                      |    4 +-
 src/components/Layout.tsx        |    9 +-
 src/pages/AuthPages.tsx          |    2 +-
 src/pages/ChatbotBuilderPage.tsx | 1322 +++++++++++++++++++-----------
 src/pages/DashboardPage.tsx      |    4 +-
 src/pages/ForgotPasswordPage.tsx |    2 +-
 6 files changed, 841 insertions(+), 502 deletions(-)

diff --git a/src/App.css b/src/App.css
index b9d355d..38a140b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,7 @@
 #root {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
-  padding: 2rem;
+  padding-inline: 1rem;
   text-align: center;
 }
 
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 07357b4..18714d5 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -9,6 +9,7 @@ import {
   LogOut, Menu, Sparkles, BarChart3, Mail, Users,
   Shield, X, CalendarDays, Megaphone,
 } from 'lucide-react'
+import { Divider } from './ui'
 
 const NAV_ITEMS = [
   { label: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
@@ -36,7 +37,7 @@ export const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children })
   const initial = user?.email?.charAt(0).toUpperCase() || '?'
 
   return (
-    <div className="flex h-screen bg-gray-50 overflow-hidden">
+    <div className="flex h-screen bg-gray-50 overflow-hidden shadow-2xl">
       {/* Mobile backdrop */}
       {sidebarOpen && (
         <div
@@ -69,7 +70,7 @@ export const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children })
         </div>
 
         {/* Nav */}
-        <nav className="flex-1 px-3 py-3 space-y-0.5 overflow-y-auto">
+        <nav className="flex-1 px-3 py-3 space-y-4 overflow-y-auto">
           {NAV_ITEMS.map(({ label, href, icon: Icon }) => {
             const active = location.pathname.startsWith(href)
             return (
@@ -78,7 +79,7 @@ export const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children })
                 to={href}
                 onClick={() => setSidebarOpen(false)}
                 className={cn(
-                  'group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium',
+                  'group flex items-center px-3 py-2.5 rounded-xl text-sm font-medium',
                   'transition-all duration-150',
                   active
                     ? 'bg-primary-50 text-primary-700'
@@ -86,7 +87,7 @@ export const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children })
                 )}
               >
                 <Icon className={cn(
-                  'w-4 h-4 shrink-0 transition-transform duration-150',
+                  'w-5 h-5 shrink-0 transition-transform duration-150',
                   active ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600',
                 )} />
                 <span className="flex-1">{label}</span>
diff --git a/src/pages/AuthPages.tsx b/src/pages/AuthPages.tsx
index aa254dd..a17b4f2 100644
--- a/src/pages/AuthPages.tsx
+++ b/src/pages/AuthPages.tsx
@@ -93,7 +93,7 @@ const IconInput: React.FC<{
   rightElement?: React.ReactNode
 }> = ({ label, icon, rightElement, ...inputProps }) => (
   <div className="flex flex-col gap-1.5">
-    <label className="text-sm font-medium text-gray-700">{label}</label>
+    <label className="text-sm text-left font-medium text-gray-700">{label}</label>
     <div className="relative">
       <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
         {icon}
diff --git a/src/pages/ChatbotBuilderPage.tsx b/src/pages/ChatbotBuilderPage.tsx
index a247734..7ff3148 100644
--- a/src/pages/ChatbotBuilderPage.tsx
+++ b/src/pages/ChatbotBuilderPage.tsx
@@ -1,81 +1,132 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { useParams, useNavigate, Link } from 'react-router-dom'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { chatbotsAPI, documentsAPI, modelsAPI, uploadAPI, urlSourcesAPI, leadsAPI, channelsAPI } from '@/services/api'
-import { useAuthStore } from '@/store/authStore'
-import { Button, Input, Textarea, Select, Card, Badge, StatusDot, Spinner } from '@/components/ui'
-import { CATEGORIES, INDUSTRIES, formatBytes, getFileIcon, cn } from '@/lib/utils'
-import { ChatInterface } from '@/components/ChatInterface'
-import { useDropzone } from 'react-dropzone'
-import type { ChatbotFormData, AvailableModel, UrlSource, ChannelConnection } from '@/types'
-import { CHATBOT_TEMPLATES } from '@/data/templates'
+import React, { useState, useEffect, useCallback } from "react";
+import { useParams, useNavigate, Link } from "react-router-dom";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import {
-  ArrowLeft, Save, Eye, Upload, Trash2, FileText,
-  Sliders, AlertCircle, CheckCircle,
-  ChevronDown, ChevronRight, Settings2, ImagePlus, X,
-  Link2, Copy, Globe, Webhook, Share2, Code, MessageSquare, Calendar
-} from 'lucide-react'
+  chatbotsAPI,
+  documentsAPI,
+  modelsAPI,
+  uploadAPI,
+  urlSourcesAPI,
+  leadsAPI,
+  channelsAPI,
+} from "@/services/api";
+import { useAuthStore } from "@/store/authStore";
+import {
+  Button,
+  Input,
+  Textarea,
+  Select,
+  Card,
+  Badge,
+  StatusDot,
+  Spinner,
+} from "@/components/ui";
+import {
+  CATEGORIES,
+  INDUSTRIES,
+  formatBytes,
+  getFileIcon,
+  cn,
+} from "@/lib/utils";
+import { ChatInterface } from "@/components/ChatInterface";
+import { useDropzone } from "react-dropzone";
+import type {
+  ChatbotFormData,
+  AvailableModel,
+  UrlSource,
+  ChannelConnection,
+} from "@/types";
+import { CHATBOT_TEMPLATES } from "@/data/templates";
+import {
+  ArrowLeft,
+  Save,
+  Eye,
+  Upload,
+  Trash2,
+  FileText,
+  Sliders,
+  AlertCircle,
+  CheckCircle,
+  ChevronDown,
+  ChevronRight,
+  Settings2,
+  ImagePlus,
+  X,
+  Link2,
+  Copy,
+  Globe,
+  Webhook,
+  Share2,
+  Code,
+  MessageSquare,
+  Calendar,
+} from "lucide-react";
 
 const DEFAULT_FORM: ChatbotFormData = {
-  name: '',
-  description: '',
-  system_prompt: '',
-  model: 'accounts/fireworks/models/kimi-k2-instruct-0905',
+  name: "",
+  description: "",
+  system_prompt: "",
+  model: "accounts/fireworks/models/kimi-k2-instruct-0905",
   temperature: 0.7,
   max_tokens: 1000,
-  primary_color: '#6366f1',
-  welcome_message: 'Hello! How can I help you today?',
-  logo_url: '',
-  category: '',
-  industry: '',
-  languages: ['en'],
+  primary_color: "#6366f1",
+  welcome_message: "Hello! How can I help you today?",
+  logo_url: "",
+  category: "",
+  industry: "",
+  languages: ["en"],
   show_branding: true,
   lead_capture_enabled: false,
-  lead_capture_fields: ['email'],
-  lead_capture_trigger: 'after_first_message',
+  lead_capture_fields: ["email"],
+  lead_capture_trigger: "after_first_message",
   handoff_enabled: false,
   handoff_message: "I'll connect you with our team. Please wait.",
-  handoff_email: '',
-  handoff_keywords: ['human', 'agent', 'speak to someone'],
+  handoff_email: "",
+  handoff_keywords: ["human", "agent", "speak to someone"],
   booking_enabled: false,
-}
+};
 
-type Tab = 'settings' | 'documents' | 'preview' | 'deploy'
+type Tab = "settings" | "documents" | "preview" | "deploy";
 
 export const ChatbotBuilderPage: React.FC = () => {
-  const { id } = useParams<{ id: string }>()
-  const isNew = !id || id === 'new'
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
-  const { user } = useAuthStore()
-  const [tab, setTab] = useState<Tab>('settings')
-  const [form, setForm] = useState<ChatbotFormData>(DEFAULT_FORM)
-  const [showTemplatePicker, setShowTemplatePicker] = useState(isNew)
-  const [toast, setToast] = useState<{ msg: string; type: 'success' | 'error' } | null>(null)
-  const [chatbotId, setChatbotId] = useState<string | null>(isNew ? null : id || null)
+  const { id } = useParams<{ id: string }>();
+  const isNew = !id || id === "new";
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { user } = useAuthStore();
+  const [tab, setTab] = useState<Tab>("settings");
+  const [form, setForm] = useState<ChatbotFormData>(DEFAULT_FORM);
+  const [showTemplatePicker, setShowTemplatePicker] = useState(isNew);
+  const [toast, setToast] = useState<{
+    msg: string;
+    type: "success" | "error";
+  } | null>(null);
+  const [chatbotId, setChatbotId] = useState<string | null>(
+    isNew ? null : id || null,
+  );
 
   // Load existing chatbot
   const { data: existingChatbot, isLoading: loadingChatbot } = useQuery({
-    queryKey: ['chatbot', id],
+    queryKey: ["chatbot", id],
     queryFn: () => chatbotsAPI.get(id!),
     enabled: !isNew,
-  })
+  });
 
   useEffect(() => {
     if (existingChatbot) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setForm({
         name: existingChatbot.name,
-        description: existingChatbot.description || '',
-        system_prompt: existingChatbot.system_prompt || '',
+        description: existingChatbot.description || "",
+        system_prompt: existingChatbot.system_prompt || "",
         model: existingChatbot.model,
         temperature: existingChatbot.temperature,
         max_tokens: existingChatbot.max_tokens,
         primary_color: existingChatbot.primary_color,
         welcome_message: existingChatbot.welcome_message,
-        logo_url: existingChatbot.logo_url || '',
-        category: existingChatbot.category || '',
-        industry: existingChatbot.industry || '',
+        logo_url: existingChatbot.logo_url || "",
+        category: existingChatbot.category || "",
+        industry: existingChatbot.industry || "",
         languages: existingChatbot.languages,
         show_branding: existingChatbot.show_branding,
         lead_capture_enabled: existingChatbot.lead_capture_enabled,
@@ -83,48 +134,54 @@ export const ChatbotBuilderPage: React.FC = () => {
         lead_capture_trigger: existingChatbot.lead_capture_trigger,
         handoff_enabled: existingChatbot.handoff_enabled,
         handoff_message: existingChatbot.handoff_message,
-        handoff_email: existingChatbot.handoff_email || '',
+        handoff_email: existingChatbot.handoff_email || "",
         handoff_keywords: existingChatbot.handoff_keywords,
         booking_enabled: existingChatbot.booking_enabled ?? false,
-      })
-      setChatbotId(existingChatbot.id)
+      });
+      setChatbotId(existingChatbot.id);
     }
-  }, [existingChatbot])
+  }, [existingChatbot]);
 
   const createMutation = useMutation({
     mutationFn: chatbotsAPI.create,
     onSuccess: (data) => {
-      setChatbotId(data.id)
-      queryClient.invalidateQueries({ queryKey: ['chatbots'] })
-      navigate(`/chatbots/${data.id}/edit`, { replace: true })
-      showToast('Chatbot created!', 'success')
+      setChatbotId(data.id);
+      queryClient.invalidateQueries({ queryKey: ["chatbots"] });
+      navigate(`/chatbots/${data.id}/edit`, { replace: true });
+      showToast("Chatbot created!", "success");
     },
-    onError: (err: { response?: { data?: { detail?: string } } }) => showToast(err.response?.data?.detail || 'Failed to create', 'error'),
-  })
+    onError: (err: { response?: { data?: { detail?: string } } }) =>
+      showToast(err.response?.data?.detail || "Failed to create", "error"),
+  });
 
   const updateMutation = useMutation({
-    mutationFn: (data: Partial<ChatbotFormData>) => chatbotsAPI.update(chatbotId!, data),
+    mutationFn: (data: Partial<ChatbotFormData>) =>
+      chatbotsAPI.update(chatbotId!, data),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['chatbot', chatbotId] })
-      queryClient.invalidateQueries({ queryKey: ['chatbots'] })
-      showToast('Settings saved!', 'success')
+      queryClient.invalidateQueries({ queryKey: ["chatbot", chatbotId] });
+      queryClient.invalidateQueries({ queryKey: ["chatbots"] });
+      showToast("Settings saved!", "success");
     },
-    onError: (err: { response?: { data?: { detail?: string } } }) => showToast(err.response?.data?.detail || 'Save failed', 'error'),
-  })
+    onError: (err: { response?: { data?: { detail?: string } } }) =>
+      showToast(err.response?.data?.detail || "Save failed", "error"),
+  });
 
   const handleSave = () => {
-    if (!form.name.trim()) { showToast('Chatbot name is required', 'error'); return }
-    if (isNew || !chatbotId) {
-      createMutation.mutate(form)
-    } else {
-      updateMutation.mutate(form)
+    if (!form.name.trim()) {
+      showToast("Chatbot name is required", "error");
+      return;
     }
-  }
+    if (isNew || !chatbotId) {
+      createMutation.mutate(form);
+    } else {
+      updateMutation.mutate(form);
+    }
+  };
 
-  const showToast = (msg: string, type: 'success' | 'error') => {
-    setToast({ msg, type })
-    setTimeout(() => setToast(null), 3000)
-  }
+  const showToast = (msg: string, type: "success" | "error") => {
+    setToast({ msg, type });
+    setTimeout(() => setToast(null), 3000);
+  };
 
   if (loadingChatbot) {
     return (
@@ -134,12 +191,12 @@ export const ChatbotBuilderPage: React.FC = () => {
           <p className="text-sm text-gray-400">Loading chatbot…</p>
         </div>
       </div>
-    )
+    );
   }
 
   if (isNew && showTemplatePicker) {
     return (
-      <div className="flex flex-col h-full">
+      <div className="flex text-start flex-col h-full">
         {/* Template picker header */}
         <div className="flex items-center gap-4 px-6 py-4 bg-white border-b border-gray-200 shadow-sm">
           <Link
@@ -149,61 +206,69 @@ export const ChatbotBuilderPage: React.FC = () => {
             <ArrowLeft className="w-4 h-4" />
           </Link>
           <div className="flex-1">
-            <h1 className="font-semibold text-gray-900 text-sm">Choose a template</h1>
-            <p className="text-xs text-gray-400">Start from a template or build from scratch</p>
+            <h1 className="font-semibold text-gray-900 text-lg">
+              Choose a template
+            </h1>
+            <p className="text-xs text-gray-400">
+              Start from a template or build from scratch
+            </p>
           </div>
         </div>
 
-        <div className="flex-1 overflow-y-auto bg-gray-50/50">
-          <div className="max-w-3xl mx-auto p-6">
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
-              {CHATBOT_TEMPLATES.map(template => (
-                <button
-                  key={template.id}
-                  onClick={() => {
-                    setForm(prev => ({
-                      ...prev,
-                      name: template.name,
-                      description: template.description,
-                      system_prompt: template.system_prompt,
-                      welcome_message: template.welcome_message,
-                      category: template.category,
-                      industry: template.industry,
-                      lead_capture_enabled: template.lead_capture_enabled,
-                    }))
-                    setShowTemplatePicker(false)
-                  }}
-                  className="text-left p-5 border-2 border-gray-200 rounded-xl bg-white hover:border-primary-400 hover:bg-primary-50/50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 group"
-                >
-                  <div className="text-2xl mb-3">{template.icon}</div>
-                  <h3 className="font-semibold text-gray-900 text-sm group-hover:text-primary-700 transition-colors">
-                    {template.name}
-                  </h3>
-                  <p className="text-xs text-gray-500 mt-1 leading-relaxed">{template.description}</p>
-                </button>
-              ))}
+        <Card className="p-5">
+          <div className="flex-1 overflow-y-auto bg-gray-50/50">
+            <div className="max-w-8xl mx-auto p-6">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
+                {CHATBOT_TEMPLATES.map((template) => (
+                  <button
+                    key={template.id}
+                    onClick={() => {
+                      setForm((prev) => ({
+                        ...prev,
+                        name: template.name,
+                        description: template.description,
+                        system_prompt: template.system_prompt,
+                        welcome_message: template.welcome_message,
+                        category: template.category,
+                        industry: template.industry,
+                        lead_capture_enabled: template.lead_capture_enabled,
+                      }));
+                      setShowTemplatePicker(false);
+                    }}
+                    className="text-left p-5 border-2 border-gray-200 rounded-xl bg-white hover:border-primary-400 hover:bg-primary-50/50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 group"
+                  >
+                    <div className="text-2xl mb-3">{template.icon}</div>
+                    <h3 className="font-semibold text-gray-900 text-sm group-hover:text-primary-700 transition-colors">
+                      {template.name}
+                    </h3>
+                    <p className="text-xs text-gray-500 mt-1 leading-relaxed">
+                      {template.description}
+                    </p>
+                  </button>
+                ))}
+              </div>
+              <button
+                onClick={() => setShowTemplatePicker(false)}
+                className="w-full mt-5 py-3.5 border-2 border-dashed border-gray-300 rounded-xl text-sm text-gray-500 hover:border-primary-300 hover:text-primary-600 hover:bg-primary-50/30 transition-all duration-200"
+              >
+                Start from scratch
+              </button>
             </div>
-            <button
-              onClick={() => setShowTemplatePicker(false)}
-              className="w-full py-3.5 border-2 border-dashed border-gray-300 rounded-xl text-sm text-gray-500 hover:border-primary-300 hover:text-primary-600 hover:bg-primary-50/30 transition-all duration-200"
-            >
-              Start from scratch
-            </button>
           </div>
-        </div>
+        </Card>
       </div>
-    )
+    );
   }
 
   const TABS: { key: Tab; label: string; icon: React.ElementType }[] = [
-    { key: 'settings', label: 'Settings', icon: Sliders },
-    { key: 'documents', label: 'Documents', icon: FileText },
-    { key: 'preview', label: 'Preview', icon: Eye },
-    { key: 'deploy', label: 'Deploy', icon: Share2 },
-  ]
+    { key: "settings", label: "Settings", icon: Sliders },
+    { key: "documents", label: "Documents", icon: FileText },
+    { key: "preview", label: "Preview", icon: Eye },
+    { key: "deploy", label: "Deploy", icon: Share2 },
+  ];
 
   return (
-    <div className="flex flex-col h-full bg-gray-50/30">
+    <div className="flex text-start flex-col h-full bg-gray-50/30">
       {/* Top bar */}
       <div className="flex items-center gap-3 px-4 sm:px-6 py-3 bg-white border-b border-gray-200 shadow-sm">
         <Link
@@ -215,8 +280,8 @@ export const ChatbotBuilderPage: React.FC = () => {
 
         {/* Chatbot name + status */}
         <div className="flex-1 min-w-0">
-          <h1 className="font-semibold text-gray-900 text-sm truncate">
-            {isNew ? 'Create Chatbot' : (form.name || 'Untitled Chatbot')}
+          <h1 className="font-semibold text-gray-900 text-lg truncate">
+            {isNew ? "Create Chatbot" : form.name || "Untitled Chatbot"}
           </h1>
           {!isNew && existingChatbot && (
             <p className="text-xs text-gray-400">
@@ -231,27 +296,26 @@ export const ChatbotBuilderPage: React.FC = () => {
 
         <Button
           variant="primary"
-          size="sm"
           onClick={handleSave}
           loading={createMutation.isPending || updateMutation.isPending}
           className="flex-shrink-0"
         >
-          <Save className="w-3.5 h-3.5" />
-          {isNew ? 'Create' : 'Save'}
+          <Save className="w-4.5 h-4.5" />
+          {isNew ? "Create" : "Save"}
         </Button>
       </div>
 
       {/* Pill tab switcher */}
-      <div className="px-4 sm:px-6 py-3 bg-white border-b border-gray-200">
-        <div className="inline-flex bg-gray-100 rounded-xl p-1 gap-0.5 overflow-x-auto max-w-full">
-          {TABS.map(t => (
+      <div className="px-4 sm:px-6 py-3 bg-white border-b text-center border-gray-200 overflow-x-auto w-full">
+        <div className="inline-flex bg-gray-100 rounded-xl justify-center p-1 gap-10">
+          {TABS.map((t) => (
             <button
               key={t.key}
               onClick={() => setTab(t.key)}
               className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 whitespace-nowrap ${
                 tab === t.key
-                  ? 'bg-white text-primary-700 shadow-sm'
-                  : 'text-gray-500 hover:text-gray-700 hover:bg-white/60'
+                  ? "bg-white text-primary-700 shadow-sm"
+                  : "text-gray-500 hover:text-gray-700 hover:bg-white/60"
               }`}
             >
               <t.icon className="w-3.5 h-3.5" />
@@ -264,26 +328,28 @@ export const ChatbotBuilderPage: React.FC = () => {
       {/* Tab content with fade transition */}
       <div className="flex-1 overflow-y-auto">
         <div key={tab} className="animate-fade-in p-4 sm:p-6">
-          {tab === 'settings' && (
+          {tab === "settings" && (
             <SettingsTab
               form={form}
               setForm={setForm}
-              userPlan={user?.plan || 'free'}
+              userPlan={user?.plan || "free"}
             />
           )}
-          {tab === 'documents' && chatbotId && <DocumentsTab chatbotId={chatbotId} />}
-          {tab === 'documents' && !chatbotId && (
+          {tab === "documents" && chatbotId && (
+            <DocumentsTab chatbotId={chatbotId} />
+          )}
+          {tab === "documents" && !chatbotId && (
             <SaveFirstPrompt
               icon={<FileText className="w-7 h-7 text-amber-500" />}
               message="Save your chatbot first to upload documents."
               accent="amber"
             />
           )}
-          {tab === 'preview' && chatbotId && (
+          {tab === "preview" && chatbotId && (
             <div className="h-[calc(100vh-220px)] min-h-[400px] max-h-[700px] rounded-2xl overflow-hidden border border-gray-200 shadow-sm">
               <ChatInterface
                 chatbotId={chatbotId}
-                chatbotName={form.name || 'Preview'}
+                chatbotName={form.name || "Preview"}
                 welcomeMessage={form.welcome_message}
                 primaryColor={form.primary_color}
                 logoUrl={form.logo_url}
@@ -291,14 +357,14 @@ export const ChatbotBuilderPage: React.FC = () => {
               />
             </div>
           )}
-          {tab === 'preview' && !chatbotId && (
+          {tab === "preview" && !chatbotId && (
             <SaveFirstPrompt
               icon={<Eye className="w-7 h-7 text-gray-400" />}
               message="Save your chatbot first to preview it."
               accent="gray"
             />
           )}
-          {tab === 'deploy' && chatbotId && (
+          {tab === "deploy" && chatbotId && (
             <DeployTab
               chatbotId={chatbotId}
               form={form}
@@ -306,7 +372,7 @@ export const ChatbotBuilderPage: React.FC = () => {
               isPublished={existingChatbot?.is_published || false}
             />
           )}
-          {tab === 'deploy' && !chatbotId && (
+          {tab === "deploy" && !chatbotId && (
             <SaveFirstPrompt
               icon={<Share2 className="w-7 h-7 text-gray-400" />}
               message="Save your chatbot first to access deployment options."
@@ -314,59 +380,82 @@ export const ChatbotBuilderPage: React.FC = () => {
             />
           )}
         </div>
+
+        <div className="lg:px-32 px-5">
+          <Button
+            variant="primary"
+            onClick={handleSave}
+            loading={createMutation.isPending || updateMutation.isPending}
+            className="flex-shrink-0 mb-10 mx-auto w-full"
+          >
+            <Save className="w-4.5 h-4.5" />
+            {isNew ? "Create" : "Save"}
+          </Button>
+        </div>
       </div>
 
       {/* Toast notification */}
       {toast && (
-        <div className={`fixed bottom-6 right-6 z-50 flex items-center gap-2.5 px-4 py-3 rounded-xl shadow-xl text-sm font-medium text-white animate-fade-in-up ${
-          toast.type === 'success' ? 'bg-green-600' : 'bg-red-600'
-        }`}>
-          {toast.type === 'success'
-            ? <CheckCircle className="w-4 h-4 flex-shrink-0" />
-            : <AlertCircle className="w-4 h-4 flex-shrink-0" />
-          }
+        <div
+          className={`fixed bottom-6 right-6 z-50 flex items-center gap-2.5 px-4 py-3 rounded-xl shadow-xl text-sm font-medium text-white animate-fade-in-up ${
+            toast.type === "success" ? "bg-green-600" : "bg-red-600"
+          }`}
+        >
+          {toast.type === "success" ? (
+            <CheckCircle className="w-4 h-4 flex-shrink-0" />
+          ) : (
+            <AlertCircle className="w-4 h-4 flex-shrink-0" />
+          )}
           {toast.msg}
         </div>
       )}
     </div>
-  )
-}
-
+  );
+};
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // SAVE FIRST PROMPT — shown when chatbot not yet saved
 // ═══════════════════════════════════════════════════════════════════════════════
 
 const SaveFirstPrompt: React.FC<{
-  icon: React.ReactNode
-  message: string
-  accent: 'amber' | 'gray'
+  icon: React.ReactNode;
+  message: string;
+  accent: "amber" | "gray";
 }> = ({ icon, message, accent }) => (
   <div className="max-w-2xl mx-auto">
-    <div className={`flex items-start gap-4 p-5 rounded-xl border ${
-      accent === 'amber'
-        ? 'bg-amber-50 border-amber-200'
-        : 'bg-gray-50 border-gray-200'
-    }`}>
+    <div
+      className={`flex items-start gap-4 p-5 rounded-xl border ${
+        accent === "amber"
+          ? "bg-amber-50 border-amber-200"
+          : "bg-gray-50 border-gray-200"
+      }`}
+    >
       <div className="flex-shrink-0 mt-0.5">{icon}</div>
       <div>
-        <p className={`text-sm font-medium ${accent === 'amber' ? 'text-amber-800' : 'text-gray-700'}`}>
+        <p
+          className={`text-sm font-medium ${accent === "amber" ? "text-amber-800" : "text-gray-700"}`}
+        >
           {message}
         </p>
-        <p className={`text-xs mt-1 ${accent === 'amber' ? 'text-amber-600' : 'text-gray-500'}`}>
+        <p
+          className={`text-xs mt-1 ${accent === "amber" ? "text-amber-600" : "text-gray-500"}`}
+        >
           Fill in the Settings tab and click Save to continue.
         </p>
       </div>
     </div>
   </div>
-)
-
+);
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // SECTION HEADER — reusable divider with title
 // ═══════════════════════════════════════════════════════════════════════════════
 
-const SectionHeader: React.FC<{ icon?: React.ReactNode; title: string; description?: string }> = ({ icon, title, description }) => (
+const SectionHeader: React.FC<{
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+}> = ({ icon, title, description }) => (
   <div className="flex items-start gap-2.5 mb-5">
     {icon && (
       <div className="w-8 h-8 rounded-lg bg-primary-50 flex items-center justify-center text-primary-600 flex-shrink-0 mt-0.5">
@@ -375,42 +464,44 @@ const SectionHeader: React.FC<{ icon?: React.ReactNode; title: string; descripti
     )}
     <div>
       <h2 className="font-semibold text-gray-900 text-sm">{title}</h2>
-      {description && <p className="text-xs text-gray-500 mt-0.5">{description}</p>}
+      {description && (
+        <p className="text-xs text-gray-500 mt-0.5">{description}</p>
+      )}
     </div>
   </div>
-)
-
+);
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // SETTINGS TAB
 // ═══════════════════════════════════════════════════════════════════════════════
 
 interface SettingsTabProps {
-  form: ChatbotFormData
-  setForm: React.Dispatch<React.SetStateAction<ChatbotFormData>>
-  userPlan: string
+  form: ChatbotFormData;
+  setForm: React.Dispatch<React.SetStateAction<ChatbotFormData>>;
+  userPlan: string;
 }
 
 const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
-  const [advancedOpen, setAdvancedOpen] = useState(false)
+  const [advancedOpen, setAdvancedOpen] = useState(false);
 
-  const set = <K extends keyof ChatbotFormData>(field: K) => (value: ChatbotFormData[K]) => {
-    setForm(prev => ({ ...prev, [field]: value }))
-  }
+  const set =
+    <K extends keyof ChatbotFormData>(field: K) =>
+    (value: ChatbotFormData[K]) => {
+      setForm((prev) => ({ ...prev, [field]: value }));
+    };
 
   // ── IMPROVEMENT #3: Load models dynamically from backend ──────────────────
   const { data: modelsData, isLoading: modelsLoading } = useQuery({
-    queryKey: ['available-models'],
+    queryKey: ["available-models"],
     queryFn: modelsAPI.available,
     staleTime: 5 * 60 * 1000, // cache for 5 minutes
-  })
+  });
 
-  const availableModels = modelsData?.models || []
-  const upgradeLabel = modelsData?.upgrade_label || null
+  const availableModels = modelsData?.models || [];
+  const upgradeLabel = modelsData?.upgrade_label || null;
 
   return (
-    <div className="max-w-2xl mx-auto space-y-5">
-
+    <div className="p-6 mx-auto space-y-5">
       {/* ── Basic Info ──────────────────────────────────────────────────────── */}
       <Card className="overflow-hidden">
         <div className="px-6 py-4 border-b border-gray-100 bg-gray-50/60">
@@ -424,27 +515,27 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
           <Input
             label="Chatbot Name"
             value={form.name}
-            onChange={e => set('name')(e.target.value)}
+            onChange={(e) => set("name")(e.target.value)}
             placeholder="e.g. Customer Support Bot"
           />
           <Textarea
             label="Description"
             value={form.description}
-            onChange={e => set('description')(e.target.value)}
+            onChange={(e) => set("description")(e.target.value)}
             placeholder="What does this chatbot do?"
             rows={2}
           />
           <Textarea
             label="Welcome Message"
             value={form.welcome_message}
-            onChange={e => set('welcome_message')(e.target.value)}
+            onChange={(e) => set("welcome_message")(e.target.value)}
             rows={2}
             hint="The first message visitors will see when opening the chat"
           />
           <Textarea
             label="System Prompt"
             value={form.system_prompt}
-            onChange={e => set('system_prompt')(e.target.value)}
+            onChange={(e) => set("system_prompt")(e.target.value)}
             placeholder="You are a helpful assistant for..."
             rows={3}
             hint="Custom instructions for the AI's behavior and personality (optional)"
@@ -464,33 +555,51 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
         <div className="p-6 space-y-5">
           {/* Logo upload */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1.5">Chatbot Logo</label>
-            <p className="text-xs text-gray-400 mb-2.5">Upload your company logo. It will appear in the chat header.</p>
-            <LogoUploader logoUrl={form.logo_url} onLogoChange={set('logo_url')} />
+            <label className="block text-sm font-medium text-gray-700 mb-1.5">
+              Chatbot Logo
+            </label>
+            <p className="text-xs text-gray-400 mb-2.5">
+              Upload your company logo. It will appear in the chat header.
+            </p>
+            <LogoUploader
+              logoUrl={form.logo_url}
+              onLogoChange={set("logo_url")}
+            />
           </div>
 
           <div className="border-t border-gray-100 pt-5">
-            <label className="block text-sm font-medium text-gray-700 mb-3">Brand Color</label>
+            <label className="block text-sm font-medium text-gray-700 mb-3">
+              Brand Color
+            </label>
             <div className="flex items-center gap-3 flex-wrap">
               <input
                 type="color"
                 value={form.primary_color}
-                onChange={e => set('primary_color')(e.target.value)}
+                onChange={(e) => set("primary_color")(e.target.value)}
                 className="w-10 h-10 rounded-lg border border-gray-200 cursor-pointer p-0.5 bg-white"
               />
               <Input
                 value={form.primary_color}
-                onChange={e => set('primary_color')(e.target.value)}
+                onChange={(e) => set("primary_color")(e.target.value)}
                 className="w-32"
               />
               <div className="flex items-center gap-2">
-                {['#6366f1', '#0ea5e9', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'].map(c => (
+                {[
+                  "#6366f1",
+                  "#0ea5e9",
+                  "#10b981",
+                  "#f59e0b",
+                  "#ef4444",
+                  "#8b5cf6",
+                ].map((c) => (
                   <button
                     key={c}
-                    onClick={() => set('primary_color')(c)}
+                    onClick={() => set("primary_color")(c)}
                     title={c}
                     className={`w-7 h-7 rounded-full border-2 shadow-sm hover:scale-110 transition-transform ${
-                      form.primary_color === c ? 'border-gray-800 scale-110' : 'border-white'
+                      form.primary_color === c
+                        ? "border-gray-800 scale-110"
+                        : "border-white"
                     }`}
                     style={{ background: c }}
                   />
@@ -505,7 +614,9 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
               >
                 <MessageSquare className="w-4 h-4" />
               </div>
-              <p className="text-xs text-gray-400">Preview of how the chat button will look</p>
+              <p className="text-xs text-gray-400">
+                Preview of how the chat button will look
+              </p>
             </div>
           </div>
         </div>
@@ -523,11 +634,17 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
               <Settings2 className="w-4 h-4" />
             </div>
             <div>
-              <p className="font-semibold text-gray-900 text-sm">Advanced Settings</p>
-              <p className="text-xs text-gray-400">AI model, temperature, response length</p>
+              <p className="font-semibold text-gray-900 text-sm">
+                Advanced Settings
+              </p>
+              <p className="text-xs text-gray-400">
+                AI model, temperature, response length
+              </p>
             </div>
           </div>
-          <div className={`transition-transform duration-200 ${advancedOpen ? 'rotate-180' : ''}`}>
+          <div
+            className={`transition-transform duration-200 ${advancedOpen ? "rotate-180" : ""}`}
+          >
             <ChevronDown className="w-4 h-4 text-gray-400" />
           </div>
         </button>
@@ -537,12 +654,16 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
             <div className="p-6 space-y-5">
               {/* AI Model Selection */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-3">AI Model</label>
+                <label className="block text-sm font-medium text-gray-700 mb-3">
+                  AI Model
+                </label>
 
                 {modelsLoading ? (
                   <div className="flex items-center gap-2.5 p-4 bg-gray-50 rounded-xl border border-gray-100">
                     <Spinner className="w-4 h-4 text-primary-600" />
-                    <span className="text-sm text-gray-500">Loading available models...</span>
+                    <span className="text-sm text-gray-500">
+                      Loading available models...
+                    </span>
                   </div>
                 ) : (
                   <div className="space-y-2">
@@ -551,8 +672,8 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
                         key={m.id}
                         className={`flex items-center gap-3 p-3.5 rounded-xl border cursor-pointer transition-all ${
                           form.model === m.id
-                            ? 'border-primary-400 bg-primary-50 shadow-sm'
-                            : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50/50'
+                            ? "border-primary-400 bg-primary-50 shadow-sm"
+                            : "border-gray-200 hover:border-gray-300 hover:bg-gray-50/50"
                         }`}
                       >
                         <input
@@ -560,7 +681,7 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
                           name="model"
                           value={m.id}
                           checked={form.model === m.id}
-                          onChange={() => set('model')(m.id)}
+                          onChange={() => set("model")(m.id)}
                           className="sr-only"
                         />
                         <div className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-xs font-bold text-gray-600 flex-shrink-0">
@@ -570,7 +691,9 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
                           <p className="text-sm font-medium text-gray-900">
                             {m.name}
                             {m.is_default && (
-                              <span className="ml-1.5 text-xs text-primary-600 font-normal">(default)</span>
+                              <span className="ml-1.5 text-xs text-primary-600 font-normal">
+                                (default)
+                              </span>
                             )}
                           </p>
                           <p className="text-xs text-gray-500">
@@ -578,11 +701,15 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
                             {m.description && ` · ${m.description}`}
                           </p>
                         </div>
-                        <Badge variant={
-                          m.badge === 'Powerful' ? 'purple'
-                            : m.badge === 'Free' ? 'default'
-                              : 'default'
-                        }>
+                        <Badge
+                          variant={
+                            m.badge === "Powerful"
+                              ? "purple"
+                              : m.badge === "Free"
+                                ? "default"
+                                : "default"
+                          }
+                        >
                           {m.badge}
                         </Badge>
                       </label>
@@ -591,10 +718,13 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
                     {availableModels.length === 0 && !modelsLoading && (
                       <div className="p-4 bg-amber-50 rounded-xl border border-amber-200 text-center">
                         <p className="text-sm text-amber-700">
-                          No models available on your current plan.{' '}
-                          <Link to="/pricing" className="text-primary-600 font-medium underline">
+                          No models available on your current plan.{" "}
+                          <Link
+                            to="/pricing"
+                            className="text-primary-600 font-medium underline"
+                          >
                             Upgrade
-                          </Link>{' '}
+                          </Link>{" "}
                           to access AI models.
                         </p>
                       </div>
@@ -603,8 +733,11 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
                     {upgradeLabel && (
                       <div className="p-3 bg-gray-50 rounded-xl border border-dashed border-gray-300 text-center">
                         <p className="text-xs text-gray-500">
-                          🔒{' '}
-                          <Link to="/pricing" className="text-primary-600 font-medium">
+                          🔒{" "}
+                          <Link
+                            to="/pricing"
+                            className="text-primary-600 font-medium"
+                          >
                             {upgradeLabel}
                           </Link>
                         </p>
@@ -616,12 +749,16 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
 
               {/* Temperature & Max Tokens */}
               <div className="border-t border-gray-100 pt-5">
-                <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-4">Response Parameters</p>
+                <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-4">
+                  Response Parameters
+                </p>
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-2">
                       Temperature
-                      <span className="ml-1.5 text-xs text-gray-400 font-normal">({form.temperature})</span>
+                      <span className="ml-1.5 text-xs text-gray-400 font-normal">
+                        ({form.temperature})
+                      </span>
                     </label>
                     <input
                       type="range"
@@ -629,7 +766,9 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
                       max="1"
                       step="0.1"
                       value={form.temperature}
-                      onChange={e => set('temperature')(parseFloat(e.target.value))}
+                      onChange={(e) =>
+                        set("temperature")(parseFloat(e.target.value))
+                      }
                       className="w-full accent-primary-600"
                     />
                     <div className="flex justify-between text-xs text-gray-400 mt-1">
@@ -641,7 +780,9 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
                     label="Max Tokens"
                     type="number"
                     value={form.max_tokens}
-                    onChange={e => set('max_tokens')(parseInt(e.target.value))}
+                    onChange={(e) =>
+                      set("max_tokens")(parseInt(e.target.value))
+                    }
                     min={100}
                     max={8000}
                     hint="Max response length"
@@ -666,70 +807,88 @@ const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm }) => {
             <Select
               label="Category"
               value={form.category}
-              onChange={e => set('category')(e.target.value)}
-              options={[{ value: '', label: 'Select category' }, ...CATEGORIES.map(c => ({ value: c, label: c }))]}
+              onChange={(e) => set("category")(e.target.value)}
+              options={[
+                { value: "", label: "Select category" },
+                ...CATEGORIES.map((c) => ({ value: c, label: c })),
+              ]}
             />
             <Select
               label="Industry"
               value={form.industry}
-              onChange={e => set('industry')(e.target.value)}
-              options={[{ value: '', label: 'Select industry' }, ...INDUSTRIES.map(i => ({ value: i, label: i }))]}
+              onChange={(e) => set("industry")(e.target.value)}
+              options={[
+                { value: "", label: "Select industry" },
+                ...INDUSTRIES.map((i) => ({ value: i, label: i })),
+              ]}
             />
           </div>
         </div>
       </Card>
     </div>
-  )
-}
-
+  );
+};
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // LOGO UPLOADER COMPONENT
 // ═══════════════════════════════════════════════════════════════════════════════
 
 interface LogoUploaderProps {
-  logoUrl: string
-  onLogoChange: (url: string) => void
+  logoUrl: string;
+  onLogoChange: (url: string) => void;
 }
 
-const LogoUploader: React.FC<LogoUploaderProps> = ({ logoUrl, onLogoChange }) => {
-  const [uploading, setUploading] = useState(false)
-  const [error, setError] = useState('')
+const LogoUploader: React.FC<LogoUploaderProps> = ({
+  logoUrl,
+  onLogoChange,
+}) => {
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState("");
 
-  const handleFile = useCallback(async (file: File) => {
-    setError('')
-    const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/svg+xml', 'image/webp']
-    if (!allowedTypes.includes(file.type)) {
-      setError('Please upload a PNG, JPG, GIF, SVG, or WebP image.')
-      return
-    }
-    if (file.size > 2 * 1024 * 1024) {
-      setError('Image must be under 2MB.')
-      return
-    }
-    setUploading(true)
-    try {
-      const result = await uploadAPI.logo(file)
-      onLogoChange(result.url)
-    } catch {
-      setError('Upload failed. Please try again.')
-    } finally {
-      setUploading(false)
-    }
-  }, [onLogoChange])
+  const handleFile = useCallback(
+    async (file: File) => {
+      setError("");
+      const allowedTypes = [
+        "image/png",
+        "image/jpeg",
+        "image/jpg",
+        "image/gif",
+        "image/svg+xml",
+        "image/webp",
+      ];
+      if (!allowedTypes.includes(file.type)) {
+        setError("Please upload a PNG, JPG, GIF, SVG, or WebP image.");
+        return;
+      }
+      if (file.size > 2 * 1024 * 1024) {
+        setError("Image must be under 2MB.");
+        return;
+      }
+      setUploading(true);
+      try {
+        const result = await uploadAPI.logo(file);
+        onLogoChange(result.url);
+      } catch {
+        setError("Upload failed. Please try again.");
+      } finally {
+        setUploading(false);
+      }
+    },
+    [onLogoChange],
+  );
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop: (files) => files[0] && handleFile(files[0]),
     accept: {
-      'image/png': ['.png'],
-      'image/jpeg': ['.jpg', '.jpeg'],
-      'image/gif': ['.gif'],
-      'image/svg+xml': ['.svg'],
-      'image/webp': ['.webp'],
+      "image/png": [".png"],
+      "image/jpeg": [".jpg", ".jpeg"],
+      "image/gif": [".gif"],
+      "image/svg+xml": [".svg"],
+      "image/webp": [".webp"],
     },
     maxFiles: 1,
     multiple: false,
-  })
+  });
 
   if (logoUrl) {
     return (
@@ -742,7 +901,7 @@ const LogoUploader: React.FC<LogoUploaderProps> = ({ logoUrl, onLogoChange }) =>
           />
           <button
             type="button"
-            onClick={() => onLogoChange('')}
+            onClick={() => onLogoChange("")}
             className="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-sm hover:bg-red-600"
           >
             <X className="w-3 h-3" />
@@ -752,14 +911,14 @@ const LogoUploader: React.FC<LogoUploaderProps> = ({ logoUrl, onLogoChange }) =>
           <p className="text-sm text-gray-700 font-medium">Logo uploaded</p>
           <button
             type="button"
-            onClick={() => onLogoChange('')}
+            onClick={() => onLogoChange("")}
             className="text-xs text-red-500 hover:text-red-600 mt-0.5 transition-colors"
           >
             Remove logo
           </button>
         </div>
       </div>
-    )
+    );
   }
 
   return (
@@ -768,8 +927,8 @@ const LogoUploader: React.FC<LogoUploaderProps> = ({ logoUrl, onLogoChange }) =>
         {...getRootProps()}
         className={`border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all duration-200 ${
           isDragActive
-            ? 'border-primary-400 bg-primary-50 scale-[1.01]'
-            : 'border-gray-300 hover:border-primary-300 hover:bg-gray-50 bg-gray-50/50'
+            ? "border-primary-400 bg-primary-50 scale-[1.01]"
+            : "border-gray-300 hover:border-primary-300 hover:bg-gray-50 bg-gray-50/50"
         }`}
       >
         <input {...getInputProps()} />
@@ -780,11 +939,17 @@ const LogoUploader: React.FC<LogoUploaderProps> = ({ logoUrl, onLogoChange }) =>
           </div>
         ) : (
           <>
-            <ImagePlus className={`w-8 h-8 mx-auto mb-2 transition-colors ${isDragActive ? 'text-primary-400' : 'text-gray-400'}`} />
+            <ImagePlus
+              className={`w-8 h-8 mx-auto mb-2 transition-colors ${isDragActive ? "text-primary-400" : "text-gray-400"}`}
+            />
             <p className="text-sm text-gray-600">
-              {isDragActive ? 'Drop your logo here' : 'Click or drag to upload a logo'}
+              {isDragActive
+                ? "Drop your logo here"
+                : "Click or drag to upload a logo"}
+            </p>
+            <p className="text-xs text-gray-400 mt-1">
+              PNG, JPG, SVG, or WebP · Max 2MB
             </p>
-            <p className="text-xs text-gray-400 mt-1">PNG, JPG, SVG, or WebP · Max 2MB</p>
           </>
         )}
       </div>
@@ -794,74 +959,82 @@ const LogoUploader: React.FC<LogoUploaderProps> = ({ logoUrl, onLogoChange }) =>
         </p>
       )}
     </div>
-  )
-}
-
+  );
+};
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // DOCUMENTS TAB
 // ═══════════════════════════════════════════════════════════════════════════════
 
 const DocumentsTab: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
-  const queryClient = useQueryClient()
-  const [uploading, setUploading] = useState(false)
-  const [uploadProgress, setUploadProgress] = useState(0)
-  const [toast, setToast] = useState('')
+  const queryClient = useQueryClient();
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [toast, setToast] = useState("");
 
   const { data: documents = [], isLoading } = useQuery({
-    queryKey: ['documents', chatbotId],
+    queryKey: ["documents", chatbotId],
     queryFn: () => documentsAPI.list(chatbotId),
     refetchInterval: (query) => {
-      const data = query.state.data
+      const data = query.state.data;
       if (data && Array.isArray(data)) {
-        const hasProcessing = data.some((d: { status: string }) => d.status === 'processing' || d.status === 'pending')
-        return hasProcessing ? 3000 : false
+        const hasProcessing = data.some(
+          (d: { status: string }) =>
+            d.status === "processing" || d.status === "pending",
+        );
+        return hasProcessing ? 3000 : false;
       }
-      return false
+      return false;
     },
-  })
+  });
 
   const deleteMutation = useMutation({
     mutationFn: (docId: string) => documentsAPI.delete(chatbotId, docId),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['documents', chatbotId] }),
-  })
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: ["documents", chatbotId] }),
+  });
 
   const handleUpload = async (files: File[]) => {
-    if (!files.length) return
-    setUploading(true)
-    setUploadProgress(0)
+    if (!files.length) return;
+    setUploading(true);
+    setUploadProgress(0);
 
     try {
       for (const file of files) {
-        await documentsAPI.upload(chatbotId, file, (pct) => setUploadProgress(pct))
+        await documentsAPI.upload(chatbotId, file, (pct) =>
+          setUploadProgress(pct),
+        );
       }
-      queryClient.invalidateQueries({ queryKey: ['documents', chatbotId] })
-      setToast('Documents uploaded successfully!')
-      setTimeout(() => setToast(''), 3000)
+      queryClient.invalidateQueries({ queryKey: ["documents", chatbotId] });
+      setToast("Documents uploaded successfully!");
+      setTimeout(() => setToast(""), 3000);
     } catch (err) {
-      const e = err as { response?: { data?: { detail?: string } } }
-      setToast(e.response?.data?.detail || 'Upload failed')
-      setTimeout(() => setToast(''), 3000)
+      const e = err as { response?: { data?: { detail?: string } } };
+      setToast(e.response?.data?.detail || "Upload failed");
+      setTimeout(() => setToast(""), 3000);
     } finally {
-      setUploading(false)
-      setUploadProgress(0)
+      setUploading(false);
+      setUploadProgress(0);
     }
-  }
+  };
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop: handleUpload,
     accept: {
-      'application/pdf': ['.pdf'],
-      'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
-      'text/csv': ['.csv'],
-      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
-      'text/plain': ['.txt'],
-      'text/markdown': ['.md'],
+      "application/pdf": [".pdf"],
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+        [".docx"],
+      "text/csv": [".csv"],
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [
+        ".xlsx",
+      ],
+      "text/plain": [".txt"],
+      "text/markdown": [".md"],
     },
-  })
+  });
 
   return (
-    <div className="max-w-2xl mx-auto space-y-5">
+    <div className="mx-auto space-y-5">
       {/* Upload dropzone */}
       <Card className="overflow-hidden">
         <div className="px-6 py-4 border-b border-gray-100 bg-gray-50/60">
@@ -876,16 +1049,22 @@ const DocumentsTab: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
             {...getRootProps()}
             className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all duration-200 ${
               isDragActive
-                ? 'border-primary-400 bg-primary-50 scale-[1.01]'
-                : 'border-gray-300 hover:border-primary-300 hover:bg-gray-50/80 bg-gray-50/40'
+                ? "border-primary-400 bg-primary-50 scale-[1.01]"
+                : "border-gray-300 hover:border-primary-300 hover:bg-gray-50/80 bg-gray-50/40"
             }`}
           >
             <input {...getInputProps()} />
-            <Upload className={`w-10 h-10 mx-auto mb-3 transition-colors ${isDragActive ? 'text-primary-400' : 'text-gray-300'}`} />
+            <Upload
+              className={`w-10 h-10 mx-auto mb-3 transition-colors ${isDragActive ? "text-primary-400" : "text-gray-300"}`}
+            />
             <p className="text-sm font-medium text-gray-600">
-              {isDragActive ? 'Drop files here' : 'Click or drag files to upload'}
+              {isDragActive
+                ? "Drop files here"
+                : "Click or drag files to upload"}
+            </p>
+            <p className="text-xs text-gray-400 mt-1">
+              PDF, DOCX, CSV, XLSX, TXT, MD
             </p>
-            <p className="text-xs text-gray-400 mt-1">PDF, DOCX, CSV, XLSX, TXT, MD</p>
           </div>
 
           {uploading && (
@@ -895,7 +1074,9 @@ const DocumentsTab: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
                   <Spinner className="w-3 h-3 text-primary-600" />
                   Uploading...
                 </span>
-                <span className="font-medium text-primary-600">{uploadProgress}%</span>
+                <span className="font-medium text-primary-600">
+                  {uploadProgress}%
+                </span>
               </div>
               <div className="w-full bg-gray-100 rounded-full h-1.5">
                 <div
@@ -921,37 +1102,67 @@ const DocumentsTab: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
           <div className="w-14 h-14 rounded-2xl bg-gray-100 flex items-center justify-center mb-3">
             <FileText className="w-7 h-7 text-gray-300" />
           </div>
-          <p className="text-sm font-medium text-gray-600 mb-1">No documents yet</p>
-          <p className="text-xs text-gray-400 max-w-xs">Upload files above to build your chatbot's knowledge base.</p>
+          <p className="text-sm font-medium text-gray-600 mb-1">
+            No documents yet
+          </p>
+          <p className="text-xs text-gray-400 max-w-xs">
+            Upload files above to build your chatbot's knowledge base.
+          </p>
         </div>
       ) : (
         <Card className="overflow-hidden">
           <div className="px-5 py-3 border-b border-gray-100 bg-gray-50/60 flex items-center justify-between">
             <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
-              {documents.length} document{documents.length !== 1 ? 's' : ''}
+              {documents.length} document{documents.length !== 1 ? "s" : ""}
             </p>
           </div>
           <div className="divide-y divide-gray-100">
-            {documents.map((doc: { id: string; file_name: string; file_type: string; file_size: number; chunk_count: number; status: string }) => (
-              <div key={doc.id} className="flex items-center gap-3 px-5 py-3.5 hover:bg-gray-50/60 transition-colors">
-                <span className="text-lg flex-shrink-0">{getFileIcon(doc.file_type)}</span>
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium text-gray-900 truncate">{doc.file_name}</p>
-                  <p className="text-xs text-gray-400">
-                    {formatBytes(doc.file_size)}
-                    {doc.chunk_count > 0 && ` · ${doc.chunk_count} chunks`}
-                  </p>
-                </div>
-                <StatusDot status={doc.status === 'completed' ? 'completed' : doc.status === 'failed' ? 'failed' : 'processing'} />
-                <span className="text-xs text-gray-400 capitalize hidden sm:block">{doc.status}</span>
-                <button
-                  onClick={() => deleteMutation.mutate(doc.id)}
-                  className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors flex-shrink-0"
+            {documents.map(
+              (doc: {
+                id: string;
+                file_name: string;
+                file_type: string;
+                file_size: number;
+                chunk_count: number;
+                status: string;
+              }) => (
+                <div
+                  key={doc.id}
+                  className="flex items-center gap-3 px-5 py-3.5 hover:bg-gray-50/60 transition-colors"
                 >
-                  <Trash2 className="w-4 h-4" />
-                </button>
-              </div>
-            ))}
+                  <span className="text-lg flex-shrink-0">
+                    {getFileIcon(doc.file_type)}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-gray-900 truncate">
+                      {doc.file_name}
+                    </p>
+                    <p className="text-xs text-gray-400">
+                      {formatBytes(doc.file_size)}
+                      {doc.chunk_count > 0 && ` · ${doc.chunk_count} chunks`}
+                    </p>
+                  </div>
+                  <StatusDot
+                    status={
+                      doc.status === "completed"
+                        ? "completed"
+                        : doc.status === "failed"
+                          ? "failed"
+                          : "processing"
+                    }
+                  />
+                  <span className="text-xs text-gray-400 capitalize hidden sm:block">
+                    {doc.status}
+                  </span>
+                  <button
+                    onClick={() => deleteMutation.mutate(doc.id)}
+                    className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors flex-shrink-0"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              ),
+            )}
           </div>
         </Card>
       )}
@@ -963,52 +1174,56 @@ const DocumentsTab: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
         </div>
       )}
     </div>
-  )
-}
-
+  );
+};
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // URL SOURCES SECTION
 // ═══════════════════════════════════════════════════════════════════════════════
 
 const UrlSourcesSection: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
-  const queryClient = useQueryClient()
-  const [urlInput, setUrlInput] = useState('')
-  const [adding, setAdding] = useState(false)
-  const [error, setError] = useState('')
+  const queryClient = useQueryClient();
+  const [urlInput, setUrlInput] = useState("");
+  const [adding, setAdding] = useState(false);
+  const [error, setError] = useState("");
 
   const { data: sources = [], isLoading } = useQuery<UrlSource[]>({
-    queryKey: ['url-sources', chatbotId],
+    queryKey: ["url-sources", chatbotId],
     queryFn: () => urlSourcesAPI.list(chatbotId),
     refetchInterval: (query) => {
-      const d = query.state.data
+      const d = query.state.data;
       if (d && Array.isArray(d)) {
-        return d.some((s: UrlSource) => s.status === 'pending' || s.status === 'processing') ? 3000 : false
+        return d.some(
+          (s: UrlSource) => s.status === "pending" || s.status === "processing",
+        )
+          ? 3000
+          : false;
       }
-      return false
+      return false;
     },
-  })
+  });
 
   const deleteMutation = useMutation({
     mutationFn: (sourceId: string) => urlSourcesAPI.delete(chatbotId, sourceId),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['url-sources', chatbotId] }),
-  })
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: ["url-sources", chatbotId] }),
+  });
 
   const handleAdd = async () => {
-    if (!urlInput.trim()) return
-    setError('')
-    setAdding(true)
+    if (!urlInput.trim()) return;
+    setError("");
+    setAdding(true);
     try {
-      await urlSourcesAPI.add(chatbotId, urlInput.trim())
-      setUrlInput('')
-      queryClient.invalidateQueries({ queryKey: ['url-sources', chatbotId] })
+      await urlSourcesAPI.add(chatbotId, urlInput.trim());
+      setUrlInput("");
+      queryClient.invalidateQueries({ queryKey: ["url-sources", chatbotId] });
     } catch (err) {
-      const e = err as { response?: { data?: { detail?: string } } }
-      setError(e.response?.data?.detail || 'Failed to add URL')
+      const e = err as { response?: { data?: { detail?: string } } };
+      setError(e.response?.data?.detail || "Failed to add URL");
     } finally {
-      setAdding(false)
+      setAdding(false);
     }
-  }
+  };
 
   return (
     <Card className="overflow-hidden">
@@ -1026,8 +1241,8 @@ const UrlSourcesSection: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
             <input
               type="url"
               value={urlInput}
-              onChange={e => setUrlInput(e.target.value)}
-              onKeyDown={e => e.key === 'Enter' && handleAdd()}
+              onChange={(e) => setUrlInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleAdd()}
               placeholder="https://example.com/docs"
               className="w-full pl-9 pr-3 border border-gray-200 rounded-lg py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-400 transition-colors"
             />
@@ -1037,7 +1252,7 @@ const UrlSourcesSection: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
             disabled={adding || !urlInput.trim()}
             className="px-4 py-2 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
           >
-            {adding ? <Spinner className="w-4 h-4 text-white" /> : 'Add URL'}
+            {adding ? <Spinner className="w-4 h-4 text-white" /> : "Add URL"}
           </button>
         </div>
 
@@ -1048,21 +1263,38 @@ const UrlSourcesSection: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
         )}
 
         {isLoading ? (
-          <div className="flex justify-center py-4"><Spinner className="text-primary-600" /></div>
+          <div className="flex justify-center py-4">
+            <Spinner className="text-primary-600" />
+          </div>
         ) : sources.length > 0 ? (
           <div className="divide-y divide-gray-100 border border-gray-200 rounded-xl overflow-hidden">
             {sources.map((src: UrlSource) => (
-              <div key={src.id} className="flex items-center gap-3 p-3 hover:bg-gray-50/60 transition-colors">
+              <div
+                key={src.id}
+                className="flex items-center gap-3 p-3 hover:bg-gray-50/60 transition-colors"
+              >
                 <Link2 className="w-4 h-4 text-gray-400 flex-shrink-0" />
                 <div className="flex-1 min-w-0">
                   <p className="text-xs font-medium text-gray-700 truncate">
                     {src.page_title || src.url}
                   </p>
-                  <p className="text-[10px] text-gray-400 truncate">{src.url}</p>
+                  <p className="text-[10px] text-gray-400 truncate">
+                    {src.url}
+                  </p>
                 </div>
-                <StatusDot status={src.status === 'completed' ? 'completed' : src.status === 'failed' ? 'failed' : 'processing'} />
+                <StatusDot
+                  status={
+                    src.status === "completed"
+                      ? "completed"
+                      : src.status === "failed"
+                        ? "failed"
+                        : "processing"
+                  }
+                />
                 {src.chunk_count > 0 && (
-                  <span className="text-[10px] text-gray-400 hidden sm:block">{src.chunk_count} chunks</span>
+                  <span className="text-[10px] text-gray-400 hidden sm:block">
+                    {src.chunk_count} chunks
+                  </span>
                 )}
                 <button
                   onClick={() => deleteMutation.mutate(src.id)}
@@ -1076,38 +1308,46 @@ const UrlSourcesSection: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
         ) : null}
       </div>
     </Card>
-  )
-}
-
+  );
+};
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // EMBED INSTRUCTIONS
 // ═══════════════════════════════════════════════════════════════════════════════
 
-const EMBED_TABS = ['HTML', 'React / Vue', 'Next.js', 'WordPress', 'Webflow', 'Shopify'] as const
-type EmbedTab = typeof EMBED_TABS[number]
+const EMBED_TABS = [
+  "HTML",
+  "React / Vue",
+  "Next.js",
+  "WordPress",
+  "Webflow",
+  "Shopify",
+] as const;
+type EmbedTab = (typeof EMBED_TABS)[number];
 
-const EmbedInstructions: React.FC<{ embedScript: string }> = ({ embedScript }) => {
-  const [tab, setTab] = useState<EmbedTab>('HTML')
-  const [copied, setCopied] = useState(false)
+const EmbedInstructions: React.FC<{ embedScript: string }> = ({
+  embedScript,
+}) => {
+  const [tab, setTab] = useState<EmbedTab>("HTML");
+  const [copied, setCopied] = useState(false);
 
   const copy = async (text: string) => {
-    await navigator.clipboard.writeText(text)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
 
   const instructions: Record<EmbedTab, { code: string; hint: string }> = {
-    'HTML': {
-      hint: 'Paste before the closing </body> tag in your HTML file.',
+    HTML: {
+      hint: "Paste before the closing </body> tag in your HTML file.",
       code: embedScript,
     },
-    'React / Vue': {
-      hint: 'Add to your index.html (in the public/ folder) before the closing </body> tag. The widget runs outside React/Vue\'s DOM tree — no component needed.',
+    "React / Vue": {
+      hint: "Add to your index.html (in the public/ folder) before the closing </body> tag. The widget runs outside React/Vue's DOM tree — no component needed.",
       code: embedScript,
     },
-    'Next.js': {
-      hint: 'Use the built-in Script component inside your root layout so it loads on every page.',
+    "Next.js": {
+      hint: "Use the built-in Script component inside your root layout so it loads on every page.",
       code: `// app/layout.tsx
 import Script from 'next/script'
 
@@ -1117,8 +1357,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body>
         {children}
         <Script
-          src="${embedScript.match(/src="([^"]+)"/)?.[1] ?? ''}"
-          data-chatbot="${embedScript.match(/data-chatbot="([^"]+)"/)?.[1] ?? ''}"
+          src="${embedScript.match(/src="([^"]+)"/)?.[1] ?? ""}"
+          data-chatbot="${embedScript.match(/data-chatbot="([^"]+)"/)?.[1] ?? ""}"
           strategy="afterInteractive"
         />
       </body>
@@ -1126,34 +1366,34 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   )
 }`,
     },
-    'WordPress': {
+    WordPress: {
       hint: 'Go to Appearance → Theme File Editor → footer.php and paste before </body>. Or use a plugin like "Insert Headers and Footers".',
       code: embedScript,
     },
-    'Webflow': {
-      hint: 'Go to Site Settings → Custom Code → Footer Code and paste the script there. Republish your site.',
+    Webflow: {
+      hint: "Go to Site Settings → Custom Code → Footer Code and paste the script there. Republish your site.",
       code: embedScript,
     },
-    'Shopify': {
-      hint: 'Go to Online Store → Themes → Edit code → layout/theme.liquid and paste before </body>.',
+    Shopify: {
+      hint: "Go to Online Store → Themes → Edit code → layout/theme.liquid and paste before </body>.",
       code: embedScript,
     },
-  }
+  };
 
-  const { code, hint } = instructions[tab]
+  const { code, hint } = instructions[tab];
 
   return (
     <div className="p-6 space-y-4">
       {/* Tabs */}
       <div className="flex flex-wrap gap-1.5 border-b border-gray-100 pb-4">
-        {EMBED_TABS.map(t => (
+        {EMBED_TABS.map((t) => (
           <button
             key={t}
             onClick={() => setTab(t)}
             className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
               tab === t
-                ? 'bg-primary-50 text-primary-700 border border-primary-200'
-                : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
+                ? "bg-primary-50 text-primary-700 border border-primary-200"
+                : "text-gray-500 hover:text-gray-700 hover:bg-gray-50"
             }`}
           >
             {t}
@@ -1174,49 +1414,58 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           className="absolute top-2.5 right-2.5 flex items-center gap-1.5 px-2.5 py-1.5 bg-white border border-gray-200 text-gray-500 rounded-lg text-xs hover:bg-gray-50 hover:text-gray-700 transition-colors shadow-sm"
         >
           {copied ? (
-            <><CheckCircle className="w-3 h-3 text-green-500" /> Copied</>
+            <>
+              <CheckCircle className="w-3 h-3 text-green-500" /> Copied
+            </>
           ) : (
-            <><Copy className="w-3 h-3" /> Copy</>
+            <>
+              <Copy className="w-3 h-3" /> Copy
+            </>
           )}
         </button>
       </div>
     </div>
-  )
-}
-
+  );
+};
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // DEPLOY TAB
 // ═══════════════════════════════════════════════════════════════════════════════
 
 interface DeployTabProps {
-  chatbotId: string
-  form: ChatbotFormData
-  setForm: React.Dispatch<React.SetStateAction<ChatbotFormData>>
-  isPublished: boolean
+  chatbotId: string;
+  form: ChatbotFormData;
+  setForm: React.Dispatch<React.SetStateAction<ChatbotFormData>>;
+  isPublished: boolean;
 }
 
-const DeployTab: React.FC<DeployTabProps> = ({ chatbotId, form, setForm, isPublished }) => {
-  const [copied, setCopied] = useState('')
-  const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:8000'
-  const appUrl = import.meta.env.VITE_APP_URL || 'http://localhost:5173'
+const DeployTab: React.FC<DeployTabProps> = ({
+  chatbotId,
+  form,
+  setForm,
+  isPublished,
+}) => {
+  const [copied, setCopied] = useState("");
+  const apiUrl = import.meta.env.VITE_API_URL || "http://localhost:8000";
+  const appUrl = import.meta.env.VITE_APP_URL || "http://localhost:5173";
 
-  const chatUrl = `${appUrl}/chat/${chatbotId}`
-  const embedScript = `<script src="${apiUrl}/widget.js" data-chatbot="${chatbotId}"></script>`
+  const chatUrl = `${appUrl}/chat/${chatbotId}`;
+  const embedScript = `<script src="${apiUrl}/widget.js" data-chatbot="${chatbotId}"></script>`;
 
   const copy = async (text: string, key: string) => {
-    await navigator.clipboard.writeText(text)
-    setCopied(key)
-    setTimeout(() => setCopied(''), 2000)
-  }
+    await navigator.clipboard.writeText(text);
+    setCopied(key);
+    setTimeout(() => setCopied(""), 2000);
+  };
 
-  const set = <K extends keyof ChatbotFormData>(field: K) => (value: ChatbotFormData[K]) => {
-    setForm(prev => ({ ...prev, [field]: value }))
-  }
+  const set =
+    <K extends keyof ChatbotFormData>(field: K) =>
+    (value: ChatbotFormData[K]) => {
+      setForm((prev) => ({ ...prev, [field]: value }));
+    };
 
   return (
     <div className="max-w-2xl mx-auto space-y-5">
-
       {/* ── Public Chat Link ─────────────────────────────────────────────────── */}
       <Card className="overflow-hidden">
         <div className="px-6 py-4 border-b border-gray-100 bg-gray-50/60">
@@ -1236,14 +1485,20 @@ const DeployTab: React.FC<DeployTabProps> = ({ chatbotId, form, setForm, isPubli
                   className="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm bg-gray-50 text-gray-700 font-mono truncate"
                 />
                 <button
-                  onClick={() => copy(chatUrl, 'chatUrl')}
+                  onClick={() => copy(chatUrl, "chatUrl")}
                   title="Copy link"
                   className="px-3 py-2 border border-gray-200 rounded-lg text-sm hover:bg-gray-50 transition-colors flex items-center gap-1.5 text-gray-600"
                 >
-                  {copied === 'chatUrl' ? (
-                    <><CheckCircle className="w-4 h-4 text-green-600" /> <span className="text-xs text-green-600">Copied</span></>
+                  {copied === "chatUrl" ? (
+                    <>
+                      <CheckCircle className="w-4 h-4 text-green-600" />{" "}
+                      <span className="text-xs text-green-600">Copied</span>
+                    </>
                   ) : (
-                    <><Copy className="w-4 h-4" /> <span className="text-xs">Copy</span></>
+                    <>
+                      <Copy className="w-4 h-4" />{" "}
+                      <span className="text-xs">Copy</span>
+                    </>
                   )}
                 </button>
                 <a
@@ -1261,7 +1516,8 @@ const DeployTab: React.FC<DeployTabProps> = ({ chatbotId, form, setForm, isPubli
             <div className="flex items-center gap-3 p-4 bg-amber-50 border border-amber-200 rounded-xl">
               <AlertCircle className="w-4 h-4 text-amber-500 flex-shrink-0" />
               <p className="text-sm text-amber-700">
-                Publish your chatbot in the Deploy settings to get a public chat link.
+                Publish your chatbot in the Deploy settings to get a public chat
+                link.
               </p>
             </div>
           )}
@@ -1301,43 +1557,62 @@ const DeployTab: React.FC<DeployTabProps> = ({ chatbotId, form, setForm, isPubli
         </div>
         <div className="p-6 space-y-4">
           <label className="flex items-center gap-3 cursor-pointer group">
-            <div className={`relative w-10 h-6 rounded-full transition-colors duration-200 ${form.lead_capture_enabled ? 'bg-primary-600' : 'bg-gray-200'}`}>
-              <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow-sm transition-all duration-200 ${form.lead_capture_enabled ? 'left-5' : 'left-1'}`} />
+            <div
+              className={`relative w-10 h-6 rounded-full transition-colors duration-200 ${form.lead_capture_enabled ? "bg-primary-600" : "bg-gray-200"}`}
+            >
+              <div
+                className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow-sm transition-all duration-200 ${form.lead_capture_enabled ? "left-5" : "left-1"}`}
+              />
               <input
                 type="checkbox"
                 checked={form.lead_capture_enabled}
-                onChange={e => set('lead_capture_enabled')(e.target.checked)}
+                onChange={(e) => set("lead_capture_enabled")(e.target.checked)}
                 className="sr-only"
               />
             </div>
             <div>
-              <span className="text-sm font-medium text-gray-700">Enable lead capture</span>
-              <p className="text-xs text-gray-400">Ask visitors for their contact info</p>
+              <span className="text-sm font-medium text-gray-700">
+                Enable lead capture
+              </span>
+              <p className="text-xs text-gray-400">
+                Ask visitors for their contact info
+              </p>
             </div>
           </label>
 
           {form.lead_capture_enabled && (
             <div className="space-y-4 pl-0 border-t border-gray-100 pt-4 animate-fade-in">
               <div>
-                <p className="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2.5">Collect fields</p>
+                <p className="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2.5">
+                  Collect fields
+                </p>
                 <div className="grid grid-cols-2 gap-2">
-                  {['email', 'name', 'phone', 'company'].map(field => (
-                    <label key={field} className="flex items-center gap-2.5 cursor-pointer p-2.5 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors">
+                  {["email", "name", "phone", "company"].map((field) => (
+                    <label
+                      key={field}
+                      className="flex items-center gap-2.5 cursor-pointer p-2.5 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
+                    >
                       <input
                         type="checkbox"
                         checked={form.lead_capture_fields.includes(field)}
-                        disabled={field === 'email'}
-                        onChange={e => {
+                        disabled={field === "email"}
+                        onChange={(e) => {
                           const fields = e.target.checked
                             ? [...form.lead_capture_fields, field]
-                            : form.lead_capture_fields.filter(f => f !== field)
-                          set('lead_capture_fields')(fields)
+                            : form.lead_capture_fields.filter(
+                                (f) => f !== field,
+                              );
+                          set("lead_capture_fields")(fields);
                         }}
                         className="w-3.5 h-3.5 rounded accent-primary-600"
                       />
                       <span className="text-sm text-gray-700 capitalize">
                         {field}
-                        {field === 'email' && <span className="text-xs text-gray-400 ml-1">(required)</span>}
+                        {field === "email" && (
+                          <span className="text-xs text-gray-400 ml-1">
+                            (required)
+                          </span>
+                        )}
                       </span>
                     </label>
                   ))}
@@ -1345,14 +1620,20 @@ const DeployTab: React.FC<DeployTabProps> = ({ chatbotId, form, setForm, isPubli
               </div>
 
               <div>
-                <p className="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2.5">When to show form</p>
+                <p className="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2.5">
+                  When to show form
+                </p>
                 <select
                   value={form.lead_capture_trigger}
-                  onChange={e => set('lead_capture_trigger')(e.target.value)}
+                  onChange={(e) => set("lead_capture_trigger")(e.target.value)}
                   className="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-400 bg-white transition-colors w-full sm:w-auto"
                 >
-                  <option value="after_first_message">After first message</option>
-                  <option value="before_first_message">Before first message</option>
+                  <option value="after_first_message">
+                    After first message
+                  </option>
+                  <option value="before_first_message">
+                    Before first message
+                  </option>
                 </select>
               </div>
             </div>
@@ -1370,28 +1651,38 @@ const DeployTab: React.FC<DeployTabProps> = ({ chatbotId, form, setForm, isPubli
         </div>
         <div className="p-6 space-y-4">
           <label className="flex items-center gap-3 cursor-pointer">
-            <div className={`relative w-10 h-6 rounded-full transition-colors duration-200 ${form.handoff_enabled ? 'bg-primary-600' : 'bg-gray-200'}`}>
-              <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow-sm transition-all duration-200 ${form.handoff_enabled ? 'left-5' : 'left-1'}`} />
+            <div
+              className={`relative w-10 h-6 rounded-full transition-colors duration-200 ${form.handoff_enabled ? "bg-primary-600" : "bg-gray-200"}`}
+            >
+              <div
+                className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow-sm transition-all duration-200 ${form.handoff_enabled ? "left-5" : "left-1"}`}
+              />
               <input
                 type="checkbox"
                 checked={form.handoff_enabled}
-                onChange={e => set('handoff_enabled')(e.target.checked)}
+                onChange={(e) => set("handoff_enabled")(e.target.checked)}
                 className="sr-only"
               />
             </div>
             <div>
-              <span className="text-sm font-medium text-gray-700">Enable human handoff</span>
-              <p className="text-xs text-gray-400">Triggered when user says "human", "agent", etc.</p>
+              <span className="text-sm font-medium text-gray-700">
+                Enable human handoff
+              </span>
+              <p className="text-xs text-gray-400">
+                Triggered when user says "human", "agent", etc.
+              </p>
             </div>
           </label>
 
           {form.handoff_enabled && (
             <div className="border-t border-gray-100 pt-4 space-y-3 animate-fade-in">
               <div>
-                <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2">Handoff message</label>
+                <label className="block text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2">
+                  Handoff message
+                </label>
                 <textarea
                   value={form.handoff_message}
-                  onChange={e => set('handoff_message')(e.target.value)}
+                  onChange={(e) => set("handoff_message")(e.target.value)}
                   rows={2}
                   className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-400 transition-colors"
                 />
@@ -1399,7 +1690,11 @@ const DeployTab: React.FC<DeployTabProps> = ({ chatbotId, form, setForm, isPubli
               <div className="flex items-start gap-2 p-3 bg-gray-50 rounded-lg">
                 <Webhook className="w-3.5 h-3.5 text-gray-400 mt-0.5 flex-shrink-0" />
                 <p className="text-xs text-gray-500">
-                  Configure the n8n webhook URL in your backend <code className="bg-gray-200 px-1 rounded">N8N_HANDOFF_WEBHOOK_URL</code> to receive notifications.
+                  Configure the n8n webhook URL in your backend{" "}
+                  <code className="bg-gray-200 px-1 rounded">
+                    N8N_HANDOFF_WEBHOOK_URL
+                  </code>{" "}
+                  to receive notifications.
                 </p>
               </div>
             </div>
@@ -1417,18 +1712,26 @@ const DeployTab: React.FC<DeployTabProps> = ({ chatbotId, form, setForm, isPubli
         </div>
         <div className="p-6">
           <label className="flex items-start gap-3 cursor-pointer">
-            <div className={`relative w-10 h-6 rounded-full transition-colors duration-200 mt-0.5 ${form.show_branding ? 'bg-primary-600' : 'bg-gray-200'}`}>
-              <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow-sm transition-all duration-200 ${form.show_branding ? 'left-5' : 'left-1'}`} />
+            <div
+              className={`relative w-10 h-6 rounded-full transition-colors duration-200 mt-0.5 ${form.show_branding ? "bg-primary-600" : "bg-gray-200"}`}
+            >
+              <div
+                className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow-sm transition-all duration-200 ${form.show_branding ? "left-5" : "left-1"}`}
+              />
               <input
                 type="checkbox"
                 checked={form.show_branding}
-                onChange={e => set('show_branding')(e.target.checked)}
+                onChange={(e) => set("show_branding")(e.target.checked)}
                 className="sr-only"
               />
             </div>
             <div>
-              <span className="text-sm font-medium text-gray-700">Show "Powered by Contexta"</span>
-              <p className="text-xs text-gray-400 mt-0.5">Remove branding by upgrading to Pro plan or above</p>
+              <span className="text-sm font-medium text-gray-700">
+                Show "Powered by Contexta"
+              </span>
+              <p className="text-xs text-gray-400 mt-0.5">
+                Remove branding by upgrading to Pro plan or above
+              </p>
             </div>
           </label>
         </div>
@@ -1449,30 +1752,37 @@ const DeployTab: React.FC<DeployTabProps> = ({ chatbotId, form, setForm, isPubli
         <div className="p-6 space-y-4">
           <label className="flex items-center justify-between gap-4 cursor-pointer">
             <div>
-              <span className="text-sm font-medium text-gray-700">Enable appointment booking</span>
+              <span className="text-sm font-medium text-gray-700">
+                Enable appointment booking
+              </span>
               <p className="text-xs text-gray-400 mt-0.5">
-                When enabled, the chatbot will guide users to your booking page and mention it in conversations.
+                When enabled, the chatbot will guide users to your booking page
+                and mention it in conversations.
               </p>
             </div>
             <button
               type="button"
-              onClick={() => set('booking_enabled')(!form.booking_enabled)}
+              onClick={() => set("booking_enabled")(!form.booking_enabled)}
               className={cn(
-                'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent',
-                'transition-colors duration-200 ease-in-out focus:outline-none',
-                form.booking_enabled ? 'bg-primary-600' : 'bg-gray-200'
+                "relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent",
+                "transition-colors duration-200 ease-in-out focus:outline-none",
+                form.booking_enabled ? "bg-primary-600" : "bg-gray-200",
               )}
             >
-              <span className={cn(
-                'pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
-                form.booking_enabled ? 'translate-x-4' : 'translate-x-0'
-              )} />
+              <span
+                className={cn(
+                  "pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
+                  form.booking_enabled ? "translate-x-4" : "translate-x-0",
+                )}
+              />
             </button>
           </label>
 
           {form.booking_enabled && (
             <div className="bg-primary-50 border border-primary-100 rounded-xl p-4 space-y-2">
-              <p className="text-xs font-semibold text-primary-800">Booking page URL:</p>
+              <p className="text-xs font-semibold text-primary-800">
+                Booking page URL:
+              </p>
               <div className="flex gap-2">
                 <input
                   readOnly
@@ -1480,59 +1790,69 @@ const DeployTab: React.FC<DeployTabProps> = ({ chatbotId, form, setForm, isPubli
                   className="flex-1 border border-primary-200 rounded-lg px-2.5 py-1.5 text-xs bg-white text-gray-700 font-mono truncate"
                 />
                 <button
-                  onClick={() => copy(`${appUrl}/book/${chatbotId}`, 'bookingUrl')}
+                  onClick={() =>
+                    copy(`${appUrl}/book/${chatbotId}`, "bookingUrl")
+                  }
                   className="px-2.5 py-1.5 border border-primary-200 rounded-lg text-xs hover:bg-primary-100 transition-colors flex items-center gap-1"
                 >
-                  {copied === 'bookingUrl' ? <CheckCircle className="w-3.5 h-3.5 text-green-600" /> : <Copy className="w-3.5 h-3.5" />}
+                  {copied === "bookingUrl" ? (
+                    <CheckCircle className="w-3.5 h-3.5 text-green-600" />
+                  ) : (
+                    <Copy className="w-3.5 h-3.5" />
+                  )}
                 </button>
               </div>
               <p className="text-xs text-primary-700">
-                Share this link on your website or social media. Set your available hours in the{' '}
-                <a href="/appointments" className="underline font-medium">Appointments page</a>.
+                Share this link on your website or social media. Set your
+                available hours in the{" "}
+                <a href="/appointments" className="underline font-medium">
+                  Appointments page
+                </a>
+                .
               </p>
             </div>
           )}
         </div>
       </Card>
     </div>
-  )
-}
-
+  );
+};
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // CHANNELS SECTION
 // ═══════════════════════════════════════════════════════════════════════════════
 
 const ChannelsSection: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
-  const queryClient = useQueryClient()
-  const [telegramToken, setTelegramToken] = useState('')
-  const [copiedKey, setCopiedKey] = useState('')
+  const queryClient = useQueryClient();
+  const [telegramToken, setTelegramToken] = useState("");
+  const [copiedKey, setCopiedKey] = useState("");
 
   const { data: channels = [], isLoading } = useQuery<ChannelConnection[]>({
-    queryKey: ['channels', chatbotId],
+    queryKey: ["channels", chatbotId],
     queryFn: () => channelsAPI.list(chatbotId),
-  })
+  });
 
-  const telegramConn = channels.find(c => c.channel === 'telegram')
+  const telegramConn = channels.find((c) => c.channel === "telegram");
 
   const connectTelegram = useMutation({
     mutationFn: () => channelsAPI.connectTelegram(chatbotId, telegramToken),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['channels', chatbotId] })
-      setTelegramToken('')
+      queryClient.invalidateQueries({ queryKey: ["channels", chatbotId] });
+      setTelegramToken("");
     },
-  })
+  });
 
   const disconnect = useMutation({
     mutationFn: (id: string) => channelsAPI.disconnect(id),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['channels', chatbotId] }),
-  })
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: ["channels", chatbotId] }),
+  });
 
   const copy = async (text: string, key: string) => {
-    await navigator.clipboard.writeText(text)
-    setCopiedKey(key)
-    setTimeout(() => setCopiedKey(''), 2000)
-  }
+    await navigator.clipboard.writeText(text);
+    setCopiedKey(key);
+    setTimeout(() => setCopiedKey(""), 2000);
+  };
 
   return (
     <Card className="overflow-hidden">
@@ -1560,7 +1880,7 @@ const ChannelsSection: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
           {isLoading ? null : telegramConn ? (
             <div className="bg-gray-50 rounded-xl p-4 space-y-2 border border-gray-200">
               <p className="text-sm text-gray-700">
-                Bot:{' '}
+                Bot:{" "}
                 <a
                   href={`https://t.me/${telegramConn.bot_username}`}
                   target="_blank"
@@ -1570,7 +1890,10 @@ const ChannelsSection: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
                   @{telegramConn.bot_username}
                 </a>
               </p>
-              <p className="text-xs text-gray-500">Share this bot link with your customers — they open it and start chatting.</p>
+              <p className="text-xs text-gray-500">
+                Share this bot link with your customers — they open it and start
+                chatting.
+              </p>
               <button
                 onClick={() => disconnect.mutate(telegramConn.id)}
                 disabled={disconnect.isPending}
@@ -1582,16 +1905,27 @@ const ChannelsSection: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
           ) : (
             <div className="space-y-3">
               <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 space-y-2">
-                <p className="text-xs font-semibold text-blue-800">How to create a Telegram bot (2 minutes):</p>
+                <p className="text-xs font-semibold text-blue-800">
+                  How to create a Telegram bot (2 minutes):
+                </p>
                 <ol className="list-decimal list-inside space-y-1 text-xs text-blue-700">
-                  <li>Open Telegram and search for <strong>@BotFather</strong></li>
-                  <li>Send <code className="bg-blue-100 px-1 rounded">/newbot</code></li>
+                  <li>
+                    Open Telegram and search for <strong>@BotFather</strong>
+                  </li>
+                  <li>
+                    Send{" "}
+                    <code className="bg-blue-100 px-1 rounded">/newbot</code>
+                  </li>
                   <li>Choose a name and username for your bot</li>
                   <li>BotFather will send you a token — copy it</li>
                   <li>Paste the token below and click Connect</li>
                 </ol>
                 <p className="text-xs text-blue-600">
-                  Once connected, share your bot link (e.g. <code className="bg-blue-100 px-1 rounded">t.me/YourBotName</code>) with customers.
+                  Once connected, share your bot link (e.g.{" "}
+                  <code className="bg-blue-100 px-1 rounded">
+                    t.me/YourBotName
+                  </code>
+                  ) with customers.
                 </p>
               </div>
               <div className="flex gap-2">
@@ -1599,7 +1933,7 @@ const ChannelsSection: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
                   type="password"
                   placeholder="Bot token from @BotFather"
                   value={telegramToken}
-                  onChange={e => setTelegramToken(e.target.value)}
+                  onChange={(e) => setTelegramToken(e.target.value)}
                   className="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-400 transition-colors"
                 />
                 <button
@@ -1607,20 +1941,24 @@ const ChannelsSection: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
                   disabled={!telegramToken.trim() || connectTelegram.isPending}
                   className="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium disabled:opacity-50 hover:bg-primary-700 transition-colors whitespace-nowrap"
                 >
-                  {connectTelegram.isPending ? <Spinner className="w-4 h-4 text-white" /> : 'Connect'}
+                  {connectTelegram.isPending ? (
+                    <Spinner className="w-4 h-4 text-white" />
+                  ) : (
+                    "Connect"
+                  )}
                 </button>
               </div>
               {connectTelegram.isError && (
                 <p className="text-xs text-red-600 flex items-center gap-1">
                   <AlertCircle className="w-3 h-3" />
-                  {(connectTelegram.error as any)?.response?.data?.detail || 'Failed to connect. Check your token.'}
+                  {(connectTelegram.error as any)?.response?.data?.detail ||
+                    "Failed to connect. Check your token."}
                 </p>
               )}
             </div>
           )}
         </div>
-
       </div>
     </Card>
-  )
-}
+  );
+};
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index 590ceb4..7887b87 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -57,11 +57,11 @@ export const DashboardPage: React.FC = () => {
   }
 
   return (
-    <div className="p-4 sm:p-6 max-w-7xl">
+    <div className="text-start p-4 sm:p-10 max-w-8xl">
       {/* Header */}
       <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 gap-3">
         <div>
-          <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">Dashboard</h1>
+          <h1 className="text-xl sm:text-4xl font-bold text-gray-900 tracking-tight">Dashboard</h1>
           <p className="text-sm text-gray-500 mt-0.5">
             {chatbots.length > 0
               ? `${chatbots.length} chatbot${chatbots.length !== 1 ? 's' : ''}`
diff --git a/src/pages/ForgotPasswordPage.tsx b/src/pages/ForgotPasswordPage.tsx
index 9d36e5f..38108f1 100644
--- a/src/pages/ForgotPasswordPage.tsx
+++ b/src/pages/ForgotPasswordPage.tsx
@@ -68,7 +68,7 @@ export const ForgotPasswordPage: React.FC = () => {
               <form onSubmit={handleSubmit} className="space-y-4">
                 {/* Email input with icon */}
                 <div className="flex flex-col gap-1.5">
-                  <label className="text-sm font-medium text-gray-700">Email address</label>
+                  <label className="text-sm text-left font-medium text-gray-700">Email address</label>
                   <div className="relative">
                     <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
                       <Mail className="w-4 h-4" />

From 8fd2a7d1b8f46b42d3da36a4e83a1e18b5ce4fed Mon Sep 17 00:00:00 2001
From: Rustico77 <tchaklidjirustico@gmail.com>
Date: Thu, 16 Apr 2026 12:28:00 +0000
Subject: [PATCH 3/3] amelioration V1 of dashboard all menu

---
 package-lock.json              | 480 +++++++++++++++++
 package.json                   |   4 +-
 src/App.css                    |   2 +-
 src/components/Layout.tsx      |   2 +-
 src/pages/AnalyticsPage.tsx    |   4 +-
 src/pages/AppointmentsPage.tsx |   2 +-
 src/pages/CampaignsPage.tsx    |   2 +-
 src/pages/LeadsPage.tsx        |   3 +-
 src/pages/MarketplacePage.tsx  | 959 ++++++++++++++++++---------------
 src/pages/SettingsPage.tsx     | 689 ++++++++++++++---------
 10 files changed, 1460 insertions(+), 687 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4b030b8..1d52648 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tanstack/react-query": "^5.90.21",
+        "@tsparticles/react": "^3.0.0",
         "axios": "^1.13.5",
         "clsx": "^2.1.1",
         "lucide-react": "^0.575.0",
@@ -17,6 +18,7 @@
         "react-dropzone": "^15.0.0",
         "react-router-dom": "^7.13.0",
         "tailwind-merge": "^3.5.0",
+        "tsparticles-slim": "^2.12.0",
         "zustand": "^5.0.11"
       },
       "devDependencies": {
@@ -1455,6 +1457,38 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tsparticles/engine": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.9.1.tgz",
+      "integrity": "sha512-DpdgAhWMZ3Eh2gyxik8FXS6BKZ8vyea+Eu5BC4epsahqTGY9V3JGGJcXC6lRJx6cPMAx1A0FaQAojPF3v6rkmQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "hasInstallScript": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@tsparticles/react": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/react/-/react-3.0.0.tgz",
+      "integrity": "sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==",
+      "peerDependencies": {
+        "@tsparticles/engine": "^3.0.2",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -4369,6 +4403,452 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tsparticles-basic": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-basic/-/tsparticles-basic-2.12.0.tgz",
+      "integrity": "sha512-pN6FBpL0UsIUXjYbiui5+IVsbIItbQGOlwyGV55g6IYJBgdTNXgFX0HRYZGE9ZZ9psEXqzqwLM37zvWnb5AG9g==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0",
+        "tsparticles-move-base": "^2.12.0",
+        "tsparticles-shape-circle": "^2.12.0",
+        "tsparticles-updater-color": "^2.12.0",
+        "tsparticles-updater-opacity": "^2.12.0",
+        "tsparticles-updater-out-modes": "^2.12.0",
+        "tsparticles-updater-size": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-engine": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.12.0.tgz",
+      "integrity": "sha512-ZjDIYex6jBJ4iMc9+z0uPe7SgBnmb6l+EJm83MPIsOny9lPpetMsnw/8YJ3xdxn8hV+S3myTpTN1CkOVmFv0QQ==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "hasInstallScript": true,
+      "license": "MIT"
+    },
+    "node_modules/tsparticles-interaction-external-attract": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-attract/-/tsparticles-interaction-external-attract-2.12.0.tgz",
+      "integrity": "sha512-0roC6D1QkFqMVomcMlTaBrNVjVOpyNzxIUsjMfshk2wUZDAvTNTuWQdUpmsLS4EeSTDN3rzlGNnIuuUQqyBU5w==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-bounce": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-bounce/-/tsparticles-interaction-external-bounce-2.12.0.tgz",
+      "integrity": "sha512-MMcqKLnQMJ30hubORtdq+4QMldQ3+gJu0bBYsQr9BsThsh8/V0xHc1iokZobqHYVP5tV77mbFBD8Z7iSCf0TMQ==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-bubble": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-bubble/-/tsparticles-interaction-external-bubble-2.12.0.tgz",
+      "integrity": "sha512-5kImCSCZlLNccXOHPIi2Yn+rQWTX3sEa/xCHwXW19uHxtILVJlnAweayc8+Zgmb7mo0DscBtWVFXHPxrVPFDUA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-connect": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-connect/-/tsparticles-interaction-external-connect-2.12.0.tgz",
+      "integrity": "sha512-ymzmFPXz6AaA1LAOL5Ihuy7YSQEW8MzuSJzbd0ES13U8XjiU3HlFqlH6WGT1KvXNw6WYoqrZt0T3fKxBW3/C3A==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-grab": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-grab/-/tsparticles-interaction-external-grab-2.12.0.tgz",
+      "integrity": "sha512-iQF/A947hSfDNqAjr49PRjyQaeRkYgTYpfNmAf+EfME8RsbapeP/BSyF6mTy0UAFC0hK2A2Hwgw72eT78yhXeQ==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-pause": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-pause/-/tsparticles-interaction-external-pause-2.12.0.tgz",
+      "integrity": "sha512-4SUikNpsFROHnRqniL+uX2E388YTtfRWqqqZxRhY0BrijH4z04Aii3YqaGhJxfrwDKkTQlIoM2GbFT552QZWjw==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-push": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-push/-/tsparticles-interaction-external-push-2.12.0.tgz",
+      "integrity": "sha512-kqs3V0dgDKgMoeqbdg+cKH2F+DTrvfCMrPF1MCCUpBCqBiH+TRQpJNNC86EZYHfNUeeLuIM3ttWwIkk2hllR/Q==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-remove": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-remove/-/tsparticles-interaction-external-remove-2.12.0.tgz",
+      "integrity": "sha512-2eNIrv4m1WB2VfSVj46V2L/J9hNEZnMgFc+A+qmy66C8KzDN1G8aJUAf1inW8JVc0lmo5+WKhzex4X0ZSMghBg==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-repulse": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-repulse/-/tsparticles-interaction-external-repulse-2.12.0.tgz",
+      "integrity": "sha512-rSzdnmgljeBCj5FPp4AtGxOG9TmTsK3AjQW0vlyd1aG2O5kSqFjR+FuT7rfdSk9LEJGH5SjPFE6cwbuy51uEWA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-slow": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-slow/-/tsparticles-interaction-external-slow-2.12.0.tgz",
+      "integrity": "sha512-2IKdMC3om7DttqyroMtO//xNdF0NvJL/Lx7LDo08VpfTgJJozxU+JAUT8XVT7urxhaDzbxSSIROc79epESROtA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-interaction-particles-attract": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-attract/-/tsparticles-interaction-particles-attract-2.12.0.tgz",
+      "integrity": "sha512-Hl8qwuwF9aLq3FOkAW+Zomu7Gb8IKs6Y3tFQUQScDmrrSCaeRt2EGklAiwgxwgntmqzL7hbMWNx06CHHcUQKdQ==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-interaction-particles-collisions": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-collisions/-/tsparticles-interaction-particles-collisions-2.12.0.tgz",
+      "integrity": "sha512-Se9nPWlyPxdsnHgR6ap4YUImAu3W5MeGKJaQMiQpm1vW8lSMOUejI1n1ioIaQth9weKGKnD9rvcNn76sFlzGBA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-interaction-particles-links": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-links/-/tsparticles-interaction-particles-links-2.12.0.tgz",
+      "integrity": "sha512-e7I8gRs4rmKfcsHONXMkJnymRWpxHmeaJIo4g2NaDRjIgeb2AcJSWKWZvrsoLnm7zvaf/cMQlbN6vQwCixYq3A==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-move-base": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-move-base/-/tsparticles-move-base-2.12.0.tgz",
+      "integrity": "sha512-oSogCDougIImq+iRtIFJD0YFArlorSi8IW3HD2gO3USkH+aNn3ZqZNTqp321uB08K34HpS263DTbhLHa/D6BWw==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-move-parallax": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-move-parallax/-/tsparticles-move-parallax-2.12.0.tgz",
+      "integrity": "sha512-58CYXaX8Ih5rNtYhpnH0YwU4Ks7gVZMREGUJtmjhuYN+OFr9FVdF3oDIJ9N6gY5a5AnAKz8f5j5qpucoPRcYrQ==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-particles.js": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-particles.js/-/tsparticles-particles.js-2.12.0.tgz",
+      "integrity": "sha512-LyOuvYdhbUScmA4iDgV3LxA0HzY1DnOwQUy3NrPYO393S2YwdDjdwMod6Btq7EBUjg9FVIh+sZRizgV5elV2dg==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-plugin-easing-quad": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-plugin-easing-quad/-/tsparticles-plugin-easing-quad-2.12.0.tgz",
+      "integrity": "sha512-2mNqez5pydDewMIUWaUhY5cNQ80IUOYiujwG6qx9spTq1D6EEPLbRNAEL8/ecPdn2j1Um3iWSx6lo340rPkv4Q==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-shape-circle": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-circle/-/tsparticles-shape-circle-2.12.0.tgz",
+      "integrity": "sha512-L6OngbAlbadG7b783x16ns3+SZ7i0SSB66M8xGa5/k+YcY7zm8zG0uPt1Hd+xQDR2aNA3RngVM10O23/Lwk65Q==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-shape-image": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-image/-/tsparticles-shape-image-2.12.0.tgz",
+      "integrity": "sha512-iCkSdUVa40DxhkkYjYuYHr9MJGVw+QnQuN5UC+e/yBgJQY+1tQL8UH0+YU/h0GHTzh5Sm+y+g51gOFxHt1dj7Q==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-shape-line": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-line/-/tsparticles-shape-line-2.12.0.tgz",
+      "integrity": "sha512-RcpKmmpKlk+R8mM5wA2v64Lv1jvXtU4SrBDv3vbdRodKbKaWGGzymzav1Q0hYyDyUZgplEK/a5ZwrfrOwmgYGA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-shape-polygon": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-polygon/-/tsparticles-shape-polygon-2.12.0.tgz",
+      "integrity": "sha512-5YEy7HVMt1Obxd/jnlsjajchAlYMr9eRZWN+lSjcFSH6Ibra7h59YuJVnwxOxAobpijGxsNiBX0PuGQnB47pmA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-shape-square": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-square/-/tsparticles-shape-square-2.12.0.tgz",
+      "integrity": "sha512-33vfajHqmlODKaUzyPI/aVhnAOT09V7nfEPNl8DD0cfiNikEuPkbFqgJezJuE55ebtVo7BZPDA9o7GYbWxQNuw==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-shape-star": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-star/-/tsparticles-shape-star-2.12.0.tgz",
+      "integrity": "sha512-4sfG/BBqm2qBnPLASl2L5aBfCx86cmZLXeh49Un+TIR1F5Qh4XUFsahgVOG0vkZQa+rOsZPEH04xY5feWmj90g==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-shape-text": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-text/-/tsparticles-shape-text-2.12.0.tgz",
+      "integrity": "sha512-v2/FCA+hyTbDqp2ymFOe97h/NFb2eezECMrdirHWew3E3qlvj9S/xBibjbpZva2gnXcasBwxn0+LxKbgGdP0rA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-slim": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-slim/-/tsparticles-slim-2.12.0.tgz",
+      "integrity": "sha512-27w9aGAAAPKHvP4LHzWFpyqu7wKyulayyaZ/L6Tuuejy4KP4BBEB4rY5GG91yvAPsLtr6rwWAn3yS+uxnBDpkA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-basic": "^2.12.0",
+        "tsparticles-engine": "^2.12.0",
+        "tsparticles-interaction-external-attract": "^2.12.0",
+        "tsparticles-interaction-external-bounce": "^2.12.0",
+        "tsparticles-interaction-external-bubble": "^2.12.0",
+        "tsparticles-interaction-external-connect": "^2.12.0",
+        "tsparticles-interaction-external-grab": "^2.12.0",
+        "tsparticles-interaction-external-pause": "^2.12.0",
+        "tsparticles-interaction-external-push": "^2.12.0",
+        "tsparticles-interaction-external-remove": "^2.12.0",
+        "tsparticles-interaction-external-repulse": "^2.12.0",
+        "tsparticles-interaction-external-slow": "^2.12.0",
+        "tsparticles-interaction-particles-attract": "^2.12.0",
+        "tsparticles-interaction-particles-collisions": "^2.12.0",
+        "tsparticles-interaction-particles-links": "^2.12.0",
+        "tsparticles-move-base": "^2.12.0",
+        "tsparticles-move-parallax": "^2.12.0",
+        "tsparticles-particles.js": "^2.12.0",
+        "tsparticles-plugin-easing-quad": "^2.12.0",
+        "tsparticles-shape-circle": "^2.12.0",
+        "tsparticles-shape-image": "^2.12.0",
+        "tsparticles-shape-line": "^2.12.0",
+        "tsparticles-shape-polygon": "^2.12.0",
+        "tsparticles-shape-square": "^2.12.0",
+        "tsparticles-shape-star": "^2.12.0",
+        "tsparticles-shape-text": "^2.12.0",
+        "tsparticles-updater-color": "^2.12.0",
+        "tsparticles-updater-life": "^2.12.0",
+        "tsparticles-updater-opacity": "^2.12.0",
+        "tsparticles-updater-out-modes": "^2.12.0",
+        "tsparticles-updater-rotate": "^2.12.0",
+        "tsparticles-updater-size": "^2.12.0",
+        "tsparticles-updater-stroke-color": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-color": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-color/-/tsparticles-updater-color-2.12.0.tgz",
+      "integrity": "sha512-KcG3a8zd0f8CTiOrylXGChBrjhKcchvDJjx9sp5qpwQK61JlNojNCU35xoaSk2eEHeOvFjh0o3CXWUmYPUcBTQ==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-life": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-life/-/tsparticles-updater-life-2.12.0.tgz",
+      "integrity": "sha512-J7RWGHAZkowBHpcLpmjKsxwnZZJ94oGEL2w+wvW1/+ZLmAiFFF6UgU0rHMC5CbHJT4IPx9cbkYMEHsBkcRJ0Bw==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-opacity": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-opacity/-/tsparticles-updater-opacity-2.12.0.tgz",
+      "integrity": "sha512-YUjMsgHdaYi4HN89LLogboYcCi1o9VGo21upoqxq19yRy0hRCtx2NhH22iHF/i5WrX6jqshN0iuiiNefC53CsA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-out-modes": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-out-modes/-/tsparticles-updater-out-modes-2.12.0.tgz",
+      "integrity": "sha512-owBp4Gk0JNlSrmp12XVEeBroDhLZU+Uq3szbWlHGSfcR88W4c/0bt0FiH5bHUqORIkw+m8O56hCjbqwj69kpOQ==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-rotate": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-rotate/-/tsparticles-updater-rotate-2.12.0.tgz",
+      "integrity": "sha512-waOFlGFmEZOzsQg4C4VSejNVXGf4dMf3fsnQrEROASGf1FCd8B6WcZau7JtXSTFw0OUGuk8UGz36ETWN72DkCw==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-size": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-size/-/tsparticles-updater-size-2.12.0.tgz",
+      "integrity": "sha512-B0yRdEDd/qZXCGDL/ussHfx5YJ9UhTqNvmS5X2rR2hiZhBAE2fmsXLeWkdtF2QusjPeEqFDxrkGiLOsh6poqRA==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
+    "node_modules/tsparticles-updater-stroke-color": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-stroke-color/-/tsparticles-updater-stroke-color-2.12.0.tgz",
+      "integrity": "sha512-MPou1ZDxsuVq6SN1fbX+aI5yrs6FyP2iPCqqttpNbWyL+R6fik1rL0ab/x02B57liDXqGKYomIbBQVP3zUTW1A==",
+      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+      "license": "MIT",
+      "dependencies": {
+        "tsparticles-engine": "^2.12.0"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index d61549e..e68f16b 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.90.21",
+    "@tsparticles/react": "^3.0.0",
     "axios": "^1.13.5",
     "clsx": "^2.1.1",
     "lucide-react": "^0.575.0",
@@ -19,6 +20,7 @@
     "react-dropzone": "^15.0.0",
     "react-router-dom": "^7.13.0",
     "tailwind-merge": "^3.5.0",
+    "tsparticles-slim": "^2.12.0",
     "zustand": "^5.0.11"
   },
   "devDependencies": {
@@ -32,9 +34,9 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
-    "typescript": "~5.9.3",
     "postcss": "^8.5.5",
     "tailwindcss": "^3.4.17",
+    "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1"
   }
diff --git a/src/App.css b/src/App.css
index 38a140b..1e408eb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,7 +2,7 @@
   /* max-width: 1280px; */
   margin: 0 auto;
   padding-inline: 1rem;
-  text-align: center;
+  text-align: start;
 }
 
 .logo {
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 18714d5..843c1e4 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -79,7 +79,7 @@ export const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children })
                 to={href}
                 onClick={() => setSidebarOpen(false)}
                 className={cn(
-                  'group flex items-center px-3 py-2.5 rounded-xl text-sm font-medium',
+                  'group flex items-center px-3 py-2.5 gap-4 rounded-xl text-sm font-medium',
                   'transition-all duration-150',
                   active
                     ? 'bg-primary-50 text-primary-700'
diff --git a/src/pages/AnalyticsPage.tsx b/src/pages/AnalyticsPage.tsx
index 62ac1d2..04f5e7d 100644
--- a/src/pages/AnalyticsPage.tsx
+++ b/src/pages/AnalyticsPage.tsx
@@ -441,7 +441,7 @@ export const AnalyticsPage: React.FC = () => {
 
   if (isLoading) {
     return (
-      <div className="p-4 sm:p-6 max-w-5xl mx-auto space-y-6">
+      <div className="p-4 sm:p-6 max-w-8xl mx-auto space-y-6">
         {/* Header skeleton */}
         <div className="flex items-center justify-between">
           <div className="space-y-2">
@@ -476,7 +476,7 @@ export const AnalyticsPage: React.FC = () => {
 
   if (!data) {
     return (
-      <div className="p-6 max-w-4xl mx-auto">
+      <div className="p-6 max-w-8xl mx-auto">
         <Card className="p-10 text-center">
           <div className="w-14 h-14 rounded-2xl bg-gray-50 flex items-center justify-center mx-auto mb-4">
             <BarChart3 className="w-6 h-6 text-gray-400" />
diff --git a/src/pages/AppointmentsPage.tsx b/src/pages/AppointmentsPage.tsx
index ed36c5e..b3de485 100644
--- a/src/pages/AppointmentsPage.tsx
+++ b/src/pages/AppointmentsPage.tsx
@@ -191,7 +191,7 @@ export const AppointmentsPage: React.FC = () => {
   const bookingEnabledChatbots = chatbots.filter(c => c.booking_enabled)
 
   return (
-    <div className="p-4 sm:p-6 max-w-5xl mx-auto space-y-6">
+    <div className="p-4 sm:p-6 max-w-8xl mx-auto space-y-6 text-start">
 
       {/* Header */}
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
diff --git a/src/pages/CampaignsPage.tsx b/src/pages/CampaignsPage.tsx
index b17779b..62a8a6f 100644
--- a/src/pages/CampaignsPage.tsx
+++ b/src/pages/CampaignsPage.tsx
@@ -173,7 +173,7 @@ export const CampaignsPage: React.FC = () => {
   const sentTotal = campaigns.filter(c => c.status === 'sent').reduce((sum, c) => sum + c.sent_count, 0)
 
   return (
-    <div className="p-4 sm:p-6 max-w-3xl mx-auto space-y-6">
+    <div className="p-4 sm:p-6 max-w-8xl mx-auto space-y-6 text-start">
 
       {/* Confirm send modal */}
       {confirmSendId && (() => {
diff --git a/src/pages/LeadsPage.tsx b/src/pages/LeadsPage.tsx
index cdd9cf9..a12ac98 100644
--- a/src/pages/LeadsPage.tsx
+++ b/src/pages/LeadsPage.tsx
@@ -137,8 +137,7 @@ export const LeadsPage: React.FC = () => {
   }
 
   return (
-    <div className="p-4 sm:p-6 max-w-5xl mx-auto space-y-6">
-
+    <div className="p-4 sm:p-6 max-w-8xl mx-auto space-y-6 text-start">
       {notesLead && (
         <NotesModal
           lead={notesLead}
diff --git a/src/pages/MarketplacePage.tsx b/src/pages/MarketplacePage.tsx
index 15d8fd7..a3ec838 100644
--- a/src/pages/MarketplacePage.tsx
+++ b/src/pages/MarketplacePage.tsx
@@ -1,473 +1,562 @@
-import React, { useState } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import { useQuery } from '@tanstack/react-query'
-import { marketplaceAPI } from '@/services/api'
-import { Spinner, EmptyState, Button } from '@/components/ui'
-import { SkeletonCard } from '@/components/Skeletons'
-import { ChatInterface } from '@/components/ChatInterface'
-import { CATEGORIES, INDUSTRIES } from '@/lib/utils'
-import { Search, Bot, Star, MessageSquare, ArrowLeft, SlidersHorizontal, ChevronLeft, ChevronRight } from 'lucide-react'
-import type { ChatbotPublic } from '@/types'
+import React, { useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { marketplaceAPI } from "@/services/api";
+import { Spinner, EmptyState, Button, Card } from "@/components/ui";
+import { SkeletonCard } from "@/components/Skeletons";
+import { ChatInterface } from "@/components/ChatInterface";
+import { CATEGORIES, INDUSTRIES } from "@/lib/utils";
+import {
+  Search,
+  Bot,
+  Star,
+  MessageSquare,
+  ArrowLeft,
+  SlidersHorizontal,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import type { ChatbotPublic } from "@/types";
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // MARKETPLACE LISTING PAGE
 // ═══════════════════════════════════════════════════════════════════════════════
 
 export const MarketplacePage: React.FC = () => {
-    const navigate = useNavigate()
-    const [search, setSearch] = useState('')
-    const [debouncedSearch, setDebouncedSearch] = useState('')
-    const [category, setCategory] = useState('')
-    const [industry, setIndustry] = useState('')
-    const [page, setPage] = useState(1)
-    const [showFilters, setShowFilters] = useState(false)
+  const navigate = useNavigate();
+  const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [category, setCategory] = useState("");
+  const [industry, setIndustry] = useState("");
+  const [page, setPage] = useState(1);
+  const [showFilters, setShowFilters] = useState(false);
 
-    // Debounce search
-    const searchTimeout = React.useRef<ReturnType<typeof setTimeout>>()
-    const handleSearch = (value: string) => {
-        setSearch(value)
-        clearTimeout(searchTimeout.current)
-        searchTimeout.current = setTimeout(() => {
-            setDebouncedSearch(value)
-            setPage(1)
-        }, 300)
-    }
+  // Debounce search
+  const searchTimeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const handleSearch = (value: string) => {
+    setSearch(value);
+    clearTimeout(searchTimeout.current);
+    searchTimeout.current = setTimeout(() => {
+      setDebouncedSearch(value);
+      setPage(1);
+    }, 300);
+  };
 
-    const { data, isLoading } = useQuery({
-        queryKey: ['marketplace', debouncedSearch, category, industry, page],
-        queryFn: () => marketplaceAPI.list({ search: debouncedSearch, category, industry, page, limit: 20 }),
-    })
+  const { data, isLoading } = useQuery({
+    queryKey: ["marketplace", debouncedSearch, category, industry, page],
+    queryFn: () =>
+      marketplaceAPI.list({
+        search: debouncedSearch,
+        category,
+        industry,
+        page,
+        limit: 20,
+      }),
+  });
 
-    const totalPages = data ? Math.ceil(data.total / 20) : 0
-    const hasActiveFilters = category !== '' || industry !== ''
+  const totalPages = data ? Math.ceil(data.total / 20) : 0;
+  const hasActiveFilters = category !== "" || industry !== "";
 
-    return (
-        <div className="min-h-full bg-gray-50/50">
-            {/* Page Header */}
-            <div className="bg-white border-b border-gray-200">
-                <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-10">
-                    <div className="animate-fade-in">
-                        <div className="flex items-center gap-3 mb-3">
-                            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center shadow-sm">
-                                <Bot className="w-5 h-5 text-white" />
-                            </div>
-                            <h1 className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-gray-900 via-primary-800 to-primary-600 bg-clip-text text-transparent">
-                                AI Chatbot Marketplace
-                            </h1>
-                        </div>
-                        <p className="text-gray-500 text-sm sm:text-base max-w-xl">
-                            Discover and interact with AI-powered chatbots built by businesses — ready to answer your questions instantly.
-                        </p>
-                    </div>
-                </div>
-            </div>
-
-            <div className="max-w-6xl mx-auto px-4 sm:px-6 py-6">
-                {/* Search & Filter Bar */}
-                <div className="mb-6 animate-fade-in-down space-y-3">
-                    <div className="flex gap-2">
-                        <div className="relative flex-1">
-                            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
-                            <input
-                                type="text"
-                                value={search}
-                                onChange={e => handleSearch(e.target.value)}
-                                placeholder="Search chatbots by name or description..."
-                                className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-400 bg-white shadow-sm transition-all placeholder-gray-400"
-                            />
-                            {search && (
-                                <button
-                                    onClick={() => handleSearch('')}
-                                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
-                                >
-                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                                    </svg>
-                                </button>
-                            )}
-                        </div>
-                        <button
-                            onClick={() => setShowFilters(!showFilters)}
-                            className={`flex items-center gap-2 px-4 py-2.5 rounded-xl border text-sm font-medium transition-all shadow-sm ${
-                                showFilters || hasActiveFilters
-                                    ? 'bg-primary-50 border-primary-300 text-primary-700'
-                                    : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'
-                            }`}
-                        >
-                            <SlidersHorizontal className="w-4 h-4" />
-                            <span className="hidden sm:inline">Filters</span>
-                            {hasActiveFilters && (
-                                <span className="w-5 h-5 rounded-full bg-primary-600 text-white text-xs flex items-center justify-center">
-                                    {(category ? 1 : 0) + (industry ? 1 : 0)}
-                                </span>
-                            )}
-                        </button>
-                    </div>
-
-                    {/* Expandable filter section */}
-                    {showFilters && (
-                        <div className="bg-white border border-gray-200 rounded-xl p-4 shadow-sm space-y-4 animate-fade-in-down">
-                            {/* Category filter — pill buttons since list is manageable */}
-                            <div>
-                                <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2.5">Category</p>
-                                <div className="flex flex-wrap gap-2">
-                                    <button
-                                        onClick={() => { setCategory(''); setPage(1) }}
-                                        className={`px-3 py-1.5 rounded-full text-xs font-medium transition-all border ${
-                                            category === ''
-                                                ? 'bg-primary-600 text-white border-primary-600 shadow-sm'
-                                                : 'bg-white text-gray-600 border-gray-200 hover:border-primary-300 hover:text-primary-600'
-                                        }`}
-                                    >
-                                        All
-                                    </button>
-                                    {CATEGORIES.map(c => (
-                                        <button
-                                            key={c}
-                                            onClick={() => { setCategory(category === c ? '' : c); setPage(1) }}
-                                            className={`px-3 py-1.5 rounded-full text-xs font-medium transition-all border ${
-                                                category === c
-                                                    ? 'bg-primary-600 text-white border-primary-600 shadow-sm'
-                                                    : 'bg-white text-gray-600 border-gray-200 hover:border-primary-300 hover:text-primary-600'
-                                            }`}
-                                        >
-                                            {c}
-                                        </button>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Industry filter — select dropdown since list is long */}
-                            <div>
-                                <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2.5">Industry</p>
-                                <select
-                                    value={industry}
-                                    onChange={e => { setIndustry(e.target.value); setPage(1) }}
-                                    className="w-full sm:w-72 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white transition-all text-gray-700"
-                                >
-                                    <option value="">All Industries</option>
-                                    {INDUSTRIES.map(i => <option key={i} value={i}>{i}</option>)}
-                                </select>
-                            </div>
-
-                            {hasActiveFilters && (
-                                <button
-                                    onClick={() => { setCategory(''); setIndustry(''); setPage(1) }}
-                                    className="text-xs text-red-500 hover:text-red-700 transition-colors font-medium"
-                                >
-                                    Clear all filters
-                                </button>
-                            )}
-                        </div>
-                    )}
-                </div>
-
-                {/* Results */}
-                {isLoading ? (
-                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
-                        {Array.from({ length: 6 }).map((_, i) => (
-                            <SkeletonCard key={i} />
-                        ))}
-                    </div>
-                ) : !data?.chatbots?.length ? (
-                    <EmptyState
-                        icon={<Bot className="w-8 h-8" />}
-                        title="No chatbots found"
-                        description={
-                            hasActiveFilters || debouncedSearch
-                                ? "Try adjusting your filters or search query."
-                                : "Be the first to publish your AI chatbot to the marketplace!"
-                        }
-                        action={
-                            hasActiveFilters || debouncedSearch ? (
-                                <Button variant="outline" onClick={() => { setCategory(''); setIndustry(''); handleSearch('') }}>
-                                    Clear filters
-                                </Button>
-                            ) : (
-                                <Button onClick={() => navigate('/chatbots/new')}>Create Chatbot</Button>
-                            )
-                        }
-                    />
-                ) : (
-                    <>
-                        <div className="mb-4 flex items-center justify-between">
-                            <p className="text-xs text-gray-400 font-medium uppercase tracking-wide">
-                                {data.total} chatbot{data.total !== 1 ? 's' : ''} available
-                            </p>
-                            {hasActiveFilters && (
-                                <button
-                                    onClick={() => { setCategory(''); setIndustry(''); setPage(1) }}
-                                    className="text-xs text-primary-600 hover:text-primary-800 transition-colors"
-                                >
-                                    Clear filters
-                                </button>
-                            )}
-                        </div>
-
-                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
-                            {data.chatbots.map((chatbot, i) => (
-                                <ChatbotMarketplaceCard
-                                    key={chatbot.id}
-                                    chatbot={chatbot}
-                                    index={i}
-                                    onClick={() => navigate(`/marketplace/${chatbot.id}`)}
-                                />
-                            ))}
-                        </div>
-
-                        {/* Pagination */}
-                        {data.total > 20 && (
-                            <div className="flex justify-center items-center gap-2">
-                                <button
-                                    onClick={() => setPage(p => Math.max(1, p - 1))}
-                                    disabled={page === 1}
-                                    className="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 hover:bg-gray-50 hover:border-gray-300 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-sm"
-                                >
-                                    <ChevronLeft className="w-4 h-4" />
-                                </button>
-
-                                {Array.from({ length: totalPages }, (_, i) => i + 1)
-                                    .filter(p => p === 1 || p === totalPages || Math.abs(p - page) <= 1)
-                                    .reduce<(number | 'ellipsis')[]>((acc, p, idx, arr) => {
-                                        if (idx > 0 && p - (arr[idx - 1] as number) > 1) acc.push('ellipsis')
-                                        acc.push(p)
-                                        return acc
-                                    }, [])
-                                    .map((p, idx) =>
-                                        p === 'ellipsis' ? (
-                                            <span key={`ellipsis-${idx}`} className="w-9 h-9 flex items-center justify-center text-gray-400 text-sm">
-                                                …
-                                            </span>
-                                        ) : (
-                                            <button
-                                                key={p}
-                                                onClick={() => setPage(p as number)}
-                                                className={`w-9 h-9 flex items-center justify-center rounded-lg text-sm font-medium transition-all ${
-                                                    page === p
-                                                        ? 'bg-primary-600 text-white shadow-sm shadow-primary-200'
-                                                        : 'border border-gray-200 bg-white text-gray-600 hover:bg-gray-50 hover:border-gray-300'
-                                                }`}
-                                            >
-                                                {p}
-                                            </button>
-                                        )
-                                    )}
-
-                                <button
-                                    onClick={() => setPage(p => p + 1)}
-                                    disabled={!data.has_more}
-                                    className="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 hover:bg-gray-50 hover:border-gray-300 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-sm"
-                                >
-                                    <ChevronRight className="w-4 h-4" />
-                                </button>
-                            </div>
-                        )}
-                    </>
-                )}
+  return (
+    <div className="min-h-full bg-gray-50/50 ">
+      {/* Page Header */}
+      <div className="bg-white border-b border-gray-200 ">
+        <div className="max-w-8xl mx-auto px-4 sm:px-6 py-8 sm:py-10">
+          <div className="animate-fade-in">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center shadow-sm">
+                <Bot className="w-5 h-5 text-white" />
+              </div>
+              <h1 className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-gray-900 via-primary-800 to-primary-600 bg-clip-text text-transparent">
+                AI Chatbot Marketplace
+              </h1>
             </div>
+            <p className="text-gray-500 text-sm sm:text-base max-w-xl">
+              Discover and interact with AI-powered chatbots built by businesses
+              — ready to answer your questions instantly.
+            </p>
+          </div>
         </div>
-    )
-}
+      </div>
 
+      {/* Content */}
+      <div className="max-w-8xl mx-auto px-4 sm:px-6 py-6">
+        {/* Search & Filter Bar */}
+        <div className="mb-6 animate-fade-in-down space-y-3">
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => handleSearch(e.target.value)}
+                placeholder="Search chatbots by name or description..."
+                className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-400 bg-white shadow-sm transition-all placeholder-gray-400"
+              />
+              {search && (
+                <button
+                  onClick={() => handleSearch("")}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+                >
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              )}
+            </div>
+            <button
+              onClick={() => setShowFilters(!showFilters)}
+              className={`flex items-center gap-2 px-4 py-2.5 rounded-xl border text-sm font-medium transition-all shadow-sm ${
+                showFilters || hasActiveFilters
+                  ? "bg-primary-50 border-primary-300 text-primary-700"
+                  : "bg-white border-gray-200 text-gray-600 hover:bg-gray-50"
+              }`}
+            >
+              <SlidersHorizontal className="w-4 h-4" />
+              <span className="hidden sm:inline">Filters</span>
+              {hasActiveFilters && (
+                <span className="w-5 h-5 rounded-full bg-primary-600 text-white text-xs flex items-center justify-center">
+                  {(category ? 1 : 0) + (industry ? 1 : 0)}
+                </span>
+              )}
+            </button>
+          </div>
+
+          {/* Expandable filter section */}
+          {showFilters && (
+            <div className="bg-white border border-gray-200 rounded-xl p-4 shadow-sm space-y-4 animate-fade-in-down">
+              {/* Category filter — pill buttons since list is manageable */}
+              <div>
+                <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2.5">
+                  Category
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  <button
+                    onClick={() => {
+                      setCategory("");
+                      setPage(1);
+                    }}
+                    className={`px-3 py-1.5 rounded-full text-xs font-medium transition-all border ${
+                      category === ""
+                        ? "bg-primary-600 text-white border-primary-600 shadow-sm"
+                        : "bg-white text-gray-600 border-gray-200 hover:border-primary-300 hover:text-primary-600"
+                    }`}
+                  >
+                    All
+                  </button>
+                  {CATEGORIES.map((c) => (
+                    <button
+                      key={c}
+                      onClick={() => {
+                        setCategory(category === c ? "" : c);
+                        setPage(1);
+                      }}
+                      className={`px-3 py-1.5 rounded-full text-xs font-medium transition-all border ${
+                        category === c
+                          ? "bg-primary-600 text-white border-primary-600 shadow-sm"
+                          : "bg-white text-gray-600 border-gray-200 hover:border-primary-300 hover:text-primary-600"
+                      }`}
+                    >
+                      {c}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Industry filter — select dropdown since list is long */}
+              <div>
+                <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2.5">
+                  Industry
+                </p>
+                <select
+                  value={industry}
+                  onChange={(e) => {
+                    setIndustry(e.target.value);
+                    setPage(1);
+                  }}
+                  className="w-full sm:w-72 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white transition-all text-gray-700"
+                >
+                  <option value="">All Industries</option>
+                  {INDUSTRIES.map((i) => (
+                    <option key={i} value={i}>
+                      {i}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {hasActiveFilters && (
+                <button
+                  onClick={() => {
+                    setCategory("");
+                    setIndustry("");
+                    setPage(1);
+                  }}
+                  className="text-xs text-red-500 hover:text-red-700 transition-colors font-medium"
+                >
+                  Clear all filters
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Results */}
+        {isLoading ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <SkeletonCard key={i} />
+            ))}
+          </div>
+        ) : !data?.chatbots?.length ? (
+          <EmptyState
+            icon={<Bot className="w-8 h-8" />}
+            title="No chatbots found"
+            description={
+              hasActiveFilters || debouncedSearch
+                ? "Try adjusting your filters or search query."
+                : "Be the first to publish your AI chatbot to the marketplace!"
+            }
+            action={
+              hasActiveFilters || debouncedSearch ? (
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    setCategory("");
+                    setIndustry("");
+                    handleSearch("");
+                  }}
+                >
+                  Clear filters
+                </Button>
+              ) : (
+                <Button onClick={() => navigate("/chatbots/new")}>
+                  Create Chatbot
+                </Button>
+              )
+            }
+          />
+        ) : (
+          <>
+            <div className="mb-4 flex items-center justify-between">
+              <p className="text-xs text-gray-400 font-medium uppercase tracking-wide">
+                {data.total} chatbot{data.total !== 1 ? "s" : ""} available
+              </p>
+              {hasActiveFilters && (
+                <button
+                  onClick={() => {
+                    setCategory("");
+                    setIndustry("");
+                    setPage(1);
+                  }}
+                  className="text-xs text-primary-600 hover:text-primary-800 transition-colors"
+                >
+                  Clear filters
+                </button>
+              )}
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
+              {data.chatbots.map((chatbot, i) => (
+                <ChatbotMarketplaceCard
+                  key={chatbot.id}
+                  chatbot={chatbot}
+                  index={i}
+                  onClick={() => navigate(`/marketplace/${chatbot.id}`)}
+                />
+              ))}
+            </div>
+
+            {/* Pagination */}
+            {data.total > 20 && (
+              <div className="flex justify-center items-center gap-2">
+                <button
+                  onClick={() => setPage((p) => Math.max(1, p - 1))}
+                  disabled={page === 1}
+                  className="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 hover:bg-gray-50 hover:border-gray-300 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-sm"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </button>
+
+                {Array.from({ length: totalPages }, (_, i) => i + 1)
+                  .filter(
+                    (p) =>
+                      p === 1 || p === totalPages || Math.abs(p - page) <= 1,
+                  )
+                  .reduce<(number | "ellipsis")[]>((acc, p, idx, arr) => {
+                    if (idx > 0 && p - (arr[idx - 1] as number) > 1)
+                      acc.push("ellipsis");
+                    acc.push(p);
+                    return acc;
+                  }, [])
+                  .map((p, idx) =>
+                    p === "ellipsis" ? (
+                      <span
+                        key={`ellipsis-${idx}`}
+                        className="w-9 h-9 flex items-center justify-center text-gray-400 text-sm"
+                      >
+                        …
+                      </span>
+                    ) : (
+                      <button
+                        key={p}
+                        onClick={() => setPage(p as number)}
+                        className={`w-9 h-9 flex items-center justify-center rounded-lg text-sm font-medium transition-all ${
+                          page === p
+                            ? "bg-primary-600 text-white shadow-sm shadow-primary-200"
+                            : "border border-gray-200 bg-white text-gray-600 hover:bg-gray-50 hover:border-gray-300"
+                        }`}
+                      >
+                        {p}
+                      </button>
+                    ),
+                  )}
+
+                <button
+                  onClick={() => setPage((p) => p + 1)}
+                  disabled={!data.has_more}
+                  className="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 hover:bg-gray-50 hover:border-gray-300 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-sm"
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // MARKETPLACE CARD — shows logo when available
 // ═══════════════════════════════════════════════════════════════════════════════
 
-const ChatbotMarketplaceCard: React.FC<{ chatbot: ChatbotPublic; onClick: () => void; index: number }> = ({ chatbot, onClick, index }) => (
+const ChatbotMarketplaceCard: React.FC<{
+  chatbot: ChatbotPublic;
+  onClick: () => void;
+  index: number;
+}> = ({ chatbot, onClick, index }) => (
+  <div
+    className="group relative bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-lg hover:border-gray-300 hover:-translate-y-1 transition-all duration-200 cursor-pointer overflow-hidden"
+    style={{ animationDelay: `${index * 60}ms`, animationFillMode: "both" }}
+    onClick={onClick}
+  >
+    {/* Colored accent top bar — thicker and with gradient */}
     <div
-        className="group relative bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-lg hover:border-gray-300 hover:-translate-y-1 transition-all duration-200 cursor-pointer overflow-hidden"
-        style={{ animationDelay: `${index * 60}ms`, animationFillMode: 'both' }}
-        onClick={onClick}
-    >
-        {/* Colored accent top bar — thicker and with gradient */}
-        <div
-            className="h-1.5 w-full"
-            style={{ background: `linear-gradient(90deg, ${chatbot.primary_color}, ${chatbot.primary_color}aa)` }}
-        />
+      className="h-1.5 w-full"
+      style={{
+        background: `linear-gradient(90deg, ${chatbot.primary_color}, ${chatbot.primary_color}aa)`,
+      }}
+    />
 
-        <div className="p-5">
-            {/* Header row */}
-            <div className="flex items-start gap-3 mb-3">
-                {chatbot.logo_url ? (
-                    <img
-                        src={chatbot.logo_url}
-                        alt={chatbot.name}
-                        className="w-12 h-12 rounded-xl object-cover flex-shrink-0 shadow-sm group-hover:scale-105 transition-transform duration-200"
-                    />
-                ) : (
-                    <div
-                        className="w-12 h-12 rounded-xl flex items-center justify-center text-white flex-shrink-0 shadow-sm group-hover:scale-105 transition-transform duration-200"
-                        style={{ background: chatbot.primary_color }}
-                    >
-                        <Bot className="w-6 h-6" />
-                    </div>
-                )}
-                <div className="flex-1 min-w-0 pt-0.5">
-                    <h3 className="font-semibold text-gray-900 text-sm leading-tight truncate group-hover:text-primary-700 transition-colors">
-                        {chatbot.name}
-                    </h3>
-                    {chatbot.company_name && (
-                        <p className="text-xs text-gray-400 truncate mt-0.5">by {chatbot.company_name}</p>
-                    )}
-                </div>
-            </div>
-
-            {/* Description */}
-            {chatbot.description ? (
-                <p className="text-xs text-gray-500 mb-4 line-clamp-2 leading-relaxed">{chatbot.description}</p>
-            ) : (
-                <div className="mb-4" />
-            )}
-
-            {/* Stats row */}
-            <div className="flex items-center gap-2 flex-wrap">
-                {chatbot.average_rating && chatbot.average_rating > 0 && (
-                    <span className="flex items-center gap-1 bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full text-xs font-medium border border-amber-100">
-                        <Star className="w-3 h-3 fill-amber-400 text-amber-400" />
-                        {chatbot.average_rating.toFixed(1)}
-                    </span>
-                )}
-                <span className="flex items-center gap-1 bg-gray-50 text-gray-500 px-2.5 py-1 rounded-full text-xs border border-gray-100">
-                    <MessageSquare className="w-3 h-3" />
-                    {chatbot.total_conversations.toLocaleString()}
-                </span>
-                {chatbot.category && (
-                    <span className="bg-primary-50 text-primary-700 px-2.5 py-1 rounded-full text-xs font-medium border border-primary-100 truncate max-w-[120px]">
-                        {chatbot.category}
-                    </span>
-                )}
-            </div>
+    <div className="p-5">
+      {/* Header row */}
+      <div className="flex items-start gap-3 mb-3">
+        {chatbot.logo_url ? (
+          <img
+            src={chatbot.logo_url}
+            alt={chatbot.name}
+            className="w-12 h-12 rounded-xl object-cover flex-shrink-0 shadow-sm group-hover:scale-105 transition-transform duration-200"
+          />
+        ) : (
+          <div
+            className="w-12 h-12 rounded-xl flex items-center justify-center text-white flex-shrink-0 shadow-sm group-hover:scale-105 transition-transform duration-200"
+            style={{ background: chatbot.primary_color }}
+          >
+            <Bot className="w-6 h-6" />
+          </div>
+        )}
+        <div className="flex-1 min-w-0 pt-0.5">
+          <h3 className="font-semibold text-gray-900 text-sm leading-tight truncate group-hover:text-primary-700 transition-colors">
+            {chatbot.name}
+          </h3>
+          {chatbot.company_name && (
+            <p className="text-xs text-gray-400 truncate mt-0.5">
+              by {chatbot.company_name}
+            </p>
+          )}
         </div>
+      </div>
 
-        {/* Hover overlay: "Chat now" CTA */}
-        <div className="absolute inset-0 flex items-end justify-center pb-5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
-            <div
-                className="px-5 py-2 rounded-full text-white text-xs font-semibold shadow-lg pointer-events-none"
-                style={{ background: chatbot.primary_color }}
-            >
-                Chat now →
-            </div>
-        </div>
+      {/* Description */}
+      {chatbot.description ? (
+        <p className="text-xs text-gray-500 mb-4 line-clamp-2 leading-relaxed">
+          {chatbot.description}
+        </p>
+      ) : (
+        <div className="mb-4" />
+      )}
+
+      {/* Stats row */}
+      <div className="flex items-center gap-2 flex-wrap">
+        {chatbot.average_rating && chatbot.average_rating > 0 && (
+          <span className="flex items-center gap-1 bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full text-xs font-medium border border-amber-100">
+            <Star className="w-3 h-3 fill-amber-400 text-amber-400" />
+            {chatbot.average_rating.toFixed(1)}
+          </span>
+        )}
+        <span className="flex items-center gap-1 bg-gray-50 text-gray-500 px-2.5 py-1 rounded-full text-xs border border-gray-100">
+          <MessageSquare className="w-3 h-3" />
+          {chatbot.total_conversations.toLocaleString()}
+        </span>
+        {chatbot.category && (
+          <span className="bg-primary-50 text-primary-700 px-2.5 py-1 rounded-full text-xs font-medium border border-primary-100 truncate max-w-[120px]">
+            {chatbot.category}
+          </span>
+        )}
+      </div>
     </div>
-)
 
+    {/* Hover overlay: "Chat now" CTA */}
+    <div className="absolute inset-0 flex items-end justify-end mr-5 pb-5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
+      <div
+        className="px-5 py-2 rounded-full text-white text-xs font-semibold shadow-lg pointer-events-none"
+        style={{ background: chatbot.primary_color }}
+      >
+        Chat now →
+      </div>
+    </div>
+  </div>
+);
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // CHATBOT DETAIL PAGE — shows logo in header + passes to ChatInterface
 // ═══════════════════════════════════════════════════════════════════════════════
 
 export const ChatbotDetailPage: React.FC = () => {
-    const { id } = useParams<{ id: string }>()
-    const navigate = useNavigate()
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
 
-    const { data: chatbot, isLoading, error } = useQuery({
-        queryKey: ['marketplace-chatbot', id],
-        queryFn: () => marketplaceAPI.get(id!),
-        enabled: !!id,
-    })
-
-    if (isLoading) {
-        return (
-            <div className="flex justify-center py-20">
-                <Spinner className="text-primary-600" />
-            </div>
-        )
-    }
-
-    if (error || !chatbot) {
-        return (
-            <div className="p-6 max-w-2xl mx-auto text-center">
-                <EmptyState
-                    icon={<Bot className="w-8 h-8" />}
-                    title="Chatbot not found"
-                    description="This chatbot may have been unpublished or removed."
-                    action={
-                        <Button onClick={() => navigate('/marketplace')} variant="outline">
-                            <ArrowLeft className="w-4 h-4" />
-                            Back to Marketplace
-                        </Button>
-                    }
-                />
-            </div>
-        )
-    }
+  const {
+    data: chatbot,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["marketplace-chatbot", id],
+    queryFn: () => marketplaceAPI.get(id!),
+    enabled: !!id,
+  });
 
+  if (isLoading) {
     return (
-        <div className="p-4 sm:p-6 max-w-4xl mx-auto animate-fade-in">
-            {/* Back link */}
-            <button
-                onClick={() => navigate('/marketplace')}
-                className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-primary-600 mb-6 transition-colors group"
-            >
-                <ArrowLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
-                Back to Marketplace
-            </button>
+      <div className="flex justify-center py-20">
+        <Spinner className="text-primary-600" />
+      </div>
+    );
+  }
 
-            {/* Chatbot info card */}
-            <div className="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden mb-5">
-                {/* Accent bar */}
-                <div
-                    className="h-1.5 w-full"
-                    style={{ background: `linear-gradient(90deg, ${chatbot.primary_color}, ${chatbot.primary_color}88)` }}
-                />
-                <div className="p-5 sm:p-6">
-                    <div className="flex items-center gap-4 mb-3">
-                        {chatbot.logo_url ? (
-                            <img
-                                src={chatbot.logo_url}
-                                alt={chatbot.name}
-                                className="w-16 h-16 rounded-2xl object-cover shadow-md flex-shrink-0"
-                            />
-                        ) : (
-                            <div
-                                className="w-16 h-16 rounded-2xl flex items-center justify-center text-white shadow-md flex-shrink-0"
-                                style={{ background: chatbot.primary_color }}
-                            >
-                                <Bot className="w-8 h-8" />
-                            </div>
-                        )}
-                        <div>
-                            <h1 className="text-xl sm:text-2xl font-bold text-gray-900">{chatbot.name}</h1>
-                            {chatbot.company_name && (
-                                <p className="text-sm text-gray-500">by {chatbot.company_name}</p>
-                            )}
-                            <div className="flex items-center gap-2 mt-1.5 flex-wrap">
-                                {chatbot.average_rating && chatbot.average_rating > 0 && (
-                                    <span className="flex items-center gap-1 text-xs text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full font-medium border border-amber-100">
-                                        <Star className="w-3 h-3 fill-amber-400 text-amber-400" />
-                                        {chatbot.average_rating.toFixed(1)}
-                                    </span>
-                                )}
-                                <span className="flex items-center gap-1 text-xs text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100">
-                                    <MessageSquare className="w-3 h-3" />
-                                    {chatbot.total_conversations.toLocaleString()} conversations
-                                </span>
-                                {chatbot.category && (
-                                    <span className="text-xs text-primary-700 bg-primary-50 px-2 py-0.5 rounded-full font-medium border border-primary-100">
-                                        {chatbot.category}
-                                    </span>
-                                )}
-                            </div>
-                        </div>
-                    </div>
+  if (error || !chatbot) {
+    return (
+      <div className="p-6 max-w-2xl mx-auto text-center">
+        <EmptyState
+          icon={<Bot className="w-8 h-8" />}
+          title="Chatbot not found"
+          description="This chatbot may have been unpublished or removed."
+          action={
+            <Button onClick={() => navigate("/marketplace")} variant="outline">
+              <ArrowLeft className="w-4 h-4" />
+              Back to Marketplace
+            </Button>
+          }
+        />
+      </div>
+    );
+  }
 
-                    {chatbot.description && (
-                        <p className="text-gray-500 text-sm leading-relaxed">{chatbot.description}</p>
-                    )}
-                </div>
+  return (
+    <Card className="p-4 sm:p-6 max-w-5xl mx-auto animate-fade-in">
+      {/* Back link */}
+      <button
+        onClick={() => navigate("/marketplace")}
+        className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-primary-600 mb-6 transition-colors group"
+      >
+        <ArrowLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
+        Back to Marketplace
+      </button>
+
+      {/* Chatbot info card */}
+      <div className="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden mb-5">
+        {/* Accent bar */}
+        <div
+          className="h-1.5 w-full"
+          style={{
+            background: `linear-gradient(90deg, ${chatbot.primary_color}, ${chatbot.primary_color}88)`,
+          }}
+        />
+        <div className="p-5 sm:p-6">
+          <div className="flex items-center gap-4 mb-3">
+            {chatbot.logo_url ? (
+              <img
+                src={chatbot.logo_url}
+                alt={chatbot.name}
+                className="w-16 h-16 rounded-2xl object-cover shadow-md flex-shrink-0"
+              />
+            ) : (
+              <div
+                className="w-16 h-16 rounded-2xl flex items-center justify-center text-white shadow-md flex-shrink-0"
+                style={{ background: chatbot.primary_color }}
+              >
+                <Bot className="w-8 h-8" />
+              </div>
+            )}
+            <div>
+              <h1 className="text-xl sm:text-2xl font-bold text-gray-900">
+                {chatbot.name}
+              </h1>
+              {chatbot.company_name && (
+                <p className="text-sm text-gray-500">
+                  by {chatbot.company_name}
+                </p>
+              )}
+              <div className="flex items-center gap-2 mt-1.5 flex-wrap">
+                {chatbot.average_rating && chatbot.average_rating > 0 && (
+                  <span className="flex items-center gap-1 text-xs text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full font-medium border border-amber-100">
+                    <Star className="w-3 h-3 fill-amber-400 text-amber-400" />
+                    {chatbot.average_rating.toFixed(1)}
+                  </span>
+                )}
+                <span className="flex items-center gap-1 text-xs text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100">
+                  <MessageSquare className="w-3 h-3" />
+                  {chatbot.total_conversations.toLocaleString()} conversations
+                </span>
+                {chatbot.category && (
+                  <span className="text-xs text-primary-700 bg-primary-50 px-2 py-0.5 rounded-full font-medium border border-primary-100">
+                    {chatbot.category}
+                  </span>
+                )}
+              </div>
             </div>
+          </div>
 
-            {/* Chat */}
-            <div className="h-[calc(100vh-340px)] min-h-[400px] max-h-[680px] rounded-2xl overflow-hidden border border-gray-200 shadow-sm">
-                <ChatInterface
-                    chatbotId={chatbot.id}
-                    chatbotName={chatbot.name}
-                    welcomeMessage={chatbot.welcome_message}
-                    primaryColor={chatbot.primary_color}
-                    logoUrl={chatbot.logo_url}
-                />
-            </div>
+          {chatbot.description && (
+            <p className="text-gray-500 text-sm leading-relaxed">
+              {chatbot.description}
+            </p>
+          )}
         </div>
-    )
-}
+      </div>
+
+      {/* Chat */}
+      <div className="h-[calc(100vh-340px)] min-h-[400px] max-h-[680px] rounded-2xl overflow-hidden border border-gray-200 shadow-sm">
+        <ChatInterface
+          chatbotId={chatbot.id}
+          chatbotName={chatbot.name}
+          welcomeMessage={chatbot.welcome_message}
+          primaryColor={chatbot.primary_color}
+          logoUrl={chatbot.logo_url}
+        />
+      </div>
+    </Card>
+  );
+};
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index 422d0c9..956a63f 100644
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -1,305 +1,508 @@
-import React, { useState, useCallback } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { useNavigate, useLocation, Link } from 'react-router-dom'
-import { billingAPI, authAPI } from '@/services/api'
-import { useAuthStore } from '@/store/authStore'
-import { Button, Card, Input } from '@/components/ui'
-import { useToast } from '@/contexts/ToastContext'
-import { useThemeStore } from '@/store/themeStore'
-import { getPlanColor, formatDate } from '@/lib/utils'
-import { CreditCard, User, ExternalLink, AlertTriangle, Moon, Sun } from 'lucide-react'
+import React, { useState, useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate, useLocation, Link } from "react-router-dom";
+import { billingAPI, authAPI } from "@/services/api";
+import { useAuthStore } from "@/store/authStore";
+import { Button, Card, Input } from "@/components/ui";
+import { useToast } from "@/contexts/ToastContext";
+import { useThemeStore } from "@/store/themeStore";
+import { getPlanColor, formatDate } from "@/lib/utils";
+import {
+  CreditCard,
+  User,
+  ExternalLink,
+  AlertTriangle,
+  Moon,
+  Sun,
+} from "lucide-react";
 
 export const SettingsPage: React.FC = () => {
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { success: showToast, error: showError } = useToast()
-  const { isDark, toggle: toggleTheme } = useThemeStore()
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { success: showToast, error: showError } = useToast();
+  const { isDark, toggle: toggleTheme } = useThemeStore();
 
-  const tab: 'profile' | 'billing' = location.pathname === '/settings/billing' ? 'billing' : 'profile'
+  const tab: "profile" | "billing" =
+    location.pathname === "/settings/billing" ? "billing" : "profile";
 
-  const handleTabChange = useCallback((newTab: 'profile' | 'billing') => {
-    const newPath = newTab === 'billing' ? '/settings/billing' : '/settings'
-    if (location.pathname !== newPath) {
-      navigate(newPath, { replace: true })
-    }
-  }, [navigate, location.pathname])
+  const handleTabChange = useCallback(
+    (newTab: "profile" | "billing") => {
+      const newPath = newTab === "billing" ? "/settings/billing" : "/settings";
+      if (location.pathname !== newPath) {
+        navigate(newPath, { replace: true });
+      }
+    },
+    [navigate, location.pathname],
+  );
 
   return (
-      <div className="p-6 max-w-3xl mx-auto">
-        <div className="flex items-center justify-between mb-6">
-          <h1 className="text-2xl font-bold text-gray-900">Settings</h1>
-          <button
-            onClick={toggleTheme}
-            className="flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-200 hover:bg-gray-100 text-sm text-gray-600 transition-colors"
-            aria-label="Toggle dark mode"
-          >
-            {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-            {isDark ? 'Light mode' : 'Dark mode'}
-          </button>
-        </div>
-
-        {/* Tabs */}
-        <div className="flex gap-1 mb-6 bg-gray-100 p-1 rounded-xl w-fit">
-          {[
-            { id: 'profile' as const, label: 'Profile', icon: User },
-            { id: 'billing' as const, label: 'Billing', icon: CreditCard },
-          ].map(({ id, label, icon: Icon }) => (
-              <button
-                  key={id}
-                  onClick={() => handleTabChange(id)}
-                  className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                      tab === id
-                          ? 'bg-white shadow-sm text-gray-900'
-                          : 'text-gray-500 hover:text-gray-700'
-                  }`}
-              >
-                <Icon className="w-3.5 h-3.5" />
-                {label}
-              </button>
-          ))}
-        </div>
-
-        {tab === 'profile' && <ProfileSettings onToast={showToast} onError={showError} />}
-        {tab === 'billing' && <BillingSettings onToast={showToast} onError={showError} />}
+    <div className="p-6 max-w-8xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-4xl font-bold text-gray-900">Settings</h1>
+        <button
+          onClick={toggleTheme}
+          className="flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-200 hover:bg-gray-100 text-sm text-gray-600 transition-colors"
+          aria-label="Toggle dark mode"
+        >
+          {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+          {isDark ? "Light mode" : "Dark mode"}
+        </button>
       </div>
-  )
-}
 
-const ProfileSettings: React.FC<{ onToast: (msg: string) => void; onError: (msg: string) => void }> = ({ onToast, onError }) => {
-  const { user, setAuth, token, logout } = useAuthStore()
-  const navigate = useNavigate()
-  const [companyName, setCompanyName] = useState(user?.company_name || '')
-  const [currentPassword, setCurrentPassword] = useState('')
-  const [newPassword, setNewPassword] = useState('')
-  const [saving, setSaving] = useState(false)
-  const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const [deleteConfirm, setDeleteConfirm] = useState('')
-  const [deleting, setDeleting] = useState(false)
+      {/* Tabs */}
+      <div className="flex gap-1 mb-6 bg-gray-100 p-1 rounded-xl w-fit">
+        {[
+          { id: "profile" as const, label: "Profile", icon: User },
+          { id: "billing" as const, label: "Billing", icon: CreditCard },
+        ].map(({ id, label, icon: Icon }) => (
+          <button
+            key={id}
+            onClick={() => handleTabChange(id)}
+            className={`flex lg:w-52 items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              tab === id
+                ? "bg-white shadow-sm text-gray-900"
+                : "text-gray-500 hover:text-gray-700"
+            }`}
+          >
+            <Icon className="w-3.5 h-3.5" />
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {tab === "profile" && (
+        <ProfileSettings onToast={showToast} onError={showError} />
+      )}
+      {tab === "billing" && (
+        <BillingSettings onToast={showToast} onError={showError} />
+      )}
+    </div>
+  );
+};
+
+const ProfileSettings: React.FC<{
+  onToast: (msg: string) => void;
+  onError: (msg: string) => void;
+}> = ({ onToast, onError }) => {
+  const { user, setAuth, token, logout } = useAuthStore();
+  const navigate = useNavigate();
+  const [companyName, setCompanyName] = useState(user?.company_name || "");
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState("");
+  const [deleting, setDeleting] = useState(false);
 
   const handleSave = async () => {
-    setSaving(true)
+    setSaving(true);
     try {
-      const payload: { company_name?: string; current_password?: string; new_password?: string } = {}
-      if (companyName !== user?.company_name) payload.company_name = companyName
+      const payload: {
+        company_name?: string;
+        current_password?: string;
+        new_password?: string;
+      } = {};
+      if (companyName !== user?.company_name)
+        payload.company_name = companyName;
       if (newPassword) {
-        payload.current_password = currentPassword
-        payload.new_password = newPassword
+        payload.current_password = currentPassword;
+        payload.new_password = newPassword;
       }
       if (Object.keys(payload).length === 0) {
-        onToast('No changes to save')
-        return
+        onToast("No changes to save");
+        return;
       }
-      const updated = await authAPI.updateProfile(payload)
-      setAuth(updated, token || '')
-      setCurrentPassword('')
-      setNewPassword('')
-      onToast('Profile updated successfully')
+      const updated = await authAPI.updateProfile(payload);
+      setAuth(updated, token || "");
+      setCurrentPassword("");
+      setNewPassword("");
+      onToast("Profile updated successfully");
     } catch (err) {
-      const e = err as { response?: { data?: { detail?: string } } }
-      onError(e.response?.data?.detail || 'Failed to update profile')
+      const e = err as { response?: { data?: { detail?: string } } };
+      onError(e.response?.data?.detail || "Failed to update profile");
     } finally {
-      setSaving(false)
+      setSaving(false);
     }
-  }
+  };
 
   const handleDeleteAccount = async () => {
-    if (deleteConfirm !== 'DELETE') return
-    setDeleting(true)
+    if (deleteConfirm !== "DELETE") return;
+    setDeleting(true);
     try {
-      await authAPI.deleteAccount()
-      logout()
-      navigate('/')
+      await authAPI.deleteAccount();
+      logout();
+      navigate("/");
     } catch (err) {
-      const e = err as { response?: { data?: { detail?: string } } }
-      onError(e.response?.data?.detail || 'Failed to delete account')
-      setDeleting(false)
+      const e = err as { response?: { data?: { detail?: string } } };
+      onError(e.response?.data?.detail || "Failed to delete account");
+      setDeleting(false);
     }
-  }
+  };
 
   return (
-      <div className="space-y-4">
-        <Card className="p-6 space-y-4">
-          <h2 className="font-semibold text-gray-900">Profile Information</h2>
-          <Input label="Email" value={user?.email || ''} disabled hint="Email cannot be changed" />
-          <Input
-            label="Company Name"
-            value={companyName}
-            onChange={e => setCompanyName(e.target.value)}
-            placeholder="Your company name"
-          />
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1.5">Plan</label>
-            <div className="flex items-center gap-2">
-              <span className={`px-3 py-1 text-sm font-medium rounded-full capitalize ${getPlanColor(user?.plan || 'free')}`}>
-                {user?.plan || 'free'}
-              </span>
-              <Link to="/pricing" className="text-sm text-primary-600 hover:underline">
-                Manage plan
-              </Link>
-            </div>
+    <div className="space-y-4">
+      <Card className="p-6 space-y-4">
+        <h2 className="font-semibold text-gray-900">Profile Information</h2>
+        <Input
+          label="Email"
+          value={user?.email || ""}
+          disabled
+          hint="Email cannot be changed"
+        />
+        <Input
+          label="Company Name"
+          value={companyName}
+          onChange={(e) => setCompanyName(e.target.value)}
+          placeholder="Your company name"
+        />
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1.5">
+            Plan
+          </label>
+          <div className="flex items-center gap-2">
+            <span
+              className={`px-3 py-1 text-sm font-medium rounded-full capitalize ${getPlanColor(user?.plan || "free")}`}
+            >
+              {user?.plan || "free"}
+            </span>
+            <Link
+              to="/pricing"
+              className="text-sm text-primary-600 hover:underline"
+            >
+              Manage plan
+            </Link>
           </div>
-        </Card>
+        </div>
+      </Card>
 
-        <Card className="p-6 space-y-4">
-          <h2 className="font-semibold text-gray-900">Change Password</h2>
-          <Input
-            label="Current Password"
-            type="password"
-            value={currentPassword}
-            onChange={e => setCurrentPassword(e.target.value)}
-            placeholder="Enter current password"
-          />
-          <Input
-            label="New Password"
-            type="password"
-            value={newPassword}
-            onChange={e => setNewPassword(e.target.value)}
-            placeholder="Min 8 characters"
-            hint="Leave blank to keep current password"
-          />
-        </Card>
+      <Card className="p-6 space-y-4">
+        <h2 className="font-semibold text-gray-900">Change Password</h2>
+        <Input
+          label="Current Password"
+          type="password"
+          value={currentPassword}
+          onChange={(e) => setCurrentPassword(e.target.value)}
+          placeholder="Enter current password"
+        />
+        <Input
+          label="New Password"
+          type="password"
+          value={newPassword}
+          onChange={(e) => setNewPassword(e.target.value)}
+          placeholder="Min 8 characters"
+          hint="Leave blank to keep current password"
+        />
+      </Card>
 
-        <Button onClick={handleSave} loading={saving}>
+      <div className="w-full flex items-center justify-center">
+        <Button
+          onClick={handleSave}
+          loading={saving}
+          className="w-1/2 h-11 my-5"
+        >
           Save Changes
         </Button>
+      </div>
 
-        {/* Danger Zone */}
-        <Card className="p-6 border-red-200 bg-red-50/30">
-          <h2 className="font-semibold text-red-800 mb-2 flex items-center gap-1.5">
-            <AlertTriangle className="w-4 h-4" />
-            Danger Zone
-          </h2>
-          <p className="text-sm text-red-700 mb-4">
-            Permanently delete your account, all chatbots, documents, and data. This cannot be undone.
-          </p>
-          <Button variant="outline" className="border-red-300 text-red-700 hover:bg-red-50" onClick={() => setShowDeleteModal(true)}>
-            Delete Account
-          </Button>
-        </Card>
+      {/* Danger Zone */}
+      <Card className="p-6 border-red-200 bg-red-50/30 text-center">
+        <h2 className="font-semibold text-lg text-red-800 mb-2 flex items-center justify-center gap-1.5">
+          <AlertTriangle className="w-4 h-4" />
+          Danger Zone
+        </h2>
+        <p className="text-sm text-red-700 mb-4">
+          Permanently delete your account, all chatbots, documents, and data.
+          This cannot be undone.
+        </p>
+        <Button
+          variant="outline"
+          className="border-red-300 text-red-700 hover:bg-red-50"
+          onClick={() => setShowDeleteModal(true)}
+        >
+          Delete Account
+        </Button>
+      </Card>
 
-        {/* Delete Account Modal */}
-        {showDeleteModal && (
-          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-            <div className="bg-white rounded-2xl p-6 w-full max-w-md shadow-xl">
-              <h3 className="text-lg font-bold text-gray-900 mb-2">Delete Account</h3>
-              <p className="text-sm text-gray-500 mb-4">
-                This will permanently delete your account and all associated data including chatbots, documents, conversations, and leads.
-                <strong className="text-red-600"> This action cannot be undone.</strong>
-              </p>
-              <p className="text-sm text-gray-700 mb-2">Type <strong>DELETE</strong> to confirm:</p>
-              <Input
-                value={deleteConfirm}
-                onChange={e => setDeleteConfirm(e.target.value)}
-                placeholder="DELETE"
-              />
-              <div className="flex gap-3 mt-4">
-                <Button variant="outline" className="flex-1" onClick={() => { setShowDeleteModal(false); setDeleteConfirm('') }}>
-                  Cancel
-                </Button>
-                <Button
-                  className="flex-1 bg-red-600 hover:bg-red-700"
-                  disabled={deleteConfirm !== 'DELETE'}
-                  loading={deleting}
-                  onClick={handleDeleteAccount}
-                >
-                  Delete Account
-                </Button>
-              </div>
+      {/* Delete Account Modal */}
+      {showDeleteModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-2xl p-6 w-full max-w-md shadow-xl">
+            <h3 className="text-lg font-bold text-gray-900 mb-2">
+              Delete Account
+            </h3>
+            <p className="text-sm text-gray-500 mb-4">
+              This will permanently delete your account and all associated data
+              including chatbots, documents, conversations, and leads.
+              <strong className="text-red-600">
+                {" "}
+                This action cannot be undone.
+              </strong>
+            </p>
+            <p className="text-sm text-gray-700 mb-2">
+              Type <strong>DELETE</strong> to confirm:
+            </p>
+            <Input
+              value={deleteConfirm}
+              onChange={(e) => setDeleteConfirm(e.target.value)}
+              placeholder="DELETE"
+            />
+            <div className="flex gap-3 mt-4">
+              <Button
+                variant="outline"
+                className="flex-1"
+                onClick={() => {
+                  setShowDeleteModal(false);
+                  setDeleteConfirm("");
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                className="flex-1 bg-red-600 hover:bg-red-700"
+                disabled={deleteConfirm !== "DELETE"}
+                loading={deleting}
+                onClick={handleDeleteAccount}
+              >
+                Delete Account
+              </Button>
             </div>
           </div>
-        )}
-      </div>
-  )
-}
+        </div>
+      )}
+    </div>
+  );
+};
 
-const BillingSettings: React.FC<{ onToast: (msg: string) => void; onError: (msg: string) => void }> = ({ onError }) => {
-  const navigate = useNavigate()
-  const [loading, setLoading] = useState(false)
+const BillingSettings: React.FC<{
+  onToast: (msg: string) => void;
+  onError: (msg: string) => void;
+}> = ({ onError }) => {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
 
   const { data: subscription } = useQuery({
-    queryKey: ['subscription'],
+    queryKey: ["subscription"],
     queryFn: billingAPI.getSubscription,
-  })
+  });
 
   const handlePortal = async () => {
-    setLoading(true)
+    setLoading(true);
     try {
-      const { url } = await billingAPI.createPortal(window.location.href)
-      window.location.href = url
+      const { url } = await billingAPI.createPortal(window.location.href);
+      window.location.href = url;
     } catch (err) {
-      const e = err as { response?: { data?: { detail?: string } } }
-      onError(e.response?.data?.detail || 'Failed to open billing portal')
+      const e = err as { response?: { data?: { detail?: string } } };
+      onError(e.response?.data?.detail || "Failed to open billing portal");
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
-  const plan = subscription?.plan || 'free'
-  const isPaid = plan !== 'free'
+  const plan = subscription?.plan || "free";
+  const isPaid = plan !== "free";
 
-  const planFeatures: Record<string, { published: string; conversations: string; codeExport: string }> = {
-    free:       { published: '1',       conversations: '100/month',    codeExport: '❌ Agency+ only' },
-    starter:    { published: '1',       conversations: '1,500/month',  codeExport: '❌ Agency+ only' },
-    business:   { published: '3',       conversations: '5,000/month',  codeExport: '❌ Agency+ only' },
-    agency:     { published: 'Unlimited', conversations: '20,000/month', codeExport: '✅ Included' },
-    enterprise: { published: 'Unlimited', conversations: 'Unlimited',  codeExport: '✅ Included' },
-  }
-  const features = planFeatures[plan] || planFeatures.free
+  const planFeatures: Record<
+    string,
+    { published: string; conversations: string; codeExport: string }
+  > = {
+    free: {
+      published: "1",
+      conversations: "100/month",
+      codeExport: "❌ Agency+ only",
+    },
+    starter: {
+      published: "1",
+      conversations: "1,500/month",
+      codeExport: "❌ Agency+ only",
+    },
+    business: {
+      published: "3",
+      conversations: "5,000/month",
+      codeExport: "❌ Agency+ only",
+    },
+    agency: {
+      published: "Unlimited",
+      conversations: "20,000/month",
+      codeExport: "✅ Included",
+    },
+    enterprise: {
+      published: "Unlimited",
+      conversations: "Unlimited",
+      codeExport: "✅ Included",
+    },
+  };
+  const features = planFeatures[plan] || planFeatures.free;
 
   return (
-      <div className="space-y-4">
-        <Card className="p-6">
-          <h2 className="font-semibold text-gray-900 mb-4">Current Plan</h2>
-          <div className="flex items-center justify-between mb-4">
-            <div>
-              <span className={`px-3 py-1 text-sm font-semibold rounded-full capitalize ${getPlanColor(plan)}`}>
-                {plan}
-              </span>
-              <p className="text-xs text-gray-500 mt-1">
-                Status:{' '}
-                <span className={subscription?.status === 'active' ? 'text-green-600' : 'text-red-600'}>
-                  {subscription?.status || 'active'}
+    <div className="space-y-6">
+      {/* Current Plan Card - Version with hover effect */}
+      <Card className="group relative overflow-hidden border-0 shadow-lg transition-all duration-300 hover:shadow-2xl">
+        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/5 to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+        <div className="p-6 relative">
+          <div className="flex items-start justify-between mb-6">
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center">
+                  <svg
+                    className="w-4 h-4 text-white"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 14h-2v-2h2v2zm0-4h-2V7h2v5z" />
+                  </svg>
+                </div>
+                <h2 className="text-xl font-bold text-gray-900">
+                  Current Plan
+                </h2>
+              </div>
+
+              <div className="flex items-center gap-3 flex-wrap">
+                <span
+                  className={`inline-flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-full capitalize shadow-sm ${getPlanColor(plan)}`}
+                >
+                  <span className="w-2 h-2 rounded-full bg-current"></span>
+                  {plan}
                 </span>
-              </p>
+                <div className="flex items-center gap-2">
+                  <span className="text-xs text-gray-500">Status:</span>
+                  <span
+                    className={`inline-flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded-full ${
+                      subscription?.status === "active"
+                        ? "bg-green-100 text-green-700"
+                        : "bg-red-100 text-red-700"
+                    }`}
+                  >
+                    <span
+                      className={`w-1.5 h-1.5 rounded-full ${subscription?.status === "active" ? "bg-green-500" : "bg-red-500"}`}
+                    ></span>
+                    {subscription?.status === "active"
+                      ? "Active"
+                      : subscription?.status || "Active"}
+                  </span>
+                </div>
+              </div>
             </div>
+
             {isPaid && subscription?.current_period_end && (
-                <div className="text-right">
-                  <p className="text-xs text-gray-500">Renews on</p>
-                  <p className="text-sm font-medium">{formatDate(subscription.current_period_end)}</p>
-                </div>
+              <div className="text-right bg-gray-50 rounded-lg px-4 py-2">
+                <p className="text-xs text-gray-500 uppercase tracking-wide">
+                  Renewal Date
+                </p>
+                <p className="text-sm font-bold text-gray-900">
+                  {formatDate(subscription.current_period_end)}
+                </p>
+              </div>
             )}
           </div>
 
-          <div className="flex gap-3">
+          <div className="flex gap-3 mt-6">
             {!isPaid ? (
-                <Button onClick={() => navigate('/pricing')} className="flex-1">
-                  Upgrade Plan
-                </Button>
+              <Button
+                onClick={() => navigate("/pricing")}
+                className="w-full bg-gradient-to-r from-primary-600 to-indigo-600 hover:from-primary-700 hover:to-indigo-700 text-white shadow-md hover:shadow-lg transition-all duration-300 rounded-lg py-5 text-base font-semibold group"
+              >
+                <span className="flex items-center justify-center gap-2">
+                  ✨ Upgrade Plan
+                  <svg
+                    className="w-4 h-4 transform group-hover:translate-x-1 transition-transform"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 5l7 7-7 7"
+                    />
+                  </svg>
+                </span>
+              </Button>
             ) : (
-                <Button variant="outline" onClick={handlePortal} loading={loading} className="flex-1">
-                  <ExternalLink className="w-3.5 h-3.5" />
-                  Manage Billing
-                </Button>
+              <Button
+                variant="outline"
+                onClick={handlePortal}
+                loading={loading}
+                className="flex-1 border-gray-300 hover:border-gray-400 hover:bg-gray-50 rounded-lg py-5 text-base font-semibold transition-all duration-300"
+              >
+                <ExternalLink className="w-4 h-4 mr-2" />
+                Manage Billing
+              </Button>
             )}
           </div>
-        </Card>
+        </div>
+      </Card>
 
-        {/* Plan features */}
-        <Card className="p-6">
-          <h3 className="font-semibold text-gray-900 mb-4">Plan Features</h3>
-          <div className="space-y-3">
+      {/* Plan Features Card - Enhanced Version */}
+      <Card className="border-0 shadow-lg overflow-hidden">
+        <div className="bg-gradient-to-r from-gray-50 to-white p-6">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center shadow-md">
+              <svg
+                className="w-5 h-5 text-white"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
+                />
+              </svg>
+            </div>
+            <h3 className="text-lg font-bold text-gray-900">Plan Features</h3>
+          </div>
+
+          <div className="space-y-2">
             {[
-              { label: 'Chatbots published', value: features.published },
-              { label: 'Conversations/month', value: features.conversations },
-              { label: 'Code export', value: features.codeExport },
-            ].map(({ label, value }) => (
-                <div key={label} className="flex justify-between py-2 border-b border-gray-100 last:border-0">
-                  <span className="text-sm text-gray-600">{label}</span>
-                  <span className="text-sm font-medium text-gray-900">{value}</span>
-                </div>
+              {
+                label: "Chatbots published",
+                value: features.published,
+                suffix: "chatbot(s)",
+              },
+              {
+                label: "Conversations / month",
+                value: features.conversations,
+                suffix: "conversations",
+              },
+              {
+                label: "Code export",
+                value: features.codeExport,
+                highlight: features.codeExport,
+              },
+            ].map(({ label, value, suffix, highlight }) => (
+              <div
+                key={label}
+                className="flex items-center justify-between py-3 px-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 group"
+              >
+                <span className="text-sm text-gray-600 group-hover:text-gray-800 transition-colors">
+                  {label}
+                </span>
+                <span
+                  className={`text-sm font-semibold ${highlight === false ? "text-gray-400" : "text-gray-900"}`}
+                >
+                  {value}{" "}
+                  {suffix && (
+                    <span className="text-xs text-gray-400 font-normal">
+                      {suffix}
+                    </span>
+                  )}
+                </span>
+              </div>
             ))}
           </div>
-        </Card>
-      </div>
-  )
-}
+
+          <div className="mt-6 pt-4 border-t border-gray-200 text-center">
+            <p className="text-xs text-gray-500">
+              {isPaid
+                ? "💳 Simplified subscription management"
+                : "🚀 Unlock more features by upgrading your plan"}
+            </p>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};