diff --git a/backend/app/routes/setup.ts b/backend/app/routes/setup.ts
index 68f4cbcc..2fc7e8ff 100644
--- a/backend/app/routes/setup.ts
+++ b/backend/app/routes/setup.ts
@@ -73,8 +73,12 @@ export async function setupHandler(req: Request, res: Response) {
     });
 
     if (existingKeys && existingKeys.length > 0) {
-      // API keys already exist, refuse to create new ones
-      res.json({ created: false });
+      // API keys already exist, refuse to create new ones via web UI
+      res.status(400).json({ 
+        created: false,
+        error: "keys_exist",
+        message: "API keys already exist. Generate new keys via CLI.",
+      });
       return;
     }
 
diff --git a/backend/server.ts b/backend/server.ts
index f25da1ed..515bfe3d 100644
--- a/backend/server.ts
+++ b/backend/server.ts
@@ -335,21 +335,24 @@ async function configureCli() {
           .option("name", {
             alias: "n",
             type: "string",
-            describe: "The name of the token.",
-            default: `test_${Math.floor(Date.now() / 1000)}`,
+            describe: "The name of the token (e.g. browser-ui, cli, mobile).",
+            default: "default",
           }),
       async (args: ArgumentsCamelCase<{ owner: string; name: string }>) => {
         const owner = String(args.owner);
         const name = String(args.name);
-        console.log(`Owner: ${owner}`);
-        console.log(`Name: ${name}`);
-        console.log("Generating token...");
+        console.log("Generating API key...");
         await setupResources();
         const { apiKey, clientId } = await generateApiKeyWithId(owner, name, [
           { resource: "**", action: "**", effect: "allow" } as Policy,
         ]);
+        console.log("");
+        console.log(`Created API key "${name}" (owner: ${owner})`);
+        console.log("");
         console.log(`MYCELIA_CLIENT_ID=${clientId}`);
         console.log(`MYCELIA_TOKEN=${apiKey}`);
+        console.log("");
+        console.log("Copy these values to your .env file or enter them in the setup page.");
       },
     )
     .command(
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 7ffe2336..aaafacaa 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -9,6 +9,7 @@ import { Button } from "@/components/ui/button.tsx";
 import { useJobsListener } from "@/hooks/useJobsListener";
 import { Badge } from "@/components/ui/badge";
 import { NotificationCenter } from "@/components/NotificationCenter";
+import { RecordingIndicator } from "@/components/RecordingIndicator";
 
 const Layout = () => {
   useTheme();
@@ -105,6 +106,7 @@ const Layout = () => {
                 </div>
               </div>
               <div className="flex items-center gap-2">
+                <RecordingIndicator />
                 <NotificationCenter />
                 {isPlaying && (
                   <Link to="/audio">
diff --git a/frontend/src/components/RecordingIndicator.tsx b/frontend/src/components/RecordingIndicator.tsx
new file mode 100644
index 00000000..d7f76790
--- /dev/null
+++ b/frontend/src/components/RecordingIndicator.tsx
@@ -0,0 +1,75 @@
+import { Link } from "react-router-dom";
+import { Mic, Square } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  useRecordingStore,
+  recordingResources,
+  formatDuration,
+} from "@/stores/recordingStore";
+import { cn } from "@/lib/utils";
+
+export function RecordingIndicator() {
+  const { isRecording, recordingDuration, deviceLabel } = useRecordingStore();
+
+  if (!isRecording) {
+    return null;
+  }
+
+  const handleStop = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (recordingResources.stopRecordingFn) {
+      recordingResources.stopRecordingFn();
+    }
+  };
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Link to="/audio/record">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="gap-2 px-2 h-9 text-red-500 hover:text-red-600 hover:bg-red-500/10"
+          >
+            {/* Pulsing recording dot */}
+            <span className="relative flex h-3 w-3">
+              <span
+                className={cn(
+                  "animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75",
+                )}
+              />
+              <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500" />
+            </span>
+
+            {/* Duration */}
+            <span className="font-mono text-sm font-medium">
+              {formatDuration(recordingDuration)}
+            </span>
+
+            {/* Stop button */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6 p-0 hover:bg-red-500/20"
+              onClick={handleStop}
+            >
+              <Square className="h-3.5 w-3.5 fill-current" />
+            </Button>
+          </Button>
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <p>
+          Recording{deviceLabel ? ` from ${deviceLabel}` : ""}
+        </p>
+        <p className="text-xs text-muted-foreground">Click to view, stop to end</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/frontend/src/components/SettingsLayout.tsx b/frontend/src/components/SettingsLayout.tsx
index 4161f3be..2501863d 100644
--- a/frontend/src/components/SettingsLayout.tsx
+++ b/frontend/src/components/SettingsLayout.tsx
@@ -15,7 +15,7 @@ const SettingsLayout = () => {
       name: "API",
       path: "/settings/api",
       icon: Key,
-      description: "API configuration and authentication",
+      description: "API endpoint, credentials & keys",
     },
   ];
 
@@ -32,13 +32,6 @@ const SettingsLayout = () => {
       icon: ScrollText,
       description: "Manage prompt templates",
     },
-    {
-      name: "API Keys",
-      path: "/settings/api-keys",
-      icon: Key,
-      description: "Manage API keys and policies",
-    },
-
     {
       name: "Configuration",
       path: "/settings/config",
diff --git a/frontend/src/components/audio/RecentRecordingsList.tsx b/frontend/src/components/audio/RecentRecordingsList.tsx
new file mode 100644
index 00000000..84eafe14
--- /dev/null
+++ b/frontend/src/components/audio/RecentRecordingsList.tsx
@@ -0,0 +1,122 @@
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { api } from "@/lib/api";
+import { RecordingCard, type SourceFileRecord } from "./RecordingCard";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Loader2, RefreshCw, ChevronDown, ListMusic } from "lucide-react";
+
+const PAGE_SIZE = 5;
+
+export function RecentRecordingsList() {
+  const [displayCount, setDisplayCount] = useState(PAGE_SIZE);
+
+  const {
+    data: recordings,
+    isLoading,
+    refetch,
+    isFetching,
+  } = useQuery({
+    queryKey: ["recent-web-recordings", displayCount],
+    queryFn: async () => {
+      // Query source_files for web recordings (streaming_api from web)
+      const results = await api.callResource("mongo", {
+        action: "find",
+        collection: "source_files",
+        query: {
+          $or: [
+            { "metadata.source": "websocket" },
+            { importer: "streaming_api", "platform.node": "web" },
+          ],
+        },
+        options: {
+          sort: { start: -1 },
+          limit: displayCount + 1, // +1 to check if there's more
+        },
+      }) as SourceFileRecord[];
+
+      return results;
+    },
+    refetchInterval: 30000, // Refetch every 30 seconds
+  });
+
+  const hasMore = recordings && recordings.length > displayCount;
+  const displayedRecordings = recordings?.slice(0, displayCount) || [];
+
+  const handleLoadMore = () => {
+    setDisplayCount((prev) => prev + PAGE_SIZE);
+  };
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-lg">
+            <ListMusic className="h-5 w-5" />
+            Recent Recordings
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="flex items-center justify-center py-8">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!recordings || recordings.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-lg">
+            <ListMusic className="h-5 w-5" />
+            Recent Recordings
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground text-center py-4">
+            No recordings yet. Start recording to see your audio here.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <ListMusic className="h-5 w-5" />
+          Recent Recordings
+        </CardTitle>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => refetch()}
+          disabled={isFetching}
+        >
+          <RefreshCw
+            className={`h-4 w-4 mr-1 ${isFetching ? "animate-spin" : ""}`}
+          />
+          Refresh
+        </Button>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {displayedRecordings.map((recording) => (
+          <RecordingCard key={recording._id} recording={recording} />
+        ))}
+
+        {hasMore && (
+          <Button
+            variant="outline"
+            className="w-full"
+            onClick={handleLoadMore}
+            disabled={isFetching}
+          >
+            <ChevronDown className="h-4 w-4 mr-2" />
+            Load More
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/audio/RecordingCard.tsx b/frontend/src/components/audio/RecordingCard.tsx
new file mode 100644
index 00000000..fb248606
--- /dev/null
+++ b/frontend/src/components/audio/RecordingCard.tsx
@@ -0,0 +1,295 @@
+import { useState } from "react";
+import { format, formatDistanceToNow } from "date-fns";
+import {
+  ChevronDown,
+  ChevronUp,
+  Clock,
+  Mic,
+  Play,
+  Settings2,
+  FileAudio,
+  Loader2,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { useAudioPlayer } from "@/modules/audio/player";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import { ObjectId } from "bson";
+
+export interface SourceFileRecord {
+  _id: string;
+  start: Date;
+  size?: number;
+  extension?: string;
+  ingested?: boolean;
+  importer?: string;
+  platform?: {
+    system?: string;
+    node?: string;
+  };
+  metadata?: {
+    rate?: number;
+    width?: number;
+    channels?: number;
+    format?: string;
+    source?: string;
+    echoCancellation?: boolean;
+    noiseSuppression?: boolean;
+    autoGainControl?: boolean;
+  };
+  processing_status?: string;
+}
+
+interface RecordingCardProps {
+  recording: SourceFileRecord;
+}
+
+export function RecordingCard({ recording }: RecordingCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { resetDate, setIsPlaying } = useAudioPlayer();
+
+  // Fetch chunk count when expanded
+  const { data: chunkCount, isLoading: isLoadingChunks } = useQuery({
+    queryKey: ["recording-chunks", recording._id],
+    queryFn: async () => {
+      const count = await api.callResource("mongo", {
+        action: "count",
+        collection: "audio_chunks",
+        query: { original_id: new ObjectId(recording._id) },
+      });
+      return count as number;
+    },
+    enabled: isExpanded,
+  });
+
+  // Calculate duration from chunks (approximate based on chunk count)
+  const { data: durationData, isLoading: isLoadingDuration } = useQuery({
+    queryKey: ["recording-duration", recording._id],
+    queryFn: async () => {
+      // Get first and last chunk to calculate duration
+      const chunks = await api.callResource("mongo", {
+        action: "find",
+        collection: "audio_chunks",
+        query: { original_id: new ObjectId(recording._id) },
+        options: {
+          sort: { start: 1 },
+          limit: 1,
+          projection: { start: 1 },
+        },
+      }) as Array<{ start: Date }>;
+
+      const lastChunks = await api.callResource("mongo", {
+        action: "find",
+        collection: "audio_chunks",
+        query: { original_id: new ObjectId(recording._id) },
+        options: {
+          sort: { start: -1 },
+          limit: 1,
+          projection: { start: 1 },
+        },
+      }) as Array<{ start: Date }>;
+
+      if (chunks.length > 0 && lastChunks.length > 0) {
+        const firstTime = new Date(chunks[0].start).getTime();
+        const lastTime = new Date(lastChunks[0].start).getTime();
+        // Add approximate chunk duration (1 second for opus at default settings)
+        return Math.ceil((lastTime - firstTime) / 1000) + 1;
+      }
+      return 0;
+    },
+    enabled: true,
+  });
+
+  const handlePlay = () => {
+    resetDate(new Date(recording.start));
+    setIsPlaying(true);
+  };
+
+  const formatDurationDisplay = (seconds: number) => {
+    if (seconds < 60) return `${seconds}s`;
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    if (mins < 60) return `${mins}m ${secs}s`;
+    const hours = Math.floor(mins / 60);
+    const remainingMins = mins % 60;
+    return `${hours}h ${remainingMins}m`;
+  };
+
+  const startDate = new Date(recording.start);
+  const metadata = recording.metadata || {};
+
+  return (
+    <Card className="overflow-hidden">
+      <CardContent className="p-0">
+        {/* Main row - always visible */}
+        <div
+          className={cn(
+            "flex items-center gap-3 p-3 cursor-pointer hover:bg-muted/50 transition-colors",
+            isExpanded && "border-b",
+          )}
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          {/* Play button */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-9 w-9 shrink-0"
+            onClick={(e) => {
+              e.stopPropagation();
+              handlePlay();
+            }}
+          >
+            <Play className="h-4 w-4" />
+          </Button>
+
+          {/* Recording info */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-sm truncate">
+                {format(startDate, "MMM d, yyyy 'at' h:mm a")}
+              </span>
+              <span className="text-xs text-muted-foreground">
+                ({formatDistanceToNow(startDate, { addSuffix: true })})
+              </span>
+            </div>
+            <div className="flex items-center gap-2 mt-0.5">
+              {durationData !== undefined && !isLoadingDuration ? (
+                <span className="text-xs text-muted-foreground flex items-center gap-1">
+                  <Clock className="h-3 w-3" />
+                  {formatDurationDisplay(durationData)}
+                </span>
+              ) : (
+                <span className="text-xs text-muted-foreground flex items-center gap-1">
+                  <Clock className="h-3 w-3" />
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                </span>
+              )}
+              {metadata.rate && (
+                <span className="text-xs text-muted-foreground">
+                  {metadata.rate / 1000} kHz
+                </span>
+              )}
+              {recording.processing_status && (
+                <Badge
+                  variant={
+                    recording.processing_status === "complete"
+                      ? "secondary"
+                      : "outline"
+                  }
+                  className="text-xs h-5"
+                >
+                  {recording.processing_status}
+                </Badge>
+              )}
+            </div>
+          </div>
+
+          {/* Expand button */}
+          <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
+            {isExpanded ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+
+        {/* Expanded details */}
+        {isExpanded && (
+          <div className="p-3 bg-muted/30 space-y-3">
+            {/* Audio settings */}
+            <div className="space-y-2">
+              <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
+                <Settings2 className="h-3.5 w-3.5" />
+                Recording Settings
+              </div>
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-xs">
+                <div className="flex items-center gap-1.5">
+                  <Mic className="h-3 w-3 text-muted-foreground" />
+                  <span>Sample Rate:</span>
+                  <span className="font-medium">
+                    {metadata.rate ? `${metadata.rate / 1000} kHz` : "Unknown"}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <span>Channels:</span>
+                  <span className="font-medium">{metadata.channels || 1}</span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <span>Format:</span>
+                  <span className="font-medium">{metadata.format || "pcm"}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Processing options */}
+            <div className="space-y-2">
+              <div className="text-xs font-medium text-muted-foreground">
+                Audio Processing
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Badge
+                  variant={metadata.echoCancellation ? "default" : "outline"}
+                  className="text-xs"
+                >
+                  Echo Cancellation: {metadata.echoCancellation ? "On" : "Off"}
+                </Badge>
+                <Badge
+                  variant={metadata.noiseSuppression ? "default" : "outline"}
+                  className="text-xs"
+                >
+                  Noise Suppression: {metadata.noiseSuppression ? "On" : "Off"}
+                </Badge>
+                <Badge
+                  variant={metadata.autoGainControl ? "default" : "outline"}
+                  className="text-xs"
+                >
+                  Auto Gain: {metadata.autoGainControl ? "On" : "Off"}
+                </Badge>
+              </div>
+            </div>
+
+            {/* File info */}
+            <div className="space-y-2">
+              <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
+                <FileAudio className="h-3.5 w-3.5" />
+                File Details
+              </div>
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-xs">
+                {recording.size !== undefined && (
+                  <div>
+                    <span>Size: </span>
+                    <span className="font-medium">
+                      {(recording.size / 1024).toFixed(1)} KB
+                    </span>
+                  </div>
+                )}
+                {!isLoadingChunks && chunkCount !== undefined && (
+                  <div>
+                    <span>Chunks: </span>
+                    <span className="font-medium">{chunkCount}</span>
+                  </div>
+                )}
+                <div>
+                  <span>Ingested: </span>
+                  <span className="font-medium">
+                    {recording.ingested ? "Yes" : "No"}
+                  </span>
+                </div>
+                {recording.importer && (
+                  <div>
+                    <span>Source: </span>
+                    <span className="font-medium">{recording.importer}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/hooks/useAudioRecording.ts b/frontend/src/hooks/useAudioRecording.ts
index 9a50f811..4afcca63 100644
--- a/frontend/src/hooks/useAudioRecording.ts
+++ b/frontend/src/hooks/useAudioRecording.ts
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { apiClient } from "@/lib/api";
 import { useSettingsStore } from "@/stores/settingsStore";
+import { useRecordingStore, recordingResources } from "@/stores/recordingStore";
 import { toast } from "sonner";
 
 export type RecordingStep =
@@ -198,8 +199,42 @@ export const useAudioRecording = (): AudioRecordingReturn => {
   }, [canAccessMicrophone, refreshDevices]);
 
   useEffect(() => {
-    refreshDevices();
-  }, [refreshDevices]);
+    const initDevices = async () => {
+      await refreshDevices();
+      // Auto-request permission if no devices detected (likely need permission first)
+      if (canAccessMicrophone && navigator.mediaDevices) {
+        try {
+          const devices = await navigator.mediaDevices.enumerateDevices();
+          const audioInputs = devices.filter(
+            (d) => d.kind === "audioinput" && d.deviceId !== "",
+          );
+          // If devices have empty labels, we likely need permission
+          if (audioInputs.length === 0 || audioInputs.every((d) => !d.label)) {
+            // Try to get permission silently - will refresh devices on success
+            try {
+              const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+              stream.getTracks().forEach((track) => track.stop());
+              await refreshDevices();
+            } catch {
+              // Permission denied or not available - user will need to click the button
+            }
+          }
+        } catch {
+          // enumerateDevices failed
+        }
+      }
+    };
+
+    initDevices();
+
+    // Auto-refresh when devices change (plug/unplug)
+    const handleDeviceChange = () => refreshDevices();
+    navigator.mediaDevices?.addEventListener("devicechange", handleDeviceChange);
+
+    return () => {
+      navigator.mediaDevices?.removeEventListener("devicechange", handleDeviceChange);
+    };
+  }, [refreshDevices, canAccessMicrophone]);
 
   const getMicrophoneAccess = useCallback(async (): Promise<MediaStream> => {
     if (!canAccessMicrophone) {
@@ -477,6 +512,10 @@ export const useAudioRecording = (): AudioRecordingReturn => {
           channels: 1,
           mode: "streaming",
           timestamp: sessionStartTimestamp,
+          // Include audio processing settings for metadata storage
+          echoCancellation,
+          noiseSuppression,
+          autoGainControl,
         };
 
         const bitDepth = audioFormat.width * 8;
@@ -553,8 +592,42 @@ export const useAudioRecording = (): AudioRecordingReturn => {
     setIsRecording(false);
     setCurrentStep("idle");
     setRecordingDuration(0);
+
+    // Clear global resources
+    recordingResources.stopRecordingFn = null;
+    recordingResources.analyserRef = null;
   }, [isRecording, sendWyomingMessage, cleanup]);
 
+  // Sync state to global store for navbar indicator
+  const globalStore = useRecordingStore();
+  useEffect(() => {
+    globalStore.setIsRecording(isRecording);
+  }, [isRecording, globalStore]);
+
+  useEffect(() => {
+    globalStore.setRecordingDuration(recordingDuration);
+  }, [recordingDuration, globalStore]);
+
+  useEffect(() => {
+    globalStore.setCurrentStep(currentStep);
+  }, [currentStep, globalStore]);
+
+  useEffect(() => {
+    globalStore.setError(error);
+  }, [error, globalStore]);
+
+  // Register stopRecording in global resources so it can be called from anywhere
+  useEffect(() => {
+    if (isRecording) {
+      recordingResources.stopRecordingFn = stopRecording;
+      recordingResources.analyserRef = analyserRef.current;
+      // Set device label for indicator
+      const selectedDevice = availableDevices.find(d => d.deviceId === selectedDeviceId);
+      globalStore.setDeviceLabel(selectedDevice?.label || null);
+      globalStore.setSampleRate(sampleRate);
+    }
+  }, [isRecording, stopRecording, availableDevices, selectedDeviceId, sampleRate, globalStore]);
+
   useEffect(() => {
     return () => {
       cleanup();
diff --git a/frontend/src/pages/CreateAudioRecordPage.tsx b/frontend/src/pages/CreateAudioRecordPage.tsx
index 84569431..e2d48d67 100644
--- a/frontend/src/pages/CreateAudioRecordPage.tsx
+++ b/frontend/src/pages/CreateAudioRecordPage.tsx
@@ -2,7 +2,7 @@ import { Radio, RefreshCw } from "lucide-react";
 import { useAudioRecording } from "@/hooks/useAudioRecording";
 import { RecordingControls } from "@/components/audio/RecordingControls";
 import { RecordingStatus } from "@/components/audio/RecordingStatus";
-import { AudioVisualizer } from "@/components/audio/AudioVisualizer";
+import { RecentRecordingsList } from "@/components/audio/RecentRecordingsList";
 import { Card } from "@/components/ui/card";
 import {
   Select,
@@ -89,7 +89,7 @@ export default function CreateAudioRecordPage() {
             </div>
           )}
 
-          <div>
+          <div className="space-y-2">
             <Label htmlFor="sample-rate-select">Sample Rate</Label>
             <Select
               value={recording.sampleRate.toString()}
@@ -101,62 +101,80 @@ export default function CreateAudioRecordPage() {
                 <SelectValue placeholder="Select sample rate..." />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="8000">8 kHz</SelectItem>
-                <SelectItem value="16000">16 kHz</SelectItem>
-                <SelectItem value="22050">22.05 kHz</SelectItem>
-                <SelectItem value="44100">44.1 kHz</SelectItem>
-                <SelectItem value="48000">48 kHz</SelectItem>
+                <SelectItem value="8000">8 kHz — Telephony, smallest files</SelectItem>
+                <SelectItem value="16000">16 kHz — Speech recognition (recommended)</SelectItem>
+                <SelectItem value="22050">22.05 kHz — Voice/podcast</SelectItem>
+                <SelectItem value="44100">44.1 kHz — CD quality</SelectItem>
+                <SelectItem value="48000">48 kHz — Professional audio</SelectItem>
               </SelectContent>
             </Select>
+            <p className="text-xs text-muted-foreground">
+              16 kHz is optimal for transcription. Higher rates improve quality but increase file size.
+            </p>
           </div>
 
           <div className="space-y-3">
             <Label>Audio Processing</Label>
-            <div className="space-y-2">
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="echo-cancellation"
-                  checked={echoCancellation}
-                  onCheckedChange={(checked) =>
-                    setEchoCancellation(checked === true)}
-                  disabled={recording.isRecording}
-                />
-                <Label
-                  htmlFor="echo-cancellation"
-                  className="text-sm font-normal cursor-pointer"
-                >
-                  Echo Cancellation
-                </Label>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="flex flex-col space-y-1.5 p-3 rounded-lg border bg-card">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="echo-cancellation"
+                    checked={echoCancellation}
+                    onCheckedChange={(checked) =>
+                      setEchoCancellation(checked === true)}
+                    disabled={recording.isRecording}
+                  />
+                  <Label
+                    htmlFor="echo-cancellation"
+                    className="text-sm font-medium cursor-pointer"
+                  >
+                    Echo Cancellation
+                  </Label>
+                </div>
+                <p className="text-xs text-muted-foreground pl-6">
+                  Removes feedback from speakers. Enable when recording near playback.
+                </p>
               </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="noise-suppression"
-                  checked={noiseSuppression}
-                  onCheckedChange={(checked) =>
-                    setNoiseSuppression(checked === true)}
-                  disabled={recording.isRecording}
-                />
-                <Label
-                  htmlFor="noise-suppression"
-                  className="text-sm font-normal cursor-pointer"
-                >
-                  Noise Suppression
-                </Label>
+              <div className="flex flex-col space-y-1.5 p-3 rounded-lg border bg-card">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="noise-suppression"
+                    checked={noiseSuppression}
+                    onCheckedChange={(checked) =>
+                      setNoiseSuppression(checked === true)}
+                    disabled={recording.isRecording}
+                  />
+                  <Label
+                    htmlFor="noise-suppression"
+                    className="text-sm font-medium cursor-pointer"
+                  >
+                    Noise Suppression
+                  </Label>
+                </div>
+                <p className="text-xs text-muted-foreground pl-6">
+                  Reduces background noise (fans, AC). May slightly affect voice quality.
+                </p>
               </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="auto-gain-control"
-                  checked={autoGainControl}
-                  onCheckedChange={(checked) =>
-                    setAutoGainControl(checked === true)}
-                  disabled={recording.isRecording}
-                />
-                <Label
-                  htmlFor="auto-gain-control"
-                  className="text-sm font-normal cursor-pointer"
-                >
-                  Auto Gain Control
-                </Label>
+              <div className="flex flex-col space-y-1.5 p-3 rounded-lg border bg-card">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="auto-gain-control"
+                    checked={autoGainControl}
+                    onCheckedChange={(checked) =>
+                      setAutoGainControl(checked === true)}
+                    disabled={recording.isRecording}
+                  />
+                  <Label
+                    htmlFor="auto-gain-control"
+                    className="text-sm font-medium cursor-pointer"
+                  >
+                    Auto Gain Control
+                  </Label>
+                </div>
+                <p className="text-xs text-muted-foreground pl-6">
+                  Automatically adjusts volume levels. Good for varying voice volumes.
+                </p>
               </div>
             </div>
           </div>
@@ -172,6 +190,8 @@ export default function CreateAudioRecordPage() {
       <RecordingControls recording={recording} />
 
       <RecordingStatus recording={recording} />
+
+      <RecentRecordingsList />
     </div>
   );
 }
diff --git a/frontend/src/pages/SetupPage.tsx b/frontend/src/pages/SetupPage.tsx
index 65fb279e..f5d5da4b 100644
--- a/frontend/src/pages/SetupPage.tsx
+++ b/frontend/src/pages/SetupPage.tsx
@@ -2,12 +2,26 @@ import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { exchangeApiKeyForJWT } from "@/lib/auth";
-import { Loader2, CheckCircle2, XCircle, Sparkles } from "lucide-react";
+import { Loader2, CheckCircle2, XCircle, Terminal, Copy, Check, ClipboardPaste } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
-type SetupStatus = "idle" | "verifying" | "creating_new" | "success" | "error";
+type ServerType = "docker" | "deno" | "custom";
+
+const SERVER_ENDPOINTS: Record<Exclude<ServerType, "custom">, string> = {
+  docker: "https://localhost:4433",
+  deno: "http://localhost:5173",
+};
+
+type SetupStatus = "idle" | "verifying" | "creating_new" | "success" | "error" | "keys_exist";
 
 interface SetupResponse {
   created: boolean;
@@ -45,12 +59,46 @@ export default function SetupPage() {
     setClientSecret,
   } = useSettingsStore();
 
-  const [localEndpoint, setLocalEndpoint] = useState(apiEndpoint);
+  const [serverType, setServerType] = useState<ServerType>("docker");
+  const [localEndpoint, setLocalEndpoint] = useState(apiEndpoint || SERVER_ENDPOINTS.docker);
   const [localClientId, setLocalClientId] = useState("");
   const [localToken, setLocalToken] = useState("");
+  const [pastedCredentials, setPastedCredentials] = useState("");
   const [status, setStatus] = useState<SetupStatus>("idle");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
+  const handleServerTypeChange = (value: ServerType) => {
+    setServerType(value);
+    if (value !== "custom") {
+      setLocalEndpoint(SERVER_ENDPOINTS[value]);
+    }
+  };
+
+  const parseCredentials = () => {
+    const lines = pastedCredentials.trim().split("\n");
+    let foundClientId = "";
+    let foundToken = "";
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (trimmed.startsWith("MYCELIA_CLIENT_ID=")) {
+        foundClientId = trimmed.replace("MYCELIA_CLIENT_ID=", "").trim();
+      } else if (trimmed.startsWith("MYCELIA_TOKEN=")) {
+        foundToken = trimmed.replace("MYCELIA_TOKEN=", "").trim();
+      }
+    }
+
+    if (foundClientId) setLocalClientId(foundClientId);
+    if (foundToken) setLocalToken(foundToken);
+    
+    if (!foundClientId && !foundToken) {
+      setErrorMessage("Could not find MYCELIA_CLIENT_ID or MYCELIA_TOKEN in the pasted text");
+    } else {
+      setPastedCredentials("");
+      setErrorMessage(null);
+    }
+  };
+
   // Redirect if already configured
   useEffect(() => {
     if (clientId && clientSecret) {
@@ -107,11 +155,17 @@ export default function SetupPage() {
         body: JSON.stringify({ create: true }),
       });
 
-      if (!response.ok) {
-        throw new Error(`Server returned ${response.status}`);
+      const data: SetupResponse = await response.json();
+
+      // Handle keys_exist error specifically
+      if (data.error === "keys_exist") {
+        setStatus("keys_exist");
+        return;
       }
 
-      const data: SetupResponse = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || `Server returned ${response.status}`);
+      }
 
       if (data.created && data.clientId && data.clientSecret) {
         setClientId(data.clientId);
@@ -132,6 +186,15 @@ export default function SetupPage() {
   };
 
   const isLoading = status === "verifying" || status === "creating_new";
+  const [copiedCommand, setCopiedCommand] = useState(false);
+
+  const copyCommand = async (command: string) => {
+    await navigator.clipboard.writeText(command);
+    setCopiedCommand(true);
+    setTimeout(() => setCopiedCommand(false), 2000);
+  };
+
+  const isRemoteServer = !localEndpoint.includes("localhost") && !localEndpoint.includes("127.0.0.1");
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center p-4">
@@ -165,6 +228,115 @@ export default function SetupPage() {
                 Continuing to next step...
               </p>
             </div>
+          ) : status === "keys_exist" ? (
+            <div className="space-y-6">
+              <div className="text-center">
+                <Terminal className="w-12 h-12 text-purple-400 mx-auto mb-4" />
+                <h2 className="text-white text-lg font-medium mb-2">
+                  Generate Credentials via CLI
+                </h2>
+                <p className="text-slate-400 text-sm">
+                  API keys already exist on this server. Generate new credentials using the command line.
+                </p>
+              </div>
+
+              <div className="space-y-4">
+                {isRemoteServer ? (
+                  <>
+                    <div className="p-4 rounded-lg bg-amber-500/10 border border-amber-500/30">
+                      <p className="text-amber-300 text-sm">
+                        <strong>Remote server detected.</strong> SSH into your server and run:
+                      </p>
+                    </div>
+                    <div className="relative">
+                      <pre className="bg-slate-900/80 rounded-lg p-4 text-sm font-mono text-slate-300 overflow-x-auto">
+                        <code>docker compose exec backend deno run -A server.ts token-create --name browser-ui</code>
+                      </pre>
+                      <Button
+                        type="button"
+                        size="sm"
+                        variant="ghost"
+                        className="absolute top-2 right-2 text-slate-400 hover:text-white"
+                        onClick={() => copyCommand("docker compose exec backend deno run -A server.ts token-create --name browser-ui")}
+                      >
+                        {copiedCommand ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                      </Button>
+                    </div>
+                    <p className="text-slate-500 text-xs">
+                      Server endpoint: <code className="text-purple-400">{localEndpoint}</code>
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <p className="text-slate-400 text-sm">
+                      Run one of these commands in your terminal:
+                    </p>
+                    
+                    {/* Docker option */}
+                    <div className="space-y-2 p-3 rounded-lg bg-slate-800/50 border border-slate-700/50">
+                      <p className="text-slate-300 text-xs font-medium">Docker (recommended)</p>
+                      <div className="relative">
+                        <pre className="bg-slate-900/80 rounded-lg p-3 text-sm font-mono text-slate-300 overflow-x-auto">
+                          <code>docker compose exec backend deno run -A server.ts token-create --name browser-ui</code>
+                        </pre>
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="ghost"
+                          className="absolute top-2 right-2 text-slate-400 hover:text-white"
+                          onClick={() => copyCommand("docker compose exec backend deno run -A server.ts token-create --name browser-ui")}
+                        >
+                          {copiedCommand ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                        </Button>
+                      </div>
+                      <p className="text-slate-500 text-xs">
+                        Server endpoint: <code className="text-purple-400">https://localhost:4433</code>
+                      </p>
+                    </div>
+                    
+                    {/* Non-Docker option */}
+                    <div className="space-y-2 p-3 rounded-lg bg-slate-800/50 border border-slate-700/50">
+                      <p className="text-slate-300 text-xs font-medium">Local development (deno task dev)</p>
+                      <div className="relative">
+                        <pre className="bg-slate-900/80 rounded-lg p-3 text-sm font-mono text-slate-300 overflow-x-auto">
+                          <code>cd backend && deno run -A server.ts token-create --name browser-ui</code>
+                        </pre>
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="ghost"
+                          className="absolute top-2 right-2 text-slate-400 hover:text-white"
+                          onClick={() => copyCommand("cd backend && deno run -A server.ts token-create --name browser-ui")}
+                        >
+                          {copiedCommand ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                        </Button>
+                      </div>
+                      <p className="text-slate-500 text-xs">
+                        Server endpoint: <code className="text-purple-400">http://localhost:5173</code>
+                      </p>
+                    </div>
+                  </>
+                )}
+
+                <div className="text-slate-400 text-sm space-y-2">
+                  <p>This will output your credentials:</p>
+                  <pre className="bg-slate-900/80 rounded-lg p-3 text-xs font-mono text-slate-500">
+{`MYCELIA_CLIENT_ID=abc123...
+MYCELIA_TOKEN=mycelia_xyz...`}
+                  </pre>
+                </div>
+              </div>
+
+              <div className="border-t border-white/10 pt-4">
+                <Button
+                  type="button"
+                  onClick={() => setStatus("idle")}
+                  className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-5 rounded-xl"
+                >
+                  I have my credentials
+                </Button>
+              </div>
+            </div>
           ) : (
             <form onSubmit={(e) => { e.preventDefault(); verifyAndSaveCredentials(); }}>
               {errorMessage && (
@@ -178,18 +350,77 @@ export default function SetupPage() {
 
               <div className="space-y-4 mb-6">
                 <div>
-                  <Label htmlFor="endpoint" className="text-slate-200 mb-2 block">
-                    Server Endpoint
+                  <Label htmlFor="serverType" className="text-slate-200 mb-2 block">
+                    Server Type
                   </Label>
-                  <Input
-                    id="endpoint"
-                    type="url"
-                    value={localEndpoint}
-                    onChange={(e) => setLocalEndpoint(e.target.value)}
-                    placeholder="https://localhost:4433"
+                  <Select value={serverType} onValueChange={(v) => handleServerTypeChange(v as ServerType)}>
+                    <SelectTrigger className="bg-white/10 border-white/20 text-white">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="docker">Docker (default)</SelectItem>
+                      <SelectItem value="deno">Deno (local dev)</SelectItem>
+                      <SelectItem value="custom">Custom server</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {serverType === "custom" && (
+                  <div>
+                    <Label htmlFor="endpoint" className="text-slate-200 mb-2 block">
+                      Server Endpoint
+                    </Label>
+                    <Input
+                      id="endpoint"
+                      type="url"
+                      value={localEndpoint}
+                      onChange={(e) => setLocalEndpoint(e.target.value)}
+                      placeholder="https://your-server.com"
+                      disabled={isLoading}
+                      className="bg-white/10 border-white/20 text-white placeholder:text-slate-400 focus:border-purple-400 disabled:opacity-50"
+                    />
+                  </div>
+                )}
+
+                {serverType !== "custom" && (
+                  <p className="text-slate-500 text-xs">
+                    Server endpoint: <code className="text-purple-400">{localEndpoint}</code>
+                  </p>
+                )}
+
+                {/* Paste credentials section */}
+                <div className="p-3 rounded-lg bg-slate-800/50 border border-slate-700/50 space-y-3">
+                  <Label className="text-slate-300 text-xs font-medium block">
+                    Paste credentials
+                  </Label>
+                  <textarea
+                    value={pastedCredentials}
+                    onChange={(e) => setPastedCredentials(e.target.value)}
+                    placeholder={`MYCELIA_CLIENT_ID=abc123...\nMYCELIA_TOKEN=mycelia_xyz...`}
                     disabled={isLoading}
-                    className="bg-white/10 border-white/20 text-white placeholder:text-slate-400 focus:border-purple-400 disabled:opacity-50"
+                    rows={3}
+                    className="w-full bg-slate-900/80 border border-white/10 rounded-lg p-3 text-sm font-mono text-slate-300 placeholder:text-slate-600 focus:border-purple-400 focus:outline-none disabled:opacity-50 resize-none"
                   />
+                  <Button
+                    type="button"
+                    onClick={parseCredentials}
+                    disabled={!pastedCredentials.trim() || isLoading}
+                    variant="outline"
+                    size="sm"
+                    className="w-full border-purple-500/50 text-purple-300 hover:bg-purple-500/20 hover:text-white disabled:opacity-50"
+                  >
+                    <ClipboardPaste className="w-4 h-4 mr-2" />
+                    I have credentials
+                  </Button>
+                </div>
+
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <div className="w-full border-t border-white/10" />
+                  </div>
+                  <div className="relative flex justify-center text-xs">
+                    <span className="px-2 bg-transparent text-slate-500">or enter manually</span>
+                  </div>
                 </div>
 
                 <div>
@@ -260,15 +491,26 @@ export default function SetupPage() {
                     </>
                   ) : (
                     <>
-                      <Sparkles className="w-5 h-5 mr-2" />
-                      Generate New API Keys
+                      <Terminal className="w-5 h-5 mr-2" />
+                      First-time setup
                     </>
                   )}
                 </Button>
 
-                <p className="text-slate-500 text-xs text-center mt-4">
-                  Find these values in your <code className="text-slate-400">.env</code> file
-                </p>
+                <div className="text-slate-500 text-xs text-center mt-4 space-y-1">
+                  <p>
+                    Find these values in your <code className="text-slate-400">.env</code> file
+                  </p>
+                  <p className="text-slate-600">
+                    Don't have credentials? <button
+                      type="button"
+                      onClick={() => setStatus("keys_exist")}
+                      className="text-purple-400 hover:text-purple-300 underline underline-offset-2"
+                    >
+                      See how to generate them
+                    </button>
+                  </p>
+                </div>
               </div>
             </form>
           )}
diff --git a/frontend/src/pages/settings/APIKeysPage.tsx b/frontend/src/pages/settings/APIKeysPage.tsx
deleted file mode 100644
index 86b24c98..00000000
--- a/frontend/src/pages/settings/APIKeysPage.tsx
+++ /dev/null
@@ -1,467 +0,0 @@
-import { useEffect, useState } from "react";
-import { callResource } from "@/lib/api";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Key, Plus, Copy, Check, Edit2, Save, X } from "lucide-react";
-import { ObjectId } from "bson";
-
-interface ApiKey {
-  _id: ObjectId;
-  name: string;
-  owner: string;
-  openPrefix: string;
-  isActive: boolean;
-  createdAt: Date;
-  policiesYaml: string;
-}
-
-const defaultPolicyYaml = `- resource: "**"
-  action: "**"
-  effect: allow`;
-
-const APIKeysPage = () => {
-  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [showCreateForm, setShowCreateForm] = useState(false);
-  const [newKeyName, setNewKeyName] = useState("");
-  const [newKeyOwner, setNewKeyOwner] = useState("system");
-  const [newKeyPolicies, setNewKeyPolicies] = useState(defaultPolicyYaml);
-  const [creating, setCreating] = useState(false);
-  const [createdKey, setCreatedKey] = useState<{ clientId: string; apiKey: string } | null>(null);
-  const [copiedClientId, setCopiedClientId] = useState(false);
-  const [copiedSecret, setCopiedSecret] = useState(false);
-  const [editingKeyId, setEditingKeyId] = useState<string | null>(null);
-  const [editedPolicies, setEditedPolicies] = useState<string>("");
-  const [updating, setUpdating] = useState(false);
-
-  const fetchApiKeys = async () => {
-    try {
-      setLoading(true);
-      const result = await callResource("apikeys", {
-        action: "list",
-      });
-      setApiKeys(result);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Failed to fetch API keys",
-      );
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchApiKeys();
-  }, []);
-
-  const handleCreate = async () => {
-    if (!newKeyName.trim()) {
-      setError("Name is required");
-      return;
-    }
-
-    setCreating(true);
-    setError(null);
-
-    try {
-      const result = await callResource("apikeys", {
-        action: "create",
-        name: newKeyName,
-        owner: newKeyOwner,
-        policiesYaml: newKeyPolicies,
-      });
-
-      setCreatedKey({ clientId: result.clientId, apiKey: result.apiKey });
-      setNewKeyName("");
-      setNewKeyPolicies(defaultPolicyYaml);
-      await fetchApiKeys();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to create API key");
-    } finally {
-      setCreating(false);
-    }
-  };
-
-  const handleRevoke = async (id: string, owner: string) => {
-    if (!confirm("Are you sure you want to revoke this API key?")) {
-      return;
-    }
-
-    try {
-      await callResource("apikeys", {
-        action: "revoke",
-        id,
-        owner,
-      });
-      await fetchApiKeys();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to revoke API key");
-    }
-  };
-
-  const handleStartEdit = (key: ApiKey) => {
-    setEditingKeyId(key._id.toString());
-    setEditedPolicies(key.policiesYaml);
-    setError(null);
-  };
-
-  const handleCancelEdit = () => {
-    setEditingKeyId(null);
-    setEditedPolicies("");
-    setError(null);
-  };
-
-  const handleUpdate = async (id: string, owner: string) => {
-    setUpdating(true);
-    setError(null);
-
-    try {
-      await callResource("apikeys", {
-        action: "update",
-        id,
-        owner,
-        policiesYaml: editedPolicies,
-      });
-      setEditingKeyId(null);
-      setEditedPolicies("");
-      await fetchApiKeys();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to update API key policies");
-    } finally {
-      setUpdating(false);
-    }
-  };
-
-  const copyToClipboard = async (text: string, type: 'clientId' | 'secret') => {
-    try {
-      await navigator.clipboard.writeText(text);
-      if (type === 'clientId') {
-        setCopiedClientId(true);
-        setTimeout(() => setCopiedClientId(false), 2000);
-      } else {
-        setCopiedSecret(true);
-        setTimeout(() => setCopiedSecret(false), 2000);
-      }
-    } catch (err) {
-      console.error("Failed to copy to clipboard:", err);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="space-y-6">
-        <div>
-          <h2 className="text-2xl font-semibold mb-2">API Keys</h2>
-          <p className="text-muted-foreground">
-            Manage API keys and their access policies.
-          </p>
-        </div>
-        <div className="border rounded-lg p-8 text-center">
-          <p className="text-muted-foreground">Loading API keys...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-2xl font-semibold mb-2">API Keys</h2>
-          <p className="text-muted-foreground">
-            Manage API keys and their access policies.
-          </p>
-        </div>
-        <Button onClick={() => setShowCreateForm(!showCreateForm)}>
-          <Plus className="w-4 h-4 mr-2" />
-          Create API Key
-        </Button>
-      </div>
-
-      {error && (
-        <div className="border border-red-500 rounded-lg p-4 bg-red-50 dark:bg-red-950">
-          <p className="text-red-600 dark:text-red-400">{error}</p>
-        </div>
-      )}
-
-      {createdKey && (
-        <Card className="p-6 border-green-500 bg-green-50 dark:bg-green-950">
-          <div className="space-y-4">
-            <div className="flex items-center gap-2">
-              <Key className="w-5 h-5 text-green-600 dark:text-green-400" />
-              <h3 className="font-semibold text-green-900 dark:text-green-100">
-                API Key Created Successfully
-              </h3>
-            </div>
-            <p className="text-sm text-green-700 dark:text-green-300">
-              Save these credentials securely. You won't be able to see the secret again.
-            </p>
-
-            <div className="space-y-3">
-              <div className="space-y-1.5">
-                <Label className="text-sm font-semibold text-green-800 dark:text-green-200">
-                  Client ID
-                </Label>
-                <div className="flex gap-2">
-                  <Input
-                    value={createdKey.clientId}
-                    readOnly
-                    className="font-mono text-sm bg-white dark:bg-gray-900"
-                  />
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => copyToClipboard(createdKey.clientId, 'clientId')}
-                  >
-                    {copiedClientId ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
-                  </Button>
-                </div>
-              </div>
-
-              <div className="space-y-1.5">
-                <Label className="text-sm font-semibold text-green-800 dark:text-green-200">
-                  Client Secret (API Key)
-                </Label>
-                <div className="flex gap-2">
-                  <Input
-                    value={createdKey.apiKey}
-                    readOnly
-                    className="font-mono text-sm bg-white dark:bg-gray-900"
-                  />
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => copyToClipboard(createdKey.apiKey, 'secret')}
-                  >
-                    {copiedSecret ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
-                  </Button>
-                </div>
-              </div>
-            </div>
-
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setCreatedKey(null)}
-            >
-              Dismiss
-            </Button>
-          </div>
-        </Card>
-      )}
-
-      {showCreateForm && (
-        <Card className="p-6">
-          <div className="space-y-4">
-            <h3 className="font-semibold text-lg">Create New API Key</h3>
-
-            <div className="space-y-2">
-              <Label htmlFor="keyName">Name</Label>
-              <Input
-                id="keyName"
-                value={newKeyName}
-                onChange={(e) => setNewKeyName(e.target.value)}
-                placeholder="My API Key"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="keyOwner">Owner</Label>
-              <Input
-                id="keyOwner"
-                value={newKeyOwner}
-                onChange={(e) => setNewKeyOwner(e.target.value)}
-                placeholder="system"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="policies">Policies</Label>
-              <textarea
-                id="policies"
-                value={newKeyPolicies}
-                onChange={(e) => setNewKeyPolicies(e.target.value)}
-                className="flex min-h-[200px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm font-mono focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                placeholder={defaultPolicyYaml}
-              />
-              <p className="text-xs text-muted-foreground">
-                Define access policies in YAML format.
-              </p>
-            </div>
-
-            <div className="flex gap-2">
-              <Button onClick={handleCreate} disabled={creating}>
-                {creating ? "Creating..." : "Create Key"}
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() => setShowCreateForm(false)}
-              >
-                Cancel
-              </Button>
-            </div>
-          </div>
-        </Card>
-      )}
-
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Existing API Keys</h3>
-        {apiKeys.length === 0 ? (
-          <Card className="p-8 text-center border-dashed">
-            <Key className="w-12 h-12 mx-auto mb-4 text-muted-foreground opacity-50" />
-            <p className="text-muted-foreground">
-              No API keys yet. Create one to get started.
-            </p>
-          </Card>
-        ) : (
-          <div className="space-y-2">
-            {apiKeys.map((key) => (
-              <Card key={key._id.toString()} className="p-3">
-                <details className="group" open={editingKeyId === key._id.toString()}>
-                  <summary className="list-none cursor-pointer">
-                    <div className="flex items-center gap-2">
-                      {/* Name column - fixed width */}
-                      <div className="w-[160px] shrink-0 truncate">
-                        <h3 className="font-semibold text-sm truncate">{key.name}</h3>
-                      </div>
-
-                      {/* ID column - fixed width */}
-                      <div className="w-[120px] shrink-0 flex items-center gap-1 text-xs">
-                        <span className="text-muted-foreground">ID:</span>
-                        <code className="font-mono text-[11px] bg-muted px-1.5 py-0.5 rounded truncate">
-                          {key._id.toString().slice(0, 8)}...
-                        </code>
-                      </div>
-
-                      {/* Secret column - fixed width */}
-                      <div className="w-[160px] shrink-0 flex items-center gap-1 text-xs">
-                        <span className="text-muted-foreground">Secret:</span>
-                        <code className="font-mono text-[11px] bg-muted px-1.5 py-0.5 rounded truncate">
-                          {key.openPrefix}...
-                        </code>
-                      </div>
-
-                      {/* Owner column - fixed width */}
-                      <div className="w-[80px] shrink-0 flex items-center gap-1 text-xs">
-                        <span className="text-muted-foreground">Owner:</span>
-                        <span className="truncate">{key.owner}</span>
-                      </div>
-
-                      {/* Date column - fixed width */}
-                      <div className="w-[90px] shrink-0 text-xs text-muted-foreground">
-                        {new Date(key.createdAt).toLocaleDateString()}
-                      </div>
-
-                      {/* Spacer */}
-                      <div className="flex-1" />
-
-                      {/* Details toggle - fixed width */}
-                      <div className="w-[60px] shrink-0">
-                        <span className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1">
-                          <span className="group-open:hidden">▶</span>
-                          <span className="hidden group-open:inline">▼</span>
-                          Details
-                        </span>
-                      </div>
-
-                      {/* Action column - fixed width */}
-                      <div className="w-[70px] shrink-0 flex justify-end">
-                        {key.isActive ? (
-                          <Button
-                            variant="destructive"
-                            size="sm"
-                            className="h-7 px-2 text-xs"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleRevoke(key._id.toString(), key.owner);
-                            }}
-                            title="Revoke this API key"
-                          >
-                            Revoke
-                          </Button>
-                        ) : (
-                          <span className="inline-flex items-center justify-center h-7 px-2 text-[11px] rounded-md bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
-                            Revoked
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  </summary>
-
-                  {/* Expandable policies section */}
-                  <div className="pt-2 mt-2 border-t">
-                    <div className="flex items-center justify-between mb-2">
-                      <span className="text-xs font-medium text-muted-foreground">Policies</span>
-                      {key.isActive && editingKeyId !== key._id.toString() && (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 text-xs"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleStartEdit(key);
-                          }}
-                          title="Edit policies"
-                        >
-                          <Edit2 className="w-3 h-3 mr-1" />
-                          Edit
-                        </Button>
-                      )}
-                    </div>
-                    {editingKeyId === key._id.toString() ? (
-                      <div className="space-y-2">
-                        <textarea
-                          value={editedPolicies}
-                          onChange={(e) => setEditedPolicies(e.target.value)}
-                          className="flex min-h-[120px] w-full rounded-md border border-input bg-transparent px-2 py-1.5 text-xs shadow-sm font-mono focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                          placeholder={defaultPolicyYaml}
-                          onClick={(e) => e.stopPropagation()}
-                        />
-                        <div className="flex gap-2">
-                          <Button
-                            size="sm"
-                            className="h-7 text-xs"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleUpdate(key._id.toString(), key.owner);
-                            }}
-                            disabled={updating}
-                          >
-                            <Save className="w-3 h-3 mr-1" />
-                            {updating ? "Saving..." : "Save"}
-                          </Button>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="h-7 text-xs"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleCancelEdit();
-                            }}
-                            disabled={updating}
-                          >
-                            <X className="w-3 h-3 mr-1" />
-                            Cancel
-                          </Button>
-                        </div>
-                      </div>
-                    ) : (
-                      <pre className="p-2 bg-muted rounded text-[11px] font-mono overflow-x-auto">
-                        {key.policiesYaml}
-                      </pre>
-                    )}
-                  </div>
-                </details>
-              </Card>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default APIKeysPage;
diff --git a/frontend/src/pages/settings/APISettingsPage.tsx b/frontend/src/pages/settings/APISettingsPage.tsx
index 49ec3110..8da2d402 100644
--- a/frontend/src/pages/settings/APISettingsPage.tsx
+++ b/frontend/src/pages/settings/APISettingsPage.tsx
@@ -1,11 +1,34 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { exchangeApiKeyForJWT } from "@/lib/auth";
+import { callResource } from "@/lib/api";
 import { APIEndpointField } from "@/components/forms/APIEndpointField";
 import { ClientCredentialsFields } from "@/components/forms/ClientCredentialsFields";
 import { APIActions } from "@/components/forms/APIActions";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Key, Plus, Copy, Check, Edit2, Save, X } from "lucide-react";
+import { ObjectId } from "bson";
+
+interface ApiKey {
+  _id: ObjectId;
+  name: string;
+  owner: string;
+  openPrefix: string;
+  isActive: boolean;
+  createdAt: Date;
+  policiesYaml: string;
+}
+
+const defaultPolicyYaml = `- resource: "**"
+  action: "**"
+  effect: allow`;
 
 const APISettingsPage = () => {
+  // --- Client config state ---
   const {
     apiEndpoint,
     clientId,
@@ -24,6 +47,23 @@ const APISettingsPage = () => {
     "success" | string | null
   >(null);
 
+  // --- API Keys state ---
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
+  const [keysLoading, setKeysLoading] = useState(true);
+  const [keysError, setKeysError] = useState<string | null>(null);
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [newKeyName, setNewKeyName] = useState("");
+  const [newKeyOwner, setNewKeyOwner] = useState("system");
+  const [newKeyPolicies, setNewKeyPolicies] = useState(defaultPolicyYaml);
+  const [creating, setCreating] = useState(false);
+  const [createdKey, setCreatedKey] = useState<{ clientId: string; apiKey: string } | null>(null);
+  const [copiedClientId, setCopiedClientId] = useState(false);
+  const [copiedSecret, setCopiedSecret] = useState(false);
+  const [editingKeyId, setEditingKeyId] = useState<string | null>(null);
+  const [editedPolicies, setEditedPolicies] = useState<string>("");
+  const [updating, setUpdating] = useState(false);
+
+  // --- Client config handlers ---
   const handleSave = () => {
     setApiEndpoint(localEndpoint);
     setClientId(localClientId);
@@ -67,41 +107,464 @@ const APISettingsPage = () => {
   const hasChanges = localEndpoint !== apiEndpoint ||
     localClientId !== clientId || localClientSecret !== clientSecret;
 
+  // --- API Keys handlers ---
+  const fetchApiKeys = async () => {
+    try {
+      setKeysLoading(true);
+      const result = await callResource("apikeys", { action: "list" });
+      setApiKeys(result);
+    } catch (err) {
+      setKeysError(
+        err instanceof Error ? err.message : "Failed to fetch API keys",
+      );
+    } finally {
+      setKeysLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchApiKeys();
+  }, []);
+
+  const currentKey = apiKeys.find(k => k._id.toString() === clientId);
+
+  const handleCreateKey = async () => {
+    if (!newKeyName.trim()) {
+      setKeysError("Name is required");
+      return;
+    }
+
+    setCreating(true);
+    setKeysError(null);
+
+    try {
+      const result = await callResource("apikeys", {
+        action: "create",
+        name: newKeyName,
+        owner: newKeyOwner,
+        policiesYaml: newKeyPolicies,
+      });
+
+      setCreatedKey({ clientId: result.clientId, apiKey: result.apiKey });
+      setNewKeyName("");
+      setNewKeyPolicies(defaultPolicyYaml);
+      await fetchApiKeys();
+    } catch (err) {
+      setKeysError(err instanceof Error ? err.message : "Failed to create API key");
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleRevoke = async (id: string, owner: string) => {
+    if (!confirm("Are you sure you want to revoke this API key?")) {
+      return;
+    }
+
+    try {
+      await callResource("apikeys", { action: "revoke", id, owner });
+      await fetchApiKeys();
+    } catch (err) {
+      setKeysError(err instanceof Error ? err.message : "Failed to revoke API key");
+    }
+  };
+
+  const handleStartEdit = (key: ApiKey) => {
+    setEditingKeyId(key._id.toString());
+    setEditedPolicies(key.policiesYaml);
+    setKeysError(null);
+  };
+
+  const handleCancelEdit = () => {
+    setEditingKeyId(null);
+    setEditedPolicies("");
+    setKeysError(null);
+  };
+
+  const handleUpdateKey = async (id: string, owner: string) => {
+    setUpdating(true);
+    setKeysError(null);
+
+    try {
+      await callResource("apikeys", {
+        action: "update",
+        id,
+        owner,
+        policiesYaml: editedPolicies,
+      });
+      setEditingKeyId(null);
+      setEditedPolicies("");
+      await fetchApiKeys();
+    } catch (err) {
+      setKeysError(err instanceof Error ? err.message : "Failed to update API key policies");
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  const copyToClipboard = async (text: string, type: 'clientId' | 'secret') => {
+    try {
+      await navigator.clipboard.writeText(text);
+      if (type === 'clientId') {
+        setCopiedClientId(true);
+        setTimeout(() => setCopiedClientId(false), 2000);
+      } else {
+        setCopiedSecret(true);
+        setTimeout(() => setCopiedSecret(false), 2000);
+      }
+    } catch (err) {
+      console.error("Failed to copy to clipboard:", err);
+    }
+  };
+
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <div>
-        <h2 className="text-2xl font-semibold mb-2">API Configuration</h2>
+        <h2 className="text-2xl font-semibold mb-2">API</h2>
         <p className="text-muted-foreground">
-          Configure your backend API endpoint and authentication token. These
-          settings are stored locally in your browser.
+          Configure your API endpoint, credentials, and manage API keys.
         </p>
       </div>
 
-      <div className="border rounded-lg p-6 space-y-6">
-        <div className="space-y-4">
-          <APIEndpointField
-            value={localEndpoint}
-            onChange={setLocalEndpoint}
-          />
+      {currentKey && (
+        <div className="flex items-center gap-3 border rounded-lg px-4 py-3 bg-muted/50">
+          <Key className="w-4 h-4 text-muted-foreground shrink-0" />
+          <div className="text-sm">
+            <span className="text-muted-foreground">Session key: </span>
+            <span className="font-medium">{currentKey.name}</span>
+            <span className="text-muted-foreground"> ({currentKey.openPrefix}...)</span>
+            {!currentKey.isActive && (
+              <span className="ml-2 text-destructive font-medium">inactive</span>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ── Client Configuration ── */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Client Configuration</h3>
+        <div className="border rounded-lg p-6 space-y-6">
+          <div className="space-y-4">
+            <APIEndpointField
+              value={localEndpoint}
+              onChange={setLocalEndpoint}
+            />
 
-          <ClientCredentialsFields
-            clientId={localClientId}
-            clientSecret={localClientSecret}
-            onClientIdChange={setLocalClientId}
-            onClientSecretChange={setLocalClientSecret}
+            <ClientCredentialsFields
+              clientId={localClientId}
+              clientSecret={localClientSecret}
+              onClientIdChange={setLocalClientId}
+              onClientSecretChange={setLocalClientSecret}
+            />
+          </div>
+
+          <APIActions
+            hasChanges={hasChanges}
+            isSaved={isSaved}
+            isExchanging={isExchanging}
+            exchangeResult={exchangeResult}
+            canTest={!!localClientId && !!localClientSecret && !!localEndpoint}
+            onSave={handleSave}
+            onTestToken={handleExchangeToken}
+            onClear={handleClear}
           />
         </div>
+      </div>
+
+      {/* ── API Keys ── */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold">API Keys</h3>
+          <Button size="sm" onClick={() => setShowCreateForm(!showCreateForm)}>
+            <Plus className="w-4 h-4 mr-2" />
+            Create API Key
+          </Button>
+        </div>
+
+        {keysError && (
+          <div className="border border-red-500 rounded-lg p-4 bg-red-50 dark:bg-red-950">
+            <p className="text-red-600 dark:text-red-400">{keysError}</p>
+          </div>
+        )}
+
+        {createdKey && (
+          <Card className="p-6 border-green-500 bg-green-50 dark:bg-green-950">
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <Key className="w-5 h-5 text-green-600 dark:text-green-400" />
+                <h3 className="font-semibold text-green-900 dark:text-green-100">
+                  API Key Created Successfully
+                </h3>
+              </div>
+              <p className="text-sm text-green-700 dark:text-green-300">
+                Save these credentials securely. You won't be able to see the secret again.
+              </p>
+
+              <div className="space-y-3">
+                <div className="space-y-1.5">
+                  <Label className="text-sm font-semibold text-green-800 dark:text-green-200">
+                    Client ID
+                  </Label>
+                  <div className="flex gap-2">
+                    <Input
+                      value={createdKey.clientId}
+                      readOnly
+                      className="font-mono text-sm bg-white dark:bg-gray-900"
+                    />
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => copyToClipboard(createdKey.clientId, 'clientId')}
+                    >
+                      {copiedClientId ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label className="text-sm font-semibold text-green-800 dark:text-green-200">
+                    Client Secret (API Key)
+                  </Label>
+                  <div className="flex gap-2">
+                    <Input
+                      value={createdKey.apiKey}
+                      readOnly
+                      className="font-mono text-sm bg-white dark:bg-gray-900"
+                    />
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => copyToClipboard(createdKey.apiKey, 'secret')}
+                    >
+                      {copiedSecret ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCreatedKey(null)}
+              >
+                Dismiss
+              </Button>
+            </div>
+          </Card>
+        )}
+
+        {showCreateForm && (
+          <Card className="p-6">
+            <div className="space-y-4">
+              <h3 className="font-semibold text-lg">Create New API Key</h3>
+
+              <div className="space-y-2">
+                <Label htmlFor="keyName">Name</Label>
+                <Input
+                  id="keyName"
+                  value={newKeyName}
+                  onChange={(e) => setNewKeyName(e.target.value)}
+                  placeholder="My API Key"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="keyOwner">Owner</Label>
+                <Input
+                  id="keyOwner"
+                  value={newKeyOwner}
+                  onChange={(e) => setNewKeyOwner(e.target.value)}
+                  placeholder="system"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="policies">Policies</Label>
+                <textarea
+                  id="policies"
+                  value={newKeyPolicies}
+                  onChange={(e) => setNewKeyPolicies(e.target.value)}
+                  className="flex min-h-[200px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm font-mono focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  placeholder={defaultPolicyYaml}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Define access policies in YAML format.
+                </p>
+              </div>
+
+              <div className="flex gap-2">
+                <Button onClick={handleCreateKey} disabled={creating}>
+                  {creating ? "Creating..." : "Create Key"}
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => setShowCreateForm(false)}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </Card>
+        )}
+
+        {keysLoading ? (
+          <div className="border rounded-lg p-8 text-center">
+            <p className="text-muted-foreground">Loading API keys...</p>
+          </div>
+        ) : apiKeys.length === 0 ? (
+          <Card className="p-8 text-center border-dashed">
+            <Key className="w-12 h-12 mx-auto mb-4 text-muted-foreground opacity-50" />
+            <p className="text-muted-foreground">
+              No API keys yet. Create one to get started.
+            </p>
+          </Card>
+        ) : (
+          <div className="space-y-2">
+            {apiKeys.map((key) => {
+              const isActiveKey = clientId === key._id.toString();
+              return (
+              <Card key={key._id.toString()} className={`p-3 ${isActiveKey ? "ring-2 ring-primary" : ""}`}>
+                <details className="group" open={editingKeyId === key._id.toString()}>
+                  <summary className="list-none cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      {/* Name column - fixed width */}
+                      <div className="w-[160px] shrink-0 truncate flex items-center gap-2">
+                        <h3 className="font-semibold text-sm truncate">{key.name}</h3>
+                        {isActiveKey && <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0">current</Badge>}
+                      </div>
+
+                      {/* ID column - fixed width */}
+                      <div className="w-[120px] shrink-0 flex items-center gap-1 text-xs">
+                        <span className="text-muted-foreground">ID:</span>
+                        <code className="font-mono text-[11px] bg-muted px-1.5 py-0.5 rounded truncate">
+                          {key._id.toString().slice(0, 8)}...
+                        </code>
+                      </div>
+
+                      {/* Secret column - fixed width */}
+                      <div className="w-[160px] shrink-0 flex items-center gap-1 text-xs">
+                        <span className="text-muted-foreground">Secret:</span>
+                        <code className="font-mono text-[11px] bg-muted px-1.5 py-0.5 rounded truncate">
+                          {key.openPrefix}...
+                        </code>
+                      </div>
+
+                      {/* Owner column - fixed width */}
+                      <div className="w-[80px] shrink-0 flex items-center gap-1 text-xs">
+                        <span className="text-muted-foreground">Owner:</span>
+                        <span className="truncate">{key.owner}</span>
+                      </div>
+
+                      {/* Date column - fixed width */}
+                      <div className="w-[90px] shrink-0 text-xs text-muted-foreground">
+                        {new Date(key.createdAt).toLocaleDateString()}
+                      </div>
+
+                      {/* Spacer */}
+                      <div className="flex-1" />
+
+                      {/* Details toggle - fixed width */}
+                      <div className="w-[60px] shrink-0">
+                        <span className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1">
+                          <span className="group-open:hidden">▶</span>
+                          <span className="hidden group-open:inline">▼</span>
+                          Details
+                        </span>
+                      </div>
+
+                      {/* Action column - fixed width */}
+                      <div className="w-[70px] shrink-0 flex justify-end">
+                        {key.isActive ? (
+                          <Button
+                            variant="destructive"
+                            size="sm"
+                            className="h-7 px-2 text-xs"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleRevoke(key._id.toString(), key.owner);
+                            }}
+                            title="Revoke this API key"
+                          >
+                            Revoke
+                          </Button>
+                        ) : (
+                          <span className="inline-flex items-center justify-center h-7 px-2 text-[11px] rounded-md bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
+                            Revoked
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </summary>
 
-        <APIActions
-          hasChanges={hasChanges}
-          isSaved={isSaved}
-          isExchanging={isExchanging}
-          exchangeResult={exchangeResult}
-          canTest={!!localClientId && !!localClientSecret && !!localEndpoint}
-          onSave={handleSave}
-          onTestToken={handleExchangeToken}
-          onClear={handleClear}
-        />
+                  {/* Expandable policies section */}
+                  <div className="pt-2 mt-2 border-t">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-xs font-medium text-muted-foreground">Policies</span>
+                      {key.isActive && editingKeyId !== key._id.toString() && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 text-xs"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleStartEdit(key);
+                          }}
+                          title="Edit policies"
+                        >
+                          <Edit2 className="w-3 h-3 mr-1" />
+                          Edit
+                        </Button>
+                      )}
+                    </div>
+                    {editingKeyId === key._id.toString() ? (
+                      <div className="space-y-2">
+                        <textarea
+                          value={editedPolicies}
+                          onChange={(e) => setEditedPolicies(e.target.value)}
+                          className="flex min-h-[120px] w-full rounded-md border border-input bg-transparent px-2 py-1.5 text-xs shadow-sm font-mono focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                          placeholder={defaultPolicyYaml}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                        <div className="flex gap-2">
+                          <Button
+                            size="sm"
+                            className="h-7 text-xs"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleUpdateKey(key._id.toString(), key.owner);
+                            }}
+                            disabled={updating}
+                          >
+                            <Save className="w-3 h-3 mr-1" />
+                            {updating ? "Saving..." : "Save"}
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="h-7 text-xs"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleCancelEdit();
+                            }}
+                            disabled={updating}
+                          >
+                            <X className="w-3 h-3 mr-1" />
+                            Cancel
+                          </Button>
+                        </div>
+                      </div>
+                    ) : (
+                      <pre className="p-2 bg-muted rounded text-[11px] font-mono overflow-x-auto">
+                        {key.policiesYaml}
+                      </pre>
+                    )}
+                  </div>
+                </details>
+              </Card>
+            );
+            })}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 0ca8544e..1093d7ab 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -8,7 +8,6 @@ import GeneralSettingsPage from "./pages/settings/GeneralSettingsPage";
 import APISettingsPage from "./pages/settings/APISettingsPage";
 import InferenceSettingsPage from "./pages/settings/InferenceSettingsPage";
 import PromptsPage from "./pages/settings/PromptsPage";
-import APIKeysPage from "./pages/settings/APIKeysPage";
 import FeatureFlagsPage from "./pages/settings/FeatureFlagsPage";
 import AccessLogPage from "./pages/settings/AccessLogPage";
 import WorkersPage from "./pages/settings/WorkersPage";
@@ -161,10 +160,6 @@ export const router = createBrowserRouter([
             path: "prompts",
             element: <PromptsPage />,
           },
-          {
-            path: "api-keys",
-            element: <APIKeysPage />,
-          },
           {
             path: "config",
             element: <ConfigSettingsPage />,
diff --git a/frontend/src/stores/recordingStore.ts b/frontend/src/stores/recordingStore.ts
new file mode 100644
index 00000000..b31efde7
--- /dev/null
+++ b/frontend/src/stores/recordingStore.ts
@@ -0,0 +1,81 @@
+import { create } from "zustand";
+
+export type RecordingStep =
+  | "idle"
+  | "mic"
+  | "websocket"
+  | "audio-start"
+  | "streaming"
+  | "stopping"
+  | "error";
+
+interface RecordingState {
+  // Observable state
+  isRecording: boolean;
+  currentStep: RecordingStep;
+  recordingDuration: number;
+  error: string | null;
+  deviceLabel: string | null;
+  sampleRate: number;
+
+  // Actions
+  setIsRecording: (isRecording: boolean) => void;
+  setCurrentStep: (step: RecordingStep) => void;
+  setRecordingDuration: (duration: number) => void;
+  setError: (error: string | null) => void;
+  setDeviceLabel: (label: string | null) => void;
+  setSampleRate: (rate: number) => void;
+  reset: () => void;
+}
+
+// Resource refs stored outside zustand (not serializable)
+interface RecordingResources {
+  wsRef: WebSocket | null;
+  mediaStreamRef: MediaStream | null;
+  audioContextRef: AudioContext | null;
+  analyserRef: AnalyserNode | null;
+  workletNodeRef: AudioWorkletNode | null;
+  durationIntervalRef: number | null;
+  keepAliveIntervalRef: number | null;
+  stopRecordingFn: (() => void) | null;
+}
+
+// Global resources (not in zustand, but accessible)
+export const recordingResources: RecordingResources = {
+  wsRef: null,
+  mediaStreamRef: null,
+  audioContextRef: null,
+  analyserRef: null,
+  workletNodeRef: null,
+  durationIntervalRef: null,
+  keepAliveIntervalRef: null,
+  stopRecordingFn: null,
+};
+
+const initialState = {
+  isRecording: false,
+  currentStep: "idle" as RecordingStep,
+  recordingDuration: 0,
+  error: null,
+  deviceLabel: null,
+  sampleRate: 16000,
+};
+
+export const useRecordingStore = create<RecordingState>()((set) => ({
+  ...initialState,
+
+  setIsRecording: (isRecording) => set({ isRecording }),
+  setCurrentStep: (currentStep) => set({ currentStep }),
+  setRecordingDuration: (recordingDuration) => set({ recordingDuration }),
+  setError: (error) => set({ error }),
+  setDeviceLabel: (deviceLabel) => set({ deviceLabel }),
+  setSampleRate: (sampleRate) => set({ sampleRate }),
+  reset: () => set(initialState),
+}));
+
+// Helper to format duration
+export const formatDuration = (seconds: number): string => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+};