diff --git a/app/(main)/knowledge-base/page.tsx b/app/(main)/knowledge-base/page.tsx
index 0d4ffe67..8f285654 100644
--- a/app/(main)/knowledge-base/page.tsx
+++ b/app/(main)/knowledge-base/page.tsx
@@ -1,18 +1,21 @@
 "use client";
 
 import { useState } from "react";
-import CollectionsList from "@/app/components/knowledge-base/CollectionsList";
-import CreateCollectionForm from "@/app/components/knowledge-base/CreateCollectionForm";
-import CollectionDetail from "@/app/components/knowledge-base/CollectionDetail";
-import DocumentPickerModal from "@/app/components/knowledge-base/DocumentPickerModal";
-import DeleteCollectionModal from "@/app/components/knowledge-base/DeleteCollectionModal";
-import DocumentPreviewModal from "@/app/components/knowledge-base/DocumentPreviewModal";
+import {
+  CollectionDetail,
+  CollectionsList,
+  CreateCollectionForm,
+  DeleteCollectionModal,
+  DocumentPickerModal,
+  DocumentPreviewModal,
+  EditCollectionModal,
+} from "@/app/components/knowledge-base";
 import { Modal, Loader } from "@/app/components/ui";
 import { Sidebar, PageHeader } from "@/app/components";
 import { BookOpenIcon } from "@/app/components/icons";
 import { useApp } from "@/app/lib/context/AppContext";
 import { useCollections } from "@/app/hooks/useCollections";
-import { Document } from "@/app/lib/types/document";
+import { Document, Collection } from "@/app/lib/types/document";
 
 export default function KnowledgeBasePage() {
   const { sidebarCollapsed } = useApp();
@@ -22,12 +25,15 @@ export default function KnowledgeBasePage() {
     selectedCollection,
     isLoading,
     isLoadingDetail,
+    isLoadingDocuments,
     isCreating,
     setSelectedCollection,
     fetchCollectionDetails,
     createCollection,
     deleteCollection,
+    updateCollection,
     fetchAndPreviewDoc,
+    fetchDocuments,
   } = useCollections();
 
   const [showCreateForm, setShowCreateForm] = useState(false);
@@ -39,6 +45,9 @@ export default function KnowledgeBasePage() {
   const [showDocPreviewModal, setShowDocPreviewModal] = useState(false);
   const [previewDoc, setPreviewDoc] = useState<Document | null>(null);
   const [isPreviewLoading, setIsPreviewLoading] = useState(false);
+  const [collectionToEdit, setCollectionToEdit] = useState<Collection | null>(
+    null,
+  );
 
   const [collectionName, setCollectionName] = useState("");
   const [collectionDescription, setCollectionDescription] = useState("");
@@ -65,6 +74,7 @@ export default function KnowledgeBasePage() {
   const handleCreateNew = () => {
     setShowCreateForm(true);
     setSelectedCollection(null);
+    fetchDocuments();
   };
 
   const handleCancelCreate = () => {
@@ -81,12 +91,13 @@ export default function KnowledgeBasePage() {
       description: collectionDescription,
       documentIds: Array.from(selectedDocuments),
     };
+    const ok = await createCollection(params);
+    if (!ok) return;
     setShowCreateForm(false);
     setShowDocumentPicker(false);
     setCollectionName("");
     setCollectionDescription("");
     setSelectedDocuments(new Set());
-    await createCollection(params);
   };
 
   const handleRequestDelete = (collectionId: string) => {
@@ -94,6 +105,18 @@ export default function KnowledgeBasePage() {
     setShowConfirmDelete(true);
   };
 
+  const handleRequestEdit = (collection: Collection) => {
+    setCollectionToEdit(collection);
+  };
+
+  const handleSaveEdit = async (patch: {
+    name?: string;
+    description?: string;
+  }) => {
+    if (!collectionToEdit) return false;
+    return updateCollection(collectionToEdit.id, patch);
+  };
+
   const handleConfirmDelete = async () => {
     if (!collectionToDelete) return;
     setShowConfirmDelete(false);
@@ -142,6 +165,7 @@ export default function KnowledgeBasePage() {
             isLoading={isLoading}
             onSelect={handleSelectCollection}
             onRequestDelete={handleRequestDelete}
+            onRequestEdit={handleRequestEdit}
             onCreateNew={handleCreateNew}
           />
 
@@ -154,6 +178,7 @@ export default function KnowledgeBasePage() {
                 setCollectionDescription={setCollectionDescription}
                 selectedDocuments={selectedDocuments}
                 availableDocuments={availableDocuments}
+                isLoadingDocuments={isLoadingDocuments}
                 onToggleDocument={toggleDocumentSelection}
                 onOpenDocumentPicker={() => setShowDocumentPicker(true)}
                 isCreating={isCreating}
@@ -207,6 +232,7 @@ export default function KnowledgeBasePage() {
           onClose={handleCancelCreate}
           maxWidth="max-w-2xl"
           maxHeight="max-h-[90vh]"
+          showClose={false}
         >
           <CreateCollectionForm
             collectionName={collectionName}
@@ -220,6 +246,7 @@ export default function KnowledgeBasePage() {
             isCreating={isCreating}
             onCancel={handleCancelCreate}
             onCreate={handleCreateClick}
+            onClose={handleCancelCreate}
           />
         </Modal>
 
@@ -228,6 +255,7 @@ export default function KnowledgeBasePage() {
           onClose={() => setSelectedCollection(null)}
           maxWidth="max-w-2xl"
           maxHeight="max-h-[90vh]"
+          showClose={false}
         >
           {selectedCollection && (
             <CollectionDetail
@@ -237,6 +265,7 @@ export default function KnowledgeBasePage() {
                 handleRequestDelete(id);
               }}
               onPreviewDocument={handlePreviewDocument}
+              onClose={() => setSelectedCollection(null)}
             />
           )}
         </Modal>
@@ -272,6 +301,13 @@ export default function KnowledgeBasePage() {
         isLoading={isPreviewLoading}
         onSelectDocument={handleSelectPreviewDoc}
       />
+
+      <EditCollectionModal
+        open={!!collectionToEdit}
+        collection={collectionToEdit}
+        onClose={() => setCollectionToEdit(null)}
+        onSave={handleSaveEdit}
+      />
     </div>
   );
 }
diff --git a/app/api/collections/[collection_id]/route.ts b/app/api/collections/[collection_id]/route.ts
index bee11a02..6b61d1a2 100644
--- a/app/api/collections/[collection_id]/route.ts
+++ b/app/api/collections/[collection_id]/route.ts
@@ -1,7 +1,6 @@
 import { NextResponse } from "next/server";
 import { apiClient } from "@/app/lib/apiClient";
 
-// GET /api/collections/[collection_id] - Get a specific collection
 export async function GET(
   request: Request,
   { params }: { params: Promise<{ collection_id: string }> },
@@ -26,7 +25,35 @@ export async function GET(
   }
 }
 
-// DELETE /api/collection/[collection_id] - Delete a collection
+export async function PATCH(
+  request: Request,
+  { params }: { params: Promise<{ collection_id: string }> },
+) {
+  const { collection_id } = await params;
+  try {
+    const body = await request.json();
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/collections/${collection_id}`,
+      {
+        method: "PATCH",
+        body: JSON.stringify(body),
+        headers: { "Content-Type": "application/json" },
+      },
+    );
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+        data: null,
+      },
+      { status: 500 },
+    );
+  }
+}
+
 export async function DELETE(
   request: Request,
   { params }: { params: Promise<{ collection_id: string }> },
diff --git a/app/components/document/UploadDocumentModal.tsx b/app/components/document/UploadDocumentModal.tsx
index fa736bb3..d9d41674 100644
--- a/app/components/document/UploadDocumentModal.tsx
+++ b/app/components/document/UploadDocumentModal.tsx
@@ -3,7 +3,7 @@
 import { useRef } from "react";
 import { Button, Modal } from "@/app/components/ui";
 import { CloudUploadIcon } from "@/app/components/icons";
-import DocumentChip from "@/app/components/knowledge-base/DocumentChip";
+import { DocumentChip } from "@/app/components/knowledge-base";
 import type { UploadPhase } from "@/app/lib/apiClient";
 import {
   ACCEPTED_DOCUMENT_TYPES,
diff --git a/app/components/knowledge-base/CollectionDetail.tsx b/app/components/knowledge-base/CollectionDetail.tsx
index 85dd987d..ccff750c 100644
--- a/app/components/knowledge-base/CollectionDetail.tsx
+++ b/app/components/knowledge-base/CollectionDetail.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/app/components/ui";
 import {
   CheckLineIcon,
   ChevronDownIcon,
+  CloseIcon,
   CopyIcon,
 } from "@/app/components/icons";
 import { formatDate } from "@/app/components/utils";
@@ -14,12 +15,14 @@ interface CollectionDetailProps {
   collection: Collection;
   onRequestDelete: (collectionId: string) => void;
   onPreviewDocument: (firstDocument: Document) => void;
+  onClose?: () => void;
 }
 
 export default function CollectionDetail({
   collection,
   onRequestDelete,
   onPreviewDocument,
+  onClose,
 }: CollectionDetailProps) {
   const [showAllDocs, setShowAllDocs] = useState(false);
   const [copied, setCopied] = useState(false);
@@ -42,8 +45,8 @@ export default function CollectionDetail({
   return (
     <>
       <div className="p-6 border-b border-border">
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex-1 min-w-0">
             <h2 className="text-xl font-semibold text-text-primary">
               {collection.name}
             </h2>
@@ -53,15 +56,27 @@ export default function CollectionDetail({
               </p>
             )}
           </div>
-          {!isOptimistic && (
-            <Button
-              variant="danger"
-              size="sm"
-              onClick={() => onRequestDelete(collection.id)}
-            >
-              Delete
-            </Button>
-          )}
+          <div className="flex items-center gap-2 shrink-0">
+            {!isOptimistic && (
+              <Button
+                variant="danger"
+                size="sm"
+                onClick={() => onRequestDelete(collection.id)}
+              >
+                Delete
+              </Button>
+            )}
+            {onClose && (
+              <button
+                type="button"
+                onClick={onClose}
+                aria-label="Close"
+                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>
+            )}
+          </div>
         </div>
 
         <div className="space-y-3 mt-6">
diff --git a/app/components/knowledge-base/CollectionsList.tsx b/app/components/knowledge-base/CollectionsList.tsx
index a89cfb0a..010d75d9 100644
--- a/app/components/knowledge-base/CollectionsList.tsx
+++ b/app/components/knowledge-base/CollectionsList.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/app/components/ui";
-import { BookOpenIcon, TrashIcon } from "@/app/components/icons";
+import { BookOpenIcon, EditIcon, TrashIcon } from "@/app/components/icons";
 import { formatDate } from "@/app/components/utils";
 import { Collection } from "@/app/lib/types/document";
 import CollectionsListSkeleton from "./CollectionsListSkeleton";
@@ -12,6 +12,7 @@ interface CollectionsListProps {
   isLoading: boolean;
   onSelect: (collectionId: string) => void;
   onRequestDelete: (collectionId: string) => void;
+  onRequestEdit: (collection: Collection) => void;
   onCreateNew: () => void;
 }
 
@@ -21,6 +22,7 @@ export default function CollectionsList({
   isLoading,
   onSelect,
   onRequestDelete,
+  onRequestEdit,
   onCreateNew,
 }: CollectionsListProps) {
   return (
@@ -81,15 +83,27 @@ export default function CollectionsList({
                       </p>
                     </div>
                     {!isOptimistic && (
-                      <span
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onRequestDelete(collection.id);
-                        }}
-                        className="p-1.5 rounded-md border border-status-error-border bg-bg-primary text-status-error-text hover:bg-status-error-bg transition-colors shrink-0 cursor-pointer"
-                        title="Delete Knowledge Base"
-                      >
-                        <TrashIcon className="w-3.5 h-3.5" />
+                      <span className="flex items-center gap-1.5 shrink-0">
+                        <span
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onRequestEdit(collection);
+                          }}
+                          className="p-1.5 rounded-md border border-border bg-bg-primary text-text-secondary hover:text-accent-primary hover:border-accent-primary hover:bg-accent-primary/10 transition-colors cursor-pointer"
+                          title="Edit Knowledge Base"
+                        >
+                          <EditIcon className="w-3.5 h-3.5" />
+                        </span>
+                        <span
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onRequestDelete(collection.id);
+                          }}
+                          className="p-1.5 rounded-md border border-status-error-border bg-bg-primary text-status-error-text hover:bg-status-error-bg transition-colors cursor-pointer"
+                          title="Delete Knowledge Base"
+                        >
+                          <TrashIcon className="w-3.5 h-3.5" />
+                        </span>
                       </span>
                     )}
                   </div>
diff --git a/app/components/knowledge-base/CreateCollectionForm.tsx b/app/components/knowledge-base/CreateCollectionForm.tsx
index 532540af..6eba94ec 100644
--- a/app/components/knowledge-base/CreateCollectionForm.tsx
+++ b/app/components/knowledge-base/CreateCollectionForm.tsx
@@ -1,8 +1,12 @@
 "use client";
 
 import { Button, Field } from "@/app/components/ui";
-import { ChevronRightIcon } from "@/app/components/icons";
+import { ChevronRightIcon, CloseIcon } from "@/app/components/icons";
 import { Document } from "@/app/lib/types/document";
+import {
+  COLLECTION_DESCRIPTION_MAX,
+  COLLECTION_NAME_MAX,
+} from "@/app/lib/constants";
 import DocumentChip from "./DocumentChip";
 
 interface CreateCollectionFormProps {
@@ -12,11 +16,13 @@ interface CreateCollectionFormProps {
   setCollectionDescription: (value: string) => void;
   selectedDocuments: Set<string>;
   availableDocuments: Document[];
+  isLoadingDocuments?: boolean;
   onToggleDocument: (documentId: string) => void;
   onOpenDocumentPicker: () => void;
   isCreating: boolean;
   onCancel: () => void;
   onCreate: () => void;
+  onClose?: () => void;
 }
 
 export default function CreateCollectionForm({
@@ -26,33 +32,53 @@ export default function CreateCollectionForm({
   setCollectionDescription,
   selectedDocuments,
   availableDocuments,
+  isLoadingDocuments = false,
   onToggleDocument,
   onOpenDocumentPicker,
   isCreating,
   onCancel,
   onCreate,
+  onClose,
 }: CreateCollectionFormProps) {
   const isCreateDisabled =
     isCreating || !collectionName.trim() || selectedDocuments.size === 0;
 
   return (
     <div className="flex-1 overflow-auto p-4 space-y-4">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h2 className="text-base font-semibold text-text-primary">
+            Create Knowledge Base
+          </h2>
+          <p className="text-xs mt-0.5 text-text-secondary">
+            Group documents into a collection for RAG retrieval
+          </p>
+        </div>
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close"
+            className="shrink-0 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>
+        )}
+      </div>
+
       <div>
-        <h2 className="text-base font-semibold text-text-primary">
-          Create Knowledge Base
-        </h2>
-        <p className="text-xs mt-0.5 text-text-secondary">
-          Group documents into a collection for RAG retrieval
+        <Field
+          label="Name *"
+          value={collectionName}
+          onChange={setCollectionName}
+          placeholder="e.g., Product Docs v1"
+          maxLength={COLLECTION_NAME_MAX}
+        />
+        <p className="text-[11px] text-text-secondary mt-1 text-right">
+          {collectionName.length}/{COLLECTION_NAME_MAX}
         </p>
       </div>
 
-      <Field
-        label="Name *"
-        value={collectionName}
-        onChange={setCollectionName}
-        placeholder="e.g., Product Docs v1"
-      />
-
       <div>
         <label className="block text-xs font-medium mb-1 text-text-secondary">
           Description (Optional)
@@ -62,8 +88,12 @@ export default function CreateCollectionForm({
           onChange={(e) => setCollectionDescription(e.target.value)}
           placeholder="Description..."
           rows={3}
+          maxLength={COLLECTION_DESCRIPTION_MAX}
           className="w-full px-3 py-2 rounded-lg border border-border bg-white text-text-primary text-sm placeholder:text-neutral-400 resize-none focus:outline-none focus:ring-accent-primary/20 focus:border-accent-primary transition-colors"
         />
+        <p className="text-[11px] text-text-secondary mt-1 text-right">
+          {collectionDescription.length}/{COLLECTION_DESCRIPTION_MAX}
+        </p>
       </div>
 
       <div>
@@ -73,13 +103,21 @@ export default function CreateCollectionForm({
         <button
           type="button"
           onClick={onOpenDocumentPicker}
-          className="w-full px-3 py-2 rounded-lg border border-border bg-white text-text-primary text-left flex items-center justify-between hover:bg-neutral-50 transition-colors cursor-pointer"
+          disabled={isLoadingDocuments}
+          className="w-full px-3 py-2 rounded-lg border border-border bg-white text-text-primary text-left flex items-center justify-between hover:bg-neutral-50 transition-colors cursor-pointer disabled:cursor-wait disabled:opacity-70"
         >
-          <span className="text-sm">
-            {selectedDocuments.size === 0
-              ? "Click to select documents"
-              : `${selectedDocuments.size} document${selectedDocuments.size > 1 ? "s" : ""} selected`}
-          </span>
+          {isLoadingDocuments ? (
+            <span className="text-sm inline-flex items-center gap-2 text-text-secondary">
+              <span className="w-3.5 h-3.5 border-2 border-text-secondary border-t-transparent rounded-full animate-spin" />
+              Loading documents…
+            </span>
+          ) : (
+            <span className="text-sm">
+              {selectedDocuments.size === 0
+                ? "Click to select documents"
+                : `${selectedDocuments.size} document${selectedDocuments.size > 1 ? "s" : ""} selected`}
+            </span>
+          )}
           <ChevronRightIcon className="w-4 h-4 text-text-secondary" />
         </button>
 
diff --git a/app/components/knowledge-base/EditCollectionModal.tsx b/app/components/knowledge-base/EditCollectionModal.tsx
new file mode 100644
index 00000000..9a1b2695
--- /dev/null
+++ b/app/components/knowledge-base/EditCollectionModal.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button, Modal, Field } from "@/app/components/ui";
+import { Collection } from "@/app/lib/types/document";
+import {
+  COLLECTION_DESCRIPTION_MAX,
+  COLLECTION_NAME_MAX,
+} from "@/app/lib/constants";
+
+interface EditCollectionModalProps {
+  open: boolean;
+  collection: Collection | null;
+  onClose: () => void;
+  onSave: (patch: { name?: string; description?: string }) => Promise<boolean>;
+}
+
+export default function EditCollectionModal({
+  open,
+  collection,
+  onClose,
+  onSave,
+}: EditCollectionModalProps) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    if (open && collection) {
+      setName(collection.name ?? "");
+      setDescription(collection.description ?? "");
+    }
+  }, [open, collection]);
+
+  const handleSave = async () => {
+    if (!collection) return;
+    const trimmedName = name.trim();
+    if (!trimmedName) return;
+    const patch: { name?: string; description?: string } = {};
+    if (trimmedName !== (collection.name ?? "")) patch.name = trimmedName;
+    if (description !== (collection.description ?? ""))
+      patch.description = description;
+    if (Object.keys(patch).length === 0) {
+      onClose();
+      return;
+    }
+    setIsSaving(true);
+    const ok = await onSave(patch);
+    setIsSaving(false);
+    if (ok) onClose();
+  };
+
+  const isDisabled = isSaving || !name.trim();
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Edit Knowledge Base"
+      maxWidth="max-w-lg"
+    >
+      <div className="px-6 pb-6 space-y-4">
+        <div>
+          <Field
+            label="Name *"
+            value={name}
+            onChange={setName}
+            placeholder="e.g., Product Docs v1"
+            maxLength={COLLECTION_NAME_MAX}
+          />
+          <p className="text-[11px] text-text-secondary mt-1 text-right">
+            {name.length}/{COLLECTION_NAME_MAX}
+          </p>
+        </div>
+        <div>
+          <label className="block text-xs font-medium mb-1 text-text-secondary">
+            Description (Optional)
+          </label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Description..."
+            rows={3}
+            maxLength={COLLECTION_DESCRIPTION_MAX}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-white text-text-primary text-sm placeholder:text-neutral-400 resize-none focus:outline-none focus:ring-accent-primary/20 focus:border-accent-primary transition-colors"
+          />
+          <p className="text-[11px] text-text-secondary mt-1 text-right">
+            {description.length}/{COLLECTION_DESCRIPTION_MAX}
+          </p>
+        </div>
+        <div className="flex items-center justify-end gap-3 pt-2">
+          <Button
+            variant="ghost"
+            size="md"
+            onClick={onClose}
+            disabled={isSaving}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            onClick={handleSave}
+            disabled={isDisabled}
+          >
+            {isSaving ? (
+              <>
+                <div className="w-4 h-4 border-2 border-text-secondary border-t-transparent rounded-full animate-spin" />
+                Saving…
+              </>
+            ) : (
+              "Save changes"
+            )}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/app/components/knowledge-base/index.ts b/app/components/knowledge-base/index.ts
new file mode 100644
index 00000000..9abf5464
--- /dev/null
+++ b/app/components/knowledge-base/index.ts
@@ -0,0 +1,9 @@
+export { default as CollectionDetail } from "./CollectionDetail";
+export { default as CollectionsList } from "./CollectionsList";
+export { default as CollectionsListSkeleton } from "./CollectionsListSkeleton";
+export { default as CreateCollectionForm } from "./CreateCollectionForm";
+export { default as DeleteCollectionModal } from "./DeleteCollectionModal";
+export { default as DocumentChip } from "./DocumentChip";
+export { default as DocumentPickerModal } from "./DocumentPickerModal";
+export { default as DocumentPreviewModal } from "./DocumentPreviewModal";
+export { default as EditCollectionModal } from "./EditCollectionModal";
diff --git a/app/components/ui/Field.tsx b/app/components/ui/Field.tsx
index a5956fde..f11d1491 100644
--- a/app/components/ui/Field.tsx
+++ b/app/components/ui/Field.tsx
@@ -13,6 +13,7 @@ interface FieldProps {
   disabled?: boolean;
   autoFocus?: boolean;
   className?: string;
+  maxLength?: number;
 }
 
 export default function Field({
@@ -25,6 +26,7 @@ export default function Field({
   disabled = false,
   autoFocus = false,
   className = "",
+  maxLength,
 }: FieldProps) {
   const [showPassword, setShowPassword] = useState(false);
   const isPassword = type === "password";
@@ -43,6 +45,7 @@ export default function Field({
           placeholder={placeholder}
           disabled={disabled}
           autoFocus={autoFocus}
+          maxLength={maxLength}
           className={`w-full px-3 py-2 rounded-lg border text-sm text-text-primary bg-white placeholder:text-neutral-400 focus:outline-none focus:ring-accent-primary/20 focus:border-accent-primary transition-colors ${
             isPassword ? "pr-10" : ""
           } ${error ? "border-red-400" : "border-border"} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`}
diff --git a/app/hooks/useCollections.ts b/app/hooks/useCollections.ts
index 6c770a48..f639e3ff 100644
--- a/app/hooks/useCollections.ts
+++ b/app/hooks/useCollections.ts
@@ -13,6 +13,7 @@ import { Document, Collection } from "@/app/lib/types/document";
 import {
   saveCollectionData,
   getCollectionDataByCollectionId,
+  updateCollectionCacheByCollectionId,
   deleteCollectionFromCache,
   pruneStaleCache,
   setCollectionIdForJob,
@@ -38,6 +39,7 @@ export function useCollections() {
     useState<Collection | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingDetail, setIsLoadingDetail] = useState(false);
+  const [isLoadingDocuments, setIsLoadingDocuments] = useState(false);
   const [isCreating, setIsCreating] = useState(false);
 
   const apiKeyRef = useRef<typeof apiKey>(null);
@@ -72,11 +74,12 @@ export function useCollections() {
           );
           status = jobData?.status || undefined;
         }
+        console.log({ collectionData });
 
         setSelectedCollection({
           ...collectionData,
-          name: cached.name || collectionData.name || "Untitled Collection",
-          description: cached.description || collectionData.description || "",
+          name: collectionData.name || cached.name || "Untitled Collection",
+          description: collectionData.description || cached.description || "",
           status,
           job_id: cached.job_id,
         });
@@ -146,6 +149,7 @@ export function useCollections() {
 
   const fetchDocuments = useCallback(async () => {
     if (!isAuthenticated) return;
+    setIsLoadingDocuments(true);
     try {
       const result = await apiFetch<Document[] | DocumentResponse>(
         "/api/document",
@@ -162,6 +166,8 @@ export function useCollections() {
       setAvailableDocuments(sorted);
     } catch (error) {
       console.error("Error fetching documents:", error);
+    } finally {
+      setIsLoadingDocuments(false);
     }
   }, [apiKey, isAuthenticated]);
 
@@ -233,14 +239,18 @@ export function useCollections() {
   }, [isAuthenticated]);
 
   const createCollection = useCallback(
-    async ({ name, description, documentIds }: CreateCollectionParams) => {
+    async ({
+      name,
+      description,
+      documentIds,
+    }: CreateCollectionParams): Promise<boolean> => {
       if (!isAuthenticated) {
         toast.error("Please log in to continue");
-        return;
+        return false;
       }
       if (!name.trim() || documentIds.length === 0) {
         toast.error("Please provide a name and select at least one document");
-        return;
+        return false;
       }
 
       setIsCreating(true);
@@ -297,6 +307,7 @@ export function useCollections() {
         }
 
         await fetchCollections();
+        return true;
       } catch (error) {
         console.error("Error creating knowledge base:", error);
         toast.error(
@@ -304,6 +315,7 @@ export function useCollections() {
         );
         setCollections((prev) => prev.filter((c) => c.id !== optimisticId));
         setSelectedCollection(null);
+        return false;
       } finally {
         setIsCreating(false);
       }
@@ -395,6 +407,61 @@ export function useCollections() {
     [apiKey, collections, isAuthenticated, toast],
   );
 
+  const updateCollection = useCallback(
+    async (
+      collectionId: string,
+      patch: { name?: string; description?: string },
+    ): Promise<boolean> => {
+      if (!isAuthenticated) {
+        toast.error("Please log in to continue");
+        return false;
+      }
+      const trimmedName = patch.name?.trim();
+      if (patch.name !== undefined && !trimmedName) {
+        toast.error("Name cannot be empty");
+        return false;
+      }
+      const payload: { name?: string; description?: string } = {};
+      if (patch.name !== undefined) payload.name = trimmedName!;
+      if (patch.description !== undefined)
+        payload.description = patch.description;
+
+      const previous = collections.find((c) => c.id === collectionId);
+
+      setCollections((prev) =>
+        prev.map((c) => (c.id === collectionId ? { ...c, ...payload } : c)),
+      );
+      setSelectedCollection((prev) =>
+        prev?.id === collectionId ? { ...prev, ...payload } : prev,
+      );
+
+      try {
+        await apiFetch(`/api/collections/${collectionId}`, apiKey?.key ?? "", {
+          method: "PATCH",
+          body: JSON.stringify(payload),
+        });
+        updateCollectionCacheByCollectionId(collectionId, payload);
+        toast.success("Knowledge base updated");
+        return true;
+      } catch (error) {
+        console.error("Error updating collection:", error);
+        const message =
+          error instanceof Error ? error.message : "Failed to update";
+        toast.error(message);
+        if (previous) {
+          setCollections((prev) =>
+            prev.map((c) => (c.id === collectionId ? previous : c)),
+          );
+          setSelectedCollection((prev) =>
+            prev?.id === collectionId ? previous : prev,
+          );
+        }
+        return false;
+      }
+    },
+    [apiKey, collections, isAuthenticated, toast],
+  );
+
   const fetchAndPreviewDoc = useCallback(
     async (doc: Document): Promise<Document> => {
       if (!isAuthenticated) return doc;
@@ -420,11 +487,28 @@ export function useCollections() {
     fetchDocumentsRef.current = fetchDocuments;
   }, [fetchDocuments]);
 
+  const apiKeyValue = apiKey?.key ?? null;
+
   useEffect(() => {
-    if (!isAuthenticated || !apiKey) return;
-    fetchCollectionsRef.current?.();
-    fetchDocumentsRef.current?.();
-  }, [apiKey, isAuthenticated]);
+    if (!isAuthenticated) return;
+    void fetchCollections();
+    void fetchDocuments();
+  }, [isAuthenticated, apiKeyValue]);
+
+  useEffect(() => {
+    if (!isAuthenticated) return;
+    const onVisible = () => {
+      if (document.visibilityState !== "visible") return;
+      void fetchCollectionsRef.current?.();
+      void fetchDocumentsRef.current?.();
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    window.addEventListener("focus", onVisible);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisible);
+      window.removeEventListener("focus", onVisible);
+    };
+  }, [isAuthenticated]);
 
   useEffect(() => {
     apiKeyRef.current = apiKey;
@@ -465,11 +549,14 @@ export function useCollections() {
     selectedCollection,
     isLoading,
     isLoadingDetail,
+    isLoadingDocuments,
     isCreating,
     setSelectedCollection,
     fetchCollectionDetails,
     createCollection,
     deleteCollection,
+    updateCollection,
     fetchAndPreviewDoc,
+    fetchDocuments,
   };
 }
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index d649ecea..a359e6b0 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -35,6 +35,10 @@ export const MAX_DOCUMENT_SIZE_BYTES = MAX_DOCUMENT_SIZE_MB * 1024 * 1024;
 /** Maximum number of documents that can be selected for one upload batch */
 export const MAX_DOCUMENT_UPLOAD_BATCH = 5;
 
+/** Backend-enforced limits on collection fields */
+export const COLLECTION_NAME_MAX = 255;
+export const COLLECTION_DESCRIPTION_MAX = 2000;
+
 /** 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/utils/collectionEnrichment.ts b/app/lib/utils/collectionEnrichment.ts
index d8c95011..f49c8a76 100644
--- a/app/lib/utils/collectionEnrichment.ts
+++ b/app/lib/utils/collectionEnrichment.ts
@@ -55,8 +55,8 @@ export const enrichCollectionWithCache = (
 
   return {
     ...collection,
-    name: name || "Untitled Collection",
-    description: description || "",
+    name: collection.name || name || "Untitled Collection",
+    description: collection.description || description || "",
     status: collectionJobStatus || undefined,
     job_id: jobId,
   };
diff --git a/app/lib/utils/knowledgeBaseCache.ts b/app/lib/utils/knowledgeBaseCache.ts
index 85ef9c2c..1e1374ce 100644
--- a/app/lib/utils/knowledgeBaseCache.ts
+++ b/app/lib/utils/knowledgeBaseCache.ts
@@ -40,6 +40,26 @@ export const saveCollectionData = (
   writeCache(cache);
 };
 
+export const updateCollectionCacheByCollectionId = (
+  collectionId: string,
+  patch: { name?: string; description?: string },
+) => {
+  const cache = readCache();
+  for (const [jobId, data] of Object.entries(cache)) {
+    if (data.collection_id === collectionId) {
+      cache[jobId] = {
+        ...data,
+        ...(patch.name !== undefined ? { name: patch.name } : {}),
+        ...(patch.description !== undefined
+          ? { description: patch.description }
+          : {}),
+      };
+      writeCache(cache);
+      return;
+    }
+  }
+};
+
 export const getCollectionDataByCollectionId = (
   collectionId: string,
 ): { name?: string; description?: string; job_id?: string } => {