diff --git a/app/(main)/document/page.tsx b/app/(main)/document/page.tsx
index 168bb81..0ec6f7c 100644
--- a/app/(main)/document/page.tsx
+++ b/app/(main)/document/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
 import Sidebar from "@/app/components/Sidebar";
@@ -8,21 +8,20 @@ import PageHeader from "@/app/components/PageHeader";
 import { useToast } from "@/app/components/Toast";
 import { usePaginatedList } from "@/app/hooks/usePaginatedList";
 import { useInfiniteScroll } from "@/app/hooks/useInfiniteScroll";
-import { apiFetch } from "@/app/lib/apiClient";
+import {
+  apiFetch,
+  uploadWithProgress,
+  type UploadPhase,
+} from "@/app/lib/apiClient";
 import { DocumentListing } from "@/app/components/document/DocumentListing";
 import { DocumentPreview } from "@/app/components/document/DocumentPreview";
 import { UploadDocumentModal } from "@/app/components/document/UploadDocumentModal";
-import { DEFAULT_PAGE_LIMIT } from "@/app/lib/constants";
-
-export interface Document {
-  id: string;
-  fname: string;
-  object_store_url: string;
-  signed_url?: string;
-  file_size?: number;
-  inserted_at?: string;
-  updated_at?: string;
-}
+import {
+  DEFAULT_PAGE_LIMIT,
+  MAX_DOCUMENT_SIZE_BYTES,
+  MAX_DOCUMENT_SIZE_MB,
+} from "@/app/lib/constants";
+import { Document } from "@/app/lib/types/document";
 
 export default function DocumentPage() {
   const toast = useToast();
@@ -34,6 +33,9 @@ export default function DocumentPage() {
   const [isLoadingDocument, setIsLoadingDocument] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [uploadPhase, setUploadPhase] = useState<UploadPhase>("uploading");
+  const abortUploadRef = useRef<(() => void) | null>(null);
   const { activeKey: apiKey } = useAuth();
 
   const {
@@ -59,6 +61,14 @@ export default function DocumentPage() {
     const file = event.target.files?.[0];
     if (!file) return;
 
+    if (file.size > MAX_DOCUMENT_SIZE_BYTES) {
+      toast.error(
+        `File size exceeds ${MAX_DOCUMENT_SIZE_MB} MB limit. Please select a smaller file within ${MAX_DOCUMENT_SIZE_MB} MB.`,
+      );
+      event.target.value = "";
+      return;
+    }
+
     setSelectedFile(file);
   };
 
@@ -66,16 +76,24 @@ export default function DocumentPage() {
     if (!apiKey || !selectedFile) return;
 
     setIsUploading(true);
+    setUploadProgress(0);
+    setUploadPhase("uploading");
 
     try {
       const formData = new FormData();
       formData.append("src", selectedFile);
 
-      const data = await apiFetch<{ data?: { id: string } }>(
+      const { promise, abort } = uploadWithProgress<{ data?: { id: string } }>(
         "/api/document",
         apiKey.key,
-        { method: "POST", body: formData },
+        formData,
+        (percent, phase) => {
+          setUploadProgress(percent);
+          setUploadPhase(phase);
+        },
       );
+      abortUploadRef.current = abort;
+      const data = await promise;
       if (selectedFile && data.data?.id) {
         const fileSizeMap = JSON.parse(
           localStorage.getItem("document_file_sizes") || "{}",
@@ -99,6 +117,7 @@ export default function DocumentPage() {
       );
     } finally {
       setIsUploading(false);
+      abortUploadRef.current = null;
     }
   };
 
@@ -198,18 +217,22 @@ export default function DocumentPage() {
         </div>
       </div>
 
-      {isModalOpen && (
-        <UploadDocumentModal
-          selectedFile={selectedFile}
-          isUploading={isUploading}
-          onFileSelect={handleFileSelect}
-          onUpload={handleUpload}
-          onClose={() => {
-            setIsModalOpen(false);
-            setSelectedFile(null);
-          }}
-        />
-      )}
+      <UploadDocumentModal
+        open={isModalOpen}
+        selectedFile={selectedFile}
+        isUploading={isUploading}
+        uploadProgress={uploadProgress}
+        uploadPhase={uploadPhase}
+        onFileSelect={handleFileSelect}
+        onUpload={handleUpload}
+        onClose={() => {
+          abortUploadRef.current?.();
+          setIsModalOpen(false);
+          setSelectedFile(null);
+          setUploadProgress(0);
+          setUploadPhase("uploading");
+        }}
+      />
     </div>
   );
 }
diff --git a/app/(main)/knowledge-base/page.tsx b/app/(main)/knowledge-base/page.tsx
index 3467d5d..9960290 100644
--- a/app/(main)/knowledge-base/page.tsx
+++ b/app/(main)/knowledge-base/page.tsx
@@ -8,28 +8,7 @@ import PageHeader from "@/app/components/PageHeader";
 import Modal from "@/app/components/Modal";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
-
-export interface Document {
-  id: string;
-  fname: string;
-  object_store_url: string;
-  signed_url?: string;
-  file_size?: number;
-  inserted_at?: string;
-  updated_at?: string;
-}
-
-export interface Collection {
-  id: string;
-  name?: string;
-  description?: string;
-  knowledge_base_id?: string;
-  inserted_at: string;
-  updated_at: string;
-  status?: string;
-  job_id?: string;
-  documents?: Document[];
-}
+import { Document, Collection } from "@/app/lib/types/document";
 
 export default function KnowledgeBasePage() {
   const { sidebarCollapsed } = useApp();
@@ -919,37 +898,25 @@ export default function KnowledgeBasePage() {
             style={{ borderColor: colors.border }}
           >
             {/* Create Button */}
-            <div className="p-6 flex justify-end">
+            <div className="px-6 py-4 flex justify-end">
               <button
                 onClick={() => {
                   setShowCreateForm(true);
                   setSelectedCollection(null);
                 }}
-                className="px-4 py-2 rounded-md text-sm font-medium transition-colors"
-                style={{
-                  backgroundColor: colors.bg.secondary,
-                  color: colors.text.primary,
-                  border: `1px solid ${colors.border}`,
-                }}
+                className="px-4 py-2 rounded-md text-sm font-medium transition-colors bg-bg-secondary text-text-primary border border-border"
               >
                 + Create
               </button>
             </div>
 
-            {/* Collections List */}
             <div className="flex-1 overflow-y-auto px-6 pb-6">
               {isLoading && collections.length === 0 ? (
-                <div
-                  className="text-center py-8"
-                  style={{ color: colors.text.secondary }}
-                >
+                <div className="text-center py-8 text-text-secondary">
                   Loading knowledge bases...
                 </div>
               ) : collections.length === 0 ? (
-                <div
-                  className="text-center py-8"
-                  style={{ color: colors.text.secondary }}
-                >
+                <div className="text-center py-8 text-text-secondary">
                   No knowledge bases yet. Create your first one!
                 </div>
               ) : (
@@ -963,9 +930,7 @@ export default function KnowledgeBasePage() {
                         fetchCollectionDetails(collection.id);
                       }}
                       className={`border rounded-lg p-3 cursor-pointer transition-colors ${
-                        selectedCollection?.id === collection.id
-                          ? "ring-2 ring-offset-1"
-                          : ""
+                        selectedCollection?.id === collection.id ? "" : ""
                       }`}
                       style={{
                         backgroundColor:
@@ -978,7 +943,7 @@ export default function KnowledgeBasePage() {
                             : colors.border,
                       }}
                     >
-                      <div className="flex items-start justify-between gap-2">
+                      <div className="flex items-center justify-between gap-2">
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-2 mb-1">
                             <svg
@@ -1687,9 +1652,7 @@ export default function KnowledgeBasePage() {
         maxWidth="max-w-5xl"
         maxHeight="h-[80vh]"
       >
-        {/* Two-pane body */}
-        <div className="flex flex-1 overflow-hidden">
-          {/* Left pane — doc list */}
+        <div className="flex flex-1 overflow-hidden h-full">
           <div
             className="w-1/5 flex flex-col overflow-y-auto shrink-0"
             style={{ borderRight: `1px solid ${colors.border}` }}
diff --git a/app/api/document/route.ts b/app/api/document/route.ts
index 96d7ffd..5ebfa9d 100644
--- a/app/api/document/route.ts
+++ b/app/api/document/route.ts
@@ -20,24 +20,93 @@ export async function GET(request: Request) {
   }
 }
 
+/**
+ * Proxies the uploaded file to the backend while sending real-time progress
+ * events back to the client via a newline-delimited JSON stream.
+ * Uses a pull-based ReadableStream as the backend request body so that
+ * them — giving accurate progress regardless of internal buffer sizes.
+ */
 export async function POST(request: NextRequest) {
-  try {
-    const formData = await request.formData();
+  const contentType = request.headers.get("Content-Type") || "";
 
-    const { status, data } = await apiClient(request, "/api/v1/documents/", {
-      method: "POST",
-      body: formData,
-    });
+  const fileBuffer = new Uint8Array(await request.arrayBuffer());
+  const totalSize = fileBuffer.byteLength;
 
-    return NextResponse.json(data, { status });
-  } catch (error: unknown) {
-    console.error("Proxy error:", error);
-    return NextResponse.json(
-      {
-        error: "Failed to forward request to backend",
-        details: error instanceof Error ? error.message : String(error),
-      },
-      { status: 500 },
-    );
+  if (totalSize === 0) {
+    return NextResponse.json({ error: "No body provided" }, { status: 400 });
   }
+
+  const encoder = new TextEncoder();
+  const responseStream = new TransformStream();
+  const writer = responseStream.writable.getWriter();
+
+  const CHUNK_SIZE = 64 * 1024; // 64 KB
+
+  (async () => {
+    try {
+      let offset = 0;
+      let lastProgress = 0;
+
+      const uploadBody = new ReadableStream({
+        pull(controller) {
+          if (offset >= totalSize) {
+            controller.close();
+            return;
+          }
+          const end = Math.min(offset + CHUNK_SIZE, totalSize);
+          controller.enqueue(fileBuffer.subarray(offset, end));
+          offset = end;
+
+          const progress = Math.round((offset / totalSize) * 100);
+          if (progress > lastProgress) {
+            lastProgress = progress;
+            writer
+              .write(
+                encoder.encode(
+                  JSON.stringify({ phase: "uploading", progress }) + "\n",
+                ),
+              )
+              .catch(() => {});
+          }
+        },
+      });
+
+      const { status, data } = await apiClient(request, "/api/v1/documents/", {
+        method: "POST",
+        body: uploadBody,
+        headers: { "Content-Type": contentType },
+        signal: request.signal,
+        // @ts-expect-error -- Node fetch supports duplex for streaming request bodies
+        duplex: "half",
+      });
+
+      await writer.write(
+        encoder.encode(JSON.stringify({ phase: "processing" }) + "\n"),
+      );
+
+      await writer.write(
+        encoder.encode(JSON.stringify({ done: true, status, data }) + "\n"),
+      );
+    } catch (err) {
+      try {
+        await writer.write(
+          encoder.encode(
+            JSON.stringify({
+              error: err instanceof Error ? err.message : String(err),
+            }) + "\n",
+          ),
+        );
+      } catch {}
+    } finally {
+      await writer.close();
+    }
+  })();
+
+  return new Response(responseStream.readable, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+    },
+  });
 }
diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index 38091d4..97c8317 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -58,7 +58,7 @@ export default function Modal({
             {showClose && (
               <button
                 onClick={onClose}
-                className="p-1 rounded-md text-text-secondary transition-colors hover:bg-neutral-100 hover:text-text-primary"
+                className="p-1 rounded-md text-text-secondary transition-colors hover:bg-neutral-100 hover:text-text-primary cursor-pointer"
               >
                 <CloseIcon className="w-5 h-5" />
               </button>
diff --git a/app/components/document/DocumentListing.tsx b/app/components/document/DocumentListing.tsx
index 296f0c6..0b77130 100644
--- a/app/components/document/DocumentListing.tsx
+++ b/app/components/document/DocumentListing.tsx
@@ -2,7 +2,7 @@
 
 import { APIKey } from "@/app/lib/types/credentials";
 import { formatDate } from "@/app/components/utils";
-import { Document } from "@/app/(main)/document/page";
+import { Document } from "@/app/lib/types/document";
 import {
   RefreshIcon,
   KeyIcon,
@@ -44,7 +44,7 @@ export function DocumentListing({
           </h2>
           <button
             onClick={onUploadNew}
-            className="px-3 py-1.5 rounded-md text-sm font-medium transition-colors bg-[#171717] text-white hover:bg-accent-hover"
+            className="px-3 py-1.5 rounded-md text-sm font-medium transition-colors bg-[#171717] text-white hover:bg-accent-hover cursor-pointer"
           >
             + Upload
           </button>
@@ -55,7 +55,6 @@ export function DocumentListing({
         ref={scrollRef}
         className="flex-1 overflow-y-auto p-4 bg-[hsl(0,0%,98%)]"
       >
-        {/* Loading State */}
         {isLoading && documents.length === 0 ? (
           <div className="text-center py-12 text-[hsl(330,3%,49%)]">
             <RefreshIcon className="w-12 h-12 mx-auto mb-4 animate-spin" />
@@ -107,11 +106,11 @@ export function DocumentListing({
                 onClick={() => onSelect(doc)}
                 className={`border rounded-lg p-3 cursor-pointer transition-colors ${
                   selectedDocument?.id === doc.id
-                    ? "ring-2 ring-offset-1 bg-[hsl(202,100%,95%)] border-[hsl(202,100%,50%)]"
+                    ? "bg-[hsl(202,100%,95%)] border-[hsl(202,100%,50%)]"
                     : "bg-[hsl(0,0%,100%)] border-[hsl(0,0%,85%)]"
                 }`}
               >
-                <div className="flex items-start justify-between gap-2">
+                <div className="flex items-center justify-between gap-2">
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2 mb-1">
                       <DocumentFileIcon className="w-5 h-5 shrink-0 text-[#171717]" />
@@ -128,7 +127,7 @@ export function DocumentListing({
                       e.stopPropagation();
                       onDelete(doc.id);
                     }}
-                    className="p-1.5 rounded-md transition-colors shrink-0 border border-[hsl(8,86%,80%)] bg-[hsl(0,0%,100%)] text-[hsl(8,86%,40%)] hover:bg-[hsl(8,86%,95%)]"
+                    className="p-1.5 rounded-md transition-colors shrink-0 border border-[hsl(8,86%,80%)] bg-[hsl(0,0%,100%)] text-[hsl(8,86%,40%)] hover:bg-[hsl(8,86%,95%)] cursor-pointer"
                     title="Delete Document"
                   >
                     <TrashIcon />
diff --git a/app/components/document/DocumentPreview.tsx b/app/components/document/DocumentPreview.tsx
index fb62d00..d13f2e3 100644
--- a/app/components/document/DocumentPreview.tsx
+++ b/app/components/document/DocumentPreview.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { formatDate } from "@/app/components/utils";
-import { Document } from "@/app/(main)/document/page";
+import { Document } from "@/app/lib/types/document";
 import {
   RefreshIcon,
   DocumentFileIcon,
@@ -18,7 +18,6 @@ interface DocumentPreviewProps {
 export function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
   const [imageLoadError, setImageLoadError] = useState(false);
 
-  // Reset error state when document changes
   useEffect(() => {
     setImageLoadError(false);
   }, [document?.id]);
@@ -43,11 +42,23 @@ export function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
     return mimeTypes[ext] || "application/octet-stream";
   };
 
+  const formatFileSize = (size?: number) => {
+    if (!size) return "N/A";
+    if (size < 1024) return `${size} B`;
+    if (size < 1024 * 1024) return `${Math.round(size / 1024)} KB`;
+    return `${(size / (1024 * 1024)).toFixed(2)} MB`;
+  };
+
+  const isPreviewable = (filename: string) => {
+    const mime = getMimeType(filename);
+    return mime.startsWith("image/") || mime === "application/pdf";
+  };
+
   if (isLoading) {
     return (
-      <div className="h-full flex items-center justify-center bg-[hsl(0,0%,98%)]">
-        <div className="text-center text-[hsl(330,3%,49%)]">
-          <RefreshIcon className="w-12 h-12 mx-auto mb-4 animate-spin" />
+      <div className="h-full flex items-center justify-center bg-neutral-50">
+        <div className="text-center text-text-secondary">
+          <RefreshIcon className="w-8 h-8 mx-auto mb-3 animate-spin opacity-50" />
           <p className="text-sm">Loading document...</p>
         </div>
       </div>
@@ -56,13 +67,13 @@ export function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
 
   if (!document) {
     return (
-      <div className="h-full flex items-center justify-center bg-[hsl(0,0%,98%)]">
-        <div className="text-center text-[hsl(330,3%,49%)]">
-          <DocumentFileIcon className="mx-auto h-16 w-16 mb-4" />
-          <p className="text-lg font-medium text-[hsl(330,3%,19%)]">
+      <div className="h-full flex items-center justify-center bg-neutral-50">
+        <div className="text-center text-text-secondary">
+          <DocumentFileIcon className="mx-auto h-12 w-12 mb-3 opacity-30" />
+          <p className="text-sm font-medium text-text-primary">
             No document selected
           </p>
-          <p className="text-sm mt-2">
+          <p className="text-xs mt-1">
             Select a document from the list to preview
           </p>
         </div>
@@ -70,138 +81,120 @@ export function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
     );
   }
 
+  const ext = getFileExtension(document.fname);
+  const mimeType = getMimeType(document.fname);
+
   return (
-    <div className="h-full overflow-y-auto p-8 bg-[hsl(0,0%,98%)]">
-      <div className="max-w-4xl mx-auto">
-        <div className="border rounded-lg p-6 mb-6 bg-[hsl(0,0%,100%)] border-[hsl(0,0%,85%)]">
-          <h2 className="text-lg font-semibold mb-4 text-[hsl(330,3%,19%)]">
-            {document.fname}
-          </h2>
-          <div className="grid grid-cols-3 gap-4">
-            <div>
-              <div className="text-xs uppercase font-semibold mb-1 text-[hsl(330,3%,49%)]">
-                File Type
-              </div>
-              <div className="text-sm font-medium text-[hsl(330,3%,19%)]">
-                {getFileExtension(document.fname).toUpperCase() || "Unknown"}
-              </div>
-            </div>
-            <div>
-              <div className="text-xs uppercase font-semibold mb-1 text-[hsl(330,3%,49%)]">
-                File Size
-              </div>
-              <div className="text-sm font-medium text-[hsl(330,3%,19%)]">
-                {document.file_size
-                  ? document.file_size < 1024 * 1024
-                    ? `${Math.round(document.file_size / 1024)} KB`
-                    : `${(document.file_size / (1024 * 1024)).toFixed(2)} MB`
-                  : "N/A"}
-              </div>
+    <div className="h-full overflow-y-auto bg-neutral-50">
+      <div className="sticky top-0 z-10 bg-white border-b border-border px-6 py-4">
+        <div className="flex items-center justify-between gap-4">
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2.5 mb-2">
+              <DocumentFileIcon className="w-5 h-5 shrink-0 text-text-secondary" />
+              <h2 className="text-base font-semibold text-text-primary truncate">
+                {document.fname}
+              </h2>
             </div>
-            <div>
-              <div className="text-xs uppercase font-semibold mb-1 text-[hsl(330,3%,49%)]">
-                Uploaded at
-              </div>
-              <div className="text-sm font-medium text-[hsl(330,3%,19%)]">
-                {formatDate(document.inserted_at)}
-              </div>
+            <div className="flex items-center gap-4 text-xs text-text-secondary">
+              {ext && (
+                <span className="inline-flex items-center px-2 py-0.5 rounded-full bg-neutral-100 font-medium text-text-primary uppercase">
+                  {ext}
+                </span>
+              )}
+              <span>Size: {formatFileSize(document.file_size)}</span>
+              <span>Uploaded: {formatDate(document.inserted_at)}</span>
             </div>
           </div>
+          {(document.signed_url || document.object_store_url) &&
+            (isPreviewable(document.fname) ? (
+              <a
+                href={document.signed_url || document.object_store_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="shrink-0 px-4 py-1.5 rounded-md text-sm font-medium transition-colors bg-[#171717] text-white hover:bg-accent-hover"
+              >
+                Download
+              </a>
+            ) : (
+              <a
+                href={document.signed_url || document.object_store_url}
+                download={document.fname}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="shrink-0 px-4 py-1.5 rounded-md text-sm font-medium transition-colors bg-[#171717] text-white hover:bg-accent-hover"
+              >
+                Download
+              </a>
+            ))}
         </div>
+      </div>
 
-        {/* Preview Area */}
-        <div className="border rounded-lg p-6 min-h-[600px] bg-[hsl(0,0%,100%)] border-[hsl(0,0%,85%)]">
-          <h3 className="text-lg font-semibold mb-4 text-[hsl(330,3%,19%)]">
-            Preview
-          </h3>
-
-          {/* Info message if signed_url is not available */}
+      <div className="p-6">
+        <div className="max-w-4xl mx-auto">
           {!document.signed_url && document.object_store_url && (
-            <div className="mb-4 p-3 rounded-lg border bg-[hsl(48,100%,95%)] border-[hsl(48,100%,80%)]">
-              <p className="text-xs text-[hsl(48,100%,30%)]">
-                Direct preview unavailable. The backend is not generating signed
-                URLs. Please download the file to view it.
+            <div className="mb-4 px-4 py-3 rounded-lg border bg-amber-50 border-amber-200">
+              <p className="text-xs text-amber-700">
+                Direct preview unavailable. Please download the file to view it.
               </p>
             </div>
           )}
 
           {document.signed_url ? (
-            <>
-              {getMimeType(document.fname).startsWith("image/") ? (
+            <div className="rounded-lg border border-border bg-white overflow-hidden">
+              {mimeType.startsWith("image/") ? (
                 imageLoadError ? (
-                  <div className="text-center p-8">
-                    <p className="text-[hsl(330,3%,49%)]">
-                      Failed to load image preview. Check console for details.
-                    </p>
+                  <div className="flex flex-col items-center justify-center py-20 text-text-secondary">
+                    <WarningIcon className="mx-auto mb-3 opacity-50" />
+                    <p className="text-sm">Failed to load image preview</p>
                   </div>
                 ) : (
-                  <img
-                    src={document.signed_url}
-                    alt={document.fname}
-                    className="max-w-full h-auto rounded"
-                    onError={() => {
-                      setImageLoadError(true);
-                    }}
-                  />
+                  <div className="flex items-center justify-center p-6 bg-[repeating-conic-gradient(hsl(0,0%,92%)_0%_25%,transparent_0%_50%)] bg-size-[16px_16px]">
+                    <img
+                      src={document.signed_url}
+                      alt={document.fname}
+                      className="max-w-full h-auto rounded shadow-sm"
+                      onError={() => setImageLoadError(true)}
+                    />
+                  </div>
                 )
-              ) : getMimeType(document.fname) === "application/pdf" ? (
+              ) : mimeType === "application/pdf" ? (
                 <iframe
                   src={document.signed_url}
-                  className="w-full h-[700px] rounded border border-[hsl(0,0%,85%)]"
+                  className="w-full h-[700px]"
                   title={document.fname}
                 />
-              ) : getMimeType(document.fname).startsWith("text/") ? (
-                <div className="border rounded p-4 min-h-[400px] bg-[hsl(0,0%,98%)] border-[hsl(0,0%,85%)] text-[hsl(330,3%,19%)]">
-                  <p className="text-sm mb-2 text-[hsl(330,3%,49%)]">
-                    Text file preview:
-                  </p>
-                  <iframe
-                    src={document.signed_url}
-                    className="w-full h-[500px] rounded border border-[hsl(0,0%,85%)] bg-white"
-                    title={document.fname}
-                  />
-                </div>
               ) : (
-                <div className="flex flex-col items-center justify-center min-h-[400px] text-[hsl(330,3%,49%)]">
-                  <div className="text-center">
-                    <DocumentTextIcon className="mx-auto mb-4" />
-                    <p className="mb-2">
-                      Preview not available for this file type
-                    </p>
-                    <p className="text-xs mb-4">
-                      Supported types: Images, PDFs, Text files
-                    </p>
-                    <p className="text-xs mb-4 text-[hsl(330,3%,70%)]">
-                      File type: {getMimeType(document.fname)}
-                    </p>
-                  </div>
+                <div className="flex flex-col items-center justify-center py-20 text-text-secondary">
+                  <DocumentTextIcon className="mx-auto mb-3 opacity-40" />
+                  <p className="text-sm font-medium text-text-primary mb-1">
+                    Preview is not available for .{ext} files
+                  </p>
+                  <p className="text-xs mb-4">
+                    This file type cannot be rendered in the browser.
+                  </p>
+                  <a
+                    href={document.signed_url}
+                    download={document.fname}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="px-4 py-1.5 rounded-md text-sm font-medium transition-colors bg-[#171717] text-white hover:bg-accent-hover"
+                  >
+                    Download to view
+                  </a>
                 </div>
               )}
-            </>
+            </div>
           ) : (
-            <div className="flex items-center justify-center min-h-[400px] text-[hsl(330,3%,49%)]">
-              <div className="text-center">
-                <WarningIcon className="mx-auto mb-4" />
-                <p className="mb-2">No preview available</p>
-                <p className="text-xs mb-4">
-                  Signed URL not generated by backend
+            <div className="rounded-lg border border-border bg-white">
+              <div className="flex flex-col items-center justify-center py-20 text-text-secondary">
+                <WarningIcon className="mx-auto mb-3 opacity-40" />
+                <p className="text-sm font-medium text-text-primary mb-1">
+                  No preview available
                 </p>
+                <p className="text-xs">Signed URL not generated by backend</p>
               </div>
             </div>
           )}
-
-          {/* Download button */}
-          <div className="mt-6 text-center">
-            {(document.signed_url || document.object_store_url) && (
-              <a
-                href={document.signed_url || document.object_store_url}
-                download={document.fname}
-                className="inline-block px-6 py-2 rounded-md text-sm font-medium transition-colors bg-[#171717] text-white hover:bg-accent-hover"
-              >
-                Download {document.fname}
-              </a>
-            )}
-          </div>
         </div>
       </div>
     </div>
diff --git a/app/components/document/UploadDocumentModal.tsx b/app/components/document/UploadDocumentModal.tsx
index 9cb3a94..d07847d 100644
--- a/app/components/document/UploadDocumentModal.tsx
+++ b/app/components/document/UploadDocumentModal.tsx
@@ -1,149 +1,154 @@
 "use client";
 
-import { useEffect } from "react";
-import { CloseIcon, CloudUploadIcon } from "@/app/components/icons";
+import Modal from "@/app/components/Modal";
+import { CloudUploadIcon } from "@/app/components/icons";
+import type { UploadPhase } from "@/app/lib/apiClient";
+import {
+  ACCEPTED_DOCUMENT_TYPES,
+  MAX_DOCUMENT_SIZE_MB,
+} from "@/app/lib/constants";
 
 export interface UploadDocumentModalProps {
+  open: boolean;
   selectedFile: File | null;
   isUploading: boolean;
+  uploadProgress?: number;
+  uploadPhase?: UploadPhase;
   onFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onUpload: () => void;
   onClose: () => void;
 }
 
 export function UploadDocumentModal({
+  open,
   selectedFile,
   isUploading,
+  uploadProgress = 0,
+  uploadPhase = "uploading",
   onFileSelect,
   onUpload,
   onClose,
 }: UploadDocumentModalProps) {
-  // Handle backdrop click
-  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  // Handle escape key
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", handleEscape);
-    return () => window.removeEventListener("keydown", handleEscape);
-  }, [onClose]);
-
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-modalBackdrop bg-black/50"
-      onClick={handleBackdropClick}
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Upload New Document"
+      maxHeight="max-h-[90vh]"
     >
-      <div
-        className="border rounded-lg shadow-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto animate-modalContent bg-[hsl(0,0%,100%)] border-[hsl(0,0%,85%)]"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Modal Header */}
-        <div className="border-b px-6 py-4 flex items-center justify-between border-[hsl(0,0%,85%)]">
-          <h2 className="text-lg font-semibold text-[hsl(330,3%,19%)]">
-            Upload New Document
-          </h2>
-          <button
-            onClick={onClose}
-            className="p-1 rounded-md transition-colors text-[hsl(330,3%,49%)] hover:bg-[hsl(0,0%,95%)]"
-          >
-            <CloseIcon />
-          </button>
-        </div>
+      <div className="p-6">
+        <p className="text-sm mb-4 text-text-secondary">
+          Upload a document file. Supported formats: pdf, doc, txt and more.
+        </p>
 
-        {/* Modal Body */}
-        <div className="p-6">
-          <p className="text-sm mb-6 text-[hsl(330,3%,49%)]">
-            Upload a document file. Supported formats: pdf, doc, txt and more.
-          </p>
+        <div className="text-xs mb-6 px-3 py-2 rounded-md bg-neutral-50 border border-border text-text-secondary">
+          <span className="font-medium text-text-primary">Note:</span> Maximum
+          file size is {MAX_DOCUMENT_SIZE_MB} MB. Larger files will be rejected.
+        </div>
 
-          {/* File Selection Area */}
-          <div className="border-2 border-dashed rounded-lg p-12 text-center transition-colors border-[hsl(0,0%,85%)]">
-            <div className="space-y-4">
-              <div className="text-[hsl(330,3%,49%)]">
-                <CloudUploadIcon className="mx-auto" />
-              </div>
-              <div>
-                <label
-                  htmlFor="document-file-upload"
-                  className={`px-6 py-2 rounded-md transition-colors inline-block text-sm font-medium ${
-                    isUploading
-                      ? "bg-[hsl(0,0%,95%)] text-[hsl(330,3%,49%)] cursor-not-allowed"
-                      : "bg-[#171717] text-white cursor-pointer"
-                  }`}
-                >
-                  Choose File
-                </label>
-                <input
-                  id="document-file-upload"
-                  type="file"
-                  onChange={onFileSelect}
-                  disabled={isUploading}
-                  className="hidden"
-                  accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png,.gif,.bmp,.webp"
-                />
-              </div>
-              {selectedFile && (
-                <div className="text-sm text-[hsl(330,3%,49%)]">
-                  Selected:{" "}
-                  <span className="font-medium text-[hsl(330,3%,19%)]">
-                    {selectedFile.name}
-                  </span>
-                  <span className="ml-2">
-                    ({Math.round(selectedFile.size / 1024)} KB)
-                  </span>
-                </div>
-              )}
+        <div className="border-2 border-dashed rounded-lg p-12 text-center transition-colors border-border">
+          <div className="space-y-4">
+            <div className="text-text-secondary">
+              <CloudUploadIcon className="mx-auto" />
             </div>
-          </div>
-
-          {/* Document Name Field (Read-only) */}
-          {selectedFile && (
-            <div className="mt-6">
-              <label className="block text-sm font-medium mb-2 text-[hsl(330,3%,19%)]">
-                Document Name
+            <div>
+              <label
+                htmlFor="document-file-upload"
+                className={`px-6 py-2 rounded-md transition-colors inline-block text-sm font-medium ${
+                  isUploading
+                    ? "bg-neutral-100 text-text-secondary cursor-not-allowed"
+                    : "bg-[#171717] text-white cursor-pointer"
+                }`}
+              >
+                Choose File
               </label>
               <input
-                type="text"
-                value={selectedFile.name}
-                readOnly
-                className="w-full px-4 py-2 rounded-md border text-sm border-[hsl(0,0%,85%)] bg-[hsl(0,0%,97%)] text-[hsl(330,3%,49%)] cursor-not-allowed"
+                id="document-file-upload"
+                type="file"
+                onChange={onFileSelect}
+                disabled={isUploading}
+                className="hidden"
+                accept={ACCEPTED_DOCUMENT_TYPES}
               />
-              <p className="text-xs mt-1 text-[hsl(330,3%,49%)]">
-                The file will be uploaded with this name
-              </p>
             </div>
-          )}
+            {selectedFile && (
+              <div className="text-sm text-text-secondary">
+                Selected:{" "}
+                <span className="font-medium text-text-primary">
+                  {selectedFile.name}
+                </span>
+                <span className="ml-2">
+                  ({Math.round(selectedFile.size / 1024)} KB)
+                </span>
+              </div>
+            )}
+          </div>
         </div>
 
-        {/* Modal Footer */}
-        <div className="border-t px-6 py-4 flex items-center justify-end gap-3 border-[hsl(0,0%,85%)]">
-          <button
-            onClick={onClose}
-            className="px-4 py-2 rounded-md text-sm font-medium transition-colors border border-[hsl(0,0%,85%)] bg-[hsl(0,0%,100%)] text-[hsl(330,3%,19%)] hover:bg-[hsl(0,0%,95%)]"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={onUpload}
-            disabled={!selectedFile || isUploading}
-            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-              !selectedFile || isUploading
-                ? "bg-[hsl(0,0%,95%)] text-[hsl(330,3%,49%)] cursor-not-allowed"
-                : "bg-[#171717] text-white cursor-pointer hover:bg-accent-hover"
-            }`}
-          >
-            {isUploading ? "Uploading..." : "Upload Document"}
-          </button>
+        {selectedFile && (
+          <div className="mt-6">
+            <label className="block text-sm font-medium mb-2 text-text-primary">
+              Document Name
+            </label>
+            <input
+              type="text"
+              value={selectedFile.name}
+              readOnly
+              className="w-full px-4 py-2 rounded-md border text-sm border-border bg-neutral-50 text-text-secondary cursor-not-allowed"
+            />
+            <p className="text-xs mt-1 text-text-secondary">
+              The file will be uploaded with this name
+            </p>
+          </div>
+        )}
+      </div>
+
+      {isUploading && (
+        <div className="px-6 pb-2">
+          <div className="flex items-center justify-between text-xs mb-1.5 text-text-secondary">
+            <span>
+              {uploadPhase === "processing"
+                ? "Processing document..."
+                : "Uploading..."}
+            </span>
+            {uploadPhase === "uploading" && <span>{uploadProgress}%</span>}
+          </div>
+          <div className="w-full h-2 rounded-full overflow-hidden bg-neutral-200">
+            {uploadPhase === "processing" ? (
+              <div className="h-full rounded-full bg-[#171717] animate-pulse w-full" />
+            ) : (
+              <div
+                className="h-full rounded-full transition-all duration-300 ease-out bg-[#171717]"
+                style={{ width: `${uploadProgress}%` }}
+              />
+            )}
+          </div>
         </div>
+      )}
+
+      <div className="border-t px-6 py-4 flex items-center justify-end gap-3 border-border shrink-0">
+        <button
+          onClick={onClose}
+          className="px-4 py-2 rounded-md text-sm font-medium transition-colors border border-border bg-white text-text-primary hover:bg-neutral-100"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={onUpload}
+          disabled={!selectedFile || isUploading}
+          className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+            !selectedFile || isUploading
+              ? "bg-neutral-100 text-text-secondary cursor-not-allowed"
+              : "bg-[#171717] text-white cursor-pointer hover:bg-accent-hover"
+          }`}
+        >
+          {isUploading
+            ? uploadPhase === "processing"
+              ? "Processing..."
+              : `Uploading... ${uploadProgress}%`
+            : "Upload Document"}
+        </button>
       </div>
-    </div>
+    </Modal>
   );
 }
diff --git a/app/components/icons/document/DocumentFileIcon.tsx b/app/components/icons/document/DocumentFileIcon.tsx
index 136cfc2..9ae774b 100644
--- a/app/components/icons/document/DocumentFileIcon.tsx
+++ b/app/components/icons/document/DocumentFileIcon.tsx
@@ -14,8 +14,10 @@ export default function DocumentFileIcon({ className }: IconProps) {
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+        d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8l-5-5z"
       />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M14 3v5h5" />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 13h6M9 17h4" />
     </svg>
   );
 }
diff --git a/app/components/speech-to-text/ModelComparisonCard.tsx b/app/components/speech-to-text/ModelComparisonCard.tsx
deleted file mode 100644
index 38ad0bb..0000000
--- a/app/components/speech-to-text/ModelComparisonCard.tsx
+++ /dev/null
@@ -1,396 +0,0 @@
-/**
- * ModelComparisonCard Component
- *
- * Minimal card design showing just the essentials:
- * - Model name + WER score
- * - Expandable for full details
- */
-
-import React, { useState, useEffect } from "react";
-import { colors } from "@/app/lib/colors";
-
-interface WerMetrics {
-  wer: number;
-  substitutions: number;
-  deletions: number;
-  insertions: number;
-  semantic_errors: number;
-  reference_word_count: number;
-  hypothesis_word_count: number;
-}
-
-interface ModelComparisonCardProps {
-  modelId: string;
-  modelName: string;
-  provider: string;
-  transcript: string;
-  status: "success" | "error" | "pending";
-  error?: string;
-  strictMetrics?: WerMetrics;
-  lenientMetrics?: WerMetrics;
-  isBest?: boolean;
-  isWorst?: boolean;
-  isSelected?: boolean;
-  onClick?: () => void;
-  compact?: boolean;
-}
-
-// Get WER color based on value
-const getWerColor = (wer: number) => {
-  if (wer < 5) return colors.status.success;
-  if (wer < 10) return "#ca8a04"; // yellow-600
-  if (wer < 20) return colors.status.warning;
-  return colors.status.error;
-};
-
-// Get WER label
-const getWerLabel = (wer: number) => {
-  if (wer < 5) return "Excellent";
-  if (wer < 10) return "Good";
-  if (wer < 20) return "Fair";
-  return "Poor";
-};
-
-export default function ModelComparisonCard({
-  modelId,
-  modelName,
-  transcript,
-  status,
-  error,
-  strictMetrics,
-  lenientMetrics,
-  isBest = false,
-  isWorst = false,
-  onClick,
-}: ModelComparisonCardProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const werPercent = strictMetrics ? strictMetrics.wer * 100 : null;
-  const lenientWerPercent = lenientMetrics ? lenientMetrics.wer * 100 : null;
-
-  // Reset expanded state when status changes to pending
-  // Also reset when modelId changes (new model added)
-  useEffect(() => {
-    if (status === "pending") {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setIsExpanded(false);
-    }
-  }, [status, modelId]);
-
-  const handleExpandToggle = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsExpanded(!isExpanded);
-  };
-
-  // Check if we have enough data to show expanded content
-  const hasExpandedContent =
-    status === "success" && (transcript || strictMetrics);
-
-  return (
-    <div
-      className="rounded-lg border overflow-hidden"
-      style={{
-        borderColor: isBest
-          ? colors.status.success
-          : isWorst
-            ? colors.status.error
-            : colors.border,
-        backgroundColor: isBest ? "rgba(22, 163, 74, 0.02)" : colors.bg.primary,
-        borderWidth: isBest ? "2px" : "1px",
-      }}
-    >
-      {/* Minimal Header - Always Visible */}
-      <div className="p-3">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2 min-w-0">
-            {/* Model Name */}
-            <span
-              className="text-sm font-medium truncate"
-              style={{ color: colors.text.primary }}
-            >
-              {modelName}
-            </span>
-
-            {/* Best Badge - small */}
-            {isBest && (
-              <span className="text-xs px-1.5 py-0.5 rounded-full font-medium flex-shrink-0 bg-[#dcfce7] text-[#15803d]">
-                Best
-              </span>
-            )}
-          </div>
-
-          {/* Right side: Status/WER + Expand */}
-          <div className="flex items-center gap-2 flex-shrink-0">
-            {status === "pending" && (
-              <div
-                className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-                style={{
-                  borderColor: colors.text.secondary,
-                  borderTopColor: "transparent",
-                }}
-              />
-            )}
-
-            {status === "error" && (
-              <span className="text-xs px-1.5 py-0.5 rounded bg-[#fee2e2] text-[#dc2626]">
-                Error
-              </span>
-            )}
-
-            {status === "success" && werPercent !== null && (
-              <span
-                className="text-sm font-bold tabular-nums"
-                style={{ color: getWerColor(werPercent) }}
-              >
-                {werPercent.toFixed(1)}%
-              </span>
-            )}
-
-            {/* Expand Button - only show if there's content to expand */}
-            {hasExpandedContent && (
-              <button
-                onClick={handleExpandToggle}
-                className="p-1 rounded hover:bg-gray-100"
-                style={{ color: colors.text.secondary }}
-              >
-                <svg
-                  className="w-4 h-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  style={{
-                    transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
-                    transition: "transform 0.2s ease",
-                  }}
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              </button>
-            )}
-          </div>
-        </div>
-
-        {/* Error Message */}
-        {status === "error" && (
-          <div
-            className="text-xs mt-2 truncate"
-            style={{ color: colors.status.error }}
-          >
-            {error || "Transcription failed"}
-          </div>
-        )}
-      </div>
-
-      {/* Expanded Details - only render if expanded AND has content */}
-      {isExpanded && hasExpandedContent && (
-        <div
-          className="border-t px-3 pb-3 pt-2 space-y-3"
-          style={{
-            borderColor: colors.border,
-            backgroundColor: colors.bg.secondary,
-          }}
-        >
-          {/* WER Comparison */}
-          {werPercent !== null && lenientWerPercent !== null ? (
-            <div className="grid grid-cols-2 gap-3">
-              <div
-                className="p-2 rounded"
-                style={{ backgroundColor: colors.bg.primary }}
-              >
-                <div
-                  className="text-xs mb-0.5"
-                  style={{ color: colors.text.secondary }}
-                >
-                  Strict WER
-                </div>
-                <div className="flex items-baseline gap-1">
-                  <span
-                    className="text-lg font-bold"
-                    style={{ color: getWerColor(werPercent) }}
-                  >
-                    {werPercent.toFixed(1)}%
-                  </span>
-                  <span
-                    className="text-xs"
-                    style={{ color: getWerColor(werPercent) }}
-                  >
-                    {getWerLabel(werPercent)}
-                  </span>
-                </div>
-              </div>
-              <div
-                className="p-2 rounded"
-                style={{ backgroundColor: colors.bg.primary }}
-              >
-                <div
-                  className="text-xs mb-0.5"
-                  style={{ color: colors.text.secondary }}
-                >
-                  Lenient WER
-                </div>
-                <div className="flex items-baseline gap-1">
-                  <span
-                    className="text-lg font-bold"
-                    style={{ color: getWerColor(lenientWerPercent) }}
-                  >
-                    {lenientWerPercent.toFixed(1)}%
-                  </span>
-                  <span
-                    className="text-xs"
-                    style={{ color: getWerColor(lenientWerPercent) }}
-                  >
-                    {getWerLabel(lenientWerPercent)}
-                  </span>
-                </div>
-              </div>
-            </div>
-          ) : (
-            // Show loading state for WER if not available yet
-            <div className="flex items-center justify-center py-2">
-              <div
-                className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin mr-2"
-                style={{
-                  borderColor: colors.text.secondary,
-                  borderTopColor: "transparent",
-                }}
-              />
-              <span
-                className="text-xs"
-                style={{ color: colors.text.secondary }}
-              >
-                Computing WER...
-              </span>
-            </div>
-          )}
-
-          {/* Error Breakdown */}
-          {strictMetrics && (
-            <div className="grid grid-cols-4 gap-2 text-center">
-              <div
-                className="p-1.5 rounded"
-                style={{ backgroundColor: colors.bg.primary }}
-              >
-                <div
-                  className="text-xs"
-                  style={{ color: colors.text.secondary }}
-                >
-                  Sub
-                </div>
-                <div
-                  className="text-sm font-medium"
-                  style={{ color: colors.status.warning }}
-                >
-                  {strictMetrics.substitutions}
-                </div>
-              </div>
-              <div
-                className="p-1.5 rounded"
-                style={{ backgroundColor: colors.bg.primary }}
-              >
-                <div
-                  className="text-xs"
-                  style={{ color: colors.text.secondary }}
-                >
-                  Del
-                </div>
-                <div
-                  className="text-sm font-medium"
-                  style={{ color: colors.status.error }}
-                >
-                  {strictMetrics.deletions}
-                </div>
-              </div>
-              <div
-                className="p-1.5 rounded"
-                style={{ backgroundColor: colors.bg.primary }}
-              >
-                <div
-                  className="text-xs"
-                  style={{ color: colors.text.secondary }}
-                >
-                  Ins
-                </div>
-                <div
-                  className="text-sm font-medium"
-                  style={{ color: colors.accent.primary }}
-                >
-                  {strictMetrics.insertions}
-                </div>
-              </div>
-              <div
-                className="p-1.5 rounded"
-                style={{ backgroundColor: colors.bg.primary }}
-              >
-                <div
-                  className="text-xs"
-                  style={{ color: colors.text.secondary }}
-                >
-                  Words
-                </div>
-                <div
-                  className="text-sm font-medium"
-                  style={{ color: colors.text.primary }}
-                >
-                  {strictMetrics.reference_word_count}
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Transcription */}
-          {transcript && (
-            <div>
-              <div
-                className="text-xs font-medium mb-1"
-                style={{ color: colors.text.secondary }}
-              >
-                Transcription
-              </div>
-              <div
-                className="text-xs p-2 rounded leading-relaxed max-h-24 overflow-auto"
-                style={{
-                  backgroundColor: colors.bg.primary,
-                  color: colors.text.primary,
-                }}
-              >
-                {transcript}
-              </div>
-            </div>
-          )}
-
-          {/* View Diff Button */}
-          {onClick && (
-            <button
-              onClick={onClick}
-              className="w-full py-1.5 rounded text-xs font-medium flex items-center justify-center gap-1"
-              style={{
-                backgroundColor: colors.bg.primary,
-                color: colors.text.secondary,
-                border: `1px solid ${colors.border}`,
-              }}
-            >
-              <svg
-                className="w-3 h-3"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-              View Diff Comparison
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/app/lib/apiClient.ts b/app/lib/apiClient.ts
index 790743e..c0970a7 100644
--- a/app/lib/apiClient.ts
+++ b/app/lib/apiClient.ts
@@ -1,6 +1,7 @@
 import { NextRequest } from "next/server";
 
 const BACKEND_URL = process.env.BACKEND_URL || "http://localhost:8000";
+export type UploadPhase = "uploading" | "processing" | "done";
 
 /**
  * Passthrough proxy helper for Next.js route handlers.
@@ -14,8 +15,8 @@ export async function apiClient(
 ) {
   const apiKey = request.headers.get("X-API-KEY") || "";
   const headers = new Headers(options.headers);
-  // Don't set Content-Type for FormData — the browser sets it with the boundary
-  if (!(options.body instanceof FormData)) {
+  // Don't set Content-Type for FormData (browser sets it with boundary)
+  if (!(options.body instanceof FormData) && !headers.has("Content-Type")) {
     headers.set("Content-Type", "application/json");
   }
   headers.set("X-API-KEY", apiKey);
@@ -32,6 +33,83 @@ export async function apiClient(
   return { status: response.status, data };
 }
 
+/**
+ * Upload a file with real-time progress tracking.
+ *
+ * Works with a streaming proxy endpoint that sends newline-delimited JSON:
+ *   { phase: "uploading", progress: 42 }   — bytes consumed by backend
+ *   { phase: "processing" }                 — backend is processing the file
+ *   { done: true, status, data }            — final response
+ *   { error: "message" }                    — failure
+ *
+ * Returns `{ promise, abort }` so callers can cancel in-flight uploads.
+ */
+export function uploadWithProgress<T>(
+  url: string,
+  apiKey: string,
+  body: FormData,
+  onProgress: (percent: number, phase: UploadPhase) => void,
+): { promise: Promise<T>; abort: () => void } {
+  const controller = new AbortController();
+
+  const promise = (async () => {
+    const res = await fetch(url, {
+      method: "POST",
+      headers: { "X-API-KEY": apiKey },
+      body,
+      signal: controller.signal,
+    });
+
+    if (!res.body) throw new Error("No response stream");
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    let result: T | null = null;
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+
+      for (const line of lines) {
+        if (!line.trim()) continue;
+        const event = JSON.parse(line);
+
+        if (event.error) {
+          throw new Error(event.error);
+        }
+        if (event.phase === "uploading" && event.progress !== undefined) {
+          onProgress(event.progress, "uploading");
+        }
+        if (event.phase === "processing") {
+          onProgress(100, "processing");
+        }
+        if (event.done) {
+          onProgress(100, "done");
+          if (event.status >= 400) {
+            const msg =
+              event.data?.error ||
+              event.data?.message ||
+              event.data?.detail ||
+              `Upload failed: ${event.status}`;
+            throw new Error(msg);
+          }
+          result = event.data as T;
+        }
+      }
+    }
+
+    if (!result) throw new Error("No response received from server");
+    return result;
+  })();
+
+  return { promise, abort: () => controller.abort() };
+}
+
 /**
  * Client-side fetch helper for Next.js route handlers (/api/*).
  * Attaches the X-API-KEY header and throws on non-OK responses.
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 3ffbcdf..967ff50 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -12,6 +12,13 @@ export const CACHE_MAX_AGE_MS = 5 * 60 * 1000;
 
 export const DEFAULT_PAGE_LIMIT = 10;
 
+export const ACCEPTED_DOCUMENT_TYPES =
+  ".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png,.gif,.bmp,.webp";
+
+/** Maximum document upload size in bytes (25 MB) */
+export const MAX_DOCUMENT_SIZE_MB = 25;
+export const MAX_DOCUMENT_SIZE_BYTES = MAX_DOCUMENT_SIZE_MB * 1024 * 1024;
+
 /** Custom event dispatched when background validation invalidates the in-memory cache */
 export const CACHE_INVALIDATED_EVENT = "kaapi:config-cache-invalidated";
 
diff --git a/app/lib/types/document.ts b/app/lib/types/document.ts
new file mode 100644
index 0000000..3cd64a2
--- /dev/null
+++ b/app/lib/types/document.ts
@@ -0,0 +1,21 @@
+export interface Document {
+  id: string;
+  fname: string;
+  object_store_url: string;
+  signed_url?: string;
+  file_size?: number;
+  inserted_at?: string;
+  updated_at?: string;
+}
+
+export interface Collection {
+  id: string;
+  name?: string;
+  description?: string;
+  knowledge_base_id?: string;
+  inserted_at: string;
+  updated_at: string;
+  status?: string;
+  job_id?: string;
+  documents?: Document[];
+}