diff --git a/.env.example b/.env.example
index cf493c5..09d3f15 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,4 @@
 BACKEND_URL=http://localhost:8000
 GUARDRAILS_URL = http://localhost:8001
-GUARDRAILS_TOKEN = 
+GUARDRAILS_TOKEN =
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
diff --git a/app/(main)/chat/page.tsx b/app/(main)/chat/page.tsx
new file mode 100644
index 0000000..5293579
--- /dev/null
+++ b/app/(main)/chat/page.tsx
@@ -0,0 +1,299 @@
+/**
+ * Chat - conversational interface.
+ */
+
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import Sidebar from "@/app/components/Sidebar";
+import PageHeader from "@/app/components/PageHeader";
+import { useApp } from "@/app/lib/context/AppContext";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useToast } from "@/app/components/Toast";
+import { LoginModal } from "@/app/components/auth";
+import {
+  ChatConfigPicker,
+  ChatEmptyState,
+  ChatInput,
+  ChatMessageList,
+} from "@/app/components/chat";
+import { useConfigs } from "@/app/hooks";
+import {
+  configToBlob,
+  createLLMCall,
+  extractAssistantText,
+  pollLLMCall,
+} from "@/app/lib/chatClient";
+import { useChatStore } from "@/app/lib/store/chat";
+import { ChatMessage, LLMCallRequest } from "@/app/lib/types/chat";
+
+function genId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export default function ChatPage() {
+  const { sidebarCollapsed } = useApp();
+  const { isAuthenticated, activeKey, isHydrated } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+  const toast = useToast();
+  const { configs, loadSingleVersion, allConfigMeta } = useConfigs({
+    pageSize: 0,
+  });
+
+  const messages = useChatStore((s) => s.messages);
+  const conversationId = useChatStore((s) => s.conversationId);
+  const configId = useChatStore((s) => s.configId);
+  const configVersion = useChatStore((s) => s.configVersion);
+  const chatHydrated = useChatStore((s) => s.hasHydrated);
+  const appendMessages = useChatStore((s) => s.appendMessages);
+  const updateMessageInStore = useChatStore((s) => s.updateMessage);
+  const setConversationId = useChatStore((s) => s.setConversationId);
+  const setConfig = useChatStore((s) => s.setConfig);
+  const clearConversation = useChatStore((s) => s.clearConversation);
+
+  const [draft, setDraft] = useState("");
+  const [isPending, setIsPending] = useState(false);
+  const [showLoginModal, setShowLoginModal] = useState(false);
+
+  const abortRef = useRef<AbortController | null>(null);
+
+  // Trigger persisted-state rehydration on mount.
+  useEffect(() => {
+    useChatStore.persist.rehydrate();
+  }, []);
+
+  // Cancel any in-flight poll when leaving the page.
+  useEffect(() => {
+    return () => abortRef.current?.abort();
+  }, []);
+
+  const handleNewChat = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    clearConversation();
+    setIsPending(false);
+  }, [clearConversation]);
+
+  const handleConfigSelect = useCallback(
+    (newConfigId: string, newVersion: number) => {
+      const isDifferent =
+        newConfigId !== configId || newVersion !== configVersion;
+      setConfig(newConfigId, newVersion);
+      if (isDifferent) {
+        clearConversation();
+      }
+    },
+    [clearConversation, configId, configVersion, setConfig],
+  );
+
+  const sendMessage = useCallback(
+    async (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed) return;
+
+      if (!isAuthenticated) {
+        setShowLoginModal(true);
+        return;
+      }
+      if (!configId || !configVersion) {
+        if (allConfigMeta.length === 0) {
+          toast.error(
+            "No configurations yet — create one in Configurations → Prompt Editor first.",
+          );
+        } else {
+          toast.error("Select a configuration before sending a message.");
+        }
+        return;
+      }
+
+      const userMessage: ChatMessage = {
+        id: genId(),
+        role: "user",
+        content: trimmed,
+        createdAt: Date.now(),
+        status: "complete",
+      };
+      const assistantMessage: ChatMessage = {
+        id: genId(),
+        role: "assistant",
+        content: "",
+        createdAt: Date.now(),
+        status: "pending",
+      };
+
+      appendMessages(userMessage, assistantMessage);
+      setDraft("");
+      setIsPending(true);
+
+      const controller = new AbortController();
+      abortRef.current?.abort();
+      abortRef.current = controller;
+
+      try {
+        const cached = configs.find(
+          (c) => c.config_id === configId && c.version === configVersion,
+        );
+        const fullConfig =
+          cached ?? (await loadSingleVersion(configId, configVersion));
+        if (!fullConfig) {
+          throw new Error(
+            "Couldn't load the selected configuration. Try picking it again.",
+          );
+        }
+
+        const payload: LLMCallRequest = {
+          query: {
+            input: trimmed,
+            conversation: conversationId
+              ? { id: conversationId }
+              : { auto_create: true },
+          },
+          config: { blob: configToBlob(fullConfig) },
+          include_provider_raw_response: true,
+        };
+
+        const created = await createLLMCall(payload, apiKey);
+        if (!created.success || !created.data?.job_id) {
+          throw new Error(created.error || "Failed to start the request");
+        }
+        const jobId = created.data.job_id;
+        updateMessageInStore(assistantMessage.id, { jobId });
+
+        const result = await pollLLMCall(jobId, apiKey, {
+          signal: controller.signal,
+        });
+
+        const text = extractAssistantText(result.llm_response?.response);
+        const newConversationId =
+          result.llm_response?.response?.conversation_id ?? conversationId;
+        if (newConversationId && newConversationId !== conversationId) {
+          setConversationId(newConversationId);
+        }
+
+        updateMessageInStore(assistantMessage.id, {
+          content:
+            text ||
+            "(The assistant returned an empty response — try again or pick a different configuration.)",
+          status: "complete",
+        });
+      } catch (err) {
+        if ((err as Error)?.name === "AbortError") {
+          updateMessageInStore(assistantMessage.id, {
+            status: "error",
+            content: "Cancelled.",
+            error: "Cancelled",
+          });
+          return;
+        }
+        const message =
+          err instanceof Error ? err.message : "Something went wrong";
+        updateMessageInStore(assistantMessage.id, {
+          status: "error",
+          content: message,
+          error: message,
+        });
+        toast.error(message);
+      } finally {
+        if (abortRef.current === controller) {
+          abortRef.current = null;
+        }
+        setIsPending(false);
+      }
+    },
+    [
+      allConfigMeta,
+      apiKey,
+      appendMessages,
+      configId,
+      configVersion,
+      configs,
+      conversationId,
+      isAuthenticated,
+      loadSingleVersion,
+      setConversationId,
+      toast,
+      updateMessageInStore,
+    ],
+  );
+
+  const hasConversation = messages.length > 0;
+  const hasConfig = !!configId && !!configVersion;
+  const isReady = isHydrated && chatHydrated;
+
+  return (
+    <div className="w-full h-screen flex flex-col bg-bg-secondary">
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar collapsed={sidebarCollapsed} activeRoute="/chat" />
+
+        <div className="flex-1 flex flex-col overflow-hidden bg-bg-primary">
+          <PageHeader
+            title="Chat"
+            subtitle="Ask anything - answers come from your selected configuration"
+            actions={
+              hasConversation ? (
+                <button
+                  type="button"
+                  onClick={handleNewChat}
+                  className="px-3 py-1.5 rounded-full text-xs font-medium border border-border bg-bg-primary text-text-primary hover:bg-neutral-50 transition-colors cursor-pointer"
+                >
+                  New chat
+                </button>
+              ) : null
+            }
+          />
+
+          {!isReady ? (
+            <div className="flex-1" />
+          ) : hasConversation ? (
+            <ChatMessageList messages={messages} />
+          ) : (
+            <ChatEmptyState
+              hasConfig={hasConfig}
+              isAuthenticated={isAuthenticated}
+              onSuggestion={(text) => {
+                if (!isAuthenticated) {
+                  setShowLoginModal(true);
+                  return;
+                }
+                sendMessage(text);
+              }}
+            />
+          )}
+
+          <ChatInput
+            value={draft}
+            onChange={setDraft}
+            onSend={() => sendMessage(draft)}
+            isPending={isPending}
+            placeholder={
+              !isAuthenticated
+                ? "Log in to start chatting…"
+                : !hasConfig
+                  ? "Select a configuration to start chatting…"
+                  : "Message your assistant…"
+            }
+            trailingAccessory={
+              isAuthenticated ? (
+                <ChatConfigPicker
+                  configId={configId}
+                  version={configVersion}
+                  onSelect={handleConfigSelect}
+                  disabled={isPending}
+                  openUp
+                />
+              ) : null
+            }
+          />
+        </div>
+      </div>
+
+      <LoginModal
+        open={showLoginModal}
+        onClose={() => setShowLoginModal(false)}
+      />
+    </div>
+  );
+}
diff --git a/app/(main)/document/page.tsx b/app/(main)/document/page.tsx
index 368547e..ac1b5a6 100644
--- a/app/(main)/document/page.tsx
+++ b/app/(main)/document/page.tsx
@@ -191,7 +191,7 @@ export default function DocumentPage() {
           />
 
           <div className="flex-1 overflow-hidden flex bg-bg-secondary">
-            <div className="w-1/3 border-r overflow-hidden border-[hsl(0,0%,85%)]">
+            <div className="w-1/3 border-r border-r-status-default-border overflow-hidden">
               <DocumentListing
                 documents={documents}
                 selectedDocument={selectedDocument}
diff --git a/app/(main)/settings/credentials/page.tsx b/app/(main)/settings/credentials/page.tsx
index 3ca22c1..6a8ca7e 100644
--- a/app/(main)/settings/credentials/page.tsx
+++ b/app/(main)/settings/credentials/page.tsx
@@ -176,7 +176,7 @@ export default function CredentialsPage() {
   };
 
   return (
-    <div className="w-full h-screen flex flex-col bg-bg-secondary">
+    <div className="w-full h-screen flex flex-col bg-bg-primary">
       <div className="flex flex-1 overflow-hidden">
         <SettingsSidebar />
 
@@ -192,7 +192,7 @@ export default function CredentialsPage() {
               selectedProvider={selectedProvider}
               credentials={credentials}
               onSelect={setSelectedProvider}
-              className="w-56 border-r border-border overflow-y-auto bg-bg-secondary"
+              className="w-56 border-r border-border overflow-y-auto bg-bg-primary"
             />
 
             <div className="flex-1 overflow-y-auto p-8">
diff --git a/app/(main)/settings/onboarding/page.tsx b/app/(main)/settings/onboarding/page.tsx
index b7e2197..d1d4eb5 100644
--- a/app/(main)/settings/onboarding/page.tsx
+++ b/app/(main)/settings/onboarding/page.tsx
@@ -81,6 +81,7 @@ export default function OnboardingPage() {
     isLoadingMore,
     hasMore,
     loadMore,
+    refetch: refetchOrganizations,
   } = usePaginatedList<Organization>({
     endpoint: "/api/organization",
     limit: DEFAULT_PAGE_LIMIT,
@@ -147,6 +148,17 @@ export default function OnboardingPage() {
     setView("success");
   };
 
+  const handleOnboardAnother = () => {
+    setOnboardData(null);
+    setView("form");
+  };
+
+  const handleBackToOrgsFromSuccess = () => {
+    setOnboardData(null);
+    refetchOrganizations();
+    setView("list");
+  };
+
   const handleSelectProject = (project: Project) => {
     setSelectedProject(project);
     setView("users");
@@ -165,7 +177,7 @@ export default function OnboardingPage() {
   };
 
   return (
-    <div className="w-full h-screen flex flex-col bg-bg-secondary">
+    <div className="w-full h-screen flex flex-col bg-bg-primary">
       <div className="flex flex-1 overflow-hidden">
         <SettingsSidebar />
 
@@ -293,7 +305,11 @@ export default function OnboardingPage() {
                     />
                   </div>
 
-                  <OnboardingSuccess data={onboardData} />
+                  <OnboardingSuccess
+                    data={onboardData}
+                    onOnboardAnother={handleOnboardAnother}
+                    onBackToList={handleBackToOrgsFromSuccess}
+                  />
                 </>
               )}
             </div>
diff --git a/app/api/llm/call/[job_id]/route.ts b/app/api/llm/call/[job_id]/route.ts
new file mode 100644
index 0000000..4486e29
--- /dev/null
+++ b/app/api/llm/call/[job_id]/route.ts
@@ -0,0 +1,25 @@
+import { NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ job_id: string }> },
+) {
+  const { job_id } = await params;
+  try {
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/llm/call/${job_id}`,
+    );
+    return NextResponse.json(data, { status });
+  } catch (error) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+        data: null,
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/llm/call/route.ts b/app/api/llm/call/route.ts
new file mode 100644
index 0000000..33c5b37
--- /dev/null
+++ b/app/api/llm/call/route.ts
@@ -0,0 +1,27 @@
+/**
+ * The browser polls the resulting job via GET /api/llm/call/{job_id} until it
+ * completes.
+ */
+
+import { NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { status, data } = await apiClient(request, "/api/v1/llm/call", {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
+    return NextResponse.json(data, { status });
+  } catch (error) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+        data: null,
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index c36032a..dc8238e 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes, ReactNode } from "react";
 
-type ButtonVariant = "primary" | "outline" | "ghost" | "danger";
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
 type ButtonSize = "sm" | "md" | "lg";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -16,6 +16,10 @@ const variantStyles: Record<ButtonVariant, { base: string; disabled: string }> =
       base: "bg-accent-primary text-white hover:bg-accent-hover",
       disabled: "bg-neutral-200 text-text-secondary cursor-not-allowed",
     },
+    secondary: {
+      base: "bg-accent-secondary text-text-primary hover:bg-accent-secondary-hover",
+      disabled: "bg-neutral-200 text-text-secondary cursor-not-allowed",
+    },
     outline: {
       base: "bg-white text-text-primary border border-border hover:bg-neutral-50",
       disabled:
diff --git a/app/components/PageHeader.tsx b/app/components/PageHeader.tsx
index 2d13227..3a733af 100644
--- a/app/components/PageHeader.tsx
+++ b/app/components/PageHeader.tsx
@@ -32,13 +32,15 @@ export default function PageHeader({
     <>
       <div className="border-b px-4 py-3 flex items-center justify-between shrink-0 bg-bg-primary border-border">
         <div className="flex items-center gap-3">
-          <button
-            onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-            className="p-1.5 rounded-md text-text-secondary"
-            aria-label="Toggle sidebar"
-          >
-            <MenuIcon className="w-5 h-5" />
-          </button>
+          {sidebarCollapsed && (
+            <button
+              onClick={() => setSidebarCollapsed(false)}
+              className="p-1.5 rounded-md text-text-secondary hover:bg-neutral-100 transition-colors cursor-pointer"
+              aria-label="Open sidebar"
+            >
+              <MenuIcon className="w-5 h-5" />
+            </button>
+          )}
           {children ?? (
             <div>
               {title && (
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 9fcd585..db14326 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -9,6 +9,7 @@ import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { useAuth } from "@/app/lib/context/AuthContext";
+import { useApp } from "@/app/lib/context/AppContext";
 import {
   ClipboardIcon,
   DocumentFileIcon,
@@ -17,6 +18,8 @@ import {
   SlidersIcon,
   ShieldCheckIcon,
   ChevronRightIcon,
+  ChevronLeftIcon,
+  ChatIcon,
 } from "@/app/components/icons";
 import { LoginModal } from "@/app/components/auth";
 import { Branding, UserMenuPopover } from "@/app/components/user-menu";
@@ -24,15 +27,15 @@ import GatePopover from "@/app/components/GatePopover";
 import { NAV_ITEMS } from "@/app/lib/navConfig";
 import { MenuItem, SidebarProps } from "@/app/lib/types/nav";
 
-/** Routes that are always accessible without auth */
-const PUBLIC_ROUTES = new Set(["/evaluations"]);
+const PUBLIC_ROUTES = new Set(["/", "/chat"]);
 
 export default function Sidebar({
   collapsed,
-  activeRoute = "/evaluations",
+  activeRoute = "/chat",
 }: SidebarProps) {
   const router = useRouter();
   const { currentUser, googleProfile, isAuthenticated, logout } = useAuth();
+  const { setSidebarCollapsed } = useApp();
   const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({
     Evaluations: true,
     Configurations: false,
@@ -109,6 +112,7 @@ export default function Sidebar({
   };
 
   const iconMap: Record<string, React.ReactNode> = {
+    chat: <ChatIcon />,
     clipboard: <ClipboardIcon />,
     document: <DocumentFileIcon />,
     book: <BookOpenIcon />,
@@ -145,9 +149,18 @@ export default function Sidebar({
 
   return (
     <aside
-      className={`border-r border-border transition-all duration-300 ease-in-out h-full shrink-0 flex flex-col bg-bg-secondary ${collapsed ? "w-0 overflow-hidden" : "w-60"}`}
+      className={`border-r border-border transition-all duration-300 ease-in-out h-full shrink-0 flex flex-col bg-bg-primary ${collapsed ? "w-0 overflow-hidden" : "w-60"}`}
     >
-      <Branding />
+      <div className="relative">
+        <Branding />
+        <button
+          onClick={() => setSidebarCollapsed(true)}
+          className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 rounded-md text-text-secondary hover:bg-neutral-100 hover:text-text-primary transition-colors cursor-pointer"
+          aria-label="Collapse sidebar"
+        >
+          <ChevronLeftIcon className="w-4 h-4" />
+        </button>
+      </div>
 
       <nav className="p-3 space-y-1 flex-1 overflow-y-auto w-60">
         {navItems.map((item) => {
@@ -180,12 +193,12 @@ export default function Sidebar({
                     router.push(item.route);
                   }
                 }}
-                className={`w-full text-left px-3 py-2 rounded-lg text-[14px] flex items-center gap-2.5 transition-all duration-150 border ${
+                className={`w-full text-left px-3 py-2 rounded-lg text-[14px] flex items-center gap-2.5 transition-all duration-150 border cursor-pointer ${
                   isActive
-                    ? "bg-neutral-100 text-text-primary font-semibold border-border"
+                    ? "bg-accent-primary/15 text-accent-primary font-semibold border-transparent"
                     : hasActiveChild
-                      ? "bg-transparent text-text-primary font-semibold border-transparent"
-                      : "bg-transparent text-black font-medium border-transparent hover:bg-neutral-100"
+                      ? "bg-transparent text-accent-primary font-semibold border-transparent"
+                      : "bg-transparent text-text-secondary font-medium border-transparent hover:bg-neutral-100 hover:text-text-primary"
                 }`}
               >
                 <span
@@ -206,7 +219,7 @@ export default function Sidebar({
               </button>
 
               {hasSubmenu && isExpanded && !gated && (
-                <div className="ml-3 mt-1 space-y-0.5 overflow-hidden border-l-2 border-border pl-3 animate-[slideDown_0.15s_ease-out]">
+                <div className="ml-5 mt-1 space-y-0.5 overflow-hidden border-l-2 border-border pl-3 animate-[slideDown_0.15s_ease-out]">
                   {item.submenu?.map((subItem) => {
                     const hasNestedSubmenu =
                       subItem.submenu && subItem.submenu.length > 0;
@@ -235,12 +248,12 @@ export default function Sidebar({
                               router.push(subItem.route);
                             }
                           }}
-                          className={`w-full text-left px-3 py-1.5 rounded-md text-[13px] flex items-center justify-between gap-2 transition-all duration-150 border ${
+                          className={`w-full text-left px-3 py-1.5 rounded-md text-[13px] flex items-center justify-between gap-2 transition-all duration-150 border cursor-pointer ${
                             isSubActive
-                              ? "bg-neutral-100 text-text-primary font-medium border-border"
+                              ? "bg-accent-primary/15 text-accent-primary font-medium border-transparent"
                               : hasActiveNestedChild
-                                ? "bg-transparent text-text-primary font-medium border-transparent"
-                                : "bg-transparent text-black font-normal border-transparent hover:bg-neutral-100"
+                                ? "bg-transparent text-accent-primary font-medium border-transparent"
+                                : "bg-transparent text-text-secondary font-normal border-transparent hover:bg-neutral-100 hover:text-text-primary"
                           }`}
                         >
                           <span className="flex-1">{subItem.name}</span>
@@ -270,10 +283,10 @@ export default function Sidebar({
                                     nestedItem.route &&
                                     router.push(nestedItem.route)
                                   }
-                                  className={`w-full text-left px-2.5 py-1 rounded-md text-[13px] flex items-center justify-between gap-2 transition-all duration-150 border ${
+                                  className={`w-full text-left px-2.5 py-1 rounded-md text-[13px] flex items-center justify-between gap-2 transition-all duration-150 border cursor-pointer ${
                                     isNestedActive
-                                      ? "bg-neutral-100 text-text-primary font-medium border-border"
-                                      : "bg-transparent text-black font-normal border-transparent hover:bg-neutral-100"
+                                      ? "bg-accent-primary/15 text-accent-primary font-medium border-transparent"
+                                      : "bg-transparent text-text-secondary font-normal border-transparent hover:bg-neutral-100 hover:text-text-primary"
                                   }`}
                                 >
                                   <span>{nestedItem.name}</span>
@@ -326,7 +339,7 @@ export default function Sidebar({
                   referrerPolicy="no-referrer"
                 />
               ) : (
-                <div className="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center shrink-0">
+                <div className="w-8 h-8 rounded-full bg-accent-primary flex items-center justify-center shrink-0">
                   <span className="text-xs font-semibold text-white">
                     {(currentUser?.full_name || currentUser?.email || "U")
                       .charAt(0)
@@ -348,7 +361,7 @@ export default function Sidebar({
           </div>
         ) : !isAuthenticated ? (
           <div className="px-4 py-4 w-60 border-t border-border">
-            <div className="rounded-lg bg-neutral-50 py-3">
+            <div className="p-2">
               <p className="text-sm font-bold text-text-primary">
                 Get full access
               </p>
@@ -357,7 +370,7 @@ export default function Sidebar({
               </p>
               <button
                 onClick={() => setShowLoginModal(true)}
-                className="mt-3 w-full py-2 rounded-full border border-border bg-white text-sm font-medium text-text-primary hover:bg-neutral-50 transition-colors"
+                className="mt-3 w-full py-2 rounded-full bg-accent-primary text-white text-sm font-medium hover:bg-accent-hover transition-colors cursor-pointer"
               >
                 Log in
               </button>
diff --git a/app/components/auth/TokenVerifyPage.tsx b/app/components/auth/TokenVerifyPage.tsx
index cb31452..044c7bf 100644
--- a/app/components/auth/TokenVerifyPage.tsx
+++ b/app/components/auth/TokenVerifyPage.tsx
@@ -110,7 +110,7 @@ export default function TokenVerifyPage({
 
       if (elapsed >= duration) {
         clearInterval(timer);
-        router.push("/evaluations");
+        router.push("/chat");
       }
     }, interval);
 
@@ -213,7 +213,7 @@ export default function TokenVerifyPage({
 
             {status === "error" && (
               <div className="mt-8 space-y-3">
-                <Button fullWidth onClick={() => router.push("/evaluations")}>
+                <Button fullWidth onClick={() => router.push("/chat")}>
                   Go to Dashboard
                 </Button>
                 <button
diff --git a/app/components/chat/ChatConfigPicker.tsx b/app/components/chat/ChatConfigPicker.tsx
new file mode 100644
index 0000000..cc3e12d
--- /dev/null
+++ b/app/components/chat/ChatConfigPicker.tsx
@@ -0,0 +1,226 @@
+/**
+ * ChatConfigPicker - Compact dropdown to choose which configuration drives
+ */
+
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useConfigs } from "@/app/hooks";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  GearIcon,
+  SpinnerIcon,
+} from "@/app/components/icons";
+
+interface ChatConfigPickerProps {
+  configId: string;
+  version: number;
+  onSelect: (configId: string, version: number) => void;
+  disabled?: boolean;
+  /** Open the dropdown above the trigger (default: below). */
+  openUp?: boolean;
+  /** Anchor the dropdown to the trigger's left edge (default: right edge). */
+  alignLeft?: boolean;
+}
+
+export default function ChatConfigPicker({
+  configId,
+  version,
+  onSelect,
+  disabled = false,
+  openUp = false,
+  alignLeft = false,
+}: ChatConfigPickerProps) {
+  const router = useRouter();
+  const {
+    configs,
+    isLoading,
+    allConfigMeta,
+    versionItemsMap,
+    loadVersionsForConfig,
+  } = useConfigs({ pageSize: 0 });
+
+  const [open, setOpen] = useState(false);
+  const [expandedConfigId, setExpandedConfigId] = useState<string | null>(null);
+  const [loadingVersions, setLoadingVersions] = useState<Set<string>>(
+    new Set(),
+  );
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e: MouseEvent) => {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, [open]);
+
+  const selectedName = useMemo(() => {
+    if (!configId) return undefined;
+    const meta = allConfigMeta.find((m) => m.id === configId);
+    if (meta) return meta.name;
+    const cached = configs.find(
+      (c) => c.config_id === configId && c.version === version,
+    );
+    return cached?.name;
+  }, [configId, version, allConfigMeta, configs]);
+
+  const toggleGroup = async (id: string) => {
+    if (expandedConfigId === id) {
+      setExpandedConfigId(null);
+      return;
+    }
+    setExpandedConfigId(id);
+    if (!versionItemsMap[id] && !loadingVersions.has(id)) {
+      setLoadingVersions((prev) => new Set(prev).add(id));
+      try {
+        await loadVersionsForConfig(id);
+      } finally {
+        setLoadingVersions((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      }
+    }
+  };
+
+  const handlePick = (cId: string, v: number) => {
+    onSelect(cId, v);
+    setOpen(false);
+  };
+
+  const label = isLoading
+    ? "Loading…"
+    : selectedName
+      ? `${selectedName}${version ? ` (v${version})` : ""}`
+      : allConfigMeta.length === 0
+        ? "No configurations"
+        : "Select a configuration";
+
+  return (
+    <div className="relative" ref={wrapperRef}>
+      <button
+        type="button"
+        onClick={() => !disabled && setOpen((prev) => !prev)}
+        disabled={disabled || isLoading}
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border bg-bg-primary text-[13px] font-medium text-text-primary hover:bg-neutral-50 transition-colors disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
+      >
+        <GearIcon className="w-3.5 h-3.5 text-text-secondary" />
+        <span className="max-w-[220px] truncate">{label}</span>
+        <ChevronDownIcon className="w-3.5 h-3.5 text-text-secondary" />
+      </button>
+
+      {open && (
+        <div
+          className={`absolute ${alignLeft ? "left-0" : "right-0"} ${openUp ? "bottom-full mb-2" : "top-full mt-2"} w-[320px] rounded-lg border border-border bg-bg-primary shadow-lg z-50 max-h-80 overflow-y-auto`}
+        >
+          {allConfigMeta.length === 0 ? (
+            <div className="px-4 py-6 text-center">
+              <p className="text-sm font-medium text-text-primary">
+                No configurations yet
+              </p>
+              <p className="text-xs text-text-secondary mt-1">
+                Create one in the Prompt Editor to start chatting.
+              </p>
+              <button
+                onClick={() => {
+                  setOpen(false);
+                  router.push("/configurations/prompt-editor?new=true");
+                }}
+                className="mt-3 px-3 py-1.5 rounded-md text-xs font-medium bg-accent-primary text-white hover:bg-accent-hover cursor-pointer"
+              >
+                Create Config
+              </button>
+            </div>
+          ) : (
+            allConfigMeta.map((meta) => {
+              const isExpanded = expandedConfigId === meta.id;
+              const isLoadingGroup = loadingVersions.has(meta.id);
+              const items = versionItemsMap[meta.id] ?? [];
+              return (
+                <div
+                  key={meta.id}
+                  className="border-b border-border last:border-b-0"
+                >
+                  <button
+                    type="button"
+                    onClick={() => toggleGroup(meta.id)}
+                    className="w-full px-3 py-2 flex items-center justify-between text-left hover:bg-neutral-50 cursor-pointer"
+                  >
+                    <span className="text-sm font-medium text-text-primary truncate">
+                      {meta.name}
+                      {items.length > 0 && (
+                        <span className="ml-2 text-xs font-normal text-text-secondary">
+                          {items.length} version{items.length !== 1 ? "s" : ""}
+                        </span>
+                      )}
+                    </span>
+                    <span className="flex items-center gap-1 text-text-secondary shrink-0">
+                      {isLoadingGroup && <SpinnerIcon />}
+                      {isExpanded ? (
+                        <ChevronUpIcon className="w-3.5 h-3.5" />
+                      ) : (
+                        <ChevronDownIcon className="w-3.5 h-3.5" />
+                      )}
+                    </span>
+                  </button>
+                  {isExpanded && (
+                    <div className="bg-bg-secondary">
+                      {isLoadingGroup ? (
+                        <div className="px-4 py-3 text-xs text-text-secondary">
+                          Loading versions…
+                        </div>
+                      ) : items.length === 0 ? (
+                        <div className="px-4 py-3 text-xs text-text-secondary">
+                          No versions available
+                        </div>
+                      ) : (
+                        items.map((item) => {
+                          const isSelected =
+                            configId === item.config_id &&
+                            version === item.version;
+                          return (
+                            <button
+                              key={item.id}
+                              type="button"
+                              onClick={() =>
+                                handlePick(item.config_id, item.version)
+                              }
+                              className="w-full px-4 py-2 flex items-center justify-between text-left hover:bg-neutral-100 transition-colors cursor-pointer"
+                            >
+                              <span className="flex items-center gap-2 min-w-0">
+                                <span className="text-xs px-1.5 py-0.5 rounded bg-bg-primary text-text-secondary border border-border">
+                                  v{item.version}
+                                </span>
+                                <span className="text-sm text-text-primary truncate">
+                                  {item.commit_message || "No message"}
+                                </span>
+                              </span>
+                              {isSelected && (
+                                <CheckIcon className="w-4 h-4 text-status-success shrink-0" />
+                              )}
+                            </button>
+                          );
+                        })
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/chat/ChatEmptyState.tsx b/app/components/chat/ChatEmptyState.tsx
new file mode 100644
index 0000000..1c33662
--- /dev/null
+++ b/app/components/chat/ChatEmptyState.tsx
@@ -0,0 +1,61 @@
+/**
+ * ChatEmptyState - Welcome surface shown when the conversation is empty.
+ */
+
+"use client";
+
+import { ChatIcon } from "@/app/components/icons";
+
+interface ChatEmptyStateProps {
+  hasConfig: boolean;
+  isAuthenticated: boolean;
+  onSuggestion?: (text: string) => void;
+}
+
+const SUGGESTIONS = [
+  "Why evaluation is important",
+  "What is cosine similarity",
+  "What should be ideal score for evaluation results",
+  "How much it cost to run program with AI",
+];
+
+export default function ChatEmptyState({
+  hasConfig,
+  isAuthenticated,
+  onSuggestion,
+}: ChatEmptyStateProps) {
+  return (
+    <div className="flex-1 flex items-center justify-center px-6 py-10">
+      <div className="w-full max-w-2xl text-center">
+        <div className="w-12 h-12 mx-auto rounded-full bg-accent-primary text-white flex items-center justify-center">
+          <ChatIcon className="w-6 h-6" />
+        </div>
+        <h2 className="mt-5 text-2xl font-semibold tracking-tight text-text-primary">
+          What can I help with?
+        </h2>
+        <p className="mt-2 text-sm text-text-secondary">
+          {!isAuthenticated
+            ? "Log in to start chatting with your assistants."
+            : !hasConfig
+              ? "Pick a configuration above to choose which assistant answers."
+              : "Ask anything — your conversation history is kept in this session."}
+        </p>
+
+        {isAuthenticated && hasConfig && onSuggestion && (
+          <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-2.5">
+            {SUGGESTIONS.map((s) => (
+              <button
+                key={s}
+                type="button"
+                onClick={() => onSuggestion(s)}
+                className="text-left text-sm text-text-primary px-4 py-3 rounded-xl border border-border bg-bg-primary hover:bg-neutral-50 transition-colors cursor-pointer"
+              >
+                {s}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/chat/ChatInput.tsx b/app/components/chat/ChatInput.tsx
new file mode 100644
index 0000000..3f327f0
--- /dev/null
+++ b/app/components/chat/ChatInput.tsx
@@ -0,0 +1,94 @@
+/**
+ * ChatInput - Auto-growing textarea with a send button.
+ */
+
+"use client";
+
+import { KeyboardEvent, ReactNode, useEffect, useRef } from "react";
+import { SendIcon } from "@/app/components/icons";
+
+interface ChatInputProps {
+  value: string;
+  onChange: (next: string) => void;
+  onSend: () => void;
+  disabled?: boolean;
+  isPending?: boolean;
+  placeholder?: string;
+  helperText?: string;
+  trailingAccessory?: ReactNode;
+}
+
+const MAX_HEIGHT_PX = 200;
+
+export default function ChatInput({
+  value,
+  onChange,
+  onSend,
+  disabled = false,
+  isPending = false,
+  placeholder = "Message…",
+  helperText,
+  trailingAccessory,
+}: ChatInputProps) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT_PX)}px`;
+  }, [value]);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (!disabled && !isPending && value.trim()) onSend();
+    }
+  };
+
+  const canSend = !disabled && !isPending && value.trim().length > 0;
+
+  return (
+    <div className="px-4 sm:px-6 pb-6 pt-2 bg-bg-primary">
+      <div className="max-w-3xl mx-auto">
+        <div className="rounded-3xl border border-border bg-bg-primary shadow-[0_2px_12px_rgba(0,0,0,0.04)] transition-colors">
+          <textarea
+            ref={ref}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            rows={1}
+            className="block w-full resize-none bg-transparent text-[15px] leading-6 px-5 pt-3 pb-1 outline-none placeholder:text-text-secondary disabled:opacity-60"
+            style={{ maxHeight: MAX_HEIGHT_PX }}
+          />
+          <div className="flex items-center gap-2 px-3 pb-2 pt-1">
+            <div className="flex-1" />
+            {trailingAccessory && (
+              <div className="flex items-center gap-2 min-w-0">
+                {trailingAccessory}
+              </div>
+            )}
+            <button
+              type="button"
+              onClick={onSend}
+              disabled={!canSend}
+              aria-label="Send message"
+              className={`shrink-0 w-9 h-9 rounded-full flex items-center justify-center transition-colors ${
+                canSend
+                  ? "bg-accent-primary text-white hover:bg-accent-secondary cursor-pointer"
+                  : "bg-neutral-200 text-text-secondary cursor-not-allowed"
+              }`}
+            >
+              <SendIcon className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+        <p className="text-center text-[11px] text-text-secondary mt-2">
+          {helperText ?? "Press Enter to send, Shift+Enter for a new line."}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/chat/ChatMessage.tsx b/app/components/chat/ChatMessage.tsx
new file mode 100644
index 0000000..456fb6e
--- /dev/null
+++ b/app/components/chat/ChatMessage.tsx
@@ -0,0 +1,62 @@
+/**
+ * ChatMessage - Renders a single message bubble (user or assistant).
+ */
+
+"use client";
+
+import { ChatMessage as ChatMessageType } from "@/app/lib/types/chat";
+import { ChatIcon } from "@/app/components/icons";
+
+interface ChatMessageProps {
+  message: ChatMessageType;
+}
+
+function ThinkingDots() {
+  return (
+    <div className="flex items-center gap-1.5 py-1">
+      <span className="w-1.5 h-1.5 rounded-full bg-text-secondary animate-[chat-pulse_1.4s_ease-in-out_infinite]" />
+      <span className="w-1.5 h-1.5 rounded-full bg-text-secondary animate-[chat-pulse_1.4s_ease-in-out_0.2s_infinite]" />
+      <span className="w-1.5 h-1.5 rounded-full bg-text-secondary animate-[chat-pulse_1.4s_ease-in-out_0.4s_infinite]" />
+    </div>
+  );
+}
+
+export default function ChatMessage({ message }: ChatMessageProps) {
+  const isUser = message.role === "user";
+  const isPending = message.status === "pending";
+  const isError = message.status === "error";
+
+  if (isUser) {
+    return (
+      <div className="flex justify-end px-4 sm:px-6">
+        <div className="max-w-[85%] sm:max-w-[75%] rounded-2xl bg-neutral-100 px-4 py-2.5 text-[15px] leading-relaxed text-text-primary whitespace-pre-wrap break-words">
+          {message.content}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-3 px-4 sm:px-6">
+      <div className="w-8 h-8 rounded-full bg-accent-primary text-white flex items-center justify-center shrink-0 mt-1">
+        <ChatIcon className="w-4 h-4" />
+      </div>
+      <div className="flex-1 min-w-0 pt-1">
+        {isPending && !message.content ? (
+          <ThinkingDots />
+        ) : (
+          <div
+            className={`text-[15px] leading-relaxed whitespace-pre-wrap break-words ${
+              isError ? "text-status-error" : "text-text-primary"
+            }`}
+          >
+            {message.content}
+            {isPending && message.content && (
+              <span className="inline-block w-1.5 h-4 ml-0.5 align-text-bottom bg-text-primary animate-pulse" />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/chat/ChatMessageList.tsx b/app/components/chat/ChatMessageList.tsx
new file mode 100644
index 0000000..a3cba56
--- /dev/null
+++ b/app/components/chat/ChatMessageList.tsx
@@ -0,0 +1,32 @@
+/**
+ * ChatMessageList - Scrollable container for chat messages with auto-scroll on append.
+ */
+
+"use client";
+
+import { useEffect, useRef } from "react";
+import { ChatMessage as ChatMessageType } from "@/app/lib/types/chat";
+import ChatMessage from "@/app/components/chat/ChatMessage";
+
+interface ChatMessageListProps {
+  messages: ChatMessageType[];
+}
+
+export default function ChatMessageList({ messages }: ChatMessageListProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+  }, [messages]);
+
+  return (
+    <div className="flex-1 overflow-y-auto">
+      <div className="max-w-3xl mx-auto py-6 space-y-6">
+        {messages.map((message) => (
+          <ChatMessage key={message.id} message={message} />
+        ))}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/chat/index.ts b/app/components/chat/index.ts
new file mode 100644
index 0000000..241de39
--- /dev/null
+++ b/app/components/chat/index.ts
@@ -0,0 +1,5 @@
+export { default as ChatMessage } from "./ChatMessage";
+export { default as ChatMessageList } from "./ChatMessageList";
+export { default as ChatInput } from "./ChatInput";
+export { default as ChatConfigPicker } from "./ChatConfigPicker";
+export { default as ChatEmptyState } from "./ChatEmptyState";
diff --git a/app/components/document/DocumentListing.tsx b/app/components/document/DocumentListing.tsx
index edfe30a..c0cab19 100644
--- a/app/components/document/DocumentListing.tsx
+++ b/app/components/document/DocumentListing.tsx
@@ -88,8 +88,8 @@ export function DocumentListing({
                 onClick={() => onSelect(doc)}
                 className={`border rounded-lg p-3 cursor-pointer transition-colors ${
                   selectedDocument?.id === doc.id
-                    ? "bg-[hsl(202,100%,95%)] border-[hsl(202,100%,50%)]"
-                    : "bg-[hsl(0,0%,100%)] border-[hsl(0,0%,85%)]"
+                    ? "bg-accent-subtle border-accent-muted"
+                    : "bg-bg-primary border-border"
                 }`}
               >
                 <div className="flex items-center justify-between gap-2">
diff --git a/app/components/icons/index.tsx b/app/components/icons/index.tsx
index 450a0ed..bb69ab8 100644
--- a/app/components/icons/index.tsx
+++ b/app/components/icons/index.tsx
@@ -40,6 +40,8 @@ export { default as BookOpenIcon } from "./sidebar/BookOpenIcon";
 export { default as SlidersIcon } from "./sidebar/SlidersIcon";
 export { default as ShieldCheckIcon } from "./sidebar/ShieldCheckIcon";
 export { default as LogoutIcon } from "./sidebar/LogoutIcon";
+export { default as ChatIcon } from "./sidebar/ChatIcon";
+export { default as SendIcon } from "./sidebar/SendIcon";
 
 // Prompt Editor Icons
 export { default as ChevronRightIcon } from "./prompt-editor/ChevronRightIcon";
diff --git a/app/components/icons/sidebar/ChatIcon.tsx b/app/components/icons/sidebar/ChatIcon.tsx
new file mode 100644
index 0000000..2f793e4
--- /dev/null
+++ b/app/components/icons/sidebar/ChatIcon.tsx
@@ -0,0 +1,21 @@
+interface IconProps {
+  className?: string;
+}
+
+export default function ChatIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={`w-5 h-5 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.87 9.87 0 01-4-.8L3 20l1.3-3.9A7.96 7.96 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+      />
+    </svg>
+  );
+}
diff --git a/app/components/icons/sidebar/SendIcon.tsx b/app/components/icons/sidebar/SendIcon.tsx
new file mode 100644
index 0000000..f6e6e6c
--- /dev/null
+++ b/app/components/icons/sidebar/SendIcon.tsx
@@ -0,0 +1,21 @@
+interface IconProps {
+  className?: string;
+}
+
+export default function SendIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={`w-5 h-5 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M5 12l14-7-7 14-2-5-5-2z"
+      />
+    </svg>
+  );
+}
diff --git a/app/components/settings/ProviderSidebar.tsx b/app/components/settings/ProviderSidebar.tsx
index 5dcbae1..0cf0f8a 100644
--- a/app/components/settings/ProviderSidebar.tsx
+++ b/app/components/settings/ProviderSidebar.tsx
@@ -29,10 +29,10 @@ export default function ProviderSidebar({
               <button
                 key={provider.id}
                 onClick={() => onSelect(provider)}
-                className={`w-full text-left px-3 py-2 rounded-md text-sm flex items-center justify-between gap-2 transition-all duration-150 border cursor-pointer ${
+                className={`w-full text-left px-3 py-2 rounded-lg text-[14px] flex items-center justify-between gap-2 transition-all duration-150 border cursor-pointer ${
                   isSelected
-                    ? "bg-bg-primary text-text-primary font-semibold border-border"
-                    : "bg-transparent text-text-secondary font-normal border-transparent hover:bg-bg-primary hover:text-text-primary"
+                    ? "bg-accent-primary/15 text-accent-primary font-semibold border-transparent"
+                    : "bg-transparent text-text-secondary font-medium border-transparent hover:bg-neutral-100 hover:text-text-primary"
                 }`}
               >
                 <span>{provider.name}</span>
diff --git a/app/components/settings/SettingsSidebar.tsx b/app/components/settings/SettingsSidebar.tsx
index e0598e5..383afd4 100644
--- a/app/components/settings/SettingsSidebar.tsx
+++ b/app/components/settings/SettingsSidebar.tsx
@@ -3,7 +3,12 @@
 import React, { useState, useEffect, useRef } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import Image from "next/image";
-import { ArrowLeftIcon, KeyIcon, SlidersIcon } from "@/app/components/icons";
+import {
+  ArrowLeftIcon,
+  ChevronLeftIcon,
+  KeyIcon,
+  SlidersIcon,
+} from "@/app/components/icons";
 import { SETTINGS_NAV } from "@/app/lib/navConfig";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
@@ -17,8 +22,9 @@ const iconMap: Record<string, React.ReactNode> = {
 export default function SettingsSidebar() {
   const router = useRouter();
   const pathname = usePathname();
-  const { currentUser, googleProfile, isAuthenticated, logout } = useAuth();
-  const { sidebarCollapsed } = useApp();
+  const { currentUser, googleProfile, isAuthenticated, isHydrated, logout } =
+    useAuth();
+  const { sidebarCollapsed, setSidebarCollapsed } = useApp();
   const [showUserMenu, setShowUserMenu] = useState(false);
   const userMenuRef = useRef<HTMLDivElement>(null);
 
@@ -44,14 +50,23 @@ export default function SettingsSidebar() {
 
   return (
     <aside
-      className={`h-full border-r border-border bg-bg-secondary flex flex-col shrink-0 transition-all duration-300 ease-in-out ${sidebarCollapsed ? "w-0 overflow-hidden" : "w-60"}`}
+      className={`h-full border-r border-border bg-bg-primary flex flex-col shrink-0 transition-all duration-300 ease-in-out ${sidebarCollapsed ? "w-0 overflow-hidden" : "w-60"}`}
     >
-      <Branding />
+      <div className="relative">
+        <Branding />
+        <button
+          onClick={() => setSidebarCollapsed(true)}
+          className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 rounded-md text-text-secondary hover:bg-neutral-100 hover:text-text-primary transition-colors cursor-pointer"
+          aria-label="Collapse sidebar"
+        >
+          <ChevronLeftIcon className="w-4 h-4" />
+        </button>
+      </div>
 
       <div className="px-3 pt-3 pb-1">
         <button
-          onClick={() => router.push("/evaluations")}
-          className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-[14px] font-medium text-text-secondary hover:text-text-primary hover:bg-neutral-100 transition-all duration-150 w-full"
+          onClick={() => router.push("/chat")}
+          className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-[14px] font-medium text-text-secondary hover:text-text-primary hover:bg-neutral-100 transition-all duration-150 w-full cursor-pointer"
         >
           <ArrowLeftIcon className="w-4 h-4" />
           Dashboard
@@ -73,10 +88,10 @@ export default function SettingsSidebar() {
                   <button
                     key={item.route}
                     onClick={() => router.push(item.route)}
-                    className={`w-full text-left px-3 py-2 rounded-lg text-[14px] flex items-center gap-2.5 transition-all duration-150 border ${
+                    className={`w-full text-left px-3 py-2 rounded-lg text-[14px] flex items-center gap-2.5 transition-all duration-150 border cursor-pointer ${
                       isActive
-                        ? "bg-neutral-100 text-text-primary font-semibold border-border"
-                        : "bg-transparent text-black font-medium border-transparent hover:bg-neutral-100"
+                        ? "bg-accent-primary/15 text-accent-primary font-semibold border-transparent"
+                        : "bg-transparent text-text-secondary font-medium border-transparent hover:bg-neutral-100 hover:text-text-primary"
                     }`}
                   >
                     {item.icon && (
@@ -93,7 +108,11 @@ export default function SettingsSidebar() {
         ))}
       </nav>
 
-      {isAuthenticated && (currentUser || googleProfile) && (
+      {!isHydrated ? (
+        <div className="px-3 pt-1 pb-3 border-t border-border">
+          <div className="h-12 rounded-lg bg-neutral-100 animate-pulse" />
+        </div>
+      ) : isAuthenticated && (currentUser || googleProfile) ? (
         <div
           className="px-3 pb-3 pt-1 border-t border-border relative"
           ref={userMenuRef}
@@ -121,7 +140,7 @@ export default function SettingsSidebar() {
                 referrerPolicy="no-referrer"
               />
             ) : (
-              <div className="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center shrink-0">
+              <div className="w-8 h-8 rounded-full bg-accent-primary flex items-center justify-center shrink-0">
                 <span className="text-xs font-semibold text-white">
                   {initials}
                 </span>
@@ -137,7 +156,7 @@ export default function SettingsSidebar() {
             </div>
           </button>
         </div>
-      )}
+      ) : null}
     </aside>
   );
 }
diff --git a/app/components/settings/onboarding/OnboardingSuccess.tsx b/app/components/settings/onboarding/OnboardingSuccess.tsx
index 69e3e6d..17d317a 100644
--- a/app/components/settings/onboarding/OnboardingSuccess.tsx
+++ b/app/components/settings/onboarding/OnboardingSuccess.tsx
@@ -7,6 +7,8 @@ import { OnboardResponseData } from "@/app/lib/types/onboarding";
 
 interface OnboardingSuccessProps {
   data: OnboardResponseData;
+  onOnboardAnother?: () => void;
+  onBackToList?: () => void;
 }
 
 function SummaryRow({ label, value }: { label: string; value: string }) {
@@ -18,7 +20,11 @@ function SummaryRow({ label, value }: { label: string; value: string }) {
   );
 }
 
-export default function OnboardingSuccess({ data }: OnboardingSuccessProps) {
+export default function OnboardingSuccess({
+  data,
+  onOnboardAnother,
+  onBackToList,
+}: OnboardingSuccessProps) {
   const toast = useToast();
   const [copied, setCopied] = useState(false);
 
@@ -88,6 +94,21 @@ export default function OnboardingSuccess({ data }: OnboardingSuccessProps) {
           to start using configurations, evaluations, and other features.
         </p>
       </div>
+
+      {(onOnboardAnother || onBackToList) && (
+        <div className="flex flex-wrap items-center gap-3 pt-1">
+          {onOnboardAnother && (
+            <Button variant="primary" onClick={onOnboardAnother}>
+              Onboard another organization
+            </Button>
+          )}
+          {onBackToList && (
+            <Button variant="outline" onClick={onBackToList}>
+              Back to organizations
+            </Button>
+          )}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/app/components/settings/onboarding/OrganizationList.tsx b/app/components/settings/onboarding/OrganizationList.tsx
index 15d362e..1597d11 100644
--- a/app/components/settings/onboarding/OrganizationList.tsx
+++ b/app/components/settings/onboarding/OrganizationList.tsx
@@ -35,7 +35,7 @@ export default function OrganizationList({
           <button
             key={org.id}
             onClick={() => onSelectOrg(org)}
-            className="w-full flex items-center justify-between p-4 rounded-lg border border-border bg-white text-left transition-colors hover:bg-neutral-50"
+            className="w-full flex items-center justify-between p-4 rounded-lg border border-border bg-white text-left transition-colors hover:bg-neutral-50 cursor-pointer"
           >
             <div>
               <p className="text-sm font-medium text-text-primary">
diff --git a/app/components/settings/onboarding/ProjectList.tsx b/app/components/settings/onboarding/ProjectList.tsx
index 6b47d8c..a4ad58b 100644
--- a/app/components/settings/onboarding/ProjectList.tsx
+++ b/app/components/settings/onboarding/ProjectList.tsx
@@ -85,7 +85,7 @@ export default function ProjectList({
           {projects.map((project) => (
             <div
               key={project.id}
-              className="flex items-center justify-between p-4 rounded-lg border border-border bg-white transition-colors hover:bg-neutral-50"
+              className="flex items-center justify-between p-4 rounded-lg border border-border bg-white transition-colors hover:bg-neutral-50 cursor-pointer"
             >
               <button
                 onClick={() => onSelectProject(project)}
diff --git a/app/components/user-menu/Branding.tsx b/app/components/user-menu/Branding.tsx
index 55c259e..bef7fbd 100644
--- a/app/components/user-menu/Branding.tsx
+++ b/app/components/user-menu/Branding.tsx
@@ -1,12 +1,16 @@
-import { APP_NAME } from "@/app/lib/constants";
+import Image from "next/image";
 
 const Branding = () => {
   return (
-    <div className="px-5 py-[13px] border-b border-border">
-      <h2 className="text-sm font-semibold text-text-primary tracking-tight">
-        {APP_NAME}
-      </h2>
-      <p className="text-xs mt-0.5 text-text-secondary">Tech4Dev</p>
+    <div className="h-16 px-3 flex items-top border-b border-border">
+      <Image
+        src="/kaapi-logo.png"
+        alt="Kaapi Konsole logo"
+        width={801}
+        height={311}
+        className="h-12 w-auto"
+        priority
+      />
     </div>
   );
 };
diff --git a/app/globals.css b/app/globals.css
index 05165ab..c7247fc 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,8 +6,8 @@
   --foreground: #171717;
   --muted: #737373;
   --border: #e5e5e5;
-  --accent: #0070f3;
-  --accent-hover: #0761d1;
+  --accent: #1f4496;
+  --accent-hover: #173574;
   --success: #16a34a;
   --error: #dc2626;
 }
@@ -38,8 +38,13 @@
 
 /* Accent colors */
 @theme inline {
-  --color-accent-primary: #171717;
-  --color-accent-hover: #404040;
+  --color-accent-primary: #1f4496;
+  --color-accent-hover: #173574;
+  --color-accent-muted: #8fa1cb;
+  --color-accent-subtle: #bcc7df;
+
+  --color-accent-secondary: #ffce00;
+  --color-accent-secondary-hover: #e6b800;
 }
 
 /* Status colors */
@@ -222,3 +227,15 @@ a {
     width: 100%;
   }
 }
+
+@keyframes chat-pulse {
+  0%,
+  100% {
+    opacity: 0.25;
+    transform: translateY(0);
+  }
+  40% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
diff --git a/app/lib/apiClient.ts b/app/lib/apiClient.ts
index 8a7ff47..ba7233a 100644
--- a/app/lib/apiClient.ts
+++ b/app/lib/apiClient.ts
@@ -155,6 +155,11 @@ export function uploadWithProgress<T>(
   return { promise, abort: () => controller.abort() };
 }
 
+/**
+ * Options accepted by `apiFetch`. Extends `RequestInit` with one extra knob:
+ */
+export type ApiFetchOptions = RequestInit & { acceptEmpty?: boolean };
+
 /**
  * Client-side fetch helper for Next.js route handlers (/api/*).
  *
@@ -162,15 +167,29 @@ export function uploadWithProgress<T>(
  * - On **403 "revoked"**: forces immediate logout (no refresh).
  * - On **401**: tries a silent token refresh, retries once, then logs out.
  * - All other errors are thrown as-is.
+ * Default return type is `Promise<T>`. Pass `{ acceptEmpty: true }` to opt
+ * into `Promise<T | null>` (returns null on 204).
  */
 export async function apiFetch<T>(
   url: string,
   apiKey: string,
-  options: RequestInit = {},
-): Promise<T> {
+  options?: RequestInit,
+): Promise<T>;
+export async function apiFetch<T>(
+  url: string,
+  apiKey: string,
+  options: ApiFetchOptions & { acceptEmpty: true },
+): Promise<T | null>;
+export async function apiFetch<T>(
+  url: string,
+  apiKey: string,
+  options: ApiFetchOptions = {},
+): Promise<T | null> {
+  const { acceptEmpty, ...fetchOptions } = options;
+
   const buildHeaders = () => {
-    const headers = new Headers(options.headers);
-    if (!(options.body instanceof FormData)) {
+    const headers = new Headers(fetchOptions.headers);
+    if (!(fetchOptions.body instanceof FormData)) {
       headers.set("Content-Type", "application/json");
     }
     headers.set("X-API-KEY", apiKey);
@@ -178,12 +197,18 @@ export async function apiFetch<T>(
   };
 
   const doFetch = () =>
-    fetch(url, { ...options, headers: buildHeaders(), credentials: "include" });
+    fetch(url, {
+      ...fetchOptions,
+      headers: buildHeaders(),
+      credentials: "include",
+    });
 
   const res = await doFetch();
 
-  // Response OK → return parsed JSON
-  if (res.ok) return (await res.json()) as T;
+  if (res.ok) {
+    if (acceptEmpty && res.status === 204) return null;
+    return (await res.json()) as T;
+  }
 
   const body = (await res.json().catch(() => ({}))) as Record<string, unknown>;
   const message = extractErrorMessage(body, `Request failed: ${res.status}`);
@@ -209,7 +234,10 @@ export async function apiFetch<T>(
 
   if (refreshed) {
     const retry = await doFetch();
-    if (retry.ok) return (await retry.json()) as T;
+    if (retry.ok) {
+      if (acceptEmpty && retry.status === 204) return null;
+      return (await retry.json()) as T;
+    }
 
     const retryBody = (await retry.json().catch(() => ({}))) as Record<
       string,
diff --git a/app/lib/chatClient.ts b/app/lib/chatClient.ts
new file mode 100644
index 0000000..7ed7b40
--- /dev/null
+++ b/app/lib/chatClient.ts
@@ -0,0 +1,211 @@
+/**
+ * Flow: POST /api/llm/call kicks off an async job and returns a job_id. The
+ * browser then polls GET /api/llm/call/{job_id} (a thin BFF proxy over the
+ * upstream's status endpoint) until `status === completed` or terminal
+ * failure. No webhooks involved — the upstream's status endpoint returns the
+ * full LLM response once the job is done.
+ */
+
+import { apiFetch } from "@/app/lib/apiClient";
+import {
+  CompletionParams,
+  ConfigBlob,
+  SavedConfig,
+  Tool,
+} from "@/app/lib/types/configs";
+import {
+  LLMCallCreateResponse,
+  LLMCallRequest,
+  LLMCallStatusData,
+  LLMCallStatusResponse,
+  LLMResponseBody,
+  PollOptions,
+} from "@/app/lib/types/chat";
+
+const SUCCESS_STATUSES = new Set([
+  "completed",
+  "complete",
+  "succeeded",
+  "success",
+  "done",
+]);
+const FAILURE_STATUSES = new Set(["failed", "error", "cancelled", "canceled"]);
+
+const POLL_INTERVAL_MS = 1500;
+const POLL_TIMEOUT_MS = 120_000;
+
+export async function createLLMCall(
+  body: LLMCallRequest,
+  apiKey: string,
+): Promise<LLMCallCreateResponse> {
+  return apiFetch<LLMCallCreateResponse>("/api/llm/call", apiKey, {
+    method: "POST",
+    body: JSON.stringify(body),
+  });
+}
+
+/** Fetches the latest job status from the upstream via the BFF proxy. */
+async function fetchJobStatus(
+  jobId: string,
+  apiKey: string,
+): Promise<LLMCallStatusResponse> {
+  return apiFetch<LLMCallStatusResponse>(`/api/llm/call/${jobId}`, apiKey);
+}
+
+/**
+ * Polls the upstream job status until it reaches a terminal state, the signal
+ * aborts, or the timeout elapses.
+ */
+export async function pollLLMCall(
+  jobId: string,
+  apiKey: string,
+  options: PollOptions = {},
+): Promise<LLMCallStatusData> {
+  const {
+    signal,
+    intervalMs = POLL_INTERVAL_MS,
+    timeoutMs = POLL_TIMEOUT_MS,
+  } = options;
+
+  const start = Date.now();
+
+  while (true) {
+    if (signal?.aborted) {
+      throw new DOMException("Polling aborted", "AbortError");
+    }
+
+    const res = await fetchJobStatus(jobId, apiKey);
+    if (!res.success || !res.data) {
+      throw new Error(res.error || "Failed to retrieve job status.");
+    }
+
+    const status = (res.data.status || "").toLowerCase();
+    if (SUCCESS_STATUSES.has(status)) {
+      return res.data;
+    }
+    if (FAILURE_STATUSES.has(status)) {
+      throw new Error(
+        res.data.error_message ||
+          res.error ||
+          `Job ${status}. Please try again.`,
+      );
+    }
+
+    if (Date.now() - start > timeoutMs) {
+      throw new Error("Timed out waiting for the assistant's response.");
+    }
+
+    await new Promise<void>((resolve, reject) => {
+      const timer = setTimeout(resolve, intervalMs);
+      if (signal) {
+        const onAbort = () => {
+          clearTimeout(timer);
+          reject(new DOMException("Polling aborted", "AbortError"));
+        };
+        signal.addEventListener("abort", onAbort, { once: true });
+      }
+    });
+  }
+}
+
+/**
+ * Finds the first assistant response text from different API shapes,
+ * including Kaapi (`output.content.value`), OpenAI Responses
+ * (`output_text`, `content[]`), and Chat Completions
+ * (`choices[].message.content`).
+ */
+function findText(node: unknown, depth = 0): string | null {
+  if (node == null || depth > 12) return null;
+  if (typeof node === "string") return node || null;
+  if (Array.isArray(node)) {
+    for (const item of node) {
+      const r = findText(item, depth + 1);
+      if (r) return r;
+    }
+    return null;
+  }
+  if (typeof node !== "object") return null;
+
+  const obj = node as Record<string, unknown>;
+
+  for (const key of ["output_text", "text", "value"]) {
+    const v = obj[key];
+    if (typeof v === "string" && v.length) return v;
+  }
+
+  const content = obj.content;
+  if (typeof content === "string" && content.length) return content;
+  if (content && typeof content === "object") {
+    const r = findText(content, depth + 1);
+    if (r) return r;
+  }
+
+  for (const key of ["message", "delta", "output"]) {
+    if (obj[key]) {
+      const r = findText(obj[key], depth + 1);
+      if (r) return r;
+    }
+  }
+
+  if (Array.isArray(obj.choices)) {
+    const r = findText(obj.choices, depth + 1);
+    if (r) return r;
+  }
+
+  return null;
+}
+
+export function extractAssistantText(
+  response?: LLMResponseBody | null,
+): string {
+  if (!response) return "";
+  const text = findText(response.output);
+  if (text) return text;
+  try {
+    return JSON.stringify(response.output ?? "");
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * The UI keeps `tools` as an array; the backend wants the equivalent fields
+ * flattened onto `params` (`knowledge_base_ids`, `max_num_results`). Mirrors
+ * the conversion done by SimplifiedConfigEditor when creating new versions.
+ */
+export function configToBlob(config: SavedConfig): ConfigBlob {
+  const params: CompletionParams = {
+    model: config.modelName,
+    instructions: config.instructions ?? "",
+  };
+
+  if (config.temperature !== undefined && config.temperature !== null) {
+    params.temperature = config.temperature;
+  }
+
+  const tools: Tool[] = config.tools ?? [];
+  if (tools.length > 0) {
+    const knowledge_base_ids = tools.flatMap((t) => t.knowledge_base_ids);
+    if (knowledge_base_ids.length > 0) {
+      params.knowledge_base_ids = knowledge_base_ids;
+      params.max_num_results = tools[0].max_num_results;
+    }
+  }
+
+  const blob: ConfigBlob = {
+    completion: {
+      provider: config.provider as "openai",
+      type: config.type ?? "text",
+      params,
+    },
+  };
+
+  if (config.input_guardrails && config.input_guardrails.length > 0) {
+    blob.input_guardrails = config.input_guardrails;
+  }
+  if (config.output_guardrails && config.output_guardrails.length > 0) {
+    blob.output_guardrails = config.output_guardrails;
+  }
+
+  return blob;
+}
diff --git a/app/lib/colors.ts b/app/lib/colors.ts
index 0a3d032..09534f6 100644
--- a/app/lib/colors.ts
+++ b/app/lib/colors.ts
@@ -21,8 +21,8 @@ export const colors = {
 
   // Accent (used for primary actions, active states)
   accent: {
-    primary: "#171717",
-    hover: "#404040",
+    primary: "#1f4496",
+    hover: "#173574",
   },
 
   // Status colors
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index fde30b1..dc433d2 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -14,6 +14,7 @@ export const STORAGE_KEYS = {
   COLLECTION_CACHE: "collection_job_cache",
   DOCUMENT_SIZES: "document_file_sizes",
   SIDEBAR_MENUS: "sidebar-expanded-menus",
+  CHAT_STATE: "kaapi_chat_state",
 } as const;
 
 /** localStorage key for the config cache */
diff --git a/app/lib/context/AuthContext.tsx b/app/lib/context/AuthContext.tsx
index eb91b32..5fd5878 100644
--- a/app/lib/context/AuthContext.tsx
+++ b/app/lib/context/AuthContext.tsx
@@ -16,6 +16,7 @@ import {
 } from "@/app/lib/types/auth";
 import { apiFetch } from "@/app/lib/apiClient";
 import { AUTH_EXPIRED_EVENT, STORAGE_KEYS } from "@/app/lib/constants";
+import { useChatStore } from "@/app/lib/store/chat";
 import { clearAllStorage } from "@/app/lib/utils";
 export type { User, GoogleProfile, Session } from "@/app/lib/types/auth";
 
@@ -134,6 +135,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     setSession(null);
     setCurrentUser(null);
     clearAllStorage();
+    useChatStore.getState().reset();
     setApiKeys([]);
   }, [persist]);
 
diff --git a/app/lib/navConfig.ts b/app/lib/navConfig.ts
index dcf60ad..f68d5a9 100644
--- a/app/lib/navConfig.ts
+++ b/app/lib/navConfig.ts
@@ -11,17 +11,6 @@ export const SETTINGS_NAV: SettingsNavSection[] = [
 ];
 
 export const NAV_ITEMS: NavItemConfig[] = [
-  {
-    name: "Evaluations",
-    icon: "clipboard",
-    submenu: [
-      { name: "Text", route: "/evaluations" },
-      { name: "Speech-to-Text", route: "/speech-to-text" },
-      { name: "Text-to-Speech", route: "/text-to-speech" },
-    ],
-    gateDescription:
-      "Log in to compare model response quality across different configs.",
-  },
   {
     name: "Documents",
     route: "/document",
@@ -49,4 +38,22 @@ export const NAV_ITEMS: NavItemConfig[] = [
     icon: "shield",
     gateDescription: "Log in to manage guardrails and validators.",
   },
+  {
+    name: "Chat",
+    route: "/chat",
+    icon: "chat",
+    gateDescription:
+      "Log in to chat with your assistants and keep conversation history.",
+  },
+  {
+    name: "Evaluations",
+    icon: "clipboard",
+    submenu: [
+      { name: "Text", route: "/evaluations" },
+      { name: "Speech-to-Text", route: "/speech-to-text" },
+      { name: "Text-to-Speech", route: "/text-to-speech" },
+    ],
+    gateDescription:
+      "Log in to compare model response quality across different configs.",
+  },
 ];
diff --git a/app/lib/store/chat.ts b/app/lib/store/chat.ts
new file mode 100644
index 0000000..e0b5e2c
--- /dev/null
+++ b/app/lib/store/chat.ts
@@ -0,0 +1,136 @@
+"use client";
+
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import { STORAGE_KEYS } from "@/app/lib/constants";
+import { ChatMessage } from "@/app/lib/types/chat";
+
+const LEGACY_SELECTION_KEY = "kaapi_chat_selection";
+
+const MAX_PERSISTED_MESSAGES = 50;
+
+interface ChatState {
+  messages: ChatMessage[];
+  conversationId: string | null;
+  configId: string;
+  configVersion: number;
+  hasHydrated: boolean;
+}
+
+interface ChatActions {
+  setMessages: (
+    next: ChatMessage[] | ((prev: ChatMessage[]) => ChatMessage[]),
+  ) => void;
+  appendMessages: (...messages: ChatMessage[]) => void;
+  updateMessage: (id: string, patch: Partial<ChatMessage>) => void;
+  setConversationId: (id: string | null) => void;
+  setConfig: (configId: string, version: number) => void;
+  clearConversation: () => void;
+  reset: () => void;
+  setHasHydrated: (value: boolean) => void;
+}
+
+const INITIAL_STATE: ChatState = {
+  messages: [],
+  conversationId: null,
+  configId: "",
+  configVersion: 0,
+  hasHydrated: false,
+};
+
+function trim(messages: ChatMessage[]): ChatMessage[] {
+  return messages.length > MAX_PERSISTED_MESSAGES
+    ? messages.slice(-MAX_PERSISTED_MESSAGES)
+    : messages;
+}
+
+export const useChatStore = create<ChatState & ChatActions>()(
+  persist(
+    (set) => ({
+      ...INITIAL_STATE,
+
+      setMessages: (next) =>
+        set((state) => ({
+          messages: trim(
+            typeof next === "function" ? next(state.messages) : next,
+          ),
+        })),
+
+      appendMessages: (...incoming) =>
+        set((state) => ({ messages: trim([...state.messages, ...incoming]) })),
+
+      updateMessage: (id, patch) =>
+        set((state) => ({
+          messages: state.messages.map((m) =>
+            m.id === id ? { ...m, ...patch } : m,
+          ),
+        })),
+
+      setConversationId: (id) => set({ conversationId: id }),
+
+      setConfig: (configId, version) =>
+        set({ configId, configVersion: version }),
+
+      clearConversation: () => set({ messages: [], conversationId: null }),
+
+      reset: () => set({ ...INITIAL_STATE, hasHydrated: true }),
+
+      setHasHydrated: (value) => set({ hasHydrated: value }),
+    }),
+    {
+      name: STORAGE_KEYS.CHAT_STATE,
+      version: 1,
+      storage: createJSONStorage(() => localStorage),
+      skipHydration: true,
+      partialize: (state) => ({
+        messages: state.messages,
+        conversationId: state.conversationId,
+        configId: state.configId,
+        configVersion: state.configVersion,
+      }),
+      // Surface in-flight requests interrupted by a refresh as errors so the
+      // UI doesn't show a permanent spinner.
+      merge: (persistedState, currentState) => {
+        const persisted = (persistedState ?? {}) as Partial<ChatState>;
+        const messages = (persisted.messages ?? []).map((m) =>
+          m.status === "pending"
+            ? {
+                ...m,
+                status: "error" as const,
+                content: "Request interrupted — please send the message again.",
+                error: "Interrupted",
+                jobId: undefined,
+              }
+            : m,
+        );
+        return { ...currentState, ...persisted, messages };
+      },
+      onRehydrateStorage: () => (state) => {
+        // One-time migration: seed config selection from the pre-store key
+        // so existing users don't lose their last picked configuration.
+        if (state && !state.configId && typeof window !== "undefined") {
+          try {
+            const raw = window.localStorage.getItem(LEGACY_SELECTION_KEY);
+            if (raw) {
+              const parsed = JSON.parse(raw) as {
+                configId?: string;
+                version?: number;
+              };
+              if (parsed?.configId && parsed?.version) {
+                useChatStore.setState({
+                  configId: parsed.configId,
+                  configVersion: parsed.version,
+                });
+              }
+              window.localStorage.removeItem(LEGACY_SELECTION_KEY);
+            }
+          } catch {
+            /* ignore malformed legacy data */
+          }
+        }
+        useChatStore.setState({ hasHydrated: true });
+      },
+    },
+  ),
+);
diff --git a/app/lib/types/chat.ts b/app/lib/types/chat.ts
new file mode 100644
index 0000000..8766724
--- /dev/null
+++ b/app/lib/types/chat.ts
@@ -0,0 +1,91 @@
+import { ConfigBlob } from "@/app/lib/types/configs";
+
+export type ChatRole = "user" | "assistant";
+
+export type ChatMessageStatus = "pending" | "complete" | "error";
+
+export interface ChatMessage {
+  id: string;
+  role: ChatRole;
+  content: string;
+  createdAt: number;
+  status?: ChatMessageStatus;
+  jobId?: string;
+  error?: string;
+}
+
+export interface ChatConfigSelection {
+  configId: string;
+  version: number;
+}
+
+export type LLMCallConfigSelector =
+  | { id: string; version: number }
+  | { blob: ConfigBlob };
+
+export interface LLMCallRequest {
+  query: {
+    input: string;
+    conversation?: {
+      id?: string;
+      auto_create?: boolean;
+    };
+  };
+  config: LLMCallConfigSelector;
+  callback_url?: string;
+  include_provider_raw_response?: boolean;
+  request_metadata?: Record<string, unknown>;
+}
+
+export interface LLMCallJobData {
+  job_id: string;
+  status: string;
+  message?: string;
+  job_inserted_at?: string;
+  job_updated_at?: string;
+}
+
+export interface LLMResponseUsage {
+  input_tokens?: number;
+  output_tokens?: number;
+  total_tokens?: number;
+  reasoning_tokens?: number;
+}
+
+export interface LLMResponseBody {
+  provider_response_id?: string;
+  conversation_id?: string;
+  provider?: string;
+  model?: string;
+  output?: unknown;
+}
+
+export interface LLMResponse {
+  response?: LLMResponseBody;
+  usage?: LLMResponseUsage;
+  provider_raw_response?: Record<string, unknown>;
+}
+
+export interface LLMCallStatusData {
+  job_id: string;
+  status: string;
+  llm_response?: LLMResponse | null;
+  error_message?: string | null;
+}
+
+export interface APIEnvelope<T> {
+  success: boolean;
+  data: T | null;
+  error?: string | null;
+  errors?: Array<{ field?: string; message?: string }>;
+  metadata?: Record<string, unknown> | null;
+}
+
+export type LLMCallCreateResponse = APIEnvelope<LLMCallJobData>;
+export type LLMCallStatusResponse = APIEnvelope<LLMCallStatusData>;
+
+export interface PollOptions {
+  signal?: AbortSignal;
+  intervalMs?: number;
+  timeoutMs?: number;
+}
diff --git a/app/lib/types/configs.ts b/app/lib/types/configs.ts
index 659bf0e..9bb7849 100644
--- a/app/lib/types/configs.ts
+++ b/app/lib/types/configs.ts
@@ -1,8 +1,3 @@
-/**
- * Types for Config Management
- * These types represent configs as they are consumed by the frontend,
- */
-
 export interface SavedConfig {
   id: string;
   config_id: string;
diff --git a/app/page.tsx b/app/page.tsx
index 060f549..d20f050 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,24 +1,5 @@
-"use client";
-
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { RefreshIcon } from "@/app/components/icons";
+import { redirect } from "next/navigation";
 
 export default function Home() {
-  const router = useRouter();
-
-  useEffect(() => {
-    router.push("/evaluations");
-  }, [router]);
-
-  return (
-    <div className="w-full h-screen flex items-center justify-center bg-bg-secondary">
-      <div className="text-center">
-        <div className="animate-pulse text-text-secondary">
-          <RefreshIcon className="mx-auto h-12 w-12 mb-4" />
-          <p className="text-sm text-[#171717]">Redirecting...</p>
-        </div>
-      </div>
-    </div>
-  );
+  redirect("/chat");
 }
diff --git a/middleware.ts b/middleware.ts
index 068da38..650dd24 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -3,7 +3,8 @@ import { NextResponse, type NextRequest } from "next/server";
 /** Route protection via `kaapi_role` cookie. Settings requires superuser. */
 
 const PUBLIC_ROUTES = new Set<string>([
-  "/evaluations",
+  "/",
+  "/chat",
   "/invite",
   "/verify",
   "/coming-soon/guardrails",
@@ -14,7 +15,7 @@ const PUBLIC_ROUTES = new Set<string>([
 
 const GUEST_ONLY_ROUTES = new Set<string>(["/keystore"]);
 
-const HOME_ROUTE = "/evaluations";
+const HOME_ROUTE = "/chat";
 const PATHNAME_STARTS_WITH = ["/settings"];
 
 export function middleware(request: NextRequest) {
diff --git a/package-lock.json b/package-lock.json
index 3aa4d57..9f65395 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,8 @@
         "react": "19.2.0",
         "react-dom": "19.2.0",
         "react-router-dom": "^7.9.5",
-        "swr": "^2.3.6"
+        "swr": "^2.3.6",
+        "zustand": "^5.0.12"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.2",
@@ -1594,7 +1595,7 @@
       "version": "19.2.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -2741,7 +2742,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -7216,6 +7217,35 @@
       "peerDependencies": {
         "zod": "^3.25.0 || ^4.0.0"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.12.tgz",
+      "integrity": "sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index e65d7f7..9831c15 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-router-dom": "^7.9.5",
-    "swr": "^2.3.6"
+    "swr": "^2.3.6",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
diff --git a/public/file.svg b/public/file.svg
deleted file mode 100644
index 004145c..0000000
--- a/public/file.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/public/globe.svg b/public/globe.svg
deleted file mode 100644
index 567f17b..0000000
--- a/public/globe.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/public/kaapi-logo.png b/public/kaapi-logo.png
new file mode 100644
index 0000000..b53e480
Binary files /dev/null and b/public/kaapi-logo.png differ
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index 7705396..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/window.svg b/public/window.svg
deleted file mode 100644
index b2b2a44..0000000
--- a/public/window.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file