diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/custom-date-filter.tsx b/apps/dashboard/app/(app)/audit/components/filters/datepicker-with-range.tsx
similarity index 99%
rename from apps/dashboard/app/(app)/logs/components/filters/components/custom-date-filter.tsx
rename to apps/dashboard/app/(app)/audit/components/filters/datepicker-with-range.tsx
index 67e9486d85..65a629e82f 100644
--- a/apps/dashboard/app/(app)/logs/components/filters/components/custom-date-filter.tsx
+++ b/apps/dashboard/app/(app)/audit/components/filters/datepicker-with-range.tsx
@@ -8,7 +8,7 @@ import { ArrowRight, Calendar as CalendarIcon } from "lucide-react";
 import { parseAsInteger, useQueryStates } from "nuqs";
 import { useEffect, useState } from "react";
 import type { DateRange } from "react-day-picker";
-import TimeSplitInput from "./time-split";
+import { TimeSplitInput } from "./timesplit-input";
 
 interface DatePickerWithRangeProps extends React.HTMLAttributes<HTMLDivElement> {
   initialParams: {
diff --git a/apps/dashboard/app/(app)/audit/components/filters/index.tsx b/apps/dashboard/app/(app)/audit/components/filters/index.tsx
index 39ae9c9813..8d63ee3222 100644
--- a/apps/dashboard/app/(app)/audit/components/filters/index.tsx
+++ b/apps/dashboard/app/(app)/audit/components/filters/index.tsx
@@ -1,4 +1,3 @@
-import { DatePickerWithRange } from "@/app/(app)/logs/components/filters/components/custom-date-filter";
 import { DEFAULT_BUCKET_NAME } from "@/lib/trpc/routers/audit/fetch";
 import type { auditLogBucket, workspaces } from "@unkey/db/src/schema";
 import { unkeyAuditLogEvents } from "@unkey/schema/src/auditlog";
@@ -7,6 +6,7 @@ import { Suspense } from "react";
 import type { ParsedParams } from "../../actions";
 import { BucketSelect } from "./bucket-select";
 import { ClearButton } from "./clear-button";
+import { DatePickerWithRange } from "./datepicker-with-range";
 import { Filter } from "./filter";
 import { RootKeyFilter } from "./root-key-filter";
 import { UserFilter } from "./user-filter";
diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/time-split.tsx b/apps/dashboard/app/(app)/audit/components/filters/timesplit-input.tsx
similarity index 99%
rename from apps/dashboard/app/(app)/logs/components/filters/components/time-split.tsx
rename to apps/dashboard/app/(app)/audit/components/filters/timesplit-input.tsx
index e5129844ee..7402c6a458 100644
--- a/apps/dashboard/app/(app)/logs/components/filters/components/time-split.tsx
+++ b/apps/dashboard/app/(app)/audit/components/filters/timesplit-input.tsx
@@ -24,7 +24,7 @@ export interface TimeSplitInputProps {
   endDate: Date;
 }
 
-const TimeSplitInput = ({
+export const TimeSplitInput = ({
   type,
   time,
   setTime,
@@ -272,5 +272,3 @@ const TimeSplitInput = ({
     </div>
   );
 };
-
-export default TimeSplitInput;
diff --git a/apps/dashboard/app/(app)/audit/components/table/audit-log-table-client.tsx b/apps/dashboard/app/(app)/audit/components/table/audit-log-table-client.tsx
index 0263fbbf17..fea542f386 100644
--- a/apps/dashboard/app/(app)/audit/components/table/audit-log-table-client.tsx
+++ b/apps/dashboard/app/(app)/audit/components/table/audit-log-table-client.tsx
@@ -12,6 +12,32 @@ import { LogDetails } from "./table-details";
 import type { Data } from "./types";
 import { getEventType } from "./utils";
 
+const STATUS_STYLES: Record<
+  "create" | "update" | "delete" | "other",
+  { base: string; hover: string; selected: string }
+> = {
+  create: {
+    base: "text-accent-11 ",
+    hover: "hover:bg-accent-3",
+    selected: "bg-accent-3",
+  },
+  other: {
+    base: "text-accent-11 ",
+    hover: "hover:bg-accent-3",
+    selected: "bg-accent-3",
+  },
+  update: {
+    base: "text-warning-11 ",
+    hover: "hover:bg-warning-3",
+    selected: "bg-warning-3",
+  },
+  delete: {
+    base: "text-error-11",
+    hover: "hover:bg-error-3",
+    selected: "bg-error-3",
+  },
+};
+
 export const AuditLogTableClient = () => {
   const [selectedLog, setSelectedLog] = useState<Data | null>(null);
   const { setCursor, searchParams } = useAuditLogParams();
@@ -28,9 +54,7 @@ export const AuditLogTableClient = () => {
         endTime: searchParams.endTime,
       },
       {
-        getNextPageParam: (lastPage) => {
-          return lastPage.nextCursor;
-        },
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
         initialCursor: searchParams.cursor,
         staleTime: Number.POSITIVE_INFINITY,
         refetchOnMount: false,
@@ -42,38 +66,37 @@ export const AuditLogTableClient = () => {
 
   const handleLoadMore = () => {
     if (hasNextPage && !isFetchingNextPage && data?.pages.length) {
-      // Get the current last page before fetching next
       const currentLastPage = data.pages[data.pages.length - 1];
-
       fetchNextPage().then(() => {
-        // Set the cursor to the last page we had before fetching
         if (currentLastPage.nextCursor) {
           setCursor(currentLastPage.nextCursor);
         }
       });
     }
   };
+
   const getRowClassName = (item: Data) => {
     const eventType = getEventType(item.auditLog.event);
-    return cn({
-      "hover:bg-error-3": eventType === "delete",
-      "hover:bg-warning-3": eventType === "update",
-      "hover:bg-success-3": eventType === "create",
-    });
+    const style = STATUS_STYLES[eventType];
+
+    return cn(
+      style.base,
+      style.hover,
+      "group rounded-md",
+      "focus:outline-none focus:ring-1 focus:ring-opacity-40 px-1",
+      selectedLog && {
+        "opacity-50 z-0": selectedLog.auditLog.id !== item.auditLog.id,
+        "opacity-100 z-10": selectedLog.auditLog.id === item.auditLog.id,
+      },
+    );
   };
 
   const getSelectedClassName = (item: Data, isSelected: boolean) => {
     if (!isSelected) {
       return "";
     }
-
-    const eventType = getEventType(item.auditLog.event);
-    return cn({
-      "bg-error-3": eventType === "delete",
-      "bg-warning-3": eventType === "update",
-      "bg-success-3": eventType === "create",
-      "bg-accent-3": eventType === "other",
-    });
+    const style = STATUS_STYLES[getEventType(item.auditLog.event)];
+    return style.selected;
   };
 
   if (isError) {
diff --git a/apps/dashboard/app/(app)/audit/components/table/columns.tsx b/apps/dashboard/app/(app)/audit/components/table/columns.tsx
index f8f9df6c16..5ff67689f5 100644
--- a/apps/dashboard/app/(app)/audit/components/table/columns.tsx
+++ b/apps/dashboard/app/(app)/audit/components/table/columns.tsx
@@ -10,10 +10,11 @@ export const columns: Column<Data>[] = [
   {
     key: "time",
     header: "Time",
-    headerClassName: "pl-3",
     width: "150px",
+    headerClassName: "pl-3",
+    noTruncate: true,
     render: (log) => (
-      <div className="flex items-center gap-3 px-2">
+      <div className="flex items-center gap-3">
         <TimestampInfo
           value={log.auditLog.time}
           className="font-mono group-hover:underline decoration-dotted"
@@ -24,25 +25,26 @@ export const columns: Column<Data>[] = [
   {
     key: "actor",
     header: "Actor",
+    width: "15%",
     headerClassName: "pl-3",
-    width: "7%",
+    noTruncate: true,
     render: (log) => (
-      <div className="flex items-center gap-3 px-2">
+      <div className="flex items-center gap-3 truncate">
         {log.auditLog.actor.type === "user" && log.user ? (
           <div className="flex items-center w-full gap-2 max-sm:m-0 max-sm:gap-1 max-sm:text-xs">
-            <span className="text-xs whitespace-nowrap">{`${log.user.firstName ?? ""} ${
-              log.user.lastName ?? ""
-            }`}</span>
+            <span className="text-xs whitespace-nowrap">
+              {`${log.user.firstName ?? ""} ${log.user.lastName ?? ""}`}
+            </span>
           </div>
         ) : log.auditLog.actor.type === "key" ? (
           <div className="flex items-center w-full gap-2 max-sm:m-0 max-sm:gap-1 max-sm:text-xs">
             <KeySquare className="w-4 h-4" />
-            <span className="font-mono text-xs">{log.auditLog.actor.id}</span>
+            <span className="font-mono text-xs truncate">{log.auditLog.actor.id}</span>
           </div>
         ) : (
           <div className="flex items-center w-full gap-2 max-sm:m-0 max-sm:gap-1 max-sm:text-xs">
             <FunctionSquare className="w-4 h-4" />
-            <span className="font-mono text-xs">{log.auditLog.actor.id}</span>
+            <span className="font-mono text-xs truncate">{log.auditLog.actor.id}</span>
           </div>
         )}
       </div>
@@ -51,8 +53,9 @@ export const columns: Column<Data>[] = [
   {
     key: "action",
     header: "Action",
+    width: "15%",
     headerClassName: "pl-3",
-    width: "7%",
+    noTruncate: true,
     render: (log) => {
       const eventType = getEventType(log.auditLog.event);
       const badgeClassName = cn("font-mono capitalize", {
@@ -62,7 +65,7 @@ export const columns: Column<Data>[] = [
         "bg-accent-3 text-accent-11 hover:bg-accent-4": eventType === "other",
       });
       return (
-        <div className="flex items-center gap-3 px-2">
+        <div className="flex items-center gap-3">
           <Badge className={badgeClassName}>{eventType}</Badge>
         </div>
       );
@@ -71,10 +74,9 @@ export const columns: Column<Data>[] = [
   {
     key: "event",
     header: "Event",
-    headerClassName: "pl-2",
     width: "20%",
     render: (log) => (
-      <div className="flex items-center gap-2 text-current font-mono text-xs px-2">
+      <div className="flex items-center gap-2 text-current font-mono text-xs truncate">
         <span>{log.auditLog.event}</span>
       </div>
     ),
@@ -82,10 +84,11 @@ export const columns: Column<Data>[] = [
   {
     key: "event-description",
     header: "Description",
-    headerClassName: "pl-1",
     width: "auto",
     render: (log) => (
-      <div className="text-current font-mono px-2 text-xs">{log.auditLog.description}</div>
+      <div className="text-current font-mono text-xs truncate w-[200px]">
+        {log.auditLog.description}
+      </div>
     ),
   },
 ];
diff --git a/apps/dashboard/app/(app)/audit/components/table/log-footer.tsx b/apps/dashboard/app/(app)/audit/components/table/log-footer.tsx
index 11097a0bea..ac2540eea7 100644
--- a/apps/dashboard/app/(app)/audit/components/table/log-footer.tsx
+++ b/apps/dashboard/app/(app)/audit/components/table/log-footer.tsx
@@ -81,7 +81,7 @@ export const LogFooter = ({ log }: Props) => {
         {
           label: "Description",
           description: (content) => (
-            <span className="text-[13px] font-mono text-end">{content}</span>
+            <span className="text-[13px] font-mono flex text-end">{content}</span>
           ),
           content: log.auditLog.description,
           tooltipContent: "Copy Description",
diff --git a/apps/dashboard/app/(app)/audit/components/table/log-header.tsx b/apps/dashboard/app/(app)/audit/components/table/log-header.tsx
index e056d086a3..05d31374f1 100644
--- a/apps/dashboard/app/(app)/audit/components/table/log-header.tsx
+++ b/apps/dashboard/app/(app)/audit/components/table/log-header.tsx
@@ -1,6 +1,6 @@
 import { Badge } from "@/components/ui/badge";
+import { XMark } from "@unkey/icons";
 import { Button } from "@unkey/ui";
-import { X } from "lucide-react";
 import type { Data } from "./types";
 
 type Props = {
@@ -10,16 +10,19 @@ type Props = {
 
 export const LogHeader = ({ onClose, log }: Props) => {
   return (
-    <div className="border-b-[1px] px-3 py-4 flex justify-between border-border items-center">
-      <div className="flex gap-2 items-center overflow-hidden">
-        <Badge variant="secondary" className="bg-transparent shrink-0">
+    <div className="border-b-[1px] flex justify-between items-center border-gray-4 pb-3 w-full">
+      <div className="flex gap-2 items-center flex-1 min-w-0">
+        <Badge className="uppercase px-[6px] rounded-md font-mono bg-accent-3 text-accent-11 hover:bg-accent-4">
           {log.auditLog.event}
         </Badge>
       </div>
-      <div className="flex gap-1 items-center shrink-0">
-        <Button shape="square" variant="ghost" onClick={onClose}>
-          <X size="22" strokeWidth="1.5" className="text-content/65 cursor-pointer" />
-        </Button>
+
+      <div className="flex gap-1 items-center ">
+        <div className="flex gap-3">
+          <Button size="icon" variant="ghost" onClick={onClose} className="[&_svg]:size-3">
+            <XMark className="text-gray-12 stroke-2" />
+          </Button>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/dashboard/app/(app)/audit/components/table/table-details.tsx b/apps/dashboard/app/(app)/audit/components/table/table-details.tsx
index 6f3ad97f98..29e91188c1 100644
--- a/apps/dashboard/app/(app)/audit/components/table/table-details.tsx
+++ b/apps/dashboard/app/(app)/audit/components/table/table-details.tsx
@@ -1,9 +1,8 @@
 "use client";
 
 import { LogSection } from "@/app/(app)/logs/components/table/log-details/components/log-section";
-import { memo, useMemo, useState } from "react";
-import { useDebounceCallback } from "usehooks-ts";
-import ResizablePanel from "../../../logs/components/table/log-details/resizable-panel";
+import { ResizablePanel } from "@/app/(app)/logs/components/table/log-details/resizable-panel";
+import { useMemo } from "react";
 import { LogFooter } from "./log-footer";
 import { LogHeader } from "./log-header";
 import type { Data } from "./types";
@@ -14,25 +13,18 @@ type Props = {
   distanceToTop: number;
 };
 
-const DEFAULT_DRAGGABLE_WIDTH = 450;
-const PANEL_WIDTH_SET_DELAY = 150;
+const PANEL_MAX_WIDTH = 600;
+const PANEL_MIN_WIDTH = 400;
 
-const _LogDetails = ({ log, onClose, distanceToTop }: Props) => {
-  const [panelWidth, setPanelWidth] = useState(DEFAULT_DRAGGABLE_WIDTH);
+const createPanelStyle = (distanceToTop: number) => ({
+  top: `${distanceToTop}px`,
+  width: "500px",
+  height: `calc(100vh - ${distanceToTop}px)`,
+  paddingBottom: "1rem",
+});
 
-  const debouncedSetPanelWidth = useDebounceCallback((newWidth) => {
-    setPanelWidth(newWidth);
-  }, PANEL_WIDTH_SET_DELAY);
-
-  const panelStyle = useMemo(
-    () => ({
-      top: `${distanceToTop}px`,
-      width: `${panelWidth}px`,
-      height: `calc(100vh - ${distanceToTop}px)`,
-      paddingBottom: "1rem",
-    }),
-    [distanceToTop, panelWidth],
-  );
+export const LogDetails = ({ log, onClose, distanceToTop }: Props) => {
+  const panelStyle = useMemo(() => createPanelStyle(distanceToTop), [distanceToTop]);
 
   if (!log) {
     return null;
@@ -40,9 +32,10 @@ const _LogDetails = ({ log, onClose, distanceToTop }: Props) => {
 
   return (
     <ResizablePanel
-      onResize={debouncedSetPanelWidth}
+      minW={PANEL_MIN_WIDTH}
+      maxW={PANEL_MAX_WIDTH}
       onClose={onClose}
-      className="absolute right-0 bg-background border-l border-t border-solid font-mono border-border shadow-md overflow-y-auto z-[3]"
+      className="absolute right-0 bg-gray-1 dark:bg-black font-mono drop-shadow-2xl overflow-y-auto z-20 p-4"
       style={panelStyle}
     >
       <LogHeader log={log} onClose={onClose} />
@@ -61,8 +54,3 @@ const _LogDetails = ({ log, onClose, distanceToTop }: Props) => {
     </ResizablePanel>
   );
 };
-
-export const LogDetails = memo(
-  _LogDetails,
-  (prev, next) => prev.log?.auditLog.id === next.log?.auditLog.id,
-);
diff --git a/apps/dashboard/app/(app)/logs-v2/components/charts/index.tsx b/apps/dashboard/app/(app)/logs-v2/components/charts/index.tsx
deleted file mode 100644
index ab5a675205..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/components/charts/index.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-"use client";
-import {
-  type ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart";
-import { Grid } from "@unkey/icons";
-import { addMinutes, format } from "date-fns";
-import { useEffect, useRef } from "react";
-import { Bar, BarChart, ResponsiveContainer, YAxis } from "recharts";
-import { generateMockLogsData } from "./util";
-
-const chartConfig = {
-  success: {
-    label: "Success",
-    subLabel: "2xx",
-    color: "hsl(var(--accent-4))",
-  },
-  warning: {
-    label: "Warning",
-    subLabel: "4xx",
-    color: "hsl(var(--warning-9))",
-  },
-  error: {
-    label: "Error",
-    subLabel: "5xx",
-    color: "hsl(var(--error-9))",
-  },
-} satisfies ChartConfig;
-
-const formatTimestampTooltip = (value: string | number) => {
-  const date = new Date(value);
-  const offset = new Date().getTimezoneOffset() * -1;
-  const localDate = addMinutes(date, offset);
-  return format(localDate, "MMM dd HH:mm aa");
-};
-
-const formatTimestampLabel = (timestamp: string | number | Date) => {
-  const date = new Date(timestamp);
-  return format(date, "MMM dd, h:mma").toUpperCase();
-};
-
-type Timeseries = {
-  x: number;
-  displayX: string;
-  originalTimestamp: string;
-  success: number;
-  error: number;
-  warning: number;
-  total: number;
-};
-
-const calculateTimePoints = (timeseries: Timeseries[]) => {
-  const startTime = timeseries[0].x;
-  const endTime = timeseries.at(-1)?.x;
-  const timeRange = endTime ?? 0 - startTime;
-  const timePoints = Array.from({ length: 5 }, (_, i) => {
-    return new Date(startTime + (timeRange * i) / 5);
-  });
-  return timePoints;
-};
-
-const timeseries = generateMockLogsData(24, 10);
-
-export function LogsChart({
-  onMount,
-}: {
-  onMount: (distanceToTop: number) => void;
-}) {
-  const chartRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const distanceToTop = chartRef.current?.getBoundingClientRect().top ?? 0;
-    onMount(distanceToTop);
-  }, [onMount]);
-
-  return (
-    <div className="w-full relative" ref={chartRef}>
-      <div className="px-2 text-accent-11 font-mono absolute top-0 text-xxs w-full flex justify-between">
-        {calculateTimePoints(timeseries).map((time, i) => (
-          // biome-ignore lint/suspicious/noArrayIndexKey: use of index is acceptable here.
-          <div key={i} className="z-10">
-            {formatTimestampLabel(time)}
-          </div>
-        ))}
-      </div>
-      <ResponsiveContainer width="100%" height={50} className="border-b border-gray-4">
-        <ChartContainer config={chartConfig}>
-          <BarChart data={timeseries} barGap={2} margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
-            <YAxis domain={[0, (dataMax: number) => dataMax * 1.5]} hide />
-            <ChartTooltip
-              position={{ y: 50 }}
-              isAnimationActive
-              wrapperStyle={{ zIndex: 1000 }}
-              cursor={{
-                fill: "hsl(var(--accent-3))",
-                strokeWidth: 1,
-                strokeDasharray: "5 5",
-                strokeOpacity: 0.7,
-              }}
-              content={({ active, payload, label }) => {
-                if (!active || !payload?.length) {
-                  return null;
-                }
-
-                return (
-                  <ChartTooltipContent
-                    payload={payload}
-                    label={label}
-                    active={active}
-                    bottomExplainer={
-                      <div className="grid gap-1.5 pt-2 border-t border-gray-4">
-                        <div className="flex w-full [&>svg]:size-4 gap-4 px-4 items-center">
-                          <Grid className="text-gray-6" />
-                          <div className="flex gap-4 leading-none justify-between w-full py-1 items-center">
-                            <div className="flex gap-4 items-center min-w-[80px]">
-                              <span className="capitalize text-accent-9 text-xs w-[2ch] inline-block">
-                                All
-                              </span>
-                              <span className="capitalize text-accent-12 text-xs">Total</span>
-                            </div>
-                            <div className="ml-auto">
-                              <span className="font-mono tabular-nums text-accent-12">
-                                {payload[0]?.payload?.total}
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    }
-                    className="rounded-lg shadow-lg border border-gray-4"
-                    labelFormatter={(_, tooltipPayload) => {
-                      const originalTimestamp = tooltipPayload[0]?.payload?.originalTimestamp;
-                      return originalTimestamp ? (
-                        <div>
-                          <span className="font-mono text-accent-9 text-xs px-4">
-                            {formatTimestampTooltip(originalTimestamp)}
-                          </span>
-                        </div>
-                      ) : (
-                        ""
-                      );
-                    }}
-                  />
-                );
-              }}
-            />
-            {["success", "error", "warning"].map((key) => (
-              <Bar key={key} dataKey={key} stackId="a" fill={`var(--color-${key})`} />
-            ))}
-          </BarChart>
-        </ChartContainer>
-      </ResponsiveContainer>
-    </div>
-  );
-}
diff --git a/apps/dashboard/app/(app)/logs-v2/components/charts/util.ts b/apps/dashboard/app/(app)/logs-v2/components/charts/util.ts
deleted file mode 100644
index e8d0c2545f..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/components/charts/util.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Generates mock time series data for logs visualization
- * @param hours Number of hours of data to generate
- * @param intervalMinutes Interval between data points in minutes
- * @returns Array of LogsTimeseriesDataPoint
- */
-export function generateMockLogsData(hours = 24, intervalMinutes = 5) {
-  const now = new Date();
-  const points = Math.floor((hours * 60) / intervalMinutes);
-  const data = [];
-
-  for (let i = points - 1; i >= 0; i--) {
-    const timestamp = new Date(now.getTime() - i * intervalMinutes * 60 * 1000);
-
-    const success = Math.floor(Math.random() * 50) + 20;
-    const error = Math.floor(Math.random() * 30);
-    const warning = Math.floor(Math.random() * 25);
-
-    data.push({
-      x: Math.floor(timestamp.getTime()),
-      displayX: timestamp.toISOString(),
-      originalTimestamp: timestamp.toISOString(),
-      success,
-      error,
-      warning,
-      total: success + error + warning,
-    });
-  }
-
-  return data;
-}
diff --git a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/hooks/use-checkbox-state.ts b/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/hooks/use-checkbox-state.ts
deleted file mode 100644
index 939bf9644c..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/hooks/use-checkbox-state.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import type { FilterValue } from "@/app/(app)/logs-v2/filters.type";
-import { useCallback, useState } from "react";
-
-type UseCheckboxStateProps<TItem> = {
-  options: Array<{ id: number } & TItem>;
-  filters: FilterValue[];
-  filterField: string;
-  checkPath: keyof TItem; // Specify which field to get from checkbox item
-};
-
-export const useCheckboxState = <TItem extends Record<string, any>>({
-  options,
-  filters,
-  filterField,
-  checkPath,
-}: UseCheckboxStateProps<TItem>) => {
-  const [checkboxes, setCheckboxes] = useState<TItem[]>(() => {
-    const activeFilters = filters
-      .filter((f) => f.field === filterField)
-      .map((f) => String(f.value));
-
-    return options.map((checkbox) => ({
-      ...checkbox,
-      checked: activeFilters.includes(String(checkbox[checkPath])),
-    }));
-  });
-
-  const handleCheckboxChange = (index: number): void => {
-    setCheckboxes((prevCheckboxes) => {
-      const newCheckboxes = [...prevCheckboxes];
-      newCheckboxes[index] = {
-        ...newCheckboxes[index],
-        checked: !newCheckboxes[index].checked,
-      };
-      return newCheckboxes;
-    });
-  };
-
-  const handleSelectAll = (): void => {
-    setCheckboxes((prevCheckboxes) => {
-      const allChecked = prevCheckboxes.every((checkbox) => checkbox.checked);
-      return prevCheckboxes.map((checkbox) => ({
-        ...checkbox,
-        checked: !allChecked,
-      }));
-    });
-  };
-
-  const handleToggle = useCallback(
-    (index?: number) => {
-      if (typeof index === "number") {
-        handleCheckboxChange(index);
-      } else {
-        handleSelectAll();
-      }
-    },
-    [handleCheckboxChange, handleSelectAll],
-  );
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLLabelElement>, index?: number) => {
-      // Handle checkbox toggle
-      if (event.key === " " || event.key === "Enter" || event.key === "h" || event.key === "l") {
-        event.preventDefault();
-        handleToggle(index);
-      }
-
-      // Handle navigation
-      if (
-        event.key === "ArrowDown" ||
-        event.key === "ArrowUp" ||
-        event.key === "j" ||
-        event.key === "k"
-      ) {
-        event.preventDefault();
-        const elements = document.querySelectorAll('label[role="checkbox"]');
-        const currentIndex = Array.from(elements).findIndex((el) => el === event.currentTarget);
-
-        let nextIndex: number;
-        if (event.key === "ArrowDown" || event.key === "j") {
-          nextIndex = currentIndex < elements.length - 1 ? currentIndex + 1 : 0;
-        } else {
-          nextIndex = currentIndex > 0 ? currentIndex - 1 : elements.length - 1;
-        }
-
-        (elements[nextIndex] as HTMLElement).focus();
-      }
-    },
-    [handleToggle],
-  );
-
-  return {
-    checkboxes,
-    handleCheckboxChange,
-    handleSelectAll,
-    handleKeyDown,
-  };
-};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-footer.tsx b/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-footer.tsx
deleted file mode 100644
index 99d8544aef..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-footer.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-"use client";
-import { RED_STATES, YELLOW_STATES } from "@/app/(app)/logs-v2/constants";
-import { extractResponseField, getRequestHeader } from "@/app/(app)/logs-v2/utils";
-import { TimestampInfo } from "@/components/timestamp-info";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-import type { Log } from "@unkey/clickhouse/src/logs";
-import { RequestResponseDetails } from "./request-response-details";
-
-type Props = {
-  log: Log;
-};
-
-const DEFAULT_OUTCOME = "VALID";
-export const LogFooter = ({ log }: Props) => {
-  return (
-    <RequestResponseDetails
-      fields={[
-        {
-          label: "Time",
-          description: (content) => (
-            <TimestampInfo value={content} className="underline decoration-dotted" />
-          ),
-          content: log.time,
-          tooltipContent: "Copy Time",
-          tooltipSuccessMessage: "Time copied to clipboard",
-          skipTooltip: true,
-        },
-        {
-          label: "Host",
-          description: (content) => <span className="text-xs font-mono">{content}</span>,
-          content: log.host,
-          tooltipContent: "Copy Host",
-          tooltipSuccessMessage: "Host copied to clipboard",
-        },
-        {
-          label: "Request Path",
-          description: (content) => <span className="text-xs font-mono">{content}</span>,
-          content: log.path,
-          tooltipContent: "Copy Request Path",
-          tooltipSuccessMessage: "Request path copied to clipboard",
-        },
-        {
-          label: "Request ID",
-          description: (content) => <span className="text-xs font-mono">{content}</span>,
-          content: log.request_id,
-          tooltipContent: "Copy Request ID",
-          tooltipSuccessMessage: "Request ID copied to clipboard",
-        },
-        {
-          label: "Request User Agent",
-          description: (content) => <span className="text-xs font-mono">{content}</span>,
-          content: getRequestHeader(log, "user-agent") ?? "",
-          tooltipContent: "Copy Request User Agent",
-          tooltipSuccessMessage: "Request user agent copied to clipboard",
-        },
-        {
-          label: "Outcome",
-          description: (content) => {
-            let contentCopy = content;
-            if (contentCopy == null) {
-              contentCopy = DEFAULT_OUTCOME;
-            }
-            return (
-              <Badge
-                className={cn(
-                  {
-                    "text-amber-11 bg-amber-3 hover:bg-amber-3 font-medium":
-                      YELLOW_STATES.includes(contentCopy),
-                    "text-red-11 bg-red-3 hover:bg-red-3 font-medium":
-                      RED_STATES.includes(contentCopy),
-                  },
-                  "uppercase",
-                )}
-              >
-                {content}
-              </Badge>
-            );
-          },
-          content: extractResponseField(log, "code"),
-          tooltipContent: "Copy Outcome",
-          tooltipSuccessMessage: "Outcome copied to clipboard",
-        },
-        {
-          label: "Permissions",
-          description: (content) => (
-            <span className="text-xs font-mono flex gap-1">
-              {content.map((permission) => (
-                <Badge key={permission} variant="secondary">
-                  {permission}
-                </Badge>
-              ))}
-            </span>
-          ),
-          content: extractResponseField(log, "permissions"),
-          tooltipContent: "Copy Permissions",
-          tooltipSuccessMessage: "Permissions copied to clipboard",
-        },
-      ]}
-    />
-  );
-};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-header.tsx b/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-header.tsx
deleted file mode 100644
index 006bbaff72..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-header.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-import type { Log } from "@unkey/clickhouse/src/logs";
-import { XMark } from "@unkey/icons";
-import { Button } from "@unkey/ui";
-
-type Props = {
-  log: Log;
-  onClose: () => void;
-};
-
-export const LogHeader = ({ onClose, log }: Props) => {
-  return (
-    <div className="border-b-[1px] flex justify-between items-center border-gray-4 pb-3">
-      <div className="flex gap-2 items-center flex-1 min-w-0">
-        <Badge className="uppercase px-[6px] rounded-md font-mono bg-accent-3 text-accent-11 hover:bg-accent-4">
-          {log.method}
-        </Badge>
-        <p className="text-xs text-accent-12 truncate flex-1 mr-4">{log.path} </p>
-      </div>
-
-      <div className="flex gap-1 items-center shrink-0">
-        <div className="flex gap-3">
-          <Badge
-            className={cn("px-[6px] rounded-md font-mono text-xs", {
-              "bg-success-3 text-success-11 hover:bg-success-4":
-                log.response_status >= 200 && log.response_status < 300,
-              "bg-warning-3 text-warning-11 hover:bg-warning-4":
-                log.response_status >= 400 && log.response_status < 500,
-              "bg-error-3 text-error-11 hover:bg-error-4": log.response_status >= 500,
-            })}
-          >
-            {log.response_status}
-          </Badge>
-          <span className="text-gray-5">|</span>
-          <Button size="icon" variant="ghost" onClick={onClose} className="[&_svg]:size-3">
-            <XMark className="text-gray-12 stroke-2" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-meta.tsx b/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-meta.tsx
deleted file mode 100644
index 7c2a533a76..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-meta.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { toast } from "@/components/ui/toaster";
-import { Button } from "@unkey/ui";
-import { Copy } from "lucide-react";
-
-export const LogMetaSection = ({ content }: { content: string }) => {
-  const handleClick = () => {
-    navigator.clipboard
-      .writeText(content)
-      .then(() => {
-        toast.success("Meta copied to clipboard");
-      })
-      .catch((error) => {
-        console.error("Failed to copy to clipboard:", error);
-        toast.error("Failed to copy to clipboard");
-      });
-  };
-
-  return (
-    <div className="flex justify-between pt-2.5">
-      <div className="text-[13px] text-accent-9 font-sans">Meta</div>
-      <Card className="bg-gray-2 border-gray-4 rounded-lg">
-        <CardContent className="py-2 px-3 text-xs relative group min-w-[300px]">
-          <pre className="text-accent-12">{content}</pre>
-          <Button
-            shape="square"
-            onClick={handleClick}
-            className="absolute bottom-2 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
-            aria-label="Copy content"
-          >
-            <Copy size={14} />
-          </Button>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-section.tsx b/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-section.tsx
deleted file mode 100644
index d51eee5539..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-section.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { toast } from "@/components/ui/toaster";
-import { Button } from "@unkey/ui";
-import { Copy } from "lucide-react";
-
-export const LogSection = ({
-  details,
-  title,
-}: {
-  details: string | string[];
-  title: string;
-}) => {
-  const handleClick = () => {
-    navigator.clipboard
-      .writeText(getFormattedContent(details))
-      .then(() => {
-        toast.success(`${title} copied to clipboard`);
-      })
-      .catch((error) => {
-        console.error("Failed to copy to clipboard:", error);
-        toast.error("Failed to copy to clipboard");
-      });
-  };
-
-  return (
-    <div className="flex flex-col gap-1 mt-[16px]">
-      <div className="flex justify-between items-center">
-        <span className="text-[13px] text-accent-9 font-sans">{title}</span>
-      </div>
-      <Card className="bg-gray-2 border-gray-4 rounded-lg">
-        <CardContent className="py-2 px-3 text-xs relative group">
-          <pre className="flex flex-col gap-1">
-            {Array.isArray(details)
-              ? details.map((header) => {
-                  const [key, ...valueParts] = header.split(":");
-                  const value = valueParts.join(":").trim();
-                  return (
-                    <div className="group flex items-center w-full p-[3px]">
-                      <span className="w-28 text-left truncate text-accent-9">{key}:</span>
-                      <span className="ml-2 text-xs text-accent-12 ">{value}</span>
-                    </div>
-                  );
-                })
-              : details}
-          </pre>
-          <Button
-            shape="square"
-            onClick={handleClick}
-            className="absolute bottom-2 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
-            aria-label="Copy content"
-          >
-            <Copy size={14} />
-          </Button>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-const getFormattedContent = (details: string | string[]) => {
-  if (Array.isArray(details)) {
-    return details
-      .map((header) => {
-        const [key, ...valueParts] = header.split(":");
-        const value = valueParts.join(":").trim();
-        return `${key}: ${value}`;
-      })
-      .join("\n");
-  }
-  return details;
-};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/request-response-details.tsx b/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/request-response-details.tsx
deleted file mode 100644
index 15869e7d80..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/request-response-details.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { toast } from "@/components/ui/toaster";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import type { ReactNode } from "react";
-
-type Field<T> = {
-  label: string;
-  description: (content: NonNullable<T>) => ReactNode;
-  content: T | null;
-  tooltipContent?: ReactNode;
-  tooltipSuccessMessage?: string;
-  className?: string;
-  skipTooltip?: boolean;
-};
-
-type Props<T extends unknown[]> = {
-  fields: { [K in keyof T]: Field<T[K]> };
-  className?: string;
-};
-
-const isNonEmpty = (content: unknown): boolean => {
-  if (content === undefined || content === null) {
-    return false;
-  }
-
-  if (Array.isArray(content)) {
-    return content.some((item) => item !== null && item !== undefined);
-  }
-
-  if (typeof content === "object" && content !== null) {
-    return Object.values(content).some((value) => value !== null && value !== undefined);
-  }
-
-  if (typeof content === "string") {
-    return content.trim().length > 0;
-  }
-
-  return Boolean(content);
-};
-
-export const RequestResponseDetails = <T extends unknown[]>({ fields, className }: Props<T>) => {
-  const handleClick = (field: Field<unknown>) => {
-    try {
-      const text =
-        typeof field.content === "object" ? JSON.stringify(field.content) : String(field.content);
-      navigator.clipboard
-        .writeText(text)
-        .then(() => {
-          if (field.tooltipSuccessMessage) {
-            toast.success(field.tooltipSuccessMessage);
-          }
-        })
-        .catch((error) => {
-          console.error("Failed to copy to clipboard:", error);
-          toast.error("Failed to copy to clipboard");
-        });
-    } catch (error) {
-      console.error("Error preparing content for clipboard:", error);
-      toast.error("Failed to prepare content for clipboard");
-    }
-  };
-
-  const renderField = (field: Field<T[number]>, index: number) => {
-    const baseContent = (
-      // biome-ignore lint/a11y/useKeyWithClickEvents: no need
-      <div
-        className={cn(
-          "flex w-full justify-between border-border border-solid pr-3 py-3 items-center cursor-pointer",
-          "border-b",
-          field.className,
-        )}
-        onClick={!field.skipTooltip ? () => handleClick(field) : undefined}
-      >
-        <span className="text-accent-9 text-[13px]">{field.label}</span>
-        <span className="text-accent-12">
-          {field.description(field.content as NonNullable<T[number]>)}
-        </span>
-      </div>
-    );
-
-    if (field.skipTooltip) {
-      return baseContent;
-    }
-
-    return (
-      <TooltipProvider key={`${field.label}-${index}`}>
-        <Tooltip>
-          <TooltipTrigger asChild>{baseContent}</TooltipTrigger>
-          <TooltipContent side="bottom">{field.tooltipContent}</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  };
-
-  return (
-    <div className={cn("font-sans", className)}>
-      {fields.map(
-        (field, index) =>
-          isNonEmpty(field.content) && (
-            <div key={`${field.label}-${index}`}>{renderField(field, index)}</div>
-          ),
-      )}
-    </div>
-  );
-};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/index.tsx b/apps/dashboard/app/(app)/logs-v2/components/table/log-details/index.tsx
deleted file mode 100644
index 5049d1d563..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { DEFAULT_DRAGGABLE_WIDTH } from "../../../constants";
-import { useLogsContext } from "../../../context/logs";
-import { extractResponseField, safeParseJson } from "../../../utils";
-import { LogFooter } from "./components/log-footer";
-import { LogHeader } from "./components/log-header";
-import { LogMetaSection } from "./components/log-meta";
-import { LogSection } from "./components/log-section";
-import ResizablePanel from "./resizable-panel";
-
-const PANEL_MAX_WIDTH = 600;
-const PANEL_MIN_WIDTH = 400;
-
-const createPanelStyle = (distanceToTop: number) => ({
-  top: `${distanceToTop}px`,
-  width: `${DEFAULT_DRAGGABLE_WIDTH}px`,
-  height: `calc(100vh - ${distanceToTop}px)`,
-  paddingBottom: "1rem",
-});
-
-type Props = {
-  distanceToTop: number;
-};
-
-export const LogDetails = ({ distanceToTop }: Props) => {
-  const { setSelectedLog, selectedLog: log } = useLogsContext();
-  const panelStyle = useMemo(() => createPanelStyle(distanceToTop), [distanceToTop]);
-
-  if (!log) {
-    return null;
-  }
-
-  const handleClose = () => {
-    setSelectedLog(null);
-  };
-
-  return (
-    <ResizablePanel
-      minW={PANEL_MIN_WIDTH}
-      maxW={PANEL_MAX_WIDTH}
-      onClose={handleClose}
-      className="absolute right-0 bg-gray-1 dark:bg-black font-mono drop-shadow-2xl overflow-y-auto z-20 p-4"
-      style={panelStyle}
-    >
-      <LogHeader log={log} onClose={handleClose} />
-
-      <LogSection details={log.request_headers} title="Request Header" />
-      <LogSection
-        details={JSON.stringify(safeParseJson(log.request_body), null, 2)}
-        title="Request Body"
-      />
-      <LogSection details={log.response_headers} title="Response Header" />
-      <LogSection
-        details={JSON.stringify(safeParseJson(log.response_body), null, 2)}
-        title="Response Body"
-      />
-      <div className="mt-3" />
-      <LogFooter log={log} />
-      <LogMetaSection content={JSON.stringify(extractResponseField(log, "meta"), null, 2)} />
-    </ResizablePanel>
-  );
-};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/resizable-panel.tsx b/apps/dashboard/app/(app)/logs-v2/components/table/log-details/resizable-panel.tsx
deleted file mode 100644
index a79d1063a1..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/resizable-panel.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import type React from "react";
-import { type PropsWithChildren, useCallback, useEffect, useRef, useState } from "react";
-import { useOnClickOutside } from "usehooks-ts";
-import { MAX_DRAGGABLE_WIDTH, MIN_DRAGGABLE_WIDTH } from "../../../constants";
-
-const ResizablePanel = ({
-  children,
-  onResize,
-  onClose,
-  className,
-  style,
-  minW = MIN_DRAGGABLE_WIDTH,
-  maxW = MAX_DRAGGABLE_WIDTH,
-}: PropsWithChildren<{
-  onResize?: (newWidth: number) => void;
-  onClose: () => void;
-  className: string;
-  style: Record<string, unknown>;
-  minW?: number;
-  maxW?: number;
-}>) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [width, setWidth] = useState<string>(String(style?.width));
-  const panelRef = useRef<HTMLDivElement | null>(null);
-
-  useOnClickOutside(panelRef, onClose);
-
-  const handleMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-
-  const handleMouseUp = useCallback(() => {
-    setIsDragging(false);
-  }, []);
-
-  const handleMouseMove = useCallback(
-    (e: MouseEvent) => {
-      if (!isDragging || !panelRef.current) {
-        return;
-      }
-
-      const containerRect = panelRef.current.getBoundingClientRect();
-      const newWidth = Math.min(Math.max(containerRect.right - e.clientX, minW), maxW);
-      setWidth(`${newWidth}px`);
-      onResize?.(newWidth);
-    },
-    [isDragging, minW, maxW, onResize],
-  );
-
-  useEffect(() => {
-    if (isDragging) {
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    } else {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    }
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging, handleMouseMove, handleMouseUp]);
-
-  return (
-    <div
-      ref={panelRef}
-      className={`relative ${className}`}
-      style={{ ...style, width, right: 0, position: "fixed" }}
-    >
-      <div
-        className="absolute top-0 left-0 w-[3px] h-full border-l border-gray-4 cursor-ew-resize hover:bg-gray-6 transition-all"
-        onMouseDown={handleMouseDown}
-      />
-      {children}
-    </div>
-  );
-};
-
-export default ResizablePanel;
diff --git a/apps/dashboard/app/(app)/logs-v2/components/table/logs-table.tsx b/apps/dashboard/app/(app)/logs-v2/components/table/logs-table.tsx
deleted file mode 100644
index 1e5e92a2e8..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/components/table/logs-table.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-"use client";
-
-import { TimestampInfo } from "@/components/timestamp-info";
-import { Badge } from "@/components/ui/badge";
-import { VirtualTable } from "@/components/virtual-table/index";
-import type { Column } from "@/components/virtual-table/types";
-import { cn } from "@/lib/utils";
-import type { Log } from "@unkey/clickhouse/src/logs";
-import { TriangleWarning2 } from "@unkey/icons";
-import { useMemo } from "react";
-import { isDisplayProperty, useLogsContext } from "../../context/logs";
-import { generateMockLogs } from "./utils";
-
-const logs = generateMockLogs(50);
-
-type StatusStyle = {
-  base: string;
-  hover: string;
-  selected: string;
-  badge: {
-    default: string;
-    selected: string;
-  };
-  focusRing: string;
-};
-
-const STATUS_STYLES = {
-  success: {
-    base: "text-accent-9",
-    hover: "hover:text-accent-11 dark:hover:text-accent-12",
-    selected: "text-accent-11 bg-accent-3 dark:text-accent-12",
-    badge: {
-      default: "bg-accent-4 text-accent-11 group-hover:bg-accent-5",
-      selected: "bg-accent-5 text-accent-12 hover:bg-hover-5",
-    },
-    focusRing: "focus:ring-accent-7",
-  },
-  warning: {
-    base: "text-warning-11 bg-warning-2",
-    hover: "hover:bg-warning-3",
-    selected: "bg-warning-3",
-    badge: {
-      default: "bg-warning-4 text-warning-11 group-hover:bg-warning-5",
-      selected: "bg-warning-5 text-warning-11 hover:bg-warning-5",
-    },
-    focusRing: "focus:ring-warning-7",
-  },
-  error: {
-    base: "text-error-11 bg-error-2",
-    hover: "hover:bg-error-3",
-    selected: "bg-error-3",
-    badge: {
-      default: "bg-error-4 text-error-11 group-hover:bg-error-5",
-      selected: "bg-error-5 text-error-11 hover:bg-error-5",
-    },
-    focusRing: "focus:ring-error-7",
-  },
-};
-
-const METHOD_BADGE = {
-  base: "uppercase px-[6px] rounded-md font-mono bg-accent-4 text-accent-11 group-hover:bg-accent-5 group-hover:text-accent-12",
-  selected: "bg-accent-5 text-accent-12",
-};
-
-const getStatusStyle = (status: number): StatusStyle => {
-  if (status >= 500) {
-    return STATUS_STYLES.error;
-  }
-  if (status >= 400) {
-    return STATUS_STYLES.warning;
-  }
-  return STATUS_STYLES.success;
-};
-
-const WARNING_ICON_STYLES = {
-  base: "size-3",
-  warning: "text-warning-11",
-  error: "text-error-11",
-};
-
-const getSelectedClassName = (log: Log, isSelected: boolean) => {
-  if (!isSelected) {
-    return "";
-  }
-  const style = getStatusStyle(log.response_status);
-  return style.selected;
-};
-
-const WarningIcon = ({ status }: { status: number }) => (
-  <TriangleWarning2
-    className={cn(
-      WARNING_ICON_STYLES.base,
-      status < 300 && "invisible",
-      status >= 400 && status < 500 && WARNING_ICON_STYLES.warning,
-      status >= 500 && WARNING_ICON_STYLES.error,
-    )}
-  />
-);
-
-const additionalColumns: Column<Log>[] = [
-  "response_body",
-  "request_body",
-  "request_headers",
-  "response_headers",
-  "request_id",
-  "workspace_id",
-  "host",
-].map((key) => ({
-  key,
-  header: key
-    .split("_")
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(" "),
-  width: "1fr",
-  render: (log: Log) => (
-    <div className="font-mono whitespace-nowrap truncate">{log[key as keyof Log]}</div>
-  ),
-}));
-
-export const LogsTable = () => {
-  const { displayProperties, setSelectedLog, selectedLog } = useLogsContext();
-
-  const getRowClassName = (log: Log) => {
-    const style = getStatusStyle(log.response_status);
-    const isSelected = selectedLog?.request_id === log.request_id;
-
-    return cn(
-      style.base,
-      style.hover,
-      "group rounded-md",
-      "focus:outline-none focus:ring-1 focus:ring-opacity-40",
-      style.focusRing,
-      isSelected && style.selected,
-      selectedLog && {
-        "opacity-50 z-0": !isSelected,
-        "opacity-100 z-10": isSelected,
-      },
-    );
-  };
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: it's okay
-  const basicColumns: Column<Log>[] = useMemo(
-    () => [
-      {
-        key: "time",
-        header: "Time",
-        width: "165px",
-        headerClassName: "pl-9",
-        noTruncate: true,
-        render: (log) => (
-          <div className="flex items-center gap-3">
-            <TimestampInfo
-              value={log.time}
-              className={cn(
-                "font-mono group-hover:underline decoration-dotted",
-                selectedLog && selectedLog.request_id !== log.request_id && "pointer-events-none",
-              )}
-            />
-          </div>
-        ),
-      },
-      {
-        key: "response_status",
-        header: "Status",
-        width: "78px",
-        noTruncate: true,
-        render: (log) => {
-          const style = getStatusStyle(log.response_status);
-          const isSelected = selectedLog?.request_id === log.request_id;
-          return (
-            <Badge
-              className={cn(
-                "uppercase px-[6px] rounded-md font-mono",
-                isSelected ? style.badge.selected : style.badge.default,
-              )}
-            >
-              {log.response_status}
-            </Badge>
-          );
-        },
-      },
-      {
-        key: "method",
-        header: "Method",
-        width: "78px",
-        noTruncate: true,
-        render: (log) => {
-          const isSelected = selectedLog?.request_id === log.request_id;
-          return (
-            <Badge className={cn(METHOD_BADGE.base, isSelected && METHOD_BADGE.selected)}>
-              {log.method}
-            </Badge>
-          );
-        },
-      },
-      {
-        key: "path",
-        header: "Path",
-        width: "15%",
-        render: (log) => <div className="font-mono">{log.path}</div>,
-      },
-    ],
-    [selectedLog?.request_id],
-  );
-
-  const visibleColumns = useMemo(() => {
-    const filtered = [...basicColumns, ...additionalColumns].filter(
-      (column) => isDisplayProperty(column.key) && displayProperties.has(column.key),
-    );
-
-    // If we have visible columns
-    if (filtered.length > 0) {
-      const originalRender = filtered[0].render;
-      filtered[0] = {
-        ...filtered[0],
-        headerClassName: "pl-9",
-        render: (log: Log) => (
-          <div className="flex items-center gap-3 px-2">
-            <WarningIcon status={log.response_status} />
-            <div className="flex-1 min-w-0">{originalRender(log)}</div>
-          </div>
-        ),
-      };
-    }
-
-    return filtered;
-  }, [basicColumns, displayProperties]);
-
-  return (
-    <VirtualTable
-      data={logs ?? []}
-      columns={visibleColumns}
-      onRowClick={setSelectedLog}
-      selectedItem={selectedLog}
-      keyExtractor={(log) => log.request_id}
-      rowClassName={getRowClassName}
-      selectedClassName={getSelectedClassName}
-    />
-  );
-};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/table/utils.ts b/apps/dashboard/app/(app)/logs-v2/components/table/utils.ts
deleted file mode 100644
index 6f737f806a..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/components/table/utils.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-function generateMockLog(overrides = {}) {
-  // Helper function to generate random string
-  const generateRandomString = (length = 10) => {
-    return Math.random()
-      .toString(36)
-      .substring(2, length + 2);
-  };
-
-  // Helper function to generate random HTTP method
-  const generateRandomMethod = () => {
-    const methods = ["GET", "POST", "PUT", "DELETE", "PATCH"];
-    return methods[Math.floor(Math.random() * methods.length)];
-  };
-
-  // Helper function to generate random path
-  const generateRandomPath = () => {
-    const paths = [
-      "/api/v1/users",
-      "/api/v1/workspaces",
-      "/api/v1/logs",
-      "/api/v1/settings",
-      "/health",
-      "/metrics",
-    ];
-    return paths[Math.floor(Math.random() * paths.length)];
-  };
-
-  // Helper function to generate random headers
-  const generateRandomHeaders = () => {
-    const possibleHeaders = [
-      "Content-Type: application/json",
-      "Authorization: Bearer token123",
-      "X-Request-ID: req123",
-      "Accept: application/json",
-      "User-Agent: Mozilla/5.0",
-    ];
-    const numHeaders = Math.floor(Math.random() * 3) + 1; // 1-3 headers
-    return possibleHeaders.slice(0, numHeaders);
-  };
-
-  // Generate base mock log
-  const mockLog = {
-    request_id: `req_${generateRandomString(8)}`,
-    time: Math.floor(Date.now() / 1000),
-    workspace_id: `ws_${generateRandomString(8)}`,
-    host: `${generateRandomString(5)}.example.com`,
-    method: generateRandomMethod(),
-    path: generateRandomPath(),
-    request_headers: generateRandomHeaders(),
-    request_body: JSON.stringify({ data: generateRandomString() }),
-    response_status: Math.random() < 0.6 ? 200 : Math.random() < 0.5 ? 500 : 400, // 80% success rate
-    response_headers: generateRandomHeaders(),
-    response_body: JSON.stringify({
-      keyId: "key_2Krf19pCiGx5UE29qJeBu7JpTzHk",
-      valid: true,
-      meta: {
-        hello: "world",
-      },
-      enabled: true,
-    }),
-    error: Math.random() < 0.8 ? "" : "Internal Server Error",
-    service_latency: Math.floor(Math.random() * 1000), // 0-1000ms
-  };
-
-  // Apply any overrides
-  return {
-    ...mockLog,
-    ...overrides,
-  };
-}
-
-// Generate multiple logs
-export const generateMockLogs = (count: number, overrides = {}) => {
-  return Array.from({ length: count }, () => generateMockLog(overrides));
-};
diff --git a/apps/dashboard/app/(app)/logs-v2/constants.ts b/apps/dashboard/app/(app)/logs-v2/constants.ts
deleted file mode 100644
index 81a1b65d7b..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/constants.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const DEFAULT_DRAGGABLE_WIDTH = 500;
-export const MAX_DRAGGABLE_WIDTH = 800;
-export const MIN_DRAGGABLE_WIDTH = 300;
-
-export const ONE_DAY_MS = 24 * 60 * 60 * 1000;
-export const DEFAULT_LOGS_FETCH_COUNT = 100;
-
-export const YELLOW_STATES = ["RATE_LIMITED", "EXPIRED", "USAGE_EXCEEDED"];
-export const RED_STATES = ["DISABLED", "FORBIDDEN", "INSUFFICIENT_PERMISSIONS"];
-
-export const METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"] as const;
-export const STATUSES = [200, 400, 500] as const;
diff --git a/apps/dashboard/app/(app)/logs-v2/page.tsx b/apps/dashboard/app/(app)/logs-v2/page.tsx
deleted file mode 100644
index 050b19d039..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/page.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use server";
-
-import { Navbar } from "@/components/navbar";
-import { getTenantId } from "@/lib/auth";
-import { db } from "@/lib/db";
-import { Layers3 } from "lucide-react";
-import { notFound } from "next/navigation";
-import { LogsClient } from "./components/logs-client";
-
-export default async function Page() {
-  const tenantId = getTenantId();
-
-  const workspace = await db.query.workspaces.findFirst({
-    where: (table, { and, eq, isNull }) =>
-      and(eq(table.tenantId, tenantId), isNull(table.deletedAt)),
-  });
-
-  if (!workspace) {
-    return notFound();
-  }
-
-  return <LogsContainerPage />;
-}
-
-const LogsContainerPage = () => {
-  return (
-    <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Layers3 />}>
-          <Navbar.Breadcrumbs.Link href="/logs-v2">Logs</Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
-      <LogsClient />
-    </div>
-  );
-};
diff --git a/apps/dashboard/app/(app)/logs-v2/utils.ts b/apps/dashboard/app/(app)/logs-v2/utils.ts
deleted file mode 100644
index f7713598f3..0000000000
--- a/apps/dashboard/app/(app)/logs-v2/utils.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import type { Log } from "@unkey/clickhouse/src/logs";
-import type { ResponseBody } from "../logs/types";
-
-class ResponseBodyParseError extends Error {
-  constructor(
-    message: string,
-    public readonly context?: unknown,
-  ) {
-    super(message);
-    this.name = "ResponseBodyParseError";
-  }
-}
-
-export const extractResponseField = <K extends keyof ResponseBody>(
-  log: Log,
-  fieldName: K,
-): ResponseBody[K] | null => {
-  if (!log?.response_body) {
-    console.error("Invalid log or missing response_body");
-    return null;
-  }
-
-  try {
-    const parsedBody = JSON.parse(log.response_body) as ResponseBody;
-
-    if (typeof parsedBody !== "object" || parsedBody === null) {
-      throw new ResponseBodyParseError("Parsed response body is not an object", parsedBody);
-    }
-
-    if (!(fieldName in parsedBody)) {
-      throw new ResponseBodyParseError(`Field "${String(fieldName)}" not found in response body`, {
-        availableFields: Object.keys(parsedBody),
-      });
-    }
-
-    return parsedBody[fieldName];
-  } catch (error) {
-    if (error instanceof ResponseBodyParseError) {
-      console.error(`Error parsing response body or accessing field: ${error.message}`, {
-        context: error.context,
-        fieldName,
-        logId: log.request_id,
-      });
-    } else {
-      console.error("An unknown error occurred while parsing response body");
-    }
-    return null;
-  }
-};
-
-export const getRequestHeader = (log: Log, headerName: string): string | null => {
-  if (!headerName.trim()) {
-    console.error("Invalid header name provided");
-    return null;
-  }
-
-  if (!Array.isArray(log.request_headers)) {
-    console.error("request_headers is not an array");
-    return null;
-  }
-
-  const lowerHeaderName = headerName.toLowerCase();
-  const header = log.request_headers.find((h) => h.toLowerCase().startsWith(`${lowerHeaderName}:`));
-
-  if (!header) {
-    console.warn(`Header "${headerName}" not found in request headers`);
-    return null;
-  }
-
-  const [, value] = header.split(":", 2);
-  return value ? value.trim() : null;
-};
-
-export const safeParseJson = (jsonString?: string | null) => {
-  if (!jsonString) {
-    return null;
-  }
-
-  try {
-    return JSON.parse(jsonString);
-  } catch {
-    console.error("Cannot parse JSON:", jsonString);
-    return "Invalid JSON format";
-  }
-};
-
-export const HOUR_IN_MS = 60 * 60 * 1000;
-const DAY_IN_MS = 24 * HOUR_IN_MS;
-const WEEK_IN_MS = 7 * DAY_IN_MS;
-
-export type TimeseriesGranularity = "perMinute" | "perHour" | "perDay";
-type TimeseriesConfig = {
-  granularity: TimeseriesGranularity;
-  startTime: number;
-  endTime: number;
-};
-
-export const getTimeseriesGranularity = (
-  startTime?: number | null,
-  endTime?: number | null,
-): TimeseriesConfig => {
-  const now = Date.now();
-
-  // If both of them are missing fallback to perMinute and fetch lastHour to show latest
-  if (!startTime && !endTime) {
-    return {
-      granularity: "perMinute",
-      startTime: now - HOUR_IN_MS,
-      endTime: now,
-    };
-  }
-
-  // Set default end time if missing
-  const effectiveEndTime = endTime ?? now;
-  // Set default start time if missing (last hour)
-  const effectiveStartTime = startTime ?? effectiveEndTime - HOUR_IN_MS;
-  const timeRange = effectiveEndTime - effectiveStartTime;
-  let granularity: TimeseriesGranularity;
-
-  if (timeRange > WEEK_IN_MS) {
-    // > 7 days
-    granularity = "perDay";
-  } else if (timeRange > HOUR_IN_MS) {
-    // > 1 hour
-    granularity = "perHour";
-  } else {
-    // <= 1 hour
-    granularity = "perMinute";
-  }
-
-  return {
-    granularity,
-    startTime: effectiveStartTime,
-    endTime: effectiveEndTime,
-  };
-};
diff --git a/apps/dashboard/app/(app)/logs/components/charts/components/logs-chart-error.tsx b/apps/dashboard/app/(app)/logs/components/charts/components/logs-chart-error.tsx
new file mode 100644
index 0000000000..b394b2df85
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/charts/components/logs-chart-error.tsx
@@ -0,0 +1,23 @@
+import { ResponsiveContainer } from "recharts";
+
+export const LogsChartError = () => {
+  return (
+    <div className="w-full relative">
+      <div className="px-2 text-accent-11 font-mono absolute top-0 text-xxs w-full flex justify-between opacity-50">
+        {Array(5)
+          .fill(0)
+          .map((_, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: it's okay
+            <div key={i} className="z-10">
+              --:--
+            </div>
+          ))}
+      </div>
+      <ResponsiveContainer height={50} className="border-b border-gray-4" width="100%">
+        <div className="h-full w-full flex items-center justify-center">
+          <span className="text-xs text-error-11 font-mono">Could not retrieve logs</span>
+        </div>
+      </ResponsiveContainer>
+    </div>
+  );
+};
diff --git a/apps/dashboard/app/(app)/logs/components/charts/components/logs-chart-loading.tsx b/apps/dashboard/app/(app)/logs/components/charts/components/logs-chart-loading.tsx
new file mode 100644
index 0000000000..a5ad4d70a5
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/charts/components/logs-chart-loading.tsx
@@ -0,0 +1,28 @@
+import { Bar, BarChart, ResponsiveContainer, YAxis } from "recharts";
+import { calculateTimePoints } from "../utils/calculate-timepoints";
+import { formatTimestampLabel } from "../utils/format-timestamp";
+
+export const LogsChartLoading = () => {
+  const mockData = Array.from({ length: 100 }).map(() => ({
+    success: Math.random() * 0.5 + 0.5, // Random values between 0.5 and 1
+  }));
+
+  return (
+    <div className="w-full relative animate-pulse">
+      <div className="px-2 text-accent-11 font-mono absolute top-0 text-xxs w-full flex justify-between">
+        {calculateTimePoints(Date.now(), Date.now()).map((time, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: it's safe to use index here
+          <div key={i} className="z-10">
+            {formatTimestampLabel(time)}
+          </div>
+        ))}
+      </div>
+      <ResponsiveContainer height={50} className="border-b border-gray-4" width="100%">
+        <BarChart margin={{ top: 0, right: -20, bottom: 0, left: -20 }} barGap={0} data={mockData}>
+          <YAxis domain={[0, (dataMax: number) => dataMax * 2]} hide />
+          <Bar dataKey="success" fill="hsl(var(--accent-3))" />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
diff --git a/apps/dashboard/app/(app)/logs/components/charts/hooks.ts b/apps/dashboard/app/(app)/logs/components/charts/hooks.ts
deleted file mode 100644
index 953864d3ac..0000000000
--- a/apps/dashboard/app/(app)/logs/components/charts/hooks.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { trpc } from "@/lib/trpc/client";
-import type { LogsTimeseriesDataPoint } from "@unkey/clickhouse/src/logs";
-import { addMinutes, format } from "date-fns";
-import { useLogSearchParams } from "../../query-state";
-import { type TimeseriesGranularity, getTimeseriesGranularity } from "../../utils";
-
-const roundToSecond = (timestamp: number) => Math.floor(timestamp / 1000) * 1000;
-
-const formatTimestamp = (value: string | number, granularity: TimeseriesGranularity) => {
-  const date = new Date(value);
-  const offset = new Date().getTimezoneOffset() * -1;
-  const localDate = addMinutes(date, offset);
-
-  switch (granularity) {
-    case "perMinute":
-      return format(localDate, "HH:mm:ss");
-    case "perHour":
-      return format(localDate, "MMM d, HH:mm");
-    case "perDay":
-      return format(localDate, "MMM d");
-    default:
-      return format(localDate, "Pp");
-  }
-};
-
-export const useFetchTimeseries = (initialTimeseries: LogsTimeseriesDataPoint[]) => {
-  const { searchParams } = useLogSearchParams();
-
-  const filters = {
-    host: searchParams.host,
-    path: searchParams.path,
-    method: searchParams.method,
-    responseStatus: searchParams.responseStatus,
-  };
-
-  const {
-    startTime: rawStartTime,
-    endTime: rawEndTime,
-    granularity,
-  } = getTimeseriesGranularity(searchParams.startTime, searchParams.endTime);
-
-  const { data, isLoading } = trpc.logs.queryTimeseries.useQuery(
-    {
-      startTime: roundToSecond(rawStartTime),
-      endTime: roundToSecond(rawEndTime),
-      ...filters,
-    },
-    {
-      refetchInterval: searchParams.endTime ? false : 10_000,
-      initialData: initialTimeseries,
-    },
-  );
-
-  const timeseries = data.map((data) => ({
-    displayX: formatTimestamp(data.x, granularity),
-    originalTimestamp: data.x,
-    ...data.y,
-  }));
-
-  return { timeseries, isLoading };
-};
diff --git a/apps/dashboard/app/(app)/logs/components/charts/hooks/use-fetch-timeseries.ts b/apps/dashboard/app/(app)/logs/components/charts/hooks/use-fetch-timeseries.ts
new file mode 100644
index 0000000000..8394cc1401
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/charts/hooks/use-fetch-timeseries.ts
@@ -0,0 +1,124 @@
+import { trpc } from "@/lib/trpc/client";
+import type { TimeseriesGranularity } from "@/lib/trpc/routers/logs/query-timeseries/utils";
+import { addMinutes, format } from "date-fns";
+import { useMemo } from "react";
+import type { z } from "zod";
+import { useFilters } from "../../../hooks/use-filters";
+import type { queryTimeseriesPayload } from "../query-timeseries.schema";
+
+// Duration in milliseconds for historical data fetch window (1 hours)
+const TIMESERIES_DATA_WINDOW = 60 * 60 * 1000;
+
+const formatTimestamp = (value: string | number, granularity: TimeseriesGranularity) => {
+  const date = new Date(value);
+  const offset = new Date().getTimezoneOffset() * -1;
+  const localDate = addMinutes(date, offset);
+
+  switch (granularity) {
+    case "perMinute":
+      return format(localDate, "HH:mm:ss");
+    case "perHour":
+      return format(localDate, "MMM d, HH:mm");
+    case "perDay":
+      return format(localDate, "MMM d");
+    default:
+      return format(localDate, "Pp");
+  }
+};
+
+export const useFetchTimeseries = () => {
+  const { filters } = useFilters();
+
+  const dateNow = useMemo(() => Date.now(), []);
+  const queryParams = useMemo(() => {
+    const params: z.infer<typeof queryTimeseriesPayload> = {
+      startTime: dateNow - TIMESERIES_DATA_WINDOW,
+      endTime: dateNow,
+      host: { filters: [] },
+      method: { filters: [] },
+      path: { filters: [] },
+      status: { filters: [] },
+      since: "",
+    };
+
+    filters.forEach((filter) => {
+      switch (filter.field) {
+        case "status": {
+          params.status?.filters.push({
+            operator: "is",
+            value: Number.parseInt(filter.value as string),
+          });
+          break;
+        }
+
+        case "methods": {
+          if (typeof filter.value !== "string") {
+            console.error("Method filter value type has to be 'string'");
+            return;
+          }
+          params.method?.filters.push({
+            operator: "is",
+            value: filter.value,
+          });
+          break;
+        }
+
+        case "paths": {
+          if (typeof filter.value !== "string") {
+            console.error("Path filter value type has to be 'string'");
+            return;
+          }
+          params.path?.filters.push({
+            operator: filter.operator,
+            value: filter.value,
+          });
+          break;
+        }
+
+        case "host": {
+          if (typeof filter.value !== "string") {
+            console.error("Host filter value type has to be 'string'");
+            return;
+          }
+          params.host?.filters.push({
+            operator: "is",
+            value: filter.value,
+          });
+          break;
+        }
+
+        case "startTime":
+        case "endTime": {
+          if (typeof filter.value !== "number") {
+            console.error(`${filter.field} filter value type has to be 'number'`);
+            return;
+          }
+          params[filter.field] = filter.value;
+          break;
+        }
+        case "since": {
+          if (typeof filter.value !== "string") {
+            console.error("Since filter value type has to be 'string'");
+            return;
+          }
+          params.since = filter.value;
+          break;
+        }
+      }
+    });
+
+    return params;
+  }, [filters, dateNow]);
+
+  const { data, isLoading, isError } = trpc.logs.queryTimeseries.useQuery(queryParams, {
+    refetchInterval: queryParams.endTime ? false : 10_000,
+  });
+
+  const timeseries = data?.timeseries.map((ts) => ({
+    displayX: formatTimestamp(ts.x, data.granularity),
+    originalTimestamp: ts.x,
+    ...ts.y,
+  }));
+
+  return { timeseries, isLoading, isError };
+};
diff --git a/apps/dashboard/app/(app)/logs/components/charts/index.tsx b/apps/dashboard/app/(app)/logs/components/charts/index.tsx
index 7c3ae5f8e0..7ebe1740b5 100644
--- a/apps/dashboard/app/(app)/logs/components/charts/index.tsx
+++ b/apps/dashboard/app/(app)/logs/components/charts/index.tsx
@@ -5,123 +5,138 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import type { LogsTimeseriesDataPoint } from "@unkey/clickhouse/src/logs";
-import { addMinutes, format } from "date-fns";
-import { useEffect, useState } from "react";
-import { Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from "recharts";
-import { useFetchTimeseries } from "./hooks";
+import { Grid } from "@unkey/icons";
+import { useEffect, useRef } from "react";
+import { Bar, BarChart, ResponsiveContainer, YAxis } from "recharts";
+import { LogsChartError } from "./components/logs-chart-error";
+import { LogsChartLoading } from "./components/logs-chart-loading";
+import { useFetchTimeseries } from "./hooks/use-fetch-timeseries";
+import { calculateTimePoints } from "./utils/calculate-timepoints";
+import { formatTimestampLabel, formatTimestampTooltip } from "./utils/format-timestamp";
 
 const chartConfig = {
   success: {
     label: "Success",
-    color: "hsl(var(--chart-3))",
+    subLabel: "2xx",
+    color: "hsl(var(--accent-4))",
   },
   warning: {
     label: "Warning",
-    color: "hsl(var(--chart-4))",
+    subLabel: "4xx",
+    color: "hsl(var(--warning-9))",
   },
   error: {
     label: "Error",
-    color: "hsl(var(--chart-1))",
+    subLabel: "5xx",
+    color: "hsl(var(--error-9))",
   },
 } satisfies ChartConfig;
 
-const formatTimestampTooltip = (value: string | number) => {
-  const date = new Date(value);
-  const offset = new Date().getTimezoneOffset() * -1;
-  const localDate = addMinutes(date, offset);
-  return format(localDate, "dd MMM HH:mm:ss");
-};
-
-const calculateTickInterval = (dataLength: number, containerWidth: number) => {
-  const pixelsPerTick = 80; // Adjust this value to control density
-  const suggestedInterval = Math.ceil((dataLength * pixelsPerTick) / containerWidth);
-
-  const intervals = [1, 2, 5, 10, 15, 30, 60];
-  return intervals.find((i) => i >= suggestedInterval) || intervals[intervals.length - 1];
-};
-
 export function LogsChart({
-  initialTimeseries,
+  onMount,
 }: {
-  initialTimeseries: LogsTimeseriesDataPoint[];
+  onMount: (distanceToTop: number) => void;
 }) {
-  const { timeseries } = useFetchTimeseries(initialTimeseries);
-  const [tickInterval, setTickInterval] = useState(5);
-  const [containerWidth, setContainerWidth] = useState(0);
+  const chartRef = useRef<HTMLDivElement>(null);
 
+  const { timeseries, isLoading, isError } = useFetchTimeseries();
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We need this to re-trigger distanceToTop calculation
   useEffect(() => {
-    if (containerWidth > 0 && timeseries.length > 0) {
-      const newInterval = calculateTickInterval(timeseries.length, containerWidth);
-      setTickInterval(newInterval);
-    }
-  }, [timeseries.length, containerWidth]);
+    const distanceToTop = chartRef.current?.getBoundingClientRect().top ?? 0;
+    onMount(distanceToTop);
+  }, [onMount, isLoading, isError]);
 
-  const maxValue = Math.max(
-    ...timeseries.map((item) => (item.success || 0) + (item.warning || 0) + (item.error || 0)),
-  );
-  const yAxisMax = Math.ceil(maxValue * 1.1);
+  if (isError) {
+    return <LogsChartError />;
+  }
+
+  if (isLoading) {
+    return <LogsChartLoading />;
+  }
 
   return (
-    <div className="w-full h-[120px] p-1 rounded-lg bg-card">
-      <ResponsiveContainer
-        width="100%"
-        height="60px"
-        onResize={(width) => setContainerWidth(width)}
-      >
+    <div className="w-full relative" ref={chartRef}>
+      <div className="px-2 text-accent-11 font-mono absolute top-0 text-xxs w-full flex justify-between">
+        {timeseries
+          ? calculateTimePoints(
+              timeseries[0].originalTimestamp ?? Date.now(),
+              timeseries.at(-1)?.originalTimestamp ?? Date.now(),
+            ).map((time, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: use of index is acceptable here.
+              <div key={i} className="z-10">
+                {formatTimestampLabel(time)}
+              </div>
+            ))
+          : null}
+      </div>
+      <ResponsiveContainer width="100%" height={50} className="border-b border-gray-4">
         <ChartContainer config={chartConfig}>
-          <BarChart data={timeseries} barCategoryGap={4} maxBarSize={20}>
-            <XAxis
-              dataKey="displayX"
-              tickLine={false}
-              axisLine={false}
-              className="font-mono"
-              minTickGap={30}
-              tick={{
-                fontSize: 11,
-                fill: "hsl(var(--muted-foreground))",
-                dy: 10,
-              }}
-              interval={tickInterval - 1}
-            />
-            <CartesianGrid
-              strokeDasharray="3 3"
-              stroke="hsl(var(--border))"
-              vertical={false}
-              strokeOpacity={0.4}
-            />
+          <BarChart
+            data={timeseries}
+            barGap={2}
+            barSize={8}
+            margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+          >
+            <YAxis domain={[0, (dataMax: number) => dataMax * 1.5]} hide />
             <ChartTooltip
-              cursor={false}
-              content={
-                <ChartTooltipContent
-                  className="rounded-lg shadow-lg border border-border"
-                  labelFormatter={(_, payload) => {
-                    const originalTimestamp = payload[0]?.payload?.originalTimestamp;
-                    return originalTimestamp ? (
-                      <span className="font-mono text-muted-foreground text-xs">
-                        {formatTimestampTooltip(originalTimestamp)}
-                      </span>
-                    ) : (
-                      ""
-                    );
-                  }}
-                />
-              }
+              position={{ y: 50 }}
+              isAnimationActive
+              wrapperStyle={{ zIndex: 1000 }}
+              cursor={{
+                fill: "hsl(var(--accent-3))",
+                strokeWidth: 1,
+                strokeDasharray: "5 5",
+                strokeOpacity: 0.7,
+              }}
+              content={({ active, payload, label }) => {
+                if (!active || !payload?.length || payload?.[0]?.payload.total === 0) {
+                  return null;
+                }
+
+                return (
+                  <ChartTooltipContent
+                    payload={payload}
+                    label={label}
+                    active={active}
+                    bottomExplainer={
+                      <div className="grid gap-1.5 pt-2 border-t border-gray-4">
+                        <div className="flex w-full [&>svg]:size-4 gap-4 px-4 items-center">
+                          <Grid className="text-gray-6" />
+                          <div className="flex gap-4 leading-none justify-between w-full py-1 items-center">
+                            <div className="flex gap-4 items-center min-w-[80px]">
+                              <span className="capitalize text-accent-9 text-xs w-[2ch] inline-block">
+                                All
+                              </span>
+                              <span className="capitalize text-accent-12 text-xs">Total</span>
+                            </div>
+                            <div className="ml-auto">
+                              <span className="font-mono tabular-nums text-accent-12">
+                                {payload[0]?.payload?.total}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    }
+                    className="rounded-lg shadow-lg border border-gray-4"
+                    labelFormatter={(_, tooltipPayload) => {
+                      const originalTimestamp = tooltipPayload[0]?.payload?.originalTimestamp;
+                      return originalTimestamp ? (
+                        <div>
+                          <span className="font-mono text-accent-9 text-xs px-4">
+                            {formatTimestampTooltip(originalTimestamp)}
+                          </span>
+                        </div>
+                      ) : (
+                        ""
+                      );
+                    }}
+                  />
+                );
+              }}
             />
-            <YAxis domain={[0, yAxisMax]} hide />
-            {["success", "warning", "error"].map((key, index) => (
-              <Bar
-                key={key}
-                dataKey={key}
-                stackId="a"
-                fill={`var(--color-${key})`}
-                radius={[
-                  index === 0 ? 2 : 0,
-                  index === 2 ? 2 : 0,
-                  index === 2 ? 2 : 0,
-                  index === 0 ? 2 : 0,
-                ]}
-              />
+            {["success", "warning", "error"].map((key) => (
+              <Bar key={key} dataKey={key} stackId="a" fill={`var(--color-${key})`} />
             ))}
           </BarChart>
         </ChartContainer>
diff --git a/apps/dashboard/app/(app)/logs/components/charts/query-timeseries.schema.ts b/apps/dashboard/app/(app)/logs/components/charts/query-timeseries.schema.ts
new file mode 100644
index 0000000000..f0598efa8a
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/charts/query-timeseries.schema.ts
@@ -0,0 +1,48 @@
+import { z } from "zod";
+import { filterOperatorEnum } from "../../filters.schema";
+
+export const queryTimeseriesPayload = z.object({
+  startTime: z.number().int(),
+  endTime: z.number().int(),
+  since: z.string(),
+  path: z
+    .object({
+      filters: z.array(
+        z.object({
+          operator: filterOperatorEnum,
+          value: z.string(),
+        }),
+      ),
+    })
+    .nullable(),
+  host: z
+    .object({
+      filters: z.array(
+        z.object({
+          operator: z.literal("is"),
+          value: z.string(),
+        }),
+      ),
+    })
+    .nullable(),
+  method: z
+    .object({
+      filters: z.array(
+        z.object({
+          operator: z.literal("is"),
+          value: z.string(),
+        }),
+      ),
+    })
+    .nullable(),
+  status: z
+    .object({
+      filters: z.array(
+        z.object({
+          operator: z.literal("is"),
+          value: z.number(),
+        }),
+      ),
+    })
+    .nullable(),
+});
diff --git a/apps/dashboard/app/(app)/logs/components/charts/utils/calculate-timepoints.ts b/apps/dashboard/app/(app)/logs/components/charts/utils/calculate-timepoints.ts
new file mode 100644
index 0000000000..bd5de03495
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/charts/utils/calculate-timepoints.ts
@@ -0,0 +1,9 @@
+export const calculateTimePoints = (startTime: number, endTime: number) => {
+  const points = 6;
+  const timeRange = endTime - startTime;
+  const step = Math.floor(timeRange / (points - 1));
+
+  return Array.from({ length: points }, (_, i) => new Date(startTime + step * i)).filter(
+    (date) => date.getTime() <= endTime,
+  );
+};
diff --git a/apps/dashboard/app/(app)/logs/components/charts/utils/format-timestamp.ts b/apps/dashboard/app/(app)/logs/components/charts/utils/format-timestamp.ts
new file mode 100644
index 0000000000..ea649d2307
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/charts/utils/format-timestamp.ts
@@ -0,0 +1,13 @@
+import { addMinutes, format } from "date-fns";
+
+export const formatTimestampTooltip = (value: string | number) => {
+  const date = new Date(value);
+  const offset = new Date().getTimezoneOffset() * -1;
+  const localDate = addMinutes(date, offset);
+  return format(localDate, "MMM dd HH:mm aa");
+};
+
+export const formatTimestampLabel = (timestamp: string | number | Date) => {
+  const date = new Date(timestamp);
+  return format(date, "MMM dd, h:mma").toUpperCase();
+};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/control-cloud/index.tsx b/apps/dashboard/app/(app)/logs/components/control-cloud/index.tsx
similarity index 78%
rename from apps/dashboard/app/(app)/logs-v2/components/control-cloud/index.tsx
rename to apps/dashboard/app/(app)/logs/components/control-cloud/index.tsx
index 7c5bbd1c26..d261ea78e8 100644
--- a/apps/dashboard/app/(app)/logs-v2/components/control-cloud/index.tsx
+++ b/apps/dashboard/app/(app)/logs/components/control-cloud/index.tsx
@@ -1,7 +1,9 @@
 import { KeyboardButton } from "@/components/keyboard-button";
+import { TimestampInfo } from "@/components/timestamp-info";
 import { cn } from "@/lib/utils";
 import { XMark } from "@unkey/icons";
 import { Button } from "@unkey/ui";
+import { format } from "date-fns";
 import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from "react";
 import type { FilterValue } from "../../filters.type";
 import { useFilters } from "../../hooks/use-filters";
@@ -9,6 +11,10 @@ import { useKeyboardShortcut } from "../../hooks/use-keyboard-shortcut";
 
 const formatFieldName = (field: string): string => {
   switch (field) {
+    case "startTime":
+      return "Start time";
+    case "endTime":
+      return "End time";
     case "status":
       return "Status";
     case "paths":
@@ -17,12 +23,20 @@ const formatFieldName = (field: string): string => {
       return "Method";
     case "requestId":
       return "Request ID";
+    case "since":
+      return "";
     default:
       return field.charAt(0).toUpperCase() + field.slice(1);
   }
 };
+const formatOperator = (operator: string, field: string): string => {
+  if (field === "since" && operator === "is") {
+    return "Last";
+  }
+  return operator;
+};
 
-const formatValue = (value: string | number): string => {
+const formatValue = (value: string | number, field: string): string => {
   if (typeof value === "string" && /^\d+$/.test(value)) {
     const statusFamily = Math.floor(Number.parseInt(value) / 100);
     switch (statusFamily) {
@@ -36,6 +50,9 @@ const formatValue = (value: string | number): string => {
         return `${statusFamily}xx`;
     }
   }
+  if (typeof value === "number" && (field === "startTime" || field === "endTime")) {
+    return format(value, "MMM d, yyyy HH:mm:ss");
+  }
   return String(value);
 };
 
@@ -66,19 +83,30 @@ const ControlPill = ({ filter, onRemove, isFocused, onFocus, index }: ControlPil
   };
 
   return (
-    <div className="flex gap-0.5 font-mono" data-pill-index={index}>
-      <div className="bg-gray-3 px-2 rounded-l-md text-accent-12 font-medium py-[2px]">
-        {formatFieldName(field)}
-      </div>
+    <div className="flex gap-0.5 font-mono group" data-pill-index={index}>
+      {formatFieldName(field) === "" ? null : (
+        <div className="bg-gray-3 px-2 rounded-l-md text-accent-12 font-medium py-[2px]">
+          {formatFieldName(field)}
+        </div>
+      )}
+
       <div className="bg-gray-3 px-2 text-accent-12 font-medium py-[2px] flex gap-1 items-center">
-        {operator}
+        {formatOperator(operator, field)}
       </div>
       <div className="bg-gray-3 px-2 text-accent-12 font-medium py-[2px] flex gap-1 items-center">
         {metadata?.colorClass && (
           <div className={cn("size-2 rounded-[2px]", metadata.colorClass)} />
         )}
         {metadata?.icon}
-        <span className="text-accent-12 text-xs font-mono">{formatValue(value)}</span>
+
+        {field === "endTime" || field === "startTime" ? (
+          <TimestampInfo
+            value={formatValue(value, field)}
+            className={cn("font-mono group-hover:underline decoration-dotted")}
+          />
+        ) : (
+          <span className="text-accent-12 text-xs font-mono">{formatValue(value, field)}</span>
+        )}
       </div>
       <div ref={pillRef} className="contents">
         <Button
@@ -98,12 +126,26 @@ const ControlPill = ({ filter, onRemove, isFocused, onFocus, index }: ControlPil
   );
 };
 
-export const ControlCloud = () => {
+export const LogsControlCloud = () => {
   const { filters, removeFilter, updateFilters } = useFilters();
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
 
   useKeyboardShortcut({ key: "d", meta: true }, () => {
-    updateFilters([]);
+    const timestamp = Date.now();
+    updateFilters([
+      {
+        field: "endTime",
+        value: timestamp,
+        id: crypto.randomUUID(),
+        operator: "is",
+      },
+      {
+        field: "startTime",
+        value: timestamp - 24 * 60 * 60 * 1000,
+        id: crypto.randomUUID(),
+        operator: "is",
+      },
+    ]);
   });
 
   useKeyboardShortcut({ key: "c", meta: true }, () => {
@@ -196,7 +238,7 @@ export const ControlCloud = () => {
 
   return (
     <div
-      className="px-3 py-2 w-full flex items-start min-h-10 border-b border-gray-4 gap-2 text-xs flex-wrap"
+      className="px-3 py-2 w-full flex items-center min-h-10 border-b border-gray-4 gap-2 text-xs flex-wrap"
       onKeyDown={handleKeyDown}
     >
       {filters.map((filter, index) => (
diff --git a/apps/dashboard/app/(app)/logs/components/controls/components/logs-datetime/components/datetime-popover.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-datetime/components/datetime-popover.tsx
new file mode 100644
index 0000000000..e82298dd5e
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-datetime/components/datetime-popover.tsx
@@ -0,0 +1,278 @@
+"use client";
+
+import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
+import { useKeyboardShortcut } from "@/app/(app)/logs/hooks/use-keyboard-shortcut";
+import { KeyboardButton } from "@/components/keyboard-button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { toast } from "@/components/ui/toaster";
+import { Button, DateTime, type Range, type TimeUnit } from "@unkey/ui";
+import { type PropsWithChildren, useState } from "react";
+import { processTimeFilters } from "../utils/process-time";
+import { DateTimeSuggestions, type OptionsType } from "./suggestions";
+
+const CUSTOM_OPTION_ID = 10;
+const options: OptionsType = [
+  {
+    id: 1,
+    value: "5m",
+    display: "Last 5 minutes",
+    checked: false,
+  },
+  {
+    id: 2,
+    value: "15m",
+    display: "Last 15 minutes",
+    checked: false,
+  },
+  {
+    id: 3,
+    value: "30m",
+    display: "Last 30 minutes",
+    checked: false,
+  },
+  {
+    id: 4,
+    value: "1h",
+    display: "Last 1 hour",
+    checked: false,
+  },
+  {
+    id: 5,
+    value: "3h",
+    display: "Last 3 hours",
+    checked: false,
+  },
+  {
+    id: 6,
+    value: "6h",
+    display: "Last 6 hours",
+    checked: false,
+  },
+  {
+    id: 7,
+    value: "12h",
+    display: "Last 12 hours",
+    checked: false,
+  },
+  {
+    id: 8,
+    value: "24h",
+    display: "Last 24 hours",
+    checked: false,
+  },
+  {
+    id: 9,
+    value: "48h",
+    display: "Last 2 days",
+    checked: false,
+  },
+  {
+    id: 10,
+    value: undefined,
+    display: "Custom",
+    checked: false,
+  },
+];
+
+const CUSTOM_DATE_TIME = 10;
+
+interface DatetimePopoverProps extends PropsWithChildren {
+  setTitle: (value: string) => void;
+  setSelected: (value: boolean) => void;
+}
+
+type TimeRangeType = {
+  startTime?: number;
+  endTime?: number;
+};
+
+export const DatetimePopover = ({ children, setTitle, setSelected }: DatetimePopoverProps) => {
+  const { filters, updateFilters } = useFilters();
+
+  const sinceFilter = filters.find((f) => f.field === "since");
+  const startTimeFilter = filters.find((f) => f.field === "startTime");
+  const endTimeFilter = filters.find((f) => f.field === "endTime");
+
+  let initialSuggestions = [...options];
+
+  if (sinceFilter) {
+    const matchingSuggestion = initialSuggestions.find((s) => s.value === sinceFilter.value);
+    if (matchingSuggestion) {
+      initialSuggestions = initialSuggestions.map((s) => ({
+        ...s,
+        checked: s.id === matchingSuggestion.id,
+      }));
+      setTitle(matchingSuggestion.display);
+      setSelected(true);
+    }
+  } else if (startTimeFilter) {
+    initialSuggestions = initialSuggestions.map((s) => ({
+      ...s,
+      checked: s.id === CUSTOM_DATE_TIME,
+    }));
+    setTitle("Custom");
+    setSelected(true);
+  }
+
+  const [open, setOpen] = useState(false);
+  const [suggestions, setSuggestions] = useState<OptionsType>(initialSuggestions);
+  const [time, setTime] = useState<TimeRangeType>({
+    startTime: startTimeFilter?.value as number | undefined,
+    endTime: endTimeFilter?.value as number | undefined,
+  });
+
+  useKeyboardShortcut("t", () => {
+    setOpen((prev) => !prev);
+  });
+
+  const handleSuggestionChange = (id: number) => {
+    const tempSuggestions = suggestions.map((suggestion) => {
+      const isChecked = suggestion.id === id && !suggestion.checked;
+      return {
+        ...suggestion,
+        checked: isChecked,
+      };
+    });
+    setSuggestions(tempSuggestions);
+
+    const selectedSuggestion = tempSuggestions.find((s) => s.checked)?.value;
+
+    if (id === CUSTOM_OPTION_ID) {
+      return;
+    }
+    const activeFilters = filters.filter((f) => !["since"].includes(f.field));
+    if (selectedSuggestion) {
+      activeFilters.push({
+        field: "since",
+        value: selectedSuggestion,
+        operator: "is",
+        id: crypto.randomUUID(),
+      });
+    }
+
+    updateFilters(activeFilters);
+  };
+
+  const onDateTimeChange = (newRange?: Range, newStart?: TimeUnit, newEnd?: TimeUnit) => {
+    const custom = suggestions.find((suggestion) => suggestion.id === CUSTOM_DATE_TIME);
+    if (!custom?.checked) {
+      handleSuggestionChange(CUSTOM_DATE_TIME);
+    }
+    const startTimestamp = processTimeFilters(newRange?.from, newStart)?.getTime();
+    const endTimestamp = processTimeFilters(newRange?.to, newEnd)?.getTime();
+    setTime({
+      startTime: startTimestamp,
+      endTime: endTimestamp,
+    });
+  };
+
+  const handleApplyFilter = () => {
+    const activeFilters = filters.filter(
+      (f) => !["endTime", "startTime", "since"].includes(f.field),
+    );
+    const selected = suggestions.find((suggestion) => suggestion.checked);
+    if (selected) {
+      setSelected(true);
+      if (selected?.value !== undefined) {
+        setTitle(selected.display);
+        updateFilters([
+          ...activeFilters,
+          {
+            field: "since",
+            value: selected.value,
+            id: crypto.randomUUID(),
+            operator: "is",
+          },
+        ]);
+        return;
+      }
+      if (selected?.value === undefined && time.startTime) {
+        setTitle("Custom");
+        activeFilters.push({
+          field: "startTime",
+          value: time.startTime,
+          id: crypto.randomUUID(),
+          operator: "is",
+        });
+        if (time.endTime) {
+          activeFilters.push({
+            field: "endTime",
+            value: time.endTime,
+            id: crypto.randomUUID(),
+            operator: "is",
+          });
+        }
+      }
+      if (time.startTime === undefined && time.endTime === undefined) {
+        toast.error("Please select a date range", {
+          duration: 8000,
+          important: true,
+          position: "top-right",
+          style: {
+            whiteSpace: "pre-line",
+          },
+        });
+        return;
+      }
+    } else {
+      setSelected(false);
+      setTitle("No Filter");
+    }
+    updateFilters(activeFilters);
+    setOpen(false);
+  };
+
+  const initialStartDate = filters.find((f) => f.field === "startTime")?.value as
+    | number
+    | undefined;
+  const initialEndDate = filters.find((f) => f.field === "endTime")?.value as number | undefined;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <div className="flex flex-row items-center">{children}</div>
+      </PopoverTrigger>
+      <PopoverContent
+        className="flex w-full bg-gray-1 dark:bg-black drop-shadow-3 p-0 m-0 border-gray-6 rounded-lg"
+        align="start"
+      >
+        <div className="flex flex-col w-60 px-1.5 py-3 m-0 border-r border-gray-4">
+          <PopoverHeader />
+          <DateTimeSuggestions options={suggestions} onChange={handleSuggestionChange} />
+        </div>
+        <DateTime
+          onChange={(newRange, newStart, newEnd) => onDateTimeChange(newRange, newStart, newEnd)}
+          initialRange={{
+            from: initialStartDate ? new Date(initialStartDate) : undefined,
+            to: initialEndDate ? new Date(initialEndDate) : undefined,
+          }}
+          className="gap-3 h-full"
+        >
+          <DateTime.Calendar
+            mode="range"
+            className="px-3 pt-2.5 pb-3.5 border-b border-gray-4 text-[13px]"
+          />
+          <DateTime.TimeInput type="range" className="px-3.5 h-9 mt-0" />
+          <DateTime.Actions className="px-3.5 h-full pb-4">
+            <Button
+              variant="primary"
+              className="font-sans w-full h-9 rounded-md"
+              onClick={handleApplyFilter}
+            >
+              Apply Filter
+            </Button>
+          </DateTime.Actions>
+        </DateTime>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const PopoverHeader = () => {
+  return (
+    <div className="flex w-full h-8 justify-between px-2">
+      <span className="text-gray-9 text-[13px] w-full">Filter by time range</span>
+      <KeyboardButton shortcut="T" className="p-0 m-0 min-w-5 w-5 h-5" />
+    </div>
+  );
+};
diff --git a/apps/dashboard/app/(app)/logs/components/controls/components/logs-datetime/components/suggestions.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-datetime/components/suggestions.tsx
new file mode 100644
index 0000000000..3464935e88
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-datetime/components/suggestions.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Check } from "lucide-react";
+import { useRef, useState } from "react";
+import type { KeyboardEvent, PropsWithChildren } from "react";
+
+type SuggestionOption = {
+  id: number;
+  value: string | number | undefined;
+  display: string;
+  checked: boolean;
+};
+
+export type OptionsType = SuggestionOption[];
+
+interface SuggestionsProps extends PropsWithChildren {
+  className?: string;
+  options: Array<SuggestionOption>;
+  onChange: (id: number) => void;
+}
+
+export const DateTimeSuggestions = ({ className, options, onChange }: SuggestionsProps) => {
+  // Set initial focused index to checked item or first item
+  const initialIndex = options.findIndex((option) => option.checked) ?? 0;
+  const [focusedIndex, setFocusedIndex] = useState<number>(initialIndex);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case "ArrowDown":
+      case "j":
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          const newIndex = (prev + 1) % options.length;
+          itemRefs.current[newIndex]?.focus();
+          return newIndex;
+        });
+        break;
+      case "ArrowUp":
+      case "k":
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          const newIndex = (prev - 1 + options.length) % options.length;
+          itemRefs.current[newIndex]?.focus();
+          return newIndex;
+        });
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        onChange(options[focusedIndex].id);
+        break;
+    }
+  };
+
+  return (
+    <div
+      className={cn("flex flex-col justify-center gap-1.5", className)}
+      onKeyDown={handleKeyDown}
+      role="listbox"
+      aria-label="Time range options"
+    >
+      {options.map(({ id, display, checked }, index) => (
+        <div
+          key={id}
+          className={cn("group relative w-full rounded-lg", "focus-within:outline-none")}
+          role="presentation"
+        >
+          <button
+            type="button"
+            ref={(el: HTMLButtonElement | null) => {
+              itemRefs.current[index] = el;
+            }}
+            onClick={() => onChange(id)}
+            onFocus={() => setFocusedIndex(index)}
+            className={cn(
+              "w-full inline-flex items-center justify-between",
+              "px-2 py-1.5 rounded-lg",
+              "text-[13px] font-medium text-accent-12 text-left",
+              "hover:bg-gray-3",
+              "focus:outline-none",
+              "focus:bg-gray-3",
+              checked && "bg-gray-3",
+              focusedIndex === index && "bg-gray-3",
+            )}
+            role="option"
+            aria-selected={checked}
+            tabIndex={index === focusedIndex ? 0 : -1}
+          >
+            <span>{display}</span>
+            {checked && (
+              <div className="size-4">
+                <Check className="text-gray-12/90 size-4" />
+              </div>
+            )}
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/apps/dashboard/app/(app)/logs/components/controls/components/logs-datetime/index.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-datetime/index.tsx
new file mode 100644
index 0000000000..dd8a5bec8e
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-datetime/index.tsx
@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils";
+import { Calendar } from "@unkey/icons";
+import { Button } from "@unkey/ui";
+import { useState } from "react";
+import { DatetimePopover } from "./components/datetime-popover";
+
+export const LogsDateTime = () => {
+  const [title, setTitle] = useState<string>("Last 12 hours");
+  const [isSelected, setIsSelected] = useState<boolean>(false);
+
+  return (
+    <DatetimePopover setTitle={setTitle} setSelected={setIsSelected}>
+      <div className="group">
+        <Button
+          variant="ghost"
+          className={cn("group-data-[state=open]:bg-gray-4 px-2", isSelected ? "bg-gray-4" : "")}
+          aria-label="Filter logs by time"
+          aria-haspopup="true"
+          title="Press 'T' to toggle filters"
+        >
+          <Calendar className="text-gray-9 size-4" />
+          <span className="text-gray-12 font-medium text-[13px]">{title}</span>
+        </Button>
+      </div>
+    </DatetimePopover>
+  );
+};
diff --git a/apps/dashboard/app/(app)/logs/components/controls/components/logs-datetime/utils/process-time.ts b/apps/dashboard/app/(app)/logs/components/controls/components/logs-datetime/utils/process-time.ts
new file mode 100644
index 0000000000..e7b4711efc
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-datetime/utils/process-time.ts
@@ -0,0 +1,18 @@
+type TimeUnit = {
+  HH?: string;
+  mm?: string;
+  ss?: string;
+};
+
+//Process new Date and time filters to be added to the filters as time since epoch
+export const processTimeFilters = (date?: Date, newTime?: TimeUnit) => {
+  if (date) {
+    const hours = newTime?.HH ? Number.parseInt(newTime.HH) : 0;
+    const minutes = newTime?.mm ? Number.parseInt(newTime.mm) : 0;
+    const seconds = newTime?.ss ? Number.parseInt(newTime.ss) : 0;
+    date.setHours(hours, minutes, seconds, 0);
+    return date;
+  }
+  const now = new Date();
+  return now;
+};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-display/components/display-popover.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-display/components/display-popover.tsx
similarity index 97%
rename from apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-display/components/display-popover.tsx
rename to apps/dashboard/app/(app)/logs/components/controls/components/logs-display/components/display-popover.tsx
index db6e699603..f7b802ef01 100644
--- a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-display/components/display-popover.tsx
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-display/components/display-popover.tsx
@@ -1,5 +1,5 @@
-import { isDisplayProperty, useLogsContext } from "@/app/(app)/logs-v2/context/logs";
-import { useKeyboardShortcut } from "@/app/(app)/logs-v2/hooks/use-keyboard-shortcut";
+import { isDisplayProperty, useLogsContext } from "@/app/(app)/logs/context/logs";
+import { useKeyboardShortcut } from "@/app/(app)/logs/hooks/use-keyboard-shortcut";
 import { KeyboardButton } from "@/components/keyboard-button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
diff --git a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-display/index.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-display/index.tsx
similarity index 100%
rename from apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-display/index.tsx
rename to apps/dashboard/app/(app)/logs/components/controls/components/logs-display/index.tsx
diff --git a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/filter-checkbox.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/filter-checkbox.tsx
similarity index 96%
rename from apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/filter-checkbox.tsx
rename to apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/filter-checkbox.tsx
index 97edf2abf5..85eeb1b80c 100644
--- a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/filter-checkbox.tsx
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/filter-checkbox.tsx
@@ -1,5 +1,5 @@
-import type { FilterValue } from "@/app/(app)/logs-v2/filters.type";
-import { useFilters } from "@/app/(app)/logs-v2/hooks/use-filters";
+import type { FilterValue } from "@/app/(app)/logs/filters.type";
+import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 import { Button } from "@unkey/ui";
diff --git a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/filters-popover.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/filters-popover.tsx
similarity index 97%
rename from apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/filters-popover.tsx
rename to apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/filters-popover.tsx
index 619cb271f6..88b6783872 100644
--- a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/filters-popover.tsx
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/filters-popover.tsx
@@ -1,5 +1,5 @@
-import { useFilters } from "@/app/(app)/logs-v2/hooks/use-filters";
-import { useKeyboardShortcut } from "@/app/(app)/logs-v2/hooks/use-keyboard-shortcut";
+import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
+import { useKeyboardShortcut } from "@/app/(app)/logs/hooks/use-keyboard-shortcut";
 import { KeyboardButton } from "@/components/keyboard-button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { CaretRight } from "@unkey/icons";
diff --git a/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/hooks/use-checkbox-state.ts b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/hooks/use-checkbox-state.ts
new file mode 100644
index 0000000000..334cfface7
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/hooks/use-checkbox-state.ts
@@ -0,0 +1,100 @@
+import type { FilterValue } from "@/app/(app)/logs/filters.type";
+import { useEffect, useState } from "react";
+
+type UseCheckboxStateProps<TItem> = {
+  options: Array<{ id: number } & TItem>;
+  filters: FilterValue[];
+  filterField: string;
+  checkPath: keyof TItem; // Specify which field to get from checkbox item
+  shouldSyncWithOptions?: boolean;
+};
+
+export const useCheckboxState = <TItem extends Record<string, any>>({
+  options,
+  filters,
+  filterField,
+  checkPath,
+  shouldSyncWithOptions = false,
+}: UseCheckboxStateProps<TItem>) => {
+  const [checkboxes, setCheckboxes] = useState<TItem[]>(() => {
+    const activeFilters = filters
+      .filter((f) => f.field === filterField)
+      .map((f) => String(f.value));
+
+    return options.map((checkbox) => ({
+      ...checkbox,
+      checked: activeFilters.includes(String(checkbox[checkPath])),
+    }));
+  });
+
+  useEffect(() => {
+    if (shouldSyncWithOptions && options.length > 0) {
+      setCheckboxes(options);
+    }
+  }, [options, shouldSyncWithOptions]);
+
+  const handleCheckboxChange = (index: number): void => {
+    setCheckboxes((prevCheckboxes) => {
+      const newCheckboxes = [...prevCheckboxes];
+      newCheckboxes[index] = {
+        ...newCheckboxes[index],
+        checked: !newCheckboxes[index].checked,
+      };
+      return newCheckboxes;
+    });
+  };
+
+  const handleSelectAll = (): void => {
+    setCheckboxes((prevCheckboxes) => {
+      const allChecked = prevCheckboxes.every((checkbox) => checkbox.checked);
+      return prevCheckboxes.map((checkbox) => ({
+        ...checkbox,
+        checked: !allChecked,
+      }));
+    });
+  };
+
+  const handleToggle = (index?: number) => {
+    if (typeof index === "number") {
+      handleCheckboxChange(index);
+    } else {
+      handleSelectAll();
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>, index?: number) => {
+    // Handle checkbox toggle
+    if (event.key === " " || event.key === "Enter" || event.key === "h" || event.key === "l") {
+      event.preventDefault();
+      handleToggle(index);
+    }
+
+    // Handle navigation
+    if (
+      event.key === "ArrowDown" ||
+      event.key === "ArrowUp" ||
+      event.key === "j" ||
+      event.key === "k"
+    ) {
+      event.preventDefault();
+      const elements = document.querySelectorAll('label[role="checkbox"]');
+      const currentIndex = Array.from(elements).findIndex((el) => el === event.currentTarget);
+
+      let nextIndex: number;
+      if (event.key === "ArrowDown" || event.key === "j") {
+        nextIndex = currentIndex < elements.length - 1 ? currentIndex + 1 : 0;
+      } else {
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : elements.length - 1;
+      }
+
+      (elements[nextIndex] as HTMLElement).focus();
+    }
+  };
+
+  return {
+    checkboxes,
+    handleCheckboxChange,
+    handleSelectAll,
+    handleKeyDown,
+  };
+};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/methods-filter.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/methods-filter.tsx
similarity index 91%
rename from apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/methods-filter.tsx
rename to apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/methods-filter.tsx
index a7419e240e..103bcc7212 100644
--- a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/methods-filter.tsx
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/methods-filter.tsx
@@ -1,4 +1,4 @@
-import type { HttpMethod } from "@/app/(app)/logs-v2/filters.type";
+import type { HttpMethod } from "@/app/(app)/logs/filters.type";
 import { FilterCheckbox } from "./filter-checkbox";
 
 type MethodOption = {
diff --git a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/paths-filter.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/paths-filter.tsx
similarity index 75%
rename from apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/paths-filter.tsx
rename to apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/paths-filter.tsx
index 0e01de4954..29d6d8448e 100644
--- a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/paths-filter.tsx
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/paths-filter.tsx
@@ -1,104 +1,33 @@
-import type { FilterValue } from "@/app/(app)/logs-v2/filters.type";
-import { useFilters } from "@/app/(app)/logs-v2/hooks/use-filters";
+import type { FilterValue } from "@/app/(app)/logs/filters.type";
+import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
 import { Checkbox } from "@/components/ui/checkbox";
+import { trpc } from "@/lib/trpc/client";
 import { Button } from "@unkey/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useCheckboxState } from "./hooks/use-checkbox-state";
 
-interface CheckboxOption {
-  id: number;
-  path: string;
-  checked: boolean;
-}
-
-const options: CheckboxOption[] = [
-  {
-    id: 1,
-    path: "/v1/analytics.export",
-    checked: false,
-  },
-  {
-    id: 2,
-    path: "/v1/analytics.getDetails",
-    checked: false,
-  },
-  {
-    id: 3,
-    path: "/v1/analytics.getOverview",
-    checked: false,
-  },
-  {
-    id: 4,
-    path: "/v1/auth.login",
-    checked: false,
-  },
-  {
-    id: 5,
-    path: "/v1/auth.logout",
-    checked: false,
-  },
-  {
-    id: 6,
-    path: "/v1/auth.refreshToken",
-    checked: false,
-  },
-  {
-    id: 7,
-    path: "/v1/data.delete",
-    checked: false,
-  },
-  {
-    id: 8,
-    path: "/v1/data.fetch",
-    checked: false,
-  },
-  {
-    id: 9,
-    path: "/v1/data.submit",
-    checked: false,
-  },
-  {
-    id: 10,
-    path: "/v1/auth.login",
-    checked: false,
-  },
-  {
-    id: 11,
-    path: "/v1/auth.logout",
-    checked: false,
-  },
-  {
-    id: 12,
-    path: "/v1/auth.refreshToken",
-    checked: false,
-  },
-  {
-    id: 13,
-    path: "/v1/data.delete",
-    checked: false,
-  },
-  {
-    id: 14,
-    path: "/v1/data.fetch",
-    checked: false,
-  },
-  {
-    id: 15,
-    path: "/v1/data.submit",
-    checked: false,
-  },
-] as const;
-
 export const PathsFilter = () => {
+  const { data: paths, isLoading } = trpc.logs.queryDistinctPaths.useQuery(undefined, {
+    select(paths) {
+      return paths
+        ? paths.map((path, index) => ({
+            id: index + 1,
+            path,
+            checked: false,
+          }))
+        : [];
+    },
+  });
   const { filters, updateFilters } = useFilters();
   const [isAtBottom, setIsAtBottom] = useState(false);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   const { checkboxes, handleCheckboxChange, handleSelectAll, handleKeyDown } = useCheckboxState({
-    options,
+    options: paths ?? [],
     filters,
     filterField: "paths",
     checkPath: "path",
+    shouldSyncWithOptions: true,
   });
   const handleScroll = useCallback(() => {
     if (scrollContainerRef.current) {
@@ -134,6 +63,21 @@ export const PathsFilter = () => {
     updateFilters([...otherFilters, ...pathFilters]);
   }, [checkboxes, filters, updateFilters]);
 
+  if (isLoading) {
+    return (
+      <div
+        className="flex flex-col items-center justify-center p-4"
+        role="status"
+        aria-live="polite"
+      >
+        <div className="flex items-center gap-3">
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-accent-11 border-t-transparent" />
+          <span className="text-sm text-accent-11">Loading paths...</span>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col font-mono">
       <label
diff --git a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/status-filter.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/status-filter.tsx
similarity index 94%
rename from apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/status-filter.tsx
rename to apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/status-filter.tsx
index 2547109d19..c3371f8637 100644
--- a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/components/status-filter.tsx
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/components/status-filter.tsx
@@ -1,4 +1,4 @@
-import type { ResponseStatus } from "@/app/(app)/logs-v2/filters.type";
+import type { ResponseStatus } from "@/app/(app)/logs/filters.type";
 import { FilterCheckbox } from "./filter-checkbox";
 
 type StatusOption = {
diff --git a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/index.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/index.tsx
similarity index 94%
rename from apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/index.tsx
rename to apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/index.tsx
index 357f748bc9..dfab5b1df5 100644
--- a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-filters/index.tsx
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-filters/index.tsx
@@ -1,4 +1,4 @@
-import { useFilters } from "@/app/(app)/logs-v2/hooks/use-filters";
+import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
 import { BarsFilter } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
diff --git a/apps/dashboard/app/(app)/logs/components/controls/components/logs-live-switch.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-live-switch.tsx
new file mode 100644
index 0000000000..cb2558f137
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-live-switch.tsx
@@ -0,0 +1,60 @@
+import { CircleCarretRight } from "@unkey/icons";
+import { Button } from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
+import { useLogsContext } from "../../../context/logs";
+import { useFilters } from "../../../hooks/use-filters";
+import { useKeyboardShortcut } from "../../../hooks/use-keyboard-shortcut";
+import { HISTORICAL_DATA_WINDOW } from "../../table/hooks/use-logs-query";
+
+export const LogsLiveSwitch = () => {
+  const { isLive, toggleLive } = useLogsContext();
+  const { filters, updateFilters } = useFilters();
+
+  useKeyboardShortcut("l", () => {
+    handleSwitch();
+  });
+
+  const handleSwitch = () => {
+    toggleLive();
+    // To able to refetch historic data again we have to update the endTime
+    if (isLive) {
+      const timestamp = Date.now();
+      const activeFilters = filters.filter((f) => !["endTime", "startTime"].includes(f.field));
+      updateFilters([
+        ...activeFilters,
+        {
+          field: "endTime",
+          value: timestamp,
+          id: crypto.randomUUID(),
+          operator: "is",
+        },
+        {
+          field: "startTime",
+          value: timestamp - HISTORICAL_DATA_WINDOW,
+          id: crypto.randomUUID(),
+          operator: "is",
+        },
+      ]);
+    }
+  };
+  return (
+    <Button
+      onClick={handleSwitch}
+      variant="ghost"
+      className={cn(
+        "px-2 relative",
+        isLive
+          ? "bg-info-3 text-info-11 hover:bg-info-3 hover:text-info-11 border border-solid border-info-7"
+          : "text-accent-12 [&_svg]:text-accent-9",
+      )}
+    >
+      {isLive && (
+        <div className="absolute left-0 right-0 top-0 bottom-0 rounded">
+          <div className="absolute inset-0 bg-info-6 rounded opacity-15 animate-[ping_3s_cubic-bezier(0,0,0.2,1)_infinite]" />
+        </div>
+      )}
+      <CircleCarretRight className="size-4 relative z-10" />
+      <span className="font-medium text-[13px]">Live</span>
+    </Button>
+  );
+};
diff --git a/apps/dashboard/app/(app)/logs/components/controls/components/logs-refresh.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-refresh.tsx
new file mode 100644
index 0000000000..a1fb932c81
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-refresh.tsx
@@ -0,0 +1,53 @@
+import { trpc } from "@/lib/trpc/client";
+import { Refresh3 } from "@unkey/icons";
+import { Button } from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
+import { useState } from "react";
+import { useLogsContext } from "../../../context/logs";
+import { useFilters } from "../../../hooks/use-filters";
+import { useKeyboardShortcut } from "../../../hooks/use-keyboard-shortcut";
+
+export const LogsRefresh = () => {
+  const { toggleLive, isLive } = useLogsContext();
+  const { filters } = useFilters();
+  const { logs } = trpc.useUtils();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const hasRelativeFilter = filters.find((f) => f.field === "since");
+  useKeyboardShortcut("r", () => {
+    hasRelativeFilter && handleSwitch();
+  });
+
+  const handleSwitch = () => {
+    const isLiveBefore = Boolean(isLive);
+    setIsLoading(true);
+    toggleLive(false);
+    logs.queryLogs.invalidate();
+    logs.queryTimeseries.invalidate();
+
+    setTimeout(() => {
+      setIsLoading(false);
+      if (isLiveBefore) {
+        toggleLive(true);
+      }
+    }, 1000);
+  };
+
+  return (
+    <Button
+      onClick={handleSwitch}
+      variant="ghost"
+      className={cn(
+        "px-2 text-accent-12 [&_svg]:text-accent-9",
+        "relative overflow-hidden",
+        "transition-transform",
+        isLoading && "bg-gray-3",
+      )}
+      disabled={!hasRelativeFilter || isLoading}
+    >
+      {isLoading && <div className="absolute inset-0 bg-accent-6 animate-fill-left" />}
+      <Refresh3 className="size-4 relative z-10" />
+      <span className="font-medium text-[13px] relative z-10">Refresh</span>
+    </Button>
+  );
+};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-search/index.tsx b/apps/dashboard/app/(app)/logs/components/controls/components/logs-search/index.tsx
similarity index 94%
rename from apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-search/index.tsx
rename to apps/dashboard/app/(app)/logs/components/controls/components/logs-search/index.tsx
index 49f516754d..03b385afb9 100644
--- a/apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-search/index.tsx
+++ b/apps/dashboard/app/(app)/logs/components/controls/components/logs-search/index.tsx
@@ -1,6 +1,6 @@
-import { transformStructuredOutputToFilters } from "@/app/(app)/logs-v2/filters.schema";
-import { useFilters } from "@/app/(app)/logs-v2/hooks/use-filters";
-import { useKeyboardShortcut } from "@/app/(app)/logs-v2/hooks/use-keyboard-shortcut";
+import { transformStructuredOutputToFilters } from "@/app/(app)/logs/filters.schema";
+import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
+import { useKeyboardShortcut } from "@/app/(app)/logs/hooks/use-keyboard-shortcut";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
@@ -50,7 +50,10 @@ export const LogsSearch = () => {
     const query = search.trim();
     if (query) {
       try {
-        await queryLLMForStructuredOutput.mutateAsync(query);
+        await queryLLMForStructuredOutput.mutateAsync({
+          query,
+          timestamp: Date.now(),
+        });
       } catch (error) {
         console.error("Search failed:", error);
       }
@@ -86,7 +89,7 @@ export const LogsSearch = () => {
           isLoading ? "bg-gray-4" : "",
         )}
       >
-        <div className="flex items-center gap-2 w-48">
+        <div className="flex items-center gap-2 w-72">
           <div className="flex-shrink-0">
             {isLoading ? (
               <Refresh3 className="text-accent-10 size-4 animate-spin" />
diff --git a/apps/dashboard/app/(app)/logs-v2/components/controls/index.tsx b/apps/dashboard/app/(app)/logs/components/controls/index.tsx
similarity index 55%
rename from apps/dashboard/app/(app)/logs-v2/components/controls/index.tsx
rename to apps/dashboard/app/(app)/logs/components/controls/index.tsx
index cb8705634b..73391f9458 100644
--- a/apps/dashboard/app/(app)/logs-v2/components/controls/index.tsx
+++ b/apps/dashboard/app/(app)/logs/components/controls/index.tsx
@@ -1,6 +1,8 @@
-import { Calendar, CircleCarretRight, Refresh3 } from "@unkey/icons";
+import { LogsDateTime } from "./components/logs-datetime";
 import { LogsDisplay } from "./components/logs-display";
 import { LogsFilters } from "./components/logs-filters";
+import { LogsLiveSwitch } from "./components/logs-live-switch";
+import { LogsRefresh } from "./components/logs-refresh";
 import { LogsSearch } from "./components/logs-search";
 
 export function LogsControls() {
@@ -14,20 +16,16 @@ export function LogsControls() {
           <div className="flex gap-2 items-center">
             <LogsFilters />
           </div>
-          <div className="flex gap-2 items-center px-2">
-            <Calendar className="text-accent-9 size-4" />
-            <span className="text-accent-12 font-medium text-[13px]">Last 24 hours</span>
+          <div className="flex gap-2 items-center">
+            <LogsDateTime />
           </div>
         </div>
-
         <div className="flex gap-2">
-          <div className="flex gap-2 items-center px-2">
-            <CircleCarretRight className="text-accent-9 size-4" />
-            <span className="text-accent-12 font-medium text-[13px]">Live</span>
+          <div className="flex gap-2 items-center">
+            <LogsLiveSwitch />
           </div>
-          <div className="flex gap-2 items-center px-2">
-            <Refresh3 className="text-accent-9 size-4" />
-            <span className="text-accent-12 font-medium text-[13px]">Refresh</span>
+          <div className="flex gap-2 items-center">
+            <LogsRefresh />
           </div>
           <div className="flex gap-2 items-center">
             <LogsDisplay />
diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/response-status.tsx b/apps/dashboard/app/(app)/logs/components/filters/components/response-status.tsx
deleted file mode 100644
index 3d050eb436..0000000000
--- a/apps/dashboard/app/(app)/logs/components/filters/components/response-status.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Checkbox } from "@/components/ui/checkbox";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import React, { useState } from "react";
-import { type ResponseStatus as Status, useLogSearchParams } from "../../../query-state";
-
-interface CheckboxItemProps {
-  id: string;
-  label: string;
-  description: string;
-  checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
-}
-
-const checkboxItems = [
-  { id: "500", label: "Error", description: "5XX error codes" },
-  { id: "200", label: "Success", description: "2XX success codes" },
-  { id: "400", label: "Warning", description: "4XX warning codes" },
-];
-
-export const ResponseStatus = () => {
-  const [open, setOpen] = useState(false);
-  const { searchParams, setSearchParams } = useLogSearchParams();
-  const [checkedItems, setCheckedItems] = useState<Status[]>(searchParams.responseStatus);
-
-  const handleItemChange = (status: Status, checked: boolean) => {
-    const newCheckedItems = checked
-      ? [...checkedItems, status]
-      : checkedItems.filter((item) => item !== status);
-
-    setCheckedItems(newCheckedItems);
-    setSearchParams((prevState) => ({
-      ...prevState,
-      responseStatus: newCheckedItems,
-    }));
-  };
-
-  const getStatusDisplay = () => {
-    if (checkedItems.length === 0) {
-      return "Response Status";
-    }
-
-    const statusLabels = checkedItems
-      .map((status) => checkboxItems.find((item) => Number(item.id) === status)?.label)
-      .filter(Boolean)
-      .join(", ");
-
-    return `Response Status (${statusLabels})`;
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <div className="cursor-pointer">{getStatusDisplay()}</div>
-      </PopoverTrigger>
-      <PopoverContent className="w-80 bg-background p-0">
-        {checkboxItems.map((item, index) => (
-          <React.Fragment key={item.id}>
-            <CheckboxItem
-              {...item}
-              checked={checkedItems.includes(Number(item.id) as Status)}
-              onCheckedChange={(checked) => {
-                handleItemChange(Number(item.id) as Status, checked);
-              }}
-            />
-            {index < checkboxItems.length - 1 && <div className="border-b border-border" />}
-          </React.Fragment>
-        ))}
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-const CheckboxItem = ({ id, label, description, checked, onCheckedChange }: CheckboxItemProps) => (
-  <div className="items-top flex space-x-2 p-4">
-    <Checkbox id={id} checked={checked} onCheckedChange={onCheckedChange} />
-    <div className="grid gap-1.5 leading-none">
-      <label
-        htmlFor={id}
-        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-      >
-        {label}
-      </label>
-      <p className="text-xs text-content-subtle">{description}</p>
-    </div>
-  </div>
-);
diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/badge.tsx b/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/badge.tsx
deleted file mode 100644
index b450dacca9..0000000000
--- a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/badge.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
-import { Button } from "@unkey/ui";
-import { X } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { OPTIONS } from "./constants";
-import type { SearchItem } from "./hooks";
-
-type BadgeProps = {
-  item: SearchItem;
-  index: number;
-  editingIndex: number;
-  editInputRef: React.RefObject<HTMLInputElement>;
-  onEditChange: (item: SearchItem, index: number) => void;
-  onEditBlur: () => void;
-  onEditKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  onFocus: (index: number) => void;
-  onRemove: (item: SearchItem) => void;
-};
-
-const ActiveBadgeContent = ({
-  item,
-  index,
-  editInputRef,
-  onEditChange,
-  onEditBlur,
-  onEditKeyDown,
-}: Pick<
-  BadgeProps,
-  "item" | "index" | "editInputRef" | "onEditChange" | "onEditBlur" | "onEditKeyDown"
->) => {
-  const [value, setValue] = useState(item.label + item.searchValue);
-  const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>();
-
-  const debouncedOnEditChange = useCallback(
-    (newItem: typeof item, idx: number) => {
-      clearTimeout(timeoutIdRef.current);
-      timeoutIdRef.current = setTimeout(() => {
-        onEditChange(newItem, idx);
-      }, 300);
-    },
-    [onEditChange],
-  );
-
-  const internalHandleEditChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value;
-      const undeletablePart = OPTIONS.find((o) => o.value === item.value)?.label || "";
-      const newSearchValue = value.slice(undeletablePart.length);
-      setValue(item.label + newSearchValue);
-
-      debouncedOnEditChange(
-        {
-          value: item.value,
-          label: item.label,
-          searchValue: newSearchValue,
-        },
-        index,
-      );
-    },
-    [item.value, item.label, index, debouncedOnEditChange],
-  );
-
-  useEffect(() => {
-    return () => {
-      clearTimeout(timeoutIdRef.current);
-    };
-  }, []);
-
-  return (
-    <Input
-      ref={editInputRef}
-      value={value}
-      onChange={internalHandleEditChange}
-      onBlur={() => {
-        // Clear any pending timeout and call onEditChange immediately on blur
-        clearTimeout(timeoutIdRef.current);
-        onEditChange(
-          {
-            value: item.value,
-            label: item.label,
-            searchValue: value.slice(item.label.length),
-          },
-          index,
-        );
-        onEditBlur?.();
-      }}
-      onKeyDown={onEditKeyDown}
-      className="h-3 w-24 px-1 py-0 text-xs bg-transparent border-none focus:ring-0 focus:outline-none"
-    />
-  );
-};
-const PassiveBadgeContent = ({
-  item,
-  index,
-  onFocus: handleFocusOnClick,
-}: Pick<BadgeProps, "item" | "index" | "onFocus">) => (
-  <div className="max-w-[150px]">
-    <span
-      className="block truncate cursor-text"
-      onDoubleClick={(e) => {
-        e.stopPropagation();
-        handleFocusOnClick(index);
-      }}
-      title={item.label + item.searchValue}
-    >
-      <span className={cn(item.searchValue ? "font-medium" : "")}>{item.label}</span>
-      <span>{item.searchValue}</span>
-    </span>
-  </div>
-);
-
-const RemoveButton = ({ item, onRemove }: Pick<BadgeProps, "item" | "onRemove">) => (
-  <Button
-    type="button"
-    variant="ghost"
-    shape="square"
-    className="flex-shrink-0 w-4 h-4 min-w-[16px] hover:bg-secondary/80"
-    onClick={(e) => {
-      e.stopPropagation();
-      onRemove(item);
-    }}
-  >
-    <X className="w-3 h-3" />
-  </Button>
-);
-
-export const ComboboxBadge = ({
-  item,
-  index,
-  editingIndex,
-  editInputRef,
-  onEditChange: handleEditChange,
-  onEditBlur: handleEditBlur,
-  onEditKeyDown: handleEditKeyDown,
-  onFocus: handleFocusOnClick,
-  onRemove: handleRemove,
-}: BadgeProps) => (
-  <Badge
-    key={item.value}
-    variant="secondary"
-    className={cn(
-      "flex items-center pr-1 w-fit z-3",
-      "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-3",
-      "transition-shadow duration-200",
-      "hover:bg-secondary/80",
-    )}
-  >
-    {editingIndex === index ? (
-      <ActiveBadgeContent
-        item={item}
-        index={index}
-        editInputRef={editInputRef}
-        onEditChange={handleEditChange}
-        onEditBlur={handleEditBlur}
-        onEditKeyDown={handleEditKeyDown}
-      />
-    ) : (
-      <PassiveBadgeContent item={item} index={index} onFocus={handleFocusOnClick} />
-    )}
-    <RemoveButton item={item} onRemove={handleRemove} />
-  </Badge>
-);
diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/constants.ts b/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/constants.ts
deleted file mode 100644
index cb5ca43a69..0000000000
--- a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/constants.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// When editingIndex is NO_ITEM_EDITING (-1), no item is in edit mode.
-export const NO_ITEM_EDITING = -1;
-export const KEYS = {
-  ESCAPE: "Escape",
-  ENTER: "Enter",
-} as const;
-export const PLACEHOLDER_TEXT = "Search logs...";
-
-export const OPTIONS = [
-  { value: "requestId", label: "requestId: " },
-  { value: "host", label: "host: " },
-  { value: "method", label: "method: " },
-  { value: "path", label: "path: " },
-] as const;
-
-export const OPTION_EXPLANATIONS: Record<string, string> = {
-  requestId: "Request identifier",
-  host: "Domain name",
-  method: "HTTP method",
-  path: "Request URL path",
-};
diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/hooks.ts b/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/hooks.ts
deleted file mode 100644
index 80c4c24b00..0000000000
--- a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/hooks.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { type PickKeys, type QuerySearchParams, useLogSearchParams } from "../../../../query-state";
-import { KEYS, NO_ITEM_EDITING, OPTIONS } from "./constants";
-
-export const useFocusOnBadge = (currentFocusedItemIndex: number) => {
-  const editInputRef = useRef<HTMLInputElement>(null);
-
-  // Focuses on a badge
-  useEffect(() => {
-    if (currentFocusedItemIndex !== NO_ITEM_EDITING && editInputRef.current) {
-      editInputRef.current.focus();
-    }
-  }, [currentFocusedItemIndex]);
-
-  return { editInputRef };
-};
-
-export type Option = {
-  value: PickKeys<QuerySearchParams, "host" | "requestId" | "path" | "method">;
-  label: string;
-};
-export type SearchItem = Option & { searchValue: string };
-
-export const useSelectComboboxItems = () => {
-  const [selectedItems, setSelectedItems] = useState<SearchItem[]>([]);
-  const { searchParams, setSearchParams } = useLogSearchParams();
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: When "setSelectedItems" included hook does too many renders
-  useEffect(() => {
-    const initialItems = OPTIONS.filter((option) => searchParams[option.value]).map((option) => ({
-      ...option,
-      searchValue: searchParams[option.value] as string,
-    }));
-    setSelectedItems(initialItems);
-  }, []);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: When setSearchParams included component does too many retries
-  useEffect(() => {
-    setSearchParams(
-      selectedItems.reduce(
-        (params, item) => {
-          if (item.searchValue) {
-            params[item.value] = item.searchValue;
-          }
-          return params;
-        },
-        {} as Partial<QuerySearchParams>,
-      ),
-    );
-  }, [selectedItems]);
-
-  return { selectedItems, setSelectedItems } as const;
-};
-
-export const useListenEscapeKey = (cb: () => void) => {
-  // Allow you escape from double-clicked badge after editting
-  useEffect(() => {
-    const handleEscKey = (event: KeyboardEvent) => {
-      if (event.key === KEYS.ESCAPE) {
-        cb();
-      }
-    };
-
-    document.addEventListener("keydown", handleEscKey);
-
-    return () => {
-      document.removeEventListener("keydown", handleEscKey);
-    };
-  }, [cb]);
-};
-
-const DELETE_KEYS = {
-  DELETE: "Delete",
-  BACKSPACE: "Backspace",
-} as const;
-
-export const useDeleteFromSelection = (
-  selectedItems: SearchItem[],
-  onRemoveFromSelectedItems: (item: SearchItem) => void,
-  elementRef: React.RefObject<HTMLElement>,
-) => {
-  useEffect(() => {
-    const handleDeleteKey = (event: KeyboardEvent) => {
-      if (document.activeElement !== elementRef.current) {
-        return;
-      }
-
-      if (event.key === DELETE_KEYS.DELETE || event.key === DELETE_KEYS.BACKSPACE) {
-        event.preventDefault();
-        const lastItem = selectedItems?.at(-1);
-        if (selectedItems.length > 0 && lastItem) {
-          onRemoveFromSelectedItems(lastItem);
-        }
-      }
-    };
-
-    document.addEventListener("keydown", handleDeleteKey);
-    return () => {
-      document.removeEventListener("keydown", handleDeleteKey);
-    };
-  }, [selectedItems, elementRef, onRemoveFromSelectedItems]);
-};
diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/search-combobox.tsx b/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/search-combobox.tsx
deleted file mode 100644
index cdf47951bb..0000000000
--- a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/search-combobox.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { Command, CommandGroup, CommandItem, CommandList } from "@/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
-import { Button } from "@unkey/ui";
-import { CheckCircle, Search } from "lucide-react";
-import { useCallback, useRef, useState } from "react";
-
-import { useLogSearchParams } from "../../../../query-state";
-import { ComboboxBadge } from "./badge";
-import { KEYS, NO_ITEM_EDITING, OPTIONS, OPTION_EXPLANATIONS, PLACEHOLDER_TEXT } from "./constants";
-import {
-  type Option,
-  type SearchItem,
-  useDeleteFromSelection,
-  useFocusOnBadge,
-  useListenEscapeKey,
-  useSelectComboboxItems,
-} from "./hooks";
-
-export function SearchCombobox() {
-  const [open, setOpen] = useState<boolean>(false);
-  const selectedItemWrapperRef = useRef<HTMLDivElement>(null);
-  const [currentFocusedItemIndex, setCurrentFocusedItemIndex] = useState<number>(NO_ITEM_EDITING);
-
-  const { selectedItems, setSelectedItems } = useSelectComboboxItems();
-  const { editInputRef } = useFocusOnBadge(currentFocusedItemIndex);
-  const { setSearchParams } = useLogSearchParams();
-
-  const handlePressEscape = useCallback(() => {
-    setOpen(false);
-    setCurrentFocusedItemIndex(NO_ITEM_EDITING);
-  }, []);
-
-  useListenEscapeKey(handlePressEscape);
-
-  const handleRemove = useCallback(
-    (item: SearchItem) => {
-      setSelectedItems((prevState) =>
-        prevState.filter((selected) => selected.value !== item.value),
-      );
-      setSearchParams({ [item.value]: null });
-    },
-    [setSelectedItems, setSearchParams],
-  );
-
-  useDeleteFromSelection(selectedItems, handleRemove, selectedItemWrapperRef);
-
-  const handleSelect = (item: Option) => {
-    setSelectedItems((prevItems) => {
-      if (!prevItems.some((selected) => selected.value === item.value)) {
-        const newItems = [...prevItems, { ...item, searchValue: "" }];
-        // Schedule the edit of the last item after the state update
-        setTimeout(() => handleFocusOnClick(newItems.length - 1), 0);
-        return newItems;
-      }
-      return prevItems;
-    });
-  };
-
-  const handleFocusOnClick = (index: number) => {
-    setCurrentFocusedItemIndex(index);
-  };
-
-  const handleEditChange = (item: SearchItem, index: number) => {
-    setSelectedItems((prevItems) => {
-      const newSearchValue = item.searchValue;
-      const newItems = [...prevItems];
-      newItems[index] = { ...item, searchValue: newSearchValue };
-
-      setSearchParams({
-        [item.value]: newSearchValue.length > 0 ? newSearchValue : null,
-      });
-
-      return newItems;
-    });
-  };
-
-  const handleEditBlur = () => {
-    setCurrentFocusedItemIndex(NO_ITEM_EDITING);
-  };
-
-  const handleEditKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === KEYS.ENTER) {
-      setCurrentFocusedItemIndex(NO_ITEM_EDITING);
-    }
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <div>
-          <Button
-            role="combobox"
-            aria-expanded={open}
-            className=" justify-start hover:bg-current! hover:text-current! text-content-subtle flex"
-          >
-            <div className="min-w-[330px] flex gap-2 flex-nowrap items-center w-fit">
-              <Search size={16} className="text-muted-foreground" />
-              {selectedItems.length > 0 ? (
-                <div className="flex gap-1 flex-wrap items-center">
-                  {selectedItems.map((item, index) => (
-                    <ComboboxBadge
-                      editInputRef={editInputRef}
-                      editingIndex={currentFocusedItemIndex}
-                      onEditBlur={handleEditBlur}
-                      onEditChange={handleEditChange}
-                      onEditKeyDown={handleEditKeyDown}
-                      onFocus={handleFocusOnClick}
-                      onRemove={handleRemove}
-                      index={index}
-                      item={item}
-                      key={item.value}
-                    />
-                  ))}
-                </div>
-              ) : (
-                PLACEHOLDER_TEXT
-              )}
-            </div>
-          </Button>
-        </div>
-      </PopoverTrigger>
-      {/* Forces popover content to strech relative to its parent */}
-      <PopoverContent
-        className="w-[--radix-popover-trigger-width] max-h-[--radix-popover-content-available-height] p-0"
-        ref={selectedItemWrapperRef}
-      >
-        <Command>
-          <CommandList>
-            <CommandGroup>
-              {OPTIONS.map((framework) => (
-                <CommandItem
-                  key={framework.value}
-                  value={framework.value}
-                  onSelect={() => {
-                    //Focuses on clicked item if exists
-                    setCurrentFocusedItemIndex(
-                      selectedItems.findIndex((i) => i.value === framework.value),
-                    );
-                    handleSelect(framework);
-                  }}
-                  className="group"
-                >
-                  <div className="flex gap-2 items-center ">
-                    <div className="px-2 bg-gray-200 rounded-md group-hover:bg-gray-300 font-medium text-[13px]">
-                      {framework.label}
-                    </div>
-                    <div className="hidden group-hover:block text-content-subtle">
-                      {OPTION_EXPLANATIONS[framework.value]}
-                    </div>
-                  </div>
-                  <CheckCircle
-                    className={cn(
-                      "ml-auto h-4 w-4",
-                      selectedItems.some((item) => item.value === framework.value)
-                        ? "opacity-100"
-                        : "opacity-0",
-                    )}
-                  />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/timeline.tsx b/apps/dashboard/app/(app)/logs/components/filters/components/timeline.tsx
deleted file mode 100644
index f55be9ad91..0000000000
--- a/apps/dashboard/app/(app)/logs/components/filters/components/timeline.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client";
-
-import { Command, CommandGroup, CommandItem, CommandList } from "@/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
-import { sub } from "date-fns";
-import { Check, Clock } from "lucide-react";
-import { useState } from "react";
-import { type Timeline as TimelineType, useLogSearchParams } from "../../../query-state";
-
-const OPTIONS = [
-  { value: "1h", label: "Last hour" },
-  { value: "3h", label: "Last 3 hours" },
-  { value: "6h", label: "Last 6 hours" },
-  { value: "12h", label: "Last 12 hours" },
-  { value: "24h", label: "Last 24 hours" },
-] as const;
-
-export function Timeline() {
-  const [open, setOpen] = useState(false);
-  const [value, setValue] = useState<TimelineType>("1h");
-
-  const { setSearchParams } = useLogSearchParams();
-
-  const handleTimelineSet = (value: TimelineType) => {
-    setValue(value);
-    const now = new Date();
-
-    const startTime = sub(now, {
-      hours: Number.parseInt(value.replace("h", "")),
-    });
-
-    setSearchParams({
-      startTime: startTime.getTime(),
-      endTime: now.getTime(),
-    });
-    setOpen(false);
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <div className="flex gap-2 items-center justify-center">
-          <Clock className="h-4 w-4" />
-          {OPTIONS.find((o) => o.value === value)?.label}
-        </div>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <Command>
-          <CommandList>
-            <CommandGroup>
-              {OPTIONS.map((option) => (
-                <CommandItem
-                  key={option.value}
-                  value={option.value}
-                  onSelect={(v) => handleTimelineSet(v as TimelineType)}
-                >
-                  <Check
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      value === option.value ? "opacity-100" : "opacity-0",
-                    )}
-                  />
-                  <span className="font-medium">{option.label}</span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/apps/dashboard/app/(app)/logs/components/filters/index.tsx b/apps/dashboard/app/(app)/logs/components/filters/index.tsx
deleted file mode 100644
index e72ebcf076..0000000000
--- a/apps/dashboard/app/(app)/logs/components/filters/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use client";
-import { ButtonGroup } from "@/components/ui/group-button";
-import { Button } from "@unkey/ui";
-import { RefreshCcw } from "lucide-react";
-import { useLogSearchParams } from "../../query-state";
-import { DatePickerWithRange } from "./components/custom-date-filter";
-import { ResponseStatus } from "./components/response-status";
-import { SearchCombobox } from "./components/search-combobox/search-combobox";
-import { Timeline } from "./components/timeline";
-
-export const LogsFilters = () => {
-  const { searchParams, setSearchParams } = useLogSearchParams();
-
-  const handleRefresh = () => {
-    setSearchParams({
-      endTime: null,
-      host: null,
-      method: null,
-      path: null,
-      requestId: null,
-      responseStatus: [],
-      startTime: null,
-    });
-  };
-
-  return (
-    <div className="relative mb-4">
-      <div className="flex items-center gap-2 w-full flex-wrap">
-        <SearchCombobox />
-
-        <ButtonGroup>
-          <Button>
-            <Timeline />
-          </Button>
-          <Button>
-            <DatePickerWithRange
-              initialParams={{
-                startTime: searchParams.startTime,
-                endTime: searchParams.endTime,
-              }}
-            />
-          </Button>
-        </ButtonGroup>
-
-        <Button>
-          <ResponseStatus />
-        </Button>
-        <Button shape="square" className="w-10" onClick={handleRefresh}>
-          <RefreshCcw className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/dashboard/app/(app)/logs-v2/components/logs-client.tsx b/apps/dashboard/app/(app)/logs/components/logs-client.tsx
similarity index 90%
rename from apps/dashboard/app/(app)/logs-v2/components/logs-client.tsx
rename to apps/dashboard/app/(app)/logs/components/logs-client.tsx
index 7452659618..e2ebbd2d8a 100644
--- a/apps/dashboard/app/(app)/logs-v2/components/logs-client.tsx
+++ b/apps/dashboard/app/(app)/logs/components/logs-client.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useState } from "react";
 import { LogsProvider } from "../context/logs";
 import { LogsChart } from "./charts";
-import { ControlCloud } from "./control-cloud";
+import { LogsControlCloud } from "./control-cloud";
 import { LogsControls } from "./controls";
 import { LogDetails } from "./table/log-details";
 import { LogsTable } from "./table/logs-table";
@@ -18,7 +18,7 @@ export const LogsClient = () => {
   return (
     <LogsProvider>
       <LogsControls />
-      <ControlCloud />
+      <LogsControlCloud />
       <LogsChart onMount={handleDistanceToTop} />
       <LogsTable />
       <LogDetails distanceToTop={tableDistanceToTop} />
diff --git a/apps/dashboard/app/(app)/logs/components/table/hooks.ts b/apps/dashboard/app/(app)/logs/components/table/hooks.ts
deleted file mode 100644
index ed2313c47c..0000000000
--- a/apps/dashboard/app/(app)/logs/components/table/hooks.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { trpc } from "@/lib/trpc/client";
-import type { Log } from "@unkey/clickhouse/src/logs";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useDebounceCallback, useInterval } from "usehooks-ts";
-import { useLogSearchParams } from "../../query-state";
-import { getTimeseriesGranularity } from "../../utils";
-
-const roundToSecond = (timestamp: number) => Math.floor(timestamp / 1000) * 1000;
-
-export const useFetchLogs = (initialLogs: Log[]) => {
-  const { searchParams, setSearchParams } = useLogSearchParams();
-  const [logs, setLogs] = useState(initialLogs);
-  const [endTime, setEndTime] = useState(searchParams.endTime);
-
-  useInterval(() => setEndTime(Date.now()), searchParams.endTime ? null : 5000);
-
-  const filters = {
-    host: searchParams.host,
-    requestId: searchParams.requestId,
-    path: searchParams.path,
-    method: searchParams.method,
-    responseStatus: searchParams.responseStatus,
-  };
-
-  const hasFilters = useMemo(
-    () =>
-      Boolean(
-        filters.host ||
-          filters.requestId ||
-          filters.path ||
-          filters.method ||
-          filters.responseStatus.length,
-      ),
-    [filters],
-  );
-
-  const { startTime: rawStartTime, endTime: rawEndTime } = getTimeseriesGranularity(
-    searchParams.startTime,
-    endTime,
-  );
-
-  const { data: newData, isLoading } = trpc.logs.queryLogs.useQuery(
-    {
-      limit: 100,
-      startTime: roundToSecond(rawStartTime),
-      endTime: roundToSecond(rawEndTime),
-      ...filters,
-    },
-    {
-      refetchInterval: searchParams.endTime ? false : 5000,
-      keepPreviousData: true,
-    },
-  );
-
-  const updateLogs = useCallback(() => {
-    if (hasFilters) {
-      setLogs(newData ?? []);
-      return;
-    }
-
-    if (!newData?.length) {
-      return;
-    }
-
-    setLogs((prevLogs) => {
-      const existingIds = new Set(prevLogs.map((log) => log.request_id));
-      const uniqueNewLogs = newData.filter((newLog) => !existingIds.has(newLog.request_id));
-      return [...prevLogs, ...uniqueNewLogs];
-    });
-  }, [newData, hasFilters]);
-
-  const handleQueryParamReset = () => {
-    setSearchParams({
-      host: null,
-      path: null,
-      method: null,
-      endTime: null,
-      requestId: null,
-      startTime: null,
-      responseStatus: null,
-    });
-  };
-
-  const switchToLive = useDebounceCallback(handleQueryParamReset, 350);
-
-  useEffect(() => {
-    updateLogs();
-  }, [updateLogs]);
-
-  return { logs, isLoading, switchToLive };
-};
diff --git a/apps/dashboard/app/(app)/logs/components/table/hooks/use-logs-query.test.ts b/apps/dashboard/app/(app)/logs/components/table/hooks/use-logs-query.test.ts
new file mode 100644
index 0000000000..9d4176fabe
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/table/hooks/use-logs-query.test.ts
@@ -0,0 +1,146 @@
+import { trpc } from "@/lib/trpc/client";
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useLogsQuery } from "./use-logs-query";
+
+let mockFilters: any[] = [];
+const mockDate = 1706024400000;
+
+vi.mock("@/lib/trpc/client", () => {
+  const useInfiniteQuery = vi.fn().mockReturnValue({
+    data: null,
+    hasNextPage: false,
+    fetchNextPage: vi.fn(),
+    isFetchingNextPage: false,
+    isLoading: false,
+  });
+
+  const fetch = vi.fn();
+
+  return {
+    trpc: {
+      useUtils: () => ({
+        logs: {
+          queryLogs: {
+            fetch,
+          },
+        },
+      }),
+      logs: {
+        queryLogs: {
+          useInfiniteQuery,
+        },
+      },
+    },
+  };
+});
+
+vi.mock("../../../hooks/use-filters", () => ({
+  useFilters: () => ({
+    filters: mockFilters,
+  }),
+}));
+
+describe("useLogsQuery filter processing", () => {
+  beforeEach(() => {
+    mockFilters = [];
+    vi.setSystemTime(mockDate);
+  });
+
+  it("handles valid status filter", () => {
+    mockFilters = [{ field: "status", operator: "is", value: "404" }];
+    const { result } = renderHook(() => useLogsQuery());
+    expect(result.current.isPolling).toBe(false);
+  });
+
+  it("handles multiple valid filters", () => {
+    mockFilters = [
+      { field: "status", operator: "is", value: "404" },
+      { field: "methods", operator: "is", value: "GET" },
+      { field: "paths", operator: "startsWith", value: "/api" },
+    ];
+    const { result } = renderHook(() => useLogsQuery());
+    expect(result.current.isPolling).toBe(false);
+  });
+
+  it("handles invalid filter types", () => {
+    const consoleMock = vi.spyOn(console, "error");
+    mockFilters = [
+      { field: "methods", operator: "is", value: 123 },
+      { field: "paths", operator: "startsWith", value: true },
+      { field: "host", operator: "is", value: {} },
+    ];
+    renderHook(() => useLogsQuery());
+    expect(consoleMock).toHaveBeenCalledTimes(3);
+  });
+
+  it("handles time-based filters", () => {
+    mockFilters = [
+      { field: "startTime", operator: "is", value: mockDate - 3600000 },
+      { field: "since", operator: "is", value: "1h" },
+    ];
+    const { result } = renderHook(() => useLogsQuery());
+    expect(result.current.isPolling).toBe(false);
+  });
+});
+
+describe("useLogsQuery realtime logs", () => {
+  let useInfiniteQuery: ReturnType<typeof vi.fn>;
+  let fetch: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.setSystemTime(mockDate);
+    mockFilters = [];
+    //@ts-expect-error hacky way to mock trpc
+    useInfiniteQuery = vi.mocked(trpc.logs.queryLogs.useInfiniteQuery);
+    //@ts-expect-error hacky way to mock trpc
+    fetch = vi.mocked(trpc.useUtils().logs.queryLogs.fetch);
+  });
+
+  it("resets realtime logs when polling stops", async () => {
+    const mockLogs = [
+      { request_id: "1", time: Date.now(), method: "GET", path: "/api/test" },
+      { request_id: "2", time: Date.now(), method: "POST", path: "/api/users" },
+    ];
+
+    useInfiniteQuery.mockReturnValue({
+      data: {
+        pages: [{ logs: mockLogs, nextCursor: null }],
+      },
+      hasNextPage: false,
+      fetchNextPage: vi.fn(),
+      isFetchingNextPage: false,
+      isLoading: false,
+    });
+
+    fetch.mockResolvedValue({
+      logs: [
+        {
+          request_id: "3",
+          time: Date.now(),
+          method: "PUT",
+          path: "/api/update",
+        },
+      ],
+    });
+
+    const { result, rerender } = renderHook(
+      ({ startPolling, pollIntervalMs }) => useLogsQuery({ startPolling, pollIntervalMs }),
+      { initialProps: { startPolling: true, pollIntervalMs: 1000 } },
+    );
+
+    expect(result.current.historicalLogs).toHaveLength(2);
+
+    // Wait for polling interval
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve));
+    });
+
+    act(() => {
+      rerender({ startPolling: false, pollIntervalMs: 1000 });
+    });
+
+    expect(result.current.realtimeLogs).toHaveLength(0);
+    expect(result.current.historicalLogs).toHaveLength(2);
+  });
+});
diff --git a/apps/dashboard/app/(app)/logs/components/table/hooks/use-logs-query.ts b/apps/dashboard/app/(app)/logs/components/table/hooks/use-logs-query.ts
new file mode 100644
index 0000000000..99f750febc
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/table/hooks/use-logs-query.ts
@@ -0,0 +1,223 @@
+import { trpc } from "@/lib/trpc/client";
+import type { Log } from "@unkey/clickhouse/src/logs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { z } from "zod";
+import { useFilters } from "../../../hooks/use-filters";
+import type { queryLogsPayload } from "../query-logs.schema";
+
+// Duration in milliseconds for historical data fetch window (12 hours)
+export const HISTORICAL_DATA_WINDOW = 12 * 60 * 60 * 1000;
+type UseLogsQueryParams = {
+  limit?: number;
+  pollIntervalMs?: number;
+  startPolling?: boolean;
+};
+
+export function useLogsQuery({
+  limit = 50,
+  pollIntervalMs = 5000,
+  startPolling = false,
+}: UseLogsQueryParams = {}) {
+  const [historicalLogsMap, setHistoricalLogsMap] = useState(() => new Map<string, Log>());
+  const [realtimeLogsMap, setRealtimeLogsMap] = useState(() => new Map<string, Log>());
+
+  const { filters } = useFilters();
+  const queryClient = trpc.useUtils();
+
+  const realtimeLogs = useMemo(() => {
+    return Array.from(realtimeLogsMap.values());
+  }, [realtimeLogsMap]);
+
+  const historicalLogs = useMemo(() => Array.from(historicalLogsMap.values()), [historicalLogsMap]);
+
+  //Required for preventing double trpc call during initial render
+  const dateNow = useMemo(() => Date.now(), []);
+  const queryParams = useMemo(() => {
+    const params: z.infer<typeof queryLogsPayload> = {
+      limit,
+      startTime: dateNow - HISTORICAL_DATA_WINDOW,
+      endTime: dateNow,
+      host: { filters: [] },
+      requestId: { filters: [] },
+      method: { filters: [] },
+      path: { filters: [] },
+      status: { filters: [] },
+      since: "",
+    };
+
+    filters.forEach((filter) => {
+      switch (filter.field) {
+        case "status": {
+          params.status?.filters.push({
+            operator: "is",
+            value: Number.parseInt(filter.value as string),
+          });
+          break;
+        }
+
+        case "methods": {
+          if (typeof filter.value !== "string") {
+            console.error("Method filter value type has to be 'string'");
+            return;
+          }
+          params.method?.filters.push({
+            operator: "is",
+            value: filter.value,
+          });
+          break;
+        }
+
+        case "paths": {
+          if (typeof filter.value !== "string") {
+            console.error("Path filter value type has to be 'string'");
+            return;
+          }
+          params.path?.filters.push({
+            operator: filter.operator,
+            value: filter.value,
+          });
+          break;
+        }
+
+        case "host": {
+          if (typeof filter.value !== "string") {
+            console.error("Host filter value type has to be 'string'");
+            return;
+          }
+          params.host?.filters.push({
+            operator: "is",
+            value: filter.value,
+          });
+          break;
+        }
+
+        case "requestId": {
+          if (typeof filter.value !== "string") {
+            console.error("Request ID filter value type has to be 'string'");
+            return;
+          }
+          params.requestId?.filters.push({
+            operator: "is",
+            value: filter.value,
+          });
+          break;
+        }
+
+        case "startTime":
+        case "endTime": {
+          if (typeof filter.value !== "number") {
+            console.error(`${filter.field} filter value type has to be 'string'`);
+            return;
+          }
+          params[filter.field] = filter.value;
+          break;
+        }
+        case "since": {
+          if (typeof filter.value !== "string") {
+            console.error("Since filter value type has to be 'string'");
+            return;
+          }
+          params.since = filter.value;
+          break;
+        }
+      }
+    });
+
+    return params;
+  }, [filters, limit, dateNow]);
+
+  // Main query for historical data
+  const {
+    data: initialData,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+    isLoading: isLoadingInitial,
+  } = trpc.logs.queryLogs.useInfiniteQuery(queryParams, {
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+    initialCursor: { requestId: null, time: null },
+    staleTime: Number.POSITIVE_INFINITY,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+  });
+
+  // Query for new logs (polling)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: biome wants to everything as dep
+  const pollForNewLogs = useCallback(async () => {
+    try {
+      const latestTime = realtimeLogs[0]?.time ?? historicalLogs[0]?.time;
+      const result = await queryClient.logs.queryLogs.fetch({
+        ...queryParams,
+        startTime: latestTime ?? Date.now() - pollIntervalMs,
+        endTime: Date.now(),
+      });
+
+      if (result.logs.length === 0) {
+        return;
+      }
+
+      setRealtimeLogsMap((prevMap) => {
+        const newMap = new Map(prevMap);
+        let added = 0;
+
+        for (const log of result.logs) {
+          // Skip if exists in either map
+          if (newMap.has(log.request_id) || historicalLogsMap.has(log.request_id)) {
+            continue;
+          }
+
+          newMap.set(log.request_id, log);
+          added++;
+
+          if (newMap.size > Math.min(limit, 100)) {
+            const oldestKey = Array.from(newMap.keys()).shift()!;
+            newMap.delete(oldestKey);
+          }
+        }
+
+        // If nothing was added, return old map to prevent re-render
+        return added > 0 ? newMap : prevMap;
+      });
+    } catch (error) {
+      console.error("Error polling for new logs:", error);
+    }
+  }, [queryParams, queryClient, limit, pollIntervalMs, historicalLogsMap]);
+
+  // Set up polling effect
+  useEffect(() => {
+    if (startPolling) {
+      const interval = setInterval(pollForNewLogs, pollIntervalMs);
+      return () => clearInterval(interval);
+    }
+  }, [startPolling, pollForNewLogs, pollIntervalMs]);
+
+  // Update historical logs effect
+  useEffect(() => {
+    if (initialData) {
+      const newMap = new Map<string, Log>();
+      initialData.pages.forEach((page) => {
+        page.logs.forEach((log) => {
+          newMap.set(log.request_id, log);
+        });
+      });
+      setHistoricalLogsMap(newMap);
+    }
+  }, [initialData]);
+
+  // Reset realtime logs effect
+  useEffect(() => {
+    if (!startPolling) {
+      setRealtimeLogsMap(new Map());
+    }
+  }, [startPolling]);
+
+  return {
+    realtimeLogs,
+    historicalLogs,
+    isLoading: isLoadingInitial,
+    hasMore: hasNextPage,
+    loadMore: fetchNextPage,
+    isLoadingMore: isFetchingNextPage,
+    isPolling: startPolling,
+  };
+}
diff --git a/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-footer.tsx b/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-footer.tsx
index e1813feed3..c023482b97 100644
--- a/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-footer.tsx
+++ b/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-footer.tsx
@@ -1,10 +1,10 @@
 "use client";
+import { RED_STATES, YELLOW_STATES } from "@/app/(app)/logs/constants";
+import { extractResponseField, getRequestHeader } from "@/app/(app)/logs/utils";
+import { TimestampInfo } from "@/components/timestamp-info";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import type { Log } from "@unkey/clickhouse/src/logs";
-import { format } from "date-fns";
-import { RED_STATES, YELLOW_STATES } from "../../../../constants";
-import { extractResponseField, getRequestHeader } from "../../../../utils";
 import { RequestResponseDetails } from "./request-response-details";
 
 type Props = {
@@ -15,39 +15,41 @@ const DEFAULT_OUTCOME = "VALID";
 export const LogFooter = ({ log }: Props) => {
   return (
     <RequestResponseDetails
-      className="pl-3"
       fields={[
         {
           label: "Time",
-          description: (content) => <span className="text-[13px] font-mono">{content}</span>,
-          content: format(log.time, "MMM dd HH:mm:ss.SS"),
+          description: (content) => (
+            <TimestampInfo value={content} className="underline decoration-dotted" />
+          ),
+          content: log.time,
           tooltipContent: "Copy Time",
           tooltipSuccessMessage: "Time copied to clipboard",
+          skipTooltip: true,
         },
         {
           label: "Host",
-          description: (content) => <span className="text-[13px] font-mono">{content}</span>,
+          description: (content) => <span className="text-xs font-mono">{content}</span>,
           content: log.host,
           tooltipContent: "Copy Host",
           tooltipSuccessMessage: "Host copied to clipboard",
         },
         {
           label: "Request Path",
-          description: (content) => <span className="text-[13px] font-mono">{content}</span>,
+          description: (content) => <span className="text-xs font-mono">{content}</span>,
           content: log.path,
           tooltipContent: "Copy Request Path",
           tooltipSuccessMessage: "Request path copied to clipboard",
         },
         {
           label: "Request ID",
-          description: (content) => <span className="text-[13px] font-mono">{content}</span>,
+          description: (content) => <span className="text-xs font-mono">{content}</span>,
           content: log.request_id,
           tooltipContent: "Copy Request ID",
           tooltipSuccessMessage: "Request ID copied to clipboard",
         },
         {
           label: "Request User Agent",
-          description: (content) => <span className="text-[13px] font-mono">{content}</span>,
+          description: (content) => <span className="text-xs font-mono">{content}</span>,
           content: getRequestHeader(log, "user-agent") ?? "",
           tooltipContent: "Copy Request User Agent",
           tooltipSuccessMessage: "Request user agent copied to clipboard",
@@ -82,7 +84,7 @@ export const LogFooter = ({ log }: Props) => {
         {
           label: "Permissions",
           description: (content) => (
-            <span className="text-[13px] font-mono flex gap-1">
+            <span className="text-xs font-mono flex gap-1">
               {content.map((permission) => (
                 <Badge key={permission} variant="secondary">
                   {permission}
diff --git a/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-header.tsx b/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-header.tsx
index 3d2a0a8640..006bbaff72 100644
--- a/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-header.tsx
+++ b/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-header.tsx
@@ -1,37 +1,42 @@
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import type { Log } from "@unkey/clickhouse/src/logs";
+import { XMark } from "@unkey/icons";
 import { Button } from "@unkey/ui";
-import { X } from "lucide-react";
 
 type Props = {
   log: Log;
   onClose: () => void;
 };
+
 export const LogHeader = ({ onClose, log }: Props) => {
   return (
-    <div className="border-b-[1px] px-3 py-4 flex justify-between border-border items-center">
-      <div className="flex gap-2">
-        <Badge variant="secondary" className="bg-transparent">
+    <div className="border-b-[1px] flex justify-between items-center border-gray-4 pb-3">
+      <div className="flex gap-2 items-center flex-1 min-w-0">
+        <Badge className="uppercase px-[6px] rounded-md font-mono bg-accent-3 text-accent-11 hover:bg-accent-4">
           {log.method}
         </Badge>
-        <p className="text-[13px] text-content/65">{log.path}</p>
+        <p className="text-xs text-accent-12 truncate flex-1 mr-4">{log.path} </p>
       </div>
 
-      <div className="flex gap-1 items-center">
-        <Badge
-          className={cn(
-            "bg-background border border-solid border-border text-current hover:bg-transparent",
-            log.response_status >= 400 && "border-red-6 text-red-11",
-          )}
-        >
-          {log.response_status}
-        </Badge>
-
-        <span className="text-content/65">|</span>
-        <Button shape="square" variant="ghost" onClick={onClose}>
-          <X size="22" strokeWidth="1.5" className="text-content/65 cursor-pointer" />
-        </Button>
+      <div className="flex gap-1 items-center shrink-0">
+        <div className="flex gap-3">
+          <Badge
+            className={cn("px-[6px] rounded-md font-mono text-xs", {
+              "bg-success-3 text-success-11 hover:bg-success-4":
+                log.response_status >= 200 && log.response_status < 300,
+              "bg-warning-3 text-warning-11 hover:bg-warning-4":
+                log.response_status >= 400 && log.response_status < 500,
+              "bg-error-3 text-error-11 hover:bg-error-4": log.response_status >= 500,
+            })}
+          >
+            {log.response_status}
+          </Badge>
+          <span className="text-gray-5">|</span>
+          <Button size="icon" variant="ghost" onClick={onClose} className="[&_svg]:size-3">
+            <XMark className="text-gray-12 stroke-2" />
+          </Button>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-meta.tsx b/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-meta.tsx
index 4d954cb4dc..7c2a533a76 100644
--- a/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-meta.tsx
+++ b/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-meta.tsx
@@ -17,11 +17,11 @@ export const LogMetaSection = ({ content }: { content: string }) => {
   };
 
   return (
-    <div className="flex justify-between pt-2.5 px-3">
-      <div className="text-sm text-content/65 font-sans">Meta</div>
-      <Card className="rounded-[5px] flex">
-        <CardContent className="text-[12px] w-[300px] flex-2 bg-background-subtle p-3 rounded-[5px] relative group">
-          <pre>{content}</pre>
+    <div className="flex justify-between pt-2.5">
+      <div className="text-[13px] text-accent-9 font-sans">Meta</div>
+      <Card className="bg-gray-2 border-gray-4 rounded-lg">
+        <CardContent className="py-2 px-3 text-xs relative group min-w-[300px]">
+          <pre className="text-accent-12">{content}</pre>
           <Button
             shape="square"
             onClick={handleClick}
diff --git a/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-section.tsx b/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-section.tsx
index e15470c225..a86487e144 100644
--- a/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-section.tsx
+++ b/apps/dashboard/app/(app)/logs/components/table/log-details/components/log-section.tsx
@@ -23,23 +23,22 @@ export const LogSection = ({
   };
 
   return (
-    <div className="px-3 flex flex-col gap-[2px]">
+    <div className="flex flex-col gap-1 mt-[16px]">
       <div className="flex justify-between items-center">
-        <span className="text-sm text-content/65 font-sans">{title}</span>
+        <span className="text-[13px] text-accent-9 font-sans">{title}</span>
       </div>
-      <Card className="rounded-[5px] bg-background-subtle">
-        <CardContent className="p-2 text-[12px] relative group">
-          <pre>
+      <Card className="bg-gray-2 border-gray-4 rounded-lg">
+        <CardContent className="py-2 px-3 text-xs relative group ">
+          <pre className="flex flex-col gap-1 whitespace-pre-wrap leading-relaxed">
             {Array.isArray(details)
               ? details.map((header) => {
                   const [key, ...valueParts] = header.split(":");
                   const value = valueParts.join(":").trim();
                   return (
-                    <span key={header}>
-                      <span className="text-content/65">{key}</span>
-                      <span className="text-content whitespace-pre-line">: {value}</span>
-                      {"\n"}
-                    </span>
+                    <div className="group flex items-center w-full p-[3px]" key={key}>
+                      <span className="w-28 text-left truncate text-accent-9">{key}:</span>
+                      <span className="ml-2 text-xs text-accent-12 ">{value}</span>
+                    </div>
                   );
                 })
               : details}
diff --git a/apps/dashboard/app/(app)/logs/components/table/log-details/components/request-response-details.tsx b/apps/dashboard/app/(app)/logs/components/table/log-details/components/request-response-details.tsx
index 2bac0f8aa9..15869e7d80 100644
--- a/apps/dashboard/app/(app)/logs/components/table/log-details/components/request-response-details.tsx
+++ b/apps/dashboard/app/(app)/logs/components/table/log-details/components/request-response-details.tsx
@@ -65,14 +65,16 @@ export const RequestResponseDetails = <T extends unknown[]>({ fields, className
       // biome-ignore lint/a11y/useKeyWithClickEvents: no need
       <div
         className={cn(
-          "flex w-full justify-between border-border border-solid pr-3 py-[10px] items-center cursor-pointer",
+          "flex w-full justify-between border-border border-solid pr-3 py-3 items-center cursor-pointer",
           "border-b",
           field.className,
         )}
         onClick={!field.skipTooltip ? () => handleClick(field) : undefined}
       >
-        <span className="text-sm text-content/65 pl-3">{field.label}</span>
-        {field.description(field.content as NonNullable<T[number]>)}
+        <span className="text-accent-9 text-[13px]">{field.label}</span>
+        <span className="text-accent-12">
+          {field.description(field.content as NonNullable<T[number]>)}
+        </span>
       </div>
     );
 
@@ -84,7 +86,7 @@ export const RequestResponseDetails = <T extends unknown[]>({ fields, className
       <TooltipProvider key={`${field.label}-${index}`}>
         <Tooltip>
           <TooltipTrigger asChild>{baseContent}</TooltipTrigger>
-          <TooltipContent side="left">{field.tooltipContent}</TooltipContent>
+          <TooltipContent side="bottom">{field.tooltipContent}</TooltipContent>
         </Tooltip>
       </TooltipProvider>
     );
diff --git a/apps/dashboard/app/(app)/logs/components/table/log-details/index.tsx b/apps/dashboard/app/(app)/logs/components/table/log-details/index.tsx
index 02313c4db9..132d153bd7 100644
--- a/apps/dashboard/app/(app)/logs/components/table/log-details/index.tsx
+++ b/apps/dashboard/app/(app)/logs/components/table/log-details/index.tsx
@@ -1,75 +1,64 @@
 "use client";
 
-import type { Log } from "@unkey/clickhouse/src/logs";
-import { memo, useMemo, useState } from "react";
-import { useDebounceCallback } from "usehooks-ts";
+import { useMemo } from "react";
 import { DEFAULT_DRAGGABLE_WIDTH } from "../../../constants";
+import { useLogsContext } from "../../../context/logs";
 import { extractResponseField, safeParseJson } from "../../../utils";
 import { LogFooter } from "./components/log-footer";
 import { LogHeader } from "./components/log-header";
 import { LogMetaSection } from "./components/log-meta";
 import { LogSection } from "./components/log-section";
-import ResizablePanel from "./resizable-panel";
+import { ResizablePanel } from "./resizable-panel";
+
+const PANEL_MAX_WIDTH = 600;
+const PANEL_MIN_WIDTH = 400;
+
+const createPanelStyle = (distanceToTop: number) => ({
+  top: `${distanceToTop}px`,
+  width: `${DEFAULT_DRAGGABLE_WIDTH}px`,
+  height: `calc(100vh - ${distanceToTop}px)`,
+  paddingBottom: "1rem",
+});
 
 type Props = {
-  log: Log | null;
-  onClose: () => void;
   distanceToTop: number;
 };
 
-const PANEL_WIDTH_SET_DELAY = 150;
-
-const _LogDetails = ({ log, onClose, distanceToTop }: Props) => {
-  const [panelWidth, setPanelWidth] = useState(DEFAULT_DRAGGABLE_WIDTH);
-
-  const debouncedSetPanelWidth = useDebounceCallback((newWidth) => {
-    setPanelWidth(newWidth);
-  }, PANEL_WIDTH_SET_DELAY);
-
-  const panelStyle = useMemo(
-    () => ({
-      top: `${distanceToTop}px`,
-      width: `${panelWidth}px`,
-      height: `calc(100vh - ${distanceToTop}px)`,
-      paddingBottom: "1rem",
-    }),
-    [distanceToTop, panelWidth],
-  );
+export const LogDetails = ({ distanceToTop }: Props) => {
+  const { setSelectedLog, selectedLog: log } = useLogsContext();
+  const panelStyle = useMemo(() => createPanelStyle(distanceToTop), [distanceToTop]);
 
   if (!log) {
     return null;
   }
 
+  const handleClose = () => {
+    setSelectedLog(null);
+  };
+
   return (
     <ResizablePanel
-      onResize={debouncedSetPanelWidth}
-      onClose={onClose}
-      className="absolute right-0 bg-background border-l border-t border-solid font-mono border-border shadow-md overflow-y-auto z-[3]"
+      minW={PANEL_MIN_WIDTH}
+      maxW={PANEL_MAX_WIDTH}
+      onClose={handleClose}
+      className="absolute right-0 bg-gray-1 dark:bg-black font-mono drop-shadow-2xl overflow-y-auto z-20 p-4"
       style={panelStyle}
     >
-      <LogHeader log={log} onClose={onClose} />
+      <LogHeader log={log} onClose={handleClose} />
 
-      <div className="space-y-3 border-b-[1px] border-border py-4">
-        <div className="mt-[-24px]" />
-        <LogSection details={log.request_headers} title="Request Header" />
-        <LogSection
-          details={JSON.stringify(safeParseJson(log.request_body), null, 2)}
-          title="Request Body"
-        />
-        <LogSection details={log.response_headers} title="Response Header" />
-        <LogSection
-          details={JSON.stringify(safeParseJson(log.response_body), null, 2)}
-          title="Response Body"
-        />
-      </div>
+      <LogSection details={log.request_headers} title="Request Header" />
+      <LogSection
+        details={JSON.stringify(safeParseJson(log.request_body), null, 2)}
+        title="Request Body"
+      />
+      <LogSection details={log.response_headers} title="Response Header" />
+      <LogSection
+        details={JSON.stringify(safeParseJson(log.response_body), null, 2)}
+        title="Response Body"
+      />
+      <div className="mt-3" />
       <LogFooter log={log} />
       <LogMetaSection content={JSON.stringify(extractResponseField(log, "meta"), null, 2)} />
     </ResizablePanel>
   );
 };
-
-// Without memo each time trpc makes a request LogDetails re-renders
-export const LogDetails = memo(
-  _LogDetails,
-  (prev, next) => prev.log?.request_id === next.log?.request_id,
-);
diff --git a/apps/dashboard/app/(app)/logs/components/table/log-details/resizable-panel.tsx b/apps/dashboard/app/(app)/logs/components/table/log-details/resizable-panel.tsx
index 66b92a65ec..029f61f84e 100644
--- a/apps/dashboard/app/(app)/logs/components/table/log-details/resizable-panel.tsx
+++ b/apps/dashboard/app/(app)/logs/components/table/log-details/resizable-panel.tsx
@@ -3,7 +3,7 @@ import { type PropsWithChildren, useCallback, useEffect, useRef, useState } from
 import { useOnClickOutside } from "usehooks-ts";
 import { MAX_DRAGGABLE_WIDTH, MIN_DRAGGABLE_WIDTH } from "../../../constants";
 
-const ResizablePanel = ({
+export const ResizablePanel = ({
   children,
   onResize,
   onClose,
@@ -70,12 +70,10 @@ const ResizablePanel = ({
       style={{ ...style, width, right: 0, position: "fixed" }}
     >
       <div
-        className="absolute top-0 left-0 w-[2px] h-full cursor-ew-resize hover:bg-primary/10 "
+        className="absolute top-0 left-0 w-[3px] h-full border-l border-gray-4 cursor-ew-resize hover:bg-gray-6 transition-all"
         onMouseDown={handleMouseDown}
       />
       {children}
     </div>
   );
 };
-
-export default ResizablePanel;
diff --git a/apps/dashboard/app/(app)/logs/components/table/logs-table-loading-row.tsx b/apps/dashboard/app/(app)/logs/components/table/logs-table-loading-row.tsx
deleted file mode 100644
index b2fceee53a..0000000000
--- a/apps/dashboard/app/(app)/logs/components/table/logs-table-loading-row.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export const LoadingRow = () => (
-  <div className="absolute w-full font-mono grid grid-cols-[166px_72px_20%_1fr] text-[13px] leading-[14px] mb-[1px] h-[26px]">
-    <div className="px-[2px] flex items-center">
-      <div className="h-4 bg-background-subtle animate-pulse rounded w-full" />
-    </div>
-    <div className="px-[2px] flex items-center">
-      <div className="h-4 bg-background-subtle animate-pulse rounded w-full" />
-    </div>
-    <div className="px-[2px] flex items-center">
-      <div className="h-4 bg-background-subtle animate-pulse rounded w-full" />
-    </div>
-    <div className="px-[2px] flex items-center">
-      <div className="h-4 bg-background-subtle animate-pulse rounded w-full" />
-    </div>
-  </div>
-);
diff --git a/apps/dashboard/app/(app)/logs/components/table/logs-table.tsx b/apps/dashboard/app/(app)/logs/components/table/logs-table.tsx
index 3db18b1cc1..a99e32d50a 100644
--- a/apps/dashboard/app/(app)/logs/components/table/logs-table.tsx
+++ b/apps/dashboard/app/(app)/logs/components/table/logs-table.tsx
@@ -1,93 +1,267 @@
+"use client";
+
 import { TimestampInfo } from "@/components/timestamp-info";
 import { Badge } from "@/components/ui/badge";
-import { VirtualTable } from "@/components/virtual-table";
+import { VirtualTable } from "@/components/virtual-table/index";
 import type { Column } from "@/components/virtual-table/types";
 import { cn } from "@/lib/utils";
 import type { Log } from "@unkey/clickhouse/src/logs";
-import { useState } from "react";
-import { useFetchLogs } from "./hooks";
-import { LogDetails } from "./log-details";
-
-export const LogsTable = ({ initialLogs }: { initialLogs?: Log[] }) => {
-  const { logs, isLoading, switchToLive } = useFetchLogs(initialLogs ?? []);
-  const [selectedLog, setSelectedLog] = useState<Log | null>(null);
-
-  const columns: Column<Log>[] = [
-    {
-      key: "time",
-      header: "Time",
-      width: "166px",
-      render: (log) => <TimestampInfo value={log.time} />,
-    },
-    {
-      key: "status",
-      header: "Status",
-      width: "72px",
-      render: (log) => (
-        <Badge
-          className={cn(
-            {
-              "bg-background border border-solid border-border text-current hover:bg-transparent":
-                log.response_status >= 400,
-            },
-            "uppercase",
-          )}
-        >
-          {log.response_status}
-        </Badge>
-      ),
+import { TriangleWarning2 } from "@unkey/icons";
+import { Empty } from "@unkey/ui";
+import { useMemo } from "react";
+import { isDisplayProperty, useLogsContext } from "../../context/logs";
+import { extractResponseField } from "../../utils";
+import { useLogsQuery } from "./hooks/use-logs-query";
+
+type StatusStyle = {
+  base: string;
+  hover: string;
+  selected: string;
+  badge: {
+    default: string;
+    selected: string;
+  };
+  focusRing: string;
+};
+
+const STATUS_STYLES = {
+  success: {
+    base: "text-accent-9",
+    hover: "hover:text-accent-11 dark:hover:text-accent-12 hover:bg-accent-3",
+    selected: "text-accent-11 bg-accent-3 dark:text-accent-12",
+    badge: {
+      default: "bg-accent-4 text-accent-11 group-hover:bg-accent-5",
+      selected: "bg-accent-5 text-accent-12 hover:bg-hover-5",
     },
-    {
-      key: "path",
-      header: "Path",
-      width: "20%",
-      render: (log) => (
-        <div className="flex items-center gap-2">
-          <Badge className="bg-background border border-solid border-border text-current hover:bg-transparent">
-            {log.method}
-          </Badge>
-          {log.path}
-        </div>
-      ),
+    focusRing: "focus:ring-accent-7",
+  },
+  warning: {
+    base: "text-warning-11 bg-warning-2",
+    hover: "hover:bg-warning-3",
+    selected: "bg-warning-3",
+    badge: {
+      default: "bg-warning-4 text-warning-11 group-hover:bg-warning-5",
+      selected: "bg-warning-5 text-warning-11 hover:bg-warning-5",
     },
-    {
-      key: "response",
-      header: "Response Body",
-      width: "1fr",
-      render: (log) => <span className="truncate">{log.response_body}</span>,
+    focusRing: "focus:ring-warning-7",
+  },
+  error: {
+    base: "text-error-11 bg-error-2",
+    hover: "hover:bg-error-3",
+    selected: "bg-error-3",
+    badge: {
+      default: "bg-error-4 text-error-11 group-hover:bg-error-5",
+      selected: "bg-error-5 text-error-11 hover:bg-error-5",
     },
-  ];
-
-  const getRowClassName = (log: Log) =>
-    cn({
-      "bg-amber-2 text-amber-11 hover:bg-amber-3":
-        log.response_status >= 400 && log.response_status < 500,
-      "bg-red-2 text-red-11 hover:bg-red-3": log.response_status >= 500,
-    });
-
-  const getSelectedClassName = (log: Log, isSelected: boolean) =>
-    isSelected
-      ? cn({
-          "bg-background-subtle/90": log.response_status >= 200 && log.response_status < 300,
-          "bg-amber-3": log.response_status >= 400 && log.response_status < 500,
-          "bg-red-3": log.response_status >= 500,
-        })
-      : "";
+    focusRing: "focus:ring-error-7",
+  },
+};
+
+const METHOD_BADGE = {
+  base: "uppercase px-[6px] rounded-md font-mono bg-accent-4 text-accent-11 group-hover:bg-accent-5 group-hover:text-accent-12",
+  selected: "bg-accent-5 text-accent-12",
+};
+
+const getStatusStyle = (status: number): StatusStyle => {
+  if (status >= 500) {
+    return STATUS_STYLES.error;
+  }
+  if (status >= 400) {
+    return STATUS_STYLES.warning;
+  }
+  return STATUS_STYLES.success;
+};
+
+const WARNING_ICON_STYLES = {
+  base: "size-3",
+  warning: "text-warning-11",
+  error: "text-error-11",
+};
+
+const getSelectedClassName = (log: Log, isSelected: boolean) => {
+  if (!isSelected) {
+    return "";
+  }
+  const style = getStatusStyle(log.response_status);
+  return style.selected;
+};
+
+const WarningIcon = ({ status }: { status: number }) => (
+  <TriangleWarning2
+    className={cn(
+      WARNING_ICON_STYLES.base,
+      status < 300 && "invisible",
+      status >= 400 && status < 500 && WARNING_ICON_STYLES.warning,
+      status >= 500 && WARNING_ICON_STYLES.error,
+    )}
+  />
+);
+
+const additionalColumns: Column<Log>[] = [
+  "response_body",
+  "request_body",
+  "request_headers",
+  "response_headers",
+  "request_id",
+  "workspace_id",
+  "host",
+].map((key) => ({
+  key,
+  header: key
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" "),
+  width: "1fr",
+  render: (log: Log) => (
+    <div className="font-mono whitespace-nowrap truncate">{log[key as keyof Log]}</div>
+  ),
+}));
+
+export const LogsTable = () => {
+  const { displayProperties, setSelectedLog, selectedLog, isLive } = useLogsContext();
+  const { realtimeLogs, historicalLogs, isLoading, isLoadingMore, loadMore } = useLogsQuery({
+    startPolling: isLive,
+    pollIntervalMs: 2000,
+  });
+
+  const getRowClassName = (log: Log) => {
+    const style = getStatusStyle(log.response_status);
+    const isSelected = selectedLog?.request_id === log.request_id;
+
+    return cn(
+      style.base,
+      style.hover,
+      "group rounded-md",
+      "focus:outline-none focus:ring-1 focus:ring-opacity-40",
+      style.focusRing,
+      isSelected && style.selected,
+      isLive &&
+        !realtimeLogs.some((realtime) => realtime.request_id === log.request_id) && [
+          "opacity-50",
+          "hover:opacity-100",
+        ],
+      selectedLog && {
+        "opacity-50 z-0": !isSelected,
+        "opacity-100 z-10": isSelected,
+      },
+    );
+  };
+  // biome-ignore lint/correctness/useExhaustiveDependencies: it's okay
+  const basicColumns: Column<Log>[] = useMemo(
+    () => [
+      {
+        key: "time",
+        header: "Time",
+        width: "165px",
+        headerClassName: "pl-9",
+        noTruncate: true,
+        render: (log) => (
+          <div className="flex items-center gap-3">
+            <TimestampInfo
+              value={log.time}
+              className={cn(
+                "font-mono group-hover:underline decoration-dotted",
+                selectedLog && selectedLog.request_id !== log.request_id && "pointer-events-none",
+              )}
+            />
+          </div>
+        ),
+      },
+      {
+        key: "response_status",
+        header: "Status",
+        width: "7.5%",
+        noTruncate: true,
+        render: (log) => {
+          const style = getStatusStyle(log.response_status);
+          const isSelected = selectedLog?.request_id === log.request_id;
+          return (
+            <div className="flex gap-1">
+              <Badge
+                className={cn(
+                  "uppercase px-[6px] rounded-md font-mono whitespace-nowrap",
+                  isSelected ? style.badge.selected : style.badge.default,
+                )}
+              >
+                {log.response_status}{" "}
+                {extractResponseField(log, "code") ? `| ${extractResponseField(log, "code")}` : ""}
+              </Badge>
+            </div>
+          );
+        },
+      },
+      {
+        key: "method",
+        header: "Method",
+        width: "78px",
+        noTruncate: true,
+        render: (log) => {
+          const isSelected = selectedLog?.request_id === log.request_id;
+          return (
+            <Badge className={cn(METHOD_BADGE.base, isSelected && METHOD_BADGE.selected)}>
+              {log.method}
+            </Badge>
+          );
+        },
+      },
+      {
+        key: "path",
+        header: "Path",
+        width: "15%",
+        render: (log) => <div className="font-mono">{log.path}</div>,
+      },
+    ],
+    [selectedLog?.request_id],
+  );
+
+  const visibleColumns = useMemo(() => {
+    const filtered = [...basicColumns, ...additionalColumns].filter(
+      (column) => isDisplayProperty(column.key) && displayProperties.has(column.key),
+    );
+
+    // If we have visible columns
+    if (filtered.length > 0) {
+      const originalRender = filtered[0].render;
+      filtered[0] = {
+        ...filtered[0],
+        headerClassName: "pl-9",
+        render: (log: Log) => (
+          <div className="flex items-center gap-3 px-2">
+            <WarningIcon status={log.response_status} />
+            <div className="flex-1 min-w-0">{originalRender(log)}</div>
+          </div>
+        ),
+      };
+    }
+
+    return filtered;
+  }, [basicColumns, displayProperties]);
 
   return (
     <VirtualTable
-      data={logs ?? []}
-      columns={columns}
+      data={historicalLogs}
+      realtimeData={realtimeLogs}
       isLoading={isLoading}
-      onLoadMore={switchToLive}
+      isFetchingNextPage={isLoadingMore}
+      onLoadMore={loadMore}
+      columns={visibleColumns}
       onRowClick={setSelectedLog}
       selectedItem={selectedLog}
       keyExtractor={(log) => log.request_id}
       rowClassName={getRowClassName}
       selectedClassName={getSelectedClassName}
-      renderDetails={(log, onClose, distanceToTop) => (
-        <LogDetails log={log} onClose={onClose} distanceToTop={distanceToTop} />
-      )}
+      emptyState={
+        <div className="w-full flex justify-center items-center h-full">
+          <Empty className="w-[400px] flex items-start">
+            <Empty.Icon className="w-auto" />
+            <Empty.Title>Logs</Empty.Title>
+            <Empty.Description className="text-left">
+              Keep track of all activity within your workspace. We collect all API requests, giving
+              you a clear history to find problems or debug issues.
+            </Empty.Description>
+          </Empty>
+        </div>
+      }
     />
   );
 };
diff --git a/apps/dashboard/app/(app)/logs/components/table/query-logs.schema.ts b/apps/dashboard/app/(app)/logs/components/table/query-logs.schema.ts
new file mode 100644
index 0000000000..de8b5416b8
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/components/table/query-logs.schema.ts
@@ -0,0 +1,66 @@
+import { z } from "zod";
+import { filterOperatorEnum } from "../../filters.schema";
+
+export const queryLogsPayload = z.object({
+  limit: z.number().int(),
+  startTime: z.number().int(),
+  endTime: z.number().int(),
+  since: z.string(),
+  path: z
+    .object({
+      filters: z.array(
+        z.object({
+          operator: filterOperatorEnum,
+          value: z.string(),
+        }),
+      ),
+    })
+    .nullable(),
+  host: z
+    .object({
+      filters: z.array(
+        z.object({
+          operator: z.literal("is"),
+          value: z.string(),
+        }),
+      ),
+    })
+    .nullable(),
+  method: z
+    .object({
+      filters: z.array(
+        z.object({
+          operator: z.literal("is"),
+          value: z.string(),
+        }),
+      ),
+    })
+    .nullable(),
+  requestId: z
+    .object({
+      filters: z.array(
+        z.object({
+          operator: z.literal("is"),
+          value: z.string(),
+        }),
+      ),
+    })
+    .nullable(),
+  status: z
+    .object({
+      filters: z.array(
+        z.object({
+          operator: z.literal("is"),
+          value: z.number(),
+        }),
+      ),
+    })
+    .nullable(),
+  cursor: z
+    .object({
+      requestId: z.string().nullable(),
+      time: z.number().nullable(),
+    })
+    .optional()
+    .nullable(),
+});
diff --git a/apps/dashboard/app/(app)/logs/constants.ts b/apps/dashboard/app/(app)/logs/constants.ts
index 22bb62f1cb..81a1b65d7b 100644
--- a/apps/dashboard/app/(app)/logs/constants.ts
+++ b/apps/dashboard/app/(app)/logs/constants.ts
@@ -7,3 +7,6 @@ export const DEFAULT_LOGS_FETCH_COUNT = 100;
 
 export const YELLOW_STATES = ["RATE_LIMITED", "EXPIRED", "USAGE_EXCEEDED"];
 export const RED_STATES = ["DISABLED", "FORBIDDEN", "INSUFFICIENT_PERMISSIONS"];
+
+export const METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"] as const;
+export const STATUSES = [200, 400, 500] as const;
diff --git a/apps/dashboard/app/(app)/logs-v2/context/logs.tsx b/apps/dashboard/app/(app)/logs/context/logs.tsx
similarity index 88%
rename from apps/dashboard/app/(app)/logs-v2/context/logs.tsx
rename to apps/dashboard/app/(app)/logs/context/logs.tsx
index 0331c84751..59344cabeb 100644
--- a/apps/dashboard/app/(app)/logs-v2/context/logs.tsx
+++ b/apps/dashboard/app/(app)/logs/context/logs.tsx
@@ -16,6 +16,8 @@ type DisplayProperty =
   | "response_headers";
 
 type LogsContextType = {
+  isLive: boolean;
+  toggleLive: (value?: boolean) => void;
   selectedLog: Log | null;
   setSelectedLog: (log: Log | null) => void;
   displayProperties: Set<DisplayProperty>;
@@ -34,6 +36,7 @@ const LogsContext = createContext<LogsContextType | null>(null);
 
 export const LogsProvider = ({ children }: PropsWithChildren) => {
   const [selectedLog, setSelectedLog] = useState<Log | null>(null);
+  const [isLive, setIsLive] = useState(false);
   const [displayProperties, setDisplayProperties] = useState<Set<DisplayProperty>>(
     new Set(DEFAULT_DISPLAY_PROPERTIES),
   );
@@ -50,9 +53,15 @@ export const LogsProvider = ({ children }: PropsWithChildren) => {
     });
   };
 
+  const toggleLive = (value?: boolean) => {
+    setIsLive((prev) => (typeof value !== "undefined" ? value : !prev));
+  };
+
   return (
     <LogsContext.Provider
       value={{
+        isLive,
+        toggleLive,
         selectedLog,
         setSelectedLog,
         displayProperties,
diff --git a/apps/dashboard/app/(app)/logs/filters-schema.test.ts b/apps/dashboard/app/(app)/logs/filters-schema.test.ts
new file mode 100644
index 0000000000..619224a5ac
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/filters-schema.test.ts
@@ -0,0 +1,137 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  filterFieldConfig,
+  transformStructuredOutputToFilters,
+  validateFieldValue,
+} from "./filters.schema";
+import type { FilterValue } from "./filters.type";
+
+vi.stubGlobal("crypto", {
+  randomUUID: vi.fn(() => "test-uuid"),
+});
+
+describe("transformStructuredOutputToFilters", () => {
+  it("should transform structured output to filters correctly", () => {
+    const input = {
+      filters: [
+        {
+          field: "status",
+          filters: [{ operator: "is", value: 404 }],
+        },
+        {
+          field: "paths",
+          filters: [
+            { operator: "contains", value: "api" },
+            { operator: "startsWith", value: "/v1" },
+          ],
+        },
+      ],
+    };
+
+    //@ts-ignore
+    const result = transformStructuredOutputToFilters(input, undefined);
+
+    expect(result).toHaveLength(3);
+    expect(result[0]).toMatchObject({
+      field: "status",
+      operator: "is",
+      value: 404,
+      metadata: {
+        colorClass: "bg-warning-8",
+      },
+    });
+    expect(result[1]).toMatchObject({
+      field: "paths",
+      operator: "contains",
+      value: "api",
+    });
+    expect(result[2]).toMatchObject({
+      field: "paths",
+      operator: "startsWith",
+      value: "/v1",
+    });
+  });
+
+  it("should deduplicate filters with existing filters", () => {
+    const existingFilters: FilterValue[] = [
+      {
+        id: "123",
+        field: "status",
+        operator: "is",
+        value: 404,
+        metadata: { colorClass: "bg-warning-8" },
+      },
+    ];
+
+    const input = {
+      filters: [
+        {
+          field: "status",
+          filters: [{ operator: "is", value: 404 }],
+        },
+        {
+          field: "paths",
+          filters: [{ operator: "contains", value: "api" }],
+        },
+      ],
+    };
+
+    //@ts-ignore
+    const result = transformStructuredOutputToFilters(input, existingFilters);
+
+    expect(result).toHaveLength(2);
+    expect(result[1]).toMatchObject({
+      field: "paths",
+      operator: "contains",
+      value: "api",
+    });
+  });
+});
+
+describe("validateFieldValue", () => {
+  it("should validate status codes correctly", () => {
+    expect(validateFieldValue("status", 200)).toBe(true);
+    expect(validateFieldValue("status", 404)).toBe(true);
+    expect(validateFieldValue("status", 500)).toBe(true);
+    expect(validateFieldValue("status", 600)).toBe(false);
+  });
+
+  it("should validate HTTP methods correctly", () => {
+    expect(validateFieldValue("methods", "GET")).toBe(true);
+    expect(validateFieldValue("methods", "POST")).toBe(true);
+    expect(validateFieldValue("methods", "INVALID")).toBe(false);
+  });
+
+  it("should validate string fields correctly", () => {
+    expect(validateFieldValue("paths", "/api/v1")).toBe(true);
+    expect(validateFieldValue("host", "example.com")).toBe(true);
+    expect(validateFieldValue("requestId", "req-123")).toBe(true);
+  });
+
+  it("should validate number fields correctly", () => {
+    expect(validateFieldValue("startTime", 1234567890)).toBe(true);
+    expect(validateFieldValue("endTime", 1234567890)).toBe(true);
+  });
+});
+
+describe("filterFieldConfig", () => {
+  it("should have correct status color classes", () => {
+    expect(filterFieldConfig.status.getColorClass!(200)).toBe("bg-success-9");
+    expect(filterFieldConfig.status.getColorClass!(404)).toBe("bg-warning-8");
+    expect(filterFieldConfig.status.getColorClass!(500)).toBe("bg-error-9");
+  });
+
+  it("should have correct operators for each field", () => {
+    expect(filterFieldConfig.status.operators).toEqual(["is"]);
+    expect(filterFieldConfig.paths.operators).toEqual(["is", "contains", "startsWith", "endsWith"]);
+    expect(filterFieldConfig.host.operators).toEqual(["is"]);
+    expect(filterFieldConfig.requestId.operators).toEqual(["is"]);
+  });
+
+  it("should have correct field types", () => {
+    expect(filterFieldConfig.status.type).toBe("number");
+    expect(filterFieldConfig.methods.type).toBe("string");
+    expect(filterFieldConfig.paths.type).toBe("string");
+    expect(filterFieldConfig.host.type).toBe("string");
+  });
+});
diff --git a/apps/dashboard/app/(app)/logs-v2/filters.schema.ts b/apps/dashboard/app/(app)/logs/filters.schema.ts
similarity index 94%
rename from apps/dashboard/app/(app)/logs-v2/filters.schema.ts
rename to apps/dashboard/app/(app)/logs/filters.schema.ts
index eea5633f1a..d3e2d85cb2 100644
--- a/apps/dashboard/app/(app)/logs-v2/filters.schema.ts
+++ b/apps/dashboard/app/(app)/logs/filters.schema.ts
@@ -21,6 +21,7 @@ export const filterFieldEnum = z.enum([
   "status",
   "startTime",
   "endTime",
+  "since",
 ]);
 
 export const filterOutputSchema = z.object({
@@ -114,7 +115,7 @@ function isStringConfig(config: FieldConfig): config is StringConfig {
   return config.type === "string";
 }
 
-function validateFieldValue(field: FilterField, value: string | number): boolean {
+export function validateFieldValue(field: FilterField, value: string | number): boolean {
   const config = filterFieldConfig[field];
 
   if (isStatusConfig(config) && typeof value === "number") {
@@ -152,7 +153,7 @@ export const filterFieldConfig: FilterFieldConfigs = {
       }
       return "bg-success-9";
     },
-    validate: (value) => value >= 100 && value <= 599,
+    validate: (value) => value >= 200 && value <= 599,
   },
   methods: {
     type: "string",
@@ -165,7 +166,7 @@ export const filterFieldConfig: FilterFieldConfigs = {
   },
   host: {
     type: "string",
-    operators: ["is", "contains"],
+    operators: ["is"],
   },
   requestId: {
     type: "string",
@@ -179,4 +180,8 @@ export const filterFieldConfig: FilterFieldConfigs = {
     type: "number",
     operators: ["is"],
   },
+  since: {
+    type: "string",
+    operators: ["is"],
+  },
 } as const;
diff --git a/apps/dashboard/app/(app)/logs-v2/filters.type.ts b/apps/dashboard/app/(app)/logs/filters.type.ts
similarity index 94%
rename from apps/dashboard/app/(app)/logs-v2/filters.type.ts
rename to apps/dashboard/app/(app)/logs/filters.type.ts
index 702680cfe2..67ca013973 100644
--- a/apps/dashboard/app/(app)/logs-v2/filters.type.ts
+++ b/apps/dashboard/app/(app)/logs/filters.type.ts
@@ -42,18 +42,20 @@ export type FilterFieldConfigs = {
   requestId: StringConfig;
   startTime: NumberConfig;
   endTime: NumberConfig;
+  since: StringConfig;
 };
 
 export type AllowedOperators<F extends FilterField> = FilterFieldConfigs[F]["operators"][number];
 
 export type QuerySearchParams = {
-  host: FilterUrlValue | null;
-  requestId: FilterUrlValue | null;
   methods: FilterUrlValue[] | null;
   paths: FilterUrlValue[] | null;
   status: FilterUrlValue[] | null;
   startTime?: number | null;
   endTime?: number | null;
+  since?: string | null;
+  host: FilterUrlValue[] | null;
+  requestId: FilterUrlValue[] | null;
 };
 
 export interface FilterUrlValue {
diff --git a/apps/dashboard/app/(app)/logs/hooks/use-bookmarked-filters.ts b/apps/dashboard/app/(app)/logs/hooks/use-bookmarked-filters.ts
new file mode 100644
index 0000000000..150e645660
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/hooks/use-bookmarked-filters.ts
@@ -0,0 +1,114 @@
+import { useCallback, useEffect } from "react";
+import { filterFieldConfig } from "../filters.schema";
+import type { FilterField, FilterUrlValue, FilterValue } from "../filters.type";
+import { useFilters } from "./use-filters";
+
+export type SavedFiltersGroup = {
+  id: string;
+  createdAt: number;
+  filters: {
+    status?: FilterUrlValue[];
+    methods?: FilterUrlValue[];
+    paths?: FilterUrlValue[];
+    host?: FilterUrlValue[];
+    requestId?: FilterUrlValue[];
+    startTime?: number;
+    endTime?: number;
+    since?: string;
+  };
+};
+
+export const useBookmarkedFilters = () => {
+  const { filters, updateFilters } = useFilters();
+
+  useEffect(() => {
+    if (!filters.length) {
+      return;
+    }
+
+    // Group current filters
+    const currentGroup = filters.reduce(
+      (acc, filter) => {
+        const { field, value, operator } = filter;
+
+        if (["startTime", "endTime", "since"].includes(field)) {
+          //@ts-expect-error fix later
+          acc[field] = value;
+        } else {
+          if (!acc[field]) {
+            //@ts-expect-error fix later
+            acc[field] = [];
+          }
+          //@ts-expect-error fix later
+          acc[field].push({ value, operator });
+        }
+        return acc;
+      },
+      {} as SavedFiltersGroup["filters"],
+    );
+
+    // Get existing saved filters
+    const savedFilters = JSON.parse(
+      localStorage.getItem("savedFilters") || "[]",
+    ) as SavedFiltersGroup[];
+
+    // Check if this combination already exists
+    const filterKey = JSON.stringify(Object.entries(currentGroup).sort());
+    const exists = savedFilters.some(
+      (saved) => JSON.stringify(Object.entries(saved.filters).sort()) === filterKey,
+    );
+
+    if (!exists) {
+      const newSavedFilters = [
+        ...savedFilters,
+        {
+          id: crypto.randomUUID(),
+          createdAt: Date.now(),
+          filters: currentGroup,
+        },
+      ].slice(-5); // Keep last 5 unique combinations
+
+      localStorage.setItem("savedFilters", JSON.stringify(newSavedFilters));
+    }
+  }, [filters]);
+
+  const applyFilterGroup = useCallback(
+    (savedGroup: SavedFiltersGroup) => {
+      const reconstructedFilters: FilterValue[] = [];
+
+      Object.entries(savedGroup.filters).forEach(([field, value]) => {
+        if (["startTime", "endTime", "since"].includes(field)) {
+          reconstructedFilters.push({
+            id: crypto.randomUUID(),
+            field: field as FilterField,
+            operator: "is",
+            value: value as number | string,
+          });
+        } else {
+          (value as FilterUrlValue[]).forEach((filter) => {
+            reconstructedFilters.push({
+              id: crypto.randomUUID(),
+              field: field as FilterField,
+              operator: filter.operator,
+              value: filter.value,
+              metadata:
+                field === "status"
+                  ? {
+                      colorClass: filterFieldConfig.status.getColorClass?.(filter.value as number),
+                    }
+                  : undefined,
+            });
+          });
+        }
+      });
+
+      updateFilters(reconstructedFilters);
+    },
+    [updateFilters],
+  );
+
+  return {
+    savedFilters: JSON.parse(localStorage.getItem("savedFilters") || "[]") as SavedFiltersGroup[],
+    applyFilterGroup,
+  };
+};
diff --git a/apps/dashboard/app/(app)/logs/hooks/use-filters.test.ts b/apps/dashboard/app/(app)/logs/hooks/use-filters.test.ts
new file mode 100644
index 0000000000..f463c11daf
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/hooks/use-filters.test.ts
@@ -0,0 +1,340 @@
+import { act, renderHook } from "@testing-library/react";
+import { useQueryStates } from "nuqs";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { parseAsFilterValueArray, parseAsRelativeTime, useFilters } from "./use-filters";
+
+vi.mock("nuqs", () => {
+  const mockSetSearchParams = vi.fn();
+
+  return {
+    useQueryStates: vi.fn(() => [
+      {
+        status: null,
+        methods: null,
+        paths: null,
+        host: null,
+        requestId: null,
+        startTime: null,
+        endTime: null,
+      },
+      mockSetSearchParams,
+    ]),
+    parseAsInteger: {
+      parse: (str: string | null) => (str ? Number.parseInt(str) : null),
+      serialize: (value: number | null) => value?.toString() ?? "",
+    },
+  };
+});
+
+vi.stubGlobal("crypto", {
+  randomUUID: vi.fn(() => "test-uuid"),
+});
+
+const mockUseQueryStates = vi.mocked(useQueryStates);
+const mockSetSearchParams = vi.fn();
+
+describe("parseAsFilterValueArray", () => {
+  it("should return empty array for null input", () => {
+    //@ts-expect-error ts yells for no reason
+    expect(parseAsFilterValueArray.parse(null)).toEqual([]);
+  });
+
+  it("should return empty array for empty string", () => {
+    expect(parseAsFilterValueArray.parse("")).toEqual([]);
+  });
+
+  it("should parse single filter correctly", () => {
+    const result = parseAsFilterValueArray.parse("is:200");
+    expect(result).toEqual([
+      {
+        operator: "is",
+        value: "200",
+      },
+    ]);
+  });
+
+  it("should parse multiple filters correctly", () => {
+    const result = parseAsFilterValueArray.parse("is:200,contains:error");
+    expect(result).toEqual([
+      { operator: "is", value: "200" },
+      { operator: "contains", value: "error" },
+    ]);
+  });
+
+  it("should return empty array for invalid operator", () => {
+    expect(parseAsFilterValueArray.parse("invalid:200")).toEqual([]);
+  });
+
+  it("should serialize empty array to empty string", () => {
+    //@ts-expect-error ts yells for no reason
+    expect(parseAsFilterValueArray.serialize([])).toBe("");
+  });
+
+  it("should serialize array of filters correctly", () => {
+    const filters = [
+      { operator: "is", value: "200" },
+      { operator: "contains", value: "error" },
+    ];
+    //@ts-expect-error ts yells for no reason
+    expect(parseAsFilterValueArray?.serialize(filters)).toBe("is:200,contains:error");
+  });
+});
+
+describe("parseAsRelativeTime", () => {
+  it("should return null for null input", () => {
+    //@ts-expect-error ts yells for no reason
+    expect(parseAsRelativeTime.parse(null)).toBeNull();
+  });
+
+  it("should return null for empty string", () => {
+    expect(parseAsRelativeTime.parse("")).toBeNull();
+  });
+
+  it("should parse valid single unit formats", () => {
+    expect(parseAsRelativeTime.parse("1h")).toBe("1h");
+    expect(parseAsRelativeTime.parse("24h")).toBe("24h");
+    expect(parseAsRelativeTime.parse("7d")).toBe("7d");
+    expect(parseAsRelativeTime.parse("30m")).toBe("30m");
+  });
+
+  it("should parse valid multiple unit formats", () => {
+    expect(parseAsRelativeTime.parse("1h30m")).toBe("1h30m");
+    expect(parseAsRelativeTime.parse("2d5h")).toBe("2d5h");
+    expect(parseAsRelativeTime.parse("1d6h30m")).toBe("1d6h30m");
+  });
+
+  it("should return null for invalid formats", () => {
+    expect(parseAsRelativeTime.parse("1x")).toBeNull();
+    expect(parseAsRelativeTime.parse("h")).toBeNull();
+    expect(parseAsRelativeTime.parse("24")).toBeNull();
+    expect(parseAsRelativeTime.parse("-1h")).toBeNull();
+    expect(parseAsRelativeTime.parse("1h2")).toBeNull();
+    expect(parseAsRelativeTime.parse("1h 2d")).toBeNull();
+  });
+
+  it("should serialize null to empty string", () => {
+    //@ts-expect-error ts yells for no reason
+    expect(parseAsRelativeTime.serialize(null)).toBe("");
+  });
+
+  it("should serialize valid time strings correctly", () => {
+    //@ts-expect-error ts yells for no reason
+    expect(parseAsRelativeTime.serialize("1h")).toBe("1h");
+    //@ts-expect-error ts yells for no reason
+    expect(parseAsRelativeTime.serialize("2d5h30m")).toBe("2d5h30m");
+  });
+});
+
+describe("useFilters hook", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseQueryStates.mockImplementation(() => [
+      {
+        status: null,
+        methods: null,
+        paths: null,
+        host: null,
+        requestId: null,
+        since: null,
+        startTime: null,
+        endTime: null,
+      },
+      mockSetSearchParams,
+    ]);
+  });
+
+  it("should initialize with empty filters", () => {
+    const { result } = renderHook(() => useFilters());
+    expect(result.current.filters).toEqual([]);
+  });
+
+  it("should initialize with existing filters", () => {
+    mockUseQueryStates.mockImplementation(() => [
+      {
+        status: [{ operator: "is", value: "200" }],
+        methods: null,
+        paths: null,
+        host: null,
+        requestId: null,
+        startTime: null,
+        since: null,
+        endTime: null,
+      },
+      mockSetSearchParams,
+    ]);
+
+    const { result } = renderHook(() => useFilters());
+    expect(result.current.filters).toEqual([
+      {
+        id: "test-uuid",
+        field: "status",
+        operator: "is",
+        value: "200",
+        metadata: expect.any(Object),
+      },
+    ]);
+  });
+
+  it("should remove filter correctly", () => {
+    mockUseQueryStates.mockImplementation(() => [
+      {
+        status: [{ operator: "is", value: "200" }],
+        methods: null,
+        paths: null,
+        host: null,
+        requestId: null,
+        startTime: null,
+        since: null,
+        endTime: null,
+      },
+      mockSetSearchParams,
+    ]);
+
+    const { result } = renderHook(() => useFilters());
+
+    act(() => {
+      result.current.removeFilter("test-uuid");
+    });
+
+    expect(mockSetSearchParams).toHaveBeenCalledWith({
+      status: null,
+      methods: null,
+      paths: null,
+      host: null,
+      requestId: null,
+      startTime: null,
+      since: null,
+      endTime: null,
+    });
+  });
+
+  it("should handle multiple filters", () => {
+    const { result } = renderHook(() => useFilters());
+
+    act(() => {
+      result.current.updateFilters([
+        {
+          id: "test-uuid-1",
+          field: "status",
+          operator: "is",
+          value: 200,
+        },
+        {
+          id: "test-uuid-2",
+          field: "methods",
+          operator: "is",
+          value: "GET",
+        },
+      ]);
+    });
+
+    expect(mockSetSearchParams).toHaveBeenCalledWith({
+      status: [{ operator: "is", value: 200 }],
+      methods: [{ operator: "is", value: "GET" }],
+      paths: null,
+      host: null,
+      requestId: null,
+      startTime: null,
+      endTime: null,
+      since: null,
+    });
+  });
+
+  it("should handle time range filters", () => {
+    const { result } = renderHook(() => useFilters());
+    const startTime = 1609459200000;
+
+    act(() => {
+      result.current.updateFilters([
+        {
+          id: "test-uuid",
+          field: "startTime",
+          operator: "is",
+          value: startTime,
+        },
+      ]);
+    });
+
+    expect(mockSetSearchParams).toHaveBeenCalledWith({
+      status: null,
+      methods: null,
+      paths: null,
+      host: null,
+      requestId: null,
+      startTime,
+      endTime: null,
+      since: null,
+    });
+  });
+
+  it("should handle complex filter operators", () => {
+    const { result } = renderHook(() => useFilters());
+
+    act(() => {
+      result.current.updateFilters([
+        {
+          id: "test-uuid-1",
+          field: "paths",
+          operator: "contains",
+          value: "/api",
+        },
+        {
+          id: "test-uuid-2",
+          field: "host",
+          operator: "startsWith",
+          value: "test",
+        },
+        {
+          id: "test-uuid-3",
+          field: "since",
+          operator: "is",
+          value: "3h",
+        },
+      ]);
+    });
+
+    expect(mockSetSearchParams).toHaveBeenCalledWith({
+      status: null,
+      methods: null,
+      paths: [{ operator: "contains", value: "/api" }],
+      host: [{ operator: "startsWith", value: "test" }],
+      requestId: null,
+      startTime: null,
+      endTime: null,
+      since: "3h",
+    });
+  });
+
+  it("should handle clearing all filters", () => {
+    mockUseQueryStates.mockImplementation(() => [
+      {
+        status: [{ operator: "is", value: "200" }],
+        methods: [{ operator: "is", value: "GET" }],
+        paths: null,
+        host: null,
+        requestId: null,
+        startTime: null,
+        endTime: null,
+        since: null,
+      },
+      mockSetSearchParams,
+    ]);
+
+    const { result } = renderHook(() => useFilters());
+
+    act(() => {
+      result.current.updateFilters([]);
+    });
+
+    expect(mockSetSearchParams).toHaveBeenCalledWith({
+      status: null,
+      methods: null,
+      paths: null,
+      host: null,
+      requestId: null,
+      startTime: null,
+      endTime: null,
+      since: null,
+    });
+  });
+});
diff --git a/apps/dashboard/app/(app)/logs-v2/hooks/use-filters.ts b/apps/dashboard/app/(app)/logs/hooks/use-filters.ts
similarity index 75%
rename from apps/dashboard/app/(app)/logs-v2/hooks/use-filters.ts
rename to apps/dashboard/app/(app)/logs/hooks/use-filters.ts
index 63555c826f..c497071ce8 100644
--- a/apps/dashboard/app/(app)/logs-v2/hooks/use-filters.ts
+++ b/apps/dashboard/app/(app)/logs/hooks/use-filters.ts
@@ -11,39 +11,32 @@ import type {
   ResponseStatus,
 } from "../filters.type";
 
-const parseAsFilterValue: Parser<FilterUrlValue | null> = {
+export const parseAsRelativeTime: Parser<string | null> = {
   parse: (str: string | null) => {
     if (!str) {
       return null;
     }
-    try {
-      // Format: operator:value (e.g., "is:200" for {operator: "is", value: "200"})
-      const [operator, val] = str.split(/:(.+)/);
-      if (!operator || !val) {
-        return null;
-      }
 
-      if (!["is", "contains", "startsWith", "endsWith"].includes(operator)) {
+    try {
+      // Validate the format matches one or more of: number + (h|d|m)
+      const isValid = /^(\d+[hdm])+$/.test(str);
+      if (!isValid) {
         return null;
       }
-
-      return {
-        operator: operator as FilterOperator,
-        value: val,
-      };
+      return str;
     } catch {
       return null;
     }
   },
-  serialize: (value: FilterUrlValue | null) => {
+  serialize: (value: string | null) => {
     if (!value) {
       return "";
     }
-    return `${value.operator}:${value.value}`;
+    return value;
   },
 };
 
-const parseAsFilterValueArray: Parser<FilterUrlValue[]> = {
+export const parseAsFilterValueArray: Parser<FilterUrlValue[]> = {
   parse: (str: string | null) => {
     if (!str) {
       return [];
@@ -73,13 +66,14 @@ const parseAsFilterValueArray: Parser<FilterUrlValue[]> = {
 };
 
 export const queryParamsPayload = {
-  requestId: parseAsFilterValue,
-  host: parseAsFilterValue,
+  requestId: parseAsFilterValueArray,
+  host: parseAsFilterValueArray,
   methods: parseAsFilterValueArray,
   paths: parseAsFilterValueArray,
   status: parseAsFilterValueArray,
   startTime: parseAsInteger,
   endTime: parseAsInteger,
+  since: parseAsRelativeTime,
 } as const;
 
 export const useFilters = () => {
@@ -118,32 +112,32 @@ export const useFilters = () => {
       });
     });
 
-    if (searchParams.host) {
+    searchParams.host?.forEach((hostFilter) => {
       activeFilters.push({
         id: crypto.randomUUID(),
         field: "host",
-        operator: searchParams.host.operator,
-        value: searchParams.host.value,
+        operator: hostFilter.operator,
+        value: hostFilter.value,
       });
-    }
+    });
 
-    if (searchParams.requestId) {
+    searchParams.requestId?.forEach((requestIdFilter) => {
       activeFilters.push({
         id: crypto.randomUUID(),
         field: "requestId",
-        operator: searchParams.requestId.operator,
-        value: searchParams.requestId.value,
+        operator: requestIdFilter.operator,
+        value: requestIdFilter.value,
       });
-    }
+    });
 
-    ["startTime", "endTime"].forEach((field) => {
+    ["startTime", "endTime", "since"].forEach((field) => {
       const value = searchParams[field as keyof QuerySearchParams];
       if (value !== null && value !== undefined) {
         activeFilters.push({
           id: crypto.randomUUID(),
           field: field as FilterField,
           operator: "is",
-          value: value as number,
+          value: value as string | number,
         });
       }
     });
@@ -161,12 +155,15 @@ export const useFilters = () => {
         endTime: null,
         methods: null,
         status: null,
+        since: null,
       };
 
       // Group filters by field
       const responseStatusFilters: FilterUrlValue[] = [];
       const methodFilters: FilterUrlValue[] = [];
       const pathFilters: FilterUrlValue[] = [];
+      const hostFilters: FilterUrlValue[] = [];
+      const requestIdFilters: FilterUrlValue[] = [];
 
       newFilters.forEach((filter) => {
         switch (filter.field) {
@@ -189,21 +186,24 @@ export const useFilters = () => {
             });
             break;
           case "host":
-            newParams.host = {
+            hostFilters.push({
               value: filter.value as string,
               operator: filter.operator,
-            };
+            });
             break;
           case "requestId":
-            newParams.requestId = {
+            requestIdFilters.push({
               value: filter.value as string,
               operator: filter.operator,
-            };
+            });
             break;
           case "startTime":
           case "endTime":
             newParams[filter.field] = filter.value as number;
             break;
+          case "since":
+            newParams.since = filter.value as string;
+            break;
         }
       });
 
@@ -211,6 +211,8 @@ export const useFilters = () => {
       newParams.status = responseStatusFilters.length > 0 ? responseStatusFilters : null;
       newParams.methods = methodFilters.length > 0 ? methodFilters : null;
       newParams.paths = pathFilters.length > 0 ? pathFilters : null;
+      newParams.host = hostFilters.length > 0 ? hostFilters : null;
+      newParams.requestId = requestIdFilters.length > 0 ? requestIdFilters : null;
 
       setSearchParams(newParams);
     },
@@ -225,33 +227,8 @@ export const useFilters = () => {
     [filters, updateFilters],
   );
 
-  const addFilter = useCallback(
-    (
-      field: FilterField,
-      operator: FilterOperator,
-      value: string | number | ResponseStatus | HttpMethod,
-    ) => {
-      const newFilter: FilterValue = {
-        id: crypto.randomUUID(),
-        field,
-        operator,
-        value,
-        metadata:
-          field === "status"
-            ? {
-                colorClass: filterFieldConfig.status.getColorClass?.(value as number),
-              }
-            : undefined,
-      };
-
-      updateFilters([...filters, newFilter]);
-    },
-    [filters, updateFilters],
-  );
-
   return {
     filters,
-    addFilter,
     removeFilter,
     updateFilters,
   };
diff --git a/apps/dashboard/app/(app)/logs-v2/hooks/use-keyboard-shortcut.tsx b/apps/dashboard/app/(app)/logs/hooks/use-keyboard-shortcut.tsx
similarity index 100%
rename from apps/dashboard/app/(app)/logs-v2/hooks/use-keyboard-shortcut.tsx
rename to apps/dashboard/app/(app)/logs/hooks/use-keyboard-shortcut.tsx
diff --git a/apps/dashboard/app/(app)/logs/logs-page.tsx b/apps/dashboard/app/(app)/logs/logs-page.tsx
deleted file mode 100644
index d9aa08ae77..0000000000
--- a/apps/dashboard/app/(app)/logs/logs-page.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-import { Navbar } from "@/components/navbar";
-import { PageContent } from "@/components/page-content";
-import type { Log, LogsTimeseriesDataPoint } from "@unkey/clickhouse/src/logs";
-import { Layers3 } from "@unkey/icons";
-import { LogsChart } from "./components/charts";
-import { LogsFilters } from "./components/filters";
-import { LogsTable } from "./components/table/logs-table";
-
-export function LogsPage({
-  initialLogs,
-  initialTimeseries,
-}: {
-  initialLogs: Log[];
-  initialTimeseries: LogsTimeseriesDataPoint[];
-}) {
-  return (
-    <div>
-      <Navbar>
-        <Navbar.Breadcrumbs icon={<Layers3 />}>
-          <Navbar.Breadcrumbs.Link href="/logs">Logs</Navbar.Breadcrumbs.Link>
-        </Navbar.Breadcrumbs>
-      </Navbar>
-      <PageContent>
-        <div className="flex flex-col items-start w-full overflow-y-hidden">
-          <LogsFilters />
-          <div className="mt-4" />
-          <LogsChart initialTimeseries={initialTimeseries} />
-          {/* Chart is using more space than it should to be able to display tooltip correctly so we can -margin that empty space */}
-          <div className="-mt-12" />
-          <LogsTable initialLogs={initialLogs} />
-        </div>
-      </PageContent>
-    </div>
-  );
-}
diff --git a/apps/dashboard/app/(app)/logs/page.tsx b/apps/dashboard/app/(app)/logs/page.tsx
index 80c3bea0ca..d561cfb50a 100644
--- a/apps/dashboard/app/(app)/logs/page.tsx
+++ b/apps/dashboard/app/(app)/logs/page.tsx
@@ -1,23 +1,13 @@
 "use server";
 
+import { Navbar } from "@/components/navbar";
 import { getTenantId } from "@/lib/auth";
-import { clickhouse } from "@/lib/clickhouse";
 import { db } from "@/lib/db";
+import { Layers3 } from "lucide-react";
 import { notFound } from "next/navigation";
-import { createSearchParamsCache } from "nuqs/server";
-import { DEFAULT_LOGS_FETCH_COUNT } from "./constants";
-import { LogsPage } from "./logs-page";
-import { type QuerySearchParams, queryParamsPayload } from "./query-state";
-import { getTimeseriesGranularity } from "./utils";
+import { LogsClient } from "./components/logs-client";
 
-const searchParamsCache = createSearchParamsCache(queryParamsPayload);
-
-export default async function Page({
-  searchParams,
-}: {
-  searchParams: Record<string, string | string[] | undefined>;
-}) {
-  const parsedParams = searchParamsCache.parse(searchParams);
+export default async function Page() {
   const tenantId = getTenantId();
 
   const workspace = await db.query.workspaces.findFirst({
@@ -25,58 +15,22 @@ export default async function Page({
       and(eq(table.tenantId, tenantId), isNull(table.deletedAt)),
   });
 
-  if (!workspace?.betaFeatures.logsPage) {
+  if (!workspace) {
     return notFound();
   }
 
-  const [logs, timeseries] = await fetchInitialLogsAndTimeseriesData(parsedParams, workspace.id);
-
-  if (timeseries.err) {
-    console.error(
-      "Error occured when fetching from clickhouse for chart",
-      timeseries.err.toString(),
-    );
-    throw new Error("Something went wrong when fetching timeseries data for chart");
-  }
-
-  if (logs.err) {
-    console.error("Error occured when fetching from clickhouse for table", logs.err.toString());
-    throw new Error("Something went wrong when fetching logs for table");
-  }
-
-  return <LogsPage initialLogs={logs.val} initialTimeseries={timeseries.val} />;
+  return <LogsContainerPage />;
 }
 
-const fetchInitialLogsAndTimeseriesData = async (
-  params: Readonly<QuerySearchParams>,
-  workspaceId: string,
-) => {
-  const { startTime, endTime, granularity } = getTimeseriesGranularity(
-    params.startTime,
-    params.endTime,
+const LogsContainerPage = () => {
+  return (
+    <div>
+      <Navbar>
+        <Navbar.Breadcrumbs icon={<Layers3 />}>
+          <Navbar.Breadcrumbs.Link href="/logs">Logs</Navbar.Breadcrumbs.Link>
+        </Navbar.Breadcrumbs>
+      </Navbar>
+      <LogsClient />
+    </div>
   );
-
-  const logs = clickhouse.api.logs({
-    workspaceId,
-    limit: DEFAULT_LOGS_FETCH_COUNT,
-    startTime,
-    endTime,
-    host: params.host,
-    requestId: params.requestId,
-    method: params.method,
-    path: params.path,
-    responseStatus: params.responseStatus,
-  });
-
-  const timeseries = clickhouse.api.timeseries[granularity]({
-    workspaceId,
-    startTime,
-    endTime,
-    host: params.host,
-    method: params.method,
-    path: params.path,
-    responseStatus: params.responseStatus,
-  });
-
-  return Promise.all([logs, timeseries]);
 };
diff --git a/apps/dashboard/app/(app)/logs/query-state.ts b/apps/dashboard/app/(app)/logs/query-state.ts
deleted file mode 100644
index 38d6927662..0000000000
--- a/apps/dashboard/app/(app)/logs/query-state.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {
-  parseAsArrayOf,
-  parseAsInteger,
-  parseAsNumberLiteral,
-  parseAsString,
-  useQueryStates,
-} from "nuqs";
-
-export type PickKeys<T, K extends keyof T> = K;
-
-const TIMELINE_OPTIONS = ["1h", "3h", "6h", "12h", "24h"] as const;
-export const STATUSES = [400, 500, 200] as const;
-export type ResponseStatus = (typeof STATUSES)[number];
-export type Timeline = (typeof TIMELINE_OPTIONS)[number];
-
-export type QuerySearchParams = {
-  host: string | null;
-  requestId: string | null;
-  method: string | null;
-  path: string | null;
-  responseStatus: ResponseStatus[];
-  startTime?: number | null;
-  endTime?: number | null;
-};
-
-export const queryParamsPayload = {
-  requestId: parseAsString,
-  host: parseAsString,
-  method: parseAsString,
-  path: parseAsString,
-  responseStatus: parseAsArrayOf(parseAsNumberLiteral(STATUSES)).withDefault([]),
-  startTime: parseAsInteger,
-  endTime: parseAsInteger,
-};
-
-export const useLogSearchParams = () => {
-  const [searchParams, setSearchParams] = useQueryStates(queryParamsPayload);
-
-  return { searchParams, setSearchParams };
-};
diff --git a/apps/dashboard/app/(app)/logs/types.ts b/apps/dashboard/app/(app)/logs/types.ts
deleted file mode 100644
index 575aaef3f1..0000000000
--- a/apps/dashboard/app/(app)/logs/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export type ResponseBody = {
-  keyId: string;
-  valid: boolean;
-  meta: Record<string, unknown>;
-  enabled: boolean;
-  permissions: string[];
-  code:
-    | "VALID"
-    | "RATE_LIMITED"
-    | "EXPIRED"
-    | "USAGE_EXCEEDED"
-    | "DISABLED"
-    | "FORBIDDEN"
-    | "INSUFFICIENT_PERMISSIONS";
-};
diff --git a/apps/dashboard/app/(app)/logs/utils.ts b/apps/dashboard/app/(app)/logs/utils.ts
index 5577eb4ef4..1e12198a4a 100644
--- a/apps/dashboard/app/(app)/logs/utils.ts
+++ b/apps/dashboard/app/(app)/logs/utils.ts
@@ -1,5 +1,20 @@
 import type { Log } from "@unkey/clickhouse/src/logs";
-import type { ResponseBody } from "./types";
+
+export type ResponseBody = {
+  keyId: string;
+  valid: boolean;
+  meta: Record<string, unknown>;
+  enabled: boolean;
+  permissions: string[];
+  code:
+    | "VALID"
+    | "RATE_LIMITED"
+    | "EXPIRED"
+    | "USAGE_EXCEEDED"
+    | "DISABLED"
+    | "FORBIDDEN"
+    | "INSUFFICIENT_PERMISSIONS";
+};
 
 class ResponseBodyParseError extends Error {
   constructor(
@@ -83,54 +98,3 @@ export const safeParseJson = (jsonString?: string | null) => {
     return "Invalid JSON format";
   }
 };
-
-export const HOUR_IN_MS = 60 * 60 * 1000;
-const DAY_IN_MS = 24 * HOUR_IN_MS;
-const WEEK_IN_MS = 7 * DAY_IN_MS;
-
-export type TimeseriesGranularity = "perMinute" | "perHour" | "perDay";
-type TimeseriesConfig = {
-  granularity: TimeseriesGranularity;
-  startTime: number;
-  endTime: number;
-};
-
-export const getTimeseriesGranularity = (
-  startTime?: number | null,
-  endTime?: number | null,
-): TimeseriesConfig => {
-  const now = Date.now();
-
-  // If both of them are missing fallback to perMinute and fetch lastHour to show latest
-  if (!startTime && !endTime) {
-    return {
-      granularity: "perMinute",
-      startTime: now - HOUR_IN_MS,
-      endTime: now,
-    };
-  }
-
-  // Set default end time if missing
-  const effectiveEndTime = endTime ?? now;
-  // Set default start time if missing (last hour)
-  const effectiveStartTime = startTime ?? effectiveEndTime - HOUR_IN_MS;
-  const timeRange = effectiveEndTime - effectiveStartTime;
-  let granularity: TimeseriesGranularity;
-
-  if (timeRange > WEEK_IN_MS) {
-    // > 7 days
-    granularity = "perDay";
-  } else if (timeRange > HOUR_IN_MS) {
-    // > 1 hour
-    granularity = "perHour";
-  } else {
-    // <= 1 hour
-    granularity = "perMinute";
-  }
-
-  return {
-    granularity,
-    startTime: effectiveStartTime,
-    endTime: effectiveEndTime,
-  };
-};
diff --git a/apps/dashboard/components/virtual-table/components/empty-state.tsx b/apps/dashboard/components/virtual-table/components/empty-state.tsx
index 476b4d1bfd..73e709d286 100644
--- a/apps/dashboard/components/virtual-table/components/empty-state.tsx
+++ b/apps/dashboard/components/virtual-table/components/empty-state.tsx
@@ -1,15 +1,30 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { ScrollText } from "lucide-react";
+import { BookBookmark } from "@unkey/icons";
+import { Button, Empty } from "@unkey/ui";
 
 export const EmptyState = ({ content }: { content?: React.ReactNode }) => (
   <div className="flex-1 flex items-center justify-center">
     {content || (
-      <Card className="w-96 bg-background-subtle">
-        <CardContent className="flex justify-center gap-2 items-center p-6">
-          <ScrollText className="h-4 w-4" />
-          <div className="text-sm text-accent-12">No data available</div>
-        </CardContent>
-      </Card>
+      <div className="w-full flex justify-center items-center h-full">
+        <Empty className="w-[400px] flex items-start">
+          <Empty.Icon className="w-auto" />
+          <Empty.Title>Nothing here yet</Empty.Title>
+          <Empty.Description className="text-left">
+            Ready to get started? Check our documentation for a step-by-step guide.
+          </Empty.Description>
+          <Empty.Actions className="mt-4 justify-start">
+            <a
+              href="https://www.unkey.com/docs/introduction"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button>
+                <BookBookmark />
+                Documentation
+              </Button>
+            </a>
+          </Empty.Actions>
+        </Empty>
+      </div>
     )}
   </div>
 );
diff --git a/apps/dashboard/components/virtual-table/components/loading-row.tsx b/apps/dashboard/components/virtual-table/components/loading-row.tsx
index bdf69c2070..85058b00d9 100644
--- a/apps/dashboard/components/virtual-table/components/loading-row.tsx
+++ b/apps/dashboard/components/virtual-table/components/loading-row.tsx
@@ -10,8 +10,8 @@ export const LoadingRow = <TTableItem,>({
     style={{ gridTemplateColumns: columns.map((col) => col.width).join(" ") }}
   >
     {columns.map((column) => (
-      <div key={column.key} className="px-2">
-        <div className="h-4 bg-accent-6 rounded" />
+      <div key={column.key} className="pr-1">
+        <div className="h-4 bg-gradient-to-r from-accent-6 to-accent-4 rounded" />
       </div>
     ))}
   </div>
diff --git a/apps/dashboard/components/virtual-table/components/table-row.tsx b/apps/dashboard/components/virtual-table/components/table-row.tsx
index 379b3a17d3..7c17c8260a 100644
--- a/apps/dashboard/components/virtual-table/components/table-row.tsx
+++ b/apps/dashboard/components/virtual-table/components/table-row.tsx
@@ -100,7 +100,7 @@ export const TableRow = <T,>({
       ref={measureRef}
       onClick={onClick}
       className={cn(
-        "grid text-xs cursor-pointer absolute top-0 left-0 w-full",
+        "grid text-xs cursor-pointer absolute top-0 left-0 w-full mt-1",
         "transition-all duration-75 ease-in-out",
         "group",
         rowClassName?.(item),
@@ -109,7 +109,10 @@ export const TableRow = <T,>({
       style={{
         gridTemplateColumns,
         height: `${rowHeight}px`,
-        top: `${virtualRow.start}px`,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        transform: `translateY(${virtualRow.start}px)`,
       }}
     >
       {columns.map((column) => (
diff --git a/apps/dashboard/components/virtual-table/hooks/useTableData.ts b/apps/dashboard/components/virtual-table/hooks/useTableData.ts
new file mode 100644
index 0000000000..8f1691dbbc
--- /dev/null
+++ b/apps/dashboard/components/virtual-table/hooks/useTableData.ts
@@ -0,0 +1,28 @@
+import type { SeparatorItem } from "../types";
+
+export const useTableData = <TTableData>(
+  realtimeData: TTableData[],
+  historicData: TTableData[],
+) => {
+  return {
+    getItemAt: (index: number): TTableData | SeparatorItem => {
+      if (realtimeData.length === 0) {
+        return historicData[index];
+      }
+
+      if (index < realtimeData.length) {
+        return realtimeData[index];
+      }
+
+      if (index === realtimeData.length) {
+        return { isSeparator: true };
+      }
+
+      return historicData[index - realtimeData.length - 1];
+    },
+
+    getTotalLength: () => {
+      return realtimeData.length + (realtimeData.length > 0 ? 1 : 0) + historicData.length;
+    },
+  };
+};
diff --git a/apps/dashboard/components/virtual-table/hooks/useVirtualData.ts b/apps/dashboard/components/virtual-table/hooks/useVirtualData.ts
index 3af3e19832..400aa01063 100644
--- a/apps/dashboard/components/virtual-table/hooks/useVirtualData.ts
+++ b/apps/dashboard/components/virtual-table/hooks/useVirtualData.ts
@@ -1,44 +1,44 @@
 import { throttle } from "@/lib/utils";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback, useEffect } from "react";
+import { type Virtualizer, useVirtualizer } from "@tanstack/react-virtual";
+import { useCallback, useEffect, useMemo } from "react";
 import type { TableConfig } from "../types";
 
-export const useVirtualData = <T>({
-  data,
+export const useVirtualData = ({
+  totalDataLength,
   isLoading,
   config,
   onLoadMore,
   isFetchingNextPage,
   parentRef,
 }: {
-  data: T[];
+  totalDataLength: number;
   isLoading: boolean;
   config: TableConfig;
   onLoadMore?: () => void;
   isFetchingNextPage?: boolean;
   parentRef: React.RefObject<HTMLDivElement>;
 }) => {
-  // biome-ignore lint/correctness/useExhaustiveDependencies: fine to use config.throttleDelay
-  const throttledLoadMore = useCallback(
-    throttle(onLoadMore ?? (() => {}), config.throttleDelay, {
-      leading: true,
-      trailing: false,
-    }),
-    [onLoadMore, config.throttleDelay],
+  const throttledFn = useMemo(
+    () =>
+      throttle((cb?: () => void) => cb?.(), config.throttleDelay, {
+        leading: true,
+        trailing: false,
+      }),
+    [config.throttleDelay],
   );
 
+  const throttledLoadMore = useCallback(() => {
+    throttledFn(onLoadMore);
+  }, [throttledFn, onLoadMore]);
+
   useEffect(() => {
     return () => {
-      throttledLoadMore.cancel();
+      throttledFn.cancel();
     };
-  }, [throttledLoadMore]);
+  }, [throttledFn]);
 
-  return useVirtualizer({
-    count: isLoading ? config.loadingRows : data.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => config.rowHeight,
-    overscan: config.overscan,
-    onChange: (instance) => {
+  const handleChange = useCallback(
+    (instance: Virtualizer<HTMLDivElement, Element>) => {
       const lastItem = instance.getVirtualItems().at(-1);
       if (!lastItem || !onLoadMore) {
         return;
@@ -55,11 +55,28 @@ export const useVirtualData = <T>({
       if (
         !isLoading &&
         !isFetchingNextPage &&
-        lastItem.index >= data.length - 1 - instance.options.overscan &&
+        lastItem.index >= totalDataLength - 1 - instance.options.overscan &&
         scrollOffset >= scrollThreshold
       ) {
         throttledLoadMore();
       }
     },
+    [
+      isLoading,
+      isFetchingNextPage,
+      totalDataLength,
+      config.rowHeight,
+      throttledLoadMore,
+      onLoadMore,
+    ],
+  );
+
+  return useVirtualizer({
+    count: isLoading ? config.loadingRows : totalDataLength,
+    getScrollElement: useCallback(() => parentRef.current, [parentRef]),
+    estimateSize: useCallback(() => config.rowHeight, [config.rowHeight]),
+    overscan: config.overscan,
+    onChange: handleChange,
+    gap: 4, // Add this line
   });
 };
diff --git a/apps/dashboard/components/virtual-table/index.tsx b/apps/dashboard/components/virtual-table/index.tsx
index 0c80fae929..b5f5fc6dfe 100644
--- a/apps/dashboard/components/virtual-table/index.tsx
+++ b/apps/dashboard/components/virtual-table/index.tsx
@@ -1,4 +1,5 @@
-import { cn } from "@unkey/ui/src/lib/utils";
+import { cn } from "@/lib/utils";
+import { CircleCarretRight } from "@unkey/icons";
 import { useCallback, useRef, useState } from "react";
 import { useScrollLock } from "usehooks-ts";
 import { EmptyState } from "./components/empty-state";
@@ -7,12 +8,14 @@ import { LoadingRow } from "./components/loading-row";
 import { TableHeader } from "./components/table-header";
 import { TableRow } from "./components/table-row";
 import { DEFAULT_CONFIG } from "./constants";
+import { useTableData } from "./hooks/useTableData";
 import { useTableHeight } from "./hooks/useTableHeight";
 import { useVirtualData } from "./hooks/useVirtualData";
 import type { VirtualTableProps } from "./types";
 
-export function VirtualTable<T>({
-  data,
+export function VirtualTable<TTableData>({
+  data: historicData,
+  realtimeData = [],
   columns,
   isLoading = false,
   config: userConfig,
@@ -25,15 +28,17 @@ export function VirtualTable<T>({
   selectedItem,
   renderDetails,
   isFetchingNextPage,
-}: VirtualTableProps<T>) {
+}: VirtualTableProps<TTableData>) {
   const config = { ...DEFAULT_CONFIG, ...userConfig };
   const parentRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [tableDistanceToTop, setTableDistanceToTop] = useState(0);
 
   const fixedHeight = useTableHeight(containerRef, config.headerHeight, config.tableBorder);
+
+  const tableData = useTableData<TTableData>(realtimeData, historicData);
   const virtualizer = useVirtualData({
-    data,
+    totalDataLength: tableData.getTotalLength(),
     isLoading,
     config,
     onLoadMore,
@@ -50,7 +55,7 @@ export function VirtualTable<T>({
   });
 
   const handleRowClick = useCallback(
-    (item: T) => {
+    (item: TTableData) => {
       if (onRowClick) {
         onRowClick(item);
         setTableDistanceToTop(
@@ -63,7 +68,7 @@ export function VirtualTable<T>({
     [onRowClick, config.tableBorder],
   );
 
-  if (!isLoading && data.length === 0) {
+  if (!isLoading && historicData.length === 0 && realtimeData.length === 0) {
     return (
       <div
         className="w-full h-full flex flex-col"
@@ -82,8 +87,12 @@ export function VirtualTable<T>({
       <div
         ref={parentRef}
         data-table-container="true"
-        className="overflow-auto pb-10 px-1 scroll-smooth"
-        style={{ height: `${fixedHeight}px` }}
+        className="overflow-auto pb-2 px-1 scroll-smooth relative"
+        style={{
+          height: `${fixedHeight}px`,
+          display: "grid",
+          gap: "4px",
+        }}
       >
         <div
           className={cn("transition-opacity duration-300", {
@@ -111,26 +120,50 @@ export function VirtualTable<T>({
               );
             }
 
-            const item = data[virtualRow.index];
+            const item = tableData.getItemAt(virtualRow.index);
             if (!item) {
               return null;
             }
 
+            // Render separator
+            //@ts-expect-error This is our hacky way to separate live data from historic data. This separator acts as just another item in the data list to preserve the correct start position.
+            if ("isSeparator" in item && item.isSeparator) {
+              return (
+                <div
+                  key={virtualRow.key}
+                  className="w-full mt-1"
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    transform: `translateY(${virtualRow.start}px)`,
+                  }}
+                >
+                  <div className="h-[26px] bg-info-2 font-mono text-xs text-info-11 rounded-md flex items-center gap-3 px-2">
+                    <CircleCarretRight className="size-3" />
+                    Live
+                  </div>
+                </div>
+              );
+            }
+
+            // Regular row
+            const typedItem = item as TTableData;
             const isSelected = selectedItem
-              ? keyExtractor(selectedItem) === keyExtractor(item)
+              ? keyExtractor(selectedItem) === keyExtractor(typedItem)
               : false;
 
             return (
               <TableRow
                 key={virtualRow.key}
-                item={item}
+                item={typedItem}
                 columns={columns}
                 virtualRow={virtualRow}
                 rowHeight={config.rowHeight}
                 isSelected={isSelected}
-                rowClassName={rowClassName}
                 selectedClassName={selectedClassName}
-                onClick={() => handleRowClick(item)}
+                rowClassName={rowClassName}
+                onClick={() => handleRowClick(typedItem)}
                 measureRef={virtualizer.measureElement}
                 onRowClick={onRowClick}
               />
@@ -142,7 +175,7 @@ export function VirtualTable<T>({
 
         {selectedItem &&
           renderDetails &&
-          renderDetails(selectedItem, () => onRowClick?.(null as any), tableDistanceToTop)}
+          renderDetails(selectedItem, () => onRowClick?.(null), tableDistanceToTop)}
       </div>
     </div>
   );
diff --git a/apps/dashboard/components/virtual-table/types.ts b/apps/dashboard/components/virtual-table/types.ts
index db918cd7b9..c8c9870b81 100644
--- a/apps/dashboard/components/virtual-table/types.ts
+++ b/apps/dashboard/components/virtual-table/types.ts
@@ -29,6 +29,7 @@ export type TableConfig = {
 
 export type VirtualTableProps<T> = {
   data: T[];
+  realtimeData?: T[];
   columns: Column<T>[];
   isLoading?: boolean;
   config?: Partial<TableConfig>;
@@ -43,3 +44,7 @@ export type VirtualTableProps<T> = {
   isFetchingNextPage?: boolean;
   renderDetails?: (item: T, onClose: () => void, distanceToTop: number) => React.ReactNode;
 };
+
+export type SeparatorItem = {
+  isSeparator: true;
+};
diff --git a/apps/dashboard/lib/charts/time-series-chart.tsx b/apps/dashboard/lib/charts/time-series-chart.tsx
deleted file mode 100644
index 25036f4bb9..0000000000
--- a/apps/dashboard/lib/charts/time-series-chart.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-"use client";
-import { Group } from "@visx/group";
-import { ParentSize } from "@visx/responsive";
-import { scaleLinear, scaleUtc } from "@visx/scale";
-import { Bar, Circle, Line } from "@visx/shape";
-import { type PropsWithChildren, useMemo, useState } from "react";
-import { ChartContext, ChartTooltipContext } from "./chart-context";
-import type { ChartContext as ChartContextType, ChartProps, Datum } from "./types";
-import { useTooltip } from "./useTooltip";
-
-type TimeSeriesChartProps<T extends Datum> = PropsWithChildren<ChartProps<T>>;
-
-export function TimeSeriesChart<T extends Datum>(props: TimeSeriesChartProps<T>) {
-  return (
-    <ParentSize className="relative">
-      {({ width, height }) => {
-        return (
-          width > 0 &&
-          height > 0 && <TimeSeriesChartInner {...props} width={width} height={height} />
-        );
-      }}
-    </ParentSize>
-  );
-}
-
-function TimeSeriesChartInner<T extends Datum>({
-  width: outerWidth,
-  height: outerHeight,
-  children,
-  data,
-  series,
-  tooltipContent = (d) => series[0].valueAccessor(d).toString(),
-  margin: marginProp = {
-    top: 12,
-    right: 4,
-    bottom: 32,
-    left: 4,
-  },
-  padding = {
-    top: 0.1,
-    bottom: 0.1,
-  },
-}: {
-  width: number;
-  height: number;
-} & TimeSeriesChartProps<T>) {
-  const [leftAxisMargin, setLeftAxisMargin] = useState<number>();
-
-  const margin = {
-    ...marginProp,
-    left: marginProp.left + (leftAxisMargin ?? 0),
-  };
-
-  const width = outerWidth - margin.left - margin.right;
-  const height = outerHeight - margin.top - margin.bottom;
-
-  const { startDate, endDate } = useMemo(() => {
-    const dates = data.map(({ date }) => date);
-    const times = dates.map((d) => d.getTime());
-
-    return {
-      startDate: dates[times.indexOf(Math.min(...times))],
-      endDate: dates[times.indexOf(Math.max(...times))],
-    };
-  }, [data]);
-
-  const { minY, maxY } = useMemo(() => {
-    const values = series
-      .filter(({ isActive }) => isActive !== false)
-      .flatMap(({ valueAccessor }) => data.map((d) => valueAccessor(d)))
-      .filter((v): v is number => v != null);
-
-    return {
-      minY: Math.min(...values),
-      maxY: Math.max(...values),
-    };
-  }, [data, series]);
-
-  const { yScale, xScale } = useMemo(() => {
-    const rangeY = maxY - minY;
-    return {
-      yScale: scaleLinear<number>({
-        domain: [minY - rangeY * (padding.bottom ?? 0), maxY + rangeY * (padding.top ?? 0)],
-        range: [height, 0],
-        nice: true,
-        clamp: true,
-      }),
-      xScale: scaleUtc<number>({
-        domain: [startDate, endDate],
-        range: [0, width],
-      }),
-    };
-  }, [startDate, endDate, minY, maxY, height, width, padding?.bottom, padding?.top]);
-
-  const chartContext: ChartContextType<T> = {
-    width,
-    height,
-    data,
-    series,
-    startDate,
-    endDate,
-    xScale,
-    yScale,
-    minY,
-    maxY,
-    margin,
-    padding,
-    tooltipContent,
-    leftAxisMargin,
-    setLeftAxisMargin,
-  };
-
-  const tooltipContext = useTooltip({
-    seriesId: series[0].id,
-    chartContext,
-  });
-
-  const {
-    tooltipData,
-    TooltipWrapper,
-    tooltipLeft,
-    tooltipTop,
-    handleTooltip,
-    hideTooltip,
-    containerRef,
-  } = tooltipContext;
-
-  return (
-    <ChartContext.Provider value={chartContext}>
-      <ChartTooltipContext.Provider value={tooltipContext}>
-        <svg width={outerWidth} height={outerHeight} ref={containerRef}>
-          {children}
-          <Group left={margin.left} top={margin.top}>
-            {/* Tooltip hover line + circle */}
-            {tooltipData && (
-              <>
-                <Line
-                  x1={xScale(tooltipData.date)}
-                  x2={xScale(tooltipData.date)}
-                  y1={height}
-                  y2={0}
-                  stroke="black"
-                  strokeWidth={1.5}
-                />
-
-                {series.map((s) => (
-                  <Circle
-                    key={s.id}
-                    cx={xScale(tooltipData.date)}
-                    cy={yScale(s.valueAccessor(tooltipData))}
-                    r={4}
-                    className="text-blue-800"
-                    fill="currentColor"
-                  />
-                ))}
-              </>
-            )}
-
-            {/* Tooltip hover region */}
-            <Bar
-              x={0}
-              y={0}
-              width={width}
-              height={height}
-              onTouchStart={handleTooltip}
-              onTouchMove={handleTooltip}
-              onMouseMove={handleTooltip}
-              onMouseLeave={hideTooltip}
-              fill="transparent"
-            />
-          </Group>
-        </svg>
-
-        {/* Tooltips */}
-        <div className="absolute inset-0 pointer-events-none">
-          {tooltipData && (
-            <TooltipWrapper
-              key={tooltipData.date.toString()}
-              left={(tooltipLeft ?? 0) + margin.left}
-              top={(tooltipTop ?? 0) + margin.top}
-              offsetLeft={8}
-              offsetTop={12}
-              className="absolute"
-              unstyled={true}
-            >
-              <div className="px-4 py-2 text-base bg-white border border-gray-200 rounded-md shadow-md pointer-events-none">
-                {tooltipContent?.(tooltipData) ?? series[0].valueAccessor(tooltipData)}
-              </div>
-            </TooltipWrapper>
-          )}
-        </div>
-      </ChartTooltipContext.Provider>
-    </ChartContext.Provider>
-  );
-}
diff --git a/apps/dashboard/lib/trpc/routers/index.ts b/apps/dashboard/lib/trpc/routers/index.ts
index 3ab5dea3df..d46e4fb133 100644
--- a/apps/dashboard/lib/trpc/routers/index.ts
+++ b/apps/dashboard/lib/trpc/routers/index.ts
@@ -21,7 +21,8 @@ import { updateKeyRemaining } from "./key/updateRemaining";
 import { updateRootKeyName } from "./key/updateRootKeyName";
 import { deleteLlmGateway } from "./llmGateway/delete";
 import { llmSearch } from "./logs/llm-search";
-import { queryLogs } from "./logs/query-log";
+import { queryDistinctPaths } from "./logs/query-distinct-paths";
+import { queryLogs } from "./logs/query-logs";
 import { queryTimeseries } from "./logs/query-timeseries";
 import { createPlainIssue } from "./plain";
 import { createNamespace } from "./ratelimit/createNamespace";
@@ -121,6 +122,7 @@ export const router = t.router({
   }),
   logs: t.router({
     queryLogs,
+    queryDistinctPaths,
     queryTimeseries,
     llmSearch,
   }),
diff --git a/apps/dashboard/lib/trpc/routers/logs/llm-search.ts b/apps/dashboard/lib/trpc/routers/logs/llm-search.ts
deleted file mode 100644
index cdc5168d7c..0000000000
--- a/apps/dashboard/lib/trpc/routers/logs/llm-search.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-import { METHODS } from "@/app/(app)/logs-v2/constants";
-import { filterFieldConfig, filterOutputSchema } from "@/app/(app)/logs-v2/filters.schema";
-import { db } from "@/lib/db";
-import { env } from "@/lib/env";
-import { rateLimitedProcedure, ratelimit } from "@/lib/trpc/ratelimitProcedure";
-import { TRPCError } from "@trpc/server";
-import OpenAI from "openai";
-import { zodResponseFormat } from "openai/helpers/zod";
-import { z } from "zod";
-
-const openai = env().OPENAI_API_KEY
-  ? new OpenAI({
-      apiKey: env().OPENAI_API_KEY,
-    })
-  : null;
-
-async function getStructuredSearchFromLLM(userSearchMsg: string) {
-  try {
-    if (!openai) {
-      return null; // Skip LLM processing in development environment when OpenAI API key is not configured
-    }
-    const completion = await openai.beta.chat.completions.parse({
-      // Don't change the model only a few models allow structured outputs
-      model: "gpt-4o-2024-08-06",
-      temperature: 0.2, // Range 0-2, lower = more focused/deterministic
-      top_p: 0.1, // Alternative to temperature, controls randomness
-      frequency_penalty: 0.5, // Range -2 to 2, higher = less repetition
-      presence_penalty: 0.5, // Range -2 to 2, higher = more topic diversity
-      n: 1, // Number of completions to generate
-      messages: [
-        {
-          role: "system",
-          content: getSystemPrompt(),
-        },
-        {
-          role: "user",
-          content: userSearchMsg,
-        },
-      ],
-      response_format: zodResponseFormat(filterOutputSchema, "searchQuery"),
-    });
-
-    if (!completion.choices[0].message.parsed) {
-      throw new TRPCError({
-        code: "UNPROCESSABLE_CONTENT",
-        message:
-          "Try using phrases like:\n" +
-          "• 'find all POST requests'\n" +
-          "• 'show requests with status 404'\n" +
-          "• 'find requests to api/v1'\n" +
-          "• 'show requests from test.example.com'\n" +
-          "• 'find all GET and POST requests'\n" +
-          "For additional help, contact support@unkey.dev",
-      });
-    }
-
-    return completion.choices[0].message.parsed;
-  } catch (error) {
-    console.error(
-      `Something went wrong when querying OpenAI. Input: ${JSON.stringify(
-        userSearchMsg,
-      )}\n Output ${(error as Error).message}}`,
-    );
-    if (error instanceof TRPCError) {
-      throw error;
-    }
-
-    if ((error as any).response?.status === 429) {
-      throw new TRPCError({
-        code: "TOO_MANY_REQUESTS",
-        message: "Search rate limit exceeded. Please try again in a few minutes.",
-      });
-    }
-
-    throw new TRPCError({
-      code: "INTERNAL_SERVER_ERROR",
-      message:
-        "Failed to process your search query. Please try again or contact support@unkey.dev if the issue persists.",
-    });
-  }
-}
-
-export const llmSearch = rateLimitedProcedure(ratelimit.update)
-  .input(z.string())
-  .mutation(async ({ ctx, input }) => {
-    const workspace = await db.query.workspaces
-      .findFirst({
-        where: (table, { and, eq, isNull }) =>
-          and(eq(table.tenantId, ctx.tenant.id), isNull(table.deletedAt)),
-      })
-      .catch((_err) => {
-        throw new TRPCError({
-          code: "INTERNAL_SERVER_ERROR",
-          message:
-            "Failed to verify workspace access. Please try again or contact support@unkey.dev if this persists.",
-        });
-      });
-
-    if (!workspace) {
-      throw new TRPCError({
-        code: "NOT_FOUND",
-        message: "Workspace not found, please contact support using support@unkey.dev.",
-      });
-    }
-
-    return await getStructuredSearchFromLLM(input);
-  });
-
-// HELPERS
-
-const getSystemPrompt = () => {
-  const operatorsByField = Object.entries(filterFieldConfig)
-    .map(([field, config]) => {
-      const operators = config.operators.join(", ");
-      let constraints = "";
-
-      if (field === "methods") {
-        constraints = ` and must be one of: ${METHODS.join(", ")}`;
-      } else if (field === "status") {
-        constraints = " and must be between 100-599";
-      }
-
-      return `- ${field} accepts ${operators} operator${
-        config.operators.length > 1 ? "s" : ""
-      }${constraints}`;
-    })
-    .join("\n");
-
-  return `You are an expert at converting natural language queries into filters. For queries with multiple conditions, output all relevant filters. We will process them in sequence to build the complete filter. Examples:
-
-Query: "path should start with /api/oz and method should be POST"
-Result: [
-  { 
-    field: "paths",
-    filters: [{ operator: "startsWith", value: "/api/oz" }]
-  },
-  {
-    field: "methods", 
-    filters: [{ operator: "is", value: "POST" }]
-  }
-]
-
-Query: "find POST and GET requests to api/v1"
-Result: [
-  {
-    field: "paths",
-    filters: [{ operator: "startsWith", value: "api/v1" }]
-  },
-  {
-    field: "methods",
-    filters: [
-      { operator: "is", value: "POST" },
-      { operator: "is", value: "GET" }
-    ]
-  }
-]
-
-Query: "show 404 requests from test.example.com"
-Result: [
-  {
-    field: "host",
-    filters: [{ operator: "is", value: "test.example.com" }]
-  },
-  {
-    field: "status",
-    filters: [{ operator: "is", value: 404 }]
-  }
-]
-
-Query: "find all POST requests"
-Result: [
-  {
-    field: "methods",
-    filters: [{ operator: "is", value: "POST" }]
-  }
-]
-
-Remember:
-${operatorsByField}`;
-};
diff --git a/apps/dashboard/lib/trpc/routers/logs/llm-search/index.ts b/apps/dashboard/lib/trpc/routers/logs/llm-search/index.ts
new file mode 100644
index 0000000000..28ccde169f
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/logs/llm-search/index.ts
@@ -0,0 +1,39 @@
+import { db } from "@/lib/db";
+import { env } from "@/lib/env";
+import { rateLimitedProcedure, ratelimit } from "@/lib/trpc/ratelimitProcedure";
+import { TRPCError } from "@trpc/server";
+import OpenAI from "openai";
+import { z } from "zod";
+import { getStructuredSearchFromLLM } from "./utils";
+
+const openai = env().OPENAI_API_KEY
+  ? new OpenAI({
+      apiKey: env().OPENAI_API_KEY,
+    })
+  : null;
+
+export const llmSearch = rateLimitedProcedure(ratelimit.update)
+  .input(z.object({ query: z.string(), timestamp: z.number() }))
+  .mutation(async ({ ctx, input }) => {
+    const workspace = await db.query.workspaces
+      .findFirst({
+        where: (table, { and, eq, isNull }) =>
+          and(eq(table.tenantId, ctx.tenant.id), isNull(table.deletedAt)),
+      })
+      .catch((_err) => {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message:
+            "Failed to verify workspace access. Please try again or contact support@unkey.dev if this persists.",
+        });
+      });
+
+    if (!workspace) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "Workspace not found, please contact support using support@unkey.dev.",
+      });
+    }
+
+    return await getStructuredSearchFromLLM(openai, input.query, input.timestamp);
+  });
diff --git a/apps/dashboard/lib/trpc/routers/logs/llm-search/utils.test.ts b/apps/dashboard/lib/trpc/routers/logs/llm-search/utils.test.ts
new file mode 100644
index 0000000000..e224f10214
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/logs/llm-search/utils.test.ts
@@ -0,0 +1,120 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { TRPCError } from "@trpc/server";
+import { getStructuredSearchFromLLM, getSystemPrompt } from "./utils";
+
+describe("getSystemPrompt", () => {
+  const referenceTime = 1706024400000; // 2024-01-23T12:00:00.000Z
+
+  it("should include all necessary examples and constraints", () => {
+    const prompt = getSystemPrompt(referenceTime);
+
+    expect(prompt).toContain("show me failed requests");
+    expect(prompt).toContain("show logs between 2024-01-19 and 2024-01-20");
+    expect(prompt).toContain('field: "methods"');
+    expect(prompt).toContain('field: "status"');
+    expect(prompt).toContain('operator: "startsWith"');
+    expect(prompt).toContain("GET, POST, PUT, DELETE");
+  });
+
+  it("should include correct timestamp calculations", () => {
+    const prompt = getSystemPrompt(referenceTime);
+    const dayStart = new Date(referenceTime);
+    dayStart.setHours(0, 0, 0, 0);
+
+    expect(prompt).toContain(`value: ${referenceTime - 60 * 60 * 1000}`); // 1h
+    expect(prompt).toContain(`value: ${dayStart.getTime()}`); // day start
+  });
+});
+
+describe("getStructuredSearchFromLLM", () => {
+  const mockOpenAI = {
+    beta: {
+      chat: {
+        completions: {
+          parse: vi.fn(),
+        },
+      },
+    },
+  };
+
+  it("should return null if openai is not configured", async () => {
+    const result = await getStructuredSearchFromLLM(null as any, "test query", 1706024400000);
+    expect(result).toBeNull();
+  });
+
+  it("should handle successful LLM response", async () => {
+    const mockResponse = {
+      choices: [
+        {
+          message: {
+            parsed: {
+              field: "methods",
+              filters: [{ operator: "is", value: "GET" }],
+            },
+          },
+        },
+      ],
+    };
+
+    mockOpenAI.beta.chat.completions.parse.mockResolvedValueOnce(mockResponse);
+
+    const result = await getStructuredSearchFromLLM(
+      mockOpenAI as any,
+      "find GET requests",
+      1706024400000,
+    );
+
+    expect(result).toEqual({
+      field: "methods",
+      filters: [{ operator: "is", value: "GET" }],
+    });
+  });
+
+  it("should handle unparseable response", async () => {
+    const mockResponse = {
+      choices: [
+        {
+          message: {
+            parsed: null,
+          },
+        },
+      ],
+    };
+
+    mockOpenAI.beta.chat.completions.parse.mockResolvedValueOnce(mockResponse);
+
+    await expect(
+      getStructuredSearchFromLLM(mockOpenAI as any, "invalid query", 1706024400000),
+    ).rejects.toThrow(TRPCError);
+  });
+
+  it("should handle rate limit error", async () => {
+    mockOpenAI.beta.chat.completions.parse.mockRejectedValueOnce({
+      response: { status: 429 },
+    });
+
+    await expect(
+      getStructuredSearchFromLLM(mockOpenAI as any, "test query", 1706024400000),
+    ).rejects.toThrowError(
+      new TRPCError({
+        code: "TOO_MANY_REQUESTS",
+        message: "Search rate limit exceeded. Please try again in a few minutes.",
+      }),
+    );
+  });
+
+  it("should handle general errors", async () => {
+    mockOpenAI.beta.chat.completions.parse.mockRejectedValueOnce(new Error("Unknown error"));
+
+    await expect(
+      getStructuredSearchFromLLM(mockOpenAI as any, "test query", 1706024400000),
+    ).rejects.toThrowError(
+      new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message:
+          "Failed to process your search query. Please try again or contact support@unkey.dev if the issue persists.",
+      }),
+    );
+  });
+});
diff --git a/apps/dashboard/lib/trpc/routers/logs/llm-search/utils.ts b/apps/dashboard/lib/trpc/routers/logs/llm-search/utils.ts
new file mode 100644
index 0000000000..34a6c1fdc9
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/logs/llm-search/utils.ts
@@ -0,0 +1,401 @@
+import { METHODS } from "@/app/(app)/logs/constants";
+import { filterFieldConfig, filterOutputSchema } from "@/app/(app)/logs/filters.schema";
+import { TRPCError } from "@trpc/server";
+import type OpenAI from "openai";
+import { zodResponseFormat } from "openai/helpers/zod.mjs";
+
+export async function getStructuredSearchFromLLM(
+  openai: OpenAI | null,
+  userSearchMsg: string,
+  usersReferenceMS: number,
+) {
+  try {
+    if (!openai) {
+      return null; // Skip LLM processing in development environment when OpenAI API key is not configured
+    }
+    const completion = await openai.beta.chat.completions.parse({
+      // Don't change the model only a few models allow structured outputs
+      model: "gpt-4o-mini",
+      temperature: 0.2, // Range 0-2, lower = more focused/deterministic
+      top_p: 0.1, // Alternative to temperature, controls randomness
+      frequency_penalty: 0.5, // Range -2 to 2, higher = less repetition
+      presence_penalty: 0.5, // Range -2 to 2, higher = more topic diversity
+      n: 1, // Number of completions to generate
+      messages: [
+        {
+          role: "system",
+          content: getSystemPrompt(usersReferenceMS),
+        },
+        {
+          role: "user",
+          content: userSearchMsg,
+        },
+      ],
+      response_format: zodResponseFormat(filterOutputSchema, "searchQuery"),
+    });
+
+    if (!completion.choices[0].message.parsed) {
+      throw new TRPCError({
+        code: "UNPROCESSABLE_CONTENT",
+        message:
+          "Try using phrases like:\n" +
+          "• 'find all POST requests'\n" +
+          "• 'show requests with status 404'\n" +
+          "• 'find requests to api/v1'\n" +
+          "• 'show requests from test.example.com'\n" +
+          "• 'find all GET and POST requests'\n" +
+          "For additional help, contact support@unkey.dev",
+      });
+    }
+
+    return completion.choices[0].message.parsed;
+  } catch (error) {
+    console.error(
+      `Something went wrong when querying OpenAI. Input: ${JSON.stringify(
+        userSearchMsg,
+      )}\n Output ${(error as Error).message}}`,
+    );
+    if (error instanceof TRPCError) {
+      throw error;
+    }
+
+    if ((error as any).response?.status === 429) {
+      throw new TRPCError({
+        code: "TOO_MANY_REQUESTS",
+        message: "Search rate limit exceeded. Please try again in a few minutes.",
+      });
+    }
+
+    throw new TRPCError({
+      code: "INTERNAL_SERVER_ERROR",
+      message:
+        "Failed to process your search query. Please try again or contact support@unkey.dev if the issue persists.",
+    });
+  }
+}
+export const getSystemPrompt = (usersReferenceMS: number) => {
+  const operatorsByField = Object.entries(filterFieldConfig)
+    .map(([field, config]) => {
+      const operators = config.operators.join(", ");
+      let constraints = "";
+      if (field === "methods") {
+        constraints = ` and must be one of: ${METHODS.join(", ")}`;
+      } else if (field === "status") {
+        constraints = " and must be between 200-599";
+      }
+      return `- ${field} accepts ${operators} operator${
+        config.operators.length > 1 ? "s" : ""
+      }${constraints}`;
+    })
+    .join("\n");
+  return `You are an expert at converting natural language queries into filters, understanding context and inferring filter types from natural expressions. Handle complex, ambiguous queries by breaking them down into clear filters. For status codes, use 200,400,500 variants - the application handles status grouping. Use ${usersReferenceMS} timestamp for time-related queries.
+
+Examples:
+
+# Complex Host Patterns
+Query: "show requests from api.staging.company.com and test.company.com"
+Result: [
+  {
+    field: "host",
+    filters: [
+      { operator: "is", value: "api.staging.company.com" },
+      { operator: "is", value: "test.company.com" }
+    ]
+  }
+]
+
+Query: "localhost and 127.0.0.1 requests"
+Result: [
+  {
+    field: "host",
+    filters: [
+      { operator: "is", value: "localhost" },
+      { operator: "is", value: "127.0.0.1" }
+    ]
+  }
+]
+
+# Complex Path Patterns
+Query: "find /api/v2/users/{userId}/profile and /api/v2/users/search requests"
+Result: [
+  {
+    field: "paths",
+    filters: [
+      { operator: "startsWith", value: "api/v2/users" }
+    ]
+  }
+]
+
+Query: "/v1/api and /api/v1 timeouts"
+Result: [
+  {
+    field: "paths",
+    filters: [
+      { operator: "startsWith", value: "v1/api" },
+      { operator: "startsWith", value: "api/v1" }
+    ]
+  },
+  {
+    field: "status",
+    filters: [{ operator: "is", value: 500 }]
+  }
+]
+
+# Time Range Edge Cases
+Query: "errors from last 30m and last 24h"
+Result: [
+  {
+    field: "status",
+    filters: [
+      { operator: "is", value: 400 },
+      { operator: "is", value: 500 }
+    ]
+  },
+  {
+    field: "since",
+    filters: [{
+      operator: "is",
+      value: "24h"
+    }]
+  }
+]
+
+# Status Code Variations
+Query: "show me timeouts and server errors"
+Result: [
+  {
+    field: "status",
+    filters: [{ operator: "is", value: 500 }]
+  }
+]
+
+Query: "client errors and failed requests"
+Result: [
+  {
+    field: "status",
+    filters: [{ operator: "is", value: 400 }]
+  }
+]
+
+Query: "show successful and not found requests"
+Result: [
+  {
+    field: "status",
+    filters: [
+      { operator: "is", value: 200 },
+      { operator: "is", value: 404 }
+    ]
+  }
+]
+
+# Method Combinations
+Query: "get, post and delete requests"
+Result: [
+  {
+    field: "methods",
+    filters: [
+      { operator: "is", value: "GET" },
+      { operator: "is", value: "POST" },
+      { operator: "is", value: "DELETE" }
+    ]
+  }
+]
+
+Query: "read and write operations to /api"
+Result: [
+  {
+    field: "methods",
+    filters: [
+      { operator: "is", value: "GET" },
+      { operator: "is", value: "POST" }
+    ]
+  },
+  {
+    field: "paths",
+    filters: [{ operator: "startsWith", value: "api" }]
+  }
+]
+
+# Complex Combinations
+Query: "failed requests to /v1/users or /v2/users from api.prod.com in last 2h"
+Result: [
+  {
+    field: "status",
+    filters: [
+      { operator: "is", value: 400 },
+      { operator: "is", value: 500 }
+    ]
+  },
+  {
+    field: "paths",
+    filters: [
+      { operator: "startsWith", value: "v1/users" },
+      { operator: "startsWith", value: "v2/users" }
+    ]
+  },
+  {
+    field: "host",
+    filters: [{ operator: "is", value: "api.prod.com" }]
+  },
+  {
+    field: "startTime",
+    filters: [{
+      operator: "is",
+      value: ${usersReferenceMS - 2 * 60 * 60 * 1000}
+    }]
+  }
+]
+
+Query: "localhost GET and POST /api errors since 2h and 30m ago"
+Result: [
+  {
+    field: "host",
+    filters: [{ operator: "is", value: "localhost" }]
+  },
+  {
+    field: "methods",
+    filters: [
+      { operator: "is", value: "GET" },
+      { operator: "is", value: "POST" }
+    ]
+  },
+  {
+    field: "paths",
+    filters: [{ operator: "startsWith", value: "api" }]
+  },
+  {
+    field: "status",
+    filters: [
+      { operator: "is", value: 400 },
+      { operator: "is", value: 500 }
+    ]
+  },
+  {
+    field: "since",
+    filters: [{
+      operator: "is",
+      value: "2h"
+    }]
+  }
+]
+
+Remember:
+${operatorsByField}
+- since and endTime accept is operator for filtering logs by time range
+- For status codes, use ONLY:
+  • 200 for successful responses
+  • 400 for client errors (4XX series)
+  • 500 for server errors (5XX series)
+- For relative time queries, support any combination of:
+  • Nx[m] for minutes (e.g., 30m, 45m)
+  • Nx[h] for hours (e.g., 1h, 24h)
+  • Nx[d] for days (e.g., 1d, 7d)
+  Multiple units can be combined (e.g., "1d 6h")
+
+Special handling rules:
+1. Always normalize paths by removing leading slash
+2. For multiple time ranges, use the longest duration
+3. For ambiguous terms like "failed", include both 400 and 500 status codes
+4. Treat "read" operations as GET and "write" operations as POST
+5. When seeing path parameters (e.g., {id}), match the base path
+6. For IP addresses and localhost, treat them as host values
+
+Error Handling Rules:
+1. Invalid time formats: Convert to nearest supported range (e.g., "1w" → "7d")
+2. Unknown HTTP methods: Default to GET for read-like terms, POST for write-like terms
+3. Invalid status codes: Map to nearest category (e.g., 418 → 400, 503 → 500)
+4. Malformed paths: Strip special characters and normalize
+
+Ambiguity Resolution Priority:
+1. Explicit over implicit (e.g., "GET" over "read-like" terms)
+2. Specific over general (e.g., "/api/v2" over "/api")
+3. Time ranges: Use most specific when multiple are valid
+4. Status codes: When ambiguous between success/error, prefer error for terms like "failed", "issues"
+5. Methods: When ambiguous between read/write, prefer read (GET) for safety
+
+Output Validation:
+1. Required fields must be present: field, filters
+2. Filters must have: operator, value
+3. Values must match field constraints:
+   - methods: must be valid HTTP method
+   - status: must be 200, 400, or 500
+   - paths: must be normalized string
+   - host: must be valid hostname/IP
+   - time: must be valid timestamp or duration
+
+Additional Examples:
+
+# Error Handling Examples
+Query: "show requests from last week"
+Result: [
+  {
+    field: "since",
+    filters: [{
+      operator: "is",
+      value: "7d"  // Converts unsupported "week" to "7d"
+    }]
+  }
+]
+
+Query: "find browse requests to /api"
+Result: [
+  {
+    field: "methods",
+    filters: [{
+      operator: "is",
+      value: "GET"  // Maps "browse" to GET as read-like term
+    }]
+  },
+  {
+    field: "paths",
+    filters: [{
+      operator: "startsWith",
+      value: "api"  // Normalized path
+    }]
+  }
+]
+
+# Ambiguity Resolution Examples
+Query: "show api issues from last 2d and 6h"
+Result: [
+  {
+    field: "paths",
+    filters: [{
+      operator: "startsWith",
+      value: "api"
+    }]
+  },
+  {
+    field: "status",
+    filters: [
+      { operator: "is", value: 400 },
+      { operator: "is", value: 500 }
+    ]
+  },
+  {
+    field: "since",
+    filters: [{
+      operator: "is",
+      value: "2d"  // Uses longest time range
+    }]
+  }
+]
+
+Query: "fetch requests to /api/v1 and /api"
+Result: [
+  {
+    field: "methods",
+    filters: [{
+      operator: "is",
+      value: "GET"  // "fetch" mapped to GET
+    }]
+  },
+  {
+    field: "paths",
+    filters: [
+      { operator: "startsWith", value: "api/v1" },  // More specific path first
+      { operator: "startsWith", value: "api" }
+    ]
+  }
+]`;
+};
diff --git a/apps/dashboard/lib/trpc/routers/logs/query-distinct-paths.ts b/apps/dashboard/lib/trpc/routers/logs/query-distinct-paths.ts
new file mode 100644
index 0000000000..b120614a22
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/logs/query-distinct-paths.ts
@@ -0,0 +1,38 @@
+import { clickhouse } from "@/lib/clickhouse";
+import { db } from "@/lib/db";
+import { rateLimitedProcedure, ratelimit } from "@/lib/trpc/ratelimitProcedure";
+import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+
+export const queryDistinctPaths = rateLimitedProcedure(ratelimit.update).query(async ({ ctx }) => {
+  const workspace = await db.query.workspaces
+    .findFirst({
+      where: (table, { and, eq, isNull }) =>
+        and(eq(table.tenantId, ctx.tenant.id), isNull(table.deletedAt)),
+    })
+    .catch((_err) => {
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message:
+          "Failed to retrieve distinct paths due to an error. If this issue persists, please contact support@unkey.dev with the time this occurred.",
+      });
+    });
+
+  if (!workspace) {
+    throw new TRPCError({
+      code: "NOT_FOUND",
+      message: "Workspace not found, please contact support using support@unkey.dev.",
+    });
+  }
+
+  const result = await clickhouse.querier.query({
+    query: `
+          SELECT DISTINCT path
+          FROM metrics.raw_api_requests_v1
+          WHERE workspace_id = {workspaceId: String}`,
+    schema: z.object({ path: z.string() }),
+    params: z.object({ workspaceId: z.string() }),
+  })({ workspaceId: workspace.id });
+
+  return result.val?.map((i) => i.path) ?? [];
+});
diff --git a/apps/dashboard/lib/trpc/routers/logs/query-log.ts b/apps/dashboard/lib/trpc/routers/logs/query-logs/index.ts
similarity index 52%
rename from apps/dashboard/lib/trpc/routers/logs/query-log.ts
rename to apps/dashboard/lib/trpc/routers/logs/query-logs/index.ts
index 29c3f3f248..6687fd6a34 100644
--- a/apps/dashboard/lib/trpc/routers/logs/query-log.ts
+++ b/apps/dashboard/lib/trpc/routers/logs/query-logs/index.ts
@@ -1,12 +1,30 @@
+import { queryLogsPayload } from "@/app/(app)/logs/components/table/query-logs.schema";
 import { clickhouse } from "@/lib/clickhouse";
 import { db } from "@/lib/db";
 import { rateLimitedProcedure, ratelimit } from "@/lib/trpc/ratelimitProcedure";
 import { TRPCError } from "@trpc/server";
-import { getLogsClickhousePayload } from "@unkey/clickhouse/src/logs";
+import { log } from "@unkey/clickhouse/src/logs";
+import { z } from "zod";
+import { transformFilters } from "./utils";
+
+const LogsResponse = z.object({
+  logs: z.array(log),
+  hasMore: z.boolean(),
+  nextCursor: z
+    .object({
+      time: z.number().int(),
+      requestId: z.string(),
+    })
+    .optional(),
+});
+
+type LogsResponse = z.infer<typeof LogsResponse>;
 
 export const queryLogs = rateLimitedProcedure(ratelimit.update)
-  .input(getLogsClickhousePayload.omit({ workspaceId: true }))
+  .input(queryLogsPayload)
+  .output(LogsResponse)
   .query(async ({ ctx, input }) => {
+    // Get workspace
     const workspace = await db.query.workspaces
       .findFirst({
         where: (table, { and, eq, isNull }) =>
@@ -26,15 +44,36 @@ export const queryLogs = rateLimitedProcedure(ratelimit.update)
         message: "Workspace not found, please contact support using support@unkey.dev.",
       });
     }
+
+    const transformedInputs = transformFilters(input);
     const result = await clickhouse.api.logs({
-      ...input,
+      ...transformedInputs,
+      cursorRequestId: input.cursor?.requestId ?? null,
+      cursorTime: input.cursor?.time ?? null,
       workspaceId: workspace.id,
     });
+
     if (result.err) {
       throw new TRPCError({
         code: "INTERNAL_SERVER_ERROR",
         message: "Something went wrong when fetching data from clickhouse.",
       });
     }
-    return result.val;
+
+    const logs = result.val;
+
+    // Prepare the response with pagination info
+    const response: LogsResponse = {
+      logs,
+      hasMore: logs.length === input.limit,
+      nextCursor:
+        logs.length > 0
+          ? {
+              time: logs[logs.length - 1].time,
+              requestId: logs[logs.length - 1].request_id,
+            }
+          : undefined,
+    };
+
+    return response;
   });
diff --git a/apps/dashboard/lib/trpc/routers/logs/query-logs/utils.test.ts b/apps/dashboard/lib/trpc/routers/logs/query-logs/utils.test.ts
new file mode 100644
index 0000000000..74b6a6bd7d
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/logs/query-logs/utils.test.ts
@@ -0,0 +1,101 @@
+import { describe, expect, it } from "vitest";
+import { transformFilters } from "./utils";
+
+describe("transformFilters", () => {
+  const basePayload = {
+    startTime: 1706024400000,
+    endTime: 1706028000000,
+    since: "",
+    limit: 50,
+    path: null,
+    host: null,
+    method: null,
+    status: null,
+    requestId: null,
+    cursor: null,
+  };
+
+  it("should transform empty filters", () => {
+    const result = transformFilters(basePayload);
+
+    expect(result).toEqual({
+      startTime: basePayload.startTime,
+      endTime: basePayload.endTime,
+      limit: 50,
+      hosts: [],
+      methods: [],
+      paths: [],
+      statusCodes: [],
+      requestIds: [],
+      cursorTime: null,
+      cursorRequestId: null,
+    });
+  });
+
+  it("should transform all filters with values", () => {
+    const payload = {
+      ...basePayload,
+      host: {
+        filters: [{ operator: "is" as const, value: "example.com" }],
+      },
+      method: {
+        filters: [{ operator: "is" as const, value: "GET" }],
+      },
+      path: {
+        filters: [{ operator: "startsWith" as const, value: "/api" }],
+      },
+      status: {
+        filters: [{ operator: "is" as const, value: 200 }],
+      },
+      requestId: {
+        filters: [{ operator: "is" as const, value: "req123" }],
+      },
+      cursor: {
+        time: 1706024400000,
+        requestId: "cursor123",
+      },
+    };
+
+    const result = transformFilters(payload);
+
+    expect(result).toEqual({
+      startTime: payload.startTime,
+      endTime: payload.endTime,
+      limit: 50,
+      hosts: ["example.com"],
+      methods: ["GET"],
+      paths: [{ operator: "startsWith", value: "/api" }],
+      statusCodes: [200],
+      requestIds: ["req123"],
+      cursorTime: 1706024400000,
+      cursorRequestId: "cursor123",
+    });
+  });
+
+  it("should handle relative time with since parameter", () => {
+    const payload = {
+      ...basePayload,
+      since: "24h",
+    };
+
+    const result = transformFilters(payload);
+
+    expect(result.endTime).toBeGreaterThan(result.startTime);
+    expect(result.endTime - result.startTime).toBeCloseTo(24 * 60 * 60 * 1000, -2);
+  });
+
+  it("should handle cursor values", () => {
+    const payload = {
+      ...basePayload,
+      cursor: {
+        time: 1706024400000,
+        requestId: "req123",
+      },
+    };
+
+    const result = transformFilters(payload);
+
+    expect(result.cursorTime).toBe(1706024400000);
+    expect(result.cursorRequestId).toBe("req123");
+  });
+});
diff --git a/apps/dashboard/lib/trpc/routers/logs/query-logs/utils.ts b/apps/dashboard/lib/trpc/routers/logs/query-logs/utils.ts
new file mode 100644
index 0000000000..6b80b8bfb7
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/logs/query-logs/utils.ts
@@ -0,0 +1,44 @@
+import type { queryLogsPayload } from "@/app/(app)/logs/components/table/query-logs.schema";
+import type { GetLogsClickhousePayload } from "@unkey/clickhouse/src/logs";
+import type { z } from "zod";
+import { getTimestampFromRelative } from "../utils/getTimestampFromRelative";
+
+export function transformFilters(
+  params: z.infer<typeof queryLogsPayload>,
+): Omit<GetLogsClickhousePayload, "workspaceId"> {
+  // Transform path filters to include operators
+  const paths =
+    params.path?.filters.map((f) => ({
+      operator: f.operator,
+      value: f.value,
+    })) || [];
+
+  // Extract other filters as before
+  const requestIds = params.requestId?.filters.map((f) => f.value) || [];
+  const hosts = params.host?.filters.map((f) => f.value) || [];
+  const methods = params.method?.filters.map((f) => f.value) || [];
+  const statusCodes = params.status?.filters.map((f) => f.value) || [];
+
+  let startTime = params.startTime;
+  let endTime = params.endTime;
+
+  // If we have relativeTime filter `since`, ignore other time params
+  const hasRelativeTime = params.since !== "";
+  if (hasRelativeTime) {
+    startTime = getTimestampFromRelative(params.since);
+    endTime = Date.now();
+  }
+
+  return {
+    limit: params.limit,
+    startTime,
+    endTime,
+    requestIds,
+    hosts,
+    methods,
+    paths,
+    statusCodes,
+    cursorTime: params.cursor?.time ?? null,
+    cursorRequestId: params.cursor?.requestId ?? null,
+  };
+}
diff --git a/apps/dashboard/lib/trpc/routers/logs/query-timeseries/constants.ts b/apps/dashboard/lib/trpc/routers/logs/query-timeseries/constants.ts
new file mode 100644
index 0000000000..19c66f0564
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/logs/query-timeseries/constants.ts
@@ -0,0 +1,3 @@
+export const HOUR_IN_MS = 60 * 60 * 1000;
+export const DAY_IN_MS = 24 * HOUR_IN_MS;
+export const WEEK_IN_MS = 7 * DAY_IN_MS;
diff --git a/apps/dashboard/lib/trpc/routers/logs/query-timeseries.ts b/apps/dashboard/lib/trpc/routers/logs/query-timeseries/index.ts
similarity index 60%
rename from apps/dashboard/lib/trpc/routers/logs/query-timeseries.ts
rename to apps/dashboard/lib/trpc/routers/logs/query-timeseries/index.ts
index 9336f9270c..1cd6a4de19 100644
--- a/apps/dashboard/lib/trpc/routers/logs/query-timeseries.ts
+++ b/apps/dashboard/lib/trpc/routers/logs/query-timeseries/index.ts
@@ -1,12 +1,12 @@
-import { getTimeseriesGranularity } from "@/app/(app)/logs/utils";
+import { queryTimeseriesPayload } from "@/app/(app)/logs/components/charts/query-timeseries.schema";
 import { clickhouse } from "@/lib/clickhouse";
 import { db } from "@/lib/db";
 import { rateLimitedProcedure, ratelimit } from "@/lib/trpc/ratelimitProcedure";
 import { TRPCError } from "@trpc/server";
-import { logsTimeseriesParams } from "@unkey/clickhouse/src/logs";
+import { transformFilters } from "./utils";
 
 export const queryTimeseries = rateLimitedProcedure(ratelimit.update)
-  .input(logsTimeseriesParams.omit({ workspaceId: true }))
+  .input(queryTimeseriesPayload)
   .query(async ({ ctx, input }) => {
     const workspace = await db.query.workspaces
       .findFirst({
@@ -16,9 +16,8 @@ export const queryTimeseries = rateLimitedProcedure(ratelimit.update)
       .catch((_err) => {
         throw new TRPCError({
           code: "INTERNAL_SERVER_ERROR",
-          //TODO: change error message later
           message:
-            "Failed to retrieve timeseries analytics due to an error. If this issue persists, please contact support@unkey.dev with the time this occurred.",
+            "Failed to retrieve timeseries analytics due to an workspace error. If this issue persists, please contact support@unkey.dev with the time this occurred.",
         });
       });
 
@@ -29,23 +28,18 @@ export const queryTimeseries = rateLimitedProcedure(ratelimit.update)
       });
     }
 
-    const { startTime, endTime, granularity } = getTimeseriesGranularity(
-      input.startTime,
-      input.endTime,
-    );
-
+    const { params: transformedInputs, granularity } = transformFilters(input);
     const result = await clickhouse.api.timeseries[granularity]({
-      ...input,
-      startTime,
-      endTime,
+      ...transformedInputs,
       workspaceId: workspace.id,
     });
 
     if (result.err) {
       throw new TRPCError({
         code: "INTERNAL_SERVER_ERROR",
-        message: "Something went wrong when fetching data from clickhouse.",
+        message:
+          "Failed to retrieve timeseries analytics due to an error. If this issue persists, please contact support@unkey.dev with the time this occurred.",
       });
     }
-    return result.val;
+    return { timeseries: result.val, granularity };
   });
diff --git a/apps/dashboard/lib/trpc/routers/logs/query-timeseries/utils.test.ts b/apps/dashboard/lib/trpc/routers/logs/query-timeseries/utils.test.ts
new file mode 100644
index 0000000000..f27b15ff57
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/logs/query-timeseries/utils.test.ts
@@ -0,0 +1,131 @@
+import { describe, expect, it } from "vitest";
+
+import { HOUR_IN_MS, WEEK_IN_MS } from "./constants";
+import { getTimeseriesGranularity, transformFilters } from "./utils";
+
+describe("getTimeseriesGranularity", () => {
+  const NOW = 1706024400000; // 2024-01-23T12:00:00.000Z
+
+  it("should return perMinute granularity for missing start and end times", () => {
+    const result = getTimeseriesGranularity(null, null);
+    expect(result.granularity).toBe("perMinute");
+    expect(result.endTime - result.startTime).toBe(HOUR_IN_MS);
+  });
+
+  it("should return perMinute granularity for timerange <= 1 hour", () => {
+    const endTime = NOW;
+    const startTime = endTime - HOUR_IN_MS / 2;
+    const result = getTimeseriesGranularity(startTime, endTime);
+
+    expect(result).toEqual({
+      granularity: "perMinute",
+      startTime,
+      endTime,
+    });
+  });
+
+  it("should return perHour granularity for timerange > 1 hour and <= 1 week", () => {
+    const endTime = NOW;
+    const startTime = endTime - WEEK_IN_MS / 2;
+    const result = getTimeseriesGranularity(startTime, endTime);
+
+    expect(result).toEqual({
+      granularity: "perHour",
+      startTime,
+      endTime,
+    });
+  });
+
+  it("should return perDay granularity for timerange > 1 week", () => {
+    const endTime = NOW;
+    const startTime = endTime - WEEK_IN_MS * 2;
+    const result = getTimeseriesGranularity(startTime, endTime);
+
+    expect(result).toEqual({
+      granularity: "perDay",
+      startTime,
+      endTime,
+    });
+  });
+
+  it("should use current time as endTime when only startTime is provided", () => {
+    const startTime = NOW - HOUR_IN_MS;
+    const result = getTimeseriesGranularity(startTime, null);
+
+    expect(result.endTime).toBeGreaterThan(startTime);
+    expect(result.startTime).toBe(startTime);
+  });
+});
+
+describe("transformFilters", () => {
+  const basePayload = {
+    startTime: 1706024400000,
+    endTime: 1706028000000,
+    since: "",
+    path: null,
+    host: null,
+    method: null,
+    status: null,
+  };
+
+  it("should transform empty filters correctly", () => {
+    const result = transformFilters(basePayload);
+
+    expect(result).toEqual({
+      params: {
+        startTime: basePayload.startTime,
+        endTime: basePayload.endTime,
+        hosts: [],
+        methods: [],
+        paths: [],
+        statusCodes: [],
+      },
+      granularity: "perMinute",
+    });
+  });
+
+  it("should transform filters with values correctly", () => {
+    const payload = {
+      ...basePayload,
+      host: {
+        filters: [{ operator: "is" as const, value: "example.com" }],
+      },
+      method: {
+        filters: [{ operator: "is" as const, value: "GET" }],
+      },
+      path: {
+        filters: [{ operator: "startsWith" as const, value: "/api" }],
+      },
+      status: {
+        filters: [{ operator: "is" as const, value: 200 }],
+      },
+    };
+
+    const result = transformFilters(payload);
+
+    expect(result).toEqual({
+      params: {
+        startTime: payload.startTime,
+        endTime: payload.endTime,
+        hosts: ["example.com"],
+        methods: ["GET"],
+        paths: [{ operator: "startsWith", value: "/api" }],
+        statusCodes: [200],
+      },
+      granularity: "perMinute",
+    });
+  });
+
+  it('should handle relative time with "since" parameter', () => {
+    const payload = {
+      ...basePayload,
+      since: "24h",
+    };
+
+    const result = transformFilters(payload);
+
+    expect(result.params.endTime).toBeGreaterThan(result.params.startTime);
+    expect(result.params.endTime - result.params.startTime).toBeCloseTo(24 * 60 * 60 * 1000, -2);
+    expect(result.granularity).toBe("perHour");
+  });
+});
diff --git a/apps/dashboard/lib/trpc/routers/logs/query-timeseries/utils.ts b/apps/dashboard/lib/trpc/routers/logs/query-timeseries/utils.ts
new file mode 100644
index 0000000000..718886c15b
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/logs/query-timeseries/utils.ts
@@ -0,0 +1,83 @@
+import type { queryTimeseriesPayload } from "@/app/(app)/logs/components/charts/query-timeseries.schema";
+import type { LogsTimeseriesParams } from "@unkey/clickhouse/src/logs";
+import type { z } from "zod";
+import { getTimestampFromRelative } from "../utils/getTimestampFromRelative";
+import { HOUR_IN_MS, WEEK_IN_MS } from "./constants";
+
+export type TimeseriesGranularity = "perMinute" | "perHour" | "perDay";
+type TimeseriesConfig = {
+  granularity: TimeseriesGranularity;
+  startTime: number;
+  endTime: number;
+};
+
+export const getTimeseriesGranularity = (
+  startTime?: number | null,
+  endTime?: number | null,
+): TimeseriesConfig => {
+  const now = Date.now();
+
+  // If both of them are missing fallback to perMinute and fetch lastHour to show latest
+  if (!startTime && !endTime) {
+    return {
+      granularity: "perMinute",
+      startTime: now - HOUR_IN_MS,
+      endTime: now,
+    };
+  }
+
+  // Set default end time if missing
+  const effectiveEndTime = endTime ?? now;
+  // Set default start time if missing (last hour)
+  const effectiveStartTime = startTime ?? effectiveEndTime - HOUR_IN_MS;
+  const timeRange = effectiveEndTime - effectiveStartTime;
+  let granularity: TimeseriesGranularity;
+
+  if (timeRange > WEEK_IN_MS) {
+    // > 7 days
+    granularity = "perDay";
+  } else if (timeRange > HOUR_IN_MS) {
+    // > 1 hour
+    granularity = "perHour";
+  } else {
+    // <= 1 hour
+    granularity = "perMinute";
+  }
+
+  return {
+    granularity,
+    startTime: effectiveStartTime,
+    endTime: effectiveEndTime,
+  };
+};
+
+export function transformFilters(params: z.infer<typeof queryTimeseriesPayload>): {
+  params: Omit<LogsTimeseriesParams, "workspaceId">;
+  granularity: TimeseriesGranularity;
+} {
+  let timeConfig: TimeseriesConfig;
+
+  if (params.since !== "") {
+    const startTime = getTimestampFromRelative(params.since);
+    const endTime = Date.now();
+    timeConfig = getTimeseriesGranularity(startTime, endTime);
+  } else {
+    timeConfig = getTimeseriesGranularity(params.startTime, params.endTime);
+  }
+
+  return {
+    params: {
+      startTime: timeConfig.startTime,
+      endTime: timeConfig.endTime,
+      hosts: params.host?.filters.map((f) => f.value) || [],
+      methods: params.method?.filters.map((f) => f.value) || [],
+      paths:
+        params.path?.filters.map((f) => ({
+          operator: f.operator,
+          value: f.value,
+        })) || [],
+      statusCodes: params.status?.filters.map((f) => f.value) || [],
+    },
+    granularity: timeConfig.granularity,
+  };
+}
diff --git a/apps/dashboard/lib/trpc/routers/logs/utils/getTimestampFromRelative.ts b/apps/dashboard/lib/trpc/routers/logs/utils/getTimestampFromRelative.ts
new file mode 100644
index 0000000000..c8325e676f
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/logs/utils/getTimestampFromRelative.ts
@@ -0,0 +1,21 @@
+export const getTimestampFromRelative = (relativeTime: string): number => {
+  let totalMilliseconds = 0;
+
+  for (const [, amount, unit] of relativeTime.matchAll(/(\d+)([hdm])/g)) {
+    const value = Number.parseInt(amount, 10);
+
+    switch (unit) {
+      case "h":
+        totalMilliseconds += value * 60 * 60 * 1000;
+        break;
+      case "d":
+        totalMilliseconds += value * 24 * 60 * 60 * 1000;
+        break;
+      case "m":
+        totalMilliseconds += value * 60 * 1000;
+        break;
+    }
+  }
+
+  return Date.now() - totalMilliseconds;
+};
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index d5684ad037..2135ebe3d6 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "vitest run"
   },
   "dependencies": {
     "@ant-design/plots": "^1.2.5",
@@ -107,14 +108,18 @@
   "devDependencies": {
     "@clerk/types": "^3.63.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/d3-array": "^3.2.1",
     "@types/ms": "^0.7.34",
     "@types/node": "^20.14.9",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.0",
     "autoprefixer": "^10.4.19",
+    "jsdom": "^26.0.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5.1.3"
+    "typescript": "^5.1.3",
+    "vitest": "^1.6.0"
   }
 }
diff --git a/apps/dashboard/styles/tailwind/tailwind.css b/apps/dashboard/styles/tailwind/tailwind.css
index 4beddd4152..2f772fc490 100644
--- a/apps/dashboard/styles/tailwind/tailwind.css
+++ b/apps/dashboard/styles/tailwind/tailwind.css
@@ -1,6 +1,5 @@
 @tailwind base;
 
-
 @layer base {
   :root {
     --chart-1: 0 75% 60%; /* Red */
@@ -140,3 +139,16 @@ code .line::before {
   text-align: right;
   color: rgba(115, 138, 148, 0.4);
 }
+
+@keyframes fillLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.animate-fill-left {
+  animation: fillLeft 1s ease-in-out;
+}
diff --git a/apps/dashboard/vitest.config.ts b/apps/dashboard/vitest.config.ts
new file mode 100644
index 0000000000..458bc8dd4e
--- /dev/null
+++ b/apps/dashboard/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    alias: { "@/": new URL("./", import.meta.url).pathname },
+  },
+});
diff --git a/apps/engineering/content/design/components/date-time.example.tsx b/apps/engineering/content/design/components/date-time.example.tsx
index 3fed837d6e..d2291da09e 100644
--- a/apps/engineering/content/design/components/date-time.example.tsx
+++ b/apps/engineering/content/design/components/date-time.example.tsx
@@ -42,7 +42,7 @@ export const DateTimeExample: React.FC = () => {
               </p>
             </div>
           </div>
-          <div className="flex flex-col w-full pt-12 justify-center items-center">
+          <div className="flex flex-col w-80 mx-auto pt-12 justify-center items-center">
             <DateTime
               onChange={(date?: Range, startTime?: TimeUnit, endTime?: TimeUnit) =>
                 handleChange(date, startTime, endTime)
@@ -50,7 +50,7 @@ export const DateTimeExample: React.FC = () => {
             >
               <DateTime.Calendar mode="range" />
               <DateTime.TimeInput type="range" />
-              <DateTime.Actions>
+              <DateTime.Actions className="px-2">
                 <Button
                   className="w-full"
                   onClick={() => handleApply(date, startTime, endTime)}
diff --git a/apps/engineering/content/design/icons.mdx b/apps/engineering/content/design/icons.mdx
index 6f3c06e336..819d8055bb 100644
--- a/apps/engineering/content/design/icons.mdx
+++ b/apps/engineering/content/design/icons.mdx
@@ -22,6 +22,7 @@ import {
   ChevronLeft,
   ChevronRight,
   CircleCarretRight,
+  Clock,
   Fingerprint,
   Gauge,
   Gear,
@@ -113,6 +114,9 @@ import { IconName } from "@unkey/icons";
   <Icon name="CircleCarretRight">
     <CircleCarretRight />
   </Icon>
+  <Icon name="CircleCarretRight">
+    <Clock />
+  </Icon>
   <Icon name="Fingerprint">
     <Fingerprint />
   </Icon>
diff --git a/internal/clickhouse/src/logs-timeseries.test.ts b/internal/clickhouse/src/logs-timeseries.test.ts
index d79e0b3fd1..15647aad3b 100644
--- a/internal/clickhouse/src/logs-timeseries.test.ts
+++ b/internal/clickhouse/src/logs-timeseries.test.ts
@@ -67,7 +67,10 @@ describe.each([10, 100, 1_000, 10_000, 100_000])("with %i requests", (n) => {
       // For per minute granularity
       const minutely = await ch.api.timeseries.perMinute({
         workspaceId,
-        responseStatus: [],
+        statusCodes: [],
+        paths: [],
+        hosts: [],
+        methods: [],
         startTime: new Date(Date.now() - 24 * 60 * 60 * 1000).getTime(), // 24 hours ago
         endTime: Date.now(),
       });
@@ -77,7 +80,10 @@ describe.each([10, 100, 1_000, 10_000, 100_000])("with %i requests", (n) => {
       // For per hour granularity
       const hourly = await ch.api.timeseries.perHour({
         workspaceId,
-        responseStatus: [],
+        statusCodes: [],
+        paths: [],
+        hosts: [],
+        methods: [],
         startTime: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).getTime(), // 7 days ago
         endTime: Date.now(),
       });
@@ -87,7 +93,10 @@ describe.each([10, 100, 1_000, 10_000, 100_000])("with %i requests", (n) => {
       // For per day granularity
       const daily = await ch.api.timeseries.perDay({
         workspaceId,
-        responseStatus: [],
+        statusCodes: [],
+        paths: [],
+        hosts: [],
+        methods: [],
         startTime: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).getTime(), // 30 days ago
         endTime: Date.now(),
       });
diff --git a/internal/clickhouse/src/logs.ts b/internal/clickhouse/src/logs.ts
index a5e41f0f4c..645cff9713 100644
--- a/internal/clickhouse/src/logs.ts
+++ b/internal/clickhouse/src/logs.ts
@@ -7,12 +7,22 @@ export const getLogsClickhousePayload = z.object({
   limit: z.number().int(),
   startTime: z.number().int(),
   endTime: z.number().int(),
-  path: z.string().optional().nullable(),
-  host: z.string().optional().nullable(),
-  requestId: z.string().optional().nullable(),
-  method: z.string().optional().nullable(),
-  responseStatus: z.array(z.number().int()).nullable(),
+  paths: z
+    .array(
+      z.object({
+        operator: z.enum(["is", "startsWith", "endsWith", "contains"]),
+        value: z.string(),
+      }),
+    )
+    .nullable(),
+  hosts: z.array(z.string()).nullable(),
+  methods: z.array(z.string()).nullable(),
+  requestIds: z.array(z.string()).nullable(),
+  statusCodes: z.array(z.number().int()).nullable(),
+  cursorTime: z.number().int().nullable(),
+  cursorRequestId: z.string().nullable(),
 });
+
 export const log = z.object({
   request_id: z.string(),
   time: z.number().int(),
@@ -34,79 +44,121 @@ export type GetLogsClickhousePayload = z.infer<typeof getLogsClickhousePayload>;
 
 export function getLogs(ch: Querier) {
   return async (args: GetLogsClickhousePayload) => {
+    // Generate dynamic path conditions
+    const pathConditions =
+      args.paths
+        ?.map((p) => {
+          switch (p.operator) {
+            case "is":
+              return `path = '${p.value}'`;
+            case "startsWith":
+              return `startsWith(path, '${p.value}')`;
+            case "endsWith":
+              return `endsWith(path, '${p.value}')`;
+            case "contains":
+              return `like(path, '%${p.value}%')`;
+            default:
+              return null;
+          }
+        })
+        .filter(Boolean)
+        .join(" OR ") || "TRUE";
+
     const query = ch.query({
       query: `
-    SELECT
-      request_id,
-      time,
-      workspace_id,
-      host,
-      method,
-      path,
-      request_headers,
-      request_body,
-      response_status,
-      response_headers,
-      response_body,
-      error,
-      service_latency
-    FROM metrics.raw_api_requests_v1
-        WHERE workspace_id = {workspaceId: String}
-        AND time BETWEEN {startTime: UInt64} AND {endTime: UInt64}
-        AND (CASE
-                WHEN {host: String} != '' THEN host = {host: String}
-                ELSE TRUE
-            END)
-        AND (CASE
-                WHEN {requestId: String} != '' THEN request_id = {requestId: String}
+        WITH filtered_requests AS (
+          SELECT *
+          FROM metrics.raw_api_requests_v1
+          WHERE workspace_id = {workspaceId: String}
+            AND time BETWEEN {startTime: UInt64} AND {endTime: UInt64}
+            
+            ---------- Apply request ID filter if present (highest priority)
+            AND (
+              CASE
+                WHEN length({requestIds: Array(String)}) > 0 THEN 
+                  request_id IN {requestIds: Array(String)}
                 ELSE TRUE
-            END)
-        AND (CASE
-                WHEN {method: String} != '' THEN method = {method: String}
+              END
+            )
+            
+            ---------- Apply host filter
+            AND (
+              CASE
+                WHEN length({hosts: Array(String)}) > 0 THEN 
+                  host IN {hosts: Array(String)}
                 ELSE TRUE
-            END)
-        AND (CASE
-                WHEN {path: String} != '' THEN path = {path: String}
+              END
+            )
+            
+            ---------- Apply method filter
+            AND (
+              CASE
+                WHEN length({methods: Array(String)}) > 0 THEN 
+                  method IN {methods: Array(String)}
                 ELSE TRUE
-            END)
-        AND (CASE
-                WHEN {responseStatus: Array(UInt16)} IS NOT NULL AND length({responseStatus: Array(UInt16)}) > 0 THEN
-                    response_status IN (
-                        SELECT status
-                        FROM (
-                            SELECT
-                                multiIf(
-                                    code = 200, arrayJoin(range(200, 300)),
-                                    code = 400, arrayJoin(range(400, 500)),
-                                    code = 500, arrayJoin(range(500, 600)),
-                                    code
-                                ) as status
-                            FROM (
-                                SELECT arrayJoin({responseStatus: Array(UInt16)}) as code
-                            )
-                        )
+              END
+            )
+            
+            ---------- Apply path filter using pre-generated conditions
+            AND (${pathConditions})
+            
+            ---------- Apply status code filter
+            AND (
+              CASE
+                WHEN length({statusCodes: Array(UInt16)}) > 0 THEN
+                  response_status IN (
+                    SELECT status
+                    FROM (
+                      SELECT multiIf(
+                        code = 200, arrayJoin(range(200, 300)),
+                        code = 400, arrayJoin(range(400, 500)),
+                        code = 500, arrayJoin(range(500, 600)),
+                        code
+                      ) as status
+                      FROM (
+                        SELECT arrayJoin({statusCodes: Array(UInt16)}) as code
+                      )
                     )
+                  )
+                ELSE TRUE
+              END
+            )
+            
+            -- Apply cursor pagination last
+            AND (
+              CASE
+                WHEN {cursorTime: Nullable(UInt64)} IS NOT NULL 
+                  AND {cursorRequestId: Nullable(String)} IS NOT NULL
+                THEN (time, request_id) < (
+                  {cursorTime: Nullable(UInt64)}, 
+                  {cursorRequestId: Nullable(String)}
+                )
                 ELSE TRUE
-            END)
-    ORDER BY time DESC
-    LIMIT {limit: Int}`,
+              END
+            )
+        )
+        
+        SELECT
+          request_id,
+          time,
+          workspace_id,
+          host,
+          method,
+          path,
+          request_headers,
+          request_body,
+          response_status,
+          response_headers,
+          response_body,
+          error,
+          service_latency
+        FROM filtered_requests
+        ORDER BY time DESC, request_id DESC
+        LIMIT {limit: Int}`,
       params: getLogsClickhousePayload,
-      schema: z.object({
-        request_id: z.string(),
-        time: z.number().int(),
-        workspace_id: z.string(),
-        host: z.string(),
-        method: z.string(),
-        path: z.string(),
-        request_headers: z.array(z.string()),
-        request_body: z.string(),
-        response_status: z.number().int(),
-        response_headers: z.array(z.string()),
-        response_body: z.string(),
-        error: z.string(),
-        service_latency: z.number().int(),
-      }),
+      schema: log,
     });
+
     return query(args);
   };
 }
@@ -115,10 +167,17 @@ export const logsTimeseriesParams = z.object({
   workspaceId: z.string(),
   startTime: z.number().int(),
   endTime: z.number().int(),
-  path: z.string().optional().nullable(),
-  host: z.string().optional().nullable(),
-  method: z.string().optional().nullable(),
-  responseStatus: z.array(z.number().int()).nullable(),
+  paths: z
+    .array(
+      z.object({
+        operator: z.enum(["is", "startsWith", "endsWith", "contains"]),
+        value: z.string(),
+      }),
+    )
+    .nullable(),
+  hosts: z.array(z.string()).nullable(),
+  methods: z.array(z.string()).nullable(),
+  statusCodes: z.array(z.number().int()).nullable(),
 });
 
 export const logsTimeseriesDataPoint = z.object({
@@ -184,35 +243,57 @@ function getLogsTimeseriesWhereClause(
 ): string {
   const conditions = [
     "workspace_id = {workspaceId: String}",
+    // Host filter
+    `(CASE
+        WHEN length({hosts: Array(String)}) > 0 THEN 
+          host IN {hosts: Array(String)}
+        ELSE TRUE
+      END)`,
+    // Method filter
+    `(CASE
+        WHEN length({methods: Array(String)}) > 0 THEN 
+          method IN {methods: Array(String)}
+        ELSE TRUE
+      END)`,
+    // Status code filter
     `(CASE 
-        WHEN {responseStatus: Array(UInt16)} IS NOT NULL AND length({responseStatus: Array(UInt16)}) > 0 
-        THEN response_status IN (
-          SELECT status 
-          FROM (
-            SELECT multiIf(
-              code = 200, arrayJoin(range(200, 300)),
-              code = 400, arrayJoin(range(400, 500)),
-              code = 500, arrayJoin(range(500, 600)),
-              code
-            ) as status 
+        WHEN length({statusCodes: Array(UInt16)}) > 0 THEN
+          response_status IN (
+            SELECT status 
             FROM (
-              SELECT arrayJoin({responseStatus: Array(UInt16)}) as code
+              SELECT multiIf(
+                code = 200, arrayJoin(range(200, 300)),
+                code = 400, arrayJoin(range(400, 500)),
+                code = 500, arrayJoin(range(500, 600)),
+                code
+              ) as status 
+              FROM (
+                SELECT arrayJoin({statusCodes: Array(UInt16)}) as code
+              )
             )
-          )
-        ) 
+          ) 
         ELSE TRUE 
       END)`,
     ...additionalConditions,
   ];
 
-  if (params.path) {
-    conditions.push("path = {path: String}");
-  }
-  if (params.host) {
-    conditions.push("host = {host: String}");
-  }
-  if (params.method) {
-    conditions.push("method = {method: String}");
+  // Path filter with operators
+  if (params.paths?.length) {
+    const pathConditions = params.paths
+      .map((p) => {
+        switch (p.operator) {
+          case "is":
+            return `path = '${p.value}'`;
+          case "startsWith":
+            return `startsWith(path, '${p.value}')`;
+          case "endsWith":
+            return `endsWith(path, '${p.value}')`;
+          case "contains":
+            return `like(path, '%${p.value}%')`;
+        }
+      })
+      .join(" OR ");
+    conditions.push(`(${pathConditions})`);
   }
 
   return conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
diff --git a/internal/icons/src/icons/clock.tsx b/internal/icons/src/icons/clock.tsx
new file mode 100644
index 0000000000..f578db8c69
--- /dev/null
+++ b/internal/icons/src/icons/clock.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright © Nucleo
+ * Version 1.3, January 3, 2024
+ * Nucleo Icons
+ * https://nucleoapp.com/
+ * - Redistribution of icons is prohibited.
+ * - Icons are restricted for use only within the product they are bundled with.
+ *
+ * For more details:
+ * https://nucleoapp.com/license
+ */
+
+import type React from "react";
+import type { IconProps } from "../props";
+
+export const Clock: React.FC<IconProps> = (props) => {
+  return (
+    <svg
+      className={props.className}
+      height="12"
+      width="12"
+      viewBox="0 0 12 12"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill="currentColor">
+        <circle
+          cx="6"
+          cy="6"
+          fill="none"
+          r="5.25"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          d="m6,3.25v2.75l2,1.75"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+      </g>
+    </svg>
+  );
+};
diff --git a/internal/icons/src/index.ts b/internal/icons/src/index.ts
index 133754281f..f3608249f9 100644
--- a/internal/icons/src/index.ts
+++ b/internal/icons/src/index.ts
@@ -11,6 +11,7 @@ export * from "./icons/chevron-right";
 export * from "./icons/circle-carret-right";
 export * from "./icons/circle-info-sparkle";
 export * from "./icons/circle-info-sparkle";
+export * from "./icons/clock";
 export * from "./icons/fingerprint";
 export * from "./icons/gauge";
 export * from "./icons/gear";
diff --git a/internal/ui/src/components/date-time/components/actions.tsx b/internal/ui/src/components/date-time/components/actions.tsx
index 5599ee5c53..4beb190bae 100644
--- a/internal/ui/src/components/date-time/components/actions.tsx
+++ b/internal/ui/src/components/date-time/components/actions.tsx
@@ -10,11 +10,7 @@ type ActionProps = {
 
 const DateTimeActions: React.FC<ActionProps> = ({ className, children }) => {
   return (
-    <div
-      className={cn("w-full h-full flex items-center justify-center gap-4 mt-2 px-1", className)}
-    >
-      {children}
-    </div>
+    <div className={cn("w-full flex items-center justify-center pb-2", className)}>{children}</div>
   );
 };
 export { DateTimeActions };
diff --git a/internal/ui/src/components/date-time/components/calendar.tsx b/internal/ui/src/components/date-time/components/calendar.tsx
index 934ac2a377..083f211cf5 100644
--- a/internal/ui/src/components/date-time/components/calendar.tsx
+++ b/internal/ui/src/components/date-time/components/calendar.tsx
@@ -1,63 +1,62 @@
-// biome-ignore lint: React in this context is used throughout, so biome will change to types because no APIs are used even though React is needed.
-import React, { useState } from "react";
-import { buttonVariants } from "../../button";
-import {
-  type DateRange,
-  DayPicker,
-  IconLeft,
-  IconRight,
-  type CaptionProps,
-  useNavigation,
-} from "react-day-picker";
+import { ChevronLeft, ChevronRight } from "@unkey/icons";
+import { format } from "date-fns";
+import { useState } from "react";
+import { type CaptionProps, type DateRange, DayPicker, useNavigation } from "react-day-picker";
 import { cn } from "../../../lib/utils";
-import { format, sub } from "date-fns";
+import { buttonVariants } from "../../button";
 import { useDateTimeContext } from "../date-time";
 
 function CustomCaptionComponent(props: CaptionProps) {
   const { goToMonth, nextMonth, previousMonth } = useNavigation();
   return (
-    <div className="flex flex-row w-full bg-transparent px-2">
+    <div className="flex bg-transparent mb-3.5">
       <button
+        className="flex min-w-6 min-h-6 justify-center items-center"
         type="button"
         disabled={!previousMonth}
         onClick={() => previousMonth && goToMonth(previousMonth)}
       >
-        <IconLeft className="text-gray-12 size-2" />
+        <ChevronLeft className="text-gray-12 size-3" />
       </button>
-      <div className="w-full text-center text-gray-12 text-xs">
+      <div className="flex w-full text-gray-12 justify-center items-center font-medium calendar-header">
         {format(props.displayMonth, "MMMM yyy")}
       </div>
-      <button type="button" disabled={!nextMonth} onClick={() => nextMonth && goToMonth(nextMonth)}>
-        <IconRight className="text-gray-12 size-2" />
+      <button
+        className="flex min-w-6 min-h-6 justify-center items-center"
+        type="button"
+        disabled={!nextMonth}
+        onClick={() => nextMonth && goToMonth(nextMonth)}
+      >
+        <ChevronRight className="text-gray-12 size-3" />
       </button>
     </div>
   );
 }
 
 const styleClassNames = {
-  root: "flex justify-center p-0 m-0",
-  tbody: "flex flex-col bg-transparent gap-y-2 w-full text-gray-12 mt-2",
-  months: "flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 mt-0 pt-0",
-  month: "w-full p-0 mt-0",
-  caption: "flex justify-between px-2 relative items-center",
+  root: "flex w-full justify-center p-0 m-0",
+  tbody: "flex flex-col w-full bg-transparent w-full text-gray-12 gap-3.5 mt-3",
+  months: "flex flex-col w-full sm:flex-row sm:space-x-4 sm:space-y-0",
+  month: "w-full p-0 mt-0 ",
+  caption: "flex justify-between relative items-center",
   caption_label: "text-sm font-medium",
-  nav: "flex items-center my-0 py-0",
+  nav: "flex items-center",
   nav_button: cn(
     buttonVariants({ variant: "default" }),
     "h-7 w-7 opacity-50 hover:opacity-100 flex justify-center items-center",
   ),
   nav_button_previous: "absolute left-1",
   nav_button_next: "absolute right-1",
-  table: "w-full bg-transparent border-none m-0 pt-2",
-  head_row: "flex border-none h-8 mt-0 pt-0 gap-1.5",
-  head_cell: "w-8 h-8 font-normal text-xs text-gray-8 bg-transparent border-none",
-  row: "flex w-full border-none gap-1.5",
-  cell: "border-none h-8 w-8 text-center rounded rounded-md text-sm p-0 relative [&:has([aria-selected].day-outside)]:bg-gray-4 [&:has([aria-selected])]:bg-gray-4  focus-within:relative focus-within:z-20",
+  table: "w-full bg-transparent border-none m-0 p-0 ",
+  head_row:
+    "flex flex-start w-full border-none h-8 mx-0 px-0 pt-2 gap-3 justify-center items-center",
+  head_cell: "w-8 h-8 font-normal text-xs text-gray-8 bg-transparent border-none ",
+  row: "flex w-full border-none justify-between ",
+  cell: "border-none h-8 w-8 text-center text-gray-12 rounded rounded-3 text-sm p-0 relative [&:has([aria-selected].day-outside)]:bg-gray-4 [&:has([aria-selected])]:bg-gray-4 focus-within:relative focus-within:z-20",
   day: cn(
     buttonVariants({ variant: "ghost" }),
-    "h-8 w-8 p-0 font-normal aria-selected:opacity-100 text-[13px] flex items-center justify-center hover:bg-gray-3",
+    "h-8 w-8 p-0 font-normal aria-selected:opacity-100 text-[13px] flex items-center justify-center hover:bg-gray-3 text-gray-12 rounded rounded-3",
   ),
-
   day_range_start: "hover:bg-gray-3 focus:bg-gray-5 text-gray-12",
   day_range_middle: "",
   day_range_end: "hover:bg-gray-2 focus:bg-gray-3 focus:text-gray-12",
@@ -72,61 +71,96 @@ const styleClassNames = {
 type CalendarProps = {
   className?: string;
   classNames?: Record<string, string>;
-  mode?: "single" | "range";
+  mode: "single" | "range";
   showOutsideDays?: boolean;
 };
 
-const Calendar: React.FC<CalendarProps> = ({
+export const Calendar = ({
   className,
   classNames,
   mode,
   showOutsideDays = true,
   ...props
-}) => {
+}: CalendarProps) => {
   const { date, onDateChange, minDateRange, maxDateRange } = useDateTimeContext();
-  const today = new Date();
   const [singleDay, setSingleDay] = useState<Date | undefined>(date?.from);
-  const handleChange = (newDate: DateRange) => {
+
+  const handleChange = (newDate: DateRange | undefined) => {
+    //  No date selected (user cleared the selection)
+    if (!newDate) {
+      onDateChange({ from: undefined, to: undefined });
+      return;
+    }
+
+    //  End date was moved later than current end date
+    // This resets the "from" date while keeping the new "to" date
+    if (
+      date?.from &&
+      date?.to &&
+      newDate?.to instanceof Date &&
+      newDate.to.getTime() > date.to.getTime()
+    ) {
+      onDateChange({ from: undefined, to: newDate.to });
+      return;
+    }
+
+    // User clicked on either boundary of existing range
+    // This resets the entire range when clicking on start or end date
+    if (
+      date?.from &&
+      date?.to &&
+      (newDate.from?.getTime() === date.from.getTime() ||
+        newDate.from?.getTime() === date.to.getTime())
+    ) {
+      onDateChange({ from: undefined, to: undefined });
+      return;
+    }
+
+    // Update with the new date range as is
     onDateChange(newDate);
   };
+
   const handleSingleChange = (newDate: Date | undefined) => {
+    if (singleDay && newDate && singleDay.getTime() === newDate.getTime()) {
+      setSingleDay(undefined);
+      onDateChange({ from: undefined, to: undefined });
+      return;
+    }
     onDateChange({ from: newDate, to: undefined });
     setSingleDay(newDate);
   };
-  return mode === "range" ? (
-    <DayPicker
-      mode={mode}
-      disabled={{ before: minDateRange ?? sub(today, { years: 1 }), after: maxDateRange ?? today }}
-      selected={date}
-      onSelect={(range: DateRange | undefined) => (range ? handleChange(range) : undefined)}
-      showOutsideDays={showOutsideDays}
-      className={cn("", className)}
-      classNames={{
-        ...styleClassNames,
-        ...classNames,
-      }}
-      components={{
-        Caption: CustomCaptionComponent,
-      }}
-      {...props}
-    />
-  ) : (
+
+  const commonProps = {
+    disabled: minDateRange && { before: minDateRange, after: maxDateRange },
+    showOutsideDays,
+    className: cn("", className),
+    classNames: {
+      ...styleClassNames,
+      ...classNames,
+    },
+    components: {
+      Caption: CustomCaptionComponent,
+    },
+    ...props,
+  };
+
+  if (mode === "range") {
+    return (
+      <DayPicker
+        {...commonProps}
+        mode="range"
+        selected={date}
+        onSelect={(date: DateRange | undefined) => (date ? handleChange(date) : undefined)}
+      />
+    );
+  }
+
+  return (
     <DayPicker
+      {...commonProps}
       mode="single"
-      disabled={{ before: minDateRange ?? sub(today, { years: 1 }), after: maxDateRange ?? today }}
       selected={singleDay}
-      onDayClick={(day: Date | undefined) => handleSingleChange(day)}
-      showOutsideDays={showOutsideDays}
-      className={cn("", className)}
-      classNames={{
-        ...styleClassNames,
-        ...classNames,
-      }}
-      components={{
-        Caption: CustomCaptionComponent,
-      }}
-      {...props}
+      onSelect={(date: Date | undefined) => handleSingleChange(date)}
     />
   );
 };
-export { Calendar };
diff --git a/internal/ui/src/components/date-time/components/time-split.tsx b/internal/ui/src/components/date-time/components/time-split.tsx
index a8d99033e0..f66e847a6f 100644
--- a/internal/ui/src/components/date-time/components/time-split.tsx
+++ b/internal/ui/src/components/date-time/components/time-split.tsx
@@ -1,6 +1,6 @@
 import { format } from "date-fns";
 
-import { TimeClock } from "@unkey/icons";
+import { Clock } from "@unkey/icons";
 import { useState } from "react";
 // biome-ignore lint: React in this context is used throughout, so biome will change to types because no APIs are used even though React is needed.
 import * as React from "react";
@@ -29,7 +29,7 @@ const MAX_VALUES = {
 const TimeSplitInput: React.FC<TimeSplitInputProps> = ({ type }) => {
   const { startTime, endTime, date, onStartTimeChange, onEndTimeChange } = useDateTimeContext();
   const [focus, setFocus] = useState(false);
-  const [time, setTime] = useState<TimeUnit>({ HH: "00", mm: "00", ss: "00" });
+  const [time, setTime] = useState<TimeUnit>(type === "start" ? startTime : endTime);
 
   const normalizeTimeUnit = (time: TimeUnit): TimeUnit => ({
     HH: time.HH.padStart(2, "0") || "00",
@@ -103,21 +103,22 @@ const TimeSplitInput: React.FC<TimeSplitInputProps> = ({ type }) => {
   };
 
   const inputClassNames = `
-    w-4 p-0 
-    border-none bg-transparent
-    text-xs text-center text-foreground
+    w-5
+    bg-transparent
     outline-none ring-0 focus:ring-0
+    text-center
+    text-gray-12 leading-6 tracking-normal font-medium text-[13px]
   `;
 
-  const renderTimeInput = (field: TimeField, ariaLabel: string) => (
+  const TimeInput: React.FC<{ field: TimeField; ariaLabel: string }> = (props): JSX.Element => (
     <input
       type="text"
-      value={time[field]}
-      onChange={(e) => handleChange(e.target.value, field)}
-      onBlur={(e) => handleBlur(e.target.value, field)}
+      value={time[props.field]}
+      onChange={(e) => handleChange(e.target.value, props.field)}
+      onBlur={(e) => handleBlur(e.target.value, props.field)}
       onFocus={handleFocus}
       placeholder="00"
-      aria-label={ariaLabel}
+      aria-label={props.ariaLabel}
       className={inputClassNames}
     />
   );
@@ -125,19 +126,17 @@ const TimeSplitInput: React.FC<TimeSplitInputProps> = ({ type }) => {
   return (
     <div
       className={cn(
-        "flex h-7 w-fit items-center justify-center px-4 gap-0 rounded border border-[1px] border-gray-4 text-xs text-gray-12",
-        focus ? "border-[1.5px] border-gray-10" : "",
+        "flex h-8 w-full items-center rounded rounded-3 border-[1px]  bg-gray-2 text-gray-12",
+        focus ? " border-gray-10" : "border-gray-4",
       )}
     >
-      <div className="text-gray-9 mr-2">
-        <TimeClock className="size-3 stroke-1.5" />
-      </div>
-      {renderTimeInput("HH", "Hours")}
-      <span className="text-gray-12">:</span>
-      {renderTimeInput("mm", "Minutes")}
-      <span className="text-gray-12">:</span>
-      {renderTimeInput("ss", "Seconds")}
-      <span className="text-gray-12"> </span>
+      <Clock className="text-gray-9 m-3 " />
+      <TimeInput field="HH" ariaLabel="Hours" />
+      <span className="text-gray-12 leading-6 tracking-normal font-medium text-[13px]">:</span>
+      <TimeInput field="mm" ariaLabel="Minutes" />
+      <span className="text-gray-12 leading-6 font-medium text-[13px]">:</span>
+      <TimeInput field="ss" ariaLabel="Seconds" />
+      <span className="text-gray-12 leading-6 font-medium text-[13px]"> </span>
       {/* AM/PM and timezone still needs to be implemented */}
       {/* {renderTimeInput("")} */}
     </div>
@@ -151,7 +150,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({ type, className }) => {
   return (
     <div
       className={cn(
-        "w-full h-full flex flex-row items-center justify-center gap-4 mt-2 px-1",
+        "w-full h-full flex flex-row items-center justify-center gap-2 mt-1",
         className,
       )}
     >
diff --git a/internal/ui/src/components/date-time/date-time.tsx b/internal/ui/src/components/date-time/date-time.tsx
index f12e9cd07b..69bff7490f 100644
--- a/internal/ui/src/components/date-time/date-time.tsx
+++ b/internal/ui/src/components/date-time/date-time.tsx
@@ -35,19 +35,40 @@ const useDateTimeContext = () => {
   return context;
 };
 
-// Root Component
 type DateTimeRootProps = {
   children: React.ReactNode;
   className?: string;
   minDate?: Date;
   maxDate?: Date;
+  initialRange?: DateRange;
   onChange: (date?: DateRange, start?: TimeUnit, end?: TimeUnit) => void;
 };
 
-function DateTime({ children, className, onChange }: DateTimeRootProps) {
-  const [date, setDate] = useState<DateRange>();
-  const [startTime, setStartTime] = useState<TimeUnit>({ HH: "00", mm: "00", ss: "00" });
-  const [endTime, setEndTime] = useState<TimeUnit>({ HH: "00", mm: "00", ss: "00" });
+function DateTime({ children, className, onChange, initialRange }: DateTimeRootProps) {
+  const [date, setDate] = useState<DateRange | undefined>(initialRange);
+
+  // Initialize time states based on initialRange dates if provided
+  const [startTime, setStartTime] = useState<TimeUnit>(() => {
+    if (initialRange?.from) {
+      return {
+        HH: initialRange.from.getHours().toString().padStart(2, "0"),
+        mm: initialRange.from.getMinutes().toString().padStart(2, "0"),
+        ss: initialRange.from.getSeconds().toString().padStart(2, "0"),
+      };
+    }
+    return { HH: "00", mm: "00", ss: "00" };
+  });
+
+  const [endTime, setEndTime] = useState<TimeUnit>(() => {
+    if (initialRange?.to) {
+      return {
+        HH: initialRange.to.getHours().toString().padStart(2, "0"),
+        mm: initialRange.to.getMinutes().toString().padStart(2, "0"),
+        ss: initialRange.to.getSeconds().toString().padStart(2, "0"),
+      };
+    }
+    return { HH: "23", mm: "59", ss: "59" };
+  });
 
   const handleDateChange = (newRange: DateRange) => {
     setDate(newRange);
@@ -65,27 +86,26 @@ function DateTime({ children, className, onChange }: DateTimeRootProps) {
   };
 
   return (
-    <div className={`flex flex-col justify-center items-center w-fit gap-3 ${className}`}>
-      <DateTimeContext.Provider
-        value={{
-          date,
-          startTime,
-          endTime,
-          onDateChange: handleDateChange,
-          onStartTimeChange: handleStartTimeChange,
-          onEndTimeChange: handleEndTimeChange,
-        }}
-      >
+    <DateTimeContext.Provider
+      value={{
+        date,
+        startTime,
+        endTime,
+        onDateChange: handleDateChange,
+        onStartTimeChange: handleStartTimeChange,
+        onEndTimeChange: handleEndTimeChange,
+      }}
+    >
+      <div className={`flex flex-col w-80 justify-center items-center ${className}`}>
         {children}
-      </DateTimeContext.Provider>
-    </div>
+      </div>
+    </DateTimeContext.Provider>
   );
 }
 
 DateTime.displayName = "DateTime.root";
 
 DateTime.Calendar = Calendar;
-DateTime.Calendar.displayName = "DateTime.Calendar";
 
 DateTime.TimeInput = TimeInput;
 DateTime.TimeInput.displayName = "DateTime.TimeInput";
diff --git a/internal/ui/src/components/empty.tsx b/internal/ui/src/components/empty.tsx
index 1b0bcc3330..394f3b2b5b 100644
--- a/internal/ui/src/components/empty.tsx
+++ b/internal/ui/src/components/empty.tsx
@@ -17,10 +17,12 @@ export function Empty({ className, children, ...props }: EmptyRootProps) {
   );
 }
 
-Empty.Icon = function EmptyIcon() {
+type EmptyIconProps = React.HTMLAttributes<HTMLDivElement>;
+
+Empty.Icon = function EmptyIcon({ className }: EmptyIconProps) {
   return (
-    <div className="flex h-28 w-28 justify-center items-center ">
-      <div className="relative z-10 ">
+    <div className={cn("flex h-28 w-28 justify-center items-center", className)}>
+      <div className="relative z-10">
         <div className="absolute top-0 left-1/2 -translate-x-1/2 bg-gradient-to-r from-[hsla(240,100%,17%,0.01)] via-[hsla(240,100%,10%,0.06)] to-[hsla(240,100%,17%,0.01)] dark:from-[hsla(0,0%,0%,0)] dark:via-[hsla(211,66%,92%,0.3)] dark:to-[hsla(0,0%,0%,0)] w-32 h-[1px] " />
         <div className="absolute bottom-0 left-1/2 -translate-x-1/2 bg-gradient-to-r from-[hsla(240,100%,17%,0.01)] via-[hsla(240,100%,10%,0.06)] to-[hsla(240,100%,17%,0.01)] dark:from-[hsla(0,0%,0%,0)] dark:via-[hsla(211,66%,92%,0.3)] dark:to-[hsla(0,0%,0%,0)] w-32 h-[1px]  " />
         <div className="absolute left-0 top-1/2 -translate-y-1/2 h-32 bg-gradient-to-t from-[hsla(240,100%,17%,0.01)] via-[hsla(240,100%,10%,0.06)] to-[hsla(240,100%,17%,0.01)] dark:from-[hsla(0,0%,0%,0)] dark:via-[hsla(211,66%,92%,0.3)] dark:to-[hsla(0,0%,0%,0)] w-[1px]" />
@@ -118,10 +120,7 @@ type EmptyActionsProps = React.HTMLAttributes<HTMLDivElement>;
 
 Empty.Actions = function EmptyActions({ className, children, ...props }: EmptyActionsProps) {
   return (
-    <div
-      className={cn("w-full h-full flex items-center justify-center gap-4 mt-2", className)}
-      {...props}
-    >
+    <div className={cn("w-full flex items-center justify-center gap-4 mt-2", className)} {...props}>
       {children}
     </div>
   );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0700376466..c1f8283b54 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,7 +55,7 @@ importers:
         version: 5.5.3
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
 
   apps/agent: {}
 
@@ -145,7 +145,7 @@ importers:
         version: 5.5.3
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
       wrangler:
         specifier: ^3.92.0
         version: 3.92.0(@cloudflare/workers-types@4.20240603.0)
@@ -535,6 +535,12 @@ importers:
       '@tailwindcss/aspect-ratio':
         specifier: ^0.4.2
         version: 0.4.2(tailwindcss@3.4.15)
+      '@testing-library/react':
+        specifier: ^16.2.0
+        version: 16.2.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
+      '@testing-library/react-hooks':
+        specifier: ^8.0.1
+        version: 8.0.1(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
       '@types/d3-array':
         specifier: ^3.2.1
         version: 3.2.1
@@ -550,6 +556,12 @@ importers:
       '@types/react-dom':
         specifier: 18.3.0
         version: 18.3.0
+      jsdom:
+        specifier: ^26.0.0
+        version: 26.0.0
+      vitest:
+        specifier: ^1.6.0
+        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
 
   apps/docs:
     dependencies:
@@ -1027,7 +1039,7 @@ importers:
         version: 5.5.3
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
 
   internal/checkly:
     devDependencies:
@@ -1067,7 +1079,7 @@ importers:
         version: 5.5.3
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
 
   internal/db:
     dependencies:
@@ -1113,7 +1125,7 @@ importers:
         version: 5.5.3
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
 
   internal/encryption:
     dependencies:
@@ -1132,7 +1144,7 @@ importers:
         version: 5.5.3
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
 
   internal/events:
     dependencies:
@@ -1157,7 +1169,7 @@ importers:
         version: 5.5.3
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
 
   internal/icons:
     dependencies:
@@ -1189,7 +1201,7 @@ importers:
         version: 5.5.3
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
 
   internal/keys:
     dependencies:
@@ -1450,7 +1462,7 @@ importers:
         version: 5.5.3
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
 
   packages/cache:
     dependencies:
@@ -1484,7 +1496,7 @@ importers:
         version: 5.5.3
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
 
   packages/error:
     dependencies:
@@ -1591,7 +1603,7 @@ importers:
         version: 5.5.3
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+        version: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
 
   tools/k6:
     devDependencies:
@@ -2086,6 +2098,16 @@ packages:
       js-yaml: 4.1.0
     dev: false
 
+  /@asamuzakjp/css-color@2.8.3:
+    resolution: {integrity: sha512-GIc76d9UI1hCvOATjZPyHFmE5qhRccp3/zGfMPapK3jBi+yocEzp6BBB0UnfRYP9NP4FANqUZYb0hnfs3TM3hw==}
+    dependencies:
+      '@csstools/css-calc': 2.1.1(@csstools/css-parser-algorithms@3.0.4)(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-color-parser': 3.0.7(@csstools/css-parser-algorithms@3.0.4)(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+      lru-cache: 10.4.3
+    dev: true
+
   /@asteasolutions/zod-to-openapi@7.3.0(zod@3.23.8):
     resolution: {integrity: sha512-7tE/r1gXwMIvGnXVUdIqUhCU1RevEFC4Jk6Bussa0fk1ecbnnINkZzj1EOAJyE/M3AI25DnHT/zKQL1/FPFi8Q==}
     peerDependencies:
@@ -2695,7 +2717,7 @@ packages:
       esbuild: 0.17.19
       miniflare: 3.20240524.2
       semver: 7.6.3
-      vitest: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+      vitest: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
       wrangler: 3.59.0(@cloudflare/workers-types@4.20240603.0)
       zod: 3.23.8
     transitivePeerDependencies:
@@ -2931,6 +2953,49 @@ packages:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
+  /@csstools/color-helpers@5.0.1:
+    resolution: {integrity: sha512-MKtmkA0BX87PKaO1NFRTFH+UnkgnmySQOvNxJubsadusqPEC2aJ9MOQiMceZJJ6oitUl/i0L6u0M1IrmAOmgBA==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /@csstools/css-calc@2.1.1(@csstools/css-parser-algorithms@3.0.4)(@csstools/css-tokenizer@3.0.3):
+    resolution: {integrity: sha512-rL7kaUnTkL9K+Cvo2pnCieqNpTKgQzy5f+N+5Iuko9HAoasP+xgprVh7KN/MaJVvVL1l0EzQq2MoqBHKSrDrag==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.4
+      '@csstools/css-tokenizer': ^3.0.3
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+    dev: true
+
+  /@csstools/css-color-parser@3.0.7(@csstools/css-parser-algorithms@3.0.4)(@csstools/css-tokenizer@3.0.3):
+    resolution: {integrity: sha512-nkMp2mTICw32uE5NN+EsJ4f5N+IGFeCFu4bGpiKgb2Pq/7J/MpyLBeQ5ry4KKtRFZaYs6sTmcMYrSRIyj5DFKA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.4
+      '@csstools/css-tokenizer': ^3.0.3
+    dependencies:
+      '@csstools/color-helpers': 5.0.1
+      '@csstools/css-calc': 2.1.1(@csstools/css-parser-algorithms@3.0.4)(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+    dev: true
+
+  /@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3):
+    resolution: {integrity: sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.3
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.3
+    dev: true
+
+  /@csstools/css-tokenizer@3.0.3:
+    resolution: {integrity: sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==}
+    engines: {node: '>=18'}
+    dev: true
+
   /@dagger.io/dagger@0.14.0:
     resolution: {integrity: sha512-vPQRo70WzNQU12PGX2dI1yqxPXM0miYnsdu+Jn5UdAJMB1WpyY8pjMe489Bjgg/G5OVmekaeMDGsJYtlSYvbXg==}
     engines: {node: '>=18'}
@@ -10375,6 +10440,66 @@ packages:
       zod: 3.23.8
     dev: false
 
+  /@testing-library/dom@10.4.0:
+    resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
+    engines: {node: '>=18'}
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/runtime': 7.26.0
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      chalk: 4.1.2
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      pretty-format: 27.5.1
+    dev: true
+
+  /@testing-library/react-hooks@8.0.1(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0
+      react: ^16.9.0 || ^17.0.0
+      react-dom: ^16.9.0 || ^17.0.0
+      react-test-renderer: ^16.9.0 || ^17.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react-dom:
+        optional: true
+      react-test-renderer:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@types/react': 18.3.11
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-error-boundary: 3.1.4(react@18.3.1)
+    dev: true
+
+  /@testing-library/react@16.2.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-2cSskAvA1QNtKc8Y9VJQRv0tm3hLVgxRGDB+KYhIaPQJ1I+RHbhIXcM+zClKXzMes/wshsMVzf4B9vS4IZpqDQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@testing-library/dom': 10.4.0
+      '@types/react': 18.3.11
+      '@types/react-dom': 18.3.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: true
+
   /@tootallnate/quickjs-emscripten@0.23.0:
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
     dev: true
@@ -10547,6 +10672,10 @@ packages:
     dependencies:
       '@types/estree': 1.0.6
 
+  /@types/aria-query@5.0.4:
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+    dev: true
+
   /@types/body-parser@1.19.5:
     resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
     dependencies:
@@ -11348,7 +11477,7 @@ packages:
       pathe: 1.1.2
       picocolors: 1.1.1
       sirv: 2.0.4
-      vitest: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)
+      vitest: 1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0)
     dev: true
 
   /@vitest/utils@1.5.3:
@@ -11919,6 +12048,12 @@ packages:
     dependencies:
       tslib: 2.8.1
 
+  /aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+    dependencies:
+      dequal: 2.0.3
+    dev: true
+
   /aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
@@ -13270,6 +13405,14 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  /cssstyle@4.2.1:
+    resolution: {integrity: sha512-9+vem03dMXG7gDmZ62uqmRiMRNtinIZ9ZyuF6BdxzfOD+FdN5hretzynkn0ReS2DO2GSw76RWHs0UmJPI2zUjw==}
+    engines: {node: '>=18'}
+    dependencies:
+      '@asamuzakjp/css-color': 2.8.3
+      rrweb-cssom: 0.8.0
+    dev: true
+
   /csstype@3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
 
@@ -13447,6 +13590,14 @@ packages:
     engines: {node: '>= 14'}
     dev: true
 
+  /data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.1.0
+    dev: true
+
   /data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
     engines: {node: '>= 0.4'}
@@ -13557,6 +13708,10 @@ packages:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
     dev: false
 
+  /decimal.js@10.4.3:
+    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
+    dev: true
+
   /decircular@0.1.1:
     resolution: {integrity: sha512-V2Vy+QYSXdgxRPmOZKQWCDf1KQNTUP/Eqswv/3W20gz7+6GB1HTosNrWqK3PqstVpFw/Dd/cGTmXSTKPeOiGVg==}
     engines: {node: '>=18'}
@@ -13836,6 +13991,10 @@ packages:
       - supports-color
     dev: true
 
+  /dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+    dev: true
+
   /dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
     dependencies:
@@ -16844,6 +17003,13 @@ packages:
       lru-cache: 10.4.3
     dev: true
 
+  /html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+    dependencies:
+      whatwg-encoding: 3.1.1
+    dev: true
+
   /html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
     dev: false
@@ -17396,6 +17562,10 @@ packages:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
 
+  /is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+    dev: true
+
   /is-property@1.0.2:
     resolution: {integrity: sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==}
 
@@ -17694,6 +17864,42 @@ packages:
     resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
     dev: true
 
+  /jsdom@26.0.0:
+    resolution: {integrity: sha512-BZYDGVAIriBWTpIxYzrXjv3E/4u8+/pSG5bQdIYCbNCGOvsPkDQfTVLAIXAf9ETdCpduCVTkDe2NNZ8NIwUVzw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+    dependencies:
+      cssstyle: 4.2.1
+      data-urls: 5.0.0
+      decimal.js: 10.4.3
+      form-data: 4.0.1
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.16
+      parse5: 7.2.1
+      rrweb-cssom: 0.8.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.0
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.1.0
+      ws: 8.18.0
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
   /jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -18195,6 +18401,11 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+    dev: true
+
   /magic-string@0.16.0:
     resolution: {integrity: sha512-c4BEos3y6G2qO0B9X7K0FVLOPT9uGrjYwYRLFmDqyl5YMboUviyecnXWp94fJTSMwPw2/sf+CEYt5AGpmklkkQ==}
     dependencies:
@@ -20122,6 +20333,10 @@ packages:
       next: 14.2.15(@babel/core@7.26.0)(@opentelemetry/api@1.4.1)(react-dom@18.3.1)(react@18.3.1)
     dev: false
 
+  /nwsapi@2.2.16:
+    resolution: {integrity: sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==}
+    dev: true
+
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -20950,6 +21165,15 @@ packages:
     hasBin: true
     dev: false
 
+  /pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+    dev: true
+
   /pretty-format@29.7.0:
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -21403,6 +21627,16 @@ packages:
       - webpack-cli
     dev: false
 
+  /react-error-boundary@3.1.4(react@18.3.1):
+    resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==}
+    engines: {node: '>=10', npm: '>=6'}
+    peerDependencies:
+      react: '>=16.13.1'
+    dependencies:
+      '@babel/runtime': 7.26.0
+      react: 18.3.1
+    dev: true
+
   /react-hook-form@7.51.3(react@18.3.1):
     resolution: {integrity: sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==}
     engines: {node: '>=12.22.0'}
@@ -21424,6 +21658,10 @@ packages:
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  /react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+    dev: true
+
   /react-is@18.1.0:
     resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==}
     dev: false
@@ -22403,6 +22641,10 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+    dev: true
+
   /rss@1.2.2:
     resolution: {integrity: sha512-xUhRTgslHeCBeHAqaWSbOYTydN2f0tAzNXvzh3stjz7QDhQMzdgHf3pfgNIngeytQflrFPfy6axHilTETr6gDg==}
     dependencies:
@@ -22500,6 +22742,13 @@ packages:
     resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
     dev: true
 
+  /saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+    dependencies:
+      xmlchars: 2.2.0
+    dev: true
+
   /scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
     dependencies:
@@ -23590,6 +23839,10 @@ packages:
       vue: 3.5.13(typescript@5.5.3)
     dev: false
 
+  /symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+    dev: true
+
   /tailwind-merge@2.2.0:
     resolution: {integrity: sha512-SqqhhaL0T06SW59+JVNfAqKdqLs0497esifRrZ7jOaefP3o64fdFNDMrAQWZFMxTLJPiHVjRLUywT8uFz1xNWQ==}
     dependencies:
@@ -23896,6 +24149,17 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
+  /tldts-core@6.1.73:
+    resolution: {integrity: sha512-k1g5eX87vxu3g//6XMn62y4qjayu4cYby/PF7Ksnh4F4uUK1Z1ze/mJ4a+y5OjdJ+cXRp+YTInZhH+FGdUWy1w==}
+    dev: true
+
+  /tldts@6.1.73:
+    resolution: {integrity: sha512-/h4bVmuEMm57c2uCiAf1Q9mlQk7cA22m+1Bu0K92vUUtTVT9D4mOFWD9r4WQuTULcG9eeZtNKhLl0Il1LdKGog==}
+    hasBin: true
+    dependencies:
+      tldts-core: 6.1.73
+    dev: true
+
   /tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -23947,6 +24211,13 @@ packages:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
+  /tough-cookie@5.1.0:
+    resolution: {integrity: sha512-rvZUv+7MoBYTiDmFPBrhL7Ujx9Sk+q9wwm22x8c8T5IJaR+Wsyc7TNxbVxo84kZoRJZZMazowFLqpankBEQrGg==}
+    engines: {node: '>=16'}
+    dependencies:
+      tldts: 6.1.73
+    dev: true
+
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
@@ -23956,6 +24227,13 @@ packages:
       punycode: 2.3.1
     dev: true
 
+  /tr46@5.0.0:
+    resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==}
+    engines: {node: '>=18'}
+    dependencies:
+      punycode: 2.3.1
+    dev: true
+
   /traverse@0.6.11:
     resolution: {integrity: sha512-vxXDZg8/+p3gblxB6BhhG5yWVn1kGRlaL8O78UDXc3wRnPizB5g83dcvWV1jpDMIPnjZjOFuxlMmE82XJ4407w==}
     engines: {node: '>= 0.4'}
@@ -24972,7 +25250,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vitest@1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0):
+  /vitest@1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@26.0.0):
     resolution: {integrity: sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -25008,6 +25286,7 @@ packages:
       chai: 4.5.0
       debug: 4.4.0(supports-color@8.1.1)
       execa: 8.0.1
+      jsdom: 26.0.0
       local-pkg: 0.5.1
       magic-string: 0.30.17
       pathe: 1.1.2
@@ -25058,6 +25337,13 @@ packages:
       typescript: 5.5.3
     dev: false
 
+  /w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+    dependencies:
+      xml-name-validator: 5.0.0
+    dev: true
+
   /watchpack@2.4.2:
     resolution: {integrity: sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==}
     engines: {node: '>=10.13.0'}
@@ -25105,6 +25391,11 @@ packages:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
     dev: true
 
+  /webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+    dev: true
+
   /webpack-bundle-analyzer@4.10.1:
     resolution: {integrity: sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==}
     engines: {node: '>= 10.13.0'}
@@ -25176,9 +25467,29 @@ packages:
       - uglify-js
     dev: false
 
+  /whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+    dependencies:
+      iconv-lite: 0.6.3
+    dev: true
+
   /whatwg-fetch@3.6.20:
     resolution: {integrity: sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==}
 
+  /whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /whatwg-url@14.1.0:
+    resolution: {integrity: sha512-jlf/foYIKywAt3x/XWKZ/3rz8OSJPiWktjmk891alJUEjiVxKX9LEO92qH3hv4aJ0mN3MWPvGMCy8jQi95xK4w==}
+    engines: {node: '>=18'}
+    dependencies:
+      tr46: 5.0.0
+      webidl-conversions: 7.0.0
+    dev: true
+
   /whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
     dependencies:
@@ -25541,6 +25852,11 @@ packages:
       utf-8-validate:
         optional: true
 
+  /xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+    dev: true
+
   /xml2js@0.6.2:
     resolution: {integrity: sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==}
     engines: {node: '>=4.0.0'}
@@ -25558,6 +25874,10 @@ packages:
     engines: {node: '>=4.0'}
     dev: true
 
+  /xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+    dev: true
+
   /xmlhttprequest-ssl@2.0.0:
     resolution: {integrity: sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==}
     engines: {node: '>=0.4.0'}