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] 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" />