diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.test.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.test.tsx
index a2da513675..85a38e2697 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.test.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.test.tsx
@@ -172,12 +172,7 @@ describe("LogDetailContent", () => {
   });
 
   it("should display loading state when isLoadingDetails is true", () => {
-    render(
-      <LogDetailContent
-        logEntry={createLogEntry()}
-        isLoadingDetails={true}
-      />,
-    );
+    render(<LogDetailContent logEntry={createLogEntry()} isLoadingDetails={true} />);
 
     expect(screen.getByText("Loading request & response data...")).toBeInTheDocument();
   });
@@ -298,6 +293,37 @@ describe("LogDetailContent", () => {
     expect(screen.getByText("42.50 ms")).toBeInTheDocument();
   });
 
+  it("should not display LiteLLM Overhead when litellm_overhead_time_ms is absent from metadata", () => {
+    render(<LogDetailContent logEntry={createLogEntry({ metadata: { status: "success" } })} />);
+
+    expect(screen.queryByText("LiteLLM Overhead")).not.toBeInTheDocument();
+  });
+
+  const retriesItem = () => screen.getByText("Retries").closest(".ant-descriptions-item") as HTMLElement;
+
+  it("should display attempted_retries / max_retries for Retries when attempted_retries > 0", () => {
+    render(
+      <LogDetailContent
+        logEntry={createLogEntry({ metadata: { status: "success", attempted_retries: 2, max_retries: 3 } })}
+      />,
+    );
+
+    expect(within(retriesItem()).getByText("2 / 3")).toBeInTheDocument();
+  });
+
+  it("should display a green 'None' tag for Retries when attempted_retries is 0", () => {
+    render(<LogDetailContent logEntry={createLogEntry({ metadata: { status: "success", attempted_retries: 0 } })} />);
+
+    const noneTag = within(retriesItem()).getByText("None");
+    expect(noneTag.closest(".ant-tag")).toHaveClass("ant-tag-green");
+  });
+
+  it("should display '-' for Retries when attempted_retries is absent from metadata", () => {
+    render(<LogDetailContent logEntry={createLogEntry({ metadata: { status: "success" } })} />);
+
+    expect(within(retriesItem()).getByText("-")).toBeInTheDocument();
+  });
+
   it("should display start and end time in ISO format", () => {
     render(
       <LogDetailContent
diff --git a/ui/litellm-dashboard/src/components/view_logs/LogsTableToolbar.tsx b/ui/litellm-dashboard/src/components/view_logs/LogsTableToolbar.tsx
new file mode 100644
index 0000000000..81ebea8e7d
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/LogsTableToolbar.tsx
@@ -0,0 +1,243 @@
+import moment from "moment";
+import { useEffect, useRef, useState } from "react";
+import { SyncOutlined } from "@ant-design/icons";
+import { Button, Switch } from "antd";
+import { QUICK_SELECT_OPTIONS } from "./constants";
+import { getTimeRangeDisplay } from "./logs_utils";
+import type { PaginatedResponse } from "./log_filter_logic";
+
+interface LogsTableToolbarProps {
+  searchTerm: string;
+  onSearchChange: (value: string) => void;
+  startTime: string;
+  onStartTimeChange: (value: string) => void;
+  endTime: string;
+  onEndTimeChange: (value: string) => void;
+  isCustomDate: boolean;
+  onIsCustomDateChange: (value: boolean) => void;
+  selectedTimeInterval: { value: number; unit: string };
+  onSelectedTimeIntervalChange: (value: { value: number; unit: string }) => void;
+  isLiveTail: boolean;
+  onIsLiveTailChange: (value: boolean) => void;
+  currentPage: number;
+  onCurrentPageChange: (updater: number | ((prev: number) => number)) => void;
+  pageSize: number;
+  isLoading: boolean;
+  isButtonLoading: boolean;
+  onRefetch: () => void;
+  filteredLogs: PaginatedResponse;
+}
+
+export function LogsTableToolbar({
+  searchTerm,
+  onSearchChange,
+  startTime,
+  onStartTimeChange,
+  endTime,
+  onEndTimeChange,
+  isCustomDate,
+  onIsCustomDateChange,
+  selectedTimeInterval,
+  onSelectedTimeIntervalChange,
+  isLiveTail,
+  onIsLiveTailChange,
+  currentPage,
+  onCurrentPageChange,
+  pageSize,
+  isLoading,
+  isButtonLoading,
+  onRefetch,
+  filteredLogs,
+}: LogsTableToolbarProps) {
+  const [quickSelectOpen, setQuickSelectOpen] = useState(false);
+  const quickSelectRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (quickSelectRef.current && !quickSelectRef.current.contains(event.target as Node)) {
+        setQuickSelectOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const selectedOption = QUICK_SELECT_OPTIONS.find(
+    (option) => option.value === selectedTimeInterval.value && option.unit === selectedTimeInterval.unit,
+  );
+  const displayLabel = isCustomDate ? getTimeRangeDisplay(isCustomDate, startTime, endTime) : selectedOption?.label;
+
+  return (
+    <>
+      <div className="border-b px-6 py-4 w-full max-w-full box-border">
+        <div className="flex flex-col md:flex-row items-start md:items-center justify-between space-y-4 md:space-y-0 w-full max-w-full box-border">
+          <div className="flex flex-wrap items-center gap-3 w-full max-w-full box-border">
+            <div className="relative w-64 min-w-0 flex-shrink-0">
+              <input
+                type="text"
+                placeholder="Search by Request ID"
+                className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                value={searchTerm}
+                onChange={(e) => onSearchChange(e.target.value)}
+              />
+              <svg
+                className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+              </svg>
+            </div>
+
+            <div className="flex items-center gap-2 min-w-0 flex-shrink">
+              <div className="relative z-50" ref={quickSelectRef}>
+                <button
+                  onClick={() => setQuickSelectOpen(!quickSelectOpen)}
+                  className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                    />
+                  </svg>
+                  {displayLabel}
+                </button>
+
+                {quickSelectOpen && (
+                  <div className="absolute left-0 mt-2 w-64 bg-white rounded-lg shadow-lg border p-2 z-50">
+                    <div className="space-y-1">
+                      {QUICK_SELECT_OPTIONS.map((option) => (
+                        <button
+                          key={option.label}
+                          className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 rounded-md ${displayLabel === option.label ? "bg-blue-50 text-blue-600" : ""}`}
+                          onClick={() => {
+                            onCurrentPageChange(1);
+                            onEndTimeChange(moment().format("YYYY-MM-DDTHH:mm"));
+                            onStartTimeChange(
+                              moment()
+                                .subtract(option.value, option.unit as any)
+                                .format("YYYY-MM-DDTHH:mm"),
+                            );
+                            onSelectedTimeIntervalChange({ value: option.value, unit: option.unit });
+                            onIsCustomDateChange(false);
+                            setQuickSelectOpen(false);
+                          }}
+                        >
+                          {option.label}
+                        </button>
+                      ))}
+                      <div className="border-t my-2" />
+                      <button
+                        className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 rounded-md ${isCustomDate ? "bg-blue-50 text-blue-600" : ""}`}
+                        onClick={() => onIsCustomDateChange(!isCustomDate)}
+                      >
+                        Custom Range
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-gray-900">Live Tail</span>
+                <Switch checked={isLiveTail} defaultChecked={true} onChange={onIsLiveTailChange} />
+              </div>
+
+              <Button
+                type="default"
+                icon={<SyncOutlined spin={isButtonLoading} />}
+                onClick={onRefetch}
+                disabled={isButtonLoading}
+                title="Fetch data"
+              >
+                {isButtonLoading ? "Fetching" : "Fetch"}
+              </Button>
+            </div>
+
+            {isCustomDate && (
+              <div className="flex items-center gap-2">
+                <div>
+                  <input
+                    type="datetime-local"
+                    value={startTime}
+                    onChange={(e) => {
+                      onStartTimeChange(e.target.value);
+                      onCurrentPageChange(1);
+                    }}
+                    className="px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+                <span className="text-gray-500">to</span>
+                <div>
+                  <input
+                    type="datetime-local"
+                    value={endTime}
+                    onChange={(e) => {
+                      onEndTimeChange(e.target.value);
+                      onCurrentPageChange(1);
+                    }}
+                    className="px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-center space-x-4">
+            <span className="text-sm text-gray-700 whitespace-nowrap">
+              Showing {isLoading ? "..." : filteredLogs ? (currentPage - 1) * pageSize + 1 : 0} -{" "}
+              {isLoading
+                ? "..."
+                : filteredLogs
+                  ? Math.min(currentPage * pageSize, filteredLogs.total)
+                  : 0}{" "}
+              of {isLoading ? "..." : filteredLogs ? filteredLogs.total : 0} results
+            </span>
+            <div className="flex items-center space-x-2">
+              <span className="text-sm text-gray-700 min-w-[90px]">
+                Page {isLoading ? "..." : currentPage} of{" "}
+                {isLoading ? "..." : filteredLogs ? filteredLogs.total_pages : 1}
+              </span>
+              <button
+                onClick={() => onCurrentPageChange((p: number) => Math.max(1, p - 1))}
+                disabled={isLoading || currentPage === 1}
+                className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Previous
+              </button>
+              <button
+                onClick={() => onCurrentPageChange((p: number) => Math.min(filteredLogs.total_pages || 1, p + 1))}
+                disabled={isLoading || currentPage === (filteredLogs.total_pages || 1)}
+                className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      {isLiveTail && currentPage === 1 && (
+        <div className="mb-4 px-4 py-2 bg-green-50 border border-green-200 rounded-md flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-green-700">Auto-refreshing every 15 seconds</span>
+          </div>
+          <button
+            onClick={() => onIsLiveTailChange(false)}
+            className="text-sm text-green-600 hover:text-green-800"
+          >
+            Stop
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/ui/litellm-dashboard/src/components/view_logs/filter_options.ts b/ui/litellm-dashboard/src/components/view_logs/filter_options.ts
new file mode 100644
index 0000000000..59ac58b674
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/filter_options.ts
@@ -0,0 +1,77 @@
+import FilterTeamDropdown from "../common_components/FilterTeamDropdown";
+import { PaginatedKeyAliasSelect } from "../KeyAliasSelect/PaginatedKeyAliasSelect/PaginatedKeyAliasSelect";
+import { PaginatedModelSelect } from "../ModelSelect/PaginatedModelSelect/PaginatedModelSelect";
+import { FilterOption } from "../molecules/filter";
+import { allEndUsersCall } from "../networking";
+import { ERROR_CODE_OPTIONS } from "./constants";
+import { FILTER_KEYS } from "./log_filter_logic";
+
+export function getLogFilterOptions(accessToken: string): FilterOption[] {
+  return [
+    {
+      name: "Team ID",
+      label: "Team ID",
+      customComponent: FilterTeamDropdown,
+    },
+    {
+      name: "Status",
+      label: "Status",
+      isSearchable: false,
+      options: [
+        { label: "Success", value: "success" },
+        { label: "Failure", value: "failure" },
+      ],
+    },
+    {
+      name: "Model",
+      label: "Model",
+      customComponent: PaginatedModelSelect,
+    },
+    {
+      name: FILTER_KEYS.PUBLIC_MODEL_OR_SEARCH_TOOL,
+      label: "Public model / search tool",
+      isSearchable: false,
+    },
+    {
+      name: "Key Alias",
+      label: "Key Alias",
+      customComponent: PaginatedKeyAliasSelect,
+    },
+    {
+      name: "End User",
+      label: "End User",
+      isSearchable: true,
+      searchFn: async (searchText: string) => {
+        const data = await allEndUsersCall(accessToken);
+        const users = data?.map((u: any) => u.user_id) || [];
+        const filtered = users.filter((u: string) => u.toLowerCase().includes(searchText.toLowerCase()));
+        return filtered.map((u: string) => ({ label: u, value: u }));
+      },
+    },
+    {
+      name: "Error Code",
+      label: "Error Code",
+      isSearchable: true,
+      searchFn: async (searchText: string) => {
+        if (!searchText) return ERROR_CODE_OPTIONS;
+        const lower = searchText.toLowerCase();
+        const filtered = ERROR_CODE_OPTIONS.filter((opt) => opt.label.toLowerCase().includes(lower));
+        const isExactValue = ERROR_CODE_OPTIONS.some((opt) => opt.value === searchText.trim());
+        if (!isExactValue && searchText.trim()) {
+          filtered.push({ label: `Use custom code: ${searchText.trim()}`, value: searchText.trim() });
+        }
+        return filtered;
+      },
+    },
+    {
+      name: "Key Hash",
+      label: "Key Hash",
+      isSearchable: false,
+    },
+    {
+      name: "Error Message",
+      label: "Error Message",
+      isSearchable: false,
+    },
+  ];
+}
diff --git a/ui/litellm-dashboard/src/components/view_logs/index.test.tsx b/ui/litellm-dashboard/src/components/view_logs/index.test.tsx
index 7a9a541d3e..aed194a297 100644
--- a/ui/litellm-dashboard/src/components/view_logs/index.test.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/index.test.tsx
@@ -1,12 +1,8 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import moment from "moment";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import SpendLogsTable, { RequestViewer } from "./index";
-import type { LogEntry } from "./columns";
-import type { Row } from "@tanstack/react-table";
+import SpendLogsTable from "./index";
 import { renderWithProviders } from "../../../tests/test-utils";
-import { uiSpendLogsCall } from "../networking";
 
 const mockHandleFilterResetFromHook = vi.fn();
 vi.mock("./log_filter_logic", async (importOriginal) => {
@@ -14,14 +10,8 @@ vi.mock("./log_filter_logic", async (importOriginal) => {
   return {
     ...actual,
     useLogFilterLogic: vi.fn(() => ({
-      filters: {},
-      filteredLogs: {
-        data: [],
-        total: 0,
-        page: 1,
-        page_size: 50,
-        total_pages: 1,
-      },
+      logsQuery: { isLoading: false, isFetching: false, refetch: vi.fn() },
+      filteredLogs: { data: [], total: 0, page: 1, page_size: 50, total_pages: 1 },
       allTeams: [],
       handleFilterChange: vi.fn(),
       handleFilterReset: mockHandleFilterResetFromHook,
@@ -50,139 +40,6 @@ vi.mock("../key_team_helpers/filter_helpers", () => ({
   fetchAllTeams: vi.fn().mockResolvedValue([]),
 }));
 
-const baseLogEntry: LogEntry = {
-  request_id: "chatcmpl-test-id",
-  api_key: "api-key",
-  team_id: "team-id",
-  model: "gpt-4",
-  model_id: "gpt-4",
-  call_type: "chat",
-  spend: 0,
-  total_tokens: 0,
-  prompt_tokens: 0,
-  completion_tokens: 0,
-  startTime: "2025-11-14T00:00:00Z",
-  endTime: "2025-11-14T00:00:00Z",
-  cache_hit: "miss",
-  request_duration_ms: 1000,
-  messages: [{ role: "user", content: "hello" }],
-  response: { status: "ok" },
-  metadata: {
-    status: "success",
-    additional_usage_values: {
-      cache_read_input_tokens: 0,
-      cache_creation_input_tokens: 0,
-    },
-  },
-  request_tags: {},
-  custom_llm_provider: "openai",
-  api_base: "https://api.example.com",
-};
-
-const createRow = (overrides: Partial<LogEntry> = {}): Row<LogEntry> =>
-  ({
-    original: {
-      ...baseLogEntry,
-      ...overrides,
-    },
-  }) as unknown as Row<LogEntry>;
-
-describe("Request Viewer", () => {
-  it("renders the request details heading", () => {
-    render(<RequestViewer row={createRow()} />);
-    expect(screen.getByText("Request Details")).toBeInTheDocument();
-  });
-
-  it("should truncate the request id if it is longer than 64 characters", () => {
-    const LONG_REQUEST_ID = "a".repeat(128);
-    const TRUNCATED_REQUEST_ID = `${"a".repeat(64)}...`;
-    render(
-      <RequestViewer
-        row={createRow({
-          request_id: LONG_REQUEST_ID,
-        })}
-      />,
-    );
-
-    expect(screen.getByText(TRUNCATED_REQUEST_ID)).toBeInTheDocument();
-  });
-
-  it("should display LiteLLM Overhead when litellm_overhead_time_ms is present in metadata", () => {
-    render(
-      <RequestViewer
-        row={createRow({
-          metadata: {
-            status: "success",
-            litellm_overhead_time_ms: 150,
-            additional_usage_values: {
-              cache_read_input_tokens: 0,
-              cache_creation_input_tokens: 0,
-            },
-          },
-        })}
-      />,
-    );
-
-    expect(screen.getByText("LiteLLM Overhead:")).toBeInTheDocument();
-    expect(screen.getByText("150 ms")).toBeInTheDocument();
-  });
-
-  it("should not display LiteLLM Overhead when litellm_overhead_time_ms is not present in metadata", () => {
-    render(<RequestViewer row={createRow()} />);
-
-    expect(screen.queryByText("LiteLLM Overhead:")).not.toBeInTheDocument();
-  });
-
-  it("should display retry count when attempted_retries > 0 in metadata", () => {
-    render(
-      <RequestViewer
-        row={createRow({
-          metadata: {
-            status: "success",
-            attempted_retries: 2,
-            max_retries: 3,
-            additional_usage_values: {
-              cache_read_input_tokens: 0,
-              cache_creation_input_tokens: 0,
-            },
-          },
-        })}
-      />,
-    );
-
-    expect(screen.getByText("Retries:")).toBeInTheDocument();
-    expect(screen.getByText("2 / 3")).toBeInTheDocument();
-  });
-
-  it("should display green 'None' tag when attempted_retries is 0", () => {
-    render(
-      <RequestViewer
-        row={createRow({
-          metadata: {
-            status: "success",
-            attempted_retries: 0,
-            max_retries: 3,
-            additional_usage_values: {
-              cache_read_input_tokens: 0,
-              cache_creation_input_tokens: 0,
-            },
-          },
-        })}
-      />,
-    );
-
-    expect(screen.getByText("Retries:")).toBeInTheDocument();
-    expect(screen.getByText("None")).toBeInTheDocument();
-  });
-
-  it("should display '-' for Retries when attempted_retries is not present in metadata", () => {
-    render(<RequestViewer row={createRow()} />);
-
-    expect(screen.getByText("Retries:")).toBeInTheDocument();
-    expect(screen.getByText("-")).toBeInTheDocument();
-  });
-});
-
 describe("SpendLogsTable", () => {
   const defaultProps = {
     accessToken: "test-token",
@@ -215,7 +72,9 @@ describe("SpendLogsTable", () => {
     renderWithProviders(<SpendLogsTable {...defaultProps} />);
 
     // Open the time range quick select dropdown (button shows current range like "Last 24 Hours")
-    const quickSelectButton = screen.getByRole("button", { name: /Last 24 Hours|Last 15 Minutes|Last Hour|Last 4 Hours|Last 7 Days/i });
+    const quickSelectButton = screen.getByRole("button", {
+      name: /Last 24 Hours|Last 15 Minutes|Last Hour|Last 4 Hours|Last 7 Days/i,
+    });
     await user.click(quickSelectButton);
 
     // Click "Custom Range" to enable custom date selection
@@ -241,51 +100,19 @@ describe("SpendLogsTable", () => {
     });
   });
 
-  describe("Quick Select time range", () => {
-    const waitForWindowSeconds = async (minMinutes: number) => {
-      let diff = -1;
-      await waitFor(() => {
-        const lastCall = vi.mocked(uiSpendLogsCall).mock.calls.at(-1)?.[0];
-        if (!lastCall) throw new Error("uiSpendLogsCall was not called");
-        diff = moment
-          .utc(lastCall.end_date, "YYYY-MM-DD HH:mm:ss")
-          .diff(moment.utc(lastCall.start_date, "YYYY-MM-DD HH:mm:ss"), "seconds");
-        // start_date is rounded down to the minute boundary; end_date is current time
-        expect(diff).toBeGreaterThanOrEqual(minMinutes * 60);
-        expect(diff).toBeLessThan((minMinutes + 1) * 60);
-      });
-      return diff;
-    };
+  describe("auth-not-ready guard", () => {
+    it("shows a loading spinner when credentials are not yet resolved", () => {
+      renderWithProviders(<SpendLogsTable {...defaultProps} accessToken={null} />);
 
-    it("should pass a ~1-minute window to uiSpendLogsCall when 'Last Minute' is selected", async () => {
-      const user = userEvent.setup();
-      renderWithProviders(<SpendLogsTable {...defaultProps} />);
-
-      await user.click(screen.getByRole("button", { name: /Last 24 Hours/i }));
-      await user.click(await screen.findByRole("button", { name: "Last Minute" }));
-
-      await waitForWindowSeconds(1);
+      expect(document.querySelector(".ant-spin")).toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: "Reset Filters" })).not.toBeInTheDocument();
     });
 
-    it("should pass a ~15-minute window to uiSpendLogsCall when 'Last 15 Minutes' is selected", async () => {
-      const user = userEvent.setup();
+    it("renders the table (no spinner) once all credentials are present", () => {
       renderWithProviders(<SpendLogsTable {...defaultProps} />);
 
-      await user.click(screen.getByRole("button", { name: /Last 24 Hours/i }));
-      await user.click(await screen.findByRole("button", { name: "Last 15 Minutes" }));
-
-      await waitForWindowSeconds(15);
-    });
-
-    it("should update the time-range button label to 'Last Minute' after selecting it", async () => {
-      const user = userEvent.setup();
-      renderWithProviders(<SpendLogsTable {...defaultProps} />);
-
-      await user.click(screen.getByRole("button", { name: /Last 24 Hours/i }));
-      await user.click(await screen.findByRole("button", { name: "Last Minute" }));
-
-      expect(screen.getByRole("button", { name: "Last Minute" })).toBeInTheDocument();
-      expect(screen.queryByRole("button", { name: /Last 24 Hours/i })).not.toBeInTheDocument();
+      expect(document.querySelector(".ant-spin")).not.toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Reset Filters" })).toBeInTheDocument();
     });
   });
 });
diff --git a/ui/litellm-dashboard/src/components/view_logs/index.tsx b/ui/litellm-dashboard/src/components/view_logs/index.tsx
index 2f9e8fe878..03d917cd92 100644
--- a/ui/litellm-dashboard/src/components/view_logs/index.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/index.tsx
@@ -1,35 +1,22 @@
-import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
 import moment from "moment";
-import { useCallback, useDeferredValue, useEffect, useRef, useState } from "react";
-import GuardrailViewer from "@/components/view_logs/GuardrailViewer/GuardrailViewer";
-import { formatNumberWithCommas } from "@/utils/dataUtils";
-import { truncateString } from "@/utils/textUtils";
-import { SyncOutlined } from "@ant-design/icons";
-import { Row } from "@tanstack/react-table";
-import { Switch, Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
-import { Button, Tag, Tooltip } from "antd";
+import { useCallback, useDeferredValue, useEffect, useMemo, useState } from "react";
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
 import { internalUserRoles } from "../../utils/roles";
 import DeletedKeysPage from "../DeletedKeysPage/DeletedKeysPage";
 import DeletedTeamsPage from "../DeletedTeamsPage/DeletedTeamsPage";
-import FilterTeamDropdown from "../common_components/FilterTeamDropdown";
 import { KeyResponse } from "../key_team_helpers/key_list";
-import { PaginatedKeyAliasSelect } from "../KeyAliasSelect/PaginatedKeyAliasSelect/PaginatedKeyAliasSelect";
-import { PaginatedModelSelect } from "../ModelSelect/PaginatedModelSelect/PaginatedModelSelect";
-import FilterComponent, { FilterOption } from "../molecules/filter";
-import { allEndUsersCall, keyInfoV1Call, uiSpendLogsCall } from "../networking";
+import FilterComponent from "../molecules/filter";
+import { keyInfoV1Call } from "../networking";
 import KeyInfoView from "../templates/key_info_view";
 import AuditLogs from "./audit_logs";
 import { createColumns, LogEntry, type LogsSortField } from "./columns";
-import { ConfigInfoMessage } from "./ConfigInfoMessage";
-import { AGENT_CALL_TYPES, ERROR_CODE_OPTIONS, MCP_CALL_TYPES, QUICK_SELECT_OPTIONS } from "./constants";
-import { CostBreakdownViewer } from "./CostBreakdownViewer";
-import { ErrorViewer } from "./ErrorViewer";
-import { FILTER_KEYS, useLogFilterLogic } from "./log_filter_logic";
+import { AGENT_CALL_TYPES, MCP_CALL_TYPES } from "./constants";
+import { getLogFilterOptions } from "./filter_options";
+import { useLogFilterLogic, defaultFilters, type LogFilterState } from "./log_filter_logic";
 import { LogDetailsDrawer } from "./LogDetailsDrawer";
-import { getTimeRangeDisplay } from "./logs_utils";
-import { RequestResponsePanel } from "./RequestResponsePanel";
+import { LogsTableToolbar } from "./LogsTableToolbar";
 import { DataTable } from "./table";
-import { VectorStoreViewer } from "./VectorStoreViewer";
+import { AntDLoadingSpinner } from "../ui/AntDLoadingSpinner";
 
 interface SpendLogsTableProps {
   accessToken: string | null;
@@ -39,45 +26,19 @@ interface SpendLogsTableProps {
   premiumUser: boolean;
 }
 
-export interface PaginatedResponse {
-  data: LogEntry[];
-  total: number;
-  page: number;
-  page_size: number;
-  total_pages: number;
-}
-
-export default function SpendLogsTable({
-  accessToken,
-  token,
-  userRole,
-  userID,
-  premiumUser,
-}: SpendLogsTableProps) {
+export default function SpendLogsTable({ accessToken, token, userRole, userID, premiumUser }: SpendLogsTableProps) {
   const [searchTerm, setSearchTerm] = useState("");
-  const [showFilters, setShowFilters] = useState(false);
-  const [showColumnDropdown, setShowColumnDropdown] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize] = useState(50);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const filtersRef = useRef<HTMLDivElement>(null);
-  const quickSelectRef = useRef<HTMLDivElement>(null);
 
   // New state variables for Start and End Time
   const [startTime, setStartTime] = useState<string>(moment().subtract(24, "hours").format("YYYY-MM-DDTHH:mm"));
   const [endTime, setEndTime] = useState<string>(moment().format("YYYY-MM-DDTHH:mm"));
 
   const [isCustomDate, setIsCustomDate] = useState(false);
-  const [quickSelectOpen, setQuickSelectOpen] = useState(false);
-  const [tempTeamId, setTempTeamId] = useState("");
-  const [tempKeyHash, setTempKeyHash] = useState("");
-  const [selectedTeamId, setSelectedTeamId] = useState("");
-  const [selectedKeyHash, setSelectedKeyHash] = useState("");
-  const [selectedModelId, setSelectedModelId] = useState("");
+  const [filters, setFilters] = useState<LogFilterState>(defaultFilters);
   const [selectedKeyInfo, setSelectedKeyInfo] = useState<KeyResponse | null>(null);
   const [selectedKeyIdInfoView, setSelectedKeyIdInfoView] = useState<string | null>(null);
-  const [selectedStatus, setSelectedStatus] = useState("");
-  const [selectedEndUser, setSelectedEndUser] = useState("");
   const [filterByCurrentUser, setFilterByCurrentUser] = useState(userRole && internalUserRoles.includes(userRole));
   const [activeTab, setActiveTab] = useState("request logs");
 
@@ -88,12 +49,10 @@ export default function SpendLogsTable({
   const [sortBy, setSortBy] = useState<LogsSortField>("startTime");
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
 
-  // Tracks whether any filter that uses performSearch (backend) is active.
-  // Used to disable the main query so it doesn't fire redundant unfiltered requests
-  // when time range / sort / page changes while a backend filter is in effect.
-  const [isMainQueryEnabled, setIsMainQueryEnabled] = useState(true);
-
-  const queryClient = useQueryClient();
+  const [selectedTimeInterval, setSelectedTimeInterval] = useState<{ value: number; unit: string }>({
+    value: 24,
+    unit: "hours",
+  });
 
   const [isLiveTail, setIsLiveTail] = useState<boolean>(() => {
     const storedValue = sessionStorage.getItem("isLiveTail");
@@ -105,11 +64,6 @@ export default function SpendLogsTable({
     sessionStorage.setItem("isLiveTail", JSON.stringify(isLiveTail));
   }, [isLiveTail]);
 
-  const [selectedTimeInterval, setSelectedTimeInterval] = useState<{ value: number; unit: string }>({
-    value: 24,
-    unit: "hours",
-  });
-
   useEffect(() => {
     const fetchKeyInfo = async () => {
       if (selectedKeyIdInfoView && accessToken) {
@@ -126,132 +80,33 @@ export default function SpendLogsTable({
     fetchKeyInfo();
   }, [selectedKeyIdInfoView, accessToken]);
 
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setShowColumnDropdown(false);
-      }
-      if (filtersRef.current && !filtersRef.current.contains(event.target as Node)) {
-        setShowFilters(false);
-      }
-      if (quickSelectRef.current && !quickSelectRef.current.contains(event.target as Node)) {
-        setQuickSelectOpen(false);
-      }
-    }
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
   useEffect(() => {
     if (userRole && internalUserRoles.includes(userRole)) {
       setFilterByCurrentUser(true);
     }
   }, [userRole]);
 
-  const LiveTailControls = () => {
-    return (
-      <div className="flex items-center gap-2">
-        <span className="text-sm font-medium text-gray-900">Live Tail</span>
-        <Switch color="green" checked={isLiveTail} defaultChecked={true} onChange={setIsLiveTail} />
-      </div>
-    );
-  };
-
-  const logs = useQuery<PaginatedResponse>({
-    queryKey: [
-      "logs",
-      "table",
-      currentPage,
-      pageSize,
-      startTime,
-      endTime,
-      selectedTeamId,
-      selectedKeyHash,
-      filterByCurrentUser ? userID : null,
-      selectedStatus,
-      selectedModelId,
-      sortBy,
-      sortOrder,
-    ],
-    queryFn: async () => {
-      if (!accessToken || !token || !userRole || !userID) {
-        return {
-          data: [],
-          total: 0,
-          page: 1,
-          page_size: pageSize,
-          total_pages: 0,
-        };
-      }
-
-      const formattedStartTime = moment(startTime).utc().format("YYYY-MM-DD HH:mm:ss");
-      const formattedEndTime = isCustomDate
-        ? moment(endTime).utc().format("YYYY-MM-DD HH:mm:ss")
-        : moment().utc().format("YYYY-MM-DD HH:mm:ss");
-
-      // Get base response from API
-      // NOTE: We only fetch the list of logs here (lightweight).
-      // Log details (messages/response) are fetched on-demand when user clicks a row.
-      const response = await uiSpendLogsCall({
-        accessToken,
-        start_date: formattedStartTime,
-        end_date: formattedEndTime,
-        page: currentPage,
-        page_size: pageSize,
-        params: {
-          api_key: selectedKeyHash || undefined,
-          team_id: selectedTeamId || undefined,
-          user_id: filterByCurrentUser ? userID ?? undefined : undefined,
-          end_user: selectedEndUser || undefined,
-          status_filter: selectedStatus || undefined,
-          model_id: selectedModelId || undefined,
-          sort_by: sortBy,
-          sort_order: sortOrder,
-        },
-      });
-
-      return response;
-    },
-    enabled: !!accessToken && !!token && !!userRole && !!userID && activeTab === "request logs" && isMainQueryEnabled,
-    refetchInterval: isLiveTail && currentPage === 1 ? 15000 : false,
-    placeholderData: keepPreviousData,
-    refetchIntervalInBackground: true,
-  });
-
-  // Defer the transition from "Fetching" to "Fetch" so the button stays loading until
-  // the table has rendered with the new data (avoids the visual gap where the button
-  // exits loading state before the table updates)
-  const isFetchingDeferred = useDeferredValue(logs.isFetching);
-  const isButtonLoading = logs.isFetching || isFetchingDeferred;
-
-  const logsData = logs.data || {
-    data: [],
-    total: 0,
-    page: 1,
-    page_size: pageSize || 10,
-    total_pages: 1,
-  };
-
   const {
-    filters,
+    logsQuery,
     filteredLogs,
-    hasBackendFilters,
     allTeams,
     handleFilterChange,
     handleFilterReset: handleFilterResetFromHook,
-    refetchWithFilters,
   } = useLogFilterLogic({
-    logs: logsData,
     accessToken,
+    token,
+    userRole,
+    userID,
+    filters,
+    setFilters,
+    filterByCurrentUser: !!filterByCurrentUser,
+    activeTab,
+    isLiveTail,
     startTime,
     endTime,
     pageSize,
     isCustomDate,
     setCurrentPage,
-    userID,
-    userRole,
     sortBy,
     sortOrder,
     currentPage,
@@ -259,7 +114,6 @@ export default function SpendLogsTable({
 
   const handleFilterReset = useCallback(() => {
     handleFilterResetFromHook();
-    // Reset custom time range to default (last 24 hours)
     setStartTime(moment().subtract(24, "hours").format("YYYY-MM-DDTHH:mm"));
     setEndTime(moment().format("YYYY-MM-DDTHH:mm"));
     setIsCustomDate(false);
@@ -267,111 +121,102 @@ export default function SpendLogsTable({
     setCurrentPage(1);
   }, [handleFilterResetFromHook]);
 
-  // Disable the main query whenever backend filters are active so it doesn't fire
-  // redundant unfiltered requests when time range / sort / page changes.
-  useEffect(() => {
-    setIsMainQueryEnabled(!hasBackendFilters);
-  }, [hasBackendFilters]);
+  const handleSortChange = useCallback((newSortBy: LogsSortField, newSortOrder: "asc" | "desc") => {
+    setSortBy(newSortBy);
+    setSortOrder(newSortOrder);
+    setCurrentPage(1);
+  }, []);
 
-  // Sync filter state into the individual selectedX state variables used by the main query
-  useEffect(() => {
-    if (!accessToken) return;
+  const columns = useMemo(
+    () => createColumns({ sortBy, sortOrder, onSortChange: handleSortChange }),
+    [sortBy, sortOrder, handleSortChange],
+  );
 
-    if (filters["Team ID"]) {
-      setSelectedTeamId(filters["Team ID"]);
-    } else {
-      setSelectedTeamId("");
+  const filteredData = useMemo(() => {
+    const searchedLogs = filteredLogs.data.filter((log) => {
+      const matchesSearch =
+        !searchTerm ||
+        log.request_id.includes(searchTerm) ||
+        log.model.includes(searchTerm) ||
+        (log.user && log.user.includes(searchTerm));
+
+      // No need for additional filtering since we're now handling this in the API call
+      return matchesSearch;
+    });
+
+    const sessionCompositionById = searchedLogs.reduce<Record<string, { llm: number; agent: number; mcp: number }>>(
+      (acc, log) => {
+        if (!log.session_id) return acc;
+        if (!acc[log.session_id]) {
+          acc[log.session_id] = { llm: 0, agent: 0, mcp: 0 };
+        }
+        if (MCP_CALL_TYPES.includes(log.call_type)) {
+          acc[log.session_id].mcp += 1;
+        } else if (AGENT_CALL_TYPES.includes(log.call_type)) {
+          acc[log.session_id].agent += 1;
+        } else {
+          acc[log.session_id].llm += 1;
+        }
+        return acc;
+      },
+      {},
+    );
+
+    // Build a single-pass map of session_id → representative request_id.
+    // Prefers an LLM row over an MCP row as the representative.
+    const sessionRepresentativeMap = new Map<string, { requestId: string; isMcp: boolean }>();
+    for (const log of searchedLogs) {
+      if (!log.session_id || (log.session_total_count || 1) <= 1) continue;
+      const isMcp = MCP_CALL_TYPES.includes(log.call_type);
+      const existing = sessionRepresentativeMap.get(log.session_id);
+      if (!existing || (existing.isMcp && !isMcp)) {
+        sessionRepresentativeMap.set(log.session_id, { requestId: log.request_id, isMcp });
+      }
     }
-    setSelectedStatus(filters["Status"] || "");
-    setSelectedModelId(filters["Model"] || "");
-    setSelectedEndUser(filters["End User"] || "");
 
-    // Key Alias filtering is handled server-side by performSearch via the key_alias param.
-    // We intentionally do not translate the alias to a hash here to avoid firing a
-    // redundant main-query request (api_key=hash) alongside performSearch's key_alias request.
-    setSelectedKeyHash(filters["Key Hash"] || "");
-  }, [filters, accessToken]);
+    return (
+      searchedLogs
+        .map((log) => {
+          const sessionComposition = log.session_id ? sessionCompositionById[log.session_id] : undefined;
+          return {
+            ...log,
+            request_duration_ms: log.request_duration_ms,
+            session_llm_count: sessionComposition?.llm ?? undefined,
+            session_mcp_count: sessionComposition?.mcp ?? undefined,
+            session_agent_count: sessionComposition?.agent ?? undefined,
+            onKeyHashClick: (keyHash: string) => setSelectedKeyIdInfoView(keyHash),
+            onSessionClick: (sessionId: string) => {
+              if (sessionId) {
+                setSelectedSessionId(sessionId);
+                setSelectedLog(log);
+                setIsDrawerOpen(true);
+              }
+            },
+          };
+        })
+        // Deduplicate multi-call sessions using the pre-built map (O(1) per row).
+        .filter((log) => {
+          if (!log.session_id || (log.session_total_count || 1) <= 1) return true;
+          return sessionRepresentativeMap.get(log.session_id)?.requestId === log.request_id;
+        })
+    );
+  }, [filteredLogs.data, searchTerm]);
+
+  // Keep the Fetch button busy until the table has actually committed the new
+  // rows. `keepPreviousData` leaves logsQuery.isLoading false on refetch, so
+  // without this the button clears while stale rows are still on screen.
+  const deferredData = useDeferredValue(filteredData);
+  const isStale = deferredData !== filteredData;
+  const isButtonLoading = logsQuery.isFetching || isStale;
 
   if (!accessToken || !token || !userRole || !userID) {
-    return null;
+    return (
+      <div className="flex items-center justify-center h-64">
+        <AntDLoadingSpinner size="large" />
+      </div>
+    );
   }
 
-  const searchedLogs = filteredLogs.data.filter((log) => {
-    const matchesSearch =
-      !searchTerm ||
-      log.request_id.includes(searchTerm) ||
-      log.model.includes(searchTerm) ||
-      (log.user && log.user.includes(searchTerm));
-
-    // No need for additional filtering since we're now handling this in the API call
-    return matchesSearch;
-  });
-
-  const sessionCompositionById = searchedLogs.reduce<Record<string, { llm: number; agent: number; mcp: number }>>((acc, log) => {
-    if (!log.session_id) return acc;
-    if (!acc[log.session_id]) {
-      acc[log.session_id] = { llm: 0, agent: 0, mcp: 0 };
-    }
-    if (MCP_CALL_TYPES.includes(log.call_type)) {
-      acc[log.session_id].mcp += 1;
-    } else if (AGENT_CALL_TYPES.includes(log.call_type)) {
-      acc[log.session_id].agent += 1;
-    } else {
-      acc[log.session_id].llm += 1;
-    }
-    return acc;
-  }, {});
-
-  // Build a single-pass map of session_id → representative request_id.
-  // Prefers an LLM row over an MCP row as the representative.
-  const sessionRepresentativeMap = new Map<string, { requestId: string; isMcp: boolean }>();
-  for (const log of searchedLogs) {
-    if (!log.session_id || (log.session_total_count || 1) <= 1) continue;
-    const isMcp = MCP_CALL_TYPES.includes(log.call_type);
-    const existing = sessionRepresentativeMap.get(log.session_id);
-    if (!existing || (existing.isMcp && !isMcp)) {
-      sessionRepresentativeMap.set(log.session_id, { requestId: log.request_id, isMcp });
-    }
-  }
-
-  const filteredData =
-    searchedLogs
-      .map((log) => {
-        const sessionComposition = log.session_id ? sessionCompositionById[log.session_id] : undefined;
-        return {
-          ...log,
-          request_duration_ms: log.request_duration_ms,
-          session_llm_count: sessionComposition?.llm ?? undefined,
-          session_mcp_count: sessionComposition?.mcp ?? undefined,
-          session_agent_count: sessionComposition?.agent ?? undefined,
-          onKeyHashClick: (keyHash: string) => setSelectedKeyIdInfoView(keyHash),
-          onSessionClick: (sessionId: string) => {
-            if (sessionId) {
-              setSelectedSessionId(sessionId);
-              setSelectedLog(log);
-              setIsDrawerOpen(true);
-            }
-          },
-        };
-      })
-      // Deduplicate multi-call sessions using the pre-built map (O(1) per row).
-      .filter((log) => {
-        if (!log.session_id || (log.session_total_count || 1) <= 1) return true;
-        return sessionRepresentativeMap.get(log.session_id)?.requestId === log.request_id;
-      }) || [];
-
-  // Add this function to handle manual refresh
-  const handleRefresh = () => {
-    if (hasBackendFilters) {
-      // When backend filters (e.g. Key Alias) are active the main TanStack Query
-      // is disabled and its params do not include filter values like key_alias.
-      // Route through the filter-aware refetch so all active filters are preserved.
-      refetchWithFilters();
-    } else {
-      logs.refetch();
-    }
-  };
-
   const handleRowClick = (log: LogEntry) => {
     // Multi-call session row: open in the same right-side drawer (session mode)
     if (log.session_id && (log.session_total_count || 1) > 1) {
@@ -386,100 +231,6 @@ export default function SpendLogsTable({
     setIsDrawerOpen(true);
   };
 
-  const handleCloseDrawer = () => {
-    setIsDrawerOpen(false);
-    setSelectedSessionId(null);
-  };
-
-  const handleSelectLog = (log: LogEntry) => {
-    setSelectedLog(log);
-  };
-
-  const logFilterOptions: FilterOption[] = [
-    {
-      name: "Team ID",
-      label: "Team ID",
-      customComponent: FilterTeamDropdown,
-    },
-    {
-      name: "Status",
-      label: "Status",
-      isSearchable: false,
-      options: [
-        { label: "Success", value: "success" },
-        { label: "Failure", value: "failure" },
-      ],
-    },
-    {
-      name: "Model",
-      label: "Model",
-      customComponent: PaginatedModelSelect,
-    },
-    {
-      name: FILTER_KEYS.PUBLIC_MODEL_OR_SEARCH_TOOL,
-      label: "Public model / search tool",
-      isSearchable: false,
-    },
-    {
-      name: "Key Alias",
-      label: "Key Alias",
-      customComponent: PaginatedKeyAliasSelect,
-    },
-    {
-      name: "End User",
-      label: "End User",
-      isSearchable: true,
-      searchFn: async (searchText: string) => {
-        if (!accessToken) return [];
-        const data = await allEndUsersCall(accessToken);
-        // data if set, is a list of objects, with key = user_id
-        const users = data?.map((u: any) => u.user_id) || [];
-        const filtered = users.filter((u: string) => u.toLowerCase().includes(searchText.toLowerCase()));
-        return filtered.map((u: string) => ({ label: u, value: u }));
-      },
-    },
-    {
-      name: "Error Code",
-      label: "Error Code",
-      isSearchable: true,
-      searchFn: async (searchText: string) => {
-        if (!searchText) return ERROR_CODE_OPTIONS;
-        const lower = searchText.toLowerCase();
-        const filtered = ERROR_CODE_OPTIONS.filter((opt) => opt.label.toLowerCase().includes(lower));
-        const isExactValue = ERROR_CODE_OPTIONS.some((opt) => opt.value === searchText.trim());
-        if (!isExactValue && searchText.trim()) {
-          filtered.push({ label: `Use custom code: ${searchText.trim()}`, value: searchText.trim() });
-        }
-        return filtered;
-      },
-    },
-    {
-      name: "Key Hash",
-      label: "Key Hash",
-      isSearchable: false,
-    },
-    {
-      name: "Error Message",
-      label: "Error Message",
-      isSearchable: false,
-    },
-  ];
-
-  const formatTimeUnit = (value: number, unit: string) => {
-    if (value === 1) {
-      if (unit === "minutes") return "minute";
-      if (unit === "hours") return "hour";
-      if (unit === "days") return "day";
-    }
-    return unit;
-  };
-
-  const selectedOption = QUICK_SELECT_OPTIONS.find(
-    (option) => option.value === selectedTimeInterval.value && option.unit === selectedTimeInterval.unit,
-  );
-
-  const displayLabel = isCustomDate ? getTimeRangeDisplay(isCustomDate, startTime, endTime) : selectedOption?.label;
-
   return (
     <div className="w-full max-w-screen p-6 overflow-x-hidden box-border">
       <TabGroup defaultIndex={0} onIndexChange={(index) => setActiveTab(index === 0 ? "request logs" : "audit logs")}>
@@ -505,192 +256,37 @@ export default function SpendLogsTable({
             ) : (
               <>
                 <FilterComponent
-                  options={logFilterOptions}
+                  options={getLogFilterOptions(accessToken)}
                   onApplyFilters={handleFilterChange}
                   onResetFilters={handleFilterReset}
                 />
                 <div className="bg-white rounded-lg shadow w-full max-w-full box-border">
-                  <div className="border-b px-6 py-4 w-full max-w-full box-border">
-                    <div className="flex flex-col md:flex-row items-start md:items-center justify-between space-y-4 md:space-y-0 w-full max-w-full box-border">
-                      <div className="flex flex-wrap items-center gap-3 w-full max-w-full box-border">
-                        <div className="relative w-64 min-w-0 flex-shrink-0">
-                          <input
-                            type="text"
-                            placeholder="Search by Request ID"
-                            className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                            value={searchTerm}
-                            onChange={(e) => setSearchTerm(e.target.value)}
-                          />
-                          <svg
-                            className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                            />
-                          </svg>
-                        </div>
-
-                        <div className="flex items-center gap-2 min-w-0 flex-shrink">
-                          <div className="relative z-50" ref={quickSelectRef}>
-                            <button
-                              onClick={() => setQuickSelectOpen(!quickSelectOpen)}
-                              className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
-                            >
-                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  strokeWidth={2}
-                                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                                />
-                              </svg>
-                              {displayLabel}
-                            </button>
-
-                            {quickSelectOpen && (
-                              <div className="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border p-2 z-50">
-                                <div className="space-y-1">
-                                  {QUICK_SELECT_OPTIONS.map((option) => (
-                                    <button
-                                      key={option.label}
-                                      className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 rounded-md ${displayLabel === option.label ? "bg-blue-50 text-blue-600" : ""
-                                        }`}
-                                      onClick={() => {
-                                        setCurrentPage(1);
-                                        setEndTime(moment().format("YYYY-MM-DDTHH:mm"));
-                                        setStartTime(
-                                          moment()
-                                            .subtract(option.value, option.unit as any)
-                                            .format("YYYY-MM-DDTHH:mm"),
-                                        );
-                                        setSelectedTimeInterval({ value: option.value, unit: option.unit });
-                                        setIsCustomDate(false);
-                                        setQuickSelectOpen(false);
-                                      }}
-                                    >
-                                      {option.label}
-                                    </button>
-                                  ))}
-                                  <div className="border-t my-2" />
-                                  <button
-                                    className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 rounded-md ${isCustomDate ? "bg-blue-50 text-blue-600" : ""
-                                      }`}
-                                    onClick={() => setIsCustomDate(!isCustomDate)}
-                                  >
-                                    Custom Range
-                                  </button>
-                                </div>
-                              </div>
-                            )}
-                          </div>
-
-                          <LiveTailControls />
-
-                          <Button
-                            type="default"
-                            icon={<SyncOutlined spin={isButtonLoading} />}
-                            onClick={handleRefresh}
-                            disabled={isButtonLoading}
-                            title="Fetch data"
-                          >
-                            {isButtonLoading ? "Fetching" : "Fetch"}
-                          </Button>
-                        </div>
-
-                        {isCustomDate && (
-                          <div className="flex items-center gap-2">
-                            <div>
-                              <input
-                                type="datetime-local"
-                                value={startTime}
-                                onChange={(e) => {
-                                  setStartTime(e.target.value);
-                                  setCurrentPage(1);
-                                }}
-                                className="px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                              />
-                            </div>
-                            <span className="text-gray-500">to</span>
-                            <div>
-                              <input
-                                type="datetime-local"
-                                value={endTime}
-                                onChange={(e) => {
-                                  setEndTime(e.target.value);
-                                  setCurrentPage(1);
-                                }}
-                                className="px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                              />
-                            </div>
-                          </div>
-                        )}
-                      </div>
-
-                      <div className="flex items-center space-x-4">
-                        <span className="text-sm text-gray-700 whitespace-nowrap">
-                          Showing {logs.isLoading ? "..." : filteredLogs ? (currentPage - 1) * pageSize + 1 : 0} -{" "}
-                          {logs.isLoading
-                            ? "..."
-                            : filteredLogs
-                              ? Math.min(currentPage * pageSize, filteredLogs.total)
-                              : 0}{" "}
-                          of {logs.isLoading ? "..." : filteredLogs ? filteredLogs.total : 0} results
-                        </span>
-                        <div className="flex items-center space-x-2">
-                          <span className="text-sm text-gray-700 min-w-[90px]">
-                            Page {logs.isLoading ? "..." : currentPage} of{" "}
-                            {logs.isLoading ? "..." : filteredLogs ? filteredLogs.total_pages : 1}
-                          </span>
-                          <button
-                            onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                            disabled={logs.isLoading || currentPage === 1}
-                            className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                          >
-                            Previous
-                          </button>
-                          <button
-                            onClick={() => setCurrentPage((p) => Math.min(filteredLogs.total_pages || 1, p + 1))}
-                            disabled={logs.isLoading || currentPage === (filteredLogs.total_pages || 1)}
-                            className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                          >
-                            Next
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  {isLiveTail && currentPage === 1 && isMainQueryEnabled && (
-                    <div className="mb-4 px-4 py-2 bg-green-50 border border-greem-200 rounded-md flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm text-green-700">Auto-refreshing every 15 seconds</span>
-                      </div>
-                      <button
-                        onClick={() => setIsLiveTail(false)}
-                        className="text-sm text-green-600 hover:text-green-800"
-                      >
-                        Stop
-                      </button>
-                    </div>
-                  )}
+                  <LogsTableToolbar
+                    searchTerm={searchTerm}
+                    onSearchChange={setSearchTerm}
+                    startTime={startTime}
+                    onStartTimeChange={setStartTime}
+                    endTime={endTime}
+                    onEndTimeChange={setEndTime}
+                    isCustomDate={isCustomDate}
+                    onIsCustomDateChange={setIsCustomDate}
+                    selectedTimeInterval={selectedTimeInterval}
+                    onSelectedTimeIntervalChange={setSelectedTimeInterval}
+                    isLiveTail={isLiveTail}
+                    onIsLiveTailChange={setIsLiveTail}
+                    currentPage={currentPage}
+                    onCurrentPageChange={setCurrentPage}
+                    pageSize={pageSize}
+                    isLoading={logsQuery.isLoading}
+                    isButtonLoading={isButtonLoading}
+                    onRefetch={() => logsQuery.refetch()}
+                    filteredLogs={filteredLogs}
+                  />
                   <DataTable
-                    columns={createColumns({
-                      sortBy,
-                      sortOrder,
-                      onSortChange: (newSortBy, newSortOrder) => {
-                        setSortBy(newSortBy);
-                        setSortOrder(newSortOrder);
-                        setCurrentPage(1);
-                      },
-                    })}
-                    data={filteredData}
+                    columns={columns}
+                    data={deferredData}
                     onRowClick={handleRowClick}
-                    isLoading={logs.isLoading}
+                    isLoading={logsQuery.isLoading}
                   />
                 </div>
               </>
@@ -706,330 +302,29 @@ export default function SpendLogsTable({
               premiumUser={premiumUser}
             />
           </TabPanel>
-          <TabPanel><DeletedKeysPage /></TabPanel>
-          <TabPanel><DeletedTeamsPage /></TabPanel>
+          <TabPanel>
+            <DeletedKeysPage />
+          </TabPanel>
+          <TabPanel>
+            <DeletedTeamsPage />
+          </TabPanel>
         </TabPanels>
       </TabGroup>
 
       {/* Log Details Drawer */}
       <LogDetailsDrawer
         open={isDrawerOpen}
-        onClose={handleCloseDrawer}
+        onClose={() => {
+          setIsDrawerOpen(false);
+          setSelectedSessionId(null);
+        }}
         logEntry={selectedLog}
         sessionId={selectedSessionId}
         accessToken={accessToken}
         allLogs={filteredData}
-        onSelectLog={handleSelectLog}
+        onSelectLog={setSelectedLog}
         startTime={moment(startTime).utc().format("YYYY-MM-DD HH:mm:ss")}
       />
     </div>
   );
 }
-
-export function RequestViewer({ row }: { row: Row<LogEntry> }) {
-  // Helper function to clean metadata by removing specific fields
-  const formatData = (input: any) => {
-    if (typeof input === "string") {
-      try {
-        return JSON.parse(input);
-      } catch {
-        return input;
-      }
-    }
-    return input;
-  };
-
-  // New helper function to get raw request
-  const getRawRequest = () => {
-    // First check if proxy_server_request exists in metadata
-    if (row.original?.proxy_server_request) {
-      return formatData(row.original.proxy_server_request);
-    }
-    // Fall back to messages if proxy_server_request is empty
-    return formatData(row.original.messages);
-  };
-
-  // Extract error information from metadata if available
-  const metadata = row.original.metadata || {};
-  const hasError = metadata.status === "failure";
-  const errorInfo = hasError ? metadata.error_information : null;
-
-  // Check if request/response data is missing
-  const hasMessages =
-    row.original.messages &&
-    (Array.isArray(row.original.messages)
-      ? row.original.messages.length > 0
-      : Object.keys(row.original.messages).length > 0);
-  const hasResponse = row.original.response && Object.keys(formatData(row.original.response)).length > 0;
-  const missingData = !hasMessages && !hasResponse && !hasError;
-
-  // Format the response with error details if present
-  const formattedResponse = () => {
-    if (hasError && errorInfo) {
-      return {
-        error: {
-          message: errorInfo.error_message || "An error occurred",
-          type: errorInfo.error_class || "error",
-          code: errorInfo.error_code || "unknown",
-          param: null,
-        },
-      };
-    }
-    return formatData(row.original.response);
-  };
-
-  // Extract vector store request metadata if available
-  const hasVectorStoreData =
-    metadata.vector_store_request_metadata &&
-    Array.isArray(metadata.vector_store_request_metadata) &&
-    metadata.vector_store_request_metadata.length > 0;
-
-  // Extract guardrail information from metadata if available
-  const guardrailInfo = row.original.metadata?.guardrail_information;
-  const guardrailEntries = Array.isArray(guardrailInfo) ? guardrailInfo : guardrailInfo ? [guardrailInfo] : [];
-  const hasGuardrailData = guardrailEntries.length > 0;
-
-  // Calculate total masked entities if guardrail data exists
-  const totalMaskedEntities = guardrailEntries.reduce((sum, entry) => {
-    const maskedCounts = entry?.masked_entity_count;
-    if (!maskedCounts) {
-      return sum;
-    }
-    return (
-      sum +
-      Object.values(maskedCounts).reduce<number>((acc, count) => (typeof count === "number" ? acc + count : acc), 0)
-    );
-  }, 0);
-
-  const primaryGuardrailLabel =
-    guardrailEntries.length === 1
-      ? guardrailEntries[0]?.guardrail_name ?? "-"
-      : guardrailEntries.length > 1
-        ? `${guardrailEntries.length} guardrails`
-        : "-";
-
-  const truncatedRequestId = truncateString(row.original.request_id, 64);
-
-  return (
-    <div className="p-6 bg-gray-50 space-y-6 w-full max-w-full overflow-hidden box-border">
-      {/* Combined Info Card */}
-      <div className="bg-white rounded-lg shadow w-full max-w-full overflow-hidden">
-        <div className="p-4 border-b">
-          <h3 className="text-lg font-medium">Request Details</h3>
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 w-full max-w-full overflow-hidden">
-          <div className="space-y-2">
-            <div className="flex">
-              <span className="font-medium w-1/3">Request ID:</span>
-              {row.original.request_id.length > 64 ? (
-                <Tooltip title={row.original.request_id}>
-                  <span className="font-mono text-sm">{truncatedRequestId}</span>
-                </Tooltip>
-              ) : (
-                <span className="font-mono text-sm">{row.original.request_id}</span>
-              )}
-            </div>
-            <div className="flex">
-              <span className="font-medium w-1/3">Model:</span>
-              <span>{row.original.model}</span>
-            </div>
-            <div className="flex">
-              <span className="font-medium w-1/3">Model ID:</span>
-              <span>{row.original.model_id}</span>
-            </div>
-            <div className="flex">
-              <span className="font-medium w-1/3">Call Type:</span>
-              <span>{row.original.call_type}</span>
-            </div>
-            <div className="flex">
-              <span className="font-medium w-1/3">Provider:</span>
-              <span>{row.original.custom_llm_provider || "-"}</span>
-            </div>
-            <div className="flex">
-              <span className="font-medium w-1/3">API Base:</span>
-              <Tooltip title={row.original.api_base || "-"}>
-                <span className="max-w-[15ch] truncate block">{row.original.api_base || "-"}</span>
-              </Tooltip>
-            </div>
-            {row?.original?.requester_ip_address && (
-              <div className="flex">
-                <span className="font-medium w-1/3">IP Address:</span>
-                <span>{row?.original?.requester_ip_address}</span>
-              </div>
-            )}
-            {hasGuardrailData && (
-              <div className="flex">
-                <span className="font-medium w-1/3">Guardrail:</span>
-                <div>
-                  <span className="font-mono">{primaryGuardrailLabel}</span>
-                  {totalMaskedEntities > 0 && (
-                    <span className="ml-2 px-2 py-0.5 bg-blue-50 text-blue-700 rounded-md text-xs font-medium">
-                      {totalMaskedEntities} masked
-                    </span>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-          <div className="space-y-2">
-            <div className="flex">
-              <span className="font-medium w-1/3">Tokens:</span>
-              <span>
-                {row.original.total_tokens} ({row.original.prompt_tokens} prompt tokens +{" "}
-                {row.original.completion_tokens} completion tokens)
-              </span>
-            </div>
-            <div className="flex">
-              <span className="font-medium w-1/3">Cache Read Tokens:</span>
-              <span>
-                {formatNumberWithCommas(row.original.metadata?.additional_usage_values?.cache_read_input_tokens || 0)}
-              </span>
-            </div>
-            <div className="flex">
-              <span className="font-medium w-1/3">Cache Creation Tokens:</span>
-              <span>
-                {formatNumberWithCommas(row.original.metadata?.additional_usage_values.cache_creation_input_tokens)}
-              </span>
-            </div>
-            <div className="flex">
-              <span className="font-medium w-1/3">Cost:</span>
-              <span>${formatNumberWithCommas(row.original.spend || 0, 6)}</span>
-            </div>
-            <div className="flex">
-              <span className="font-medium w-1/3">Cache Hit:</span>
-              <span>{row.original.cache_hit}</span>
-            </div>
-
-            <div className="flex">
-              <span className="font-medium w-1/3">Status:</span>
-              <span
-                className={`px-2 py-1 rounded-md text-xs font-medium inline-block text-center w-16 ${(row.original.metadata?.status || "Success").toLowerCase() !== "failure"
-                  ? "bg-green-100 text-green-800"
-                  : "bg-red-100 text-red-800"
-                  }`}
-              >
-                {(row.original.metadata?.status || "Success").toLowerCase() !== "failure" ? "Success" : "Failure"}
-              </span>
-            </div>
-            <div className="flex">
-              <span className="font-medium w-1/3">Start Time:</span>
-              <span>{row.original.startTime}</span>
-            </div>
-            <div className="flex">
-              <span className="font-medium w-1/3">End Time:</span>
-              <span>{row.original.endTime}</span>
-            </div>
-            <div className="flex">
-              <span className="font-medium w-1/3">Duration:</span>
-              <span>{row.original.request_duration_ms != null ? (row.original.request_duration_ms / 1000).toFixed(3) : "-"} s.</span>
-            </div>
-            {row.original.metadata?.litellm_overhead_time_ms !== undefined && (
-              <div className="flex">
-                <span className="font-medium w-1/3">LiteLLM Overhead:</span>
-                <span>{row.original.metadata.litellm_overhead_time_ms} ms</span>
-              </div>
-            )}
-            <div className="flex">
-              <span className="font-medium w-1/3">Retries:</span>
-              <span>
-                {row.original.metadata?.attempted_retries !== undefined && row.original.metadata?.attempted_retries !== null
-                  ? row.original.metadata.attempted_retries > 0
-                    ? `${row.original.metadata.attempted_retries}${row.original.metadata.max_retries !== undefined && row.original.metadata.max_retries !== null ? ` / ${row.original.metadata.max_retries}` : ''}`
-                    : <Tag color="green">None</Tag>
-                  : '-'}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Cost Breakdown - Show if cost breakdown data is available */}
-      <CostBreakdownViewer
-        costBreakdown={row.original.metadata?.cost_breakdown}
-        totalSpend={row.original.spend ?? 0}
-        promptTokens={row.original.prompt_tokens}
-        completionTokens={row.original.completion_tokens}
-        cacheHit={row.original.cache_hit}
-      />
-
-      {/* Configuration Info Message - Show when data is missing */}
-      <ConfigInfoMessage show={missingData} />
-
-      {/* Request/Response Panel */}
-      <div className="w-full max-w-full overflow-hidden">
-        <RequestResponsePanel
-          row={row}
-          hasMessages={hasMessages}
-          hasResponse={hasResponse}
-          hasError={hasError}
-          errorInfo={errorInfo}
-          getRawRequest={getRawRequest}
-          formattedResponse={formattedResponse}
-        />
-      </div>
-
-      {/* Guardrail Data - Show only if present */}
-      {hasGuardrailData && <GuardrailViewer data={guardrailInfo} />}
-
-      {/* Vector Store Request Data - Show only if present */}
-      {hasVectorStoreData && <VectorStoreViewer data={metadata.vector_store_request_metadata} />}
-
-      {/* Error Card - Only show for failures */}
-      {hasError && errorInfo && <ErrorViewer errorInfo={errorInfo} />}
-
-      {/* Tags Card - Only show if there are tags */}
-      {row.original.request_tags && Object.keys(row.original.request_tags).length > 0 && (
-        <div className="bg-white rounded-lg shadow">
-          <div className="flex justify-between items-center p-4 border-b">
-            <h3 className="text-lg font-medium">Request Tags</h3>
-          </div>
-          <div className="p-4">
-            <div className="flex flex-wrap gap-2">
-              {Object.entries(row.original.request_tags).map(([key, value]) => (
-                <span key={key} className="px-2 py-1 bg-gray-100 rounded-full text-xs">
-                  {key}: {String(value)}
-                </span>
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Metadata Card - Only show if there's metadata */}
-      {row.original.metadata && Object.keys(row.original.metadata).length > 0 && (
-        <div className="bg-white rounded-lg shadow">
-          <div className="flex justify-between items-center p-4 border-b">
-            <h3 className="text-lg font-medium">Metadata</h3>
-            <button
-              onClick={() => {
-                navigator.clipboard.writeText(JSON.stringify(row.original.metadata, null, 2));
-              }}
-              className="p-1 hover:bg-gray-200 rounded"
-              title="Copy metadata"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-              </svg>
-            </button>
-          </div>
-          <div className="p-4 overflow-auto max-h-64">
-            <pre className="text-xs font-mono whitespace-pre-wrap break-all">
-              {JSON.stringify(row.original.metadata, null, 2)}
-            </pre>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/ui/litellm-dashboard/src/components/view_logs/log_filter_logic.test.tsx b/ui/litellm-dashboard/src/components/view_logs/log_filter_logic.test.tsx
index 17c5077152..cbe37e0b70 100644
--- a/ui/litellm-dashboard/src/components/view_logs/log_filter_logic.test.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/log_filter_logic.test.tsx
@@ -1,10 +1,16 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { act, renderHook, waitFor } from "@testing-library/react";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useState } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import type { PaginatedResponse } from ".";
-import type { LogEntry, LogsSortField } from "./columns";
-import { useLogFilterLogic } from "./log_filter_logic";
+import type { LogsSortField } from "./columns";
+import {
+  defaultFilters,
+  getLiveTailRefetchInterval,
+  LIVE_TAIL_INTERVAL_MS,
+  useLogFilterLogic,
+  type LogFilterState,
+  type PaginatedResponse,
+} from "./log_filter_logic";
 
 vi.mock("../networking", () => ({
   uiSpendLogsCall: vi.fn(),
@@ -16,767 +22,642 @@ vi.mock("@/components/key_team_helpers/filter_helpers", () => ({
 
 import { uiSpendLogsCall } from "../networking";
 
-const createLogEntry = (overrides: Partial<LogEntry> = {}): LogEntry =>
-({
-  request_id: "req-1",
-  api_key: "key-1",
-  team_id: "team-1",
-  model: "gpt-4",
-  model_id: "gpt-4",
-  call_type: "chat",
-  spend: 0,
-  total_tokens: 0,
-  prompt_tokens: 0,
-  completion_tokens: 0,
-  startTime: "2025-01-01T00:00:00Z",
-  endTime: "2025-01-01T00:01:00Z",
-  cache_hit: "miss",
-  messages: [],
-  response: {},
-  metadata: {},
-  request_tags: {},
-  ...overrides,
-} as LogEntry);
-
-const createPaginatedResponse = (data: LogEntry[]): PaginatedResponse => ({
-  data,
-  total: data.length,
+const emptyResponse: PaginatedResponse = {
+  data: [],
+  total: 0,
   page: 1,
   page_size: 50,
-  total_pages: 1,
-});
+  total_pages: 0,
+};
 
 const defaultProps = {
-  logs: createPaginatedResponse([]),
-  accessToken: "test-token",
+  accessToken: "test-token" as string | null,
+  token: "test-token" as string | null,
+  userRole: "Admin" as string | null,
+  userID: "user-1" as string | null,
+  filterByCurrentUser: false,
+  activeTab: "request logs",
+  isLiveTail: false,
   startTime: "2025-01-01T00:00:00",
   endTime: "2025-01-01T23:59:59",
   isCustomDate: true,
-  setCurrentPage: vi.fn(),
-  userID: "user-1",
-  userRole: "Admin",
+  sortBy: "startTime" as LogsSortField,
+  sortOrder: "desc" as "asc" | "desc",
+  currentPage: 1,
 };
 
+type HookOverrides = Partial<Omit<Parameters<typeof useLogFilterLogic>[0], "filters" | "setFilters">>;
+
 describe("useLogFilterLogic", () => {
   let queryClient: QueryClient;
 
   beforeEach(() => {
     queryClient = new QueryClient({
-      defaultOptions: {
-        queries: {
-          retry: false,
-        },
-      },
+      defaultOptions: { queries: { retry: false } },
     });
     vi.clearAllMocks();
-    vi.mocked(uiSpendLogsCall).mockResolvedValue({
-      data: [],
-      total: 0,
-      page: 1,
-      page_size: 50,
-      total_pages: 0,
-    });
+    vi.mocked(uiSpendLogsCall).mockResolvedValue(emptyResponse);
   });
 
   const wrapper = ({ children }: { children: ReactNode }) =>
     React.createElement(QueryClientProvider, { client: queryClient }, children);
 
-  it("should return filters, filteredLogs, allTeams, handleFilterChange, and handleFilterReset", () => {
-    const { result } = renderHook(
-      () =>
-        useLogFilterLogic({
+  function renderFilterHook(overrides: HookOverrides = {}) {
+    const setCurrentPage = overrides.setCurrentPage ?? vi.fn();
+    const rendered = renderHook(
+      () => {
+        const [filters, setFilters] = useState<LogFilterState>(defaultFilters);
+        const hook = useLogFilterLogic({
           ...defaultProps,
-          logs: createPaginatedResponse([createLogEntry()]),
-        }),
+          ...overrides,
+          filters,
+          setFilters,
+          setCurrentPage,
+        });
+        return { ...hook, filters, setFilters };
+      },
       { wrapper },
     );
+    return { ...rendered, setCurrentPage };
+  }
 
-    expect(result.current.filters).toBeDefined();
-    expect(result.current.filteredLogs).toBeDefined();
-    expect(result.current).toHaveProperty("allTeams");
-    expect(result.current.handleFilterChange).toBeDefined();
-    expect(result.current.handleFilterReset).toBeDefined();
-  });
+  describe("return shape", () => {
+    it("exposes filteredLogs, allTeams, handleFilterChange, handleFilterReset", () => {
+      const { result } = renderFilterHook();
 
-  it("should initialize filters with all keys empty", () => {
-    const { result } = renderHook(() => useLogFilterLogic(defaultProps), { wrapper });
-
-    const filters = result.current.filters;
-    expect(filters["Team ID"]).toBe("");
-    expect(filters["Key Hash"]).toBe("");
-    expect(filters["Request ID"]).toBe("");
-    expect(filters["Model"]).toBe("");
-    expect(filters["User ID"]).toBe("");
-    expect(filters["End User"]).toBe("");
-    expect(filters["Status"]).toBe("");
-    expect(filters["Key Alias"]).toBe("");
-    expect(filters["Error Code"]).toBe("");
-    expect(filters["Error Message"]).toBe("");
-    expect(filters["Public model / search tool"]).toBe("");
-  });
-
-  it("should return all logs when no filters are applied", () => {
-    const logs = createPaginatedResponse([
-      createLogEntry({ request_id: "req-1" }),
-      createLogEntry({ request_id: "req-2" }),
-    ]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    expect(result.current.filteredLogs.data).toHaveLength(2);
-    expect(result.current.filteredLogs.data).toEqual(logs.data);
-  });
-
-  it("should filter logs by team_id when Team ID filter is set", () => {
-    const logs = createPaginatedResponse([
-      createLogEntry({ request_id: "req-1", team_id: "team-a" }),
-      createLogEntry({ request_id: "req-2", team_id: "team-b" }),
-      createLogEntry({ request_id: "req-3", team_id: "team-a" }),
-    ]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "Team ID": "team-a" });
-    });
-
-    expect(result.current.filteredLogs.data).toHaveLength(2);
-    expect(result.current.filteredLogs.data.every((log) => log.team_id === "team-a")).toBe(true);
-  });
-
-  it("should filter logs by status when Status filter is set to success", () => {
-    const logs = createPaginatedResponse([
-      createLogEntry({ request_id: "req-1", status: "success" }),
-      createLogEntry({ request_id: "req-2" }),
-      createLogEntry({ request_id: "req-3", status: "error" }),
-    ]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ Status: "success" });
-    });
-
-    expect(result.current.filteredLogs.data).toHaveLength(2);
-    expect(result.current.filteredLogs.data.every((log) => !log.status || log.status === "success")).toBe(true);
-  });
-
-  it("should filter logs by status when Status filter is set to error", () => {
-    const logs = createPaginatedResponse([
-      createLogEntry({ request_id: "req-1", status: "success" }),
-      createLogEntry({ request_id: "req-2", status: "error" }),
-    ]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ Status: "error" });
-    });
-
-    expect(result.current.filteredLogs.data).toHaveLength(1);
-    expect(result.current.filteredLogs.data[0].status).toBe("error");
-  });
-
-  it("should filter logs by model_id when Model filter is set", async () => {
-    const filteredLogs = [
-      createLogEntry({ request_id: "req-1", model_id: "gpt-4" }),
-      createLogEntry({ request_id: "req-3", model_id: "gpt-4" }),
-    ];
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse(filteredLogs),
-    );
-    const logs = createPaginatedResponse([
-      createLogEntry({ request_id: "req-1", model_id: "gpt-4" }),
-      createLogEntry({ request_id: "req-2", model_id: "gpt-3.5" }),
-      createLogEntry({ request_id: "req-3", model_id: "gpt-4" }),
-    ]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ Model: "gpt-4" });
-    });
-
-    await waitFor(
-      () => {
-        expect(result.current.filteredLogs.data).toHaveLength(2);
-        expect(result.current.filteredLogs.data.every((log) => log.model_id === "gpt-4")).toBe(true);
-      },
-      { timeout: 500 },
-    );
-  });
-
-  it("should pass model param and filter search-tool rows by spend log model column", async () => {
-    const searchRows = [
-      createLogEntry({
-        request_id: "s1",
-        call_type: "asearch",
-        model: "tavily-marketing",
-        model_id: "",
-        team_id: "team-x",
-      }),
-    ];
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(createPaginatedResponse(searchRows));
-    const logs = createPaginatedResponse([
-      ...searchRows,
-      createLogEntry({
-        request_id: "c1",
-        call_type: "chat",
-        model: "gpt-4o",
-        model_id: "mid-1",
-        team_id: "team-x",
-      }),
-    ]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "Public model / search tool": "tavily-marketing" });
-    });
-
-    await waitFor(
-      () => {
-        expect(result.current.filteredLogs.data).toHaveLength(1);
-        expect(result.current.filteredLogs.data[0].model).toBe("tavily-marketing");
-        expect(result.current.filteredLogs.data[0].call_type).toBe("asearch");
-      },
-      { timeout: 500 },
-    );
-
-    expect(vi.mocked(uiSpendLogsCall)).toHaveBeenCalledWith(
-      expect.objectContaining({
-        params: expect.objectContaining({
-          model: "tavily-marketing",
-        }),
-      }),
-    );
-  });
-
-  it("should filter logs by api_key when Key Hash filter is set", async () => {
-    const filteredLog = createLogEntry({ request_id: "req-1", api_key: "key-x" });
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([filteredLog]),
-    );
-    const logs = createPaginatedResponse([
-      createLogEntry({ request_id: "req-1", api_key: "key-x" }),
-      createLogEntry({ request_id: "req-2", api_key: "key-y" }),
-    ]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "Key Hash": "key-x" });
-    });
-
-    await waitFor(
-      () => {
-        expect(result.current.filteredLogs.data).toHaveLength(1);
-        expect(result.current.filteredLogs.data[0].api_key).toBe("key-x");
-      },
-      { timeout: 500 },
-    );
-  });
-
-  it("should filter logs by end_user when End User filter is set", async () => {
-    const filteredLog = createLogEntry({ request_id: "req-1", end_user: "user-a" });
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([filteredLog]),
-    );
-    const logs = createPaginatedResponse([
-      createLogEntry({ request_id: "req-1", end_user: "user-a" }),
-      createLogEntry({ request_id: "req-2", end_user: "user-b" }),
-    ]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "End User": "user-a" });
-    });
-
-    await waitFor(
-      () => {
-        expect(result.current.filteredLogs.data).toHaveLength(1);
-        expect(result.current.filteredLogs.data[0].end_user).toBe("user-a");
-      },
-      { timeout: 500 },
-    );
-  });
-
-  it("should filter logs by error_code when Error Code filter is set", async () => {
-    const filteredLog = createLogEntry({
-      request_id: "req-1",
-      metadata: { error_information: { error_code: "429" } },
-    });
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([filteredLog]),
-    );
-    const logs = createPaginatedResponse([
-      createLogEntry({
-        request_id: "req-1",
-        metadata: { error_information: { error_code: "429" } },
-      }),
-      createLogEntry({
-        request_id: "req-2",
-        metadata: { error_information: { error_code: "500" } },
-      }),
-    ]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "Error Code": "429" });
-    });
-
-    await waitFor(
-      () => {
-        expect(result.current.filteredLogs.data).toHaveLength(1);
-        expect(result.current.filteredLogs.data[0].metadata?.error_information?.error_code).toBe("429");
-      },
-      { timeout: 500 },
-    );
-  });
-
-  it("should return empty data when logs is null or has no data", () => {
-    const { result } = renderHook(
-      () =>
-        useLogFilterLogic({
-          ...defaultProps,
-          logs: { data: [], total: 0, page: 1, page_size: 50, total_pages: 0 },
-        }),
-      { wrapper },
-    );
-
-    expect(result.current.filteredLogs.data).toEqual([]);
-    expect(result.current.filteredLogs.total).toBe(0);
-  });
-
-  it("should reset filters when handleFilterReset is called", () => {
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "Team ID": "team-1", Status: "success" });
-    });
-
-    expect(result.current.filters["Team ID"]).toBe("team-1");
-    expect(result.current.filters["Status"]).toBe("success");
-
-    act(() => {
-      result.current.handleFilterReset();
-    });
-
-    expect(result.current.filters["Team ID"]).toBe("");
-    expect(result.current.filters["Status"]).toBe("");
-  });
-
-  it("should call setCurrentPage with 1 when handleFilterChange is invoked", () => {
-    const setCurrentPage = vi.fn();
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result } = renderHook(
-      () => useLogFilterLogic({ ...defaultProps, logs, setCurrentPage }),
-      { wrapper },
-    );
-
-    act(() => {
-      result.current.handleFilterChange({ "Team ID": "team-1" });
-    });
-
-    expect(setCurrentPage).toHaveBeenCalledWith(1);
-  });
-
-  it("should call uiSpendLogsCall when backend filter is set and debounce elapses", async () => {
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "Key Alias": "alias-1" });
-    });
-
-    await waitFor(
-      () => {
-        expect(uiSpendLogsCall).toHaveBeenCalled();
-      },
-      { timeout: 500 },
-    );
-  });
-
-  it("should not call uiSpendLogsCall when accessToken is null", async () => {
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result } = renderHook(
-      () => useLogFilterLogic({ ...defaultProps, logs, accessToken: null }),
-      { wrapper },
-    );
-
-    act(() => {
-      result.current.handleFilterChange({ "Key Alias": "alias-1" });
-    });
-
-    await new Promise((resolve) => setTimeout(resolve, 350));
-
-    expect(uiSpendLogsCall).not.toHaveBeenCalled();
-  });
-
-  it("should use backend filtered logs when backend filters are active and API returns data", async () => {
-    const backendLog = createLogEntry({ request_id: "backend-req" });
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([backendLog]),
-    );
-    const logs = createPaginatedResponse([createLogEntry({ request_id: "client-req" })]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "Key Alias": "alias-1" });
-    });
-
-    await waitFor(
-      () => {
-        expect(result.current.filteredLogs.data).toHaveLength(1);
-        expect(result.current.filteredLogs.data[0].request_id).toBe("backend-req");
-      },
-      { timeout: 500 },
-    );
-  });
-
-  it("should call uiSpendLogsCall with request_id when Request ID filter is set", async () => {
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([createLogEntry({ request_id: "req-xyz" })]),
-    );
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "Request ID": "req-xyz" });
-    });
-
-    await waitFor(
-      () => {
-        expect(uiSpendLogsCall).toHaveBeenCalledWith(
-          expect.objectContaining({
-            params: expect.objectContaining({ request_id: "req-xyz" }),
-          }),
-        );
-      },
-      { timeout: 500 },
-    );
-  });
-
-  it("should call uiSpendLogsCall with user_id when User ID filter is set", async () => {
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([createLogEntry()]),
-    );
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "User ID": "user-123" });
-    });
-
-    await waitFor(
-      () => {
-        expect(uiSpendLogsCall).toHaveBeenCalledWith(
-          expect.objectContaining({
-            params: expect.objectContaining({ user_id: "user-123" }),
-          }),
-        );
-      },
-      { timeout: 500 },
-    );
-  });
-
-  it("should call uiSpendLogsCall with error_message when Error Message filter is set", async () => {
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([createLogEntry()]),
-    );
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "Error Message": "rate limit exceeded" });
-    });
-
-    await waitFor(
-      () => {
-        expect(uiSpendLogsCall).toHaveBeenCalledWith(
-          expect.objectContaining({
-            params: expect.objectContaining({ error_message: "rate limit exceeded" }),
-          }),
-        );
-      },
-      { timeout: 500 },
-    );
-  });
-
-  it("should return empty results when backend filters are active but API returns empty", async () => {
-    vi.mocked(uiSpendLogsCall).mockResolvedValue({
-      data: [],
-      total: 0,
-      page: 1,
-      page_size: 50,
-      total_pages: 0,
-    });
-    const clientLog = createLogEntry({ request_id: "client-req" });
-    const logs = createPaginatedResponse([clientLog]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "Key Alias": "alias-1" });
-    });
-
-    await waitFor(
-      () => {
-        expect(uiSpendLogsCall).toHaveBeenCalled();
-      },
-      { timeout: 500 },
-    );
-
-    expect(result.current.filteredLogs.data).toHaveLength(0);
-  });
-
-  it("should refetch when sortBy changes and backend filters are active", async () => {
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([createLogEntry()]),
-    );
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result, rerender } = renderHook(
-      (props: { sortBy?: LogsSortField }) =>
-        useLogFilterLogic({ ...defaultProps, logs, ...props }),
-      { wrapper, initialProps: { sortBy: "startTime" as LogsSortField } },
-    );
-
-    act(() => {
-      result.current.handleFilterChange({ "Key Alias": "alias-1" });
-    });
-
-    await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(1), {
-      timeout: 500,
-    });
-
-    rerender({ sortBy: "spend" as LogsSortField });
-
-    await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(2), {
-      timeout: 500,
-    });
-    expect(uiSpendLogsCall).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        params: expect.objectContaining({ sort_by: "spend" }),
-      }),
-    );
-  });
-
-  it("should refetch when sortOrder changes and backend filters are active", async () => {
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([createLogEntry()]),
-    );
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result, rerender } = renderHook(
-      (props: { sortOrder?: "asc" | "desc" }) =>
-        useLogFilterLogic({ ...defaultProps, logs, ...props }),
-      { wrapper, initialProps: { sortOrder: "desc" } },
-    );
-
-    act(() => {
-      result.current.handleFilterChange({ "Key Alias": "alias-1" });
-    });
-
-    await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(1), {
-      timeout: 500,
-    });
-
-    rerender({ sortOrder: "asc" });
-
-    await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(2), {
-      timeout: 500,
-    });
-    expect(uiSpendLogsCall).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        params: expect.objectContaining({ sort_order: "asc" }),
-      }),
-    );
-  });
-
-  it("should refetch when currentPage changes and backend filters are active", async () => {
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([createLogEntry()]),
-    );
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result, rerender } = renderHook(
-      (props) => useLogFilterLogic({ ...defaultProps, logs, ...props }),
-      { wrapper, initialProps: { currentPage: 1 } },
-    );
-
-    act(() => {
-      result.current.handleFilterChange({ "Key Alias": "alias-1" });
-    });
-
-    await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(1), {
-      timeout: 500,
-    });
-
-    rerender({ currentPage: 2 });
-
-    await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(2), {
-      timeout: 500,
-    });
-    expect(uiSpendLogsCall).toHaveBeenLastCalledWith(
-      expect.objectContaining({ page: 2 }),
-    );
-  });
-
-  it("should refetch when startTime changes and backend filters are active", async () => {
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([createLogEntry()]),
-    );
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result, rerender } = renderHook(
-      (props: { startTime?: string }) =>
-        useLogFilterLogic({ ...defaultProps, logs, ...props }),
-      { wrapper, initialProps: { startTime: "2025-01-01T00:00:00Z" } },
-    );
-
-    act(() => {
-      result.current.handleFilterChange({ "Key Alias": "alias-1" });
-    });
-
-    await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(1), {
-      timeout: 500,
-    });
-
-    rerender({ startTime: "2025-01-02T00:00:00Z" });
-
-    await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(2), {
-      timeout: 500,
-    });
-    expect(uiSpendLogsCall).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        start_date: "2025-01-02 00:00:00",
-      }),
-    );
-  });
-
-  it("should refetch when isCustomDate changes and backend filters are active", async () => {
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([createLogEntry()]),
-    );
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result, rerender } = renderHook(
-      (props: { isCustomDate?: boolean }) =>
-        useLogFilterLogic({ ...defaultProps, logs, ...props }),
-      { wrapper, initialProps: { isCustomDate: false } },
-    );
-
-    act(() => {
-      result.current.handleFilterChange({ "Key Alias": "alias-1" });
-    });
-
-    await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(1), {
-      timeout: 500,
-    });
-
-    rerender({ isCustomDate: true });
-
-    await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(2), {
-      timeout: 500,
+      expect(result.current.filteredLogs).toBeDefined();
+      expect(result.current).toHaveProperty("allTeams");
+      expect(result.current.handleFilterChange).toBeInstanceOf(Function);
+      expect(result.current.handleFilterReset).toBeInstanceOf(Function);
     });
   });
 
-  it("should not call setCurrentPage when handleFilterChange receives identical filters", async () => {
-    const setCurrentPage = vi.fn();
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result } = renderHook(
-      () => useLogFilterLogic({ ...defaultProps, logs, setCurrentPage }),
-      { wrapper },
-    );
+  describe("handleFilterReset", () => {
+    it("restores filters to defaults after changes", () => {
+      const { result } = renderFilterHook();
 
-    act(() => {
-      result.current.handleFilterChange({ "Team ID": "team-1" });
+      act(() => {
+        result.current.handleFilterChange({ "Team ID": "team-1", Status: "success" });
+      });
+
+      expect(result.current.filters["Team ID"]).toBe("team-1");
+      expect(result.current.filters["Status"]).toBe("success");
+
+      act(() => {
+        result.current.handleFilterReset();
+      });
+
+      expect(result.current.filters["Team ID"]).toBe("");
+      expect(result.current.filters["Status"]).toBe("");
     });
 
-    await waitFor(() => expect(setCurrentPage).toHaveBeenCalledTimes(1), {
-      timeout: 500,
+    it("calls setCurrentPage(1)", () => {
+      const setCurrentPage = vi.fn();
+      const { result } = renderFilterHook({ setCurrentPage });
+
+      act(() => {
+        result.current.handleFilterReset();
+      });
+
+      expect(setCurrentPage).toHaveBeenCalledWith(1);
     });
 
-    setCurrentPage.mockClear();
+    it("triggers a fetch with all filter params undefined", async () => {
+      vi.mocked(uiSpendLogsCall).mockResolvedValue(emptyResponse);
+      const { result } = renderFilterHook();
 
-    await act(async () => {
-      result.current.handleFilterChange({ "Team ID": "team-1" });
-      await new Promise((resolve) => setTimeout(resolve, 350));
-    });
+      act(() => {
+        result.current.handleFilterChange({ "Key Alias": "alias-1" });
+      });
 
-    expect(setCurrentPage).not.toHaveBeenCalled();
-  });
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalled(), { timeout: 500 });
 
-  it("should not crash when uiSpendLogsCall throws", async () => {
-    vi.mocked(uiSpendLogsCall).mockRejectedValue(new Error("Network error"));
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
+      act(() => {
+        result.current.handleFilterReset();
+      });
 
-    act(() => {
-      result.current.handleFilterChange({ "Key Alias": "alias-1" });
-    });
-
-    await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalled(), {
-      timeout: 500,
-    });
-
-    expect(result.current.filteredLogs).toBeDefined();
-    expect(result.current.filters).toBeDefined();
-  });
-
-  it("should clear backendFilteredLogs when handleFilterReset is called", async () => {
-    const backendLog = createLogEntry({ request_id: "backend-req" });
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([backendLog]),
-    );
-    const logs = createPaginatedResponse([createLogEntry({ request_id: "client-req" })]);
-    const { result } = renderHook(() => useLogFilterLogic({ ...defaultProps, logs }), { wrapper });
-
-    act(() => {
-      result.current.handleFilterChange({ "Key Alias": "alias-1" });
-    });
-
-    await waitFor(
-      () => {
-        expect(result.current.filteredLogs.data[0].request_id).toBe("backend-req");
-      },
-      { timeout: 500 },
-    );
-
-    act(() => {
-      result.current.handleFilterReset();
-    });
-
-    expect(result.current.filteredLogs.data).toEqual(logs.data);
-    expect(result.current.filteredLogs.data[0].request_id).toBe("client-req");
-  });
-
-  it("should pass correct start_date, end_date, sort_by, and sort_order to uiSpendLogsCall", async () => {
-    vi.mocked(uiSpendLogsCall).mockResolvedValue(
-      createPaginatedResponse([createLogEntry()]),
-    );
-    const logs = createPaginatedResponse([createLogEntry()]);
-    const { result } = renderHook(
-      () =>
-        useLogFilterLogic({
-          ...defaultProps,
-          logs,
-          startTime: "2025-01-15T00:00:00Z",
-          endTime: "2025-01-15T23:59:59Z",
-          isCustomDate: true,
-          sortBy: "spend",
-          sortOrder: "asc",
-        }),
-      { wrapper },
-    );
-
-    act(() => {
-      result.current.handleFilterChange({ "Key Alias": "alias-1" });
-    });
-
-    await waitFor(
-      () => {
-        expect(uiSpendLogsCall).toHaveBeenCalledWith(
-          expect.objectContaining({
-            start_date: "2025-01-15 00:00:00",
-            end_date: "2025-01-15 23:59:59",
-            params: expect.objectContaining({
-              sort_by: "spend",
-              sort_order: "asc",
+      await waitFor(
+        () => {
+          expect(uiSpendLogsCall).toHaveBeenLastCalledWith(
+            expect.objectContaining({
+              params: expect.objectContaining({
+                team_id: undefined,
+                api_key: undefined,
+                request_id: undefined,
+                user_id: undefined,
+                end_user: undefined,
+                status_filter: undefined,
+                model_id: undefined,
+                key_alias: undefined,
+                error_code: undefined,
+                error_message: undefined,
+              }),
             }),
-          }),
+          );
+        },
+        { timeout: 500 },
+      );
+    });
+  });
+
+  describe("handleFilterChange", () => {
+    it("calls setCurrentPage(1) when filters change", () => {
+      const setCurrentPage = vi.fn();
+      const { result } = renderFilterHook({ setCurrentPage });
+
+      act(() => {
+        result.current.handleFilterChange({ "Team ID": "team-1" });
+      });
+
+      expect(setCurrentPage).toHaveBeenCalledWith(1);
+    });
+
+    it("merges partial updates without clobbering other filter keys", () => {
+      const { result } = renderFilterHook();
+
+      act(() => {
+        result.current.handleFilterChange({ "Team ID": "team-a" });
+      });
+      expect(result.current.filters["Team ID"]).toBe("team-a");
+
+      act(() => {
+        result.current.handleFilterChange({ Model: "gpt-4" });
+      });
+
+      expect(result.current.filters["Team ID"]).toBe("team-a");
+      expect(result.current.filters["Model"]).toBe("gpt-4");
+    });
+
+    it("does not call setCurrentPage when filters are identical", async () => {
+      const setCurrentPage = vi.fn();
+      const { result } = renderFilterHook({ setCurrentPage });
+
+      act(() => {
+        result.current.handleFilterChange({ "Team ID": "team-1" });
+      });
+
+      await waitFor(() => expect(setCurrentPage).toHaveBeenCalledTimes(1), { timeout: 500 });
+
+      setCurrentPage.mockClear();
+
+      await act(async () => {
+        result.current.handleFilterChange({ "Team ID": "team-1" });
+        await new Promise((resolve) => setTimeout(resolve, 350));
+      });
+
+      expect(setCurrentPage).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("query params — filter keys", () => {
+    const filterCases: Array<{
+      filterKey: keyof LogFilterState;
+      paramName: string;
+      value: string;
+    }> = [
+      { filterKey: "Team ID", paramName: "team_id", value: "team-a" },
+      { filterKey: "Key Hash", paramName: "api_key", value: "key-x" },
+      { filterKey: "Request ID", paramName: "request_id", value: "req-xyz" },
+      { filterKey: "User ID", paramName: "user_id", value: "user-123" },
+      { filterKey: "End User", paramName: "end_user", value: "user-a" },
+      { filterKey: "Status", paramName: "status_filter", value: "error" },
+      { filterKey: "Model", paramName: "model_id", value: "gpt-4" },
+      { filterKey: "Public model / search tool", paramName: "model", value: "tavily-marketing" },
+      { filterKey: "Error Code", paramName: "error_code", value: "429" },
+      { filterKey: "Error Message", paramName: "error_message", value: "rate limit exceeded" },
+    ];
+
+    it.each(filterCases)(
+      "forwards $filterKey as params.$paramName to uiSpendLogsCall",
+      async ({ filterKey, paramName, value }) => {
+        const { result } = renderFilterHook();
+
+        act(() => {
+          result.current.handleFilterChange({ [filterKey]: value } as Partial<LogFilterState>);
+        });
+
+        await waitFor(
+          () => {
+            expect(uiSpendLogsCall).toHaveBeenCalledWith(
+              expect.objectContaining({
+                params: expect.objectContaining({ [paramName]: value }),
+              }),
+            );
+          },
+          { timeout: 500 },
         );
       },
-      { timeout: 500 },
     );
   });
+
+  describe("query params — date & sort", () => {
+    it("passes start_date, end_date, sort_by, and sort_order to uiSpendLogsCall", async () => {
+      const { result } = renderFilterHook({
+        startTime: "2025-01-15T00:00:00Z",
+        endTime: "2025-01-15T23:59:59Z",
+        isCustomDate: true,
+        sortBy: "spend" as LogsSortField,
+        sortOrder: "asc",
+      });
+
+      act(() => {
+        result.current.handleFilterChange({ "Key Alias": "alias-1" });
+      });
+
+      await waitFor(
+        () => {
+          expect(uiSpendLogsCall).toHaveBeenCalledWith(
+            expect.objectContaining({
+              start_date: "2025-01-15 00:00:00",
+              end_date: "2025-01-15 23:59:59",
+              params: expect.objectContaining({
+                sort_by: "spend",
+                sort_order: "asc",
+              }),
+            }),
+          );
+        },
+        { timeout: 500 },
+      );
+    });
+  });
+
+  describe("debounce", () => {
+    it("calls uiSpendLogsCall after the debounce elapses for text filters", async () => {
+      const { result } = renderFilterHook();
+
+      act(() => {
+        result.current.handleFilterChange({ "Key Hash": "hash-1" });
+      });
+
+      await waitFor(
+        () =>
+          expect(uiSpendLogsCall).toHaveBeenCalledWith(
+            expect.objectContaining({
+              params: expect.objectContaining({ api_key: "hash-1" }),
+            }),
+          ),
+        { timeout: 500 },
+      );
+    });
+
+    it("does not call uiSpendLogsCall with a text filter before the debounce elapses", async () => {
+      const { result } = renderFilterHook();
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalled(), { timeout: 500 });
+      vi.mocked(uiSpendLogsCall).mockClear();
+
+      act(() => {
+        result.current.handleFilterChange({ "Key Hash": "hash-1" });
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      expect(uiSpendLogsCall).not.toHaveBeenCalledWith(
+        expect.objectContaining({
+          params: expect.objectContaining({ api_key: "hash-1" }),
+        }),
+      );
+
+      await waitFor(
+        () =>
+          expect(uiSpendLogsCall).toHaveBeenCalledWith(
+            expect.objectContaining({
+              params: expect.objectContaining({ api_key: "hash-1" }),
+            }),
+          ),
+        { timeout: 500 },
+      );
+    });
+
+    it("applies dropdown filter changes without waiting for the debounce", async () => {
+      const { result } = renderFilterHook();
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalled(), { timeout: 500 });
+      vi.mocked(uiSpendLogsCall).mockClear();
+
+      act(() => {
+        result.current.handleFilterChange({ "Team ID": "team-instant" });
+      });
+
+      await waitFor(
+        () =>
+          expect(uiSpendLogsCall).toHaveBeenCalledWith(
+            expect.objectContaining({
+              params: expect.objectContaining({ team_id: "team-instant" }),
+            }),
+          ),
+        { timeout: 100 },
+      );
+    });
+
+    // Guards the TEXT_FILTER_KEYS fix: this free-text filter must debounce, not fire per keystroke.
+    it("debounces the 'Public model / search tool' text filter", async () => {
+      const { result } = renderFilterHook();
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalled(), { timeout: 500 });
+      vi.mocked(uiSpendLogsCall).mockClear();
+
+      act(() => {
+        result.current.handleFilterChange({ "Public model / search tool": "tavily-marketing" });
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      expect(uiSpendLogsCall).not.toHaveBeenCalledWith(
+        expect.objectContaining({
+          params: expect.objectContaining({ model: "tavily-marketing" }),
+        }),
+      );
+
+      await waitFor(
+        () =>
+          expect(uiSpendLogsCall).toHaveBeenCalledWith(
+            expect.objectContaining({
+              params: expect.objectContaining({ model: "tavily-marketing" }),
+            }),
+          ),
+        { timeout: 500 },
+      );
+    });
+  });
+
+  describe("handleFilterReset", () => {
+    it("flushes the text-filter debounce so a pending typed value is not sent", async () => {
+      const { result } = renderFilterHook();
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalled(), { timeout: 500 });
+      vi.mocked(uiSpendLogsCall).mockClear();
+
+      act(() => {
+        result.current.handleFilterChange({ "Key Hash": "pending-hash" });
+      });
+
+      act(() => {
+        result.current.handleFilterReset();
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      for (const call of vi.mocked(uiSpendLogsCall).mock.calls) {
+        expect(call[0].params?.api_key).toBeUndefined();
+      }
+    });
+  });
+
+  describe("backend filtered logs", () => {
+    it("returns the query payload as filteredLogs when backend filters are active", async () => {
+      const backendLog = { request_id: "backend-req" };
+      vi.mocked(uiSpendLogsCall).mockResolvedValue({
+        data: [backendLog],
+        total: 1,
+        page: 1,
+        page_size: 50,
+        total_pages: 1,
+      } as PaginatedResponse);
+
+      const { result } = renderFilterHook();
+
+      act(() => {
+        result.current.handleFilterChange({ "Key Alias": "alias-1" });
+      });
+
+      await waitFor(
+        () => {
+          expect(result.current.filteredLogs.data).toHaveLength(1);
+          expect(result.current.filteredLogs.data[0].request_id).toBe("backend-req");
+        },
+        { timeout: 500 },
+      );
+    });
+
+    it("returns empty data when the API returns an empty payload", async () => {
+      vi.mocked(uiSpendLogsCall).mockResolvedValue(emptyResponse);
+      const { result } = renderFilterHook();
+
+      act(() => {
+        result.current.handleFilterChange({ "Key Alias": "alias-1" });
+      });
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalled(), { timeout: 500 });
+
+      expect(result.current.filteredLogs.data).toHaveLength(0);
+    });
+  });
+
+  describe("refetch triggers", () => {
+    it("refetches when sortBy changes", async () => {
+      const { rerender } = renderHook(
+        (props: { sortBy: LogsSortField }) => {
+          const [filters, setFilters] = useState<LogFilterState>(defaultFilters);
+          return useLogFilterLogic({
+            ...defaultProps,
+            filters,
+            setFilters,
+            setCurrentPage: vi.fn(),
+            sortBy: props.sortBy,
+          });
+        },
+        { wrapper, initialProps: { sortBy: "startTime" } },
+      );
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(1), { timeout: 500 });
+
+      rerender({ sortBy: "spend" });
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(2), { timeout: 500 });
+      expect(uiSpendLogsCall).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          params: expect.objectContaining({ sort_by: "spend" }),
+        }),
+      );
+    });
+
+    it("refetches when sortOrder changes", async () => {
+      const { rerender } = renderHook(
+        (props: { sortOrder: "asc" | "desc" }) => {
+          const [filters, setFilters] = useState<LogFilterState>(defaultFilters);
+          return useLogFilterLogic({
+            ...defaultProps,
+            filters,
+            setFilters,
+            setCurrentPage: vi.fn(),
+            sortOrder: props.sortOrder,
+          });
+        },
+        { wrapper, initialProps: { sortOrder: "desc" } },
+      );
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(1), { timeout: 500 });
+
+      rerender({ sortOrder: "asc" });
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(2), { timeout: 500 });
+      expect(uiSpendLogsCall).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          params: expect.objectContaining({ sort_order: "asc" }),
+        }),
+      );
+    });
+
+    it("refetches when currentPage changes", async () => {
+      const { rerender } = renderHook(
+        (props: { currentPage: number }) => {
+          const [filters, setFilters] = useState<LogFilterState>(defaultFilters);
+          return useLogFilterLogic({
+            ...defaultProps,
+            filters,
+            setFilters,
+            setCurrentPage: vi.fn(),
+            currentPage: props.currentPage,
+          });
+        },
+        { wrapper, initialProps: { currentPage: 1 } },
+      );
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(1), { timeout: 500 });
+
+      rerender({ currentPage: 2 });
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(2), { timeout: 500 });
+      expect(uiSpendLogsCall).toHaveBeenLastCalledWith(expect.objectContaining({ page: 2 }));
+    });
+
+    it("refetches when startTime changes", async () => {
+      const { rerender } = renderHook(
+        (props: { startTime: string }) => {
+          const [filters, setFilters] = useState<LogFilterState>(defaultFilters);
+          return useLogFilterLogic({
+            ...defaultProps,
+            filters,
+            setFilters,
+            setCurrentPage: vi.fn(),
+            startTime: props.startTime,
+          });
+        },
+        { wrapper, initialProps: { startTime: "2025-01-01T00:00:00Z" } },
+      );
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(1), { timeout: 500 });
+
+      rerender({ startTime: "2025-01-02T00:00:00Z" });
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(2), { timeout: 500 });
+      expect(uiSpendLogsCall).toHaveBeenLastCalledWith(expect.objectContaining({ start_date: "2025-01-02 00:00:00" }));
+    });
+
+    it("refetches with a different end_date when isCustomDate toggles", async () => {
+      const customEndTime = "2025-01-15T23:59:59Z";
+      const customEndFormatted = "2025-01-15 23:59:59";
+
+      const { rerender } = renderHook(
+        (props: { isCustomDate: boolean }) => {
+          const [filters, setFilters] = useState<LogFilterState>(defaultFilters);
+          return useLogFilterLogic({
+            ...defaultProps,
+            endTime: customEndTime,
+            filters,
+            setFilters,
+            setCurrentPage: vi.fn(),
+            isCustomDate: props.isCustomDate,
+          });
+        },
+        { wrapper, initialProps: { isCustomDate: false } },
+      );
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(1), { timeout: 500 });
+      const firstEndDate = vi.mocked(uiSpendLogsCall).mock.calls[0][0].end_date;
+      expect(firstEndDate).not.toBe(customEndFormatted);
+
+      rerender({ isCustomDate: true });
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalledTimes(2), { timeout: 500 });
+      expect(vi.mocked(uiSpendLogsCall).mock.calls[1][0].end_date).toBe(customEndFormatted);
+    });
+  });
+
+  describe("query enablement", () => {
+    const nullCredentialCases: Array<{ name: string; override: HookOverrides }> = [
+      { name: "accessToken", override: { accessToken: null } },
+      { name: "token", override: { token: null } },
+      { name: "userRole", override: { userRole: null } },
+      { name: "userID", override: { userID: null } },
+    ];
+
+    it.each(nullCredentialCases)("does not call uiSpendLogsCall when $name is null", async ({ override }) => {
+      const { result } = renderFilterHook(override);
+
+      act(() => {
+        result.current.handleFilterChange({ "Key Alias": "alias-1" });
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 350));
+
+      expect(uiSpendLogsCall).not.toHaveBeenCalled();
+    });
+
+    it("does not call uiSpendLogsCall when activeTab is not 'request logs'", async () => {
+      const { result } = renderFilterHook({ activeTab: "audit logs" });
+
+      act(() => {
+        result.current.handleFilterChange({ "Key Alias": "alias-1" });
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 350));
+
+      expect(uiSpendLogsCall).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("filterByCurrentUser", () => {
+    it("sends user_id: userID when the User ID filter is blank", async () => {
+      const { result } = renderFilterHook({
+        filterByCurrentUser: true,
+        userID: "me-123",
+      });
+
+      act(() => {
+        result.current.handleFilterChange({ "Key Alias": "alias-1" });
+      });
+
+      await waitFor(
+        () => {
+          expect(uiSpendLogsCall).toHaveBeenCalledWith(
+            expect.objectContaining({
+              params: expect.objectContaining({ user_id: "me-123" }),
+            }),
+          );
+        },
+        { timeout: 500 },
+      );
+    });
+  });
+
+  describe("error handling", () => {
+    it("does not crash when uiSpendLogsCall throws", async () => {
+      vi.mocked(uiSpendLogsCall).mockRejectedValue(new Error("Network error"));
+      const { result } = renderFilterHook();
+
+      act(() => {
+        result.current.handleFilterChange({ "Key Alias": "alias-1" });
+      });
+
+      await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalled(), { timeout: 500 });
+
+      expect(result.current.filteredLogs).toBeDefined();
+      expect(result.current.filteredLogs.data).toEqual([]);
+    });
+  });
+});
+
+describe("getLiveTailRefetchInterval", () => {
+  it("polls every 15s when live tail is on and on page 1", () => {
+    expect(getLiveTailRefetchInterval(true, 1)).toBe(LIVE_TAIL_INTERVAL_MS);
+  });
+
+  it("does not poll when live tail is off", () => {
+    expect(getLiveTailRefetchInterval(false, 1)).toBe(false);
+  });
+
+  it("does not poll when not on page 1, even with live tail on", () => {
+    expect(getLiveTailRefetchInterval(true, 2)).toBe(false);
+  });
 });
diff --git a/ui/litellm-dashboard/src/components/view_logs/log_filter_logic.tsx b/ui/litellm-dashboard/src/components/view_logs/log_filter_logic.tsx
index 8f916999c1..d9830a83f6 100644
--- a/ui/litellm-dashboard/src/components/view_logs/log_filter_logic.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/log_filter_logic.tsx
@@ -1,13 +1,28 @@
 import moment from "moment";
-import { useCallback, useEffect, useState, useRef, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { uiSpendLogsCall } from "../networking";
 import { Team } from "../key_team_helpers/key_list";
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { fetchAllTeams } from "../../components/key_team_helpers/filter_helpers";
-import { debounce } from "lodash";
 import { defaultPageSize } from "../constants";
-import { PaginatedResponse } from ".";
-import type { LogsSortField } from "./columns";
+import type { LogEntry, LogsSortField } from "./columns";
+
+export interface PaginatedResponse {
+  data: LogEntry[];
+  total: number;
+  page: number;
+  page_size: number;
+  total_pages: number;
+}
+
+function useDebouncedValue<T>(value: T, delayMs: number): [T, React.Dispatch<React.SetStateAction<T>>] {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+  return [debounced, setDebounced];
+}
 
 /** Spend log `model` column (LLM public model name or `search_tool_name` for /search). */
 export const FILTER_KEYS = {
@@ -28,324 +43,188 @@ export const FILTER_KEYS = {
 export type FilterKey = keyof typeof FILTER_KEYS;
 export type LogFilterState = Record<(typeof FILTER_KEYS)[FilterKey], string>;
 
+// Keys whose UI is a free-form text input; only these need debouncing.
+const TEXT_FILTER_KEYS: readonly (keyof LogFilterState)[] = [
+  FILTER_KEYS.KEY_HASH,
+  FILTER_KEYS.ERROR_MESSAGE,
+  FILTER_KEYS.REQUEST_ID,
+  FILTER_KEYS.USER_ID,
+  FILTER_KEYS.PUBLIC_MODEL_OR_SEARCH_TOOL,
+];
+
+// Live-tail polls every 15s, but only on page 1 (newest) while live tail is on.
+export const LIVE_TAIL_INTERVAL_MS = 15000;
+export const getLiveTailRefetchInterval = (isLiveTail: boolean, currentPage: number): number | false =>
+  isLiveTail && currentPage === 1 ? LIVE_TAIL_INTERVAL_MS : false;
+
+export const defaultFilters: LogFilterState = {
+  [FILTER_KEYS.TEAM_ID]: "",
+  [FILTER_KEYS.KEY_HASH]: "",
+  [FILTER_KEYS.REQUEST_ID]: "",
+  [FILTER_KEYS.MODEL]: "",
+  [FILTER_KEYS.PUBLIC_MODEL_OR_SEARCH_TOOL]: "",
+  [FILTER_KEYS.USER_ID]: "",
+  [FILTER_KEYS.END_USER]: "",
+  [FILTER_KEYS.STATUS]: "",
+  [FILTER_KEYS.KEY_ALIAS]: "",
+  [FILTER_KEYS.ERROR_CODE]: "",
+  [FILTER_KEYS.ERROR_MESSAGE]: "",
+};
+
 export function useLogFilterLogic({
-  logs,
   accessToken,
-  startTime, // Receive from SpendLogsTable
-  endTime, // Receive from SpendLogsTable
+  token,
+  userRole,
+  userID,
+  filters,
+  setFilters,
+  filterByCurrentUser,
+  activeTab,
+  isLiveTail,
+  startTime,
+  endTime,
   pageSize = defaultPageSize,
   isCustomDate,
   setCurrentPage,
-  userID,
-  userRole,
   sortBy = "startTime",
   sortOrder = "desc",
   currentPage = 1,
 }: {
-  logs: PaginatedResponse;
   accessToken: string | null;
+  token: string | null;
+  userRole: string | null;
+  userID: string | null;
+  filters: LogFilterState;
+  setFilters: React.Dispatch<React.SetStateAction<LogFilterState>>;
+  filterByCurrentUser: boolean | null;
+  activeTab: string;
+  isLiveTail: boolean;
   startTime: string;
   endTime: string;
   pageSize?: number;
   isCustomDate: boolean;
   setCurrentPage: (page: number) => void;
-  userID: string | null;
-  userRole: string | null;
   sortBy?: LogsSortField;
   sortOrder?: "asc" | "desc";
   currentPage?: number;
 }) {
-  const defaultFilters = useMemo<LogFilterState>(
-    () => ({
-      [FILTER_KEYS.TEAM_ID]: "",
-      [FILTER_KEYS.KEY_HASH]: "",
-      [FILTER_KEYS.REQUEST_ID]: "",
-      [FILTER_KEYS.MODEL]: "",
-      [FILTER_KEYS.PUBLIC_MODEL_OR_SEARCH_TOOL]: "",
-      [FILTER_KEYS.USER_ID]: "",
-      [FILTER_KEYS.END_USER]: "",
-      [FILTER_KEYS.STATUS]: "",
-      [FILTER_KEYS.KEY_ALIAS]: "",
-      [FILTER_KEYS.ERROR_CODE]: "",
-      [FILTER_KEYS.ERROR_MESSAGE]: "",
-    }),
-    [],
-  );
+  const [debouncedFilters, setDebouncedFilters] = useDebouncedValue(filters, 300);
 
-  const [filters, setFilters] = useState<LogFilterState>(defaultFilters);
-  const [backendFilteredLogs, setBackendFilteredLogs] = useState<PaginatedResponse | null>(null);
-  const lastSearchTimestamp = useRef(0);
+  // Live values for dropdown keys, debounced for text keys.
+  const effectiveFilters = useMemo(() => {
+    const merged = { ...filters };
+    for (const k of TEXT_FILTER_KEYS) {
+      merged[k] = debouncedFilters[k];
+    }
+    return merged;
+  }, [filters, debouncedFilters]);
 
-  // Refs that always hold the latest filters and hasBackendFilters values.
-  // The sort/page/time effect below intentionally omits these from its dep array
-  // to avoid double-fetches when a filter changes; reading from refs instead of
-  // the closure prevents stale-closure bugs (e.g. the effect using a snapshot of
-  // filters taken before the user selected Key Alias).
-  const filtersRef = useRef(filters);
-  const hasBackendFiltersRef = useRef(false);
-  const performSearch = useCallback(
-    async (filters: LogFilterState, page = 1) => {
-      if (!accessToken) return;
-
-      console.log("Filters being sent to API:", filters);
-      const currentTimestamp = Date.now();
-      lastSearchTimestamp.current = currentTimestamp;
+  const logsQuery = useQuery<PaginatedResponse>({
+    queryKey: [
+      "logs",
+      "table",
+      currentPage,
+      pageSize,
+      startTime,
+      endTime,
+      isCustomDate,
+      effectiveFilters,
+      filterByCurrentUser ? userID : null,
+      sortBy,
+      sortOrder,
+    ],
+    queryFn: async () => {
+      if (!accessToken || !token || !userRole || !userID) {
+        return {
+          data: [],
+          total: 0,
+          page: 1,
+          page_size: pageSize,
+          total_pages: 0,
+        };
+      }
 
       const formattedStartTime = moment(startTime).utc().format("YYYY-MM-DD HH:mm:ss");
       const formattedEndTime = isCustomDate
         ? moment(endTime).utc().format("YYYY-MM-DD HH:mm:ss")
         : moment().utc().format("YYYY-MM-DD HH:mm:ss");
 
-      try {
-        const response = await uiSpendLogsCall({
-          accessToken,
-          start_date: formattedStartTime,
-          end_date: formattedEndTime,
-          page,
-          page_size: pageSize,
-          params: {
-            api_key: filters[FILTER_KEYS.KEY_HASH] || undefined,
-            team_id: filters[FILTER_KEYS.TEAM_ID] || undefined,
-            request_id: filters[FILTER_KEYS.REQUEST_ID] || undefined,
-            user_id: filters[FILTER_KEYS.USER_ID] || undefined,
-            end_user: filters[FILTER_KEYS.END_USER] || undefined,
-            status_filter: filters[FILTER_KEYS.STATUS] || undefined,
-            model_id: filters[FILTER_KEYS.MODEL] || undefined,
-            model: filters[FILTER_KEYS.PUBLIC_MODEL_OR_SEARCH_TOOL] || undefined,
-            key_alias: filters[FILTER_KEYS.KEY_ALIAS] || undefined,
-            error_code: filters[FILTER_KEYS.ERROR_CODE] || undefined,
-            error_message: filters[FILTER_KEYS.ERROR_MESSAGE] || undefined,
-            sort_by: sortBy,
-            sort_order: sortOrder,
-          },
-        });
+      const response = await uiSpendLogsCall({
+        accessToken,
+        start_date: formattedStartTime,
+        end_date: formattedEndTime,
+        page: currentPage,
+        page_size: pageSize,
+        params: {
+          api_key: effectiveFilters[FILTER_KEYS.KEY_HASH] || undefined,
+          team_id: effectiveFilters[FILTER_KEYS.TEAM_ID] || undefined,
+          request_id: effectiveFilters[FILTER_KEYS.REQUEST_ID] || undefined,
+          user_id: effectiveFilters[FILTER_KEYS.USER_ID] || (filterByCurrentUser ? userID ?? undefined : undefined),
+          end_user: effectiveFilters[FILTER_KEYS.END_USER] || undefined,
+          status_filter: effectiveFilters[FILTER_KEYS.STATUS] || undefined,
+          model_id: effectiveFilters[FILTER_KEYS.MODEL] || undefined,
+          model: effectiveFilters[FILTER_KEYS.PUBLIC_MODEL_OR_SEARCH_TOOL] || undefined,
+          key_alias: effectiveFilters[FILTER_KEYS.KEY_ALIAS] || undefined,
+          error_code: effectiveFilters[FILTER_KEYS.ERROR_CODE] || undefined,
+          error_message: effectiveFilters[FILTER_KEYS.ERROR_MESSAGE] || undefined,
+          sort_by: sortBy,
+          sort_order: sortOrder,
+        },
+      });
 
-        if (currentTimestamp === lastSearchTimestamp.current) {
-          setBackendFilteredLogs({
-            ...response,
-            data: response.data ?? [],
-          });
-        }
-      } catch (error) {
-        console.error("Error searching users:", error);
-        setBackendFilteredLogs({
-          data: [],
-          total: 0,
-          page: 1,
-          page_size: pageSize,
-          total_pages: 0,
-        });
-      }
+      return response;
     },
-    [accessToken, startTime, endTime, isCustomDate, pageSize, sortBy, sortOrder],
-  );
+    enabled: !!accessToken && !!token && !!userRole && !!userID && activeTab === "request logs",
+    refetchInterval: getLiveTailRefetchInterval(isLiveTail, currentPage),
+    placeholderData: keepPreviousData,
+    // Only live-tail-poll while the tab is visible.
+    refetchIntervalInBackground: false,
+  });
 
-  const debouncedSearch = useMemo(
-    () => debounce((filters: LogFilterState, page: number) => performSearch(filters, page), 300),
-    [performSearch],
-  );
+  const filteredLogs: PaginatedResponse = logsQuery.data ?? {
+    data: [],
+    total: 0,
+    page: 1,
+    page_size: pageSize,
+    total_pages: 0,
+  };
 
-  useEffect(() => {
-    return () => debouncedSearch.cancel();
-  }, [debouncedSearch]);
-
-  // Determine when backend filters are active (server-side filtering)
-  const hasBackendFilters = useMemo(
-    () =>
-      !!(
-        filters[FILTER_KEYS.KEY_ALIAS] ||
-        filters[FILTER_KEYS.KEY_HASH] ||
-        filters[FILTER_KEYS.REQUEST_ID] ||
-        filters[FILTER_KEYS.USER_ID] ||
-        filters[FILTER_KEYS.END_USER] ||
-        filters[FILTER_KEYS.ERROR_CODE] ||
-        filters[FILTER_KEYS.ERROR_MESSAGE] ||
-        filters[FILTER_KEYS.MODEL] ||
-        filters[FILTER_KEYS.PUBLIC_MODEL_OR_SEARCH_TOOL]
-      ),
-    [filters],
-  );
-
-  // Keep refs in sync on every render so the sort/page/time effect always reads
-  // the latest values without those values being in its dep array.
-  useEffect(() => {
-    filtersRef.current = filters;
-    hasBackendFiltersRef.current = hasBackendFilters;
-  }, [filters, hasBackendFilters]);
-
-  // Refetch when sort, page, or time range changes (backend filters use their own fetch, not the main query)
-  useEffect(() => {
-    if (hasBackendFiltersRef.current && accessToken) {
-      // Cancel any pending debounced search to prevent it from overwriting this page's results
-      debouncedSearch.cancel();
-      performSearch(filtersRef.current, currentPage);
-    }
-    // filters / hasBackendFilters are read via refs — avoids stale-closure bugs
-    // when sort/page/time changes after a filter (e.g. Key Alias) was set.
-    // debouncedSearch / performSearch: filter changes go through handleFilterChange
-    // → debouncedSearch; adding them here would cause double-fetches on filter apply.
-    // accessToken: stable across sort/page/time changes.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sortBy, sortOrder, currentPage, startTime, endTime, isCustomDate]);
-
-  // Compute client-side filtered logs directly from incoming logs and filters
-  const clientDerivedFilteredLogs: PaginatedResponse = useMemo(() => {
-    if (!logs || !logs.data) {
-      return {
-        data: [],
-        total: 0,
-        page: 1,
-        page_size: pageSize,
-        total_pages: 0,
-      };
-    }
-
-    // If backend filters are on, don't perform client-side filtering here
-    if (hasBackendFilters) {
-      return logs;
-    }
-
-    let filteredData = [...logs.data];
-
-    if (filters[FILTER_KEYS.TEAM_ID]) {
-      filteredData = filteredData.filter((log) => log.team_id === filters[FILTER_KEYS.TEAM_ID]);
-    }
-
-    if (filters[FILTER_KEYS.STATUS]) {
-      filteredData = filteredData.filter((log) => {
-        if (filters[FILTER_KEYS.STATUS] === "success") {
-          return !log.status || log.status === "success";
-        }
-        return log.status === filters[FILTER_KEYS.STATUS];
-      });
-    }
-
-    if (filters[FILTER_KEYS.MODEL]) {
-      filteredData = filteredData.filter((log) => log.model_id === filters[FILTER_KEYS.MODEL]);
-    }
-
-    if (filters[FILTER_KEYS.PUBLIC_MODEL_OR_SEARCH_TOOL]) {
-      const m = filters[FILTER_KEYS.PUBLIC_MODEL_OR_SEARCH_TOOL];
-      filteredData = filteredData.filter((log) => log.model === m);
-    }
-
-    if (filters[FILTER_KEYS.KEY_HASH]) {
-      filteredData = filteredData.filter((log) => log.api_key === filters[FILTER_KEYS.KEY_HASH]);
-    }
-
-    if (filters[FILTER_KEYS.END_USER]) {
-      filteredData = filteredData.filter((log) => log.end_user === filters[FILTER_KEYS.END_USER]);
-    }
-
-    if (filters[FILTER_KEYS.ERROR_CODE]) {
-      filteredData = filteredData.filter((log) => {
-        const metadata = log.metadata || {};
-        const errorInfo = metadata.error_information;
-        return errorInfo && errorInfo.error_code === filters[FILTER_KEYS.ERROR_CODE];
-      });
-    }
-
-    return {
-      data: filteredData,
-      total: logs.total,
-      page: logs.page,
-      page_size: logs.page_size,
-      total_pages: logs.total_pages,
-    };
-  }, [logs, filters, hasBackendFilters]);
-
-  // Choose which filtered logs to expose: backend result when active, otherwise client-derived
-  const filteredLogs: PaginatedResponse = useMemo(() => {
-    if (hasBackendFilters) {
-      // When backend filters are active, only show backend results.
-      // If search hasn't completed yet (null), show empty state rather than
-      // falling back to unfiltered logs — that caused filtered views to
-      // display mismatched data when the filter matched zero rows.
-      if (backendFilteredLogs !== null) {
-        return backendFilteredLogs;
-      }
-      return {
-        data: [],
-        total: 0,
-        page: 1,
-        page_size: pageSize,
-        total_pages: 0,
-      };
-    }
-    return clientDerivedFilteredLogs;
-  }, [hasBackendFilters, backendFilteredLogs, clientDerivedFilteredLogs]);
-
-  // Fetch all teams and users for potential filter dropdowns (optional, can be adapted)
   const { data: allTeams } = useQuery<Team[], Error>({
     queryKey: ["allTeamsForLogFilters", accessToken],
     queryFn: async () => {
       if (!accessToken) return [];
-      // Use fetchAllTeams helper function for consistency and abstraction
-      // Assuming fetchAllTeams returns Team[] directly
       const teamsData = await fetchAllTeams(accessToken);
-      return teamsData || []; // Ensure it returns an array
+      return teamsData || [];
     },
     enabled: !!accessToken,
   });
 
-  // Update filters state
   const handleFilterChange = (newFilters: Partial<LogFilterState>) => {
     setFilters((prev) => {
       const updatedFilters = { ...prev, ...newFilters };
-
-      // Ensure all keys in LogFilterState are present, defaulting to '' if not in newFilters
       for (const key of Object.keys(defaultFilters) as Array<keyof LogFilterState>) {
         if (!(key in updatedFilters)) {
           updatedFilters[key] = defaultFilters[key];
         }
       }
-
-      // Only call debouncedSearch if filters have actually changed
       if (JSON.stringify(updatedFilters) !== JSON.stringify(prev)) {
         setCurrentPage(1);
-        setBackendFilteredLogs(null);
-        debouncedSearch(updatedFilters, 1);
       }
-
       return updatedFilters as LogFilterState;
     });
   };
 
   const handleFilterReset = () => {
-    // Reset filters state
     setFilters(defaultFilters);
-
-    // Clear backend filtered logs to ensure fresh render
-    setBackendFilteredLogs(null);
-
-    // Cancel any in-flight debounced search
-    debouncedSearch.cancel();
-
-    // Reset to first page so the unfiltered view starts at page 1
+    setDebouncedFilters(defaultFilters);
     setCurrentPage(1);
   };
 
-  // Expose a filter-aware refetch so callers (e.g. the manual Fetch button) can
-  // refresh results while keeping all active backend filters intact.  The plain
-  // `logs.refetch()` in the parent only re-runs the main TanStack Query, which
-  // does not carry key_alias or other backend-only filter params.
-  const refetchWithFilters = useCallback(
-    (page = currentPage) => {
-      if (hasBackendFilters && accessToken) {
-        debouncedSearch.cancel();
-        performSearch(filters, page);
-      }
-    },
-    [hasBackendFilters, accessToken, filters, currentPage, performSearch, debouncedSearch],
-  );
-
   return {
-    filters,
+    logsQuery,
     filteredLogs,
-    hasBackendFilters,
     allTeams,
     handleFilterChange,
     handleFilterReset,
-    refetchWithFilters,
   };
 }
diff --git a/ui/litellm-dashboard/src/components/view_logs/logs_utils.test.tsx b/ui/litellm-dashboard/src/components/view_logs/logs_utils.test.tsx
new file mode 100644
index 0000000000..b0b74df4c2
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/logs_utils.test.tsx
@@ -0,0 +1,45 @@
+import moment from "moment";
+import { describe, expect, it } from "vitest";
+import { getTimeRangeDisplay } from "./logs_utils";
+
+// startTime built relative to "now"; getTimeRangeDisplay computes now() internally.
+const ago = (amount: number, unit: moment.unitOfTime.DurationConstructor) =>
+  moment().subtract(amount, unit).toISOString();
+
+describe("getTimeRangeDisplay", () => {
+  it("labels a ~1-minute window as 'Last 1 Minute'", () => {
+    expect(getTimeRangeDisplay(false, ago(1, "minutes"), "")).toBe("Last 1 Minute");
+  });
+
+  it("labels a ~10-minute window as 'Last 15 Minutes'", () => {
+    expect(getTimeRangeDisplay(false, ago(10, "minutes"), "")).toBe("Last 15 Minutes");
+  });
+
+  it("labels a ~30-minute window as 'Last Hour'", () => {
+    expect(getTimeRangeDisplay(false, ago(30, "minutes"), "")).toBe("Last Hour");
+  });
+
+  it("labels a ~2-hour window as 'Last 4 Hours'", () => {
+    expect(getTimeRangeDisplay(false, ago(2, "hours"), "")).toBe("Last 4 Hours");
+  });
+
+  it("labels a ~10-hour window as 'Last 24 Hours'", () => {
+    expect(getTimeRangeDisplay(false, ago(10, "hours"), "")).toBe("Last 24 Hours");
+  });
+
+  it("labels a ~3-day window as 'Last 7 Days'", () => {
+    expect(getTimeRangeDisplay(false, ago(3, "days"), "")).toBe("Last 7 Days");
+  });
+
+  it("falls back to a 'MMM D - MMM D' range beyond 7 days", () => {
+    const label = getTimeRangeDisplay(false, ago(30, "days"), "");
+    expect(label).toMatch(/^[A-Z][a-z]{2} \d{1,2} - [A-Z][a-z]{2} \d{1,2}$/);
+  });
+
+  it("renders an explicit start - end range when isCustomDate is true", () => {
+    const start = "2025-01-02T03:04:00Z";
+    const end = "2025-01-05T06:07:00Z";
+    const expected = `${moment(start).format("MMM D, h:mm A")} - ${moment(end).format("MMM D, h:mm A")}`;
+    expect(getTimeRangeDisplay(true, start, end)).toBe(expected);
+  });
+});
diff --git a/ui/litellm-dashboard/tests/view_logs/useLogFilterLogic.min.test.tsx b/ui/litellm-dashboard/tests/view_logs/useLogFilterLogic.min.test.tsx
deleted file mode 100644
index faede84f4c..0000000000
--- a/ui/litellm-dashboard/tests/view_logs/useLogFilterLogic.min.test.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useLogFilterLogic } from "../../src/components/view_logs/log_filter_logic";
-
-// Minimal mocks to avoid real network during hook init
-vi.mock("../../src/components/key_team_helpers/filter_helpers", () => ({
-  fetchAllKeyAliases: vi.fn().mockResolvedValue([]),
-  fetchAllTeams: vi.fn().mockResolvedValue([]),
-}));
-
-const createQueryClient = () =>
-  new QueryClient({
-    defaultOptions: { queries: { retry: false, gcTime: 0 } },
-  });
-
-function Harness({ logs }: { logs: any }) {
-  const { filteredLogs } = useLogFilterLogic({
-    logs,
-    accessToken: "token",
-    startTime: "2025-01-01 00:00:00",
-    endTime: "2025-01-02 00:00:00",
-    pageSize: 50,
-    isCustomDate: true,
-    setCurrentPage: () => {},
-    userID: "user-1",
-    userRole: "admin",
-  });
-
-  return <div data-testid="count">{filteredLogs.data.length}</div>;
-}
-
-describe("useLogFilterLogic (minimal)", () => {
-  it("useLogFilterLogic minimal: updates filteredLogs when logs change", async () => {
-    const qc = createQueryClient();
-    const logsA = { data: [{ request_id: "a" }], total: 1, page: 1, page_size: 50, total_pages: 1 };
-    const logsB = {
-      data: [{ request_id: "a" }, { request_id: "b" }],
-      total: 2,
-      page: 1,
-      page_size: 50,
-      total_pages: 1,
-    };
-
-    const { rerender } = render(
-      <QueryClientProvider client={qc}>
-        <Harness logs={logsA} />
-      </QueryClientProvider>,
-    );
-
-    expect(await screen.findByTestId("count")).toHaveTextContent("1");
-
-    rerender(
-      <QueryClientProvider client={qc}>
-        <Harness logs={logsB} />
-      </QueryClientProvider>,
-    );
-
-    expect(await screen.findByTestId("count")).toHaveTextContent("2");
-  });
-});