diff --git a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
index fad7d73cc..c070dde08 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
@@ -95,8 +95,8 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
-import type { CreateLogRequest, UpdateLogRequest } from "@/contracts/types/log.types";
-import { type Log, type LogLevel, type LogStatus, useLogs, useLogsSummary } from "@/hooks/use-logs";
+import type { CreateLogRequest, Log, UpdateLogRequest } from "@/contracts/types/log.types";
+import { type LogLevel, type LogStatus, useLogs, useLogsSummary } from "@/hooks/use-logs";
 import { cn } from "@/lib/utils";
 
 // Define animation variants for reuse
@@ -481,7 +481,7 @@ export default function LogsManagePage() {
 		<LogsContext.Provider
 			value={{
 				deleteLog: deleteLog || (() => Promise.resolve(false)),
-				refreshLogs: refreshLogs || (() => Promise.resolve()),
+				refreshLogs: () => refreshLogs().then(() => void 0),
 			}}
 		>
 			<motion.div
@@ -568,7 +568,7 @@ export default function LogsManagePage() {
 					table={table}
 					logs={logs}
 					loading={logsLoading}
-					error={logsError}
+					error={logsError?.message ?? null}
 					onRefresh={refreshLogs}
 					id={id}
 					t={t}
diff --git a/surfsense_web/contracts/types/log.types.ts b/surfsense_web/contracts/types/log.types.ts
index 81b1ee3a4..b1e95bbf2 100644
--- a/surfsense_web/contracts/types/log.types.ts
+++ b/surfsense_web/contracts/types/log.types.ts
@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { paginationQueryParams } from ".";
 
 /**
  * ENUMS
@@ -54,9 +55,18 @@ export const logFilters = z.object({
 	start_date: z.string().optional(),
 	end_date: z.string().optional(),
 });
-export const getLogsRequest = logFilters.extend({
-	skip: z.number().optional(),
-	limit: z.number().optional(),
+
+export const getLogsRequest = z.object({
+	queryParams: paginationQueryParams
+		.extend({
+			search_space_id: z.number().optional(),
+			level: logLevelEnum.optional(),
+			status: logStatusEnum.optional(),
+			source: z.string().optional(),
+			start_date: z.string().optional(),
+			end_date: z.string().optional(),
+		})
+		.nullish(),
 });
 export const getLogsResponse = z.array(log);
 
diff --git a/surfsense_web/hooks/use-logs.ts b/surfsense_web/hooks/use-logs.ts
index cfd161de0..ae9bbf92b 100644
--- a/surfsense_web/hooks/use-logs.ts
+++ b/surfsense_web/hooks/use-logs.ts
@@ -1,7 +1,10 @@
 "use client";
+import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
+import { logsApiService } from "@/lib/apis/logs-api.service";
 import { authenticatedFetch } from "@/lib/auth-utils";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
 
 export type LogLevel = "DEBUG" | "INFO" | "WARNING" | "ERROR" | "CRITICAL";
 export type LogStatus = "IN_PROGRESS" | "SUCCESS" | "FAILED";
@@ -50,223 +53,69 @@ export interface LogSummary {
 }
 
 export function useLogs(searchSpaceId?: number, filters: LogFilters = {}) {
-	const [logs, setLogs] = useState<Log[]>([]);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
-
 	// Memoize filters to prevent infinite re-renders
 	const memoizedFilters = useMemo(() => filters, [JSON.stringify(filters)]);
 
 	const buildQueryParams = useCallback(
 		(customFilters: LogFilters = {}) => {
-			const params = new URLSearchParams();
+			const params: Record<string, string> = {};
 
 			const allFilters = { ...memoizedFilters, ...customFilters };
 
 			if (allFilters.search_space_id) {
-				params.append("search_space_id", allFilters.search_space_id.toString());
+				params["search_space_id"] = allFilters.search_space_id.toString();
 			}
 			if (allFilters.level) {
-				params.append("level", allFilters.level);
+				params["level"] = allFilters.level;
 			}
 			if (allFilters.status) {
-				params.append("status", allFilters.status);
+				params["status"] = allFilters.status;
 			}
 			if (allFilters.source) {
-				params.append("source", allFilters.source);
+				params["source"] = allFilters.source;
 			}
 			if (allFilters.start_date) {
-				params.append("start_date", allFilters.start_date);
+				params["start_date"] = allFilters.start_date;
 			}
 			if (allFilters.end_date) {
-				params.append("end_date", allFilters.end_date);
+				params["end_date"] = allFilters.end_date;
 			}
 
-			return params.toString();
+			return params;
 		},
 		[memoizedFilters]
 	);
 
-	const fetchLogs = useCallback(
-		async (customFilters: LogFilters = {}, options: { skip?: number; limit?: number } = {}) => {
-			try {
-				setLoading(true);
-
-				const params = new URLSearchParams(buildQueryParams(customFilters));
-				if (options.skip !== undefined) params.append("skip", options.skip.toString());
-				if (options.limit !== undefined) params.append("limit", options.limit.toString());
-
-				const response = await authenticatedFetch(
-					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/logs?${params}`,
-					{ method: "GET" }
-				);
-
-				if (!response.ok) {
-					const errorData = await response.json().catch(() => ({}));
-					throw new Error(errorData.detail || "Failed to fetch logs");
-				}
-
-				const data = await response.json();
-				setLogs(data);
-				setError(null);
-				return data;
-			} catch (err: any) {
-				setError(err.message || "Failed to fetch logs");
-				console.error("Error fetching logs:", err);
-				throw err;
-			} finally {
-				setLoading(false);
-			}
-		},
-		[buildQueryParams]
-	);
-
-	// Initial fetch
-	useEffect(() => {
-		const initialFilters = searchSpaceId
-			? { ...memoizedFilters, search_space_id: searchSpaceId }
-			: memoizedFilters;
-		fetchLogs(initialFilters);
-	}, [searchSpaceId, fetchLogs, memoizedFilters]);
-
-	// Function to refresh the logs list
-	const refreshLogs = useCallback(
-		async (customFilters: LogFilters = {}) => {
-			const finalFilters = searchSpaceId
-				? { ...customFilters, search_space_id: searchSpaceId }
-				: customFilters;
-			return await fetchLogs(finalFilters);
-		},
-		[searchSpaceId, fetchLogs]
-	);
-
-	// Function to create a new log
-	// Use silent: true to suppress toast notifications (for internal/background operations)
-	const createLog = useCallback(
-		async (logData: Omit<Log, "id" | "created_at">, options?: { silent?: boolean }) => {
-			const { silent = false } = options || {};
-			try {
-				const response = await authenticatedFetch(
-					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/logs`,
-					{
-						headers: { "Content-Type": "application/json" },
-						method: "POST",
-						body: JSON.stringify(logData),
-					}
-				);
-
-				if (!response.ok) {
-					const errorData = await response.json().catch(() => ({}));
-					throw new Error(errorData.detail || "Failed to create log");
-				}
-
-				const newLog = await response.json();
-				setLogs((prevLogs) => [newLog, ...prevLogs]);
-				// Only show toast if not silent
-				if (!silent) {
-					toast.success("Log created successfully");
-				}
-				return newLog;
-			} catch (err: any) {
-				// Only show error toast if not silent
-				if (!silent) {
-					toast.error(err.message || "Failed to create log");
-				}
-				console.error("Error creating log:", err);
-				throw err;
-			}
-		},
-		[]
-	);
-
-	// Function to update a log
-	const updateLog = useCallback(
-		async (
-			logId: number,
-			updateData: Partial<Omit<Log, "id" | "created_at" | "search_space_id">>
-		) => {
-			try {
-				const response = await authenticatedFetch(
-					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/logs/${logId}`,
-					{
-						headers: { "Content-Type": "application/json" },
-						method: "PUT",
-						body: JSON.stringify(updateData),
-					}
-				);
-
-				if (!response.ok) {
-					const errorData = await response.json().catch(() => ({}));
-					throw new Error(errorData.detail || "Failed to update log");
-				}
-
-				const updatedLog = await response.json();
-				setLogs((prevLogs) => prevLogs.map((log) => (log.id === logId ? updatedLog : log)));
-				toast.success("Log updated successfully");
-				return updatedLog;
-			} catch (err: any) {
-				toast.error(err.message || "Failed to update log");
-				console.error("Error updating log:", err);
-				throw err;
-			}
-		},
-		[]
-	);
-
-	// Function to delete a log
-	const deleteLog = useCallback(async (logId: number) => {
-		try {
-			const response = await authenticatedFetch(
-				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/logs/${logId}`,
-				{ method: "DELETE" }
-			);
-
-			if (!response.ok) {
-				const errorData = await response.json().catch(() => ({}));
-				throw new Error(errorData.detail || "Failed to delete log");
-			}
-
-			setLogs((prevLogs) => prevLogs.filter((log) => log.id !== logId));
-			toast.success("Log deleted successfully");
-			return true;
-		} catch (err: any) {
-			toast.error(err.message || "Failed to delete log");
-			console.error("Error deleting log:", err);
-			return false;
-		}
-	}, []);
-
-	// Function to get a single log
-	const getLog = useCallback(async (logId: number) => {
-		try {
-			const response = await authenticatedFetch(
-				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/logs/${logId}`,
-				{ method: "GET" }
-			);
-
-			if (!response.ok) {
-				const errorData = await response.json().catch(() => ({}));
-				throw new Error(errorData.detail || "Failed to fetch log");
-			}
-
-			return await response.json();
-		} catch (err: any) {
-			toast.error(err.message || "Failed to fetch log");
-			console.error("Error fetching log:", err);
-			throw err;
-		}
-	}, []);
+	const {
+		data: logs,
+		isLoading: loading,
+		error,
+		refetch,
+	} = useQuery({
+		queryKey: cacheKeys.logs.withQueryParams({
+			search_space_id: searchSpaceId,
+			skip: 0,
+			limit: 5,
+			...buildQueryParams(filters ?? {}),
+		}),
+		queryFn: () =>
+			logsApiService.getLogs({
+				queryParams: {
+					search_space_id: searchSpaceId,
+					skip: 0,
+					limit: 5,
+					...buildQueryParams(filters ?? {}),
+				},
+			}),
+		enabled: !!searchSpaceId,
+		staleTime: 3 * 60 * 1000,
+	});
 
 	return {
-		logs,
+		logs: logs ?? [],
 		loading,
 		error,
-		refreshLogs,
-		createLog,
-		updateLog,
-		deleteLog,
-		getLog,
-		fetchLogs,
+		refreshLogs: refetch,
 	};
 }
 
diff --git a/surfsense_web/lib/query-client/cache-keys.ts b/surfsense_web/lib/query-client/cache-keys.ts
index 74eee19c5..0ba1dc535 100644
--- a/surfsense_web/lib/query-client/cache-keys.ts
+++ b/surfsense_web/lib/query-client/cache-keys.ts
@@ -1,4 +1,5 @@
 import type { GetDocumentsRequest } from "@/contracts/types/document.types";
+import type { GetLogsRequest } from "@/contracts/types/log.types";
 import type { GetSearchSpacesRequest } from "@/contracts/types/search-space.types";
 
 export const cacheKeys = {
@@ -22,6 +23,8 @@ export const cacheKeys = {
 		list: (searchSpaceId?: number | string) => ["logs", "list", searchSpaceId] as const,
 		detail: (logId: number | string) => ["logs", "detail", logId] as const,
 		summary: (searchSpaceId?: number | string) => ["logs", "summary", searchSpaceId] as const,
+		withQueryParams: (queries: GetLogsRequest["queryParams"]) =>
+			["logs", "with-query-params", ...(queries ? Object.values(queries) : [])] as const,
 	},
 	newLLMConfigs: {
 		all: (searchSpaceId: number) => ["new-llm-configs", searchSpaceId] as const,