diff --git a/frontend/components/knowledge-dropdown.tsx b/frontend/components/knowledge-dropdown.tsx
index 7fe84259..d9f92355 100644
--- a/frontend/components/knowledge-dropdown.tsx
+++ b/frontend/components/knowledge-dropdown.tsx
@@ -7,7 +7,6 @@ import {
 	FolderOpen,
 	Loader2,
 	PlugZap,
-	Plus,
 	Upload,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -29,15 +28,7 @@ import { useTask } from "@/contexts/task-context";
 import { cn } from "@/lib/utils";
 import type { File as SearchFile } from "@/src/app/api/queries/useGetSearchQuery";
 
-interface KnowledgeDropdownProps {
-	active?: boolean;
-	variant?: "navigation" | "button";
-}
-
-export function KnowledgeDropdown({
-	active,
-	variant = "navigation",
-}: KnowledgeDropdownProps) {
+export function KnowledgeDropdown() {
 	const { addTask } = useTask();
 	const { refetch: refetchTasks } = useGetTasksQuery();
 	const queryClient = useQueryClient();
@@ -498,28 +489,16 @@ export function KnowledgeDropdown({
 	return (
 		<>
 			<div ref={dropdownRef} className="relative">
-				<button
+				<Button
 					type="button"
 					onClick={() => !isLoading && setIsOpen(!isOpen)}
 					disabled={isLoading}
-					className={cn(
-						variant === "button"
-							? "rounded-lg h-12 px-4 flex items-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-							: "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:bg-accent hover:text-accent-foreground rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed",
-						variant === "navigation" && active
-							? "bg-accent text-accent-foreground shadow-sm"
-							: variant === "navigation"
-								? "text-foreground hover:text-accent-foreground"
-								: "",
-					)}
 				>
-					{variant === "button" ? (
+			
 						<>
-							{isLoading ? (
+							{isLoading && 
 								<Loader2 className="h-4 w-4 animate-spin" />
-							) : (
-								<Plus className="h-4 w-4" />
-							)}
+							}
 							<span>
 								{isLoading
 									? fileUploading
@@ -542,34 +521,7 @@ export function KnowledgeDropdown({
 								/>
 							)}
 						</>
-					) : (
-						<>
-							<div className="flex items-center flex-1">
-								{isLoading ? (
-									<Loader2 className="h-4 w-4 mr-3 shrink-0 animate-spin" />
-								) : (
-									<Upload
-										className={cn(
-											"h-4 w-4 mr-3 shrink-0",
-											active
-												? "text-accent-foreground"
-												: "text-muted-foreground group-hover:text-foreground",
-										)}
-									/>
-								)}
-								Knowledge
-							</div>
-							{!isLoading && (
-								<ChevronDown
-									className={cn(
-										"h-4 w-4 transition-transform",
-										isOpen && "rotate-180",
-									)}
-								/>
-							)}
-						</>
-					)}
-				</button>
+				</Button>
 
 				{isOpen && !isLoading && (
 					<div className="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-md z-50">
diff --git a/frontend/components/knowledge-filter-panel.tsx b/frontend/components/knowledge-filter-panel.tsx
index 6bf9285b..d0dd8196 100644
--- a/frontend/components/knowledge-filter-panel.tsx
+++ b/frontend/components/knowledge-filter-panel.tsx
@@ -50,6 +50,7 @@ export const filterAccentClasses: Record<FilterColor, string> = {
 
 export function KnowledgeFilterPanel() {
   const {
+    queryOverride,
     selectedFilter,
     parsedFilterData,
     setSelectedFilter,
@@ -231,8 +232,8 @@ export function KnowledgeFilterPanel() {
   };
 
   return (
-    <div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l z-40 overflow-y-auto">
-      <Card className="h-full rounded-none border-0 shadow-lg flex flex-col">
+    <div className="h-full bg-background border-l">
+      <Card className="h-full rounded-none border-0 flex flex-col">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
             <CardTitle className="text-lg flex items-center gap-2">
@@ -320,6 +321,7 @@ export function KnowledgeFilterPanel() {
               className="font-mono placeholder:font-mono"
               onChange={(e) => setQuery(e.target.value)}
               rows={2}
+              disabled={!!queryOverride && !createMode}
             />
           </div>
 
diff --git a/frontend/components/knowledge-search-input.tsx b/frontend/components/knowledge-search-input.tsx
new file mode 100644
index 00000000..fd840628
--- /dev/null
+++ b/frontend/components/knowledge-search-input.tsx
@@ -0,0 +1,100 @@
+import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
+import {
+  ChangeEvent,
+  FormEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { filterAccentClasses } from "./knowledge-filter-panel";
+import { ArrowRight, Search, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export const KnowledgeSearchInput = () => {
+  const {
+    selectedFilter,
+    setSelectedFilter,
+    parsedFilterData,
+    queryOverride,
+    setQueryOverride,
+  } = useKnowledgeFilter();
+
+  const [searchQueryInput, setSearchQueryInput] = useState(queryOverride || "");
+
+  const handleSearch = useCallback(
+    (e?: FormEvent<HTMLFormElement>) => {
+      if (e) e.preventDefault();
+      setQueryOverride(searchQueryInput.trim());
+    },
+    [searchQueryInput, setQueryOverride]
+  );
+
+  // Reset the query text when the selected filter changes
+  useEffect(() => {
+    setSearchQueryInput(queryOverride);
+  }, [queryOverride]);
+
+  return (
+    <form
+      className="flex flex-1 max-w-[min(640px,100%)] min-w-[100px]"
+      onSubmit={handleSearch}
+    >
+      <div className="primary-input group/input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
+        {selectedFilter?.name && (
+          <div
+            title={selectedFilter?.name}
+            className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
+              filterAccentClasses[parsedFilterData?.color || "zinc"]
+            }`}
+          >
+            <span className="truncate">{selectedFilter?.name}</span>
+            <X
+              aria-label="Remove filter"
+              className="h-4 w-4 flex-shrink-0 cursor-pointer"
+              onClick={() => setSelectedFilter(null)}
+            />
+          </div>
+        )}
+        <Search
+          className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
+          strokeWidth={1.5}
+        />
+        <input
+          className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
+          name="search-query"
+          id="search-query"
+          type="text"
+          placeholder="Search your documents..."
+          value={searchQueryInput}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            setSearchQueryInput(e.target.value)
+          }
+        />
+        {queryOverride && (
+          <Button
+            variant="ghost"
+            className="h-full !px-1.5 !py-0"
+            type="button"
+            onClick={() => {
+              setSearchQueryInput("");
+              setQueryOverride("");
+            }}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+        <Button
+          variant="ghost"
+          className={cn(
+            "h-full !px-1.5 !py-0 hidden group-focus-within/input:block",
+            searchQueryInput && "block"
+          )}
+          type="submit"
+        >
+          <ArrowRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/frontend/src/app/api/queries/useGetSearchQuery.ts b/frontend/src/app/api/queries/useGetSearchQuery.ts
index d0c1a3a9..50905fcc 100644
--- a/frontend/src/app/api/queries/useGetSearchQuery.ts
+++ b/frontend/src/app/api/queries/useGetSearchQuery.ts
@@ -180,7 +180,7 @@ export const useGetSearchQuery = (
 
   const queryResult = useQuery(
     {
-      queryKey: ["search", queryData],
+      queryKey: ["search", queryData, query],
       placeholderData: (prev) => prev,
       queryFn: getFiles,
       ...options,
diff --git a/frontend/src/app/chat/page.tsx b/frontend/src/app/chat/page.tsx
index 2c3bf278..c543fc35 100644
--- a/frontend/src/app/chat/page.tsx
+++ b/frontend/src/app/chat/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import {
-  AtSign,
   Bot,
   Check,
   ChevronDown,
@@ -11,7 +10,6 @@ import {
   Loader2,
   Plus,
   Settings,
-  Upload,
   User,
   X,
   Zap,
@@ -31,7 +29,6 @@ import {
 import { useAuth } from "@/contexts/auth-context";
 import { type EndpointType, useChat } from "@/contexts/chat-context";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
-import { useLayout } from "@/contexts/layout-context";
 import { useTask } from "@/contexts/task-context";
 import { useLoadingStore } from "@/stores/loadingStore";
 import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
@@ -151,9 +148,8 @@ function ChatPage() {
   const streamAbortRef = useRef<AbortController | null>(null);
   const streamIdRef = useRef(0);
   const lastLoadedConversationRef = useRef<string | null>(null);
-  const { addTask, isMenuOpen } = useTask();
-  const { totalTopOffset } = useLayout();
-  const { selectedFilter, parsedFilterData, isPanelOpen, setSelectedFilter } =
+  const { addTask } = useTask();
+  const { selectedFilter, parsedFilterData, setSelectedFilter } =
     useKnowledgeFilter();
 
   const scrollToBottom = () => {
@@ -260,7 +256,7 @@ function ChatPage() {
           "Upload failed with status:",
           response.status,
           "Response:",
-          errorText,
+          errorText
         );
         throw new Error("Failed to process document");
       }
@@ -470,7 +466,7 @@ function ChatPage() {
       console.log(
         "Loading conversation with",
         conversationData.messages.length,
-        "messages",
+        "messages"
       );
       // Convert backend message format to frontend Message interface
       const convertedMessages: Message[] = conversationData.messages.map(
@@ -598,7 +594,7 @@ function ChatPage() {
                       ) === "string"
                         ? toolCall.function?.arguments || toolCall.arguments
                         : JSON.stringify(
-                            toolCall.function?.arguments || toolCall.arguments,
+                            toolCall.function?.arguments || toolCall.arguments
                           ),
                     result: toolCall.result,
                     status: "completed",
@@ -617,7 +613,7 @@ function ChatPage() {
           }
 
           return message;
-        },
+        }
       );
 
       setMessages(convertedMessages);
@@ -706,7 +702,7 @@ function ChatPage() {
       console.log(
         "Chat page received file upload error event:",
         filename,
-        error,
+        error
       );
 
       // Replace the last message with error message
@@ -720,43 +716,43 @@ function ChatPage() {
 
     window.addEventListener(
       "fileUploadStart",
-      handleFileUploadStart as EventListener,
+      handleFileUploadStart as EventListener
     );
     window.addEventListener(
       "fileUploaded",
-      handleFileUploaded as EventListener,
+      handleFileUploaded as EventListener
     );
     window.addEventListener(
       "fileUploadComplete",
-      handleFileUploadComplete as EventListener,
+      handleFileUploadComplete as EventListener
     );
     window.addEventListener(
       "fileUploadError",
-      handleFileUploadError as EventListener,
+      handleFileUploadError as EventListener
     );
 
     return () => {
       window.removeEventListener(
         "fileUploadStart",
-        handleFileUploadStart as EventListener,
+        handleFileUploadStart as EventListener
       );
       window.removeEventListener(
         "fileUploaded",
-        handleFileUploaded as EventListener,
+        handleFileUploaded as EventListener
       );
       window.removeEventListener(
         "fileUploadComplete",
-        handleFileUploadComplete as EventListener,
+        handleFileUploadComplete as EventListener
       );
       window.removeEventListener(
         "fileUploadError",
-        handleFileUploadError as EventListener,
+        handleFileUploadError as EventListener
       );
     };
   }, [endpoint, setPreviousResponseIds]);
 
   const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
-    previousResponseIds[endpoint],
+    previousResponseIds[endpoint]
   );
 
   const handleSSEStream = async (userMessage: Message) => {
@@ -861,7 +857,7 @@ function ChatPage() {
                 console.log(
                   "Received chunk:",
                   chunk.type || chunk.object,
-                  chunk,
+                  chunk
                 );
 
                 // Extract response ID if present
@@ -877,14 +873,14 @@ function ChatPage() {
                   if (chunk.delta.function_call) {
                     console.log(
                       "Function call in delta:",
-                      chunk.delta.function_call,
+                      chunk.delta.function_call
                     );
 
                     // Check if this is a new function call
                     if (chunk.delta.function_call.name) {
                       console.log(
                         "New function call:",
-                        chunk.delta.function_call.name,
+                        chunk.delta.function_call.name
                       );
                       const functionCall: FunctionCall = {
                         name: chunk.delta.function_call.name,
@@ -900,7 +896,7 @@ function ChatPage() {
                     else if (chunk.delta.function_call.arguments) {
                       console.log(
                         "Function call arguments delta:",
-                        chunk.delta.function_call.arguments,
+                        chunk.delta.function_call.arguments
                       );
                       const lastFunctionCall =
                         currentFunctionCalls[currentFunctionCalls.length - 1];
@@ -912,14 +908,14 @@ function ChatPage() {
                           chunk.delta.function_call.arguments;
                         console.log(
                           "Accumulated arguments:",
-                          lastFunctionCall.argumentsString,
+                          lastFunctionCall.argumentsString
                         );
 
                         // Try to parse arguments if they look complete
                         if (lastFunctionCall.argumentsString.includes("}")) {
                           try {
                             const parsed = JSON.parse(
-                              lastFunctionCall.argumentsString,
+                              lastFunctionCall.argumentsString
                             );
                             lastFunctionCall.arguments = parsed;
                             lastFunctionCall.status = "completed";
@@ -927,7 +923,7 @@ function ChatPage() {
                           } catch (e) {
                             console.log(
                               "Arguments not yet complete or invalid JSON:",
-                              e,
+                              e
                             );
                           }
                         }
@@ -960,7 +956,7 @@ function ChatPage() {
                         else if (toolCall.function.arguments) {
                           console.log(
                             "Tool call arguments delta:",
-                            toolCall.function.arguments,
+                            toolCall.function.arguments
                           );
                           const lastFunctionCall =
                             currentFunctionCalls[
@@ -974,7 +970,7 @@ function ChatPage() {
                               toolCall.function.arguments;
                             console.log(
                               "Accumulated tool arguments:",
-                              lastFunctionCall.argumentsString,
+                              lastFunctionCall.argumentsString
                             );
 
                             // Try to parse arguments if they look complete
@@ -983,7 +979,7 @@ function ChatPage() {
                             ) {
                               try {
                                 const parsed = JSON.parse(
-                                  lastFunctionCall.argumentsString,
+                                  lastFunctionCall.argumentsString
                                 );
                                 lastFunctionCall.arguments = parsed;
                                 lastFunctionCall.status = "completed";
@@ -991,7 +987,7 @@ function ChatPage() {
                               } catch (e) {
                                 console.log(
                                   "Tool arguments not yet complete or invalid JSON:",
-                                  e,
+                                  e
                                 );
                               }
                             }
@@ -1023,7 +1019,7 @@ function ChatPage() {
                           console.log(
                             "Error parsing function call on finish:",
                             fc,
-                            e,
+                            e
                           );
                         }
                       }
@@ -1039,12 +1035,12 @@ function ChatPage() {
                   console.log(
                     "🟢 CREATING function call (added):",
                     chunk.item.id,
-                    chunk.item.tool_name || chunk.item.name,
+                    chunk.item.tool_name || chunk.item.name
                   );
 
                   // Try to find an existing pending call to update (created by earlier deltas)
                   let existing = currentFunctionCalls.find(
-                    (fc) => fc.id === chunk.item.id,
+                    (fc) => fc.id === chunk.item.id
                   );
                   if (!existing) {
                     existing = [...currentFunctionCalls]
@@ -1053,7 +1049,7 @@ function ChatPage() {
                         (fc) =>
                           fc.status === "pending" &&
                           !fc.id &&
-                          fc.name === (chunk.item.tool_name || chunk.item.name),
+                          fc.name === (chunk.item.tool_name || chunk.item.name)
                       );
                   }
 
@@ -1066,7 +1062,7 @@ function ChatPage() {
                       chunk.item.inputs || existing.arguments;
                     console.log(
                       "🟢 UPDATED existing pending function call with id:",
-                      existing.id,
+                      existing.id
                     );
                   } else {
                     const functionCall: FunctionCall = {
@@ -1084,7 +1080,7 @@ function ChatPage() {
                       currentFunctionCalls.map((fc) => ({
                         id: fc.id,
                         name: fc.name,
-                      })),
+                      }))
                     );
                   }
                 }
@@ -1095,7 +1091,7 @@ function ChatPage() {
                 ) {
                   console.log(
                     "Function args delta (Realtime API):",
-                    chunk.delta,
+                    chunk.delta
                   );
                   const lastFunctionCall =
                     currentFunctionCalls[currentFunctionCalls.length - 1];
@@ -1106,7 +1102,7 @@ function ChatPage() {
                     lastFunctionCall.argumentsString += chunk.delta || "";
                     console.log(
                       "Accumulated arguments (Realtime API):",
-                      lastFunctionCall.argumentsString,
+                      lastFunctionCall.argumentsString
                     );
                   }
                 }
@@ -1117,26 +1113,26 @@ function ChatPage() {
                 ) {
                   console.log(
                     "Function args done (Realtime API):",
-                    chunk.arguments,
+                    chunk.arguments
                   );
                   const lastFunctionCall =
                     currentFunctionCalls[currentFunctionCalls.length - 1];
                   if (lastFunctionCall) {
                     try {
                       lastFunctionCall.arguments = JSON.parse(
-                        chunk.arguments || "{}",
+                        chunk.arguments || "{}"
                       );
                       lastFunctionCall.status = "completed";
                       console.log(
                         "Parsed function arguments (Realtime API):",
-                        lastFunctionCall.arguments,
+                        lastFunctionCall.arguments
                       );
                     } catch (e) {
                       lastFunctionCall.arguments = { raw: chunk.arguments };
                       lastFunctionCall.status = "error";
                       console.log(
                         "Error parsing function arguments (Realtime API):",
-                        e,
+                        e
                       );
                     }
                   }
@@ -1150,14 +1146,14 @@ function ChatPage() {
                   console.log(
                     "🔵 UPDATING function call (done):",
                     chunk.item.id,
-                    chunk.item.tool_name || chunk.item.name,
+                    chunk.item.tool_name || chunk.item.name
                   );
                   console.log(
                     "🔵 Looking for existing function calls:",
                     currentFunctionCalls.map((fc) => ({
                       id: fc.id,
                       name: fc.name,
-                    })),
+                    }))
                   );
 
                   // Find existing function call by ID or name
@@ -1165,14 +1161,14 @@ function ChatPage() {
                     (fc) =>
                       fc.id === chunk.item.id ||
                       fc.name === chunk.item.tool_name ||
-                      fc.name === chunk.item.name,
+                      fc.name === chunk.item.name
                   );
 
                   if (functionCall) {
                     console.log(
                       "🔵 FOUND existing function call, updating:",
                       functionCall.id,
-                      functionCall.name,
+                      functionCall.name
                     );
                     // Update existing function call with completion data
                     functionCall.status =
@@ -1195,7 +1191,7 @@ function ChatPage() {
                       "🔴 WARNING: Could not find existing function call to update:",
                       chunk.item.id,
                       chunk.item.tool_name,
-                      chunk.item.name,
+                      chunk.item.name
                     );
                   }
                 }
@@ -1216,7 +1212,7 @@ function ChatPage() {
                       fc.name === chunk.item.name ||
                       fc.name === chunk.item.type ||
                       fc.name.includes(chunk.item.type.replace("_call", "")) ||
-                      chunk.item.type.includes(fc.name),
+                      chunk.item.type.includes(fc.name)
                   );
 
                   if (functionCall) {
@@ -1260,12 +1256,12 @@ function ChatPage() {
                     "🟡 CREATING tool call (added):",
                     chunk.item.id,
                     chunk.item.tool_name || chunk.item.name,
-                    chunk.item.type,
+                    chunk.item.type
                   );
 
                   // Dedupe by id or pending with same name
                   let existing = currentFunctionCalls.find(
-                    (fc) => fc.id === chunk.item.id,
+                    (fc) => fc.id === chunk.item.id
                   );
                   if (!existing) {
                     existing = [...currentFunctionCalls]
@@ -1277,7 +1273,7 @@ function ChatPage() {
                           fc.name ===
                             (chunk.item.tool_name ||
                               chunk.item.name ||
-                              chunk.item.type),
+                              chunk.item.type)
                       );
                   }
 
@@ -1293,7 +1289,7 @@ function ChatPage() {
                       chunk.item.inputs || existing.arguments;
                     console.log(
                       "🟡 UPDATED existing pending tool call with id:",
-                      existing.id,
+                      existing.id
                     );
                   } else {
                     const functionCall = {
@@ -1314,7 +1310,7 @@ function ChatPage() {
                         id: fc.id,
                         name: fc.name,
                         type: fc.type,
-                      })),
+                      }))
                     );
                   }
                 }
@@ -1592,7 +1588,7 @@ function ChatPage() {
 
   const handleForkConversation = (
     messageIndex: number,
-    event?: React.MouseEvent,
+    event?: React.MouseEvent
   ) => {
     // Prevent any default behavior and stop event propagation
     if (event) {
@@ -1657,7 +1653,7 @@ function ChatPage() {
 
   const renderFunctionCalls = (
     functionCalls: FunctionCall[],
-    messageIndex?: number,
+    messageIndex?: number
   ) => {
     if (!functionCalls || functionCalls.length === 0) return null;
 
@@ -1908,7 +1904,7 @@ function ChatPage() {
 
     if (isFilterDropdownOpen) {
       const filteredFilters = availableFilters.filter((filter) =>
-        filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase()),
+        filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase())
       );
 
       if (e.key === "Escape") {
@@ -1926,7 +1922,7 @@ function ChatPage() {
       if (e.key === "ArrowDown") {
         e.preventDefault();
         setSelectedFilterIndex((prev) =>
-          prev < filteredFilters.length - 1 ? prev + 1 : 0,
+          prev < filteredFilters.length - 1 ? prev + 1 : 0
         );
         return;
       }
@@ -1934,7 +1930,7 @@ function ChatPage() {
       if (e.key === "ArrowUp") {
         e.preventDefault();
         setSelectedFilterIndex((prev) =>
-          prev > 0 ? prev - 1 : filteredFilters.length - 1,
+          prev > 0 ? prev - 1 : filteredFilters.length - 1
         );
         return;
       }
@@ -2031,7 +2027,7 @@ function ChatPage() {
 
       // Get button position for popover anchoring
       const button = document.querySelector(
-        "[data-filter-button]",
+        "[data-filter-button]"
       ) as HTMLElement;
       if (button) {
         const rect = button.getBoundingClientRect();
@@ -2047,21 +2043,10 @@ function ChatPage() {
   };
 
   return (
-    <div
-      className={`fixed inset-0 md:left-72 flex flex-col transition-all duration-300 ${
-        isMenuOpen && isPanelOpen
-          ? "md:right-[704px]" // Both open: 384px (menu) + 320px (KF panel)
-          : isMenuOpen
-          ? "md:right-96" // Only menu open: 384px
-          : isPanelOpen
-          ? "md:right-80" // Only KF panel open: 320px
-          : "md:right-6" // Neither open: 24px
-      }`}
-      style={{ top: `${totalTopOffset}px` }}
-    >
+    <div className="flex flex-col h-full">
       {/* Debug header - only show in debug mode */}
       {isDebugMode && (
-        <div className="flex items-center justify-between mb-6 px-6 pt-6">
+        <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-2"></div>
           <div className="flex items-center gap-4">
             {/* Async Mode Toggle */}
@@ -2167,7 +2152,7 @@ function ChatPage() {
                         <div className="flex-1 min-w-0">
                           {renderFunctionCalls(
                             message.functionCalls || [],
-                            index,
+                            index
                           )}
                           <MarkdownRenderer chatMessage={message.content} />
                         </div>
@@ -2196,7 +2181,7 @@ function ChatPage() {
                     <div className="flex-1">
                       {renderFunctionCalls(
                         streamingMessage.functionCalls,
-                        messages.length,
+                        messages.length
                       )}
                       <MarkdownRenderer
                         chatMessage={streamingMessage.content}
@@ -2263,29 +2248,31 @@ function ChatPage() {
                   </span>
                 </div>
               )}
-              <div className="relative" style={{height: `${textareaHeight + 60}px`}}>
-              <TextareaAutosize
-                ref={inputRef}
-                value={input}
-                onChange={onChange}
-                onKeyDown={handleKeyDown}
-                onHeightChange={(height) => setTextareaHeight(height)}
-                maxRows={7}
-                minRows={2}
-                placeholder="Type to ask a question..."
-                disabled={loading}
-                className={`w-full bg-transparent px-4 ${
-                  selectedFilter ? "pt-2" : "pt-4"
-                } focus-visible:outline-none resize-none`}
-                rows={2}
-              />
+              <div
+                className="relative"
+                style={{ height: `${textareaHeight + 60}px` }}
+              >
+                <TextareaAutosize
+                  ref={inputRef}
+                  value={input}
+                  onChange={onChange}
+                  onKeyDown={handleKeyDown}
+                  onHeightChange={(height) => setTextareaHeight(height)}
+                  maxRows={7}
+                  minRows={2}
+                  placeholder="Type to ask a question..."
+                  disabled={loading}
+                  className={`w-full bg-transparent px-4 ${
+                    selectedFilter ? "pt-2" : "pt-4"
+                  } focus-visible:outline-none resize-none`}
+                  rows={2}
+                />
                 {/* Safe area at bottom for buttons */}
-                <div 
+                <div
                   className="absolute bottom-0 left-0 right-0 bg-transparent pointer-events-none"
-                  style={{ height: '60px' }}
+                  style={{ height: "60px" }}
                 />
               </div>
-              
             </div>
             <input
               ref={fileInputRef}
@@ -2370,7 +2357,7 @@ function ChatPage() {
                         .filter((filter) =>
                           filter.name
                             .toLowerCase()
-                            .includes(filterSearchTerm.toLowerCase()),
+                            .includes(filterSearchTerm.toLowerCase())
                         )
                         .map((filter, index) => (
                           <button
@@ -2399,7 +2386,7 @@ function ChatPage() {
                       {availableFilters.filter((filter) =>
                         filter.name
                           .toLowerCase()
-                          .includes(filterSearchTerm.toLowerCase()),
+                          .includes(filterSearchTerm.toLowerCase())
                       ).length === 0 &&
                         filterSearchTerm && (
                           <div className="px-2 py-3 text-sm text-muted-foreground">
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 150d1c56..56dc8dc8 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -108,8 +108,47 @@
 }
 
 @layer components {
+  .app-grid-arrangement {
+    --sidebar-width: 0px;
+    --notifications-width: 0px;
+    --filters-width: 0px;
+    --app-header-height: 53px;
+    --top-banner-height: 0px;
+
+    @media (width >= 48rem) {
+      --sidebar-width: 288px;
+    }
+    &.notifications-open {
+      --notifications-width: 320px;
+    }
+    &.filters-open {
+      --filters-width: 320px;
+    }
+    &.banner-visible {
+      --top-banner-height: 52px;
+    }
+    display: grid;
+    height: 100%;
+    width: 100%;
+    grid-template-rows:
+      var(--top-banner-height)
+      var(--app-header-height)
+      1fr;
+    grid-template-columns:
+      var(--sidebar-width)
+      1fr
+      var(--notifications-width)
+      var(--filters-width);
+    grid-template-areas:
+      "banner banner banner banner"
+      "header header header header"
+      "nav main notifications filters";
+    transition: grid-template-columns 0.25s ease-in-out,
+      grid-template-rows 0.25s ease-in-out;
+  }
+
   .header-arrangement {
-    @apply flex w-full h-[53px] items-center justify-between border-b border-border;
+    @apply flex w-full items-center justify-between border-b border-border;
   }
 
   .header-start-display {
diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 327bd884..0d6d54a4 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -12,13 +12,15 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
-import { useLayout } from "@/contexts/layout-context";
 import { useTask } from "@/contexts/task-context";
 import {
 	type ChunkResult,
 	type File,
 	useGetSearchQuery,
 } from "../../api/queries/useGetSearchQuery";
+// import { Label } from "@/components/ui/label";
+// import { Checkbox } from "@/components/ui/checkbox";
+import { KnowledgeSearchInput } from "@/components/knowledge-search-input";
 
 const getFileTypeLabel = (mimetype: string) => {
 	if (mimetype === "application/pdf") return "PDF";
@@ -28,22 +30,18 @@ const getFileTypeLabel = (mimetype: string) => {
 };
 
 function ChunksPageContent() {
-	const router = useRouter();
-	const searchParams = useSearchParams();
-	const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
-		useKnowledgeFilter();
-	const { isMenuOpen } = useTask();
-	const { totalTopOffset } = useLayout();
-
-	const filename = searchParams.get("filename");
-	const [chunks, setChunks] = useState<ChunkResult[]>([]);
-	const [chunksFilteredByQuery, setChunksFilteredByQuery] = useState<
-		ChunkResult[]
-	>([]);
-	const [selectedChunks, setSelectedChunks] = useState<Set<number>>(new Set());
-	const [activeCopiedChunkIndex, setActiveCopiedChunkIndex] = useState<
-		number | null
-	>(null);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { parsedFilterData, queryOverride } = useKnowledgeFilter();
+  const filename = searchParams.get("filename");
+  const [chunks, setChunks] = useState<ChunkResult[]>([]);
+  const [chunksFilteredByQuery, setChunksFilteredByQuery] = useState<
+    ChunkResult[]
+  >([]);
+  // const [selectedChunks, setSelectedChunks] = useState<Set<number>>(new Set());
+  const [activeCopiedChunkIndex, setActiveCopiedChunkIndex] = useState<
+    number | null
+  >(null);
 
 	// Calculate average chunk length
 	const averageChunkLength = useMemo(
@@ -53,25 +51,13 @@ function ChunksPageContent() {
 		[chunks],
 	);
 
-	const [selectAll, setSelectAll] = useState(false);
-	const [queryInputText, setQueryInputText] = useState(
-		parsedFilterData?.query ?? "",
-	);
+  // const [selectAll, setSelectAll] = useState(false);
 
-	// Use the same search query as the knowledge page, but we'll filter for the specific file
-	const { data = [], isFetching } = useGetSearchQuery("*", parsedFilterData);
-
-	useEffect(() => {
-		if (queryInputText === "") {
-			setChunksFilteredByQuery(chunks);
-		} else {
-			setChunksFilteredByQuery(
-				chunks.filter((chunk) =>
-					chunk.text.toLowerCase().includes(queryInputText.toLowerCase()),
-				),
-			);
-		}
-	}, [queryInputText, chunks]);
+  // Use the same search query as the knowledge page, but we'll filter for the specific file
+  const { data = [], isFetching } = useGetSearchQuery(
+    queryOverride,
+    parsedFilterData
+  );
 
 	const handleCopy = useCallback((text: string, index: number) => {
 		// Trim whitespace and remove new lines/tabs for cleaner copy
@@ -138,67 +124,28 @@ function ChunksPageContent() {
 		);
 	}
 
-	return (
-		<div
-			className={`fixed inset-0 md:left-72 flex flex-row transition-all duration-300 ${
-				isMenuOpen && isPanelOpen
-					? "md:right-[704px]"
-					: // Both open: 384px (menu) + 320px (KF panel)
-						isMenuOpen
-						? "md:right-96"
-						: // Only menu open: 384px
-							isPanelOpen
-							? "md:right-80"
-							: // Only KF panel open: 320px
-								"md:right-6" // Neither open: 24px
-			}`}
-			style={{ top: `${totalTopOffset}px` }}
-		>
-			<div className="flex-1 flex flex-col min-h-0 px-6 py-6">
-				{/* Header */}
-				<div className="flex flex-col mb-6">
-					<div className="flex flex-row items-center gap-3 mb-6">
-						<Button variant="ghost" onClick={handleBack} size="sm">
-							<ArrowLeft size={24} />
-						</Button>
-						<h1 className="text-lg font-semibold">
-							{/* Removes file extension from filename */}
-							{filename.replace(/\.[^/.]+$/, "")}
-						</h1>
-					</div>
-					<div className="flex flex-col items-start mt-2">
-						<div className="flex-1 flex items-center gap-2 w-full max-w-[640px]">
-							<div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
-								{selectedFilter?.name && (
-									<div
-										className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
-											filterAccentClasses[parsedFilterData?.color || "zinc"]
-										}`}
-									>
-										<span className="truncate">{selectedFilter?.name}</span>
-										<X
-											aria-label="Remove filter"
-											className="h-4 w-4 flex-shrink-0 cursor-pointer"
-											onClick={() => setSelectedFilter(null)}
-										/>
-									</div>
-								)}
-								<Search
-									className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
-									strokeWidth={1.5}
-								/>
-								<input
-									className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
-									name="search-query"
-									id="search-query"
-									type="text"
-									placeholder="Enter your search query..."
-									onChange={(e) => setQueryInputText(e.target.value)}
-									value={queryInputText}
-								/>
-							</div>
-						</div>
-						{/* <div className="flex items-center pl-4 gap-2">
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full">
+        {/* Header */}
+        <div className="flex flex-col mb-6">
+          <div className="flex items-center gap-3 mb-6">
+            <Button
+              variant="ghost"
+              onClick={handleBack}
+              size="sm"
+              className="max-w-8 max-h-8 -m-2"
+            >
+              <ArrowLeft size={24} />
+            </Button>
+            <h1 className="text-lg font-semibold">
+              {/* Removes file extension from filename */}
+              {filename.replace(/\.[^/.]+$/, "")}
+            </h1>
+          </div>
+          <div className="flex flex-1">
+            <KnowledgeSearchInput />
+            {/* <div className="flex items-center pl-4 gap-2">
               <Checkbox
                 id="selectAllChunks"
                 checked={selectAll}
@@ -216,36 +163,36 @@ function ChunksPageContent() {
 					</div>
 				</div>
 
-				{/* Content Area - matches knowledge page structure */}
-				<div className="flex-1 overflow-scroll pr-6">
-					{isFetching ? (
-						<div className="flex items-center justify-center h-64">
-							<div className="text-center">
-								<Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
-								<p className="text-lg text-muted-foreground">
-									Loading chunks...
-								</p>
-							</div>
-						</div>
-					) : chunks.length === 0 ? (
-						<div className="flex items-center justify-center h-64">
-							<div className="text-center">
-								<p className="text-xl font-semibold mb-2">No knowledge</p>
-								<p className="text-sm text-secondary-foreground">
-									Clear the knowledge filter or return to the knowledge page
-								</p>
-							</div>
-						</div>
-					) : (
-						<div className="space-y-4 pb-6">
-							{chunksFilteredByQuery.map((chunk, index) => (
-								<div
-									key={chunk.filename + index}
-									className="bg-muted rounded-lg p-4 border border-border/50"
-								>
-									<div className="flex items-center justify-between mb-2">
-										<div className="flex items-center gap-3">
-											{/* <div>
+        {/* Content Area - matches knowledge page structure */}
+        <div className="flex-1 overflow-auto pr-6">
+          {isFetching ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="text-center">
+                <Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
+                <p className="text-lg text-muted-foreground">
+                  Loading chunks...
+                </p>
+              </div>
+            </div>
+          ) : chunks.length === 0 ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="text-center">
+                <p className="text-xl font-semibold mb-2">No knowledge</p>
+                <p className="text-sm text-secondary-foreground">
+                  Clear the knowledge filter or return to the knowledge page
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-4 pb-6">
+              {chunksFilteredByQuery.map((chunk, index) => (
+                <div
+                  key={chunk.filename + index}
+                  className="bg-muted rounded-lg p-4 border border-border/50"
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-3">
+                      {/* <div>
                         <Checkbox
                           checked={selectedChunks.has(index)}
                           onCheckedChange={() =>
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 2cd6f382..d4aebec8 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -1,72 +1,60 @@
 "use client";
 
-import type { ColDef, GetRowIdParams } from "ag-grid-community";
+import {
+  themeQuartz,
+  type ColDef,
+  type GetRowIdParams,
+} from "ag-grid-community";
 import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react";
-import {
-  Building2,
-  Cloud,
-  Globe,
-  HardDrive,
-  Search,
-  Trash2,
-  X,
-} from "lucide-react";
+import { Cloud, FileIcon, Globe } from "lucide-react";
 import { useRouter } from "next/navigation";
-import {
-  type ChangeEvent,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { SiGoogledrive } from "react-icons/si";
-import { TbBrandOnedrive } from "react-icons/tb";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
 import { ProtectedRoute } from "@/components/protected-route";
 import { Button } from "@/components/ui/button";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
-import { useLayout } from "@/contexts/layout-context";
 import { useTask } from "@/contexts/task-context";
 import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
 import "@/components/AgGrid/registerAgGridModules";
 import "@/components/AgGrid/agGridStyles.css";
 import { toast } from "sonner";
 import { KnowledgeActionsDropdown } from "@/components/knowledge-actions-dropdown";
-import { filterAccentClasses } from "@/components/knowledge-filter-panel";
 import { StatusBadge } from "@/components/ui/status-badge";
 import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog";
 import { useDeleteDocument } from "../api/mutations/useDeleteDocument";
+import GoogleDriveIcon from "../settings/icons/google-drive-icon";
+import OneDriveIcon from "../settings/icons/one-drive-icon";
+import SharePointIcon from "../settings/icons/share-point-icon";
+import { KnowledgeSearchInput } from "@/components/knowledge-search-input";
 
 // Function to get the appropriate icon for a connector type
 function getSourceIcon(connectorType?: string) {
   switch (connectorType) {
-    case "url":
-      return <Globe className="h-4 w-4 text-muted-foreground flex-shrink-0" />;
     case "google_drive":
       return (
-        <SiGoogledrive className="h-4 w-4 text-foreground flex-shrink-0" />
+        <GoogleDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />
       );
     case "onedrive":
-      return (
-        <TbBrandOnedrive className="h-4 w-4 text-foreground flex-shrink-0" />
-      );
+      return <OneDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />;
     case "sharepoint":
-      return <Building2 className="h-4 w-4 text-foreground flex-shrink-0" />;
+      return (
+        <SharePointIcon className="h-4 w-4 text-foreground flex-shrink-0" />
+      );
+    case "url":
+      return <Globe className="h-4 w-4 text-muted-foreground flex-shrink-0" />;
     case "s3":
       return <Cloud className="h-4 w-4 text-foreground flex-shrink-0" />;
     default:
       return (
-        <HardDrive className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+        <FileIcon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
       );
   }
 }
 
 function SearchPage() {
   const router = useRouter();
-  const { isMenuOpen, files: taskFiles, refreshTasks } = useTask();
-  const { totalTopOffset } = useLayout();
-  const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
-    useKnowledgeFilter();
+  const { files: taskFiles, refreshTasks } = useTask();
+  const { parsedFilterData, queryOverride } = useKnowledgeFilter();
   const [selectedRows, setSelectedRows] = useState<File[]>([]);
   const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
 
@@ -77,8 +65,8 @@ function SearchPage() {
   }, [refreshTasks]);
 
   const { data: searchData = [], isFetching } = useGetSearchQuery(
-    parsedFilterData?.query || "*",
-    parsedFilterData,
+    queryOverride,
+    parsedFilterData
   );
   // Convert TaskFiles to File format and merge with backend results
   const taskFilesAsFiles: File[] = taskFiles.map((taskFile) => {
@@ -94,7 +82,7 @@ function SearchPage() {
 
   // Create a map of task files by filename for quick lookup
   const taskFileMap = new Map(
-    taskFilesAsFiles.map((file) => [file.filename, file]),
+    taskFilesAsFiles.map((file) => [file.filename, file])
   );
 
   // Override backend files with task file status if they exist
@@ -117,7 +105,7 @@ function SearchPage() {
     return (
       taskFile.status !== "active" &&
       !backendFiles.some(
-        (backendFile) => backendFile.filename === taskFile.filename,
+        (backendFile) => backendFile.filename === taskFile.filename
       )
     );
   });
@@ -125,10 +113,6 @@ function SearchPage() {
   // Combine task files first, then backend files
   const fileResults = [...backendFiles, ...filteredTaskFiles];
 
-  const handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => {
-    gridRef.current?.api.setGridOption("quickFilterText", e.target.value);
-  };
-
   const gridRef = useRef<AgGridReact>(null);
 
   const columnDefs = [
@@ -161,8 +145,8 @@ function SearchPage() {
                 }
                 router.push(
                   `/knowledge/chunks?filename=${encodeURIComponent(
-                    data?.filename ?? "",
-                  )}`,
+                    data?.filename ?? ""
+                  )}`
                 );
               }}
             >
@@ -263,7 +247,7 @@ function SearchPage() {
     try {
       // Delete each file individually since the API expects one filename at a time
       const deletePromises = selectedRows.map((row) =>
-        deleteDocumentMutation.mutateAsync({ filename: row.filename }),
+        deleteDocumentMutation.mutateAsync({ filename: row.filename })
       );
 
       await Promise.all(deletePromises);
@@ -271,7 +255,7 @@ function SearchPage() {
       toast.success(
         `Successfully deleted ${selectedRows.length} document${
           selectedRows.length > 1 ? "s" : ""
-        }`,
+        }`
       );
       setSelectedRows([]);
       setShowBulkDeleteDialog(false);
@@ -284,74 +268,23 @@ function SearchPage() {
       toast.error(
         error instanceof Error
           ? error.message
-          : "Failed to delete some documents",
+          : "Failed to delete some documents"
       );
     }
   };
 
   return (
-    <div
-      className={`fixed inset-0 md:left-72 flex flex-col transition-all duration-300 ${
-        isMenuOpen && isPanelOpen
-          ? "md:right-[704px]"
-          : // Both open: 384px (menu) + 320px (KF panel)
-          isMenuOpen
-          ? "md:right-96"
-          : // Only menu open: 384px
-          isPanelOpen
-          ? "md:right-80"
-          : // Only KF panel open: 320px
-            "md:right-6" // Neither open: 24px
-      }`}
-      style={{ top: `${totalTopOffset}px` }}
-    >
-      <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
+    <>
+      <div className="flex flex-col h-full">
         <div className="flex items-center justify-between mb-6">
           <h2 className="text-lg font-semibold">Project Knowledge</h2>
-          <KnowledgeDropdown variant="button" />
         </div>
 
         {/* Search Input Area */}
-        <div className="flex-shrink-0 mb-6 xl:max-w-[75%]">
-          <form className="flex gap-3">
-            <div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
-              {selectedFilter?.name && (
-                <div
-                  className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
-                    filterAccentClasses[parsedFilterData?.color || "zinc"]
-                  }`}
-                >
-                  <span className="truncate">{selectedFilter?.name}</span>
-                  <X
-                    aria-label="Remove filter"
-                    className="h-4 w-4 flex-shrink-0 cursor-pointer"
-                    onClick={() => setSelectedFilter(null)}
-                  />
-                </div>
-              )}
-              <Search className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground" />
-              <input
-                className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
-                name="search-query"
-                id="search-query"
-                type="text"
-                placeholder="Enter your search query..."
-                onChange={handleTableSearch}
-              />
-            </div>
-            {/* <Button
-              type="submit"
-              variant="outline"
-              className="rounded-lg p-0 flex-shrink-0"
-            >
-              {isFetching ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Search className="h-4 w-4" />
-              )}
-            </Button> */}
-            {/* //TODO: Implement sync button */}
-            {/* <Button
+        <div className="flex-1 flex items-center flex-shrink-0 flex-wrap-reverse gap-3 mb-6">
+          <KnowledgeSearchInput />
+          {/* //TODO: Implement sync button */}
+          {/* <Button
               type="button"
               variant="outline"
               className="rounded-lg flex-shrink-0"
@@ -359,17 +292,19 @@ function SearchPage() {
             >
               Sync
             </Button> */}
-            {selectedRows.length > 0 && (
-              <Button
-                type="button"
-                variant="destructive"
-                className="rounded-lg flex-shrink-0"
-                onClick={() => setShowBulkDeleteDialog(true)}
-              >
-                <Trash2 className="h-4 w-4" /> Delete
-              </Button>
-            )}
-          </form>
+          {selectedRows.length > 0 && (
+            <Button
+              type="button"
+              variant="destructive"
+              className="rounded-lg flex-shrink-0"
+              onClick={() => setShowBulkDeleteDialog(true)}
+            >
+              Delete
+            </Button>
+          )}
+          <div className="ml-auto">
+            <KnowledgeDropdown />
+          </div>
         </div>
         <AgGridReact
           className="w-full overflow-auto"
@@ -377,6 +312,7 @@ function SearchPage() {
           defaultColDef={defaultColDef}
           loading={isFetching}
           ref={gridRef}
+          theme={themeQuartz.withParams({ browserColorScheme: "inherit" })}
           rowData={fileResults}
           rowSelection="multiple"
           rowMultiSelectWithClick={false}
@@ -414,7 +350,7 @@ ${selectedRows.map((row) => `• ${row.filename}`).join("\n")}`}
         onConfirm={handleBulkDelete}
         isLoading={deleteDocumentMutation.isPending}
       />
-    </div>
+    </>
   );
 }
 
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index baf9f2d5..10ed826b 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -38,7 +38,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased h-full w-full overflow-hidden`}
+        className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased h-lvh w-full overflow-hidden`}
       >
         <ThemeProvider
           attribute="class"
diff --git a/frontend/src/app/settings/icons/google-drive-icon.tsx b/frontend/src/app/settings/icons/google-drive-icon.tsx
index 0980e644..d345c98c 100644
--- a/frontend/src/app/settings/icons/google-drive-icon.tsx
+++ b/frontend/src/app/settings/icons/google-drive-icon.tsx
@@ -1,10 +1,11 @@
-const GoogleDriveIcon = () => (
+const GoogleDriveIcon = ({ className }: { className?: string }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="18"
     height="16"
     viewBox="0 0 18 16"
     fill="none"
+    className={className}
   >
     <path
       d="M2.03338 13.2368L2.75732 14.4872C2.90774 14.7504 3.12398 14.9573 3.37783 15.1077L5.9633 10.6325H0.792358C0.792358 10.9239 0.867572 11.2154 1.018 11.4786L2.03338 13.2368Z"
diff --git a/frontend/src/app/settings/icons/one-drive-icon.tsx b/frontend/src/app/settings/icons/one-drive-icon.tsx
index 30b77a65..fcebc6d6 100644
--- a/frontend/src/app/settings/icons/one-drive-icon.tsx
+++ b/frontend/src/app/settings/icons/one-drive-icon.tsx
@@ -1,10 +1,11 @@
-const OneDriveIcon = () => (
+const OneDriveIcon = ({ className }: { className?: string }) => (
   <svg
     width="17"
     height="12"
     viewBox="0 0 17 12"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
   >
     <g clip-path="url(#clip0_3016_367)">
       <path
diff --git a/frontend/src/app/settings/icons/share-point-icon.tsx b/frontend/src/app/settings/icons/share-point-icon.tsx
index 3f51dfae..5a89b27f 100644
--- a/frontend/src/app/settings/icons/share-point-icon.tsx
+++ b/frontend/src/app/settings/icons/share-point-icon.tsx
@@ -1,10 +1,11 @@
-const SharePointIcon = () => (
+const SharePointIcon = ({ className }: { className?: string }) => (
   <svg
     width="15"
     height="16"
     viewBox="0 0 15 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
   >
     <g clip-path="url(#clip0_3016_409)">
       <path
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index a4101535..2a5541e7 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -623,7 +623,7 @@ function KnowledgeSourcesPage() {
 	};
 
 	return (
-		<div className="space-y-8">
+		<div className="space-y-8 pb-6">
 			{/* Connectors Section */}
 			<div className="space-y-6">
 				<div>
diff --git a/frontend/src/components/AgGrid/agGridStyles.css b/frontend/src/components/AgGrid/agGridStyles.css
index 590046c2..e307f617 100644
--- a/frontend/src/components/AgGrid/agGridStyles.css
+++ b/frontend/src/components/AgGrid/agGridStyles.css
@@ -10,6 +10,9 @@ body {
   --ag-row-hover-color: hsl(var(--muted));
   --ag-wrapper-border: none;
   --ag-font-family: var(--font-sans);
+  --ag-selected-row-background-color: hsl(var(--accent));
+  --ag-focus-shadow: none;
+  --ag-range-selection-border-color: hsl(var(--primary));
 
   /* Checkbox styling */
   --ag-checkbox-background-color: hsl(var(--background));
diff --git a/frontend/src/components/layout-wrapper.tsx b/frontend/src/components/layout-wrapper.tsx
index 79417654..dbd04fea 100644
--- a/frontend/src/components/layout-wrapper.tsx
+++ b/frontend/src/components/layout-wrapper.tsx
@@ -12,12 +12,10 @@ import { KnowledgeFilterPanel } from "@/components/knowledge-filter-panel";
 import Logo from "@/components/logo/logo";
 import { Navigation } from "@/components/navigation";
 import { TaskNotificationMenu } from "@/components/task-notification-menu";
-import { Button } from "@/components/ui/button";
 import { UserNav } from "@/components/user-nav";
 import { useAuth } from "@/contexts/auth-context";
 import { useChat } from "@/contexts/chat-context";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
-import { LayoutProvider } from "@/contexts/layout-context";
 // import { GitHubStarButton } from "@/components/github-star-button"
 // import { DiscordLink } from "@/components/discord-link"
 import { useTask } from "@/contexts/task-context";
@@ -35,7 +33,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
     refreshConversations,
     startNewConversation,
   } = useChat();
-  const { isLoading: isSettingsLoading, data: settings } = useGetSettingsQuery({
+  const { isLoading: isSettingsLoading } = useGetSettingsQuery({
     enabled: isAuthenticated || isNoAuthMode,
   });
   const {
@@ -59,6 +57,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
   // List of paths that should not show navigation
   const authPaths = ["/login", "/auth/callback", "/onboarding"];
   const isAuthPage = authPaths.includes(pathname);
+  const isOnKnowledgePage = pathname.startsWith("/knowledge");
 
   // List of paths with smaller max-width
   const smallWidthPaths = ["/settings", "/settings/connector/new"];
@@ -66,7 +65,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
 
   // Calculate active tasks for the bell icon
   const activeTasks = tasks.filter(
-    task =>
+    (task) =>
       task.status === "pending" ||
       task.status === "running" ||
       task.status === "processing"
@@ -75,14 +74,6 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
   const isUnhealthy = health?.status === "unhealthy" || isError;
   const isBannerVisible = !isHealthLoading && isUnhealthy;
 
-  // Dynamic height calculations based on banner visibility
-  const headerHeight = 53;
-  const bannerHeight = 52; // Approximate banner height
-  const totalTopOffset = isBannerVisible
-    ? headerHeight + bannerHeight
-    : headerHeight;
-  const mainContentHeight = `calc(100vh - ${totalTopOffset}px)`;
-
   // Show loading state when backend isn't ready
   if (isLoading || isSettingsLoading) {
     return (
@@ -102,9 +93,18 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
 
   // For all other pages, render with Langflow-styled navigation and task menu
   return (
-    <div className="h-full relative">
-      <DoclingHealthBanner className="w-full pt-2" />
-      <header className="header-arrangement bg-background sticky top-0 z-50 h-10">
+    <div
+      className={cn(
+        "app-grid-arrangement",
+        isBannerVisible && "banner-visible",
+        isPanelOpen && isOnKnowledgePage && !isMenuOpen && "filters-open",
+        isMenuOpen && "notifications-open"
+      )}
+    >
+      <div className="w-full [grid-area:banner]">
+        <DoclingHealthBanner className="w-full" />
+      </div>
+      <header className="header-arrangement bg-background [grid-area:header]">
         <div className="header-start-display px-[16px]">
           {/* Logo/Title */}
           <div className="flex items-center">
@@ -144,47 +144,37 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
           </div>
         </div>
       </header>
-      <div
-        className="side-bar-arrangement bg-background fixed left-0 top-[40px] bottom-0 md:flex hidden pt-1"
-        style={{ top: `${totalTopOffset}px` }}
-      >
+
+      {/* Sidebar Navigation */}
+      <aside className="bg-background border-r overflow-hidden [grid-area:nav]">
         <Navigation
           conversations={conversations}
           isConversationsLoading={isConversationsLoading}
           onNewConversation={handleNewConversation}
         />
-      </div>
-      <main
-        className={`md:pl-72 transition-all duration-300 overflow-y-auto ${
-          isMenuOpen && isPanelOpen
-            ? "md:pr-[728px]"
-            : // Both open: 384px (menu) + 320px (KF panel) + 24px (original padding)
-            isMenuOpen
-            ? "md:pr-96"
-            : // Only menu open: 384px
-            isPanelOpen
-            ? "md:pr-80"
-            : // Only KF panel open: 320px
-              "md:pr-0" // Neither open: 24px
-        }`}
-        style={{ height: mainContentHeight }}
-      >
-        <LayoutProvider
-          headerHeight={headerHeight}
-          totalTopOffset={totalTopOffset}
+      </aside>
+
+      {/* Main Content */}
+      <main className="overflow-y-auto [grid-area:main]">
+        <div
+          className={cn(
+            "p-6 h-full container",
+            isSmallWidthPath && "max-w-[850px] ml-0"
+          )}
         >
-          <div
-            className={cn(
-              "py-6 lg:py-8 px-4 lg:px-6",
-              isSmallWidthPath ? "max-w-[850px]" : "container"
-            )}
-          >
-            {children}
-          </div>
-        </LayoutProvider>
+          {children}
+        </div>
       </main>
-      <TaskNotificationMenu />
-      <KnowledgeFilterPanel />
+
+      {/* Task Notifications Panel */}
+      <aside className="overflow-y-auto overflow-x-hidden [grid-area:notifications]">
+        {isMenuOpen && <TaskNotificationMenu />}
+      </aside>
+
+      {/* Knowledge Filter Panel */}
+      <aside className="overflow-y-auto overflow-x-hidden [grid-area:filters]">
+        {isPanelOpen && <KnowledgeFilterPanel />}
+      </aside>
     </div>
   );
 }
diff --git a/frontend/src/components/task-notification-menu.tsx b/frontend/src/components/task-notification-menu.tsx
index fed7e6f1..6cb968e8 100644
--- a/frontend/src/components/task-notification-menu.tsx
+++ b/frontend/src/components/task-notification-menu.tsx
@@ -143,10 +143,10 @@ export function TaskNotificationMenu() {
   }
 
   return (
-    <div className="fixed top-14 right-0 z-40 w-80 h-[calc(100vh-3.5rem)] bg-background border-l border-border/40">
+    <div className="h-full bg-background border-l">
       <div className="flex flex-col h-full">
         {/* Header */}
-        <div className="p-4 border-b border-border/40">
+        <div className="p-4 border-b">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <Bell className="h-5 w-5 text-muted-foreground" />
diff --git a/frontend/src/components/ui/animated-processing-icon.tsx b/frontend/src/components/ui/animated-processing-icon.tsx
index 51815414..431202c1 100644
--- a/frontend/src/components/ui/animated-processing-icon.tsx
+++ b/frontend/src/components/ui/animated-processing-icon.tsx
@@ -1,37 +1,70 @@
-import type { SVGProps } from "react";
+import { cn } from "@/lib/utils";
+import { motion, easeInOut } from "framer-motion";
 
-export const AnimatedProcessingIcon = (props: SVGProps<SVGSVGElement>) => {
-	return (
-		<svg
-			viewBox="0 0 8 12"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-		>
-			<title>Processing</title>
-			<style>
-				{`
-          .dot-1 { animation: pulse-wave 1.5s infinite; animation-delay: 0s; }
-          .dot-2 { animation: pulse-wave 1.5s infinite; animation-delay: 0.1s; }
-          .dot-3 { animation: pulse-wave 1.5s infinite; animation-delay: 0.2s; }
-          .dot-4 { animation: pulse-wave 1.5s infinite; animation-delay: 0.3s; }
-          .dot-5 { animation: pulse-wave 1.5s infinite; animation-delay: 0.4s; }
-          
-          @keyframes pulse-wave {
-            0%, 60%, 100% { 
-              opacity: 0.25; 
-            }
-            30% { 
-              opacity: 1; 
-            }
-          }
-        `}
-			</style>
-			<circle className="dot-1" cx="2" cy="6" r="1" fill="currentColor" />
-			<circle className="dot-2" cx="2" cy="10" r="1" fill="currentColor" />
-			<circle className="dot-3" cx="6" cy="2" r="1" fill="currentColor" />
-			<circle className="dot-4" cx="6" cy="6" r="1" fill="currentColor" />
-			<circle className="dot-5" cx="6" cy="10" r="1" fill="currentColor" />
-		</svg>
-	);
+export const AnimatedProcessingIcon = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  const createAnimationFrames = (delay: number) => ({
+    opacity: [1, 1, 0.5, 0], // Opacity Steps
+    transition: {
+      delay,
+      duration: 1,
+      ease: easeInOut,
+      repeat: Infinity,
+      times: [0, 0.33, 0.66, 1], // Duration Percentages that Correspond to opacity Array
+    },
+  });
+
+  return (
+    <svg
+      data-testid="rotating-dot-animation"
+      className={cn("h-[10px] w-[6px]", className)}
+      viewBox="0 0 6 10"
+    >
+      <motion.circle
+        animate={createAnimationFrames(0)}
+        fill="currentColor"
+        cx="1"
+        cy="1"
+        r="1"
+      />
+      <motion.circle
+        animate={createAnimationFrames(0.16)}
+        fill="currentColor"
+        cx="1"
+        cy="5"
+        r="1"
+      />
+      <motion.circle
+        animate={createAnimationFrames(0.33)}
+        fill="currentColor"
+        cx="1"
+        cy="9"
+        r="1"
+      />
+      <motion.circle
+        animate={createAnimationFrames(0.83)}
+        fill="currentColor"
+        cx="5"
+        cy="1"
+        r="1"
+      />
+      <motion.circle
+        animate={createAnimationFrames(0.66)}
+        fill="currentColor"
+        cx="5"
+        cy="5"
+        r="1"
+      />
+      <motion.circle
+        animate={createAnimationFrames(0.5)}
+        fill="currentColor"
+        cx="5"
+        cy="9"
+        r="1"
+      />
+    </svg>
+  );
 };
diff --git a/frontend/src/components/ui/status-badge.tsx b/frontend/src/components/ui/status-badge.tsx
index e57ad3b5..19270284 100644
--- a/frontend/src/components/ui/status-badge.tsx
+++ b/frontend/src/components/ui/status-badge.tsx
@@ -50,7 +50,7 @@ export const StatusBadge = ({ status, className }: StatusBadgeProps) => {
       }`}
     >
       {status === "processing" && (
-        <AnimatedProcessingIcon className="text-current h-3 w-3 shrink-0" />
+        <AnimatedProcessingIcon className="text-current shrink-0" />
       )}
       {config.label}
     </div>
diff --git a/frontend/src/contexts/knowledge-filter-context.tsx b/frontend/src/contexts/knowledge-filter-context.tsx
index 043f6fae..eebf355a 100644
--- a/frontend/src/contexts/knowledge-filter-context.tsx
+++ b/frontend/src/contexts/knowledge-filter-context.tsx
@@ -5,6 +5,7 @@ import React, {
   createContext,
   type ReactNode,
   useContext,
+  useEffect,
   useState,
 } from "react";
 
@@ -44,6 +45,8 @@ interface KnowledgeFilterContextType {
   createMode: boolean;
   startCreateMode: () => void;
   endCreateMode: () => void;
+  queryOverride: string;
+  setQueryOverride: (query: string) => void;
 }
 
 const KnowledgeFilterContext = createContext<
@@ -73,6 +76,7 @@ export function KnowledgeFilterProvider({
     useState<ParsedQueryData | null>(null);
   const [isPanelOpen, setIsPanelOpen] = useState(false);
   const [createMode, setCreateMode] = useState(false);
+  const [queryOverride, setQueryOverride] = useState("");
 
   const setSelectedFilter = (filter: KnowledgeFilter | null) => {
     setSelectedFilterState(filter);
@@ -136,6 +140,11 @@ export function KnowledgeFilterProvider({
     setCreateMode(false);
   };
 
+  // Clear the search override when we change filters
+  useEffect(() => {
+    setQueryOverride("");
+  }, [selectedFilter]);
+
   const value: KnowledgeFilterContextType = {
     selectedFilter,
     parsedFilterData,
@@ -148,6 +157,8 @@ export function KnowledgeFilterProvider({
     createMode,
     startCreateMode,
     endCreateMode,
+    queryOverride,
+    setQueryOverride,
   };
 
   return (
diff --git a/frontend/src/contexts/layout-context.tsx b/frontend/src/contexts/layout-context.tsx
deleted file mode 100644
index f40ea28c..00000000
--- a/frontend/src/contexts/layout-context.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client";
-
-import { createContext, useContext } from "react";
-
-interface LayoutContextType {
-  headerHeight: number;
-  totalTopOffset: number;
-}
-
-const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
-
-export function useLayout() {
-  const context = useContext(LayoutContext);
-  if (context === undefined) {
-    throw new Error("useLayout must be used within a LayoutProvider");
-  }
-  return context;
-}
-
-export function LayoutProvider({
-  children,
-  headerHeight,
-  totalTopOffset
-}: {
-  children: React.ReactNode;
-  headerHeight: number;
-  totalTopOffset: number;
-}) {
-  return (
-    <LayoutContext.Provider value={{ headerHeight, totalTopOffset }}>
-      {children}
-    </LayoutContext.Provider>
-  );
-}
\ No newline at end of file