diff --git a/apps/dashboard/app/(app)/apis/[apiId]/actions.ts b/apps/dashboard/app/(app)/apis/[apiId]/actions.ts
new file mode 100644
index 0000000000..d1ecd90355
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/actions.ts
@@ -0,0 +1,66 @@
+import { getOrgId } from "@/lib/auth";
+import { and, db, eq, isNull } from "@/lib/db";
+import { apis } from "@unkey/db/src/schema";
+import { notFound } from "next/navigation";
+
+export type ApiLayoutData = {
+  currentApi: {
+    id: string;
+    name: string;
+    workspaceId: string;
+    keyAuthId: string | null;
+  };
+  workspaceApis: {
+    id: string;
+    name: string;
+  }[];
+};
+
+export const fetchApiAndWorkspaceDataFromDb = async (apiId: string): Promise<ApiLayoutData> => {
+  const orgId = await getOrgId();
+  if (!apiId || !orgId) {
+    console.error("fetchApiLayoutDataFromDb: apiId or orgId is missing");
+    notFound();
+  }
+
+  const currentApi = await db.query.apis.findFirst({
+    where: (table, { and, eq, isNull }) => and(eq(table.id, apiId), isNull(table.deletedAtM)),
+    with: {
+      workspace: {
+        columns: {
+          id: true,
+          orgId: true,
+        },
+      },
+    },
+    columns: {
+      id: true,
+      name: true,
+      workspaceId: true,
+      keyAuthId: true,
+    },
+  });
+
+  if (!currentApi || currentApi.workspace.orgId !== orgId) {
+    console.warn(`DB Validation failed: API ${apiId} not found or org mismatch for org ${orgId}`);
+    notFound();
+  }
+
+  const workspaceId = currentApi.workspaceId;
+
+  const workspaceApis = await db
+    .select({ id: apis.id, name: apis.name })
+    .from(apis)
+    .where(and(eq(apis.workspaceId, workspaceId), isNull(apis.deletedAtM)))
+    .orderBy(apis.name);
+
+  return {
+    currentApi: {
+      id: currentApi.id,
+      name: currentApi.name,
+      workspaceId: currentApi.workspaceId,
+      keyAuthId: currentApi.keyAuthId,
+    },
+    workspaceApis,
+  };
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/api-id-navbar.tsx b/apps/dashboard/app/(app)/apis/[apiId]/api-id-navbar.tsx
index c6fed0b1c4..129eb502f6 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/api-id-navbar.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/api-id-navbar.tsx
@@ -11,6 +11,7 @@ export const ApisNavbar = ({
   api,
   apis,
   activePage,
+  keyId,
 }: {
   api: {
     id: string;
@@ -25,6 +26,7 @@ export const ApisNavbar = ({
     href: string;
     text: string;
   };
+  keyId?: string;
 }) => {
   return (
     <>
@@ -61,6 +63,15 @@ export const ApisNavbar = ({
                   label: "Settings",
                   href: `/apis/${api.id}/settings`,
                 },
+                ...(keyId
+                  ? [
+                      {
+                        id: "settings",
+                        label: `${keyId.substring(0, 8)}...${keyId.substring(keyId.length - 4)}`,
+                        href: `/apis/${api.id}/keys/${api.keyAuthId}/${keyId}`,
+                      },
+                    ]
+                  : []),
               ]}
               shortcutKey="M"
             >
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
index cc24930e64..0fdf0d9568 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
@@ -16,8 +16,9 @@ import { Minus } from "lucide-react";
 import ms from "ms";
 import Link from "next/link";
 import { notFound } from "next/navigation";
+import { fetchApiAndWorkspaceDataFromDb } from "../../../actions";
+import { ApisNavbar } from "../../../api-id-navbar";
 import { RBACButtons } from "./_components/rbac-buttons";
-import { Navigation } from "./navigation";
 import { PermissionList } from "./permission-list";
 import { VerificationTable } from "./verification-table";
 
@@ -72,19 +73,12 @@ export default async function APIKeyDetailPage(props: {
     return notFound();
   }
 
-  const api = await db.query.apis.findFirst({
-    where: (table, { eq, and, isNull }) =>
-      and(eq(table.keyAuthId, key.keyAuthId), isNull(table.deletedAtM)),
-  });
-  if (!api) {
-    return notFound();
-  }
-
+  const { currentApi, workspaceApis } = await fetchApiAndWorkspaceDataFromDb(props.params.apiId);
   const interval = props.searchParams.interval ?? "7d";
 
   const { getVerificationsPerInterval, start, end, granularity } = prepareInterval(interval);
   const query = {
-    workspaceId: api.workspaceId,
+    workspaceId: currentApi.workspaceId,
     keySpaceId: key.keyAuthId,
     keyId: key.id,
     start,
@@ -96,17 +90,18 @@ export default async function APIKeyDetailPage(props: {
       workspaceId: key.workspaceId,
       keySpaceId: key.keyAuthId,
       keyId: key.id,
+      limit: 50,
     }),
     clickhouse.verifications
       .latest({
         workspaceId: key.workspaceId,
         keySpaceId: key.keyAuthId,
         keyId: key.id,
+        limit: 1,
       })
       .then((res) => res.val?.at(0)?.time ?? 0),
   ]);
 
-  // Sort all verifications by time first
   const sortedVerifications = verifications.val!.sort((a, b) => a.time - b.time);
 
   const successOverTime: { x: string; y: number }[] = [];
@@ -117,10 +112,8 @@ export default async function APIKeyDetailPage(props: {
   const expiredOverTime: { x: string; y: number }[] = [];
   const forbiddenOverTime: { x: string; y: number }[] = [];
 
-  // Get all unique timestamps
   const uniqueDates = [...new Set(sortedVerifications.map((d) => d.time))].sort((a, b) => a - b);
 
-  // Ensure each array has entries for all timestamps with zero counts
   for (const timestamp of uniqueDates) {
     const x = new Date(timestamp).toISOString();
     successOverTime.push({ x, y: 0 });
@@ -235,7 +228,15 @@ export default async function APIKeyDetailPage(props: {
 
   return (
     <div>
-      <Navigation api={api} apiKey={key} />
+      <ApisNavbar
+        api={currentApi}
+        activePage={{
+          href: `/apis/${currentApi.id}/keys/${currentApi.keyAuthId}/${key.id}`,
+          text: "Keys",
+        }}
+        keyId={key.id}
+        apis={workspaceApis}
+      />
 
       <PageContent>
         <div className="flex flex-col">
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/control-cloud/index.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/control-cloud/index.tsx
new file mode 100644
index 0000000000..baaf8b3717
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/control-cloud/index.tsx
@@ -0,0 +1,29 @@
+import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants";
+import { ControlCloud } from "@/components/logs/control-cloud";
+import { useFilters } from "../../hooks/use-filters";
+
+const formatFieldName = (field: string): string => {
+  switch (field) {
+    case "names":
+      return "Name";
+    case "identities":
+      return "Identity";
+    case "keyIds":
+      return "Key ID";
+    default:
+      return field.charAt(0).toUpperCase() + field.slice(1);
+  }
+};
+
+export const KeysListControlCloud = () => {
+  const { filters, updateFilters, removeFilter } = useFilters();
+  return (
+    <ControlCloud
+      historicalWindow={HISTORICAL_DATA_WINDOW}
+      formatFieldName={formatFieldName}
+      filters={filters}
+      removeFilter={removeFilter}
+      updateFilters={updateFilters}
+    />
+  );
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/controls/components/logs-filters/index.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/controls/components/logs-filters/index.tsx
new file mode 100644
index 0000000000..f495aa0aa4
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/controls/components/logs-filters/index.tsx
@@ -0,0 +1,128 @@
+import { FiltersPopover } from "@/components/logs/checkbox/filters-popover";
+
+import { FilterOperatorInput } from "@/components/logs/filter-operator-input";
+import { BarsFilter } from "@unkey/icons";
+import { Button } from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
+import { keysListFilterFieldConfig } from "../../../../filters.schema";
+import { useFilters } from "../../../../hooks/use-filters";
+
+export const LogsFilters = () => {
+  const { filters, updateFilters } = useFilters();
+
+  const options = keysListFilterFieldConfig.names.operators.map((op) => ({
+    id: op,
+    label: op,
+  }));
+  const activeNameFilter = filters.find((f) => f.field === "names");
+  const activeIdentityFilter = filters.find((f) => f.field === "identities");
+  const activeKeyIdsFilter = filters.find((f) => f.field === "keyIds");
+  const keyIdOptions = keysListFilterFieldConfig.names.operators.map((op) => ({
+    id: op,
+    label: op,
+  }));
+  return (
+    <FiltersPopover
+      items={[
+        {
+          id: "names",
+          label: "Name",
+          shortcut: "n",
+          component: (
+            <FilterOperatorInput
+              label="Name"
+              options={options}
+              defaultOption={activeNameFilter?.operator}
+              defaultText={activeNameFilter?.value as string}
+              onApply={(id, text) => {
+                const activeFiltersWithoutNames = filters.filter((f) => f.field !== "names");
+                updateFilters([
+                  ...activeFiltersWithoutNames,
+                  {
+                    field: "names",
+                    id: crypto.randomUUID(),
+                    operator: id,
+                    value: text,
+                  },
+                ]);
+              }}
+            />
+          ),
+        },
+        {
+          id: "identities",
+          label: "Identity",
+          shortcut: "i",
+          component: (
+            <FilterOperatorInput
+              label="Identity"
+              options={options}
+              defaultOption={activeIdentityFilter?.operator}
+              defaultText={activeIdentityFilter?.value as string}
+              onApply={(id, text) => {
+                const activeFiltersWithoutNames = filters.filter((f) => f.field !== "identities");
+                updateFilters([
+                  ...activeFiltersWithoutNames,
+                  {
+                    field: "identities",
+                    id: crypto.randomUUID(),
+                    operator: id,
+                    value: text,
+                  },
+                ]);
+              }}
+            />
+          ),
+        },
+        {
+          id: "keyids",
+          label: "Key ID",
+          shortcut: "k",
+          component: (
+            <FilterOperatorInput
+              label="Key ID"
+              options={keyIdOptions}
+              defaultOption={activeKeyIdsFilter?.operator}
+              defaultText={activeKeyIdsFilter?.value as string}
+              onApply={(id, text) => {
+                const activeFiltersWithoutKeyIds = filters.filter((f) => f.field !== "keyIds");
+                updateFilters([
+                  ...activeFiltersWithoutKeyIds,
+                  {
+                    field: "keyIds",
+                    id: crypto.randomUUID(),
+                    operator: id,
+                    value: text,
+                  },
+                ]);
+              }}
+            />
+          ),
+        },
+      ]}
+      activeFilters={filters}
+    >
+      <div className="group">
+        <Button
+          variant="ghost"
+          className={cn(
+            "group-data-[state=open]:bg-gray-4 px-2 rounded-lg",
+            filters.length > 0 ? "bg-gray-4" : "",
+          )}
+          aria-label="Filter logs"
+          aria-haspopup="true"
+          size="md"
+          title="Press 'F' to toggle filters"
+        >
+          <BarsFilter className="text-accent-9 size-4" />
+          <span className="text-accent-12 font-medium text-[13px]">Filter</span>
+          {filters.length > 0 && (
+            <div className="bg-gray-7 rounded h-4 px-1 text-[11px] font-medium text-accent-12 text-center flex items-center justify-center">
+              {filters.length}
+            </div>
+          )}
+        </Button>
+      </div>
+    </FiltersPopover>
+  );
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/controls/components/logs-search/index.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/controls/components/logs-search/index.tsx
new file mode 100644
index 0000000000..9a18da6f29
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/controls/components/logs-search/index.tsx
@@ -0,0 +1,63 @@
+import { LogsLLMSearch } from "@/components/logs/llm-search";
+import { transformStructuredOutputToFilters } from "@/components/logs/validation/utils/transform-structured-output-filter-format";
+import { toast } from "@/components/ui/toaster";
+import { trpc } from "@/lib/trpc/client";
+import { useFilters } from "../../../../hooks/use-filters";
+
+export const LogsSearch = ({ keyspaceId }: { keyspaceId: string }) => {
+  const { filters, updateFilters } = useFilters();
+  const queryLLMForStructuredOutput = trpc.api.keys.listLlmSearch.useMutation({
+    onSuccess(data) {
+      if (data?.filters.length === 0 || !data) {
+        toast.error(
+          "Please provide more specific search criteria. Your query requires additional details for accurate results.",
+          {
+            duration: 8000,
+            important: true,
+            position: "top-right",
+            style: {
+              whiteSpace: "pre-line",
+            },
+          },
+        );
+        return;
+      }
+      const transformedFilters = transformStructuredOutputToFilters(data, filters);
+      updateFilters(transformedFilters as any);
+    },
+    onError(error) {
+      const errorMessage = `Unable to process your search request${
+        error.message ? `: ${error.message}` : "."
+      } Please try again or refine your search criteria.`;
+
+      toast.error(errorMessage, {
+        duration: 8000,
+        important: true,
+        position: "top-right",
+        style: {
+          whiteSpace: "pre-line",
+        },
+        className: "font-medium",
+      });
+    },
+  });
+
+  return (
+    <LogsLLMSearch
+      exampleQueries={[
+        "Find key exactly key_abc123xyz",
+        "Show keys with ID containing 'test'",
+        "Show keys with name 'Temp Key' and ID starting with 'temp_'",
+        "Find keys where identity is 'dev_user' or name contains 'debug'",
+      ]}
+      isLoading={queryLLMForStructuredOutput.isLoading}
+      searchMode="manual"
+      onSearch={(query) =>
+        queryLLMForStructuredOutput.mutateAsync({
+          keyspaceId,
+          query,
+        })
+      }
+    />
+  );
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/controls/index.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/controls/index.tsx
new file mode 100644
index 0000000000..a8c37cdf16
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/controls/index.tsx
@@ -0,0 +1,19 @@
+import { LogsFilters } from "./components/logs-filters";
+import { LogsSearch } from "./components/logs-search";
+
+export function KeysListControls({ keyspaceId }: { keyspaceId: string }) {
+  return (
+    <div className="flex flex-col border-b border-gray-4 ">
+      <div className="px-3 py-1 w-full justify-between flex items-center">
+        <div className="flex gap-2">
+          <div className="flex gap-2 items-center">
+            <LogsSearch keyspaceId={keyspaceId} />
+          </div>
+          <div className="flex gap-2 items-center">
+            <LogsFilters />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/components/outcome-explainer.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/components/outcome-explainer.tsx
new file mode 100644
index 0000000000..6ca2e2488a
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/components/outcome-explainer.tsx
@@ -0,0 +1,152 @@
+import { formatNumber } from "@/lib/fmt";
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
+import { useMemo } from "react";
+import type { ProcessedTimeseriesDataPoint } from "../use-fetch-timeseries";
+
+type OutcomeExplainerProps = {
+  children: React.ReactNode;
+  timeseries: ProcessedTimeseriesDataPoint[];
+};
+
+type ErrorType = {
+  type: string;
+  value: string;
+  color: string;
+};
+
+export function OutcomeExplainer({ children, timeseries }: OutcomeExplainerProps): JSX.Element {
+  // Aggregate all timeseries data for the tooltip
+  const aggregatedData = useMemo(() => {
+    if (!timeseries || timeseries.length === 0) {
+      return {
+        valid: 0,
+        rate_limited: 0,
+        insufficient_permissions: 0,
+        forbidden: 0,
+        disabled: 0,
+        expired: 0,
+        usage_exceeded: 0,
+        total: 0,
+      };
+    }
+
+    return timeseries.reduce(
+      (acc, dataPoint) => {
+        acc.valid += dataPoint.valid || 0;
+        acc.rate_limited += dataPoint.rate_limited || 0;
+        acc.insufficient_permissions += dataPoint.insufficient_permissions || 0;
+        acc.forbidden += dataPoint.forbidden || 0;
+        acc.disabled += dataPoint.disabled || 0;
+        acc.expired += dataPoint.expired || 0;
+        acc.usage_exceeded += dataPoint.usage_exceeded || 0;
+        acc.total += dataPoint.total || 0;
+        return acc;
+      },
+      {
+        valid: 0,
+        rate_limited: 0,
+        insufficient_permissions: 0,
+        forbidden: 0,
+        disabled: 0,
+        expired: 0,
+        usage_exceeded: 0,
+        total: 0,
+      },
+    );
+  }, [timeseries]);
+
+  const errorTypes = useMemo(() => {
+    const potentialErrors = [
+      {
+        type: "Insufficient Permissions",
+        rawValue: aggregatedData.insufficient_permissions,
+        color: "bg-error-9",
+      },
+      {
+        type: "Rate Limited",
+        rawValue: aggregatedData.rate_limited,
+        color: "bg-error-9",
+      },
+      {
+        type: "Forbidden",
+        rawValue: aggregatedData.forbidden,
+        color: "bg-error-9",
+      },
+      {
+        type: "Disabled",
+        rawValue: aggregatedData.disabled,
+        color: "bg-error-9",
+      },
+      {
+        type: "Expired",
+        rawValue: aggregatedData.expired,
+        color: "bg-error-9",
+      },
+      {
+        type: "Usage Exceeded",
+        rawValue: aggregatedData.usage_exceeded,
+        color: "bg-error-9",
+      },
+    ];
+
+    const filteredErrors = potentialErrors.filter((error) => error.rawValue > 0);
+
+    return filteredErrors.map((error) => ({
+      type: error.type,
+      value: formatNumber(error.rawValue),
+      color: error.color,
+    })) as ErrorType[];
+  }, [aggregatedData]);
+
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={300}>
+        <TooltipTrigger asChild>
+          <div>{children}</div>
+        </TooltipTrigger>
+        <TooltipContent
+          className="min-w-64 bg-gray-1 dark:bg-black shadow-2xl p-0 border border-grayA-2 rounded-lg overflow-hidden flex justify-start px-4 pt-2 pb-1 flex-col gap-1"
+          side="bottom"
+        >
+          <div className="text-gray-12 font-medium text-[13px] pr-2">API Key Activity</div>
+          <div className="text-xs text-grayA-9 pr-2 font-normal">Last 36 hours</div>
+
+          {/* Valid count */}
+          <div className="flex justify-between w-full items-center mt-3">
+            <div className="flex gap-3 items-center">
+              <div className="bg-gray-7 h-6 w-0.5 rounded-t rounded-b" />
+              <div className="text-gray-12 font-medium text-[13px]">Valid</div>
+            </div>
+            <div className="text-gray-9 font-medium text-[13px]">
+              {formatNumber(aggregatedData.valid)}
+            </div>
+          </div>
+
+          <div className="mt-1" />
+
+          {/* Error types */}
+          <div className="flex flex-col">
+            {errorTypes.map((error, index) => (
+              <div
+                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                key={index}
+                className="flex justify-between w-full items-center"
+              >
+                <div className="flex gap-3 items-center">
+                  <div className={`${error.color} h-6 w-0.5 rounded-t rounded-b`} />
+                  <div className="text-gray-12 font-medium text-[13px]">{error.type}</div>
+                </div>
+                <div className="text-gray-9 font-medium text-[13px]">{error.value}</div>
+              </div>
+            ))}
+
+            {errorTypes.length === 0 && aggregatedData.valid === 0 && (
+              <div className="text-gray-9 text-[13px] py-1">No verification activity</div>
+            )}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/index.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/index.tsx
new file mode 100644
index 0000000000..1756112cb2
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/index.tsx
@@ -0,0 +1,184 @@
+import { cn } from "@/lib/utils";
+import { useMemo } from "react";
+import { OutcomeExplainer } from "./components/outcome-explainer";
+import { useFetchVerificationTimeseries } from "./use-fetch-timeseries";
+
+type BarData = {
+  id: string | number;
+  topHeight: number;
+  bottomHeight: number;
+  totalHeight: number;
+};
+
+type VerificationBarChartProps = {
+  keyAuthId: string;
+  keyId: string;
+  maxBars?: number;
+  selected: boolean;
+};
+
+const MAX_HEIGHT_BUFFER_FACTOR = 1.3;
+const MAX_BAR_HEIGHT = 28;
+
+export const VerificationBarChart = ({
+  keyAuthId,
+  keyId,
+  selected,
+  maxBars = 30,
+}: VerificationBarChartProps) => {
+  const { timeseries, isLoading, isError } = useFetchVerificationTimeseries(keyAuthId, keyId);
+
+  const isEmpty = useMemo(
+    () => timeseries.reduce((acc, crr) => acc + crr.total, 0) === 0,
+    [timeseries],
+  );
+
+  const bars = useMemo((): BarData[] => {
+    if (isLoading || isError || timeseries.length === 0) {
+      // Return empty data if loading, error, or no data
+      return Array(maxBars).fill({
+        id: 0,
+        topHeight: 0,
+        bottomHeight: 0,
+        totalHeight: 0,
+      });
+    }
+    // Get the most recent data points (or all if less than maxBars)
+    const recentData = timeseries.slice(-maxBars);
+    // Calculate the maximum total value to normalize heights
+    const maxTotal =
+      Math.max(...recentData.map((item) => item.total), 1) * MAX_HEIGHT_BUFFER_FACTOR;
+    // Generate bars from the data
+    return recentData.map((item, index): BarData => {
+      // Scale to fit within max height of 28px
+      const totalHeight = Math.min(
+        Math.round((item.total / maxTotal) * MAX_BAR_HEIGHT),
+        MAX_BAR_HEIGHT,
+      );
+      // Calculate heights proportionally
+      const topHeight = item.error
+        ? Math.max(Math.round((item.error / item.total) * totalHeight), 1)
+        : 0;
+      const bottomHeight = Math.max(totalHeight - topHeight, 0);
+      return {
+        id: index,
+        totalHeight,
+        topHeight,
+        bottomHeight,
+      };
+    });
+  }, [timeseries, isLoading, isError, maxBars]);
+
+  // Pad with empty bars if we have fewer than maxBars data points
+  const displayBars = useMemo((): BarData[] => {
+    const result = [...bars];
+    while (result.length < maxBars) {
+      result.unshift({
+        id: `empty-${result.length}`,
+        topHeight: 0,
+        bottomHeight: 0,
+        totalHeight: 0,
+      });
+    }
+    return result;
+  }, [bars, maxBars]);
+
+  // Loading state - animated pulse effect for bars with grid layout
+  if (isLoading) {
+    return (
+      <div
+        // We need 156px when you calculate the gaps and height but we need some breathing space so its "158px" now
+        className={cn(
+          "grid items-end h-[28px] bg-grayA-2 dark:bg-grayA-2 w-[158px] border border-inside px-1 py-0 overflow-hidden rounded-t hover:rounded-md group-hover:rounded-md border-transparent hover:border-grayA-2 group-hover:border-grayA-2",
+          selected ? "border-grayA-3 rounded-md" : "",
+        )}
+        style={{
+          gridTemplateColumns: `repeat(${maxBars}, 3px)`,
+          gap: "2px",
+        }}
+      >
+        {Array(maxBars)
+          .fill(0)
+          .map((_, index) => (
+            <div
+              key={`loading-${
+                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                index
+              }`}
+              className="flex flex-col"
+            >
+              <div
+                className="w-[3px] bg-error-9 animate-pulse"
+                style={{ height: `${2 + Math.floor(Math.random() * 10)}px` }}
+              />
+              <div
+                className="w-[3px] bg-grayA-5 animate-pulse"
+                style={{ height: `${3 + Math.floor(Math.random() * 12)}px` }}
+              />
+            </div>
+          ))}
+      </div>
+    );
+  }
+
+  // Error state with grid layout
+  if (isError) {
+    return (
+      <div
+        className={cn(
+          "grid items-end h-[28px] bg-grayA-2 dark:bg-grayA-2 w-[158px] border border-inside px-1 py-0 overflow-hidden rounded-t hover:rounded-md group-hover:rounded-md border-transparent hover:border-grayA-2 group-hover:border-grayA-2",
+          selected ? "border-grayA-3 rounded-md" : "",
+        )}
+        style={{
+          gridTemplateColumns: "1fr",
+        }}
+      >
+        <div className="flex items-center justify-center w-full h-full text-xs text-error-9 px-2">
+          Error loading data
+        </div>
+      </div>
+    );
+  }
+
+  // Empty state with grid layout
+  if (isEmpty) {
+    return (
+      <div
+        className={cn(
+          "grid items-end h-[28px] bg-grayA-2 dark:bg-grayA-2 w-[158px] border border-inside px-1 py-0 overflow-hidden rounded-t hover:rounded-md group-hover:rounded-md border-transparent hover:border-grayA-2 group-hover:border-grayA-2",
+          selected ? "border-grayA-3 rounded-md" : "",
+        )}
+        style={{
+          gridTemplateColumns: "1fr",
+        }}
+      >
+        <div className="flex items-center justify-center w-full h-full text-xs text-grayA-9 px-2">
+          No data available
+        </div>
+      </div>
+    );
+  }
+
+  // Data display with grid layout
+  return (
+    <OutcomeExplainer timeseries={timeseries}>
+      <div
+        className={cn(
+          "grid items-end h-[28px] bg-grayA-2 dark:bg-grayA-2 w-[158px] border border-inside px-1 py-0 overflow-hidden rounded-t hover:rounded-md group-hover:rounded-md border-transparent hover:border-grayA-2 group-hover:border-grayA-2",
+          selected ? "border-grayA-3 rounded-md" : "",
+        )}
+        style={{
+          gridTemplateColumns: `repeat(${maxBars}, 3px)`,
+          gap: "2px",
+        }}
+      >
+        {displayBars.map((bar) => (
+          <div key={bar.id} className="flex flex-col">
+            <div className="w-[3px] bg-error-9" style={{ height: `${bar.topHeight}px` }} />
+            <div className="w-[3px] bg-grayA-5" style={{ height: `${bar.bottomHeight}px` }} />
+          </div>
+        ))}
+      </div>
+    </OutcomeExplainer>
+  );
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/query-timeseries.schema.ts b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/query-timeseries.schema.ts
new file mode 100644
index 0000000000..51b95ba2df
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/query-timeseries.schema.ts
@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const keysListQueryTimeseriesPayload = z.object({
+  startTime: z.number().int(),
+  endTime: z.number().int(),
+  keyId: z.string(),
+  keyAuthId: z.string(),
+});
+
+export type KeysListQueryTimeseriesPayload = z.infer<typeof keysListQueryTimeseriesPayload>;
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/use-fetch-timeseries.ts b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/use-fetch-timeseries.ts
new file mode 100644
index 0000000000..ab71bd7e37
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/use-fetch-timeseries.ts
@@ -0,0 +1,126 @@
+import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants";
+import { trpc } from "@/lib/trpc/client";
+import type { VerificationTimeseriesDataPoint } from "@unkey/clickhouse/src/verifications";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+export type ProcessedTimeseriesDataPoint = {
+  valid: number;
+  total: number;
+  success: number;
+  error: number;
+  rate_limited?: number;
+  insufficient_permissions?: number;
+  forbidden?: number;
+  disabled?: number;
+  expired?: number;
+  usage_exceeded?: number;
+};
+
+type CacheEntry = {
+  data: { timeseries: VerificationTimeseriesDataPoint[] };
+  timestamp: number;
+};
+
+const timeseriesCache = new Map<string, CacheEntry>();
+
+export const useFetchVerificationTimeseries = (keyAuthId: string, keyId: string) => {
+  // Use a ref for the initial timestamp to keep it stable
+  const initialTimeRef = useRef(Date.now());
+  const cacheKey = `${keyAuthId}-${keyId}`;
+
+  // Check if we have cached data
+  const cachedData = timeseriesCache.get(cacheKey);
+
+  // State to force updates when cache changes
+  const [_, setCacheVersion] = useState(0);
+
+  // Determine if we should run the query
+  const shouldFetch = !cachedData || Date.now() - cachedData.timestamp > 60000;
+
+  // Set up query parameters - stable between renders
+  const queryParams = useMemo(
+    () => ({
+      startTime: initialTimeRef.current - HISTORICAL_DATA_WINDOW * 3,
+      endTime: initialTimeRef.current,
+      keyAuthId,
+      keyId,
+    }),
+    [keyAuthId, keyId],
+  );
+
+  // Use TRPC's useQuery with critical settings
+  const {
+    data,
+    isLoading: trpcIsLoading,
+    isError,
+  } = trpc.api.keys.usageTimeseries.useQuery(queryParams, {
+    // CRITICAL: Only enable the query if we should fetch
+    enabled: shouldFetch,
+    // Prevent automatic refetching
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    staleTime: Number.POSITIVE_INFINITY,
+    refetchInterval: shouldFetch && queryParams.endTime >= Date.now() - 60_000 ? 10_000 : false,
+  });
+
+  // Process the timeseries data - using cached or fresh data
+  const effectiveData = data || (cachedData ? cachedData.data : undefined);
+
+  // Process the timeseries from the effective data
+  const timeseries = useMemo(() => {
+    if (!effectiveData?.timeseries) {
+      return [] as ProcessedTimeseriesDataPoint[];
+    }
+
+    return effectiveData.timeseries.map((ts): ProcessedTimeseriesDataPoint => {
+      const result: ProcessedTimeseriesDataPoint = {
+        valid: ts.y.valid,
+        total: ts.y.total,
+        success: ts.y.valid,
+        error: ts.y.total - ts.y.valid,
+      };
+
+      // Add optional fields if they exist
+      if (ts.y.rate_limited_count !== undefined) {
+        result.rate_limited = ts.y.rate_limited_count;
+      }
+      if (ts.y.insufficient_permissions_count !== undefined) {
+        result.insufficient_permissions = ts.y.insufficient_permissions_count;
+      }
+      if (ts.y.forbidden_count !== undefined) {
+        result.forbidden = ts.y.forbidden_count;
+      }
+      if (ts.y.disabled_count !== undefined) {
+        result.disabled = ts.y.disabled_count;
+      }
+      if (ts.y.expired_count !== undefined) {
+        result.expired = ts.y.expired_count;
+      }
+      if (ts.y.usage_exceeded_count !== undefined) {
+        result.usage_exceeded = ts.y.usage_exceeded_count;
+      }
+
+      return result;
+    });
+  }, [effectiveData]);
+
+  // Update cache when we get new data
+  useEffect(() => {
+    if (data) {
+      timeseriesCache.set(cacheKey, {
+        data,
+        timestamp: Date.now(),
+      });
+      // Force a re-render to use cached data
+      setCacheVersion((prev) => prev + 1);
+    }
+  }, [data, cacheKey]);
+
+  const isLoading = trpcIsLoading && !cachedData;
+
+  return {
+    timeseries,
+    isLoading,
+    isError,
+  };
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/hidden-value.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/hidden-value.tsx
new file mode 100644
index 0000000000..69bb2722fa
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/hidden-value.tsx
@@ -0,0 +1,47 @@
+import { toast } from "@/components/ui/toaster";
+import { cn } from "@/lib/utils";
+import { CircleLock } from "@unkey/icons";
+
+export const HiddenValueCell = ({
+  value,
+  title = "Value",
+  selected,
+}: {
+  value: string;
+  title: string;
+  selected: boolean;
+}) => {
+  // Show only first 4 characters, then dots
+  const displayValue = value.padEnd(16, "•");
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    navigator.clipboard
+      .writeText(value)
+      .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 (
+    <>
+      {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+      <div
+        className={cn(
+          "rounded-lg border bg-white dark:bg-base-12 border-accent-4 text-grayA-11 w-[150px] px-2 py-1 flex gap-2 items-center cursor-pointer h-[28px] group-hover:border-grayA-3 font-mono",
+          selected && "border-grayA-3",
+        )}
+        onClick={(e) => handleClick(e)}
+      >
+        <div>
+          <CircleLock size="sm-regular" className="text-gray-9" />
+        </div>
+        <div>{displayValue}</div>
+      </div>
+    </>
+  );
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/last-used.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/last-used.tsx
new file mode 100644
index 0000000000..143b610319
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/last-used.tsx
@@ -0,0 +1,57 @@
+import { TimestampInfo } from "@/components/timestamp-info";
+import { Badge } from "@/components/ui/badge";
+import { trpc } from "@/lib/trpc/client";
+import { cn } from "@/lib/utils";
+import { ChartActivity2 } from "@unkey/icons";
+import { STATUS_STYLES } from "../utils/get-row-class";
+
+export const LastUsedCell = ({
+  keyAuthId,
+  keyId,
+  isSelected,
+}: {
+  keyAuthId: string;
+  keyId: string;
+  isSelected: boolean;
+}) => {
+  const { data, isLoading, isError } = trpc.api.keys.latestVerification.useQuery({
+    keyAuthId,
+    keyId,
+  });
+
+  return (
+    <Badge
+      className={cn(
+        "px-1.5 rounded-md flex gap-2 items-center max-w-min h-[22px] border-none",
+        isError
+          ? "bg-error-3 text-error-11 border border-error-5"
+          : isSelected
+            ? STATUS_STYLES.badge.selected
+            : STATUS_STYLES.badge.default,
+      )}
+    >
+      <div>
+        <ChartActivity2 size="sm-regular" />
+      </div>
+      <div className="truncate">
+        {isLoading ? (
+          <div className="flex items-center w-full space-x-1">
+            <div className="h-2 w-2 bg-grayA-5 rounded-full animate-pulse" />
+            <div className="h-2 w-12 bg-grayA-5 rounded animate-pulse" />
+            <div className="h-2 w-12 bg-grayA-5 rounded animate-pulse" />
+          </div>
+        ) : isError ? (
+          "Failed to load"
+        ) : data?.lastVerificationTime ? (
+          <TimestampInfo
+            displayType="relative"
+            value={data.lastVerificationTime}
+            className="truncate"
+          />
+        ) : (
+          "Never used"
+        )}
+      </div>
+    </Badge>
+  );
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/skeletons.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/skeletons.tsx
new file mode 100644
index 0000000000..f75647a11f
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/skeletons.tsx
@@ -0,0 +1,69 @@
+import { cn } from "@unkey/ui/src/lib/utils";
+
+export const KeyColumnSkeleton = () => (
+  <div className="flex flex-col items-start w-[225px]">
+    <div className="flex gap-4 items-center">
+      <div className="bg-grayA-3 size-5 rounded animate-pulse" />
+      <div className="flex flex-col gap-1">
+        <div className="h-2 w-40 bg-grayA-3 rounded animate-pulse" />
+        <div className="h-2 w-16 bg-grayA-3 rounded animate-pulse mt-1" />
+      </div>
+    </div>
+  </div>
+);
+
+export const ValueColumnSkeleton = () => (
+  <div className="rounded-lg border bg-grayA-2 border-grayA-3 text-transparent w-[160px] px-2 py-1 flex gap-2 items-center h-[28px] animate-pulse">
+    <div className="h-2 w-2 bg-grayA-3 rounded-full animate-pulse" />
+    <div className="h-2 w-full bg-grayA-3 rounded animate-pulse" />
+  </div>
+);
+
+export const UsageColumnSkeleton = ({ maxBars = 30 }: { maxBars?: number }) => (
+  <div
+    className={cn(
+      "grid items-end h-[28px] bg-grayA-2 w-[158px] border border-transparent px-1 py-0 overflow-hidden rounded-md",
+      "animate-pulse",
+    )}
+    style={{
+      gridTemplateColumns: `repeat(${maxBars}, 3px)`,
+      gap: "2px",
+    }}
+  >
+    {Array(maxBars)
+      .fill(0)
+      .map((_, index) => (
+        <div
+          key={`loading-${
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            index
+          }`}
+          className="flex flex-col justify-end"
+        >
+          <div
+            className="w-[3px] bg-grayA-5"
+            style={{ height: `${5 + Math.floor(Math.random() * (28 - 5))}px` }}
+          />
+        </div>
+      ))}
+  </div>
+);
+
+export const LastUsedColumnSkeleton = () => (
+  <div className="px-1.5 rounded-md flex gap-2 items-center w-[140px] h-[22px] bg-grayA-3 animate-pulse">
+    <div className="h-2 w-2 bg-grayA-3 rounded-full animate-pulse" />
+    <div className="h-2 w-12 bg-grayA-3 rounded animate-pulse" />
+    <div className="h-2 w-12 bg-grayA-3 rounded animate-pulse" />
+  </div>
+);
+
+export const StatusColumnSkeleton = () => (
+  <div
+    className="flex w-[100px] items-center h-[22px] space-x-2 px-1.5 py-1 rounded-md bg-grayA-3 animate-pulse"
+    aria-busy="true"
+    aria-live="polite"
+  >
+    <div className="h-2 w-2 bg-grayA-3 rounded-full animate-pulse" />
+    <div className="h-2 w-16 bg-grayA-3 rounded animate-pulse" />
+  </div>
+);
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/components/status-badge.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/components/status-badge.tsx
new file mode 100644
index 0000000000..7d07cee05f
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/components/status-badge.tsx
@@ -0,0 +1,38 @@
+import { cn } from "@/lib/utils";
+
+type StatusBadgeProps = {
+  // Accept simplified primary status info
+  primary: {
+    label: string;
+    color: string;
+    icon: React.ReactNode;
+  };
+  count: number;
+};
+
+export const StatusBadge = ({ primary, count }: StatusBadgeProps) => {
+  return (
+    <div className="flex items-center justify-start gap-0.5 text-xs">
+      <div
+        className={cn(
+          primary.color,
+          "px-1.5 py-1 flex items-center justify-center gap-2 h-[22px]",
+          count > 0 ? "rounded-l-md" : "rounded-md",
+        )}
+      >
+        {primary.icon && <span>{primary.icon}</span>}
+        <span>{primary.label}</span>
+      </div>
+      {count > 0 && (
+        <div
+          className={cn(
+            primary.color,
+            "rounded-r-md px-1.5 py-1 flex items-center justify-center h-[22px]",
+          )}
+        >
+          +{count}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/constants.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/constants.tsx
new file mode 100644
index 0000000000..863aa2a44b
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/constants.tsx
@@ -0,0 +1,79 @@
+import {
+  Ban,
+  CircleCaretRight,
+  CircleCheck,
+  CircleHalfDottedClock,
+  ShieldKey,
+  TriangleWarning2,
+} from "@unkey/icons";
+
+export type StatusType =
+  | "disabled"
+  | "low-credits"
+  | "expires-soon"
+  | "rate-limited"
+  | "validation-issues"
+  | "operational";
+
+export interface StatusInfo {
+  type: StatusType;
+  label: string;
+  color: string;
+  icon: React.ReactNode;
+  tooltip: string;
+  priority: number; // Lower number = higher priority
+}
+
+export const STATUS_DEFINITIONS: Record<StatusType, StatusInfo> = {
+  "low-credits": {
+    type: "low-credits",
+    label: "Low Credits",
+    color: "bg-errorA-3 text-errorA-11",
+    icon: <CircleCaretRight size="sm-regular" />,
+    tooltip: "This key has a low credit balance. Top it off to prevent disruptions.",
+    priority: 1,
+  },
+  "rate-limited": {
+    type: "rate-limited",
+    label: "Ratelimited",
+    color: "bg-errorA-3 text-errorA-11",
+    icon: <TriangleWarning2 size="sm-regular" />,
+    tooltip:
+      "This key is getting ratelimited frequently. Check the configured ratelimits and reach out to your user about their usage.",
+    priority: 2,
+  },
+  "expires-soon": {
+    type: "expires-soon",
+    label: "Expires soon",
+    color: "bg-orangeA-3 text-orangeA-11",
+    icon: <CircleHalfDottedClock size="sm-regular" className="text-orange-11" />,
+    tooltip:
+      "This key will expire in less than 24 hours. Rotate the key or extend its deadline to prevent disruptions.",
+    priority: 2,
+  },
+  "validation-issues": {
+    type: "validation-issues",
+    label: "Potential issues",
+    color: "bg-warningA-3 text-warningA-11",
+    icon: <ShieldKey size="sm-regular" className="text-warning-11" />,
+    tooltip: "This key has a high error rate. Please check its logs to debug potential issues.",
+    priority: 3,
+  },
+  //TODO: Add a way to enable this through tooltip
+  disabled: {
+    type: "disabled",
+    label: "Disabled",
+    color: "bg-grayA-3 text-grayA-11",
+    icon: <Ban size="sm-regular" />,
+    tooltip: "This key is currently disabled and cannot be used for verification.",
+    priority: 0,
+  },
+  operational: {
+    type: "operational",
+    label: "Operational",
+    color: "bg-successA-3 text-successA-11",
+    icon: <CircleCheck size="sm-regular" />,
+    tooltip: "This key is operating normally.",
+    priority: 99, // Lowest priority
+  },
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx
new file mode 100644
index 0000000000..4e0e2d83f3
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx
@@ -0,0 +1,143 @@
+import { toast } from "@/components/ui/toaster";
+import { trpc } from "@/lib/trpc/client";
+import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
+import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
+import { useState } from "react";
+import { StatusBadge } from "./components/status-badge";
+import { useKeyStatus } from "./use-key-status";
+
+type StatusDisplayProps = {
+  keyData: KeyDetails;
+  keyAuthId: string;
+};
+
+export const StatusDisplay = ({ keyAuthId, keyData }: StatusDisplayProps) => {
+  const { primary, count, isLoading, statuses, isError } = useKeyStatus(keyAuthId, keyData);
+  const utils = trpc.useUtils();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const enableKeyMutation = trpc.api.keys.enableKey.useMutation({
+    onSuccess: async () => {
+      toast.success("Key enabled successfully!");
+      await utils.api.keys.list.invalidate({ keyAuthId });
+    },
+    onError: (error) => {
+      toast.error("Failed to enable key", {
+        description: error.message || "An unknown error occurred.",
+      });
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <div
+        className="flex w-[100px] items-center h-[22px] space-x-1 px-1.5 py-1 rounded-md bg-gray-3"
+        aria-busy="true"
+        aria-live="polite"
+      >
+        <div className="h-2 w-2 bg-grayA-5 rounded-full animate-pulse" />
+        <div className="h-2 w-20 bg-grayA-5 rounded animate-pulse" />
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center h-[22px] w-[100px]",
+          "px-1.5 py-1 rounded-md",
+          "bg-errorA-3 text-errorA-11 text-xs",
+        )}
+        role="alert"
+      >
+        Failed to load
+      </div>
+    );
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip open={isOpen} onOpenChange={setIsOpen}>
+        <TooltipTrigger onClick={() => setIsOpen(!isOpen)} className="cursor-pointer">
+          <StatusBadge primary={primary} count={count} />
+        </TooltipTrigger>
+        <TooltipContent className="p-0 bg-white dark:bg-black border rounded-lg border-grayA-3 w-72 flex flex-col drop-shadow-xl">
+          {statuses && statuses.length > 1 && (
+            <div className="border-b border-grayA-3 ">
+              <div className="px-4 py-3">
+                <div className="flex flex-col px-[1px] py-[1px] gap-1">
+                  <div className="text-accent-12 font-medium text-[13px]">Key status overview</div>
+                  <div className="text-accent-10 text-xs ">
+                    This key has{" "}
+                    <span className="font-semibold text-accent-12">{statuses.length}</span> active
+                    flags{" "}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {statuses?.map((status, i) => (
+            <div
+              className={cn("border-grayA-3", i !== statuses.length - 1 && "border-b")}
+              key={status.type || i}
+            >
+              <div className="px-4 py-3 flex items-start gap-1.5 flex-col">
+                <div className="flex-shrink-0 mt-0.5">
+                  <StatusBadge
+                    primary={{
+                      label: status.label,
+                      color: status.color,
+                      icon: status.icon,
+                    }}
+                    count={0}
+                  />
+                </div>
+
+                <div className="text-xs text-accent-11 text-wrap leading-6 flex-grow w-full">
+                  {status.type === "disabled" ? (
+                    <div className="flex flex-col gap-2 items-start">
+                      <span>
+                        This key has been manually disabled and cannot be used for any requests.
+                      </span>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          if (enableKeyMutation.isLoading) {
+                            return;
+                          }
+
+                          if (keyData?.id) {
+                            enableKeyMutation.mutate({ keyId: keyData.id });
+                          } else {
+                            toast.error("Could not enable key: Missing key information.");
+                          }
+                        }}
+                        disabled={enableKeyMutation.isLoading}
+                        className={cn(
+                          "bg-transparent border-none p-0 m-0 text-left",
+                          "font-medium",
+                          "text-xs",
+                          "transition-colors duration-150 ease-in-out",
+                          enableKeyMutation.isLoading
+                            ? "text-gray-10 cursor-not-allowed"
+                            : "text-info-11 hover:text-info-12 hover:underline cursor-pointer",
+                        )}
+                      >
+                        {enableKeyMutation.isLoading ? "Enabling..." : "Re-enable this key"}
+                      </button>{" "}
+                    </div>
+                  ) : (
+                    status.tooltip
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/query-timeseries.schema.ts b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/query-timeseries.schema.ts
new file mode 100644
index 0000000000..142868060e
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/query-timeseries.schema.ts
@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const keyOutcomesQueryPayload = z.object({
+  startTime: z.number().int(),
+  endTime: z.number().int(),
+  keyId: z.string(),
+  keyAuthId: z.string(),
+});
+
+export type KeyOutcomesQueryPayload = z.infer<typeof keyOutcomesQueryPayload>;
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/use-key-status.ts b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/use-key-status.ts
new file mode 100644
index 0000000000..c24d0ec0c6
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/use-key-status.ts
@@ -0,0 +1,173 @@
+import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
+import { useMemo } from "react";
+import {
+  type ProcessedTimeseriesDataPoint,
+  useFetchVerificationTimeseries,
+} from "../bar-chart/use-fetch-timeseries";
+import { STATUS_DEFINITIONS, type StatusInfo } from "./constants";
+
+const RATE_LIMIT_THRESHOLD_PERCENT = 0.1; // 10%
+const VALIDATION_ISSUE_THRESHOLD_PERCENT = 0.1; // 10%
+const LOW_CREDITS_THRESHOLD_ABSOLUTE = 100;
+const LOW_CREDITS_THRESHOLD_REFILL_PERCENT = 0.1; // 10%
+const EXPIRY_THRESHOLD_HOURS = 24;
+
+type AggregatedData = {
+  total: number;
+  error: number;
+  rate_limited: number;
+};
+
+const aggregateTimeseries = (timeseries: ProcessedTimeseriesDataPoint[]): AggregatedData => {
+  return timeseries.reduce(
+    (acc, point) => {
+      acc.total += point.total;
+      acc.error += point.error;
+      acc.rate_limited += point.rate_limited ?? 0;
+      return acc;
+    },
+    { total: 0, error: 0, rate_limited: 0 },
+  );
+};
+
+type UseKeyStatusResult = {
+  primary: {
+    label: string;
+    color: string;
+    icon: React.ReactNode;
+  };
+  count: number;
+  statuses: StatusInfo[];
+  isLoading: boolean;
+  isError: boolean;
+};
+
+const LOADING_PRIMARY = {
+  label: "Loading",
+  color: "bg-grayA-3",
+  icon: null,
+};
+
+export const useKeyStatus = (keyAuthId: string, keyData: KeyDetails): UseKeyStatusResult => {
+  const { timeseries, isError, isLoading } = useFetchVerificationTimeseries(keyAuthId, keyData.id);
+
+  const statusResult = useMemo(() => {
+    // Handle case where keyData might not be loaded yet
+    if (!keyData) {
+      return {
+        primary: LOADING_PRIMARY,
+        count: 0,
+        statuses: [],
+      };
+    }
+
+    if (isLoading && timeseries.length === 0) {
+      return {
+        primary: LOADING_PRIMARY,
+        count: 0,
+        statuses: [],
+      };
+    }
+
+    if (isError) {
+      const fallbackStatus = keyData.enabled
+        ? STATUS_DEFINITIONS.operational
+        : STATUS_DEFINITIONS.disabled;
+      return {
+        primary: {
+          label: fallbackStatus.label,
+          color: fallbackStatus.color,
+          icon: fallbackStatus.icon,
+        },
+        count: 0,
+        statuses: [fallbackStatus],
+      };
+    }
+
+    if (!keyData.enabled) {
+      const disabledStatus = STATUS_DEFINITIONS.disabled;
+      return {
+        primary: {
+          label: disabledStatus.label,
+          color: disabledStatus.color,
+          icon: disabledStatus.icon,
+        },
+        count: 0,
+        statuses: [disabledStatus],
+      };
+    }
+
+    const applicableStatuses: StatusInfo[] = [];
+    const aggregatedData = aggregateTimeseries(timeseries);
+    const totalVerifications = aggregatedData.total;
+
+    if (
+      totalVerifications > 0 &&
+      aggregatedData.rate_limited / totalVerifications > RATE_LIMIT_THRESHOLD_PERCENT
+    ) {
+      applicableStatuses.push(STATUS_DEFINITIONS["rate-limited"]);
+    }
+
+    if (
+      totalVerifications > 0 &&
+      aggregatedData.error / totalVerifications > VALIDATION_ISSUE_THRESHOLD_PERCENT
+    ) {
+      applicableStatuses.push(STATUS_DEFINITIONS["validation-issues"]);
+    }
+
+    const remaining = keyData.key.remaining;
+    const refillAmount = keyData.key.refillAmount;
+    const isLowOnCredits =
+      (remaining != null && remaining < LOW_CREDITS_THRESHOLD_ABSOLUTE) ||
+      (refillAmount &&
+        remaining != null &&
+        refillAmount > 0 &&
+        remaining < refillAmount * LOW_CREDITS_THRESHOLD_REFILL_PERCENT);
+
+    if (isLowOnCredits) {
+      applicableStatuses.push(STATUS_DEFINITIONS["low-credits"]);
+    }
+
+    // Check Expiry
+    if (keyData.expires) {
+      const hoursToExpiry = (keyData.expires * 1000 - Date.now()) / (1000 * 60 * 60);
+      // Ensure current time used is consistent if needed, Date.now() is fine here
+      if (hoursToExpiry > 0 && hoursToExpiry <= EXPIRY_THRESHOLD_HOURS) {
+        applicableStatuses.push(STATUS_DEFINITIONS["expires-soon"]);
+      }
+    }
+
+    // Handle Operational state (if no issues found)
+    if (applicableStatuses.length === 0) {
+      const operationalStatus = STATUS_DEFINITIONS.operational;
+      return {
+        primary: {
+          label: operationalStatus.label,
+          color: operationalStatus.color,
+          icon: operationalStatus.icon,
+        },
+        count: 0,
+        statuses: [operationalStatus], // Return array with the single operational status
+      };
+    }
+
+    applicableStatuses.sort((a, b) => a.priority - b.priority); // Sort by priority
+
+    const primaryStatus = applicableStatuses[0]; // Highest priority is the first element
+    return {
+      primary: {
+        label: primaryStatus.label,
+        color: primaryStatus.color,
+        icon: primaryStatus.icon,
+      },
+      count: applicableStatuses.length - 1, // Count of *other* statuses besides primary
+      statuses: applicableStatuses, // Return the full sorted array of applicable statuses
+    };
+  }, [keyData, timeseries, isLoading, isError]);
+
+  return {
+    ...statusResult,
+    isLoading: isLoading || !keyData,
+    isError,
+  };
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/hooks/use-keys-list-query.ts b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/hooks/use-keys-list-query.ts
new file mode 100644
index 0000000000..964507d8ed
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/hooks/use-keys-list-query.ts
@@ -0,0 +1,84 @@
+import { trpc } from "@/lib/trpc/client";
+import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
+import { useEffect, useMemo, useState } from "react";
+import { keysListFilterFieldConfig, keysListFilterFieldNames } from "../../../filters.schema";
+import { useFilters } from "../../../hooks/use-filters";
+import type { KeysQueryListPayload } from "../query-logs.schema";
+
+type UseKeysListQueryParams = {
+  keyAuthId: string;
+};
+
+export function useKeysListQuery({ keyAuthId }: UseKeysListQueryParams) {
+  const [totalCount, setTotalCount] = useState(0);
+  const [keysMap, setKeysMap] = useState(() => new Map<string, KeyDetails>());
+
+  const { filters } = useFilters();
+
+  const keysList = useMemo(() => Array.from(keysMap.values()), [keysMap]);
+
+  const queryParams = useMemo(() => {
+    const params: KeysQueryListPayload = {
+      ...Object.fromEntries(keysListFilterFieldNames.map((field) => [field, []])),
+      keyAuthId,
+    };
+
+    filters.forEach((filter) => {
+      if (!keysListFilterFieldNames.includes(filter.field) || !params[filter.field]) {
+        return;
+      }
+
+      const fieldConfig = keysListFilterFieldConfig[filter.field];
+      const validOperators = fieldConfig.operators;
+      if (!validOperators.includes(filter.operator)) {
+        throw new Error("Invalid operator");
+      }
+
+      if (typeof filter.value === "string") {
+        params[filter.field]?.push({
+          operator: filter.operator,
+          value: filter.value,
+        });
+      }
+    });
+
+    return params;
+  }, [filters, keyAuthId]);
+
+  const {
+    data: keysData,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+    isLoading: isLoadingInitial,
+  } = trpc.api.keys.list.useInfiniteQuery(queryParams, {
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+    staleTime: Number.POSITIVE_INFINITY,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+  });
+
+  useEffect(() => {
+    if (keysData) {
+      const newMap = new Map<string, KeyDetails>();
+      keysData.pages.forEach((page) => {
+        page.keys.forEach((key) => {
+          newMap.set(key.id, key);
+        });
+      });
+      if (keysData.pages.length > 0) {
+        setTotalCount(keysData.pages[0].totalCount);
+      }
+      setKeysMap(newMap);
+    }
+  }, [keysData]);
+
+  return {
+    keys: keysList,
+    isLoading: isLoadingInitial,
+    hasMore: hasNextPage,
+    loadMore: fetchNextPage,
+    isLoadingMore: isFetchingNextPage,
+    totalCount,
+  };
+}
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx
new file mode 100644
index 0000000000..c16ca34915
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx
@@ -0,0 +1,266 @@
+"use client";
+import { VirtualTable } from "@/components/virtual-table/index";
+import type { Column } from "@/components/virtual-table/types";
+import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
+import { BookBookmark, Focus, Key } from "@unkey/icons";
+import {
+  AnimatedLoadingSpinner,
+  Button,
+  Empty,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
+import Link from "next/link";
+import { useCallback, useMemo, useState } from "react";
+import React from "react";
+import { VerificationBarChart } from "./components/bar-chart";
+import { HiddenValueCell } from "./components/hidden-value";
+import { LastUsedCell } from "./components/last-used";
+import {
+  KeyColumnSkeleton,
+  LastUsedColumnSkeleton,
+  StatusColumnSkeleton,
+  UsageColumnSkeleton,
+  ValueColumnSkeleton,
+} from "./components/skeletons";
+import { StatusDisplay } from "./components/status-cell";
+import { useKeysListQuery } from "./hooks/use-keys-list-query";
+import { getRowClassName } from "./utils/get-row-class";
+
+export const KeysList = ({
+  keyspaceId,
+  apiId,
+}: {
+  keyspaceId: string;
+  apiId: string;
+}) => {
+  const { keys, isLoading, isLoadingMore, loadMore, totalCount, hasMore } = useKeysListQuery({
+    keyAuthId: keyspaceId,
+  });
+  const [selectedKey, setSelectedKey] = useState<KeyDetails | null>(null);
+  const [navigatingKeyId, setNavigatingKeyId] = useState<string | null>(null);
+
+  const handleLinkClick = useCallback((keyId: string) => {
+    setNavigatingKeyId(keyId);
+    setSelectedKey(null);
+  }, []);
+
+  const columns: Column<KeyDetails>[] = useMemo(
+    () => [
+      {
+        key: "key",
+        header: "Key",
+        width: "10%",
+        headerClassName: "pl-[18px]",
+        render: (key) => {
+          const identity = key.identity?.external_id ?? key.owner_id;
+          const isNavigating = key.id === navigatingKeyId;
+
+          const iconContainer = isNavigating ? (
+            <div className="size-5 rounded flex items-center justify-center">
+              <AnimatedLoadingSpinner />
+            </div>
+          ) : (
+            <div
+              className={cn(
+                "size-5 rounded flex items-center justify-center",
+                identity ? "bg-successA-3" : "bg-grayA-3",
+              )}
+            >
+              {identity ? (
+                <Focus size="md-regular" className="text-successA-11" />
+              ) : (
+                <Key size="md-regular" />
+              )}
+            </div>
+          );
+
+          return (
+            <div className="flex flex-col items-start px-[18px] py-[6px]">
+              <div className="flex gap-4 items-center">
+                {identity ? (
+                  <TooltipProvider delayDuration={100}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        {React.cloneElement(iconContainer, {
+                          className: cn(iconContainer.props.className, "cursor-pointer"),
+                        })}
+                      </TooltipTrigger>
+                      <TooltipContent
+                        className="bg-gray-1 px-4 py-2 border border-gray-4 shadow-md font-medium text-xs text-accent-12"
+                        side="right"
+                      >
+                        This key is associated with the identity:{" "}
+                        {key.identity_id ? (
+                          <Link
+                            title={"View details for identity"}
+                            className="font-mono group-hover:underline decoration-dotted"
+                            href={`/identities/${key.identity_id}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-disabled={isNavigating}
+                          >
+                            <span className="font-mono bg-gray-4 p-1 rounded">{identity}</span>
+                          </Link>
+                        ) : (
+                          <span className="font-mono bg-gray-4 p-1 rounded">{identity}</span>
+                        )}
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                ) : (
+                  iconContainer
+                )}
+
+                <div className="flex flex-col gap-1 text-xs">
+                  <Link
+                    title={`View details for ${key.id}`}
+                    className="font-mono group-hover:underline decoration-dotted"
+                    href={`/apis/${apiId}/keys/${keyspaceId}/${key.id}`}
+                    aria-disabled={isNavigating}
+                    onClick={() => {
+                      handleLinkClick(key.id);
+                    }}
+                  >
+                    <div className="font-mono font-medium truncate text-brand-12">
+                      {key.id.substring(0, 8)}...
+                      {key.id.substring(key.id.length - 4)}
+                    </div>
+                  </Link>
+                  {key.name && <span className="font-sans text-accent-9">{key.name}</span>}
+                </div>
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        key: "value",
+        header: "Value",
+        width: "15%",
+        render: (key) => (
+          <HiddenValueCell value={key.start} title="Value" selected={selectedKey?.id === key.id} />
+        ),
+      },
+      {
+        key: "usage",
+        header: "Usage in last 36H",
+        width: "15%",
+        render: (key) => (
+          <VerificationBarChart
+            keyAuthId={keyspaceId}
+            keyId={key.id}
+            selected={key.id === selectedKey?.id}
+          />
+        ),
+      },
+      {
+        key: "last_used",
+        header: "Last Used",
+        width: "15%",
+        render: (key) => {
+          return (
+            <LastUsedCell
+              keyId={key.id}
+              keyAuthId={keyspaceId}
+              isSelected={selectedKey?.id === key.id}
+            />
+          );
+        },
+      },
+      {
+        key: "status",
+        header: "Status",
+        width: "15%",
+        render: (key) => {
+          return <StatusDisplay keyData={key} keyAuthId={keyspaceId} />;
+        },
+      },
+    ],
+    [keyspaceId, selectedKey?.id, apiId, navigatingKeyId, handleLinkClick],
+  );
+
+  return (
+    <div className="flex flex-col gap-8 mb-20">
+      <VirtualTable
+        data={keys}
+        isLoading={isLoading}
+        isFetchingNextPage={isLoadingMore}
+        onLoadMore={loadMore}
+        columns={columns}
+        onRowClick={setSelectedKey}
+        selectedItem={selectedKey}
+        keyExtractor={(log) => log.id}
+        rowClassName={(log) => getRowClassName(log, selectedKey as KeyDetails)}
+        loadMoreFooterProps={{
+          hide: isLoading,
+          buttonText: "Load more keys",
+          hasMore,
+          countInfoText: (
+            <div className="flex gap-2">
+              <span>Showing</span> <span className="text-accent-12">{keys.length}</span>
+              <span>of</span>
+              {totalCount}
+              <span>keys</span>
+            </div>
+          ),
+        }}
+        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>No API Keys Found</Empty.Title>
+              <Empty.Description className="text-left">
+                There are no API keys associated with this service yet. Create your first API key to
+                get started.
+              </Empty.Description>
+              <Empty.Actions className="mt-4 justify-start">
+                <a
+                  href="https://www.unkey.com/docs/introduction"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button size="md">
+                    <BookBookmark />
+                    Learn about Keys
+                  </Button>
+                </a>
+              </Empty.Actions>
+            </Empty>
+          </div>
+        }
+        config={{
+          rowHeight: 52,
+          layoutMode: "grid",
+          rowBorders: true,
+          containerPadding: "px-0",
+        }}
+        renderSkeletonRow={({ columns, rowHeight }) =>
+          columns.map((column, idx) => (
+            <td
+              key={column.key}
+              className={cn(
+                "text-xs align-middle whitespace-nowrap pr-4",
+                idx === 0 ? "pl-[18px]" : "",
+                column.key === "key" ? "py-[6px]" : "py-1",
+              )}
+              style={{ height: `${rowHeight}px` }}
+            >
+              {column.key === "key" && <KeyColumnSkeleton />}
+              {column.key === "value" && <ValueColumnSkeleton />}
+              {column.key === "usage" && <UsageColumnSkeleton />}
+              {column.key === "last_used" && <LastUsedColumnSkeleton />}
+              {column.key === "status" && <StatusColumnSkeleton />}
+              {!["key", "value", "usage", "last_used", "status"].includes(column.key) && (
+                <div className="h-4 w-full bg-grayA-3 rounded animate-pulse" />
+              )}
+            </td>
+          ))
+        }
+      />
+    </div>
+  );
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/query-logs.schema.ts b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/query-logs.schema.ts
new file mode 100644
index 0000000000..201c68e7a0
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/query-logs.schema.ts
@@ -0,0 +1,21 @@
+import { z } from "zod";
+import { keysListFilterOperatorEnum } from "../../filters.schema";
+
+const filterItemSchema = z.object({
+  operator: keysListFilterOperatorEnum,
+  value: z.string(),
+});
+const baseFilterArraySchema = z.array(filterItemSchema).nullish();
+
+const baseKeysSchema = z.object({
+  keyAuthId: z.string(),
+  names: baseFilterArraySchema,
+  identities: baseFilterArraySchema,
+  keyIds: baseFilterArraySchema,
+});
+
+export const keysQueryListPayload = baseKeysSchema.extend({
+  cursor: z.string().nullish(),
+});
+
+export type KeysQueryListPayload = z.infer<typeof keysQueryListPayload>;
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/utils/get-row-class.ts b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/utils/get-row-class.ts
new file mode 100644
index 0000000000..7574372bb8
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/utils/get-row-class.ts
@@ -0,0 +1,38 @@
+import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
+import { cn } from "@/lib/utils";
+
+export type StatusStyle = {
+  base: string;
+  hover: string;
+  selected: string;
+  badge: {
+    default: string;
+    selected: string;
+  };
+  focusRing: string;
+};
+
+export const STATUS_STYLES = {
+  base: "text-grayA-9",
+  hover: "hover:text-accent-11 dark:hover:text-accent-12 hover:bg-grayA-2",
+  selected: "text-accent-12 bg-grayA-2 hover:text-accent-12",
+  badge: {
+    default: "bg-grayA-3 text-grayA-11 group-hover:bg-grayA-5 border-transparent",
+    selected: "bg-grayA-5 text-grayA-12 hover:bg-grayA-5 border-grayA-3",
+  },
+  focusRing: "focus:ring-accent-7",
+};
+
+export const getRowClassName = (log: KeyDetails, selectedLog: KeyDetails) => {
+  const style = STATUS_STYLES;
+  const isSelected = log.id === selectedLog?.id;
+
+  return cn(
+    style.base,
+    style.hover,
+    "group rounded",
+    "focus:outline-none focus:ring-1 focus:ring-opacity-40",
+    style.focusRing,
+    isSelected && style.selected,
+  );
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/filters.schema.ts b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/filters.schema.ts
new file mode 100644
index 0000000000..dfa1a5eeac
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/filters.schema.ts
@@ -0,0 +1,67 @@
+// src/features/keys/filters.schema.ts
+
+import type { FilterValue, StringConfig } from "@/components/logs/validation/filter.types";
+import { parseAsFilterValueArray } from "@/components/logs/validation/utils/nuqs-parsers";
+import { createFilterOutputSchema } from "@/components/logs/validation/utils/structured-output-schema-generator";
+import { z } from "zod";
+
+const commonStringOperators = ["is", "contains", "startsWith", "endsWith"] as const;
+
+export const keysListFilterOperatorEnum = z.enum(commonStringOperators);
+export type KeysListFilterOperator = z.infer<typeof keysListFilterOperatorEnum>;
+
+export type FilterFieldConfigs = {
+  keyIds: StringConfig<KeysListFilterOperator>;
+  names: StringConfig<KeysListFilterOperator>;
+  identities: StringConfig<KeysListFilterOperator>;
+};
+
+export const keysListFilterFieldConfig: FilterFieldConfigs = {
+  keyIds: {
+    type: "string",
+    operators: [...commonStringOperators],
+  },
+  names: {
+    type: "string",
+    operators: [...commonStringOperators],
+  },
+  identities: {
+    type: "string",
+    operators: [...commonStringOperators],
+  },
+};
+
+const allFilterFieldNames = Object.keys(keysListFilterFieldConfig) as (keyof FilterFieldConfigs)[];
+
+if (allFilterFieldNames.length === 0) {
+  throw new Error("keysListFilterFieldConfig must contain at least one field definition.");
+}
+
+const [firstFieldName, ...restFieldNames] = allFilterFieldNames;
+
+export const keysListFilterFieldEnum = z.enum([firstFieldName, ...restFieldNames]);
+
+export const keysListFilterFieldNames = allFilterFieldNames;
+
+export type KeysListFilterField = z.infer<typeof keysListFilterFieldEnum>;
+
+export const filterOutputSchema = createFilterOutputSchema(
+  keysListFilterFieldEnum,
+  keysListFilterOperatorEnum,
+  keysListFilterFieldConfig,
+);
+
+export type AllOperatorsUrlValue = {
+  value: string;
+  operator: KeysListFilterOperator;
+};
+
+export type KeysListFilterValue = FilterValue<KeysListFilterField, KeysListFilterOperator>;
+
+export type KeysQuerySearchParams = {
+  [K in KeysListFilterField]?: AllOperatorsUrlValue[] | null;
+};
+
+export const parseAsAllOperatorsFilterArray = parseAsFilterValueArray<KeysListFilterOperator>([
+  ...commonStringOperators,
+]);
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/hooks/use-filters.ts b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/hooks/use-filters.ts
new file mode 100644
index 0000000000..8e0b2b4207
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/hooks/use-filters.ts
@@ -0,0 +1,104 @@
+// src/features/keys/hooks/use-filters.ts (or your path)
+
+import { useQueryStates } from "nuqs";
+import { useCallback, useMemo } from "react";
+import {
+  type AllOperatorsUrlValue,
+  type KeysListFilterField,
+  type KeysListFilterValue,
+  type KeysQuerySearchParams,
+  keysListFilterFieldConfig,
+  keysListFilterFieldNames,
+  parseAsAllOperatorsFilterArray,
+} from "../filters.schema";
+
+export const queryParamsPayload = Object.fromEntries(
+  keysListFilterFieldNames.map((field) => [field, parseAsAllOperatorsFilterArray]),
+) as { [K in KeysListFilterField]: typeof parseAsAllOperatorsFilterArray };
+
+export const useFilters = () => {
+  const [searchParams, setSearchParams] = useQueryStates(queryParamsPayload, {
+    history: "push",
+  });
+
+  const filters = useMemo(() => {
+    const activeFilters: KeysListFilterValue[] = [];
+
+    for (const field of keysListFilterFieldNames) {
+      const value = searchParams[field];
+
+      if (!Array.isArray(value)) {
+        continue;
+      }
+
+      for (const filterItem of value) {
+        if (filterItem && typeof filterItem.value === "string" && filterItem.operator) {
+          const baseFilter: KeysListFilterValue = {
+            id: crypto.randomUUID(),
+            field: field,
+            operator: filterItem.operator,
+            value: filterItem.value,
+          };
+          activeFilters.push(baseFilter);
+        }
+      }
+    }
+
+    return activeFilters;
+  }, [searchParams]);
+
+  const updateFilters = useCallback(
+    (newFilters: KeysListFilterValue[]) => {
+      const newParams: Partial<KeysQuerySearchParams> = Object.fromEntries(
+        keysListFilterFieldNames.map((field) => [field, null]),
+      );
+
+      const filtersByField = new Map<KeysListFilterField, AllOperatorsUrlValue[]>();
+      keysListFilterFieldNames.forEach((field) => filtersByField.set(field, []));
+
+      newFilters.forEach((filter) => {
+        if (!keysListFilterFieldNames.includes(filter.field)) {
+          return;
+        }
+
+        const fieldConfig = keysListFilterFieldConfig[filter.field];
+        const validOperators = fieldConfig.operators;
+
+        if (!validOperators.includes(filter.operator)) {
+          throw new Error("Invalid operator");
+        }
+
+        if (typeof filter.value === "string") {
+          const fieldFilters = filtersByField.get(filter.field);
+          fieldFilters?.push({
+            value: filter.value,
+            operator: filter.operator,
+          });
+        }
+      });
+
+      filtersByField.forEach((fieldFilters, field) => {
+        if (fieldFilters.length > 0) {
+          newParams[field] = fieldFilters;
+        }
+      });
+
+      setSearchParams(newParams);
+    },
+    [setSearchParams],
+  );
+
+  const removeFilter = useCallback(
+    (id: string) => {
+      const newFilters = filters.filter((f) => f.id !== id);
+      updateFilters(newFilters);
+    },
+    [filters, updateFilters],
+  );
+
+  return {
+    filters,
+    removeFilter,
+    updateFilters,
+  };
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/keys-client.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/keys-client.tsx
new file mode 100644
index 0000000000..81100d924b
--- /dev/null
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/keys-client.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { KeysListControlCloud } from "./components/control-cloud";
+import { KeysListControls } from "./components/controls";
+import { KeysList } from "./components/table/keys-list";
+
+export const KeysClient = ({
+  keyspaceId,
+  apiId,
+}: {
+  keyspaceId: string;
+  apiId: string;
+}) => {
+  return (
+    <div className="flex flex-col">
+      <KeysListControls keyspaceId={keyspaceId} />
+      <KeysListControlCloud />
+      <KeysList apiId={apiId} keyspaceId={keyspaceId} />
+    </div>
+  );
+};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/keys.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/keys.tsx
deleted file mode 100644
index a953c087b9..0000000000
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/keys.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
-import BackButton from "@/components/ui/back-button";
-import { Badge } from "@/components/ui/badge";
-import { db } from "@/lib/db";
-import { formatNumber } from "@/lib/fmt";
-import { Empty } from "@unkey/ui";
-import { Button } from "@unkey/ui";
-import { ChevronRight, User, VenetianMask } from "lucide-react";
-import Link from "next/link";
-
-type Props = {
-  keyAuthId: string;
-  apiId: string;
-};
-
-export const dynamic = "force-dynamic";
-
-export const Keys: React.FC<Props> = async ({ keyAuthId, apiId }) => {
-  const keys = await db.query.keys.findMany({
-    where: (table, { and, eq, isNull }) =>
-      and(eq(table.keyAuthId, keyAuthId), isNull(table.deletedAtM)),
-    limit: 100,
-    with: {
-      identity: {
-        columns: {
-          externalId: true,
-        },
-      },
-      roles: {
-        with: {
-          role: {
-            with: {
-              permissions: true,
-            },
-          },
-        },
-      },
-      permissions: true,
-    },
-  });
-
-  const nullExternalId = "UNKEY_NULL_OWNER_ID";
-  type KeysByOwnerId = {
-    [externalId: string]: {
-      id: string;
-      keyAuthId: string;
-      name: string | null;
-      start: string | null;
-      roles: number;
-      permissions: number;
-      enabled: boolean;
-      environment: string | null;
-    }[];
-  };
-  const keysByExternalId = keys.reduce((acc, curr) => {
-    const externalId = curr.identity?.externalId ?? curr.ownerId ?? nullExternalId;
-    if (!acc[externalId]) {
-      acc[externalId] = [];
-    }
-    const permissions = new Set(curr.permissions.map((p) => p.permissionId));
-    for (const role of curr.roles) {
-      for (const permission of role.role.permissions) {
-        permissions.add(permission.permissionId);
-      }
-    }
-    acc[externalId].push({
-      id: curr.id,
-      keyAuthId: curr.keyAuthId,
-      name: curr.name,
-      start: curr.start,
-      roles: curr.roles.length,
-      enabled: curr.enabled,
-      permissions: permissions.size,
-      environment: curr.environment,
-    });
-    return acc;
-  }, {} as KeysByOwnerId);
-
-  return (
-    <div className="flex flex-col gap-8 mb-20 ">
-      {keys.length === 0 ? (
-        <Empty>
-          <Empty.Icon />
-          <Empty.Title>No keys found</Empty.Title>
-          <Empty.Description>Create your first key</Empty.Description>
-          <Empty.Actions>
-            <CreateKeyButton apiId={apiId} keyAuthId={keyAuthId!} />
-            <BackButton className="ml-4">Go Back</BackButton>
-          </Empty.Actions>
-
-          {/* <CreateNewRole trigger={<Button variant="primary">Create New Role</Button>} /> */}
-        </Empty>
-      ) : (
-        Object.entries(keysByExternalId).map(([externalId, ks]) => (
-          <div key={externalId} className="flex flex-col gap-2">
-            <div className="flex items-center gap-1">
-              {externalId === nullExternalId ? (
-                <div className="flex items-center justify-between gap-2 text-xs font-medium ph-no-capture">
-                  <VenetianMask className="w-4 h-4 text-content" />
-                  Without OwnerID
-                  <span className="text-xs text-content-subtle">
-                    You can associate keys with the a userId or other identifier from your own
-                    system.
-                  </span>
-                </div>
-              ) : (
-                <div
-                  key="apiId"
-                  className="flex items-center justify-between gap-2 text-xs font-medium ph-no-capture"
-                >
-                  <User className="w-4 h-4 text-content" />
-                  {externalId}
-                </div>
-              )}
-            </div>
-            <ul className="flex flex-col overflow-hidden border divide-y rounded-lg divide-border bg-background border-border">
-              {ks.map((k) => (
-                <Link
-                  href={`/apis/${apiId}/keys/${k.keyAuthId}/${k.id}`}
-                  key={k.id}
-                  className="grid items-center sm:grid-cols-12 px-4 py-2 duration-250 hover:bg-background-subtle gap-2"
-                >
-                  <div className="flex flex-col items-start col-span-6 ">
-                    <span className="text-sm text-content">{k.name}</span>
-                    <pre className="text-xs text-content-subtle">{k.id}</pre>
-                  </div>
-
-                  <div className="flex items-center col-span-2 gap-2">
-                    {k.environment ? <Badge variant="secondary">env: {k.environment}</Badge> : null}
-                  </div>
-
-                  <div className="flex items-center col-span-3 gap-2">
-                    <Badge variant="secondary">
-                      {formatNumber(k.permissions)} Permission
-                      {k.permissions !== 1 ? "s" : ""}
-                    </Badge>
-
-                    <Badge variant="secondary">
-                      {formatNumber(k.roles)} Role
-                      {k.roles !== 1 ? "s" : ""}
-                    </Badge>
-
-                    {!k.enabled && <Badge variant="secondary">Disabled</Badge>}
-                  </div>
-
-                  <div className="flex items-center justify-end col-span-1">
-                    <Button variant="ghost">
-                      <ChevronRight className="w-4 h-4" />
-                    </Button>
-                  </div>
-                </Link>
-              ))}
-            </ul>
-          </div>
-        ))
-      )}
-    </div>
-  );
-};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/navigation.tsx
deleted file mode 100644
index b4df5379f7..0000000000
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/navigation.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client";
-
-import { CopyButton } from "@/components/dashboard/copy-button";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
-import { Navbar } from "@/components/navigation/navbar";
-import { Badge } from "@/components/ui/badge";
-import { Nodes } from "@unkey/icons";
-
-type KeyAuthProps = {
-  id: string;
-  api: {
-    id: string;
-    name: string;
-    keyAuthId: string | null;
-  };
-};
-
-interface NavigationProps {
-  apiId: string;
-  keyAuth: KeyAuthProps;
-}
-
-export function Navigation({ apiId, keyAuth }: NavigationProps) {
-  return (
-    <Navbar>
-      <Navbar.Breadcrumbs icon={<Nodes />}>
-        <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-        <Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
-          {keyAuth.api.name}
-        </Navbar.Breadcrumbs.Link>
-        <Navbar.Breadcrumbs.Link active href={`/apis/${apiId}/keys/${keyAuth.id}`}>
-          Keys
-        </Navbar.Breadcrumbs.Link>
-      </Navbar.Breadcrumbs>
-      <Navbar.Actions>
-        <Badge
-          key="apiId"
-          variant="secondary"
-          className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-        >
-          {keyAuth.api.id}
-          <CopyButton value={keyAuth.api.id} />
-        </Badge>
-        <CreateKeyButton apiId={keyAuth.api.id} keyAuthId={keyAuth.api.keyAuthId!} />
-      </Navbar.Actions>
-    </Navbar>
-  );
-}
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/page.tsx
index 83ae9d71be..4b63001e3b 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/page.tsx
@@ -1,12 +1,6 @@
-import { getOrgId } from "@/lib/auth";
-import { db } from "@/lib/db";
-import { notFound } from "next/navigation";
-
-import { Navbar as SubMenu } from "@/components/dashboard/navbar";
-import { PageContent } from "@/components/page-content";
-import { navigation } from "../../constants";
-import { Keys } from "./keys";
-import { Navigation } from "./navigation";
+import { fetchApiAndWorkspaceDataFromDb } from "../../actions";
+import { ApisNavbar } from "../../api-id-navbar";
+import { KeysClient } from "./_components/keys-client";
 
 export const dynamic = "force-dynamic";
 
@@ -16,31 +10,22 @@ export default async function APIKeysPage(props: {
     keyAuthId: string;
   };
 }) {
-  const orgId = await getOrgId();
+  const apiId = props.params.apiId;
+  const keyspaceId = props.params.keyAuthId;
 
-  const keyAuth = await db.query.keyAuth.findFirst({
-    where: (table, { eq, and, isNull }) =>
-      and(eq(table.id, props.params.keyAuthId), isNull(table.deletedAtM)),
-    with: {
-      workspace: true,
-      api: true,
-    },
-  });
-  if (!keyAuth || keyAuth.workspace.orgId !== orgId) {
-    return notFound();
-  }
+  const { currentApi, workspaceApis } = await fetchApiAndWorkspaceDataFromDb(apiId);
 
   return (
     <div>
-      <Navigation apiId={props.params.apiId} keyAuth={keyAuth} />
-
-      <PageContent>
-        <SubMenu navigation={navigation(keyAuth.api.id, keyAuth.id!)} segment="keys" />
-
-        <div className="flex flex-col gap-8 mt-8 mb-20">
-          <Keys keyAuthId={keyAuth.id} apiId={props.params.apiId} />
-        </div>
-      </PageContent>
+      <ApisNavbar
+        api={currentApi}
+        activePage={{
+          href: `/apis/${apiId}/keys/${keyspaceId}`,
+          text: "Keys",
+        }}
+        apis={workspaceApis}
+      />
+      <KeysClient apiId={props.params.apiId} keyspaceId={keyspaceId} />
     </div>
   );
 }
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/navigation.tsx
deleted file mode 100644
index 8a106d1b1a..0000000000
--- a/apps/dashboard/app/(app)/apis/[apiId]/navigation.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client";
-
-import { CopyButton } from "@/components/dashboard/copy-button";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
-import { Navbar } from "@/components/navigation/navbar";
-import { Badge } from "@/components/ui/badge";
-import type { Api } from "@unkey/db";
-import { Nodes } from "@unkey/icons";
-
-export function Navigation({ api }: { api: Api }) {
-  return (
-    <Navbar>
-      <Navbar.Breadcrumbs icon={<Nodes />}>
-        <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-        <Navbar.Breadcrumbs.Link href={`/apis/${api.id}`} active isIdentifier>
-          {api.name}
-        </Navbar.Breadcrumbs.Link>
-      </Navbar.Breadcrumbs>
-      <Navbar.Actions>
-        <Badge
-          key="apiId"
-          variant="secondary"
-          className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-        >
-          {api.id}
-          <CopyButton value={api.id} />
-        </Badge>
-        <CreateKeyButton apiId={api.id} keyAuthId={api.keyAuthId!} />
-      </Navbar.Actions>
-    </Navbar>
-  );
-}
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/page.tsx
index d08b24457d..4c3a74d15d 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/page.tsx
@@ -1,39 +1,12 @@
-import { getOrgId } from "@/lib/auth";
-import { and, db, eq, isNull } from "@/lib/db";
-import { apis } from "@unkey/db/src/schema";
-import { redirect } from "next/navigation";
 import { LogsClient } from "./_overview/logs-client";
+import { fetchApiAndWorkspaceDataFromDb } from "./actions";
 import { ApisNavbar } from "./api-id-navbar";
 export const dynamic = "force-dynamic";
 
 export default async function ApiPage(props: { params: { apiId: string } }) {
-  const orgId = await getOrgId();
   const apiId = props.params.apiId;
 
-  const currentApi = await db.query.apis.findFirst({
-    where: (table, { and, eq, isNull }) => and(eq(table.id, apiId), isNull(table.deletedAtM)),
-    with: {
-      workspace: {
-        columns: {
-          id: true,
-          orgId: true,
-        },
-      },
-    },
-  });
-
-  if (!currentApi || currentApi.workspace.orgId !== orgId || !currentApi?.keyAuthId) {
-    return redirect("/new");
-  }
-
-  const workspaceApis = await db
-    .select({
-      id: apis.id,
-      name: apis.name,
-    })
-    .from(apis)
-    .where(and(eq(apis.workspaceId, currentApi.workspaceId), isNull(apis.deletedAtM)))
-    .orderBy(apis.name);
+  const { currentApi, workspaceApis } = await fetchApiAndWorkspaceDataFromDb(apiId);
 
   return (
     <div>
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/navigation.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/navigation.tsx
deleted file mode 100644
index aeedeed9ca..0000000000
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/navigation.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-import { CopyButton } from "@/components/dashboard/copy-button";
-import { CreateKeyButton } from "@/components/dashboard/create-key-button";
-import { Navbar } from "@/components/navigation/navbar";
-import { Badge } from "@/components/ui/badge";
-import type { Api } from "@unkey/db";
-import { Nodes } from "@unkey/icons";
-
-export function Navigation({ api }: { api: Api }) {
-  return (
-    <Navbar>
-      <Navbar.Breadcrumbs icon={<Nodes />}>
-        <Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
-        <Navbar.Breadcrumbs.Link href={`/apis/${api.id}`} isIdentifier>
-          {api.name}
-        </Navbar.Breadcrumbs.Link>
-        <Navbar.Breadcrumbs.Link active href={`/apis/${api.id}/settings`}>
-          Settings
-        </Navbar.Breadcrumbs.Link>
-      </Navbar.Breadcrumbs>
-      <Navbar.Actions>
-        <Badge
-          key="apiId"
-          variant="secondary"
-          className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
-        >
-          {api.id}
-          <CopyButton value={api.id} />
-        </Badge>
-        <CreateKeyButton apiId={api.id} keyAuthId={api.keyAuthId!} />
-      </Navbar.Actions>
-    </Navbar>
-  );
-}
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/page.tsx
index 4e498d620c..66b33a845e 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/page.tsx
@@ -1,17 +1,15 @@
 import { CopyButton } from "@/components/dashboard/copy-button";
-import { Navbar as SubMenu } from "@/components/dashboard/navbar";
 import { PageContent } from "@/components/page-content";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Code } from "@/components/ui/code";
 import { getOrgId } from "@/lib/auth";
 import { db, eq, schema } from "@/lib/db";
 import { notFound, redirect } from "next/navigation";
-import { navigation } from "../constants";
+import { ApisNavbar } from "../api-id-navbar";
 import { DefaultBytes } from "./default-bytes";
 import { DefaultPrefix } from "./default-prefix";
 import { DeleteApi } from "./delete-api";
 import { DeleteProtection } from "./delete-protection";
-import { Navigation } from "./navigation";
 import { UpdateApiName } from "./update-api-name";
 import { UpdateIpWhitelist } from "./update-ip-whitelist";
 
@@ -53,11 +51,15 @@ export default async function SettingsPage(props: Props) {
 
   return (
     <div>
-      <Navigation api={api} />
-
+      <ApisNavbar
+        api={api}
+        activePage={{
+          href: `/apis/${api.id}/settings`,
+          text: "Settings",
+        }}
+        apis={workspace.apis}
+      />
       <PageContent>
-        <SubMenu navigation={navigation(api.id, api.keyAuthId!)} segment="settings" />
-
         <div className="flex flex-col gap-8 mb-20 mt-8">
           <UpdateApiName api={api} />
           <DefaultBytes keyAuth={keyAuth} />
diff --git a/apps/dashboard/app/(app)/apis/_components/hooks/use-query-timeseries.ts b/apps/dashboard/app/(app)/apis/_components/hooks/use-query-timeseries.ts
index 58b4b0aca8..39b8190199 100644
--- a/apps/dashboard/app/(app)/apis/_components/hooks/use-query-timeseries.ts
+++ b/apps/dashboard/app/(app)/apis/_components/hooks/use-query-timeseries.ts
@@ -53,6 +53,11 @@ export const useFetchVerificationTimeseries = (keyspaceId: string | null) => {
   const { data, isLoading, isError } = trpc.api.overview.timeseries.useQuery(queryParams, {
     refetchInterval: queryParams.endTime ? false : 10_000,
     enabled,
+    trpc: {
+      context: {
+        skipBatch: true,
+      },
+    },
   });
 
   const timeseries = (data?.timeseries ?? []).map((ts) => ({
diff --git a/apps/dashboard/app/(app)/identities/page.tsx b/apps/dashboard/app/(app)/identities/page.tsx
index cc68c77e99..f4da605fbc 100644
--- a/apps/dashboard/app/(app)/identities/page.tsx
+++ b/apps/dashboard/app/(app)/identities/page.tsx
@@ -62,9 +62,11 @@ export default async function Page(props: Props) {
   );
 }
 
-const Results: React.FC<{ search: string; limit: number }> = async (props) => {
-  const orgId = await getOrgId();
+const Results: React.FC<{ search?: string; limit?: number }> = async (props) => {
+  const search = props.search || "";
+  const limit = props.limit || 10;
 
+  const orgId = await getOrgId();
   const getData = cache(
     async () =>
       db.query.workspaces.findFirst({
@@ -73,11 +75,9 @@ const Results: React.FC<{ search: string; limit: number }> = async (props) => {
         with: {
           identities: {
             where: (table, { or, like }) =>
-              or(like(table.externalId, `%${props.search}%`), like(table.id, `%${props.search}%`)),
-
-            limit: props.limit,
+              or(like(table.externalId, `%${search}%`), like(table.id, `%${search}%`)),
+            limit: limit,
             orderBy: (table, { asc }) => asc(table.id),
-
             with: {
               ratelimits: {
                 columns: {
@@ -93,7 +93,7 @@ const Results: React.FC<{ search: string; limit: number }> = async (props) => {
           },
         },
       }),
-    [`${orgId}-${props.search}-${props.limit}`],
+    [`${orgId}-${search}-${limit}`],
   );
 
   const workspace = await getData();
diff --git a/apps/dashboard/app/(app)/layout.tsx b/apps/dashboard/app/(app)/layout.tsx
index b5b3a82f61..91d36a224d 100644
--- a/apps/dashboard/app/(app)/layout.tsx
+++ b/apps/dashboard/app/(app)/layout.tsx
@@ -29,7 +29,7 @@ export default async function Layout({ children }: LayoutProps) {
   }
 
   return (
-    <div className="h-[100dvh] relative flex flex-col overflow-hidden bg-base-12 lg:flex-row">
+    <div className="h-[100dvh] relative flex flex-col overflow-hidden bg-white dark:bg-base-12 lg:flex-row">
       <SidebarProvider>
         <div className="flex flex-1 overflow-hidden">
           {/* Desktop Sidebar */}
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/charts/bar-chart/hooks/use-fetch-timeseries.ts b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/charts/bar-chart/hooks/use-fetch-timeseries.ts
index 15dd708a84..d834c0054d 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/charts/bar-chart/hooks/use-fetch-timeseries.ts
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/charts/bar-chart/hooks/use-fetch-timeseries.ts
@@ -58,6 +58,11 @@ export const useFetchRatelimitOverviewTimeseries = (namespaceId: string) => {
     queryParams,
     {
       refetchInterval: queryParams.endTime ? false : 10_000,
+      trpc: {
+        context: {
+          skipBatch: true,
+        },
+      },
     },
   );
 
diff --git a/apps/dashboard/components/navigation/navbar.tsx b/apps/dashboard/components/navigation/navbar.tsx
index abb5ee0953..1900434edb 100644
--- a/apps/dashboard/components/navigation/navbar.tsx
+++ b/apps/dashboard/components/navigation/navbar.tsx
@@ -44,7 +44,7 @@ export const Navbar = React.forwardRef<HTMLElement, BaseProps>(
     <nav
       ref={ref}
       className={cn(
-        "w-full p-4 border-b border-gray-4 bg-background justify-between flex min-h-[65px]",
+        "w-full p-4 border-b border-gray-4 bg-transparent justify-between flex min-h-[65px]",
         className,
       )}
       {...props}
diff --git a/apps/dashboard/components/timestamp-info.tsx b/apps/dashboard/components/timestamp-info.tsx
index 806083475f..8379f4e482 100644
--- a/apps/dashboard/components/timestamp-info.tsx
+++ b/apps/dashboard/components/timestamp-info.tsx
@@ -1,10 +1,7 @@
-//https://github.com/supabase/supabase/blob/master/packages/ui-patterns/TimestampInfo/index.tsx
 "use client";
-
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { format, fromUnixTime } from "date-fns";
-import ms from "ms";
+import { format, formatDistanceToNow, fromUnixTime } from "date-fns";
 import { useEffect, useRef, useState } from "react";
 
 const unixMicroToDate = (unix: string | number): Date => {
@@ -29,18 +26,24 @@ const timestampUtcFormatter = (value: string | number) => {
   return format(utcDate, "MMM d,yyyy HH:mm:ss");
 };
 
-const timestampRelativeFormatter = (value: string | number) => {
+const timestampRelativeFormatter = (value: string | number): string => {
   const date = isUnixMicro(value) ? unixMicroToDate(value) : new Date(value);
-  const diffMs = Date.now() - date.getTime();
-  return `${ms(diffMs)} ago`;
+
+  return formatDistanceToNow(date, {
+    addSuffix: true,
+  });
 };
 
+type DisplayType = "local" | "utc" | "relative";
+
 export const TimestampInfo = ({
   value,
   className,
+  displayType = "local",
 }: {
   className?: string;
   value: string | number;
+  displayType?: DisplayType;
 }) => {
   const local = timestampLocalFormatter(value);
   const utc = timestampUtcFormatter(value);
@@ -66,9 +69,21 @@ export const TimestampInfo = ({
     };
   }, []);
 
+  const getDisplayValue = () => {
+    switch (displayType) {
+      case "local":
+        return timestampLocalFormatter(value);
+      case "utc":
+        return utc;
+      case "relative":
+        return relative;
+      default:
+        return timestampLocalFormatter(value);
+    }
+  };
+
   const TooltipRow = ({ label, value }: { label: string; value: string }) => {
     const [copied, setCopied] = useState(false);
-
     return (
       //biome-ignore lint/a11y/useKeyWithClickEvents: no need
       <span
@@ -91,7 +106,7 @@ export const TimestampInfo = ({
   return (
     <Tooltip>
       <TooltipTrigger ref={triggerRef} className={cn("text-xs", className)}>
-        <span className="uppercase">{timestampLocalFormatter(value)}</span>
+        <span>{getDisplayValue()}</span>
       </TooltipTrigger>
       <TooltipContent
         align={align}
diff --git a/apps/dashboard/components/virtual-table/constants.ts b/apps/dashboard/components/virtual-table/constants.ts
index 51d99354fc..3fdf1603a5 100644
--- a/apps/dashboard/components/virtual-table/constants.ts
+++ b/apps/dashboard/components/virtual-table/constants.ts
@@ -6,4 +6,8 @@ export const DEFAULT_CONFIG: TableConfig = {
   overscan: 5,
   throttleDelay: 350,
   headerHeight: 40,
+  layoutMode: "classic", // Default to classic table layout
+  rowBorders: false, // Default to no borders
+  containerPadding: "px-2", // Default container padding
+  rowSpacing: 4, // Default spacing between rows (classic mode)
 } as const;
diff --git a/apps/dashboard/components/virtual-table/index.tsx b/apps/dashboard/components/virtual-table/index.tsx
index 2b8d92d5f3..4fd9032d45 100644
--- a/apps/dashboard/components/virtual-table/index.tsx
+++ b/apps/dashboard/components/virtual-table/index.tsx
@@ -34,7 +34,10 @@ export type VirtualTableRef = {
 
 export const VirtualTable = forwardRef<VirtualTableRef, VirtualTableProps<any>>(
   function VirtualTable<TTableData>(
-    {
+    props: VirtualTableProps<TTableData>,
+    ref: Ref<unknown> | undefined,
+  ) {
+    const {
       data: historicData,
       realtimeData = [],
       columns,
@@ -49,10 +52,12 @@ export const VirtualTable = forwardRef<VirtualTableRef, VirtualTableProps<any>>(
       selectedItem,
       isFetchingNextPage,
       loadMoreFooterProps,
-    }: VirtualTableProps<TTableData>,
-    ref: Ref<unknown> | undefined,
-  ) {
+      renderSkeletonRow,
+    } = props;
+
+    // Merge configs, allowing specific overrides
     const config = { ...DEFAULT_CONFIG, ...userConfig };
+    const isGridLayout = config.layoutMode === "grid";
     const parentRef = useRef<HTMLDivElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -68,6 +73,16 @@ export const VirtualTable = forwardRef<VirtualTableRef, VirtualTableProps<any>>(
       parentRef,
     });
 
+    const tableClassName = cn(
+      "w-full bg-white dark:bg-black ",
+      isGridLayout ? "border-collapse" : "border-separate border-spacing-0",
+    );
+
+    const containerClassName = cn(
+      "overflow-auto relative",
+      config.containerPadding || "px-2", // Default to px-2 if containerPadding is not specified
+    );
+
     // Expose refs and methods to parent components. Primarily used for anchoring log details.
     useImperativeHandle(
       ref,
@@ -87,8 +102,8 @@ export const VirtualTable = forwardRef<VirtualTableRef, VirtualTableProps<any>>(
           style={{ height: `${fixedHeight}px` }}
           ref={containerRef}
         >
-          <table className="w-full border-separate border-spacing-0">
-            <thead className="sticky top-0 z-10 bg-background">
+          <table className={tableClassName}>
+            <thead className="sticky top-0 z-10">
               <tr>
                 {columns.map((column) => (
                   <th
@@ -120,12 +135,8 @@ export const VirtualTable = forwardRef<VirtualTableRef, VirtualTableProps<any>>(
 
     return (
       <div className="w-full flex flex-col" ref={containerRef}>
-        <div
-          ref={parentRef}
-          className="overflow-auto relative px-2"
-          style={{ height: `${fixedHeight}px` }}
-        >
-          <table className="w-full border-separate border-spacing-x-0">
+        <div ref={parentRef} className={containerClassName} style={{ height: `${fixedHeight}px` }}>
+          <table className={tableClassName}>
             <colgroup>
               {colWidths.map((col, idx) => (
                 // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
@@ -169,8 +180,24 @@ export const VirtualTable = forwardRef<VirtualTableRef, VirtualTableProps<any>>(
               />
               {virtualizer.getVirtualItems().map((virtualRow) => {
                 if (isLoading) {
+                  if (renderSkeletonRow) {
+                    return (
+                      <tr
+                        key={`skeleton-${virtualRow.key}`}
+                        style={{ height: `${config.rowHeight}px` }}
+                      >
+                        {renderSkeletonRow({
+                          columns,
+                          rowHeight: config.rowHeight,
+                        })}
+                      </tr>
+                    );
+                  }
                   return (
-                    <tr key={virtualRow.key} style={{ height: `${config.rowHeight}px` }}>
+                    <tr
+                      key={`skeleton-${virtualRow.key}`}
+                      style={{ height: `${config.rowHeight}px` }}
+                    >
                       {columns.map((column) => (
                         <td key={column.key} className="pr-4">
                           <div className="h-4 bg-accent-3 rounded animate-pulse" />
@@ -206,9 +233,75 @@ export const VirtualTable = forwardRef<VirtualTableRef, VirtualTableProps<any>>(
                   ? keyExtractor(selectedItem) === keyExtractor(typedItem)
                   : false;
 
+                if (isGridLayout) {
+                  // Grid layout: single row with optional border
+                  return (
+                    <tr
+                      key={`content-${virtualRow.key}`}
+                      tabIndex={virtualRow.index}
+                      data-index={virtualRow.index}
+                      aria-selected={isSelected}
+                      onClick={() => onRowClick?.(typedItem)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Escape") {
+                          event.preventDefault();
+                          onRowClick?.(null);
+                          const activeElement = document.activeElement as HTMLElement;
+                          activeElement?.blur();
+                        }
+                        if (event.key === "ArrowDown" || event.key === "j") {
+                          event.preventDefault();
+                          const nextElement = document.querySelector(
+                            `[data-index="${virtualRow.index + 1}"]`,
+                          ) as HTMLElement;
+                          if (nextElement) {
+                            nextElement.focus();
+                            nextElement.click();
+                          }
+                        }
+                        if (event.key === "ArrowUp" || event.key === "k") {
+                          event.preventDefault();
+                          const prevElement = document.querySelector(
+                            `[data-index="${virtualRow.index - 1}"]`,
+                          ) as HTMLElement;
+                          if (prevElement) {
+                            prevElement.focus();
+                            prevElement.click();
+                          }
+                        }
+                      }}
+                      className={cn(
+                        "cursor-pointer transition-colors hover:bg-accent/50 focus:outline-none focus:ring-1 focus:ring-opacity-40",
+                        config.rowBorders && "border-b border-gray-4",
+                        rowClassName?.(typedItem),
+                        selectedClassName?.(typedItem, isSelected),
+                      )}
+                      style={{ height: `${config.rowHeight}px` }}
+                    >
+                      {columns.map((column, idx) => (
+                        <td
+                          key={column.key}
+                          className={cn(
+                            "text-xs align-middle whitespace-nowrap pr-4",
+                            idx === 0 ? "rounded-l-md" : "",
+                            idx === columns.length - 1 ? "rounded-r-md" : "",
+                          )}
+                        >
+                          {column.render(typedItem)}
+                        </td>
+                      ))}
+                    </tr>
+                  );
+                }
+                // Classic layout: fragment with configurable spacer row
                 return (
                   <Fragment key={`row-group-${virtualRow.key}`}>
-                    <tr key={`spacer-${virtualRow.key}`} style={{ height: "4px" }} />
+                    {(config.rowSpacing ?? 4) > 0 && (
+                      <tr
+                        key={`spacer-${virtualRow.key}`}
+                        style={{ height: `${config.rowSpacing ?? 4}px` }}
+                      />
+                    )}
                     <tr
                       key={`content-${virtualRow.key}`}
                       tabIndex={virtualRow.index}
@@ -245,6 +338,7 @@ export const VirtualTable = forwardRef<VirtualTableRef, VirtualTableProps<any>>(
                       }}
                       className={cn(
                         "cursor-pointer transition-colors hover:bg-accent/50 focus:outline-none focus:ring-1 focus:ring-opacity-40",
+                        config.rowBorders && "border-b border-gray-4", // Still allow borders in classic mode
                         rowClassName?.(typedItem),
                         selectedClassName?.(typedItem, isSelected),
                       )}
diff --git a/apps/dashboard/components/virtual-table/types.ts b/apps/dashboard/components/virtual-table/types.ts
index eb5be620d3..aaedffddd4 100644
--- a/apps/dashboard/components/virtual-table/types.ts
+++ b/apps/dashboard/components/virtual-table/types.ts
@@ -1,3 +1,5 @@
+import type { ReactNode } from "react";
+
 type ColumnWidth =
   | number // Fixed pixel width
   | string // CSS values like "165px", "15%", etc.
@@ -8,12 +10,12 @@ type ColumnWidth =
   | { flex: number }; // Flex grow ratio
 
 export type SortDirection = "asc" | "desc" | null;
-export type Column<T> = {
+export type Column<TTableData> = {
   key: string;
   header?: string;
   width: ColumnWidth;
   headerClassName?: string;
-  render: (item: T) => React.ReactNode;
+  render: (item: TTableData) => React.ReactNode;
   sort?: {
     sortable?: boolean;
     onSort?: (direction: SortDirection) => void;
@@ -21,28 +23,35 @@ export type Column<T> = {
   };
 };
 
-export type TableConfig = {
+export type TableLayoutMode = "classic" | "grid";
+
+export interface TableConfig {
   rowHeight: number;
   loadingRows: number;
   overscan: number;
   throttleDelay: number;
   headerHeight: number;
-};
 
-export type VirtualTableProps<T> = {
-  data: T[];
-  realtimeData?: T[];
-  columns: Column<T>[];
+  // Layout options
+  layoutMode?: TableLayoutMode; // 'classic' or 'grid'
+  rowBorders?: boolean; // Add borders between rows
+  containerPadding?: string; // Custom padding for container (e.g., 'px-0', 'px-4', 'p-2')
+  rowSpacing?: number; // Space between rows in pixels (for classic mode)
+}
+
+export type VirtualTableProps<TTableData> = {
+  data: TTableData[];
+  realtimeData?: TTableData[];
+  columns: Column<TTableData>[];
   isLoading?: boolean;
   config?: Partial<TableConfig>;
-  onRowClick?: (item: T | null) => void;
+  onRowClick?: (item: TTableData | null) => void;
   onLoadMore?: () => void;
   emptyState?: React.ReactNode;
-  keyExtractor: (item: T) => string | number;
-  rowClassName?: (item: T) => string;
-  focusClassName?: (item: T) => string;
-  selectedClassName?: (item: T, isSelected: boolean) => string;
-  selectedItem?: T | null;
+  keyExtractor: (item: TTableData) => string | number;
+  rowClassName?: (item: TTableData) => string;
+  selectedClassName?: (item: TTableData, isSelected: boolean) => string;
+  selectedItem?: TTableData | null;
   isFetchingNextPage?: boolean;
   loadMoreFooterProps?: {
     itemLabel?: string;
@@ -51,6 +60,10 @@ export type VirtualTableProps<T> = {
     hasMore?: boolean;
     hide?: boolean;
   };
+  renderSkeletonRow?: (props: {
+    columns: Column<TTableData>[];
+    rowHeight: number;
+  }) => ReactNode;
 };
 
 export type SeparatorItem = {
diff --git a/apps/dashboard/lib/trpc/routers/api/keys/llm-search-api-keys/index.ts b/apps/dashboard/lib/trpc/routers/api/keys/llm-search-api-keys/index.ts
new file mode 100644
index 0000000000..1c525d71a5
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/api/keys/llm-search-api-keys/index.ts
@@ -0,0 +1,53 @@
+import { db } from "@/lib/db";
+import { env } from "@/lib/env";
+import { ratelimit, requireUser, requireWorkspace, t, withRatelimit } from "@/lib/trpc/trpc";
+import { TRPCError } from "@trpc/server";
+import OpenAI from "openai";
+import { z } from "zod";
+import { getKeysStructuredSearchFromLLM } from "./utils";
+
+const openai = env().OPENAI_API_KEY
+  ? new OpenAI({
+      apiKey: env().OPENAI_API_KEY,
+    })
+  : null;
+
+export const apiKeysLlmSearch = t.procedure
+  .use(requireUser)
+  .use(requireWorkspace)
+  .use(withRatelimit(ratelimit.read))
+  .input(
+    z.object({
+      query: z.string(),
+      keyspaceId: z.string(),
+    }),
+  )
+  .mutation(async ({ ctx, input }) => {
+    // Verify API access and workspace permissions
+    const api = await db.query.apis
+      .findFirst({
+        where: (api, { and, eq, isNull }) =>
+          and(
+            eq(api.keyAuthId, input.keyspaceId),
+            eq(api.workspaceId, ctx.workspace.id),
+            isNull(api.deletedAtM),
+          ),
+      })
+      .catch((_err) => {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message:
+            "Failed to verify API access. Please try again or contact support@unkey.dev if this persists.",
+        });
+      });
+
+    if (!api) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "API not found or you don't have access to it.",
+      });
+    }
+
+    // Process the natural language query using LLM
+    return await getKeysStructuredSearchFromLLM(openai, input.query);
+  });
diff --git a/apps/dashboard/lib/trpc/routers/api/keys/llm-search-api-keys/utils.ts b/apps/dashboard/lib/trpc/routers/api/keys/llm-search-api-keys/utils.ts
new file mode 100644
index 0000000000..cd683b8991
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/api/keys/llm-search-api-keys/utils.ts
@@ -0,0 +1,248 @@
+import {
+  filterOutputSchema,
+  keysListFilterFieldConfig,
+} from "@/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/filters.schema";
+import { TRPCError } from "@trpc/server";
+import type OpenAI from "openai";
+import { zodResponseFormat } from "openai/helpers/zod.mjs";
+
+/**
+ * Creates a Zod schema for validating LLM-generated structured filter output for keys.
+ * Used with OpenAI's parse completion to enforce type safety and validation rules
+ * defined in keysOverviewFilterFieldConfig.
+ *
+ * @param openai - OpenAI client instance
+ * @param userSearchMsg - User's natural language search query
+ * @param usersReferenceMS - Reference timestamp in milliseconds
+ * @returns Parsed structured search filters or null if OpenAI client is not available
+ */
+export async function getKeysStructuredSearchFromLLM(openai: OpenAI | null, 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-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: getKeysSystemPrompt(),
+        },
+        {
+          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" +
+          "• 'show keys created in the last 30 minutes'\n" +
+          "• 'find keys with name containing test'\n" +
+          "• 'find key with id key_abc123'\n" +
+          "• 'show successful keys since 1h'\n" +
+          "• 'show keys with the outcome valid'\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.",
+    });
+  }
+}
+
+/**
+ * Generates the system prompt for the key search LLM
+ *
+ * @param usersReferenceMS - Reference timestamp in milliseconds
+ * @returns System prompt for the OpenAI conversation
+ */
+export const getKeysSystemPrompt = () => {
+  const operatorsByField = Object.entries(keysListFilterFieldConfig)
+    .map(([field, config]) => {
+      const operators =
+        Array.isArray(config?.operators) && config.operators.length > 0
+          ? config.operators.join(", ")
+          : "no specific operators listed"; // Fallback message
+      const operatorText = Array.isArray(config?.operators)
+        ? `accepts ${operators} operator${config.operators.length > 1 ? "s" : ""}`
+        : "has specific operator constraints"; // General fallback
+      return `- ${field} (${config.type} type) ${operatorText}`;
+    })
+    .join("\n");
+
+  return `You are an expert at converting natural language queries into structured JSON filters for API key searches. You understand context and can infer filter types and operators from natural expressions. Your goal is to generate a JSON array matching the required schema based *only* on the available fields and operators.
+
+Available filter fields and their operators:
+${operatorsByField}
+
+Map user intent to the correct field and operator:
+- 'is', 'equals', 'exact match' -> "is" operator
+- 'contains', 'includes', 'has' -> "contains" operator
+- 'starts with', 'prefix is' -> "startsWith" operator
+- 'ends with', 'suffix is' -> "endsWith" operator
+- If the query implies searching by external ID, user ID, or similar identifiers, use the "identities" field.
+
+Examples:
+
+# Key ID Examples
+Query: "find key key_123abc456"
+Result: [
+  {
+    "field": "keyIds",
+    "filters": [{ "operator": "is", "value": "key_123abc456" }]
+  }
+]
+
+Query: "show keys with id containing test"
+Result: [
+  {
+    "field": "keyIds",
+    "filters": [{ "operator": "contains", "value": "test" }]
+  }
+]
+
+Query: "find keys starting with key_abc"
+Result: [
+  {
+    "field": "keyIds",
+    "filters": [{ "operator": "startsWith", "value": "key_abc" }]
+  }
+]
+
+Query: "keys ending in xyz"
+Result: [
+  {
+    "field": "keyIds",
+    "filters": [{ "operator": "endsWith", "value": "xyz" }]
+  }
+]
+
+
+# Name Examples
+Query: "find keys with name Production Key"
+Result: [
+  {
+    "field": "names",
+    "filters": [{ "operator": "is", "value": "Production Key" }]
+  }
+]
+
+Query: "show keys with name containing 'prod'"
+Result: [
+  {
+    "field": "names",
+    "filters": [{ "operator": "contains", "value": "prod" }]
+  }
+]
+
+Query: "find key names that start with 'test-'"
+Result: [
+  {
+    "field": "names",
+    "filters": [{ "operator": "startsWith", "value": "test-" }]
+  }
+]
+
+# Identities (External ID / Owner ID) Examples
+Query: "find keys for identity user_123"
+Result: [
+  {
+    "field": "identities",
+    "filters": [{ "operator": "is", "value": "user_123" }]
+  }
+]
+
+Query: "show keys associated with external id containing @example.com"
+Result: [
+  {
+    "field": "identities",
+    "filters": [{ "operator": "contains", "value": "@example.com" }]
+  }
+]
+
+Query: "find keys for user IDs starting with 'org_'"
+Result: [
+  {
+    "field": "identities",
+    "filters": [{ "operator": "startsWith", "value": "org_" }]
+  }
+]
+
+# Complex Combinations
+Query: "show keys with name containing 'staging' and identity 'dev_user'"
+Result: [
+  {
+    "field": "names",
+    "filters": [{ "operator": "contains", "value": "staging" }]
+  },
+  {
+    "field": "identities",
+    "filters": [{ "operator": "is", "value": "dev_user" }]
+  }
+]
+
+Query: "find keys starting with 'temp_' or ending with '_test' for identity containing 'customer'"
+Result: [
+ {
+    "field": "keyIds",
+    "filters": [
+        { "operator": "startsWith", "value": "temp_" },
+        { "operator": "endsWith", "value": "_test" }
+     ]
+  },
+  {
+    "field": "identities",
+    "filters": [{ "operator": "contains", "value": "customer" }]
+  }
+]
+
+
+Important Rules:
+1.  Only use the fields: keyIds, names, identities.
+2.  Only use the operators specified for each field: is, contains, startsWith, endsWith.
+3.  Interpret "External ID", "User ID", "Owner ID" or similar concepts as the "identities" field.
+4.  If multiple conditions are given for the same field (e.g., "name contains test or name contains debug"), create multiple filter objects within the 'filters' array for that field.
+5.  If a query is ambiguous (e.g., "find test keys"), prefer the 'contains' operator for the most likely field (e.g., 'names' or 'keyIds'). If unsure, ask for clarification (though you must output JSON, so make a best guess).
+6.  The output MUST be a valid JSON array conforming to the schema, even if the query is unclear or doesn't map perfectly. Output an empty array [] if no filters can be reliably determined.
+
+Output Validation Requirements:
+- The root structure must be a JSON array.
+- Each element in the array must be an object with "field" (string) and "filters" (array) properties.
+- The "field" value must be one of: "keyIds", "names", "identities".
+- Each object within the "filters" array must have "operator" (string) and "value" (string) properties.
+- The "operator" value must be one of: "is", "contains", "startsWith", "endsWith".
+- The "value" must be a string.
+`;
+};
diff --git a/apps/dashboard/lib/trpc/routers/api/keys/query-api-keys/get-all-keys.ts b/apps/dashboard/lib/trpc/routers/api/keys/query-api-keys/get-all-keys.ts
new file mode 100644
index 0000000000..4500916d2c
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/api/keys/query-api-keys/get-all-keys.ts
@@ -0,0 +1,260 @@
+import type { AllOperatorsUrlValue } from "@/app/(app)/apis/[apiId]/_overview/filters.schema";
+import { type SQL, db, like, or } from "@/lib/db";
+import { TRPCError } from "@trpc/server";
+import { identities } from "@unkey/db/src/schema";
+import type { KeyDetails } from "./schema";
+
+interface GetAllKeysInput {
+  keyspaceId: string;
+  workspaceId: string;
+  filters?: {
+    keyIds?: AllOperatorsUrlValue[] | null;
+    names?: AllOperatorsUrlValue[] | null;
+    identities?: AllOperatorsUrlValue[] | null;
+  };
+  limit?: number;
+  cursorKeyId?: string | null;
+}
+
+interface GetAllKeysResult {
+  keys: KeyDetails[];
+  hasMore: boolean;
+  totalCount: number;
+}
+
+/**
+ * Gets API keys with filtering and cursor-based pagination
+ *
+ * @param input Query parameters including keyspaceId, workspaceId, filters, and cursor
+ * @returns Object containing matching keys, hasMore flag for pagination, and totalCount
+ */
+export async function getAllKeys({
+  keyspaceId,
+  workspaceId,
+  filters = {},
+  limit = 50,
+  cursorKeyId = null,
+}: GetAllKeysInput): Promise<GetAllKeysResult> {
+  const { keyIds, names, identities: identityFilters } = filters;
+  try {
+    // Security verification - ensure the keyspaceId belongs to the workspaceId
+    const keyAuth = await db.query.keyAuth.findFirst({
+      where: (keyAuth, { and, eq }) =>
+        and(eq(keyAuth.id, keyspaceId), eq(keyAuth.workspaceId, workspaceId)),
+      with: {
+        api: {
+          columns: {
+            workspaceId: true,
+          },
+        },
+      },
+    });
+    if (!keyAuth) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "Keyspace not found or not authorized",
+      });
+    }
+
+    // Helper function to build the filter conditions (without cursor)
+    const buildFilterConditions = (key: any, { and, isNull, eq, sql }: any) => {
+      const conditions = [eq(key.keyAuthId, keyspaceId), isNull(key.deletedAtM)];
+
+      // Apply name filters
+      if (names && names.length > 0) {
+        const nameConditions = [];
+        for (const filter of names) {
+          const value = filter.value;
+          if (typeof value !== "string") {
+            continue;
+          }
+          switch (filter.operator) {
+            case "is":
+              nameConditions.push(eq(key.name, value));
+              break;
+            case "contains":
+              nameConditions.push(sql`${key.name} LIKE ${`%${value}%`}`);
+              break;
+            case "startsWith":
+              nameConditions.push(sql`${key.name} LIKE ${`${value}%`}`);
+              break;
+            case "endsWith":
+              nameConditions.push(sql`${key.name} LIKE ${`%${value}`}`);
+              break;
+          }
+        }
+        if (nameConditions.length > 0) {
+          conditions.push(sql`(${sql.join(nameConditions, sql` OR `)})`);
+        }
+      }
+
+      // Apply key ID filters
+      if (keyIds && keyIds.length > 0) {
+        const keyIdConditions = [];
+        for (const filter of keyIds) {
+          const value = filter.value;
+          if (typeof value !== "string") {
+            continue;
+          }
+          switch (filter.operator) {
+            case "is":
+              keyIdConditions.push(eq(key.id, value));
+              break;
+            case "contains":
+              keyIdConditions.push(sql`${key.id} LIKE ${`%${value}%`}`);
+              break;
+            case "startsWith":
+              keyIdConditions.push(sql`${key.id} LIKE ${`${value}%`}`);
+              break;
+            case "endsWith":
+              keyIdConditions.push(sql`${key.id} LIKE ${`%${value}`}`);
+              break;
+          }
+        }
+        if (keyIdConditions.length > 0) {
+          conditions.push(sql`(${sql.join(keyIdConditions, sql` OR `)})`);
+        }
+      }
+
+      if (identityFilters && identityFilters.length > 0) {
+        const individualIdentityFilterConditions = [];
+        for (const filter of identityFilters) {
+          const value = filter.value;
+          if (typeof value !== "string") {
+            continue;
+          }
+
+          let ownerIdCondition: SQL<any>;
+          switch (filter.operator) {
+            case "is":
+              ownerIdCondition = eq(key.ownerId, value);
+              break;
+            case "contains":
+              ownerIdCondition = like(key.ownerId, `%${value}%`);
+              break;
+            case "startsWith":
+              ownerIdCondition = like(key.ownerId, `${value}%`);
+              break;
+            case "endsWith":
+              ownerIdCondition = like(key.ownerId, `%${value}`);
+              break;
+            default:
+              ownerIdCondition = eq(key.ownerId, value);
+          }
+
+          const combinedCheckForThisFilter = or(
+            sql`EXISTS (
+                SELECT 1 FROM ${identities} -- Use schema object for table name is fine
+                WHERE ${sql.raw("identities.id")} = ${
+                  key.identityId
+                } -- Use raw 'identities.id'; use schema 'key.identityId' for outer ref
+                  AND ${(() => {
+                    const rawExternalIdColumn = sql.raw("identities.external_id");
+                    switch (filter.operator) {
+                      case "is":
+                        return sql`${rawExternalIdColumn} = ${value}`;
+                      case "contains":
+                        return sql`${rawExternalIdColumn} LIKE ${`%${value}%`}`;
+                      case "startsWith":
+                        return sql`${rawExternalIdColumn} LIKE ${`${value}%`}`;
+                      case "endsWith":
+                        return sql`${rawExternalIdColumn} LIKE ${`%${value}`}`;
+                      default:
+                        return sql`${rawExternalIdColumn} = ${value}`;
+                    }
+                  })()}
+            )`,
+            ownerIdCondition,
+          );
+
+          individualIdentityFilterConditions.push(combinedCheckForThisFilter);
+        }
+
+        if (individualIdentityFilterConditions.length > 0) {
+          conditions.push(...individualIdentityFilterConditions);
+        }
+      }
+
+      return and(...conditions);
+    };
+
+    // Get the total count of keys matching the filters (without pagination)
+    const countQuery = await db.query.keys.findMany({
+      where: buildFilterConditions,
+      columns: {
+        id: true,
+      },
+    });
+
+    const totalCount = countQuery.length;
+
+    // Get the paginated keys with filters and cursor
+    const keysQuery = await db.query.keys.findMany({
+      where: (key, helpers) => {
+        const { and, lt } = helpers;
+        // Get base filter conditions
+        const filterConditions = buildFilterConditions(key, helpers);
+
+        // Add cursor condition for pagination only
+        if (cursorKeyId) {
+          return and(filterConditions, lt(key.id, cursorKeyId));
+        }
+
+        return filterConditions;
+      },
+      with: {
+        identity: {
+          columns: {
+            externalId: true,
+          },
+        },
+      },
+      limit: limit + 1, // Fetch one extra to determine if there are more results
+      orderBy: (keys, { desc }) => desc(keys.id),
+    });
+
+    // Determine if there are more results
+    const hasMore = keysQuery.length > limit;
+    // Remove the extra item if it exists
+    const keys = hasMore ? keysQuery.slice(0, limit) : keysQuery;
+
+    const transformedKeys = keys.map((key) => {
+      const identityData = key.identity
+        ? {
+            external_id: key.identity.externalId,
+          }
+        : null;
+      return {
+        id: key.id,
+        name: key.name,
+        owner_id: key.ownerId,
+        identity_id: key.identityId,
+        enabled: key.enabled,
+        expires: key.expires ? key.expires.getTime() : null,
+        identity: identityData,
+        updated_at_m: key.updatedAtM,
+        start: key.start,
+        key: {
+          remaining: key.remaining,
+          refillAmount: key.refillAmount,
+        },
+      };
+    });
+
+    return {
+      keys: transformedKeys,
+      hasMore,
+      totalCount,
+    };
+  } catch (error) {
+    if (error instanceof TRPCError) {
+      throw error;
+    }
+    console.error("Error retrieving API keys:", error);
+    throw new TRPCError({
+      code: "INTERNAL_SERVER_ERROR",
+      message:
+        "Failed to retrieve API keys. If this issue persists, please contact support@unkey.dev with the time this occurred.",
+    });
+  }
+}
diff --git a/apps/dashboard/lib/trpc/routers/api/keys/query-api-keys/index.ts b/apps/dashboard/lib/trpc/routers/api/keys/query-api-keys/index.ts
new file mode 100644
index 0000000000..508b49638a
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/api/keys/query-api-keys/index.ts
@@ -0,0 +1,46 @@
+import { keysQueryListPayload } from "@/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/query-logs.schema";
+import { ratelimit, requireUser, requireWorkspace, t, withRatelimit } from "@/lib/trpc/trpc";
+import { z } from "zod";
+import { getAllKeys } from "./get-all-keys";
+import { keyDetailsResponseSchema } from "./schema";
+
+const KeysListResponse = z.object({
+  keys: z.array(keyDetailsResponseSchema),
+  hasMore: z.boolean(),
+  nextCursor: z.string().nullish(),
+  totalCount: z.number(),
+});
+
+type KeysListResponse = z.infer<typeof KeysListResponse>;
+
+const PAGINATION_LIMIT = 50;
+export const queryKeysList = t.procedure
+  .use(requireUser)
+  .use(requireWorkspace)
+  .use(withRatelimit(ratelimit.read))
+  .input(keysQueryListPayload)
+  .output(KeysListResponse)
+  .query(async ({ ctx, input }) => {
+    const { keys, hasMore, totalCount } = await getAllKeys({
+      keyspaceId: input.keyAuthId,
+      workspaceId: ctx.workspace.id,
+      filters: {
+        keyIds: input.keyIds,
+        names: input.names,
+        identities: input.identities,
+      },
+      limit: PAGINATION_LIMIT,
+      cursorKeyId: input.cursor ?? null,
+    });
+
+    const lastKeyId = keys.length > 0 ? keys[keys.length - 1].id : null;
+
+    const response: KeysListResponse = {
+      keys: keys,
+      hasMore,
+      totalCount,
+      nextCursor: hasMore && lastKeyId ? lastKeyId : undefined,
+    };
+
+    return response;
+  });
diff --git a/apps/dashboard/lib/trpc/routers/api/keys/query-api-keys/schema.ts b/apps/dashboard/lib/trpc/routers/api/keys/query-api-keys/schema.ts
new file mode 100644
index 0000000000..937a46fd7e
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/api/keys/query-api-keys/schema.ts
@@ -0,0 +1,25 @@
+import { z } from "zod";
+
+export const identitySchema = z.object({
+  external_id: z.string().nullable(),
+});
+
+export type Identity = z.infer<typeof identitySchema>;
+
+export const keyDetailsResponseSchema = z.object({
+  id: z.string(),
+  name: z.string().nullable(),
+  owner_id: z.string().nullable(),
+  identity_id: z.string().nullable(),
+  enabled: z.boolean(),
+  expires: z.number().nullable(),
+  identity: identitySchema.nullable(),
+  updated_at_m: z.number().nullable(),
+  start: z.string(),
+  key: z.object({
+    remaining: z.number().nullable(),
+    refillAmount: z.number().nullable(),
+  }),
+});
+
+export type KeyDetails = z.infer<typeof keyDetailsResponseSchema>;
diff --git a/apps/dashboard/lib/trpc/routers/api/keys/query-key-usage-timeseries/index.ts b/apps/dashboard/lib/trpc/routers/api/keys/query-key-usage-timeseries/index.ts
new file mode 100644
index 0000000000..cb713821ea
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/api/keys/query-key-usage-timeseries/index.ts
@@ -0,0 +1,42 @@
+import { keysListQueryTimeseriesPayload } from "@/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/query-timeseries.schema";
+import { clickhouse } from "@/lib/clickhouse";
+import { ratelimit, requireUser, requireWorkspace, t, withRatelimit } from "@/lib/trpc/trpc";
+import { TRPCError } from "@trpc/server";
+
+export const keyUsageTimeseries = t.procedure
+  .use(requireUser)
+  .use(requireWorkspace)
+  .use(withRatelimit(ratelimit.read))
+  .input(keysListQueryTimeseriesPayload)
+  .query(async ({ ctx, input }) => {
+    try {
+      const result = await clickhouse.verifications.timeseries.perHour({
+        workspaceId: ctx.workspace.id,
+        endTime: input.endTime,
+        startTime: input.startTime,
+        keyspaceId: input.keyAuthId,
+        keyId: input.keyId,
+        identities: null,
+        keyIds: null,
+        names: null,
+        outcomes: null,
+      });
+
+      if (!result || result.length === 0) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Something went wrong when fetching data from ClickHouse.",
+        });
+      }
+
+      return {
+        timeseries: result,
+      };
+    } catch (error) {
+      console.error("Error fetching timeseries data:", error);
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "Something went wrong when fetching data from ClickHouse.",
+      });
+    }
+  });
diff --git a/apps/dashboard/lib/trpc/routers/api/keys/query-latest-verification/index.ts b/apps/dashboard/lib/trpc/routers/api/keys/query-latest-verification/index.ts
new file mode 100644
index 0000000000..a009dfdb2a
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/api/keys/query-latest-verification/index.ts
@@ -0,0 +1,34 @@
+import { clickhouse } from "@/lib/clickhouse";
+import { requireUser, requireWorkspace, t } from "@/lib/trpc/trpc";
+import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+
+const lastVerificationTimePayload = z.object({
+  keyAuthId: z.string(),
+  keyId: z.string(),
+});
+
+// tRPC endpoint for getting just the time of the latest verification
+export const keyLastVerificationTime = t.procedure
+  .use(requireUser)
+  .use(requireWorkspace)
+  .input(lastVerificationTimePayload)
+  .query(async ({ ctx, input }) => {
+    const result = await clickhouse.verifications.latest({
+      workspaceId: ctx.workspace.id,
+      keySpaceId: input.keyAuthId,
+      keyId: input.keyId,
+      limit: 1,
+    });
+
+    if (!result || result.err) {
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "Something went wrong when fetching data from ClickHouse.",
+      });
+    }
+
+    return {
+      lastVerificationTime: result.val.length > 0 ? result.val[0].time : null,
+    };
+  });
diff --git a/apps/dashboard/lib/trpc/routers/api/keys/toggle-key-enabled/index.ts b/apps/dashboard/lib/trpc/routers/api/keys/toggle-key-enabled/index.ts
new file mode 100644
index 0000000000..39d756c8ff
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/api/keys/toggle-key-enabled/index.ts
@@ -0,0 +1,65 @@
+import { and, db, eq, isNull } from "@/lib/db";
+import { ratelimit, requireUser, requireWorkspace, t, withRatelimit } from "@/lib/trpc/trpc";
+import { TRPCError } from "@trpc/server";
+import { keys } from "@unkey/db/src/schema";
+import { z } from "zod";
+
+export const enableKey = t.procedure
+  .use(requireUser)
+  .use(requireWorkspace)
+  .use(withRatelimit(ratelimit.update))
+  .input(
+    z.object({
+      keyId: z.string().min(1),
+    }),
+  )
+  .mutation(async ({ ctx, input }) => {
+    const keyToEnable = await db.query.keys
+      .findFirst({
+        where: and(
+          eq(keys.id, input.keyId),
+          eq(keys.workspaceId, ctx.workspace.id),
+          isNull(keys.deletedAtM),
+        ),
+        columns: {
+          id: true,
+          enabled: true,
+        },
+      })
+      .catch((err) => {
+        console.error("Database error finding key for enabling:", err);
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Failed to check key status. Please try again.",
+        });
+      });
+
+    if (!keyToEnable) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "Key not found or you don't have access to modify it.",
+      });
+    }
+
+    if (keyToEnable.enabled) {
+      throw new TRPCError({
+        code: "BAD_REQUEST",
+        message: "Key is already enabled.",
+      });
+    }
+
+    try {
+      await db
+        .update(keys)
+        .set({ enabled: true })
+        .where(and(eq(keys.id, input.keyId), eq(keys.workspaceId, ctx.workspace.id)));
+    } catch (err) {
+      console.error("Database error enabling key:", err);
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "Failed to enable the key. Please try again.",
+      });
+    }
+
+    return { success: true };
+  });
diff --git a/apps/dashboard/lib/trpc/routers/index.ts b/apps/dashboard/lib/trpc/routers/index.ts
index bc3abf4263..db016ef008 100644
--- a/apps/dashboard/lib/trpc/routers/index.ts
+++ b/apps/dashboard/lib/trpc/routers/index.ts
@@ -2,9 +2,14 @@ import { t } from "../trpc";
 import { createApi } from "./api/create";
 import { deleteApi } from "./api/delete";
 import { keysLlmSearch } from "./api/keys/llm-search";
+import { apiKeysLlmSearch } from "./api/keys/llm-search-api-keys";
 import { activeKeysTimeseries } from "./api/keys/query-active-keys-timeseries";
+import { queryKeysList } from "./api/keys/query-api-keys";
+import { keyUsageTimeseries } from "./api/keys/query-key-usage-timeseries";
+import { keyLastVerificationTime } from "./api/keys/query-latest-verification";
 import { queryKeysOverviewLogs } from "./api/keys/query-overview-logs";
 import { keyVerificationsTimeseries } from "./api/keys/query-overview-timeseries";
+import { enableKey } from "./api/keys/toggle-key-enabled";
 import { overviewApiSearch } from "./api/overview-api-search";
 import { queryApisOverview } from "./api/overview/query-overview";
 import { queryVerificationTimeseries } from "./api/overview/query-timeseries";
@@ -110,6 +115,11 @@ export const router = t.router({
       activeKeysTimeseries: activeKeysTimeseries,
       query: queryKeysOverviewLogs,
       llmSearch: keysLlmSearch,
+      list: queryKeysList,
+      listLlmSearch: apiKeysLlmSearch,
+      enableKey: enableKey,
+      usageTimeseries: keyUsageTimeseries,
+      latestVerification: keyLastVerificationTime,
     }),
     overview: t.router({
       timeseries: queryVerificationTimeseries,
diff --git a/apps/docs/api-reference/errors-v2/unkey/data/invalid_input.mdx b/apps/docs/api-reference/errors-v2/unkey/data/invalid_input.mdx
deleted file mode 100644
index 799f612a71..0000000000
--- a/apps/docs/api-reference/errors-v2/unkey/data/invalid_input.mdx
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: "err:unkey:data:invalid_input"
-description: "Client provided input that failed validation"
----
-
-
-```json Example
-{
-  "meta": {
-    "requestId": "req_2c9a0jf23l4k567"
-  },
-  "error": {
-    "detail": "The request contains invalid input that failed validation",
-    "status": 400,
-    "title": "Bad Request",
-    "type": "https://unkey.com/docs/api-reference/errors-v2/unkey/data/invalid_input",
-    "errors": [
-      {
-        "location": "body.limit",
-        "message": "must be greater than or equal to 1",
-        "fix": "Provide a limit value of at least 1"
-      }
-    ]
-  }
-}
-```
-
-## What Happened?
-
-This error occurs when your request contains input data that doesn't meet Unkey's validation requirements. This could be due to missing required fields, values that are out of allowed ranges, incorrectly formatted data, or other validation failures.
-
-Common validation issues include:
-- Missing required fields
-- Values that exceed minimum or maximum limits
-- Strings that don't match required patterns
-- Invalid formats for IDs, emails, or other structured data
-- Type mismatches (e.g., providing a string where a number is expected)
-
-Here's an example of a request that would trigger this error:
-
-```bash
-# Attempting to create a rate limit with an invalid limit value of 0
-curl -X POST https://api.unkey.com/v2/ratelimit.limit \
-  -H "Content-Type: application/json" \
-  -H "Authorization: Bearer unkey_YOUR_API_KEY" \
-  -d '{
-    "namespace": "api.requests",
-    "identifier": "user_123",
-    "limit": 0,
-    "duration": 60000
-  }'
-```
-
-## How To Fix
-
-To fix this error, carefully review the error details provided in the response. The `errors` array contains specific information about what failed validation:
-
-1. Check the `location` field to identify which part of your request is problematic
-2. Read the `message` field for details about why validation failed
-3. Look at the `fix` field (if available) for guidance on how to correct the issue
-4. Modify your request to comply with the validation requirements
-
-Here's the corrected version of our example request:
-
-```bash
-# Corrected request with a valid limit value
-curl -X POST https://api.unkey.com/v2/ratelimit.limit \
-  -H "Content-Type: application/json" \
-  -H "Authorization: Bearer unkey_YOUR_API_KEY" \
-  -d '{
-    "namespace": "api.requests",
-    "identifier": "user_123",
-    "limit": 100,
-    "duration": 60000
-  }'
-```
-
-## Common Mistakes
-
-- **Ignoring schema requirements**: Not checking the API documentation for field requirements
-- **Range violations**: Providing values outside of allowed ranges (too small, too large)
-- **Format errors**: Not following the required format for IDs, emails, or other structured data
-- **Missing fields**: Omitting required fields in API requests
-- **Type errors**: Sending the wrong data type (e.g., string instead of number)
-
-## Related Errors
-- [err:unkey:data:assertion_failed](./assertion_failed) - When a runtime assertion or invariant check fails
-- [err:unkey:data:protected_resource](./protected_resource) - When attempting to modify a protected resource
diff --git a/apps/docs/docs.json b/apps/docs/docs.json
index 70ee74385f..ef3627d0a0 100644
--- a/apps/docs/docs.json
+++ b/apps/docs/docs.json
@@ -210,7 +210,6 @@
                           "api-reference/errors-v2/unkey/data/audit_log_not_found",
                           "api-reference/errors-v2/unkey/data/identity_already_exists",
                           "api-reference/errors-v2/unkey/data/identity_not_found",
-                          "api-reference/errors-v2/unkey/data/invalid_input",
                           "api-reference/errors-v2/unkey/data/key_auth_not_found",
                           "api-reference/errors-v2/unkey/data/key_not_found",
                           "api-reference/errors-v2/unkey/data/permission_not_found",
diff --git a/go/apps/api/routes/v2_ratelimit_limit/401_test.go b/go/apps/api/routes/v2_ratelimit_limit/401_test.go
index 089ff8784b..fc7019ab14 100644
--- a/go/apps/api/routes/v2_ratelimit_limit/401_test.go
+++ b/go/apps/api/routes/v2_ratelimit_limit/401_test.go
@@ -41,5 +41,4 @@ func TestUnauthorizedAccess(t *testing.T) {
 		require.Equal(t, http.StatusUnauthorized, res.Status)
 		require.NotNil(t, res.Body)
 	})
-
 }
diff --git a/go/pkg/codes/constants_gen.go b/go/pkg/codes/constants_gen.go
index 87ca6d3768..0b3bba1c5c 100644
--- a/go/pkg/codes/constants_gen.go
+++ b/go/pkg/codes/constants_gen.go
@@ -1,5 +1,5 @@
 // Code generated by generate.go; DO NOT EDIT.
-// Generated at: 2025-04-15T09:43:25+02:00
+// Generated at: 2025-04-15T10:11:18+02:00
 
 package codes
 
diff --git a/internal/clickhouse/src/latest_verifications.ts b/internal/clickhouse/src/latest_verifications.ts
index 2bc63078e6..1a8369f579 100644
--- a/internal/clickhouse/src/latest_verifications.ts
+++ b/internal/clickhouse/src/latest_verifications.ts
@@ -5,7 +5,9 @@ const params = z.object({
   workspaceId: z.string(),
   keySpaceId: z.string(),
   keyId: z.string(),
+  limit: z.number().int().positive().default(50).nullish(),
 });
+
 export function getLatestVerifications(ch: Querier) {
   return async (args: z.infer<typeof params>) => {
     const query = ch.query({
@@ -20,7 +22,7 @@ export function getLatestVerifications(ch: Querier) {
     AND key_space_id = {keySpaceId: String}
     AND key_id = {keyId: String}
     ORDER BY time DESC
-    LIMIT 50`,
+    LIMIT {limit: Int}`,
       params,
       schema: z.object({
         time: z.number(),
diff --git a/internal/icons/src/icons/chart-activity-2.tsx b/internal/icons/src/icons/chart-activity-2.tsx
index 6fbbeeeb4e..174b6a238a 100644
--- a/internal/icons/src/icons/chart-activity-2.tsx
+++ b/internal/icons/src/icons/chart-activity-2.tsx
@@ -10,19 +10,27 @@
  * https://nucleoapp.com/license
  */
 import type React from "react";
-import type { IconProps } from "../props";
+import { type IconProps, sizeMap } from "../props";
+
+export const ChartActivity2: React.FC<IconProps> = ({ size = "xl-thin", ...props }) => {
+  const { size: pixelSize, strokeWidth } = sizeMap[size];
 
-export const ChartActivity2: React.FC<IconProps> = (props) => {
   return (
-    <svg {...props} height="18" width="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      {...props}
+      height={pixelSize}
+      width={pixelSize}
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <g fill="currentColor">
         <path
-          d="m17,10h-2.75l-2.2502,6.0005-3.9995-12.001-2.2502,6.0005h-2.75"
+          d="M16.25,8.75h-2.297c-.422,0-.798,.265-.941,.661l-1.647,4.575c-.12,.334-.594,.328-.706-.008L7.341,4.022c-.112-.336-.586-.342-.706-.008l-1.647,4.575c-.143,.397-.519,.661-.941,.661H1.75"
           fill="none"
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
-          strokeWidth="1.5"
+          strokeWidth={strokeWidth}
         />
       </g>
     </svg>
diff --git a/internal/icons/src/icons/circle-caret-down.tsx b/internal/icons/src/icons/circle-caret-down.tsx
new file mode 100644
index 0000000000..720f0e83fb
--- /dev/null
+++ b/internal/icons/src/icons/circle-caret-down.tsx
@@ -0,0 +1,45 @@
+/**
+ * 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, sizeMap } from "../props";
+
+export const CircleCaretDown: React.FC<IconProps> = ({ size = "xl-thin", ...props }) => {
+  const { size: pixelSize, strokeWidth } = sizeMap[size];
+
+  return (
+    <svg
+      height={pixelSize}
+      width={pixelSize}
+      {...props}
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill="currentColor">
+        <path
+          d="M9.621,11.157l2.022-2.987c.337-.498-.02-1.17-.621-1.17H6.978c-.601,0-.958,.672-.621,1.17l2.022,2.987c.297,.439,.945,.439,1.242,0Z"
+          fill="currentColor"
+          stroke="none"
+        />
+        <circle
+          cx="9"
+          cy="9"
+          fill="none"
+          r="7.25"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+      </g>
+    </svg>
+  );
+};
diff --git a/internal/icons/src/icons/circle-half-dotted-clock.tsx b/internal/icons/src/icons/circle-half-dotted-clock.tsx
index 036eafa3f6..705ad5696e 100644
--- a/internal/icons/src/icons/circle-half-dotted-clock.tsx
+++ b/internal/icons/src/icons/circle-half-dotted-clock.tsx
@@ -10,33 +10,43 @@
  * https://nucleoapp.com/license
  */
 import type React from "react";
-import type { IconProps } from "../props";
+import { type IconProps, sizeMap } from "../props";
+
+export const CircleHalfDottedClock: React.FC<IconProps> = ({ size = "xl-thin", ...props }) => {
+  const { size: pixelSize, strokeWidth } = sizeMap[size];
 
-export const CircleHalfDottedClock: React.FC<IconProps> = (props) => {
   return (
-    <svg {...props} height="18" width="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      {...props}
+      height={pixelSize}
+      width={pixelSize}
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <g fill="currentColor">
         <polyline
           fill="none"
-          points="10 7 10 10 12 12"
+          points="9 4.75 9 9 12.25 11.25"
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
-          strokeWidth="1.5"
+          strokeWidth={strokeWidth}
         />
         <path
-          d="m10,3c3.866,0,7,3.134,7,7s-3.134,7-7,7"
+          d="M9,1.75c4.004,0,7.25,3.246,7.25,7.25s-3.246,7.25-7.25,7.25"
           fill="none"
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
-          strokeWidth="1.5"
+          strokeWidth={strokeWidth}
         />
-        <circle cx="6.5" cy="16.062" fill="currentColor" r="1" strokeWidth="0" />
-        <circle cx="3.938" cy="13.5" fill="currentColor" r="1" strokeWidth="0" />
-        <circle cx="3" cy="10" fill="currentColor" r="1" strokeWidth="0" />
-        <circle cx="3.938" cy="6.5" fill="currentColor" r="1" strokeWidth="0" />
-        <circle cx="6.5" cy="3.938" fill="currentColor" r="1" strokeWidth="0" />
+        <circle cx="3.873" cy="14.127" fill="currentColor" r=".75" stroke="none" />
+        <circle cx="1.75" cy="9" fill="currentColor" r=".75" stroke="none" />
+        <circle cx="3.873" cy="3.873" fill="currentColor" r=".75" stroke="none" />
+        <circle cx="6.226" cy="15.698" fill="currentColor" r=".75" stroke="none" />
+        <circle cx="2.302" cy="11.774" fill="currentColor" r=".75" stroke="none" />
+        <circle cx="2.302" cy="6.226" fill="currentColor" r=".75" stroke="none" />
+        <circle cx="6.226" cy="2.302" fill="currentColor" r=".75" stroke="none" />
       </g>
     </svg>
   );
diff --git a/internal/icons/src/icons/circle-lock.tsx b/internal/icons/src/icons/circle-lock.tsx
new file mode 100644
index 0000000000..3b3d4e431a
--- /dev/null
+++ b/internal/icons/src/icons/circle-lock.tsx
@@ -0,0 +1,61 @@
+/**
+ * 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, sizeMap } from "../props";
+
+export const CircleLock: React.FC<IconProps> = ({ size = "xl-thin", ...props }) => {
+  const { size: pixelSize, strokeWidth } = sizeMap[size];
+
+  return (
+    <svg
+      {...props}
+      height={pixelSize}
+      width={pixelSize}
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill="currentColor">
+        <circle
+          cx="9"
+          cy="9"
+          fill="none"
+          r="7.25"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+        <circle
+          cx="9"
+          cy="8.25"
+          fill="none"
+          r="2"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+        />
+        <line
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          x1="9"
+          x2="9"
+          y1="10.25"
+          y2="12.5"
+        />
+      </g>
+    </svg>
+  );
+};
diff --git a/internal/icons/src/icons/shield-key.tsx b/internal/icons/src/icons/shield-key.tsx
index cc4b2d5739..83b15cd10c 100644
--- a/internal/icons/src/icons/shield-key.tsx
+++ b/internal/icons/src/icons/shield-key.tsx
@@ -11,10 +11,18 @@
  */
 import type React from "react";
 
-import type { IconProps } from "../props";
-export const ShieldKey: React.FC<IconProps> = (props) => {
+import { type IconProps, sizeMap } from "../props";
+export const ShieldKey: React.FC<IconProps> = ({ size = "xl-thin", ...props }) => {
+  const { size: pixelSize, strokeWidth } = sizeMap[size || "md-regular"];
+
   return (
-    <svg {...props} height="18" width="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      {...props}
+      height={pixelSize}
+      width={pixelSize}
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <g fill="currentColor">
         <circle
           cx="10"
@@ -24,14 +32,14 @@ export const ShieldKey: React.FC<IconProps> = (props) => {
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
-          strokeWidth="1.5"
+          strokeWidth={strokeWidth}
         />
         <line
           fill="none"
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
-          strokeWidth="1.5"
+          strokeWidth={strokeWidth}
           x1="12"
           x2="16.5"
           y1="9.25"
@@ -42,7 +50,7 @@ export const ShieldKey: React.FC<IconProps> = (props) => {
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
-          strokeWidth="1.5"
+          strokeWidth={strokeWidth}
           x1="15.25"
           x2="15.25"
           y1="9.25"
@@ -54,7 +62,7 @@ export const ShieldKey: React.FC<IconProps> = (props) => {
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
-          strokeWidth="1.5"
+          strokeWidth={strokeWidth}
         />
       </g>
     </svg>
diff --git a/internal/icons/src/index.ts b/internal/icons/src/index.ts
index 87a9bf6371..0f8d2e97b6 100644
--- a/internal/icons/src/index.ts
+++ b/internal/icons/src/index.ts
@@ -1,39 +1,43 @@
 export * from "./icons/arrow-dot-anti-clockwise";
+export * from "./icons/arrow-dotted-rotate-anticlockwise";
+export * from "./icons/arrow-opposite-direction-y";
 export * from "./icons/ban";
 export * from "./icons/bars-filter";
 export * from "./icons/bolt";
 export * from "./icons/book-2";
 export * from "./icons/book-bookmark";
 export * from "./icons/bookmark";
+export * from "./icons/brackets-curly";
 export * from "./icons/bucket";
 export * from "./icons/calendar";
 export * from "./icons/calendar-event";
 export * from "./icons/caret-down";
 export * from "./icons/caret-expand-y";
-export * from "./icons/caret-right-outline";
 export * from "./icons/caret-right";
+export * from "./icons/caret-right-outline";
 export * from "./icons/caret-up";
 export * from "./icons/chart-activity-2";
 export * from "./icons/chart-bar-axis-y";
+export * from "./icons/chart-usage";
+export * from "./icons/chats";
 export * from "./icons/check";
 export * from "./icons/chevron-down";
 export * from "./icons/chevron-expand-y";
 export * from "./icons/chevron-left";
-export * from "./icons/chart-usage";
-export * from "./icons/chats";
 export * from "./icons/chevron-right";
 export * from "./icons/chevron-up";
+export * from "./icons/circle-caret-down";
 export * from "./icons/circle-caret-right";
 export * from "./icons/circle-check";
-export * from "./icons/brackets-curly";
 export * from "./icons/circle-half-dotted-clock";
-export * from "./icons/circle-info-sparkle";
 export * from "./icons/circle-info";
+export * from "./icons/circle-info-sparkle";
+export * from "./icons/circle-lock";
 export * from "./icons/circle-question";
-export * from "./icons/clipboard-check";
 export * from "./icons/clipboard";
-export * from "./icons/clock-rotate-clockwise";
+export * from "./icons/clipboard-check";
 export * from "./icons/clock";
+export * from "./icons/clock-rotate-clockwise";
 export * from "./icons/clone";
 export * from "./icons/conversion";
 export * from "./icons/dots";
@@ -45,10 +49,12 @@ export * from "./icons/gear";
 export * from "./icons/grid";
 export * from "./icons/input-search";
 export * from "./icons/key";
+export * from "./icons/laptop-2";
 export * from "./icons/layers-2";
 export * from "./icons/layers-3";
 export * from "./icons/link-4";
 export * from "./icons/magnifier";
+export * from "./icons/moon-stars";
 export * from "./icons/nodes";
 export * from "./icons/pen-writing-3";
 export * from "./icons/plus";
@@ -57,22 +63,18 @@ export * from "./icons/pulse";
 export * from "./icons/refresh-3";
 export * from "./icons/shield-check";
 export * from "./icons/shield-key";
-export * from "./icons/sidebar-left-show";
 export * from "./icons/sidebar-left-hide";
+export * from "./icons/sidebar-left-show";
 export * from "./icons/sliders";
 export * from "./icons/sparkle-3";
 export * from "./icons/storage";
+export * from "./icons/sun";
 export * from "./icons/task-checked";
 export * from "./icons/task-unchecked";
 export * from "./icons/time-clock";
 export * from "./icons/trash";
-export * from "./icons/triangle-warning-2";
 export * from "./icons/triangle-warning";
+export * from "./icons/triangle-warning-2";
 export * from "./icons/ufo";
 export * from "./icons/user-search";
 export * from "./icons/xmark";
-export * from "./icons/arrow-opposite-direction-y";
-export * from "./icons/arrow-dotted-rotate-anticlockwise";
-export * from "./icons/sun";
-export * from "./icons/moon-stars";
-export * from "./icons/laptop-2";
diff --git a/internal/ui/colors.css b/internal/ui/colors.css
index 9586a93cd6..b023600376 100644
--- a/internal/ui/colors.css
+++ b/internal/ui/colors.css
@@ -37,17 +37,17 @@ https://www.radix-ui.com/colors/docs/palette-composition/scales
     --grayA-12: 207, 100%, 2%, 0.89;
 
     /* Base (Base A) */
-    --base-1: 0, 0%, 100%, 0.1;
-    --base-2: 0, 0%, 100%, 0.15;
-    --base-3: 0, 0%, 100%, 0.2;
-    --base-4: 0, 0%, 100%, 0.25;
-    --base-5: 0, 0%, 100%, 0.35;
-    --base-6: 0, 0%, 100%, 0.45;
-    --base-7: 0, 0%, 100%, 0.55;
-    --base-8: 0, 0%, 100%, 0.65;
-    --base-9: 0, 0%, 100%, 0.75;
-    --base-10: 0, 0%, 100%, 0.85;
-    --base-11: 0, 0%, 100%, 0.95;
+    --base-1: 0, 0%, 100%, 0.01;
+    --base-2: 0, 0%, 100%, 0.03;
+    --base-3: 0, 0%, 100%, 0.06;
+    --base-4: 0, 0%, 100%, 0.1;
+    --base-5: 0, 0%, 100%, 0.15;
+    --base-6: 0, 0%, 100%, 0.25;
+    --base-7: 0, 0%, 100%, 0.35;
+    --base-8: 0, 0%, 100%, 0.5;
+    --base-9: 0, 0%, 100%, 0.65;
+    --base-10: 0, 0%, 100%, 0.8;
+    --base-11: 0, 0%, 100%, 0.9;
     --base-12: 0, 0%, 100%, 1;
 
     /* Teal */
@@ -92,6 +92,20 @@ https://www.radix-ui.com/colors/docs/palette-composition/scales
     --orange-11: 23, 100%, 40%;
     --orange-12: 16, 50%, 23%;
 
+    /* OrangeA */
+    --orangeA-1: 20, 100%, 38%, 0.02;
+    --orangeA-2: 20, 100%, 50%, 0.06;
+    --orangeA-3: 23, 100%, 50%, 0.13;
+    --orangeA-4: 22, 100%, 50%, 0.25;
+    --orangeA-5: 22, 100%, 50%, 0.33;
+    --orangeA-6: 21, 100%, 50%, 0.42;
+    --orangeA-7: 19, 100%, 49%, 0.49;
+    --orangeA-8: 19, 100%, 45%, 0.61;
+    --orangeA-9: 23, 100%, 48%, 0.92;
+    --orangeA-10: 24, 100%, 46%, 1;
+    --orangeA-11: 22, 100%, 41%, 1;
+    --orangeA-12: 19, 100%, 13%, 0.9;
+
     /* Amber */
     --warning-1: 40, 60%, 99%;
     --warning-2: 51, 91%, 95%;
@@ -221,6 +235,19 @@ https://www.radix-ui.com/colors/docs/palette-composition/scales
     --grayA-11: 212, 87%, 97%, 0.71;
     --grayA-12: 220, 100%, 99%, 0.95;
 
+    --base-1: 0, 0%, 0%, 0.01;
+    --base-2: 0, 0%, 0%, 0.03;
+    --base-3: 0, 0%, 0%, 0.06;
+    --base-4: 0, 0%, 0%, 0.1;
+    --base-5: 0, 0%, 0%, 0.15;
+    --base-6: 0, 0%, 0%, 0.25;
+    --base-7: 0, 0%, 0%, 0.35;
+    --base-8: 0, 0%, 0%, 0.5;
+    --base-9: 0, 0%, 0%, 0.65;
+    --base-10: 0, 0%, 0%, 0.8;
+    --base-11: 0, 0%, 0%, 0.9;
+    --base-12: 0, 0%, 0%, 1;
+
     /* Teal */
     --success-1: 173, 24%, 7%;
     --success-2: 175, 24%, 9%;
@@ -263,6 +290,20 @@ https://www.radix-ui.com/colors/docs/palette-composition/scales
     --orange-11: 26, 100%, 67%;
     --orange-12: 29, 100%, 88%;
 
+    /* OrangeA */
+    --orangeA-1: 0, 100%, 45%, 0.02;
+    --orangeA-2: 20, 100%, 50%, 0.06;
+    --orangeA-3: 19, 98%, 52%, 0.15;
+    --orangeA-4: 15, 100%, 49%, 0.25;
+    --orangeA-5: 20, 100%, 50%, 0.31;
+    --orangeA-6: 20, 98%, 57%, 0.37;
+    --orangeA-7: 20, 100%, 62%, 0.47;
+    --orangeA-8: 19, 100%, 63%, 0.62;
+    --orangeA-9: 23, 99%, 54%, 0.97;
+    --orangeA-10: 24, 100%, 50%, 0.91;
+    --orangeA-11: 20, 100%, 71%, 1;
+    --orangeA-12: 20, 100%, 90%, 1;
+
     /* Amber */
     --warning-1: 36, 29%, 7%;
     --warning-2: 39, 32%, 9%;
diff --git a/internal/ui/src/components/button.tsx b/internal/ui/src/components/button.tsx
index fd268f419b..6ce241fa46 100644
--- a/internal/ui/src/components/button.tsx
+++ b/internal/ui/src/components/button.tsx
@@ -217,7 +217,7 @@ const VARIANT_MAP: Record<string, { variant: ButtonVariant; color?: ButtonColor
 };
 
 // New animated loading spinner component
-const AnimatedLoadingSpinner = () => {
+export const AnimatedLoadingSpinner = () => {
   const [segmentIndex, setSegmentIndex] = React.useState(0);
 
   // Each segment ID in the order they should light up
diff --git a/internal/ui/tailwind.config.js b/internal/ui/tailwind.config.js
index bba7dd4227..5d4a7b6e35 100644
--- a/internal/ui/tailwind.config.js
+++ b/internal/ui/tailwind.config.js
@@ -48,7 +48,7 @@ export default {
 const getColor = (colorVar, { opacityVariable, opacityValue }) => {
   // For alpha colors, we need to extract the alpha from the variable itself
   // to avoid the syntax error in the generated CSS
-  const alphaColors = ["grayA", "errorA", "successA", "warningA"];
+  const alphaColors = ["grayA", "errorA", "successA", "warningA", "orangeA"];
   if (alphaColors.some((color) => colorVar.includes(color))) {
     return `hsla(var(--${colorVar.replace("--", "")}))`;
   }
@@ -70,6 +70,7 @@ function generateRadixColors() {
     "success",
     "successA", // Added tealA
     "orange",
+    "orangeA",
     "warning",
     "warningA", // Added amberA
     "error",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 189af4853e..56598e6da7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -179,7 +179,7 @@ importers:
         version: 4.0.9
       ai:
         specifier: ^3.4.7
-        version: 3.4.7(react@18.3.1)(svelte@5.25.10)(vue@3.5.13)(zod@3.23.8)
+        version: 3.4.7(react@18.3.1)(svelte@5.27.0)(vue@3.5.13)(zod@3.23.8)
       drizzle-orm:
         specifier: ^0.33.0
         version: 0.33.0(@opentelemetry/api@1.4.1)(@planetscale/database@1.19.0)(@types/react@18.3.11)(react@18.3.1)
@@ -994,7 +994,7 @@ importers:
         version: link:../../packages/error
       ai:
         specifier: ^3.0.23
-        version: 3.4.7(react@18.3.1)(svelte@5.25.10)(vue@3.5.13)(zod@3.23.8)
+        version: 3.4.7(react@18.3.1)(svelte@5.27.0)(vue@3.5.13)(zod@3.23.8)
       zod:
         specifier: 3.23.8
         version: 3.23.8
@@ -1713,7 +1713,7 @@ packages:
       hash-object: 5.0.1
       is-relative-url: 4.0.0
       jsonrepair: 3.12.0
-      ky: 1.8.0
+      ky: 1.8.1
       normalize-url: 8.0.1
       p-map: 7.0.3
       p-throttle: 6.2.0
@@ -1733,7 +1733,7 @@ packages:
       zod: ^3.23.8
     dependencies:
       '@agentic/core': 7.0.0(zod@3.23.8)
-      ky: 1.8.0
+      ky: 1.8.1
       zod: 3.23.8
     dev: false
 
@@ -1839,7 +1839,7 @@ packages:
       - zod
     dev: false
 
-  /@ai-sdk/svelte@0.0.51(svelte@5.25.10)(zod@3.23.8):
+  /@ai-sdk/svelte@0.0.51(svelte@5.27.0)(zod@3.23.8):
     resolution: {integrity: sha512-aIZJaIds+KpCt19yUDCRDWebzF/17GCY7gN9KkcA2QM6IKRO5UmMcqEYja0ZmwFQPm1kBZkF2njhr8VXis2mAw==}
     engines: {node: '>=18'}
     peerDependencies:
@@ -1850,8 +1850,8 @@ packages:
     dependencies:
       '@ai-sdk/provider-utils': 1.0.20(zod@3.23.8)
       '@ai-sdk/ui-utils': 0.0.46(zod@3.23.8)
-      sswr: 2.1.0(svelte@5.25.10)
-      svelte: 5.25.10
+      sswr: 2.1.0(svelte@5.27.0)
+      svelte: 5.27.0
     transitivePeerDependencies:
       - zod
     dev: false
@@ -2109,8 +2109,8 @@ packages:
       js-yaml: 4.1.0
     dev: false
 
-  /@asamuzakjp/css-color@3.1.1:
-    resolution: {integrity: sha512-hpRD68SV2OMcZCsrbdkccTw5FXjNDLo5OuqSHyHZfwweGsDWZwDJ2+gONyNAbazZclobMirACLw0lk8WVxIqxA==}
+  /@asamuzakjp/css-color@3.1.2:
+    resolution: {integrity: sha512-nwgc7jPn3LpZ4JWsoHtuwBsad1qSSLDDX634DdG0PBJofIuIEtSWk4KkRmuXyu178tjuHAbwiMNNzwqIyLYxZw==}
     dependencies:
       '@csstools/css-calc': 2.1.2(@csstools/css-parser-algorithms@3.0.4)(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-color-parser': 3.0.8(@csstools/css-parser-algorithms@3.0.4)(@csstools/css-tokenizer@3.0.3)
@@ -2955,7 +2955,7 @@ packages:
     resolution: {integrity: sha512-vPQRo70WzNQU12PGX2dI1yqxPXM0miYnsdu+Jn5UdAJMB1WpyY8pjMe489Bjgg/G5OVmekaeMDGsJYtlSYvbXg==}
     engines: {node: '>=18'}
     dependencies:
-      '@grpc/grpc-js': 1.13.2
+      '@grpc/grpc-js': 1.13.3
       '@lifeomic/axios-fetch': 3.1.0
       '@opentelemetry/api': 1.4.1
       '@opentelemetry/exporter-trace-otlp-http': 0.53.0(@opentelemetry/api@1.4.1)
@@ -2989,11 +2989,11 @@ packages:
   /@electric-sql/client@1.0.0-beta.1:
     resolution: {integrity: sha512-Ei9jN3pDoGzc+a/bGqnB5ajb52IvSv7/n2btuyzUlcOHIR2kM9fqtYTJXPwZYKLkGZlHWlpHgWyRtrinkP2nHg==}
     optionalDependencies:
-      '@rollup/rollup-darwin-arm64': 4.39.0
+      '@rollup/rollup-darwin-arm64': 4.40.0
     dev: false
 
-  /@emnapi/runtime@1.4.0:
-    resolution: {integrity: sha512-64WYIf4UYcdLnbKn/umDlNjQDSS8AgZrI/R9+x5ilkUVFxXcA1Ebl+gQLc/6mERA4407Xof0R7wEyEuj091CVw==}
+  /@emnapi/runtime@1.4.1:
+    resolution: {integrity: sha512-LMshMVP0ZhACNjQNYXiU1iZJ6QCcv0lUdPDPugqGvCGXt5xtRVBPdtA0qU12pEXZzpWAhWlZYptfdAFq10DOVQ==}
     requiresBuild: true
     dependencies:
       tslib: 2.8.1
@@ -4476,8 +4476,8 @@ packages:
     requiresBuild: true
     optional: true
 
-  /@eslint-community/eslint-utils@4.5.1(eslint@9.24.0):
-    resolution: {integrity: sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w==}
+  /@eslint-community/eslint-utils@4.6.0(eslint@9.24.0):
+    resolution: {integrity: sha512-WhCn7Z7TauhBtmzhvKpoQs0Wwb/kBcy4CwpuI0/eEIr2Lx2auxmulAzLr91wVZJaz47iUZdkXOK7WlAfxGKCnA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
@@ -4620,8 +4620,8 @@ packages:
     dependencies:
       graphql: 16.10.0
 
-  /@grpc/grpc-js@1.13.2:
-    resolution: {integrity: sha512-nnR5nmL6lxF8YBqb6gWvEgLdLh/Fn+kvAdX5hUOnt48sNSb0riz/93ASd2E5gvanPA41X6Yp25bIfGRp1SMb2g==}
+  /@grpc/grpc-js@1.13.3:
+    resolution: {integrity: sha512-FTXHdOoPbZrBjlVLHuKbDZnsTxXv2BlHF57xw6LuThXacXvtkahEPED0CKMk6obZDf65Hv4k3z62eyPNpvinIg==}
     engines: {node: '>=12.10.0'}
     dependencies:
       '@grpc/proto-loader': 0.7.13
@@ -4704,7 +4704,6 @@ packages:
     requiresBuild: true
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.0.2
-    dev: false
     optional: true
 
   /@img/sharp-darwin-arm64@0.33.5:
@@ -4726,7 +4725,6 @@ packages:
     requiresBuild: true
     optionalDependencies:
       '@img/sharp-libvips-darwin-x64': 1.0.2
-    dev: false
     optional: true
 
   /@img/sharp-darwin-x64@0.33.5:
@@ -4746,7 +4744,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@img/sharp-libvips-darwin-arm64@1.0.4:
@@ -4763,7 +4760,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@img/sharp-libvips-darwin-x64@1.0.4:
@@ -4780,7 +4776,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@img/sharp-libvips-linux-arm64@1.0.4:
@@ -4797,7 +4792,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@img/sharp-libvips-linux-arm@1.0.5:
@@ -4814,7 +4808,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@img/sharp-libvips-linux-s390x@1.0.4:
@@ -4831,7 +4824,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@img/sharp-libvips-linux-x64@1.0.4:
@@ -4848,7 +4840,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@img/sharp-libvips-linuxmusl-arm64@1.0.4:
@@ -4865,7 +4856,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@img/sharp-libvips-linuxmusl-x64@1.0.4:
@@ -4884,7 +4874,6 @@ packages:
     requiresBuild: true
     optionalDependencies:
       '@img/sharp-libvips-linux-arm64': 1.0.2
-    dev: false
     optional: true
 
   /@img/sharp-linux-arm64@0.33.5:
@@ -4906,7 +4895,6 @@ packages:
     requiresBuild: true
     optionalDependencies:
       '@img/sharp-libvips-linux-arm': 1.0.2
-    dev: false
     optional: true
 
   /@img/sharp-linux-arm@0.33.5:
@@ -4928,7 +4916,6 @@ packages:
     requiresBuild: true
     optionalDependencies:
       '@img/sharp-libvips-linux-s390x': 1.0.2
-    dev: false
     optional: true
 
   /@img/sharp-linux-s390x@0.33.5:
@@ -4950,7 +4937,6 @@ packages:
     requiresBuild: true
     optionalDependencies:
       '@img/sharp-libvips-linux-x64': 1.0.2
-    dev: false
     optional: true
 
   /@img/sharp-linux-x64@0.33.5:
@@ -4972,7 +4958,6 @@ packages:
     requiresBuild: true
     optionalDependencies:
       '@img/sharp-libvips-linuxmusl-arm64': 1.0.2
-    dev: false
     optional: true
 
   /@img/sharp-linuxmusl-arm64@0.33.5:
@@ -4994,7 +4979,6 @@ packages:
     requiresBuild: true
     optionalDependencies:
       '@img/sharp-libvips-linuxmusl-x64': 1.0.2
-    dev: false
     optional: true
 
   /@img/sharp-linuxmusl-x64@0.33.5:
@@ -5014,8 +4998,7 @@ packages:
     cpu: [wasm32]
     requiresBuild: true
     dependencies:
-      '@emnapi/runtime': 1.4.0
-    dev: false
+      '@emnapi/runtime': 1.4.1
     optional: true
 
   /@img/sharp-wasm32@0.33.5:
@@ -5024,7 +5007,7 @@ packages:
     cpu: [wasm32]
     requiresBuild: true
     dependencies:
-      '@emnapi/runtime': 1.4.0
+      '@emnapi/runtime': 1.4.1
     dev: true
     optional: true
 
@@ -5034,7 +5017,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@img/sharp-win32-ia32@0.33.5:
@@ -5052,7 +5034,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@img/sharp-win32-x64@0.33.5:
@@ -5181,7 +5162,7 @@ packages:
       '@inquirer/figures': 1.0.11
       '@inquirer/type': 2.0.0
       '@types/mute-stream': 0.0.4
-      '@types/node': 22.14.0
+      '@types/node': 22.14.1
       '@types/wrap-ansi': 3.0.0
       ansi-escapes: 4.3.2
       cli-width: 4.1.0
@@ -6923,7 +6904,7 @@ packages:
     peerDependencies:
       '@opentelemetry/api': ^1.0.0
     dependencies:
-      '@grpc/grpc-js': 1.13.2
+      '@grpc/grpc-js': 1.13.3
       '@opentelemetry/api': 1.4.1
       '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.4.1)
       '@opentelemetry/otlp-grpc-exporter-base': 0.39.1(@opentelemetry/api@1.4.1)
@@ -7035,7 +7016,7 @@ packages:
     peerDependencies:
       '@opentelemetry/api': ^1.0.0
     dependencies:
-      '@grpc/grpc-js': 1.13.2
+      '@grpc/grpc-js': 1.13.3
       '@opentelemetry/api': 1.4.1
       '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.4.1)
       '@opentelemetry/otlp-exporter-base': 0.39.1(@opentelemetry/api@1.4.1)
@@ -7245,8 +7226,8 @@ packages:
     resolution: {integrity: sha512-LMGqfSZkaMQXqewO0o1wvWr/2fQdCh4a3Sqlxka/UsJCe0cfLulh6x2aqnKLnsrSGiCq5rSCwvINd152i0nCqw==}
     engines: {node: '>=14'}
 
-  /@orama/orama@3.1.4:
-    resolution: {integrity: sha512-7tTuIdkzgRscJ7sGHVsoK9GtXSpwbfrj3WYnuSu/SepXHhshYiQaOeXc/aeLh4MfgIre6tEs/caIop8wrhMi3g==}
+  /@orama/orama@3.1.5:
+    resolution: {integrity: sha512-iAy2H6VWbS/fFLkbioGec5g3uDNj65+wpADL8k1RbxEGoquIPl3xqYMKux30dJV97Rr1OnXgC0kCLWRQi/Mrdg==}
     engines: {node: '>= 16.0.0'}
     dev: false
 
@@ -10541,159 +10522,159 @@ packages:
       picomatch: 4.0.2
     dev: true
 
-  /@rollup/rollup-android-arm-eabi@4.39.0:
-    resolution: {integrity: sha512-lGVys55Qb00Wvh8DMAocp5kIcaNzEFTmGhfFd88LfaogYTRKrdxgtlO5H6S49v2Nd8R2C6wLOal0qv6/kCkOwA==}
+  /@rollup/rollup-android-arm-eabi@4.40.0:
+    resolution: {integrity: sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg==}
     cpu: [arm]
     os: [android]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-android-arm64@4.39.0:
-    resolution: {integrity: sha512-It9+M1zE31KWfqh/0cJLrrsCPiF72PoJjIChLX+rEcujVRCb4NLQ5QzFkzIZW8Kn8FTbvGQBY5TkKBau3S8cCQ==}
+  /@rollup/rollup-android-arm64@4.40.0:
+    resolution: {integrity: sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w==}
     cpu: [arm64]
     os: [android]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-darwin-arm64@4.39.0:
-    resolution: {integrity: sha512-lXQnhpFDOKDXiGxsU9/l8UEGGM65comrQuZ+lDcGUx+9YQ9dKpF3rSEGepyeR5AHZ0b5RgiligsBhWZfSSQh8Q==}
+  /@rollup/rollup-darwin-arm64@4.40.0:
+    resolution: {integrity: sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     optional: true
 
-  /@rollup/rollup-darwin-x64@4.39.0:
-    resolution: {integrity: sha512-mKXpNZLvtEbgu6WCkNij7CGycdw9cJi2k9v0noMb++Vab12GZjFgUXD69ilAbBh034Zwn95c2PNSz9xM7KYEAQ==}
+  /@rollup/rollup-darwin-x64@4.40.0:
+    resolution: {integrity: sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-freebsd-arm64@4.39.0:
-    resolution: {integrity: sha512-jivRRlh2Lod/KvDZx2zUR+I4iBfHcu2V/BA2vasUtdtTN2Uk3jfcZczLa81ESHZHPHy4ih3T/W5rPFZ/hX7RtQ==}
+  /@rollup/rollup-freebsd-arm64@4.40.0:
+    resolution: {integrity: sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg==}
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-freebsd-x64@4.39.0:
-    resolution: {integrity: sha512-8RXIWvYIRK9nO+bhVz8DwLBepcptw633gv/QT4015CpJ0Ht8punmoHU/DuEd3iw9Hr8UwUV+t+VNNuZIWYeY7Q==}
+  /@rollup/rollup-freebsd-x64@4.40.0:
+    resolution: {integrity: sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw==}
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm-gnueabihf@4.39.0:
-    resolution: {integrity: sha512-mz5POx5Zu58f2xAG5RaRRhp3IZDK7zXGk5sdEDj4o96HeaXhlUwmLFzNlc4hCQi5sGdR12VDgEUqVSHer0lI9g==}
+  /@rollup/rollup-linux-arm-gnueabihf@4.40.0:
+    resolution: {integrity: sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm-musleabihf@4.39.0:
-    resolution: {integrity: sha512-+YDwhM6gUAyakl0CD+bMFpdmwIoRDzZYaTWV3SDRBGkMU/VpIBYXXEvkEcTagw/7VVkL2vA29zU4UVy1mP0/Yw==}
+  /@rollup/rollup-linux-arm-musleabihf@4.40.0:
+    resolution: {integrity: sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm64-gnu@4.39.0:
-    resolution: {integrity: sha512-EKf7iF7aK36eEChvlgxGnk7pdJfzfQbNvGV/+l98iiMwU23MwvmV0Ty3pJ0p5WQfm3JRHOytSIqD9LB7Bq7xdQ==}
+  /@rollup/rollup-linux-arm64-gnu@4.40.0:
+    resolution: {integrity: sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm64-musl@4.39.0:
-    resolution: {integrity: sha512-vYanR6MtqC7Z2SNr8gzVnzUul09Wi1kZqJaek3KcIlI/wq5Xtq4ZPIZ0Mr/st/sv/NnaPwy/D4yXg5x0B3aUUA==}
+  /@rollup/rollup-linux-arm64-musl@4.40.0:
+    resolution: {integrity: sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-loongarch64-gnu@4.39.0:
-    resolution: {integrity: sha512-NMRUT40+h0FBa5fb+cpxtZoGAggRem16ocVKIv5gDB5uLDgBIwrIsXlGqYbLwW8YyO3WVTk1FkFDjMETYlDqiw==}
+  /@rollup/rollup-linux-loongarch64-gnu@4.40.0:
+    resolution: {integrity: sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==}
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-powerpc64le-gnu@4.39.0:
-    resolution: {integrity: sha512-0pCNnmxgduJ3YRt+D+kJ6Ai/r+TaePu9ZLENl+ZDV/CdVczXl95CbIiwwswu4L+K7uOIGf6tMo2vm8uadRaICQ==}
+  /@rollup/rollup-linux-powerpc64le-gnu@4.40.0:
+    resolution: {integrity: sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==}
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-riscv64-gnu@4.39.0:
-    resolution: {integrity: sha512-t7j5Zhr7S4bBtksT73bO6c3Qa2AV/HqiGlj9+KB3gNF5upcVkx+HLgxTm8DK4OkzsOYqbdqbLKwvGMhylJCPhQ==}
+  /@rollup/rollup-linux-riscv64-gnu@4.40.0:
+    resolution: {integrity: sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==}
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-riscv64-musl@4.39.0:
-    resolution: {integrity: sha512-m6cwI86IvQ7M93MQ2RF5SP8tUjD39Y7rjb1qjHgYh28uAPVU8+k/xYWvxRO3/tBN2pZkSMa5RjnPuUIbrwVxeA==}
+  /@rollup/rollup-linux-riscv64-musl@4.40.0:
+    resolution: {integrity: sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==}
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-s390x-gnu@4.39.0:
-    resolution: {integrity: sha512-iRDJd2ebMunnk2rsSBYlsptCyuINvxUfGwOUldjv5M4tpa93K8tFMeYGpNk2+Nxl+OBJnBzy2/JCscGeO507kA==}
+  /@rollup/rollup-linux-s390x-gnu@4.40.0:
+    resolution: {integrity: sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==}
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-x64-gnu@4.39.0:
-    resolution: {integrity: sha512-t9jqYw27R6Lx0XKfEFe5vUeEJ5pF3SGIM6gTfONSMb7DuG6z6wfj2yjcoZxHg129veTqU7+wOhY6GX8wmf90dA==}
+  /@rollup/rollup-linux-x64-gnu@4.40.0:
+    resolution: {integrity: sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-x64-musl@4.39.0:
-    resolution: {integrity: sha512-ThFdkrFDP55AIsIZDKSBWEt/JcWlCzydbZHinZ0F/r1h83qbGeenCt/G/wG2O0reuENDD2tawfAj2s8VK7Bugg==}
+  /@rollup/rollup-linux-x64-musl@4.40.0:
+    resolution: {integrity: sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-win32-arm64-msvc@4.39.0:
-    resolution: {integrity: sha512-jDrLm6yUtbOg2TYB3sBF3acUnAwsIksEYjLeHL+TJv9jg+TmTwdyjnDex27jqEMakNKf3RwwPahDIt7QXCSqRQ==}
+  /@rollup/rollup-win32-arm64-msvc@4.40.0:
+    resolution: {integrity: sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-win32-ia32-msvc@4.39.0:
-    resolution: {integrity: sha512-6w9uMuza+LbLCVoNKL5FSLE7yvYkq9laSd09bwS0tMjkwXrmib/4KmoJcrKhLWHvw19mwU+33ndC69T7weNNjQ==}
+  /@rollup/rollup-win32-ia32-msvc@4.40.0:
+    resolution: {integrity: sha512-+m03kvI2f5syIqHXCZLPVYplP8pQch9JHyXKZ3AGMKlg8dCyr2PKHjwRLiW53LTrN/Nc3EqHOKxUxzoSPdKddA==}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-win32-x64-msvc@4.39.0:
-    resolution: {integrity: sha512-yAkUOkIKZlK5dl7u6dg897doBgLXmUHhIINM2c+sND3DZwnrdQkkSiDh7N75Ll4mM4dxSkYfXqU9fW3lLkMFug==}
+  /@rollup/rollup-win32-x64-msvc@4.40.0:
+    resolution: {integrity: sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
@@ -10861,7 +10842,7 @@ packages:
     resolution: {integrity: sha512-nty0tHUq2f1IKuFYsLM4CXLZGHdMn+X/IwEUIpeSOXt0QjMUbL0Em57iJUDzz+2MkWG83smIigNZ3fauGjqgdQ==}
     engines: {node: '>=8.3.0'}
     dependencies:
-      node-fetch: 2.7.0
+      node-fetch: 2.6.7
       tslib: 1.14.1
     transitivePeerDependencies:
       - encoding
@@ -11515,7 +11496,7 @@ packages:
   /@types/accepts@1.3.7:
     resolution: {integrity: sha512-Pay9fq2lM2wXPWbteBsRAGiWH2hig4ZE2asK+mm7kUzlxRTfL961rj89I6zV/E3PcIkDqyuBEcMxFT7rccugeQ==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 22.14.0
     dev: false
 
   /@types/acorn@4.0.6:
@@ -11532,13 +11513,13 @@ packages:
     resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 20.14.9
+      '@types/node': 22.14.0
     dev: false
 
   /@types/connect@3.4.38:
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 22.14.0
     dev: false
 
   /@types/content-disposition@0.5.8:
@@ -11548,7 +11529,7 @@ packages:
   /@types/conventional-commits-parser@5.0.1:
     resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 22.14.0
     dev: true
     optional: true
 
@@ -11569,7 +11550,7 @@ packages:
       '@types/connect': 3.4.38
       '@types/express': 4.17.21
       '@types/keygrip': 1.0.6
-      '@types/node': 20.14.9
+      '@types/node': 22.14.0
     dev: false
 
   /@types/cors@2.8.17:
@@ -11638,8 +11619,8 @@ packages:
       '@types/ssh2': 1.15.5
     dev: true
 
-  /@types/dockerode@3.3.37:
-    resolution: {integrity: sha512-r+IoKpE5MLKaeD8CvoEh39ckWMLHR/+WBMoRQxrkL+apJqEWLMhBHh+93KIfyPWGd6gK7Q21jpoULKgNoRI0YA==}
+  /@types/dockerode@3.3.38:
+    resolution: {integrity: sha512-nnrcfUe2iR+RyOuz0B4bZgQwD9djQa9ADEjp7OAgBs10pYT0KSCtplJjcmBDJz0qaReX5T7GbE5i4VplvzUHvA==}
     dependencies:
       '@types/docker-modem': 3.0.6
       '@types/node': 20.14.9
@@ -11677,7 +11658,7 @@ packages:
   /@types/express-serve-static-core@4.19.6:
     resolution: {integrity: sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 22.14.0
       '@types/qs': 6.9.18
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
@@ -11751,7 +11732,7 @@ packages:
       '@types/http-errors': 2.0.4
       '@types/keygrip': 1.0.6
       '@types/koa-compose': 3.2.8
-      '@types/node': 20.14.9
+      '@types/node': 22.14.0
     dev: false
 
   /@types/mdast@3.0.15:
@@ -11790,7 +11771,7 @@ packages:
   /@types/node-fetch@2.6.12:
     resolution: {integrity: sha512-8nneRWKCg3rMtF69nLQJnOYUcbafYeFSjqkw3jCRLsqkWFlHaoQrr5mXmofFGOx3DKn7UfmBMyov8ySvLRVldA==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 22.14.0
       form-data: 4.0.2
 
   /@types/node@12.20.55:
@@ -11816,6 +11797,12 @@ packages:
     dependencies:
       undici-types: 6.21.0
 
+  /@types/node@22.14.1:
+    resolution: {integrity: sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==}
+    dependencies:
+      undici-types: 6.21.0
+    dev: true
+
   /@types/node@22.5.4:
     resolution: {integrity: sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==}
     dependencies:
@@ -11878,14 +11865,14 @@ packages:
     resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 20.14.9
+      '@types/node': 22.14.0
     dev: false
 
   /@types/serve-static@1.15.7:
     resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==}
     dependencies:
       '@types/http-errors': 2.0.4
-      '@types/node': 20.14.9
+      '@types/node': 22.14.0
       '@types/send': 0.17.4
     dev: false
 
@@ -12431,7 +12418,7 @@ packages:
       indent-string: 5.0.0
     dev: true
 
-  /ai@3.4.7(react@18.3.1)(svelte@5.25.10)(vue@3.5.13)(zod@3.23.8):
+  /ai@3.4.7(react@18.3.1)(svelte@5.27.0)(vue@3.5.13)(zod@3.23.8):
     resolution: {integrity: sha512-SutkVjFE86+xNql7fJERJkSEwpILEuiQvCoogJef6ZX/PGHvu3yepwHwVwedgABXe9SudOIKN48EQESrXX/xCw==}
     engines: {node: '>=18'}
     peerDependencies:
@@ -12456,7 +12443,7 @@ packages:
       '@ai-sdk/provider-utils': 1.0.20(zod@3.23.8)
       '@ai-sdk/react': 0.0.62(react@18.3.1)(zod@3.23.8)
       '@ai-sdk/solid': 0.0.49(zod@3.23.8)
-      '@ai-sdk/svelte': 0.0.51(svelte@5.25.10)(zod@3.23.8)
+      '@ai-sdk/svelte': 0.0.51(svelte@5.27.0)(zod@3.23.8)
       '@ai-sdk/ui-utils': 0.0.46(zod@3.23.8)
       '@ai-sdk/vue': 0.0.53(vue@3.5.13)(zod@3.23.8)
       '@opentelemetry/api': 1.4.1
@@ -12466,7 +12453,7 @@ packages:
       nanoid: 3.3.6
       react: 18.3.1
       secure-json-parse: 2.7.0
-      svelte: 5.25.10
+      svelte: 5.27.0
       zod: 3.23.8
       zod-to-json-schema: 3.23.2(zod@3.23.8)
     transitivePeerDependencies:
@@ -13087,7 +13074,7 @@ packages:
     hasBin: true
     dependencies:
       caniuse-lite: 1.0.30001713
-      electron-to-chromium: 1.5.135
+      electron-to-chromium: 1.5.137
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.24.4)
 
@@ -13966,7 +13953,7 @@ packages:
     resolution: {integrity: sha512-6r0NiY0xizYqfBvWp1G7WXJ06/bZyrk7Dc6PHql82C/pKGUTKu4yAX4Y8JPamb1ob9nBKuxWzCGTRuGwU3yxJQ==}
     engines: {node: '>=18'}
     dependencies:
-      '@asamuzakjp/css-color': 3.1.1
+      '@asamuzakjp/css-color': 3.1.2
       rrweb-cssom: 0.8.0
     dev: true
 
@@ -14241,7 +14228,7 @@ packages:
     dependencies:
       is-arguments: 1.2.0
       is-date-object: 1.1.0
-      is-regex: 1.2.1
+      is-regex: 1.1.4
       object-is: 1.1.6
       object-keys: 1.1.1
       regexp.prototype.flags: 1.5.4
@@ -14520,7 +14507,7 @@ packages:
     hasBin: true
     dependencies:
       cross-spawn: 7.0.6
-      dotenv: 16.4.7
+      dotenv: 16.5.0
       dotenv-expand: 10.0.0
       minimist: 1.2.8
     dev: true
@@ -14540,8 +14527,8 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /dotenv@16.4.7:
-    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
+  /dotenv@16.5.0:
+    resolution: {integrity: sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==}
     engines: {node: '>=12'}
 
   /dotignore@0.1.2:
@@ -14907,8 +14894,8 @@ packages:
       jake: 10.9.2
     dev: true
 
-  /electron-to-chromium@1.5.135:
-    resolution: {integrity: sha512-8gXUdEmvb+WCaYUhA0Svr08uSeRjM2w3x5uHOc1QbaEVzJXB8rgm5eptieXzyKoVEtinLvW6MtTcurA65PeS1Q==}
+  /electron-to-chromium@1.5.137:
+    resolution: {integrity: sha512-/QSJaU2JyIuTbbABAo/crOs+SuAZLS+fVVS10PVrIT9hrRkmZl8Hb0xPSkKRUUWHQtYzXHpQUW3Dy5hwMzGZkA==}
 
   /emoji-regex-xs@1.0.0:
     resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
@@ -15482,7 +15469,7 @@ packages:
       jiti:
         optional: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.5.1(eslint@9.24.0)
+      '@eslint-community/eslint-utils': 4.6.0(eslint@9.24.0)
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.20.0
       '@eslint/config-helpers': 0.2.1
@@ -15702,7 +15689,7 @@ packages:
     resolution: {integrity: sha512-rffYWPU568gOiYmsHW3L5J6atoNfLJTrtAk/DAKyPuGtdDXrE9fsSfltP1X1pNVtLTsz8DIyhUHOXErueNLJrQ==}
     dependencies:
       cross-fetch: 4.1.0
-      dotenv: 16.4.7
+      dotenv: 16.5.0
     transitivePeerDependencies:
       - encoding
     dev: false
@@ -15959,7 +15946,7 @@ packages:
     engines: {node: '>=14.0.0'}
     dependencies:
       escape-html: 1.0.3
-      sharp: 0.33.5
+      sharp: 0.33.4
       xml2js: 0.6.2
     dev: true
 
@@ -16330,7 +16317,7 @@ packages:
         optional: true
     dependencies:
       '@formatjs/intl-localematcher': 0.5.10
-      '@orama/orama': 3.1.4
+      '@orama/orama': 3.1.5
       '@shikijs/rehype': 1.29.2
       github-slugger: 2.0.0
       hast-util-to-estree: 3.1.3
@@ -16372,7 +16359,7 @@ packages:
         optional: true
     dependencies:
       '@formatjs/intl-localematcher': 0.5.10
-      '@orama/orama': 3.1.4
+      '@orama/orama': 3.1.5
       '@shikijs/rehype': 1.29.2
       github-slugger: 2.0.0
       hast-util-to-estree: 3.1.3
@@ -18405,8 +18392,8 @@ packages:
       zod-validation-error: 3.4.0(zod@3.23.8)
     dev: true
 
-  /ky@1.8.0:
-    resolution: {integrity: sha512-DoKGmG27nT8t/1F9gV8vNzggJ3mLAyD49J8tTMWHeZvS8qLc7GlyTieicYtFzvDznMe/q2u38peOjkWc5/pjvw==}
+  /ky@1.8.1:
+    resolution: {integrity: sha512-7Bp3TpsE+L+TARSnnDpk3xg8Idi8RwSLdj6CMbNWoOARIrGrbuLGusV0dYwbZOm4bB3jHNxSw8Wk/ByDqJEnDw==}
     engines: {node: '>=18'}
     dev: false
 
@@ -20025,7 +20012,6 @@ packages:
   /minipass@6.0.2:
     resolution: {integrity: sha512-MzWSV5nYVT7mVyWCwn2o7JH13w2TBRmmSqSRCKzTw+lmft9X4z+3wjvs06Tzijo5z4W/kahUCDpRXTF+ZrmF/w==}
     engines: {node: '>=16 || 14 >=14.17'}
-    dev: true
 
   /minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
@@ -21194,7 +21180,7 @@ packages:
     engines: {node: '>=16 || 14 >=14.18'}
     dependencies:
       lru-cache: 10.4.3
-      minipass: 7.1.2
+      minipass: 6.0.2
 
   /path-to-regexp@0.1.12:
     resolution: {integrity: sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==}
@@ -22798,33 +22784,33 @@ packages:
       source-map-support: 0.3.3
     dev: false
 
-  /rollup@4.39.0:
-    resolution: {integrity: sha512-thI8kNc02yNvnmJp8dr3fNWJ9tCONDhp6TV35X6HkKGGs9E6q7YWCHbe5vKiTa7TAiNcFEmXKj3X/pG2b3ci0g==}
+  /rollup@4.40.0:
+    resolution: {integrity: sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
     dependencies:
       '@types/estree': 1.0.7
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.39.0
-      '@rollup/rollup-android-arm64': 4.39.0
-      '@rollup/rollup-darwin-arm64': 4.39.0
-      '@rollup/rollup-darwin-x64': 4.39.0
-      '@rollup/rollup-freebsd-arm64': 4.39.0
-      '@rollup/rollup-freebsd-x64': 4.39.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.39.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.39.0
-      '@rollup/rollup-linux-arm64-gnu': 4.39.0
-      '@rollup/rollup-linux-arm64-musl': 4.39.0
-      '@rollup/rollup-linux-loongarch64-gnu': 4.39.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.39.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.39.0
-      '@rollup/rollup-linux-riscv64-musl': 4.39.0
-      '@rollup/rollup-linux-s390x-gnu': 4.39.0
-      '@rollup/rollup-linux-x64-gnu': 4.39.0
-      '@rollup/rollup-linux-x64-musl': 4.39.0
-      '@rollup/rollup-win32-arm64-msvc': 4.39.0
-      '@rollup/rollup-win32-ia32-msvc': 4.39.0
-      '@rollup/rollup-win32-x64-msvc': 4.39.0
+      '@rollup/rollup-android-arm-eabi': 4.40.0
+      '@rollup/rollup-android-arm64': 4.40.0
+      '@rollup/rollup-darwin-arm64': 4.40.0
+      '@rollup/rollup-darwin-x64': 4.40.0
+      '@rollup/rollup-freebsd-arm64': 4.40.0
+      '@rollup/rollup-freebsd-x64': 4.40.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.40.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.40.0
+      '@rollup/rollup-linux-arm64-gnu': 4.40.0
+      '@rollup/rollup-linux-arm64-musl': 4.40.0
+      '@rollup/rollup-linux-loongarch64-gnu': 4.40.0
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.40.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.40.0
+      '@rollup/rollup-linux-riscv64-musl': 4.40.0
+      '@rollup/rollup-linux-s390x-gnu': 4.40.0
+      '@rollup/rollup-linux-x64-gnu': 4.40.0
+      '@rollup/rollup-linux-x64-musl': 4.40.0
+      '@rollup/rollup-win32-arm64-msvc': 4.40.0
+      '@rollup/rollup-win32-ia32-msvc': 4.40.0
+      '@rollup/rollup-win32-x64-msvc': 4.40.0
       fsevents: 2.3.3
     dev: true
 
@@ -23109,7 +23095,6 @@ packages:
       '@img/sharp-wasm32': 0.33.4
       '@img/sharp-win32-ia32': 0.33.4
       '@img/sharp-win32-x64': 0.33.4
-    dev: false
 
   /sharp@0.33.5:
     resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
@@ -23140,6 +23125,7 @@ packages:
       '@img/sharp-win32-ia32': 0.33.5
       '@img/sharp-win32-x64': 0.33.5
     dev: true
+    optional: true
 
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
@@ -23542,12 +23528,12 @@ packages:
       nan: 2.22.2
     dev: true
 
-  /sswr@2.1.0(svelte@5.25.10):
+  /sswr@2.1.0(svelte@5.27.0):
     resolution: {integrity: sha512-Cqc355SYlTAaUt8iDPaC/4DPPXK925PePLMxyBKuWd5kKc5mwsG3nT9+Mq2tyguL5s7b4Jg+IRMpTRsNTAfpSQ==}
     peerDependencies:
       svelte: ^4.0.0 || ^5.0.0-next.0
     dependencies:
-      svelte: 5.25.10
+      svelte: 5.27.0
       swrev: 4.0.0
     dev: false
 
@@ -23893,8 +23879,8 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  /svelte@5.25.10:
-    resolution: {integrity: sha512-tOUlvm3goAhmELYKWYX3SchYeqlVlIcUfKA4qIgd6Urm7qDw3KiZP/wJtoRv3ZeRUHPorM9f6+lOlbFxUN8QoA==}
+  /svelte@5.27.0:
+    resolution: {integrity: sha512-Uai13Ydt1ZE+bUHme6b9U38PCYVNCqBRoBMkUKbFbKiD7kHWjdUUrklYAQZJxyKK81qII4mrBwe/YmvEMSlC9w==}
     engines: {node: '>=18'}
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -23998,7 +23984,7 @@ packages:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
-      chokidar: 3.6.0
+      chokidar: 3.5.3
       didyoumean: 1.2.2
       dlv: 1.1.3
       fast-glob: 3.3.3
@@ -24196,7 +24182,7 @@ packages:
     resolution: {integrity: sha512-8fReFeQ4bk17T2vHHzcFavBG8UHuHwsdVj+48TchtsCSklwmSUTkg/b57hVjxZdxN1ed/GfF63WZ39I4syV5tQ==}
     dependencies:
       '@balena/dockerignore': 1.0.2
-      '@types/dockerode': 3.3.37
+      '@types/dockerode': 3.3.38
       archiver: 7.0.1
       async-lock: 1.4.1
       byline: 5.0.0
@@ -24270,15 +24256,15 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
-  /tldts-core@6.1.85:
-    resolution: {integrity: sha512-DTjUVvxckL1fIoPSb3KE7ISNtkWSawZdpfxGxwiIrZoO6EbHVDXXUIlIuWympPaeS+BLGyggozX/HTMsRAdsoA==}
+  /tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
     dev: true
 
-  /tldts@6.1.85:
-    resolution: {integrity: sha512-gBdZ1RjCSevRPFix/hpaUWeak2/RNUZB4/8frF1r5uYMHjFptkiT0JXIebWvgI/0ZHXvxaUDDJshiA0j6GdL3w==}
+  /tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
     hasBin: true
     dependencies:
-      tldts-core: 6.1.85
+      tldts-core: 6.1.86
     dev: true
 
   /tmp@0.0.33:
@@ -24316,7 +24302,7 @@ packages:
     resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
     engines: {node: '>=16'}
     dependencies:
-      tldts: 6.1.85
+      tldts: 6.1.86
     dev: true
 
   /tr46@0.0.3:
@@ -24519,7 +24505,7 @@ packages:
       joycon: 3.1.1
       postcss-load-config: 4.0.2(postcss@8.5.3)(ts-node@10.9.2)
       resolve-from: 5.0.0
-      rollup: 4.39.0
+      rollup: 4.40.0
       source-map: 0.8.0-beta.0
       sucrase: 3.35.0
       tree-kill: 1.2.2
@@ -24558,7 +24544,7 @@ packages:
       joycon: 3.1.1
       postcss-load-config: 4.0.2(postcss@8.5.3)(ts-node@10.9.2)
       resolve-from: 5.0.0
-      rollup: 4.39.0
+      rollup: 4.40.0
       source-map: 0.8.0-beta.0
       sucrase: 3.35.0
       tree-kill: 1.2.2
@@ -25366,7 +25352,7 @@ packages:
       '@types/node': 20.14.9
       esbuild: 0.21.5
       postcss: 8.5.3
-      rollup: 4.39.0
+      rollup: 4.40.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
@@ -25405,7 +25391,7 @@ packages:
       '@types/node': 22.14.0
       esbuild: 0.21.5
       postcss: 8.5.3
-      rollup: 4.39.0
+      rollup: 4.40.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: true