diff --git a/frontend/components/knowledge-dropdown.tsx b/frontend/components/knowledge-dropdown.tsx
index 481a45b1..82581de8 100644
--- a/frontend/components/knowledge-dropdown.tsx
+++ b/frontend/components/knowledge-dropdown.tsx
@@ -1,82 +1,128 @@
-"use client"
+"use client";
 
-import { useState, useEffect, useRef } from "react"
-import { ChevronDown, Upload, FolderOpen, Cloud, PlugZap, Plus } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { cn } from "@/lib/utils"
-import { useTask } from "@/contexts/task-context"
-import { useRouter } from "next/navigation"
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  ChevronDown,
+  Cloud,
+  FolderOpen,
+  PlugZap,
+  Plus,
+  Upload,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useTask } from "@/contexts/task-context";
+import { cn } from "@/lib/utils";
 
 interface KnowledgeDropdownProps {
-  active?: boolean
-  variant?: 'navigation' | 'button'
+  active?: boolean;
+  variant?: "navigation" | "button";
 }
 
-export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeDropdownProps) {
-  const { addTask } = useTask()
-  const router = useRouter()
-  const [isOpen, setIsOpen] = useState(false)
-  const [showFolderDialog, setShowFolderDialog] = useState(false)
-  const [showS3Dialog, setShowS3Dialog] = useState(false)
-  const [awsEnabled, setAwsEnabled] = useState(false)
-  const [folderPath, setFolderPath] = useState("/app/documents/")
-  const [bucketUrl, setBucketUrl] = useState("s3://")
-  const [folderLoading, setFolderLoading] = useState(false)
-  const [s3Loading, setS3Loading] = useState(false)
-  const [fileUploading, setFileUploading] = useState(false)
-  const [cloudConnectors, setCloudConnectors] = useState<{[key: string]: {name: string, available: boolean, connected: boolean, hasToken: boolean}}>({})
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const dropdownRef = useRef<HTMLDivElement>(null)
+export function KnowledgeDropdown({
+  active,
+  variant = "navigation",
+}: KnowledgeDropdownProps) {
+  const { addTask } = useTask();
+  const router = useRouter();
+  const [isOpen, setIsOpen] = useState(false);
+  const [showFolderDialog, setShowFolderDialog] = useState(false);
+  const [showS3Dialog, setShowS3Dialog] = useState(false);
+  const [awsEnabled, setAwsEnabled] = useState(false);
+  const [folderPath, setFolderPath] = useState("/app/documents/");
+  const [bucketUrl, setBucketUrl] = useState("s3://");
+  const [folderLoading, setFolderLoading] = useState(false);
+  const [s3Loading, setS3Loading] = useState(false);
+  const [fileUploading, setFileUploading] = useState(false);
+  const [cloudConnectors, setCloudConnectors] = useState<{
+    [key: string]: {
+      name: string;
+      available: boolean;
+      connected: boolean;
+      hasToken: boolean;
+    };
+  }>({});
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const queryClient = useQueryClient();
+
+  const refetchSearch = () => {
+    queryClient.invalidateQueries({ queryKey: ["search"] });
+  };
 
   // Check AWS availability and cloud connectors on mount
   useEffect(() => {
     const checkAvailability = async () => {
       try {
         // Check AWS
-        const awsRes = await fetch("/api/upload_options")
+        const awsRes = await fetch("/api/upload_options");
         if (awsRes.ok) {
-          const awsData = await awsRes.json()
-          setAwsEnabled(Boolean(awsData.aws))
+          const awsData = await awsRes.json();
+          setAwsEnabled(Boolean(awsData.aws));
         }
 
         // Check cloud connectors
-        const connectorsRes = await fetch('/api/connectors')
+        const connectorsRes = await fetch("/api/connectors");
         if (connectorsRes.ok) {
-          const connectorsResult = await connectorsRes.json()
-          const cloudConnectorTypes = ['google_drive', 'onedrive', 'sharepoint']
-          const connectorInfo: {[key: string]: {name: string, available: boolean, connected: boolean, hasToken: boolean}} = {}
-          
+          const connectorsResult = await connectorsRes.json();
+          const cloudConnectorTypes = [
+            "google_drive",
+            "onedrive",
+            "sharepoint",
+          ];
+          const connectorInfo: {
+            [key: string]: {
+              name: string;
+              available: boolean;
+              connected: boolean;
+              hasToken: boolean;
+            };
+          } = {};
+
           for (const type of cloudConnectorTypes) {
             if (connectorsResult.connectors[type]) {
               connectorInfo[type] = {
                 name: connectorsResult.connectors[type].name,
                 available: connectorsResult.connectors[type].available,
                 connected: false,
-                hasToken: false
-              }
+                hasToken: false,
+              };
 
               // Check connection status
               try {
-                const statusRes = await fetch(`/api/connectors/${type}/status`)
+                const statusRes = await fetch(`/api/connectors/${type}/status`);
                 if (statusRes.ok) {
-                  const statusData = await statusRes.json()
-                  const connections = statusData.connections || []
-                  const activeConnection = connections.find((conn: {is_active: boolean, connection_id: string}) => conn.is_active)
-                  const isConnected = activeConnection !== undefined
+                  const statusData = await statusRes.json();
+                  const connections = statusData.connections || [];
+                  const activeConnection = connections.find(
+                    (conn: { is_active: boolean; connection_id: string }) =>
+                      conn.is_active,
+                  );
+                  const isConnected = activeConnection !== undefined;
 
                   if (isConnected && activeConnection) {
-                    connectorInfo[type].connected = true
-                    
+                    connectorInfo[type].connected = true;
+
                     // Check token availability
                     try {
-                      const tokenRes = await fetch(`/api/connectors/${type}/token?connection_id=${activeConnection.connection_id}`)
+                      const tokenRes = await fetch(
+                        `/api/connectors/${type}/token?connection_id=${activeConnection.connection_id}`,
+                      );
                       if (tokenRes.ok) {
-                        const tokenData = await tokenRes.json()
+                        const tokenData = await tokenRes.json();
                         if (tokenData.access_token) {
-                          connectorInfo[type].hasToken = true
+                          connectorInfo[type].hasToken = true;
                         }
                       }
                     } catch {
@@ -90,114 +136,136 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
             }
           }
 
-          setCloudConnectors(connectorInfo)
+          setCloudConnectors(connectorInfo);
         }
       } catch (err) {
-        console.error("Failed to check availability", err)
+        console.error("Failed to check availability", err);
       }
-    }
-    checkAvailability()
-  }, [])
+    };
+    checkAvailability();
+  }, []);
 
   // Handle click outside to close dropdown
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false)
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
       }
-    }
+    };
 
     if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside)
-      return () => document.removeEventListener("mousedown", handleClickOutside)
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
     }
-  }, [isOpen])
+  }, [isOpen]);
 
   const handleFileUpload = () => {
-    fileInputRef.current?.click()
-  }
+    fileInputRef.current?.click();
+  };
 
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files
+    const files = e.target.files;
     if (files && files.length > 0) {
       // Close dropdown and disable button immediately after file selection
-      setIsOpen(false)
-      setFileUploading(true)
-      
+      setIsOpen(false);
+      setFileUploading(true);
+
       // Trigger the same file upload event as the chat page
-      window.dispatchEvent(new CustomEvent('fileUploadStart', { 
-        detail: { filename: files[0].name } 
-      }))
-      
+      window.dispatchEvent(
+        new CustomEvent("fileUploadStart", {
+          detail: { filename: files[0].name },
+        }),
+      );
+
       try {
-        const formData = new FormData()
-        formData.append('file', files[0])
-        
+        const formData = new FormData();
+        formData.append("file", files[0]);
+
         // Use router upload and ingest endpoint (automatically routes based on configuration)
-        const uploadIngestRes = await fetch('/api/router/upload_ingest', {
-          method: 'POST',
+        const uploadIngestRes = await fetch("/api/router/upload_ingest", {
+          method: "POST",
           body: formData,
-        })
-        const uploadIngestJson = await uploadIngestRes.json()
+        });
+        const uploadIngestJson = await uploadIngestRes.json();
         if (!uploadIngestRes.ok) {
-          throw new Error(uploadIngestJson?.error || 'Upload and ingest failed')
+          throw new Error(
+            uploadIngestJson?.error || "Upload and ingest failed",
+          );
         }
 
         // Extract results from the unified response
-        const fileId = uploadIngestJson?.upload?.id
-        const filePath = uploadIngestJson?.upload?.path
-        const runJson = uploadIngestJson?.ingestion
-        const deleteResult = uploadIngestJson?.deletion
-        
+        const fileId = uploadIngestJson?.upload?.id;
+        const filePath = uploadIngestJson?.upload?.path;
+        const runJson = uploadIngestJson?.ingestion;
+        const deleteResult = uploadIngestJson?.deletion;
+
         if (!fileId || !filePath) {
-          throw new Error('Upload successful but no file id/path returned')
+          throw new Error("Upload successful but no file id/path returned");
         }
 
         // Log deletion status if provided
         if (deleteResult) {
-          if (deleteResult.status === 'deleted') {
-            console.log('File successfully cleaned up from Langflow:', deleteResult.file_id)
-          } else if (deleteResult.status === 'delete_failed') {
-            console.warn('Failed to cleanup file from Langflow:', deleteResult.error)
+          if (deleteResult.status === "deleted") {
+            console.log(
+              "File successfully cleaned up from Langflow:",
+              deleteResult.file_id,
+            );
+          } else if (deleteResult.status === "delete_failed") {
+            console.warn(
+              "Failed to cleanup file from Langflow:",
+              deleteResult.error,
+            );
           }
         }
 
         // Notify UI
-        window.dispatchEvent(new CustomEvent('fileUploaded', { 
-          detail: { 
-            file: files[0], 
-            result: { 
-              file_id: fileId, 
-              file_path: filePath, 
-              run: runJson, 
-              deletion: deleteResult,
-              unified: true 
-            } 
-          } 
-        }))
+        window.dispatchEvent(
+          new CustomEvent("fileUploaded", {
+            detail: {
+              file: files[0],
+              result: {
+                file_id: fileId,
+                file_path: filePath,
+                run: runJson,
+                deletion: deleteResult,
+                unified: true,
+              },
+            },
+          }),
+        );
         // Trigger search refresh after successful ingestion
-        window.dispatchEvent(new CustomEvent('knowledgeUpdated'))
+        window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
       } catch (error) {
-        window.dispatchEvent(new CustomEvent('fileUploadError', { 
-          detail: { filename: files[0].name, error: error instanceof Error ? error.message : 'Upload failed' } 
-        }))
+        window.dispatchEvent(
+          new CustomEvent("fileUploadError", {
+            detail: {
+              filename: files[0].name,
+              error: error instanceof Error ? error.message : "Upload failed",
+            },
+          }),
+        );
       } finally {
-        window.dispatchEvent(new CustomEvent('fileUploadComplete'))
-        setFileUploading(false)
+        window.dispatchEvent(new CustomEvent("fileUploadComplete"));
+        setFileUploading(false);
+        refetchSearch();
       }
     }
-    
+
     // Reset file input
     if (fileInputRef.current) {
-      fileInputRef.current.value = ''
+      fileInputRef.current.value = "";
     }
-  }
+  };
 
   const handleFolderUpload = async () => {
-    if (!folderPath.trim()) return
+    if (!folderPath.trim()) return;
 
-    setFolderLoading(true)
-    setShowFolderDialog(false)
+    setFolderLoading(true);
+    setShowFolderDialog(false);
 
     try {
       const response = await fetch("/api/upload_path", {
@@ -206,40 +274,40 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
           "Content-Type": "application/json",
         },
         body: JSON.stringify({ path: folderPath }),
-      })
+      });
+
+      const result = await response.json();
 
-      const result = await response.json()
-      
       if (response.status === 201) {
-        const taskId = result.task_id || result.id
-        
+        const taskId = result.task_id || result.id;
+
         if (!taskId) {
-          throw new Error("No task ID received from server")
+          throw new Error("No task ID received from server");
         }
-        
-        addTask(taskId)
-        setFolderPath("")
+
+        addTask(taskId);
+        setFolderPath("");
         // Trigger search refresh after successful folder processing starts
-        window.dispatchEvent(new CustomEvent('knowledgeUpdated'))
-        
+        window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
       } else if (response.ok) {
-        setFolderPath("")
-        window.dispatchEvent(new CustomEvent('knowledgeUpdated'))
+        setFolderPath("");
+        window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
       } else {
-        console.error("Folder upload failed:", result.error)
+        console.error("Folder upload failed:", result.error);
       }
     } catch (error) {
-      console.error("Folder upload error:", error)
+      console.error("Folder upload error:", error);
     } finally {
-      setFolderLoading(false)
+      setFolderLoading(false);
+      refetchSearch();
     }
-  }
+  };
 
   const handleS3Upload = async () => {
-    if (!bucketUrl.trim()) return
+    if (!bucketUrl.trim()) return;
 
-    setS3Loading(true)
-    setShowS3Dialog(false)
+    setS3Loading(true);
+    setShowS3Dialog(false);
 
     try {
       const response = await fetch("/api/upload_bucket", {
@@ -248,30 +316,31 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
           "Content-Type": "application/json",
         },
         body: JSON.stringify({ s3_url: bucketUrl }),
-      })
+      });
 
-      const result = await response.json()
+      const result = await response.json();
 
       if (response.status === 201) {
-        const taskId = result.task_id || result.id
+        const taskId = result.task_id || result.id;
 
         if (!taskId) {
-          throw new Error("No task ID received from server")
+          throw new Error("No task ID received from server");
         }
 
-        addTask(taskId)
-        setBucketUrl("s3://")
+        addTask(taskId);
+        setBucketUrl("s3://");
         // Trigger search refresh after successful S3 processing starts
-        window.dispatchEvent(new CustomEvent('knowledgeUpdated'))
+        window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
       } else {
-        console.error("S3 upload failed:", result.error)
+        console.error("S3 upload failed:", result.error);
       }
     } catch (error) {
-      console.error("S3 upload error:", error)
+      console.error("S3 upload error:", error);
     } finally {
-      setS3Loading(false)
+      setS3Loading(false);
+      refetchSearch();
     }
-  }
+  };
 
   const cloudConnectorItems = Object.entries(cloudConnectors)
     .filter(([, info]) => info.available)
@@ -279,72 +348,99 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
       label: info.name,
       icon: PlugZap,
       onClick: () => {
-        setIsOpen(false)
+        setIsOpen(false);
         if (info.connected && info.hasToken) {
-          router.push(`/upload/${type}`)
+          router.push(`/upload/${type}`);
         } else {
-          router.push('/settings')
+          router.push("/settings");
         }
       },
       disabled: !info.connected || !info.hasToken,
-      tooltip: !info.connected ? `Connect ${info.name} in Settings first` : 
-               !info.hasToken ? `Reconnect ${info.name} - access token required` : 
-               undefined
-    }))
+      tooltip: !info.connected
+        ? `Connect ${info.name} in Settings first`
+        : !info.hasToken
+        ? `Reconnect ${info.name} - access token required`
+        : undefined,
+    }));
 
   const menuItems = [
     {
       label: "Add File",
       icon: Upload,
-      onClick: handleFileUpload
+      onClick: handleFileUpload,
     },
     {
-      label: "Process Folder", 
+      label: "Process Folder",
       icon: FolderOpen,
       onClick: () => {
-        setIsOpen(false)
-        setShowFolderDialog(true)
-      }
+        setIsOpen(false);
+        setShowFolderDialog(true);
+      },
     },
-    ...(awsEnabled ? [{
-      label: "Process S3 Bucket",
-      icon: Cloud,
-      onClick: () => {
-        setIsOpen(false)
-        setShowS3Dialog(true)
-      }
-    }] : []),
-    ...cloudConnectorItems
-  ]
+    ...(awsEnabled
+      ? [
+          {
+            label: "Process S3 Bucket",
+            icon: Cloud,
+            onClick: () => {
+              setIsOpen(false);
+              setShowS3Dialog(true);
+            },
+          },
+        ]
+      : []),
+    ...cloudConnectorItems,
+  ];
 
   return (
     <>
       <div ref={dropdownRef} className="relative">
         <button
-          onClick={() => !(fileUploading || folderLoading || s3Loading) && setIsOpen(!isOpen)}
+          onClick={() =>
+            !(fileUploading || folderLoading || s3Loading) && setIsOpen(!isOpen)
+          }
           disabled={fileUploading || folderLoading || s3Loading}
           className={cn(
-            variant === 'button' 
+            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 === "navigation" && active
+              ? "bg-accent text-accent-foreground shadow-sm"
+              : variant === "navigation"
+              ? "text-foreground hover:text-accent-foreground"
+              : "",
           )}
         >
-          {variant === 'button' ? (
+          {variant === "button" ? (
             <>
               <Plus className="h-4 w-4" />
               <span>Add Knowledge</span>
-              <ChevronDown className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")} />
+              <ChevronDown
+                className={cn(
+                  "h-4 w-4 transition-transform",
+                  isOpen && "rotate-180",
+                )}
+              />
             </>
           ) : (
             <>
               <div className="flex items-center flex-1">
-                <Upload className={cn("h-4 w-4 mr-3 shrink-0", active ? "text-accent-foreground" : "text-muted-foreground group-hover:text-foreground")} />
+                <Upload
+                  className={cn(
+                    "h-4 w-4 mr-3 shrink-0",
+                    active
+                      ? "text-accent-foreground"
+                      : "text-muted-foreground group-hover:text-foreground",
+                  )}
+                />
                 Knowledge
               </div>
-              <ChevronDown className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")} />
+              <ChevronDown
+                className={cn(
+                  "h-4 w-4 transition-transform",
+                  isOpen && "rotate-180",
+                )}
+              />
             </>
           )}
         </button>
@@ -356,11 +452,13 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
                 <button
                   key={index}
                   onClick={item.onClick}
-                  disabled={'disabled' in item ? item.disabled : false}
-                  title={'tooltip' in item ? item.tooltip : undefined}
+                  disabled={"disabled" in item ? item.disabled : false}
+                  title={"tooltip" in item ? item.tooltip : undefined}
                   className={cn(
                     "w-full px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground",
-                    'disabled' in item && item.disabled && "opacity-50 cursor-not-allowed hover:bg-transparent hover:text-current"
+                    "disabled" in item &&
+                      item.disabled &&
+                      "opacity-50 cursor-not-allowed hover:bg-transparent hover:text-current",
                   )}
                 >
                   {item.label}
@@ -429,7 +527,8 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
               Process S3 Bucket
             </DialogTitle>
             <DialogDescription>
-              Process all documents from an S3 bucket. AWS credentials must be configured.
+              Process all documents from an S3 bucket. AWS credentials must be
+              configured.
             </DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
@@ -444,10 +543,7 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
               />
             </div>
             <div className="flex justify-end gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setShowS3Dialog(false)}
-              >
+              <Button variant="outline" onClick={() => setShowS3Dialog(false)}>
                 Cancel
               </Button>
               <Button
@@ -460,7 +556,6 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
           </div>
         </DialogContent>
       </Dialog>
-
     </>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/src/app/api/queries/useGetSearchQuery.ts b/frontend/src/app/api/queries/useGetSearchQuery.ts
new file mode 100644
index 00000000..cfe4ed71
--- /dev/null
+++ b/frontend/src/app/api/queries/useGetSearchQuery.ts
@@ -0,0 +1,177 @@
+import {
+  type UseQueryOptions,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import type { ParsedQueryData } from "@/contexts/knowledge-filter-context";
+
+export interface SearchPayload {
+  query: string;
+  limit: number;
+  scoreThreshold: number;
+  filters?: {
+    data_sources?: string[];
+    document_types?: string[];
+    owners?: string[];
+    connector_types?: string[];
+  };
+}
+
+export interface ChunkResult {
+  filename: string;
+  mimetype: string;
+  page: number;
+  text: string;
+  score: number;
+  source_url?: string;
+  owner?: string;
+  owner_name?: string;
+  owner_email?: string;
+  file_size?: number;
+  connector_type?: string;
+}
+
+export interface File {
+  filename: string;
+  mimetype: string;
+  chunkCount: number;
+  avgScore: number;
+  source_url: string;
+  owner: string;
+  owner_name: string;
+  owner_email: string;
+  size: number;
+  connector_type: string;
+  chunks: ChunkResult[];
+}
+
+export const useGetSearchQuery = (
+  query: string,
+  queryData?: ParsedQueryData | null,
+  options?: Omit<UseQueryOptions, "queryKey" | "queryFn">,
+) => {
+  const queryClient = useQueryClient();
+
+  async function getFiles(): Promise<File[]> {
+    try {
+      const searchPayload: SearchPayload = {
+        query: query || queryData?.query || "*",
+        limit: queryData?.limit || (query.trim() === "" ? 10000 : 10), // Maximum allowed limit for wildcard searches
+        scoreThreshold: queryData?.scoreThreshold || 0,
+      };
+      if (queryData?.filters) {
+        const filters = queryData.filters;
+
+        // Only include filters if they're not wildcards (not "*")
+        const hasSpecificFilters =
+          !filters.data_sources.includes("*") ||
+          !filters.document_types.includes("*") ||
+          !filters.owners.includes("*") ||
+          (filters.connector_types && !filters.connector_types.includes("*"));
+
+        if (hasSpecificFilters) {
+          const processedFilters: SearchPayload["filters"] = {};
+
+          // Only add filter arrays that don't contain wildcards
+          if (!filters.data_sources.includes("*")) {
+            processedFilters.data_sources = filters.data_sources;
+          }
+          if (!filters.document_types.includes("*")) {
+            processedFilters.document_types = filters.document_types;
+          }
+          if (!filters.owners.includes("*")) {
+            processedFilters.owners = filters.owners;
+          }
+          if (
+            filters.connector_types &&
+            !filters.connector_types.includes("*")
+          ) {
+            processedFilters.connector_types = filters.connector_types;
+          }
+
+          // Only add filters object if it has any actual filters
+          if (Object.keys(processedFilters).length > 0) {
+            searchPayload.filters = processedFilters;
+          }
+        }
+      }
+
+      const response = await fetch(`/api/search`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(searchPayload),
+      });
+      const data = await response.json();
+      // Group chunks by filename to create file results similar to page.tsx
+      const fileMap = new Map<
+        string,
+        {
+          filename: string;
+          mimetype: string;
+          chunks: ChunkResult[];
+          totalScore: number;
+          source_url?: string;
+          owner?: string;
+          owner_name?: string;
+          owner_email?: string;
+          file_size?: number;
+          connector_type?: string;
+        }
+      >();
+
+      data.results.forEach((chunk: ChunkResult) => {
+        const existing = fileMap.get(chunk.filename);
+        if (existing) {
+          existing.chunks.push(chunk);
+          existing.totalScore += chunk.score;
+        } else {
+          fileMap.set(chunk.filename, {
+            filename: chunk.filename,
+            mimetype: chunk.mimetype,
+            chunks: [chunk],
+            totalScore: chunk.score,
+            source_url: chunk.source_url,
+            owner: chunk.owner,
+            owner_name: chunk.owner_name,
+            owner_email: chunk.owner_email,
+            file_size: chunk.file_size,
+            connector_type: chunk.connector_type,
+          });
+        }
+      });
+
+      const files: File[] = Array.from(fileMap.values()).map((file) => ({
+        filename: file.filename,
+        mimetype: file.mimetype,
+        chunkCount: file.chunks.length,
+        avgScore: file.totalScore / file.chunks.length,
+        source_url: file.source_url || "",
+        owner: file.owner || "",
+        owner_name: file.owner_name || "",
+        owner_email: file.owner_email || "",
+        size: file.file_size || 0,
+        connector_type: file.connector_type || "local",
+        chunks: file.chunks,
+      }));
+
+      return files;
+    } catch (error) {
+      console.error("Error getting files", error);
+      return [];
+    }
+  }
+
+  const queryResult = useQuery(
+    {
+      queryKey: ["search", query],
+      placeholderData: (prev) => prev,
+      queryFn: getFiles,
+      ...options,
+    },
+    queryClient,
+  );
+
+  return queryResult;
+};
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 6a831db6..88b93671 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -1,325 +1,109 @@
-"use client"
+"use client";
 
-import { useState, useEffect, useCallback, useRef } from "react"
-
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Search, Loader2, FileText, HardDrive, Building2, Cloud } from "lucide-react"
-import { TbBrandOnedrive } from "react-icons/tb"
-import { SiGoogledrive } from "react-icons/si"
-import { ProtectedRoute } from "@/components/protected-route"
-import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"
-import { useTask } from "@/contexts/task-context"
-import { KnowledgeDropdown } from "@/components/knowledge-dropdown"
-
-
-interface ChunkResult {
-  filename: string
-  mimetype: string
-  page: number
-  text: string
-  score: number
-  source_url?: string
-  owner?: string
-  owner_name?: string
-  owner_email?: string
-  file_size?: number
-  connector_type?: string
-}
-
-interface FileResult {
-  filename: string
-  mimetype: string
-  chunkCount: number
-  avgScore: number
-  source_url?: string
-  owner?: string
-  owner_name?: string
-  owner_email?: string
-  lastModified?: string
-  size?: number
-  connector_type?: string
-}
-
-interface SearchResponse {
-  results: ChunkResult[]
-  files?: FileResult[]
-  error?: string
-  total?: number
-  aggregations?: {
-    data_sources?: { buckets?: Array<{ key: string | number; doc_count: number }> }
-    document_types?: { buckets?: Array<{ key: string | number; doc_count: number }> }
-    owners?: { buckets?: Array<{ key: string | number; doc_count: number }> }
-    connector_types?: { buckets?: Array<{ key: string | number; doc_count: number }> }
-  }
-}
+import {
+  Building2,
+  Cloud,
+  FileText,
+  HardDrive,
+  Loader2,
+  Search,
+} from "lucide-react";
+import { type FormEvent, useCallback, useEffect, useState } from "react";
+import { SiGoogledrive } from "react-icons/si";
+import { TbBrandOnedrive } from "react-icons/tb";
+import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
+import { ProtectedRoute } from "@/components/protected-route";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
+import { useTask } from "@/contexts/task-context";
+import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
 
 // Function to get the appropriate icon for a connector type
 function getSourceIcon(connectorType?: string) {
   switch (connectorType) {
-    case 'google_drive':
-      return <SiGoogledrive className="h-4 w-4 text-foreground" />
-    case 'onedrive':
-      return <TbBrandOnedrive className="h-4 w-4 text-foreground" />
-    case 'sharepoint':
-      return <Building2 className="h-4 w-4 text-foreground" />
-    case 's3':
-      return <Cloud className="h-4 w-4 text-foreground" />
-    case 'local':
+    case "google_drive":
+      return <SiGoogledrive className="h-4 w-4 text-foreground" />;
+    case "onedrive":
+      return <TbBrandOnedrive className="h-4 w-4 text-foreground" />;
+    case "sharepoint":
+      return <Building2 className="h-4 w-4 text-foreground" />;
+    case "s3":
+      return <Cloud className="h-4 w-4 text-foreground" />;
     default:
-      return <HardDrive className="h-4 w-4 text-muted-foreground" />
+      return <HardDrive className="h-4 w-4 text-muted-foreground" />;
   }
 }
 
 function SearchPage() {
-  const { isMenuOpen } = useTask()
-  const { parsedFilterData, isPanelOpen } = useKnowledgeFilter()
-  const [query, setQuery] = useState("*")
-  const [loading, setLoading] = useState(false)
-  const [chunkResults, setChunkResults] = useState<ChunkResult[]>([])
-  const [fileResults, setFileResults] = useState<FileResult[]>([])
-  const [selectedFile, setSelectedFile] = useState<string | null>(null)
-  const [searchPerformed, setSearchPerformed] = useState(false)
-  const prevFilterDataRef = useRef<string>("")
+  const { isMenuOpen } = useTask();
+  const { parsedFilterData, isPanelOpen } = useKnowledgeFilter();
+  const [query, setQuery] = useState("");
+  const [queryInputText, setQueryInputText] = useState("");
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
 
-  const handleSearch = useCallback(async (e?: React.FormEvent) => {
-    if (e) e.preventDefault()
-    if (!query.trim()) return
-
-    setLoading(true)
-    setSearchPerformed(false)
-
-    try {
-      // Build search payload with global filter data
-      interface SearchPayload {
-        query: string;
-        limit: number;
-        scoreThreshold: number;
-        filters?: {
-          data_sources?: string[];
-          document_types?: string[];
-          owners?: string[];
-          connector_types?: string[];
-        };
-      }
-
-      const searchPayload: SearchPayload = { 
-        query,
-        limit: parsedFilterData?.limit || (query.trim() === "*" ? 10000 : 10),  // Maximum allowed limit for wildcard searches
-        scoreThreshold: parsedFilterData?.scoreThreshold || 0
-      }
-
-      // Debug logging for wildcard searches
-      if (query.trim() === "*") {
-        console.log("Wildcard search - parsedFilterData:", parsedFilterData)
-      }
-
-      // Add filters from global context if available and not wildcards
-      if (parsedFilterData?.filters) {
-        const filters = parsedFilterData.filters
-        
-        // Only include filters if they're not wildcards (not "*")
-        const hasSpecificFilters = 
-          !filters.data_sources.includes("*") ||
-          !filters.document_types.includes("*") ||
-          !filters.owners.includes("*") ||
-          (filters.connector_types && !filters.connector_types.includes("*"))
-
-        if (hasSpecificFilters) {
-          const processedFilters: SearchPayload['filters'] = {}
-          
-          // Only add filter arrays that don't contain wildcards
-          if (!filters.data_sources.includes("*")) {
-            processedFilters.data_sources = filters.data_sources
-          }
-          if (!filters.document_types.includes("*")) {
-            processedFilters.document_types = filters.document_types
-          }
-          if (!filters.owners.includes("*")) {
-            processedFilters.owners = filters.owners
-          }
-          if (filters.connector_types && !filters.connector_types.includes("*")) {
-            processedFilters.connector_types = filters.connector_types
-          }
-
-          // Only add filters object if it has any actual filters
-          if (Object.keys(processedFilters).length > 0) {
-            searchPayload.filters = processedFilters
-          }
-        }
-        // If all filters are wildcards, omit the filters object entirely
-      }
-
-      const response = await fetch("/api/search", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(searchPayload),
-      })
-
-      const result: SearchResponse = await response.json()
-      
-      if (response.ok) {
-        const chunks = result.results || []
-        
-        // Debug logging for wildcard searches
-        if (query.trim() === "*") {
-          console.log("Wildcard search results:", {
-            chunks: chunks.length,
-            totalFromBackend: result.total,
-            searchPayload,
-            firstChunk: chunks[0]
-          })
-        }
-        
-        setChunkResults(chunks)
-        
-        // Group chunks by filename to create file results
-        const fileMap = new Map<string, {
-          filename: string
-          mimetype: string
-          chunks: ChunkResult[]
-          totalScore: number
-          source_url?: string
-          owner?: string
-          owner_name?: string
-          owner_email?: string
-          file_size?: number
-          connector_type?: string
-        }>()
-        
-        chunks.forEach(chunk => {
-          const existing = fileMap.get(chunk.filename)
-          if (existing) {
-            existing.chunks.push(chunk)
-            existing.totalScore += chunk.score
-          } else {
-            fileMap.set(chunk.filename, {
-              filename: chunk.filename,
-              mimetype: chunk.mimetype,
-              chunks: [chunk],
-              totalScore: chunk.score,
-              source_url: chunk.source_url,
-              owner: chunk.owner,
-              owner_name: chunk.owner_name,
-              owner_email: chunk.owner_email,
-              file_size: chunk.file_size,
-              connector_type: chunk.connector_type
-            })
-          }
-        })
-        
-        const files: FileResult[] = Array.from(fileMap.values()).map(file => ({
-          filename: file.filename,
-          mimetype: file.mimetype,
-          chunkCount: file.chunks.length,
-          avgScore: file.totalScore / file.chunks.length,
-          source_url: file.source_url,
-          owner: file.owner,
-          owner_name: file.owner_name,
-          owner_email: file.owner_email,
-          size: file.file_size,
-          connector_type: file.connector_type
-        }))
-        
-        setFileResults(files)
-        setSearchPerformed(true)
-      } else {
-        console.error("Search failed:", result.error)
-        setChunkResults([])
-        setFileResults([])
-        setSearchPerformed(true)
-      }
-    } catch (error) {
-      console.error("Search error:", error)
-      setChunkResults([])
-      setFileResults([])
-      setSearchPerformed(true)
-    } finally {
-      setLoading(false)
-    }
-  }, [query, parsedFilterData])
+  const {
+    data = [],
+    isFetching,
+    refetch: refetchSearch,
+  } = useGetSearchQuery(query, parsedFilterData);
 
   // Update query when global filter changes
   useEffect(() => {
     if (parsedFilterData?.query) {
-      setQuery(parsedFilterData.query)
+      setQueryInputText(parsedFilterData.query);
     }
-  }, [parsedFilterData])
-
-  // Auto-refresh search when filter changes (but only if search was already performed)
-  useEffect(() => {
-    if (!parsedFilterData) return
-    
-    // Create a stable string representation of the filter data for comparison
-    const currentFilterString = JSON.stringify({
-      filters: parsedFilterData.filters,
-      limit: parsedFilterData.limit,
-      scoreThreshold: parsedFilterData.scoreThreshold
-    })
-    
-    // Only trigger search if filter data actually changed and we've done a search before
-    if (prevFilterDataRef.current !== "" && 
-        prevFilterDataRef.current !== currentFilterString && 
-        searchPerformed && 
-        query.trim()) {
-      
-      console.log("Filter changed, auto-refreshing search")
-      handleSearch()
-    }
-    
-    // Update the ref with current filter data
-    prevFilterDataRef.current = currentFilterString
-  }, [parsedFilterData, searchPerformed, query, handleSearch])
-
-  // Auto-search on mount with "*"
-  useEffect(() => {
-    // Only trigger initial search on mount when query is "*"
-    handleSearch()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []) // Only run once on mount - ignore handleSearch dependency
-
-  // Listen for knowledge updates and refresh search
-  useEffect(() => {
-    const handleKnowledgeUpdate = () => {
-      console.log("Knowledge updated, refreshing search")
-      handleSearch()
-    }
-
-    window.addEventListener('knowledgeUpdated', handleKnowledgeUpdate)
-    return () => window.removeEventListener('knowledgeUpdated', handleKnowledgeUpdate)
-  }, [handleSearch])
-
+  }, [parsedFilterData]);
 
+  const handleSearch = useCallback(
+    (e?: FormEvent<HTMLFormElement>) => {
+      if (e) e.preventDefault();
+      if (query.trim() === queryInputText.trim()) {
+        refetchSearch();
+        return;
+      }
+      setQuery(queryInputText);
+    },
+    [queryInputText, refetchSearch, query],
+  );
 
+  const fileResults = data as File[];
 
   return (
-    <div className={`fixed inset-0 md:left-72 top-[53px] 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
-    }`}>
+    <div
+      className={`fixed inset-0 md:left-72 top-[53px] 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
+      }`}
+    >
       <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
         {/* Search Input Area */}
         <div className="flex-shrink-0 mb-6">
           <form onSubmit={handleSearch} className="flex gap-3">
             <Input
+              name="search-query"
               id="search-query"
               type="text"
+              defaultValue={parsedFilterData?.query}
+              value={queryInputText}
+              onChange={(e) => setQueryInputText(e.target.value)}
               placeholder="Search your documents..."
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
               className="flex-1 bg-muted/20 rounded-lg border border-border/50 px-4 py-3 h-12 focus-visible:ring-1 focus-visible:ring-ring"
             />
             <Button
               type="submit"
-              disabled={!query.trim() || loading}
               variant="secondary"
               className="rounded-lg h-12 w-12 p-0 flex-shrink-0"
             >
-              {loading ? (
+              {isFetching ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
               ) : (
                 <Search className="h-4 w-4" />
@@ -334,48 +118,59 @@ function SearchPage() {
         {/* Results Area */}
         <div className="flex-1 overflow-y-auto">
           <div className="space-y-4">
-            {fileResults.length === 0 && chunkResults.length === 0 && !loading ? (
+            {fileResults.length === 0 && !isFetching ? (
               <div className="text-center py-12">
                 <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
-                <p className="text-lg text-muted-foreground">No documents found</p>
+                <p className="text-lg text-muted-foreground">
+                  No documents found
+                </p>
                 <p className="text-sm text-muted-foreground/70 mt-2">
                   Try adjusting your search terms
                 </p>
               </div>
             ) : (
-              <>
+              <div className="space-y-4">
                 {/* Results Count */}
                 <div className="mb-4">
                   <div className="text-sm text-muted-foreground">
-                    {fileResults.length} file{fileResults.length !== 1 ? 's' : ''} found
+                    {fileResults.length} file
+                    {fileResults.length !== 1 ? "s" : ""} found
                   </div>
                 </div>
 
                 {/* Results Display */}
-                <div className="space-y-4">
+                <div
+                  className={isFetching ? "opacity-50 pointer-events-none" : ""}
+                >
                   {selectedFile ? (
-                      // Show chunks for selected file
-                      <>
-                        <div className="flex items-center gap-2 mb-4">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => setSelectedFile(null)}
+                    // Show chunks for selected file
+                    <>
+                      <div className="flex items-center gap-2 mb-4">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setSelectedFile(null)}
+                        >
+                          ← Back to files
+                        </Button>
+                        <span className="text-sm text-muted-foreground">
+                          Chunks from {selectedFile}
+                        </span>
+                      </div>
+                      {fileResults
+                        .filter((file) => file.filename === selectedFile)
+                        .flatMap((file) => file.chunks)
+                        .map((chunk, index) => (
+                          <div
+                            key={chunk.filename + index}
+                            className="bg-muted/20 rounded-lg p-4 border border-border/50"
                           >
-                            ← Back to files
-                          </Button>
-                          <span className="text-sm text-muted-foreground">
-                            Chunks from {selectedFile}
-                          </span>
-                        </div>
-                        {chunkResults
-                          .filter(chunk => chunk.filename === selectedFile)
-                          .map((chunk, index) => (
-                          <div key={index} className="bg-muted/20 rounded-lg p-4 border border-border/50">
                             <div className="flex items-center justify-between mb-2">
                               <div className="flex items-center gap-2">
                                 <FileText className="h-4 w-4 text-blue-400" />
-                                <span className="font-medium truncate">{chunk.filename}</span>
+                                <span className="font-medium truncate">
+                                  {chunk.filename}
+                                </span>
                               </div>
                               <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
                                 {chunk.score.toFixed(2)}
@@ -389,67 +184,87 @@ function SearchPage() {
                             </p>
                           </div>
                         ))}
-                      </>
-                    ) : (
-                      // Show files table
-                      <div className="bg-muted/20 rounded-lg border border-border/50 overflow-hidden">
-                        <table className="w-full">
-                          <thead>
-                            <tr className="border-b border-border/50 bg-muted/10">
-                              <th className="text-left p-3 text-sm font-medium text-muted-foreground">Source</th>
-                              <th className="text-left p-3 text-sm font-medium text-muted-foreground">Type</th>
-                              <th className="text-left p-3 text-sm font-medium text-muted-foreground">Size</th>
-                              <th className="text-left p-3 text-sm font-medium text-muted-foreground">Matching chunks</th>
-                              <th className="text-left p-3 text-sm font-medium text-muted-foreground">Average score</th>
-                              <th className="text-left p-3 text-sm font-medium text-muted-foreground">Owner</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {fileResults.map((file, index) => (
-                              <tr
-                                key={index}
-                                className="border-b border-border/30 hover:bg-muted/20 cursor-pointer transition-colors"
-                                onClick={() => setSelectedFile(file.filename)}
-                              >
-                                <td className="p-3">
-                                  <div className="flex items-center gap-2">
-                                    {getSourceIcon(file.connector_type)}
-                                    <span className="font-medium truncate" title={file.filename}>
-                                      {file.filename}
-                                    </span>
-                                  </div>
-                                </td>
-                                <td className="p-3 text-sm text-muted-foreground">
-                                  {file.mimetype}
-                                </td>
-                                <td className="p-3 text-sm text-muted-foreground">
-                                  {file.size ? `${Math.round(file.size / 1024)} KB` : '—'}
-                                </td>
-                                <td className="p-3 text-sm text-muted-foreground">
-                                  {file.chunkCount}
-                                </td>
-                                <td className="p-3">
-                                  <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
-                                    {file.avgScore.toFixed(2)}
+                    </>
+                  ) : (
+                    // Show files table
+                    <div className="bg-muted/20 rounded-lg border border-border/50 overflow-hidden">
+                      <table className="w-full">
+                        <thead>
+                          <tr className="border-b border-border/50 bg-muted/10">
+                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
+                              Source
+                            </th>
+                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
+                              Type
+                            </th>
+                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
+                              Size
+                            </th>
+                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
+                              Matching chunks
+                            </th>
+                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
+                              Average score
+                            </th>
+                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
+                              Owner
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {fileResults.map((file) => (
+                            <tr
+                              key={file.filename}
+                              className="border-b border-border/30 hover:bg-muted/20 cursor-pointer transition-colors"
+                              onClick={() => setSelectedFile(file.filename)}
+                            >
+                              <td className="p-3">
+                                <div className="flex items-center gap-2">
+                                  {getSourceIcon(file.connector_type)}
+                                  <span
+                                    className="font-medium truncate"
+                                    title={file.filename}
+                                  >
+                                    {file.filename}
                                   </span>
-                                </td>
-                                <td className="p-3 text-sm text-muted-foreground" title={file.owner_email}>
-                                  {file.owner_name || file.owner || '—'}
-                                </td>
-                              </tr>
-                            ))}
-                          </tbody>
-                        </table>
-                      </div>
-                    )}
+                                </div>
+                              </td>
+                              <td className="p-3 text-sm text-muted-foreground">
+                                {file.mimetype}
+                              </td>
+                              <td className="p-3 text-sm text-muted-foreground">
+                                {file.size
+                                  ? `${Math.round(file.size / 1024)} KB`
+                                  : "—"}
+                              </td>
+                              <td className="p-3 text-sm text-muted-foreground">
+                                {file.chunkCount}
+                              </td>
+                              <td className="p-3">
+                                <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
+                                  {file.avgScore.toFixed(2)}
+                                </span>
+                              </td>
+                              <td
+                                className="p-3 text-sm text-muted-foreground"
+                                title={file.owner_email}
+                              >
+                                {file.owner_name || file.owner || "—"}
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
                 </div>
-              </>
+              </div>
             )}
           </div>
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 export default function ProtectedSearchPage() {
@@ -457,5 +272,5 @@ export default function ProtectedSearchPage() {
     <ProtectedRoute>
       <SearchPage />
     </ProtectedRoute>
-  )
+  );
 }
diff --git a/frontend/src/contexts/knowledge-filter-context.tsx b/frontend/src/contexts/knowledge-filter-context.tsx
index 66e8d44b..c08cb543 100644
--- a/frontend/src/contexts/knowledge-filter-context.tsx
+++ b/frontend/src/contexts/knowledge-filter-context.tsx
@@ -1,95 +1,107 @@
-"use client"
+"use client";
 
-import React, { createContext, useContext, useState, ReactNode } from 'react'
+import React, {
+  createContext,
+  type ReactNode,
+  useContext,
+  useState,
+} from "react";
 
 interface KnowledgeFilter {
-  id: string
-  name: string
-  description: string
-  query_data: string
-  owner: string
-  created_at: string
-  updated_at: string
+  id: string;
+  name: string;
+  description: string;
+  query_data: string;
+  owner: string;
+  created_at: string;
+  updated_at: string;
 }
 
-interface ParsedQueryData {
-  query: string
+export interface ParsedQueryData {
+  query: string;
   filters: {
-    data_sources: string[]
-    document_types: string[]
-    owners: string[]
-    connector_types: string[]
-  }
-  limit: number
-  scoreThreshold: number
+    data_sources: string[];
+    document_types: string[];
+    owners: string[];
+    connector_types: string[];
+  };
+  limit: number;
+  scoreThreshold: number;
 }
 
 interface KnowledgeFilterContextType {
-  selectedFilter: KnowledgeFilter | null
-  parsedFilterData: ParsedQueryData | null
-  setSelectedFilter: (filter: KnowledgeFilter | null) => void
-  clearFilter: () => void
-  isPanelOpen: boolean
-  openPanel: () => void
-  closePanel: () => void
-  closePanelOnly: () => void
+  selectedFilter: KnowledgeFilter | null;
+  parsedFilterData: ParsedQueryData | null;
+  setSelectedFilter: (filter: KnowledgeFilter | null) => void;
+  clearFilter: () => void;
+  isPanelOpen: boolean;
+  openPanel: () => void;
+  closePanel: () => void;
+  closePanelOnly: () => void;
 }
 
-const KnowledgeFilterContext = createContext<KnowledgeFilterContextType | undefined>(undefined)
+const KnowledgeFilterContext = createContext<
+  KnowledgeFilterContextType | undefined
+>(undefined);
 
 export function useKnowledgeFilter() {
-  const context = useContext(KnowledgeFilterContext)
+  const context = useContext(KnowledgeFilterContext);
   if (context === undefined) {
-    throw new Error('useKnowledgeFilter must be used within a KnowledgeFilterProvider')
+    throw new Error(
+      "useKnowledgeFilter must be used within a KnowledgeFilterProvider",
+    );
   }
-  return context
+  return context;
 }
 
 interface KnowledgeFilterProviderProps {
-  children: ReactNode
+  children: ReactNode;
 }
 
-export function KnowledgeFilterProvider({ children }: KnowledgeFilterProviderProps) {
-  const [selectedFilter, setSelectedFilterState] = useState<KnowledgeFilter | null>(null)
-  const [parsedFilterData, setParsedFilterData] = useState<ParsedQueryData | null>(null)
-  const [isPanelOpen, setIsPanelOpen] = useState(false)
+export function KnowledgeFilterProvider({
+  children,
+}: KnowledgeFilterProviderProps) {
+  const [selectedFilter, setSelectedFilterState] =
+    useState<KnowledgeFilter | null>(null);
+  const [parsedFilterData, setParsedFilterData] =
+    useState<ParsedQueryData | null>(null);
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
 
   const setSelectedFilter = (filter: KnowledgeFilter | null) => {
-    setSelectedFilterState(filter)
-    
+    setSelectedFilterState(filter);
+
     if (filter) {
       try {
-        const parsed = JSON.parse(filter.query_data) as ParsedQueryData
-        setParsedFilterData(parsed)
-        
+        const parsed = JSON.parse(filter.query_data) as ParsedQueryData;
+        setParsedFilterData(parsed);
+
         // Auto-open panel when filter is selected
-        setIsPanelOpen(true)
+        setIsPanelOpen(true);
       } catch (error) {
-        console.error('Error parsing filter data:', error)
-        setParsedFilterData(null)
+        console.error("Error parsing filter data:", error);
+        setParsedFilterData(null);
       }
     } else {
-      setParsedFilterData(null)
-      setIsPanelOpen(false)
+      setParsedFilterData(null);
+      setIsPanelOpen(false);
     }
-  }
+  };
 
   const clearFilter = () => {
-    setSelectedFilter(null)
-  }
+    setSelectedFilter(null);
+  };
 
   const openPanel = () => {
-    setIsPanelOpen(true)
-  }
+    setIsPanelOpen(true);
+  };
 
   const closePanel = () => {
-    setSelectedFilter(null) // This will also close the panel
-  }
+    setSelectedFilter(null); // This will also close the panel
+  };
 
   const closePanelOnly = () => {
-    setIsPanelOpen(false) // Close panel but keep filter selected
-  }
-
+    setIsPanelOpen(false); // Close panel but keep filter selected
+  };
 
   const value: KnowledgeFilterContextType = {
     selectedFilter,
@@ -100,11 +112,11 @@ export function KnowledgeFilterProvider({ children }: KnowledgeFilterProviderPro
     openPanel,
     closePanel,
     closePanelOnly,
-  }
+  };
 
   return (
     <KnowledgeFilterContext.Provider value={value}>
       {children}
     </KnowledgeFilterContext.Provider>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/src/contexts/task-context.tsx b/frontend/src/contexts/task-context.tsx
index c132f39b..f84b0f95 100644
--- a/frontend/src/contexts/task-context.tsx
+++ b/frontend/src/contexts/task-context.tsx
@@ -1,62 +1,88 @@
-"use client"
+"use client";
 
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react'
-import { toast } from 'sonner'
-import { useAuth } from '@/contexts/auth-context'
+import { useQueryClient } from "@tanstack/react-query";
+import type React from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { toast } from "sonner";
+import { useAuth } from "@/contexts/auth-context";
 
 export interface Task {
-  task_id: string
-  status: 'pending' | 'running' | 'processing' | 'completed' | 'failed' | 'error'
-  total_files?: number
-  processed_files?: number
-  successful_files?: number
-  failed_files?: number
-  created_at: string
-  updated_at: string
-  duration_seconds?: number
-  result?: Record<string, unknown>
-  error?: string
-  files?: Record<string, Record<string, unknown>>
+  task_id: string;
+  status:
+    | "pending"
+    | "running"
+    | "processing"
+    | "completed"
+    | "failed"
+    | "error";
+  total_files?: number;
+  processed_files?: number;
+  successful_files?: number;
+  failed_files?: number;
+  created_at: string;
+  updated_at: string;
+  duration_seconds?: number;
+  result?: Record<string, unknown>;
+  error?: string;
+  files?: Record<string, Record<string, unknown>>;
 }
 
 interface TaskContextType {
-  tasks: Task[]
-  addTask: (taskId: string) => void
-  removeTask: (taskId: string) => void
-  refreshTasks: () => Promise<void>
-  cancelTask: (taskId: string) => Promise<void>
-  isPolling: boolean
-  isFetching: boolean
-  isMenuOpen: boolean
-  toggleMenu: () => void
+  tasks: Task[];
+  addTask: (taskId: string) => void;
+  removeTask: (taskId: string) => void;
+  refreshTasks: () => Promise<void>;
+  cancelTask: (taskId: string) => Promise<void>;
+  isPolling: boolean;
+  isFetching: boolean;
+  isMenuOpen: boolean;
+  toggleMenu: () => void;
 }
 
-const TaskContext = createContext<TaskContextType | undefined>(undefined)
+const TaskContext = createContext<TaskContextType | undefined>(undefined);
 
 export function TaskProvider({ children }: { children: React.ReactNode }) {
-  const [tasks, setTasks] = useState<Task[]>([])
-  const [isPolling, setIsPolling] = useState(false)
-  const [isFetching, setIsFetching] = useState(false)
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const { isAuthenticated, isNoAuthMode } = useAuth()
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [isPolling, setIsPolling] = useState(false);
+  const [isFetching, setIsFetching] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { isAuthenticated, isNoAuthMode } = useAuth();
+
+  const queryClient = useQueryClient();
+
+  const refetchSearch = () => {
+    queryClient.invalidateQueries({ queryKey: ["search"] });
+  };
 
   const fetchTasks = useCallback(async () => {
-    if (!isAuthenticated && !isNoAuthMode) return
+    if (!isAuthenticated && !isNoAuthMode) return;
 
-    setIsFetching(true)
+    setIsFetching(true);
     try {
-      const response = await fetch('/api/tasks')
+      const response = await fetch("/api/tasks");
       if (response.ok) {
-        const data = await response.json()
-        const newTasks = data.tasks || []
-        
+        const data = await response.json();
+        const newTasks = data.tasks || [];
+
         // Update tasks and check for status changes in the same state update
-        setTasks(prevTasks => {
+        setTasks((prevTasks) => {
           // Check for newly completed tasks to show toasts
           if (prevTasks.length > 0) {
             newTasks.forEach((newTask: Task) => {
-              const oldTask = prevTasks.find(t => t.task_id === newTask.task_id)
-              if (oldTask && oldTask.status !== 'completed' && newTask.status === 'completed') {
+              const oldTask = prevTasks.find(
+                (t) => t.task_id === newTask.task_id,
+              );
+              if (
+                oldTask &&
+                oldTask.status !== "completed" &&
+                newTask.status === "completed"
+              ) {
                 // Task just completed - show success toast
                 toast.success("Task completed successfully!", {
                   description: `Task ${newTask.task_id} has finished processing.`,
@@ -64,121 +90,136 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
                     label: "View",
                     onClick: () => console.log("View task", newTask.task_id),
                   },
-                })
-              } else if (oldTask && oldTask.status !== 'failed' && oldTask.status !== 'error' && (newTask.status === 'failed' || newTask.status === 'error')) {
+                });
+                refetchSearch();
+              } else if (
+                oldTask &&
+                oldTask.status !== "failed" &&
+                oldTask.status !== "error" &&
+                (newTask.status === "failed" || newTask.status === "error")
+              ) {
                 // Task just failed - show error toast
                 toast.error("Task failed", {
-                  description: `Task ${newTask.task_id} failed: ${newTask.error || 'Unknown error'}`,
-                })
+                  description: `Task ${newTask.task_id} failed: ${
+                    newTask.error || "Unknown error"
+                  }`,
+                });
               }
-            })
+            });
           }
-          
-          return newTasks
-        })
+
+          return newTasks;
+        });
       }
     } catch (error) {
-      console.error('Failed to fetch tasks:', error)
+      console.error("Failed to fetch tasks:", error);
     } finally {
-      setIsFetching(false)
+      setIsFetching(false);
     }
-  }, [isAuthenticated, isNoAuthMode]) // Removed 'tasks' from dependencies to prevent infinite loop!
+  }, [isAuthenticated, isNoAuthMode]); // Removed 'tasks' from dependencies to prevent infinite loop!
 
   const addTask = useCallback((taskId: string) => {
     // Immediately start aggressive polling for the new task
-    let pollAttempts = 0
-    const maxPollAttempts = 30 // Poll for up to 30 seconds
-    
+    let pollAttempts = 0;
+    const maxPollAttempts = 30; // Poll for up to 30 seconds
+
     const aggressivePoll = async () => {
       try {
-        const response = await fetch('/api/tasks')
+        const response = await fetch("/api/tasks");
         if (response.ok) {
-          const data = await response.json()
-          const newTasks = data.tasks || []
-          const foundTask = newTasks.find((task: Task) => task.task_id === taskId)
-          
+          const data = await response.json();
+          const newTasks = data.tasks || [];
+          const foundTask = newTasks.find(
+            (task: Task) => task.task_id === taskId,
+          );
+
           if (foundTask) {
             // Task found! Update the tasks state
-            setTasks(prevTasks => {
+            setTasks((prevTasks) => {
               // Check if task is already in the list
-              const exists = prevTasks.some(t => t.task_id === taskId)
+              const exists = prevTasks.some((t) => t.task_id === taskId);
               if (!exists) {
-                return [...prevTasks, foundTask]
+                return [...prevTasks, foundTask];
               }
               // Update existing task
-              return prevTasks.map(t => t.task_id === taskId ? foundTask : t)
-            })
-            return // Stop polling, we found it
+              return prevTasks.map((t) =>
+                t.task_id === taskId ? foundTask : t,
+              );
+            });
+            return; // Stop polling, we found it
           }
         }
       } catch (error) {
-        console.error('Aggressive polling failed:', error)
+        console.error("Aggressive polling failed:", error);
       }
-      
-      pollAttempts++
+
+      pollAttempts++;
       if (pollAttempts < maxPollAttempts) {
         // Continue polling every 1 second for new tasks
-        setTimeout(aggressivePoll, 1000)
+        setTimeout(aggressivePoll, 1000);
       }
-    }
-    
+    };
+
     // Start aggressive polling after a short delay to allow backend to process
-    setTimeout(aggressivePoll, 500)
-  }, [])
+    setTimeout(aggressivePoll, 500);
+  }, []);
 
   const refreshTasks = useCallback(async () => {
-    await fetchTasks()
-  }, [fetchTasks])
+    await fetchTasks();
+  }, [fetchTasks]);
 
   const removeTask = useCallback((taskId: string) => {
-    setTasks(prev => prev.filter(task => task.task_id !== taskId))
-  }, [])
+    setTasks((prev) => prev.filter((task) => task.task_id !== taskId));
+  }, []);
 
-  const cancelTask = useCallback(async (taskId: string) => {
-    try {
-      const response = await fetch(`/api/tasks/${taskId}/cancel`, {
-        method: 'POST',
-      })
-      
-      if (response.ok) {
-        // Immediately refresh tasks to show the updated status
-        await fetchTasks()
-        toast.success("Task cancelled", { 
-          description: `Task ${taskId.substring(0, 8)}... has been cancelled` 
-        })
-      } else {
-        const errorData = await response.json().catch(() => ({}))
-        throw new Error(errorData.error || 'Failed to cancel task')
+  const cancelTask = useCallback(
+    async (taskId: string) => {
+      try {
+        const response = await fetch(`/api/tasks/${taskId}/cancel`, {
+          method: "POST",
+        });
+
+        if (response.ok) {
+          // Immediately refresh tasks to show the updated status
+          await fetchTasks();
+          toast.success("Task cancelled", {
+            description: `Task ${taskId.substring(0, 8)}... has been cancelled`,
+          });
+        } else {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.error || "Failed to cancel task");
+        }
+      } catch (error) {
+        console.error("Failed to cancel task:", error);
+        toast.error("Failed to cancel task", {
+          description: error instanceof Error ? error.message : "Unknown error",
+        });
       }
-    } catch (error) {
-      console.error('Failed to cancel task:', error)
-      toast.error("Failed to cancel task", { 
-        description: error instanceof Error ? error.message : 'Unknown error' 
-      })
-    }
-  }, [fetchTasks])
+    },
+    [fetchTasks],
+  );
 
   const toggleMenu = useCallback(() => {
-    setIsMenuOpen(prev => !prev)
-  }, [])
+    setIsMenuOpen((prev) => !prev);
+  }, []);
 
   // Periodic polling for task updates
   useEffect(() => {
-    if (!isAuthenticated && !isNoAuthMode) return
+    if (!isAuthenticated && !isNoAuthMode) return;
+
+    setIsPolling(true);
 
-    setIsPolling(true)
-    
     // Initial fetch
-    fetchTasks()
-    
+    fetchTasks();
+
     // Set up polling interval - every 3 seconds (more responsive for active tasks)
-    const interval = setInterval(fetchTasks, 3000)
-    
+    const interval = setInterval(fetchTasks, 3000);
+
     return () => {
-      clearInterval(interval)
-      setIsPolling(false)
-    }
-  }, [isAuthenticated, isNoAuthMode, fetchTasks])
+      clearInterval(interval);
+      setIsPolling(false);
+    };
+  }, [isAuthenticated, isNoAuthMode, fetchTasks]);
 
   const value: TaskContextType = {
     tasks,
@@ -190,19 +231,15 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
     isFetching,
     isMenuOpen,
     toggleMenu,
-  }
+  };
 
-  return (
-    <TaskContext.Provider value={value}>
-      {children}
-    </TaskContext.Provider>
-  )
+  return <TaskContext.Provider value={value}>{children}</TaskContext.Provider>;
 }
 
 export function useTask() {
-  const context = useContext(TaskContext)
+  const context = useContext(TaskContext);
   if (context === undefined) {
-    throw new Error('useTask must be used within a TaskProvider')
+    throw new Error("useTask must be used within a TaskProvider");
   }
-  return context
-} 
\ No newline at end of file
+  return context;
+}