diff --git a/app/(main)/knowledge-base/page.tsx b/app/(main)/knowledge-base/page.tsx
index a30a30da..5e0ab1e8 100644
--- a/app/(main)/knowledge-base/page.tsx
+++ b/app/(main)/knowledge-base/page.tsx
@@ -37,6 +37,7 @@ export default function KnowledgeBasePage() {
   );
   const [showDocPreviewModal, setShowDocPreviewModal] = useState(false);
   const [previewDoc, setPreviewDoc] = useState<Document | null>(null);
+  const [isPreviewLoading, setIsPreviewLoading] = useState(false);
 
   const [collectionName, setCollectionName] = useState("");
   const [collectionDescription, setCollectionDescription] = useState("");
@@ -103,14 +104,24 @@ export default function KnowledgeBasePage() {
   const handlePreviewDocument = async (firstDocument: Document) => {
     setShowDocPreviewModal(true);
     setPreviewDoc(firstDocument);
-    const enriched = await fetchAndPreviewDoc(firstDocument);
-    setPreviewDoc(enriched);
+    setIsPreviewLoading(true);
+    try {
+      const enriched = await fetchAndPreviewDoc(firstDocument);
+      setPreviewDoc(enriched);
+    } finally {
+      setIsPreviewLoading(false);
+    }
   };
 
   const handleSelectPreviewDoc = async (doc: Document) => {
     setPreviewDoc(doc);
-    const enriched = await fetchAndPreviewDoc(doc);
-    setPreviewDoc(enriched);
+    setIsPreviewLoading(true);
+    try {
+      const enriched = await fetchAndPreviewDoc(doc);
+      setPreviewDoc(enriched);
+    } finally {
+      setIsPreviewLoading(false);
+    }
   };
 
   return (
@@ -153,7 +164,7 @@ export default function KnowledgeBasePage() {
                 <Loader size="md" message="Loading knowledge base…" />
               </div>
             ) : selectedCollection ? (
-              <div className="flex-1 flex flex-col relative">
+              <div className="flex-1 min-h-0 flex flex-col relative">
                 <CollectionDetail
                   collection={selectedCollection}
                   onRequestDelete={handleRequestDelete}
@@ -257,6 +268,7 @@ export default function KnowledgeBasePage() {
         }}
         documents={selectedCollection?.documents ?? []}
         previewDoc={previewDoc}
+        isLoading={isPreviewLoading}
         onSelectDocument={handleSelectPreviewDoc}
       />
     </div>
diff --git a/app/api/collections/route.ts b/app/api/collections/route.ts
index 0c40145d..20ee2cff 100644
--- a/app/api/collections/route.ts
+++ b/app/api/collections/route.ts
@@ -3,7 +3,7 @@ import { apiClient } from "@/app/lib/apiClient";
 
 export async function GET(request: Request) {
   try {
-    const { status, data } = await apiClient(request, "/api/v1/collections/");
+    const { status, data } = await apiClient(request, "/api/v1/collections");
     return NextResponse.json(data, { status });
   } catch (error: unknown) {
     return NextResponse.json(
@@ -22,7 +22,7 @@ export async function POST(request: NextRequest) {
     // Get the JSON body from the request
     const body = await request.json();
 
-    const { status, data } = await apiClient(request, "/api/v1/collections/", {
+    const { status, data } = await apiClient(request, "/api/v1/collections", {
       method: "POST",
       body: JSON.stringify(body),
     });
diff --git a/app/api/configs/route.ts b/app/api/configs/route.ts
index d0f6016d..3fda9fa3 100644
--- a/app/api/configs/route.ts
+++ b/app/api/configs/route.ts
@@ -5,7 +5,7 @@ export async function GET(request: Request) {
   try {
     const { searchParams } = new URL(request.url);
     const queryString = searchParams.toString();
-    const endpoint = `/api/v1/configs/${queryString ? `?${queryString}` : ""}`;
+    const endpoint = `/api/v1/configs${queryString ? `?${queryString}` : ""}`;
     const { status, data } = await apiClient(request, endpoint);
     return NextResponse.json(data, { status });
   } catch (error) {
@@ -24,7 +24,7 @@ export async function POST(request: Request) {
   try {
     const body = await request.json();
 
-    const { status, data } = await apiClient(request, "/api/v1/configs/", {
+    const { status, data } = await apiClient(request, "/api/v1/configs", {
       method: "POST",
       body: JSON.stringify(body),
     });
diff --git a/app/api/credentials/route.ts b/app/api/credentials/route.ts
index 627f2b2a..06c76646 100644
--- a/app/api/credentials/route.ts
+++ b/app/api/credentials/route.ts
@@ -3,7 +3,7 @@ import { NextResponse, NextRequest } from "next/server";
 
 export async function GET(request: NextRequest) {
   try {
-    const { status, data } = await apiClient(request, "/api/v1/credentials/");
+    const { status, data } = await apiClient(request, "/api/v1/credentials");
     return NextResponse.json(data, { status });
   } catch (e: unknown) {
     return NextResponse.json(
@@ -16,7 +16,7 @@ export async function GET(request: NextRequest) {
 export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
-    const { status, data } = await apiClient(request, "/api/v1/credentials/", {
+    const { status, data } = await apiClient(request, "/api/v1/credentials", {
       method: "POST",
       body: JSON.stringify(body),
     });
@@ -32,7 +32,7 @@ export async function POST(request: NextRequest) {
 export async function PATCH(request: NextRequest) {
   try {
     const body = await request.json();
-    const { status, data } = await apiClient(request, "/api/v1/credentials/", {
+    const { status, data } = await apiClient(request, "/api/v1/credentials", {
       method: "PATCH",
       body: JSON.stringify(body),
     });
diff --git a/app/api/document/route.ts b/app/api/document/route.ts
index fc4291ca..3eac9795 100644
--- a/app/api/document/route.ts
+++ b/app/api/document/route.ts
@@ -5,7 +5,7 @@ export async function GET(request: Request) {
   try {
     const { searchParams } = new URL(request.url);
     const queryString = searchParams.toString();
-    const endpoint = `/api/v1/documents/${queryString ? `?${queryString}` : ""}`;
+    const endpoint = `/api/v1/documents${queryString ? `?${queryString}` : ""}`;
     const { status, data } = await apiClient(request, endpoint);
     return NextResponse.json(data, { status });
   } catch (error: unknown) {
@@ -78,7 +78,7 @@ export async function POST(request: NextRequest) {
         },
       });
 
-      const { status, data } = await apiClient(request, "/api/v1/documents/", {
+      const { status, data } = await apiClient(request, "/api/v1/documents", {
         method: "POST",
         body: uploadBody,
         headers: { "Content-Type": contentType },
diff --git a/app/api/organization/route.ts b/app/api/organization/route.ts
index f04430d7..1a155321 100644
--- a/app/api/organization/route.ts
+++ b/app/api/organization/route.ts
@@ -8,7 +8,7 @@ export async function GET(request: NextRequest) {
 
     const { status, data } = await apiClient(
       request,
-      `/api/v1/organizations/${queryString ? `?${queryString}` : ""}`,
+      `/api/v1/organizations${queryString ? `?${queryString}` : ""}`,
     );
     return NextResponse.json(data, { status });
   } catch {
diff --git a/app/api/projects/route.ts b/app/api/projects/route.ts
index ae734776..406a0c67 100644
--- a/app/api/projects/route.ts
+++ b/app/api/projects/route.ts
@@ -4,7 +4,7 @@ import { apiClient } from "@/app/lib/apiClient";
 export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
-    const { status, data } = await apiClient(request, "/api/v1/projects/", {
+    const { status, data } = await apiClient(request, "/api/v1/projects", {
       method: "POST",
       body: JSON.stringify(body),
     });
diff --git a/app/api/user-projects/route.ts b/app/api/user-projects/route.ts
index cfff7e03..937ee1ae 100644
--- a/app/api/user-projects/route.ts
+++ b/app/api/user-projects/route.ts
@@ -8,7 +8,7 @@ export async function GET(request: NextRequest) {
 
     const { status, data } = await apiClient(
       request,
-      `/api/v1/user-projects/${queryString ? `?${queryString}` : ""}`,
+      `/api/v1/user-projects${queryString ? `?${queryString}` : ""}`,
     );
     return NextResponse.json(data, { status });
   } catch {
@@ -22,14 +22,10 @@ export async function GET(request: NextRequest) {
 export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
-    const { status, data } = await apiClient(
-      request,
-      "/api/v1/user-projects/",
-      {
-        method: "POST",
-        body: JSON.stringify(body),
-      },
-    );
+    const { status, data } = await apiClient(request, "/api/v1/user-projects", {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
     return NextResponse.json(data, { status });
   } catch {
     return NextResponse.json(
diff --git a/app/components/knowledge-base/CollectionDetail.tsx b/app/components/knowledge-base/CollectionDetail.tsx
index bb5601e8..05231148 100644
--- a/app/components/knowledge-base/CollectionDetail.tsx
+++ b/app/components/knowledge-base/CollectionDetail.tsx
@@ -109,8 +109,8 @@ export default function CollectionDetail({
         </div>
       </div>
 
-      <div className="flex-1 overflow-y-auto px-6 pt-6 pb-4">
-        <div className="flex items-center justify-between mb-4">
+      <div className="flex-1 min-h-0 px-6 pt-6 pb-4 flex flex-col">
+        <div className="flex items-center justify-between mb-4 shrink-0">
           <h3 className="text-sm font-semibold text-text-primary">
             Documents Present ({documents.length})
           </h3>
@@ -126,8 +126,8 @@ export default function CollectionDetail({
         </div>
 
         {documents.length > 0 ? (
-          <div>
-            <div className="flex items-center justify-between pb-2 mb-2 border-b border-border">
+          <div className="flex-1 min-h-0 flex flex-col">
+            <div className="flex items-center justify-between pb-2 mb-2 border-b border-border shrink-0">
               <div className="flex-1">
                 <p className="text-[10px] font-semibold uppercase text-text-secondary">
                   Name
@@ -140,7 +140,11 @@ export default function CollectionDetail({
               </div>
             </div>
 
-            <div className="space-y-2">
+            <div
+              className={`space-y-2 ${
+                showAllDocs ? "flex-1 min-h-0 overflow-y-auto" : ""
+              }`}
+            >
               {visibleDocs.map((doc) => (
                 <div
                   key={doc.id}
@@ -161,7 +165,7 @@ export default function CollectionDetail({
             </div>
 
             {documents.length > 3 && (
-              <div className="mt-2 flex justify-center">
+              <div className="mt-2 flex justify-center shrink-0">
                 <button
                   type="button"
                   onClick={() => setShowAllDocs(!showAllDocs)}
diff --git a/app/components/knowledge-base/DocumentPreviewModal.tsx b/app/components/knowledge-base/DocumentPreviewModal.tsx
index 45b97fb7..9c639e78 100644
--- a/app/components/knowledge-base/DocumentPreviewModal.tsx
+++ b/app/components/knowledge-base/DocumentPreviewModal.tsx
@@ -1,6 +1,8 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { Modal } from "@/app/components";
+import Loader from "@/app/components/Loader";
 import { formatDate } from "@/app/components/utils";
 import { Document } from "@/app/lib/types/document";
 
@@ -9,6 +11,7 @@ interface DocumentPreviewModalProps {
   onClose: () => void;
   documents: Document[];
   previewDoc: Document | null;
+  isLoading?: boolean;
   onSelectDocument: (doc: Document) => void;
 }
 
@@ -17,8 +20,20 @@ export default function DocumentPreviewModal({
   onClose,
   documents,
   previewDoc,
+  isLoading,
   onSelectDocument,
 }: DocumentPreviewModalProps) {
+  const [isFrameLoading, setIsFrameLoading] = useState(false);
+
+  useEffect(() => {
+    if (!previewDoc?.signed_url) return;
+    setIsFrameLoading(true);
+    // Fallback: iframe `onLoad` doesn't fire reliably when the browser
+    const timer = setTimeout(() => setIsFrameLoading(false), 6000);
+    return () => clearTimeout(timer);
+  }, [previewDoc?.id, previewDoc?.signed_url]);
+
+  const showLoader = isLoading || isFrameLoading;
   return (
     <Modal
       open={open}
@@ -28,36 +43,51 @@ export default function DocumentPreviewModal({
       maxHeight="h-[80vh]"
     >
       <div className="flex flex-1 min-h-0 h-full">
-        <div className="w-56 shrink-0 border-r border-border overflow-y-auto">
-          {documents.map((doc) => (
-            <button
-              key={doc.id}
-              onClick={() => onSelectDocument(doc)}
-              className={`w-full text-left px-4 py-3 border-b border-border transition-colors cursor-pointer ${
-                previewDoc?.id === doc.id
-                  ? "bg-neutral-100"
-                  : "hover:bg-neutral-50"
-              }`}
-            >
-              <p className="text-sm text-text-primary truncate">{doc.fname}</p>
-              {doc.inserted_at && (
-                <p className="text-xs text-text-secondary mt-0.5">
-                  {formatDate(doc.inserted_at)}
+        <div className="w-56 shrink-0 border-r border-border overflow-y-auto bg-bg-secondary">
+          {documents.map((doc) => {
+            const isSelected = previewDoc?.id === doc.id;
+            return (
+              <button
+                key={doc.id}
+                onClick={() => onSelectDocument(doc)}
+                className={`relative w-full text-left px-4 py-3 transition-colors cursor-pointer ${
+                  isSelected
+                    ? "bg-accent-primary/5"
+                    : "hover:bg-accent-primary/5"
+                }`}
+              >
+                {isSelected && (
+                  <span className="absolute left-0 top-0 bottom-0 w-1 bg-accent-primary" />
+                )}
+                <p
+                  className={`text-sm truncate ${
+                    isSelected
+                      ? "font-semibold text-accent-primary"
+                      : "font-medium text-text-primary"
+                  }`}
+                >
+                  {doc.fname}
                 </p>
-              )}
-            </button>
-          ))}
+                {doc.inserted_at && (
+                  <p className="text-xs text-text-secondary mt-0.5">
+                    {formatDate(doc.inserted_at)}
+                  </p>
+                )}
+              </button>
+            );
+          })}
         </div>
 
-        <div className="flex-1 min-h-0 bg-neutral-50">
+        <div className="flex-1 min-h-0 bg-neutral-50 relative">
           {previewDoc?.signed_url ? (
             <iframe
               key={previewDoc.id}
               src={previewDoc.signed_url}
               title={previewDoc.fname}
+              onLoad={() => setIsFrameLoading(false)}
               className="w-full h-full border-none"
             />
-          ) : (
+          ) : !showLoader ? (
             <div className="flex items-center justify-center h-full">
               <p className="text-sm text-text-secondary">
                 {previewDoc
@@ -65,6 +95,19 @@ export default function DocumentPreviewModal({
                   : "Select a document to preview"}
               </p>
             </div>
+          ) : null}
+
+          {showLoader && (
+            <div className="absolute inset-0 flex items-center justify-center bg-bg-secondary/80 backdrop-blur-[1px] pointer-events-none">
+              <Loader
+                size="md"
+                message={
+                  previewDoc?.fname
+                    ? `Loading ${previewDoc.fname}…`
+                    : "Loading document…"
+                }
+              />
+            </div>
           )}
         </div>
       </div>
diff --git a/app/favicon.ico b/app/favicon.ico
index 03f3370a..f68b4256 100644
Binary files a/app/favicon.ico and b/app/favicon.ico differ