diff --git a/api/package.json b/api/package.json
index 6150ff0d1..b8ad91b4e 100644
--- a/api/package.json
+++ b/api/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.8.0-beta.11",
+  "version": "0.8.1-canary.3",
   "name": "@fiberplane/studio",
   "description": "Local development debugging interface for Hono apps",
   "author": "Fiberplane<info@fiberplane.com>",
diff --git a/packages/types/package.json b/packages/types/package.json
index 22c1ce09b..e811dc113 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fiberplane/fpx-types",
   "description": "Shared types and schemas for fpx",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "exports": {
     ".": "./dist/index.js"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 34dd9143f..29a996f9f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -317,6 +317,9 @@ importers:
       '@radix-ui/react-label':
         specifier: ^2.1.0
         version: 2.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-menubar':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-popover':
         specifier: ^1.0.7
         version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2466,6 +2469,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-menubar@1.1.1':
+    resolution: {integrity: sha512-V05Hryq/BE2m+rs8d5eLfrS0jmSWSDHEbG7jEyLA5D5J9jTvWj/o3v3xDN9YsOlH6QIkJgiaNDaP+S4T1rdykw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popover@1.1.1':
     resolution: {integrity: sha512-3y1A3isulwnWhvTTwmIreiB8CF4L+qRjZnK1wYLO7pplddzXKby/GnZ2M7OZY3qgnl6p9AodUIHRYGXNah8Y7g==}
     peerDependencies:
@@ -9168,6 +9184,24 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-menubar@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-popover@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
diff --git a/studio/package.json b/studio/package.json
index 4b2b56c15..44f3c98b0 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -30,6 +30,7 @@
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.1",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-separator": "^1.0.3",
diff --git a/studio/src/App.tsx b/studio/src/App.tsx
index 59afa0aac..e0e2539d8 100644
--- a/studio/src/App.tsx
+++ b/studio/src/App.tsx
@@ -1,12 +1,6 @@
 import { QueryClientProvider, queryClient } from "@/queries";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { type ReactNode, useEffect } from "react";
-import {
-  Route,
-  BrowserRouter as Router,
-  Routes,
-  useNavigate,
-} from "react-router-dom";
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import { Layout } from "./Layout";
 import { Toaster } from "./components/ui/toaster";
 import { RequestDetailsPage } from "./pages/RequestDetailsPage/RequestDetailsPage";
@@ -20,7 +14,6 @@ export function App() {
         <TooltipProvider>
           <Layout>
             <Routes>
-              <Route path="/" element={<Redirect />} />
               <Route path="/requests" element={<RequestsPage />} />
               <Route
                 path="/requests/otel/:traceId"
@@ -30,11 +23,8 @@ export function App() {
                 path="/requests/:traceId"
                 element={<RequestDetailsPage />}
               />
-              <Route path="/requestor" element={<RequestorPage />} />
-              <Route
-                path="/requestor/:requestType/:id"
-                element={<RequestorPage />}
-              />
+              <Route path="/" element={<RequestorPage />} />
+              <Route path="/:requestType/:id" element={<RequestorPage />} />
             </Routes>
           </Layout>
           <Toaster />
@@ -45,12 +35,3 @@ export function App() {
 }
 
 export default App;
-
-function Redirect({ to = "/requestor" }: { to?: string }): ReactNode {
-  const navigate = useNavigate();
-  useEffect(() => {
-    navigate(to);
-  }, [to, navigate]);
-
-  return null;
-}
diff --git a/studio/src/Layout/FloatingSidePanel.tsx b/studio/src/Layout/FloatingSidePanel.tsx
index 4e7f0c31b..7d3c252b9 100644
--- a/studio/src/Layout/FloatingSidePanel.tsx
+++ b/studio/src/Layout/FloatingSidePanel.tsx
@@ -18,9 +18,9 @@ import { useRequestorStore } from "../pages/RequestorPage/store";
 import { cn } from "../utils";
 
 export function FloatingSidePanel() {
-  const { sidePanelOpen, setSidePanelOpen } = useRequestorStore(
-    "sidePanelOpen",
-    "setSidePanelOpen",
+  const { sidePanel, togglePanel } = useRequestorStore(
+    "sidePanel",
+    "togglePanel",
     "path",
   );
 
@@ -28,7 +28,10 @@ export function FloatingSidePanel() {
 
   return (
     <aside>
-      <Root open={!isLgScreen && sidePanelOpen} onOpenChange={setSidePanelOpen}>
+      <Root
+        open={!isLgScreen && sidePanel === "open"}
+        onOpenChange={() => togglePanel("sidePanel")}
+      >
         <DialogPortal>
           <DialogOverlay className="fixed top-0 left-0 w-full h-full bg-black/40" />
           <DialogContent
diff --git a/studio/src/Layout/Layout.tsx b/studio/src/Layout/Layout.tsx
index c346afbc2..96ee54e08 100644
--- a/studio/src/Layout/Layout.tsx
+++ b/studio/src/Layout/Layout.tsx
@@ -1,58 +1,90 @@
+import FpLogo from "@/assets/fp-logo.svg";
+import { KeyboardShortcutKey } from "@/components/KeyboardShortcut";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useRequestorStore } from "@/pages/RequestorPage/store";
 import { Icon } from "@iconify/react";
 import {
   DialogClose,
   DialogContent,
   DialogDescription,
-  DialogTrigger,
   Root,
 } from "@radix-ui/react-dialog";
 import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarTrigger,
+} from "@radix-ui/react-menubar";
 import type React from "react";
-import type { ComponentProps } from "react";
+import { useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { NavLink } from "react-router-dom";
-import FpxIcon from "../assets/fpx.svg";
 import { WebhoncBadge } from "../components/WebhoncBadge";
 import { Button } from "../components/ui/button";
-import { DialogTitle } from "../components/ui/dialog";
+import { DialogPortal, DialogTitle } from "../components/ui/dialog";
 import { useWebsocketQueryInvalidation } from "../hooks";
 import { useProxyRequestsEnabled } from "../hooks/useProxyRequestsEnabled";
 import { SettingsPage } from "../pages/SettingsPage/SettingsPage";
 import { cn } from "../utils";
 import { FloatingSidePanel } from "./FloatingSidePanel";
 
-const Branding = () => {
+export function Layout({ children }: { children?: React.ReactNode }) {
+  useWebsocketQueryInvalidation();
+
   return (
-    <div>
-      <FpxIcon height="20px" width="20px" />
+    <div className="flex min-h-screen w-full flex-col bg-muted/30 max-w-128 overflow-hidden">
+      <main
+        className={cn("md:gap-8", "overflow-hidden", "h-[calc(100vh-40px)]")}
+      >
+        {children}
+      </main>
+      <BottomBar />
     </div>
   );
-};
+}
 
-export const Layout: React.FC<{ children?: React.ReactNode }> = ({
-  children,
-}) => {
-  // Will add new fpx-requests as they come in by refetching
-  // In the future, we'll want to build a better ux around this (not auto refresh the table)
-  //
-  // This should be used only at the top level of the app to avoid unnecessary re-renders
-  useWebsocketQueryInvalidation();
+function Branding() {
+  return (
+    <div className="flex items-center gap-2 overflow-hidden">
+      <FpLogo className="w-4 h-4 text-muted-foreground/60 [&>path]:text-muted" />
+      <span className="text-sm text-muted-foreground/60">Fiberplane</span>
+    </div>
+  );
+}
 
+function BottomBar() {
   const shouldShowProxyRequests = useProxyRequestsEnabled();
 
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
+  const { logsPanel, timelinePanel, aiPanel, togglePanel } = useRequestorStore(
+    "togglePanel",
+    "logsPanel",
+    "timelinePanel",
+    "aiPanel",
+  );
+
   return (
-    <div className="flex min-h-screen w-full flex-col bg-muted/30 max-w-128 overflow-hidden">
-      <nav className="flex gap-4 sm:gap-4 py-2 sm:py-2 justify-between items-center border-b">
-        <div className="sticky top-0 flex items-center gap-2 px-4 sm:static sm:h-auto border-0 bg-transparent md:px-6 text-sm">
+    <nav className="gap-4 bg-muted/50 pb-2 pt-1">
+      <div className="flex justify-between px-3 items-center">
+        <div className="flex items-center gap-2 sm:static sm:h-auto border-0 bg-transparent text-sm">
           <SidePanelTrigger />
+          <SettingsMenu setSettingsOpen={setSettingsOpen} />
           <FloatingSidePanel />
-          <HeaderNavLink to="/requestor">
-            <Branding />
-          </HeaderNavLink>
-          <div className="ml-2">
-            <div className="flex items-center gap-2 text-sm" />
-          </div>
+          <SettingsScreen
+            settingsOpen={settingsOpen}
+            setSettingsOpen={setSettingsOpen}
+          />
+          <Branding />
+          {/* <div className="ml-2"> */}
+          {/*   <div className="flex items-center gap-2 text-sm" /> */}
+          {/* </div> */}
         </div>
 
         <div className="flex items-center gap-2">
@@ -61,88 +93,111 @@ export const Layout: React.FC<{ children?: React.ReactNode }> = ({
               <WebhoncBadge />
             </div>
           )}
-          <div className="flex items-center border-l gap-1 px-1">
-            <Root>
-              <DialogTrigger asChild>
-                <Button variant="ghost" size="icon" className="p-0.5 w-6 h-6">
-                  <Icon icon="lucide:settings" />
-                </Button>
-              </DialogTrigger>
-              <DialogContent className="fixed top-0 left-0 w-full h-full z-50">
-                <div className="h-full grid bg-background items-start justify-center">
-                  <div className="pr-1 overflow-hidden w-full lg:max-w-[1060px] md:max-w-[1100px] grid grid-rows-[auto_1fr]">
-                    <div className="flex justify-between items-center px-8 pr-8 lg:px-12 lg:pr-10 pt-6">
-                      <DialogTitle>Settings</DialogTitle>
-                      <DialogClose asChild>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="p-0.5 w-6 h-6"
-                        >
-                          <Icon icon="lucide:x" />
-                        </Button>
-                      </DialogClose>
-                    </div>
-                    <div>
-                      <DialogDescription className="px-8 pr-8 lg:px-12 lg:pr-10 pt-6 text-sm text-muted-foreground">
-                        Manage your settings and preferences.
-                      </DialogDescription>
-
-                      <SettingsPage />
-                    </div>
-                  </div>
-                </div>
-              </DialogContent>
-            </Root>
-            <Button variant="ghost" size="icon" className="p-0.5 w-6 h-6">
-              <a
-                href="https://github.com/fiberplane/fpx"
-                target="_blank"
-                rel="noopener noreferrer"
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => togglePanel("logsPanel")}
+                className={cn("h-6 w-6")}
               >
-                <GitHubLogoIcon className="w-3.5 h-3.5" />
-              </a>
-            </Button>
-            <Button variant="ghost" size="icon" className="p-0.5 w-6 h-6">
-              <a
-                href="https://discord.com/invite/cqdY6SpfVR"
-                target="_blank"
-                rel="noopener noreferrer"
+                <Icon
+                  icon="lucide:square-terminal"
+                  className={cn(
+                    "cursor-pointer h-4 w-4",
+                    logsPanel === "open" && "text-blue-500",
+                  )}
+                />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent
+              side="bottom"
+              className="bg-slate-900 text-white px-2 py-1.5 text-sm flex gap-2 items-center"
+              align="center"
+            >
+              <p>Toggle logs</p>
+              <div className="flex gap-1">
+                <KeyboardShortcutKey>G</KeyboardShortcutKey>
+                <span className="text-xs font-mono">then</span>
+                <KeyboardShortcutKey>L</KeyboardShortcutKey>
+              </div>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => togglePanel("timelinePanel")}
+                className={cn("h-6 w-6")}
               >
-                <DiscordLogoIcon className="w-3.5 h-3.5" />
-              </a>
-            </Button>
-          </div>
+                <Icon
+                  icon="lucide:align-start-vertical"
+                  className={cn(
+                    "cursor-pointer h-4 w-4",
+                    timelinePanel === "open" && "text-blue-500",
+                  )}
+                />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent
+              side="bottom"
+              className="bg-slate-900 text-white px-2 py-1.5 text-sm flex gap-2 items-center"
+              align="center"
+            >
+              <p>Toggle timeline</p>
+              <div className="flex gap-1 items-center">
+                <KeyboardShortcutKey>G</KeyboardShortcutKey>
+                <span className="text-xs font-mono">then</span>
+                <KeyboardShortcutKey>T</KeyboardShortcutKey>
+              </div>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => togglePanel("aiPanel")}
+                className={cn("h-6 w-6")}
+              >
+                <Icon
+                  icon="lucide:sparkles"
+                  className={cn(
+                    "cursor-pointer h-4 w-4",
+                    aiPanel === "open" && "text-blue-500",
+                  )}
+                />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent
+              side="bottom"
+              className="bg-slate-900 text-white px-2 py-1.5 text-sm flex gap-2 items-center"
+              align="center"
+            >
+              <p>Toggle AI test panel</p>
+              <div className="flex gap-1 items-center">
+                <KeyboardShortcutKey>G</KeyboardShortcutKey>
+                <span className="text-xs font-mono">then</span>
+                <KeyboardShortcutKey>I</KeyboardShortcutKey>
+              </div>
+            </TooltipContent>
+          </Tooltip>
         </div>
-      </nav>
-      <main
-        className={cn("md:gap-8", "overflow-hidden", "h-[calc(100vh-40px)]")}
-      >
-        {children}
-      </main>
-    </div>
+      </div>
+    </nav>
   );
-};
+}
 
-const HeaderNavLink = (props: ComponentProps<typeof NavLink>) => {
-  return (
-    <NavLink
-      {...props}
-      className={({ isActive }) =>
-        `rounded ${isActive ? "bg-muted" : ""} inline-block py-1 px-2 hover:underline text-xs`
-      }
-    />
-  );
-};
-
-const SidePanelTrigger = () => {
-  const { sidePanelOpen, setSidePanelOpen } = useRequestorStore(
-    "sidePanelOpen",
-    "setSidePanelOpen",
+function SidePanelTrigger() {
+  const { sidePanel, togglePanel } = useRequestorStore(
+    "sidePanel",
+    "togglePanel",
   );
 
   useHotkeys("mod+b", () => {
-    setSidePanelOpen(!sidePanelOpen);
+    togglePanel("sidePanel");
   });
 
   return (
@@ -150,11 +205,128 @@ const SidePanelTrigger = () => {
       variant="ghost"
       size="icon"
       className="p-0.5 w-6 h-6"
-      onClick={() => setSidePanelOpen(!sidePanelOpen)}
+      onClick={() => togglePanel("sidePanel")}
     >
-      <Icon icon={`lucide:panel-left-${sidePanelOpen ? "close" : "open"}`} />
+      <Icon
+        icon={`lucide:panel-left-${sidePanel === "open" ? "close" : "open"}`}
+      />
     </Button>
   );
-};
+}
+
+function MenuItemLink({
+  href,
+  icon,
+  children,
+}: { href: string; icon: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <MenubarItem className="pointer-cursor-auto px-2 py-1 select-none focus:bg-accent focus:text-accent-foreground cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue-500">
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center gap-2"
+      >
+        {icon}
+        {children}
+      </a>
+    </MenubarItem>
+  );
+}
+
+function SettingsMenu({
+  setSettingsOpen,
+}: { setSettingsOpen: (open: boolean) => void }) {
+  const menuBarTriggerRef = useRef<HTMLButtonElement>(null);
+  const [menuOpen, setMenuOpen] = useState<true | undefined>(undefined);
+
+  useHotkeys("shift+?", () => {
+    setMenuOpen(true);
+    if (menuBarTriggerRef.current) {
+      menuBarTriggerRef.current.click();
+    }
+  });
+
+  return (
+    <Menubar className="p-0">
+      <MenubarMenu>
+        <MenubarTrigger
+          ref={menuBarTriggerRef}
+          className="w-6 h-6 p-0.5 rounded-md hover:bg-muted flex items-center justify-center focus:outline-none focus:ring-1 focus:ring-blue-500"
+        >
+          <Icon icon="lucide:settings" />
+        </MenubarTrigger>
+        <MenubarContent
+          onEscapeKeyDown={() => setMenuOpen(undefined)}
+          onInteractOutside={() => setMenuOpen(undefined)}
+          forceMount={menuOpen}
+          className="z-50 min-w-[200px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md grid gap-1 data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        >
+          <MenuItemLink
+            href="https://fiberplane.com/docs/get-started"
+            icon={<Icon icon="lucide:book-open" />}
+          >
+            Docs
+          </MenuItemLink>
+          <MenuItemLink
+            href="https://github.com/fiberplane/fpx"
+            icon={<GitHubLogoIcon className="w-3.5 h-3.5" />}
+          >
+            GitHub
+          </MenuItemLink>
+          <MenuItemLink
+            href="https://discord.com/invite/cqdY6SpfVR"
+            icon={<DiscordLogoIcon className="w-3.5 h-3.5" />}
+          >
+            Discord
+          </MenuItemLink>
+          <MenubarSeparator className="h-px bg-muted" />
+          <MenubarItem
+            className="pointer-cursor-auto px-2 py-1 select-none focus:bg-accent focus:text-accent-foreground cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue-500"
+            onClick={() => setSettingsOpen(true)}
+          >
+            <div className="flex items-center gap-2">
+              <Icon icon="lucide:settings-2" />
+              Settings
+            </div>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  );
+}
+
+function SettingsScreen({
+  settingsOpen,
+  setSettingsOpen,
+}: { settingsOpen: boolean; setSettingsOpen: (open: boolean) => void }) {
+  return (
+    <Root open={settingsOpen} onOpenChange={setSettingsOpen}>
+      <DialogPortal>
+        <DialogContent className="fixed top-0 left-0 w-full h-full z-50">
+          <div className="h-full grid bg-background items-start justify-center">
+            <div className="pr-1 overflow-hidden w-full lg:max-w-[1060px] md:max-w-[1100px] grid grid-rows-[auto_1fr]">
+              <div className="flex justify-between items-center px-8 pr-8 lg:px-12 lg:pr-10 pt-6">
+                <DialogTitle>Settings</DialogTitle>
+                <DialogClose asChild>
+                  <Button variant="ghost" size="icon" className="p-0.5 w-6 h-6">
+                    <Icon icon="lucide:x" />
+                  </Button>
+                </DialogClose>
+              </div>
+              <div>
+                <DialogDescription className="px-8 pr-8 lg:px-12 lg:pr-10 pt-6 text-sm text-muted-foreground">
+                  Manage your settings and preferences.
+                </DialogDescription>
+
+                <SettingsPage />
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </DialogPortal>
+    </Root>
+  );
+}
 
 export default Layout;
diff --git a/studio/src/assets/fp-logo.svg b/studio/src/assets/fp-logo.svg
new file mode 100644
index 000000000..6610889f0
--- /dev/null
+++ b/studio/src/assets/fp-logo.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.12793 9.10938V10.7434L10.4381 10.7564L10.8104 9.12228L4.12793 9.10938ZM4.12793 5.83472V7.46878L11.1827 7.48168L11.2458 7.19638C11.4036 6.50908 10.8987 5.84772 10.2109 5.84772L4.12793 5.83472ZM10.0575 12.3904L10.4299 10.7564L14.4242 10.7629L13.8374 12.3969L10.0575 12.3904ZM10.8051 9.12198L11.1837 7.48798L16.8755 7.46838L16.2067 9.09588L10.8051 9.12198ZM4.12793 12.376V13.9748L9.68723 13.9877L10.0595 12.3537L4.12793 12.376ZM12.0572 15.6636H10.9024C10.0694 15.6636 9.46367 14.8466 9.67817 14.0231H12.6945L12.0572 15.6636Z" fill="currentColor"/>
+</svg>
+
diff --git a/studio/src/components/WebhoncBadge/WebhoncBadge.tsx b/studio/src/components/WebhoncBadge/WebhoncBadge.tsx
index f336c6517..a2e018dfb 100644
--- a/studio/src/components/WebhoncBadge/WebhoncBadge.tsx
+++ b/studio/src/components/WebhoncBadge/WebhoncBadge.tsx
@@ -17,10 +17,10 @@ export function WebhoncBadge() {
       <TooltipTrigger asChild>
         <Button
           className={cn(
-            "rounded-xl flex items-center text-sm gap-2 cursor-pointer h-7",
+            "rounded-xl flex items-center text-sm gap-2 cursor-pointer h-7 bg-transparent hover:bg-muted",
             {
-              "bg-green-950/60 hover:bg-green-900/60 text-green-400": !!url,
-              "bg-muted/20 text-muted-foreground": !url,
+              "text-green-400": !!url,
+              "text-muted-foreground": !url,
             },
           )}
           onClick={() => url && copyToClipboard(url)}
@@ -35,9 +35,11 @@ export function WebhoncBadge() {
           ) : (
             <Link2Icon className="w-4 h-4" />
           )}
-          <span>
+          <span className="flex items-center gap-1">
             Public URL
-            <span className="max-sm:hidden">{url ? " active" : ""}</span>
+            <span className="max-sm:hidden">
+              {url ? (isCopied ? " copied" : " active") : ""}
+            </span>
           </span>
         </Button>
       </TooltipTrigger>
diff --git a/studio/src/hooks/useKeySequence.ts b/studio/src/hooks/useKeySequence.ts
index 2a4dfc671..3d6e0df00 100644
--- a/studio/src/hooks/useKeySequence.ts
+++ b/studio/src/hooks/useKeySequence.ts
@@ -1,6 +1,6 @@
 import { useInputFocusDetection } from "@/hooks";
 import { useHandler } from "@fiberplane/hooks";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useLatest } from "./useLatest";
 
 type KeySequenceOptions = {
@@ -27,61 +27,64 @@ export function useKeySequence(
 
   const { isInputFocused } = useInputFocusDetection();
 
-  const [listenerElement, setListenerElement] = useState<HTMLElement | null>(
-    null,
-  );
-  const [_currentKeySequence, setCurrentKeySequence] = useState<string[]>([]);
-
+  const listenerElementRef = useRef<HTMLElement | null>(null);
+  const currentKeySequenceRef = useRef<string[]>([]);
   const timeoutIdRef = useRef<number | NodeJS.Timeout>();
 
   const onSequenceMatchedRef = useLatest(onSequenceMatched);
 
   const resetKeySequence = useHandler(() => {
-    setCurrentKeySequence([]);
+    currentKeySequenceRef.current = [];
   });
 
-  // create and persist the callback across re-renders
-  const handleKeyPress = useHandler((event: Event) => {
-    if (!(event instanceof KeyboardEvent)) {
-      return;
-    }
+  const handleKeyPress = useCallback(
+    (event: Event) => {
+      if (!(event instanceof KeyboardEvent)) {
+        return;
+      }
+      const domNode = listenerElementRef.current ?? document;
 
-    setCurrentKeySequence((prevSequence) => {
-      const updatedSequence = [...prevSequence, event.key].slice(
-        -targetKeySequence.length,
-      );
+      if (event.target && !domNode.contains(event.target as Node)) {
+        return;
+      }
+
+      currentKeySequenceRef.current = [
+        ...currentKeySequenceRef.current,
+        event.key,
+      ].slice(-targetKeySequence.length);
 
-      // Check if the updated sequence matches the target sequence
-      if (updatedSequence.join("") === targetKeySequence.join("")) {
+      if (
+        currentKeySequenceRef.current.join("") === targetKeySequence.join("")
+      ) {
         onSequenceMatchedRef.current();
-        return []; // Reset sequence after successful match
+        currentKeySequenceRef.current = [];
       }
 
-      return updatedSequence;
-    });
-
-    // Reset timeout on each key press
-    if (timeoutIdRef.current) {
-      clearTimeout(timeoutIdRef.current);
-    }
-    timeoutIdRef.current = setTimeout(resetKeySequence, timeoutMs);
-  });
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current);
+      }
+      timeoutIdRef.current = setTimeout(resetKeySequence, timeoutMs);
+    },
+    [targetKeySequence, timeoutMs, resetKeySequence, onSequenceMatchedRef],
+  );
 
   useEffect(() => {
     if (!isEnabled || isInputFocused) {
       return;
     }
 
-    const domNode = listenerElement ?? document;
-
-    domNode.addEventListener("keydown", handleKeyPress);
+    document.addEventListener("keydown", handleKeyPress);
     return () => {
-      domNode.removeEventListener("keydown", handleKeyPress);
+      document.removeEventListener("keydown", handleKeyPress);
       if (timeoutIdRef.current) {
         clearTimeout(timeoutIdRef.current);
       }
     };
-  }, [listenerElement, handleKeyPress, isEnabled, isInputFocused]);
+  }, [isEnabled, isInputFocused, handleKeyPress]);
+
+  const setListenerElement = useHandler((element: HTMLElement | null) => {
+    listenerElementRef.current = element;
+  });
 
   return setListenerElement;
 }
diff --git a/studio/src/pages/RequestDetailsPage/hooks/useReplayRequest.ts b/studio/src/pages/RequestDetailsPage/hooks/useReplayRequest.ts
index bc99b3eab..be2969477 100644
--- a/studio/src/pages/RequestDetailsPage/hooks/useReplayRequest.ts
+++ b/studio/src/pages/RequestDetailsPage/hooks/useReplayRequest.ts
@@ -125,7 +125,7 @@ export function useReplayRequest({ span }: { span?: OtelSpan }) {
       {
         onSuccess(response) {
           navigate({
-            pathname: `/requestor/requests/${response.traceId}`,
+            pathname: `/requests/${response.traceId}`,
             search: "?filter-tab=requests",
           });
         },
diff --git a/studio/src/pages/RequestorPage/LogsTable/LogsTable.tsx b/studio/src/pages/RequestorPage/LogsTable/LogsTable.tsx
index ea68faaf5..1cf1a3c26 100644
--- a/studio/src/pages/RequestorPage/LogsTable/LogsTable.tsx
+++ b/studio/src/pages/RequestorPage/LogsTable/LogsTable.tsx
@@ -24,7 +24,7 @@ import {
 import { useState } from "react";
 import { useOrphanLogs } from "../../RequestDetailsPage/RequestDetailsPageV2/useOrphanLogs";
 import { CustomTabTrigger, CustomTabsContent, CustomTabsList } from "../Tabs";
-import type { Panels } from "../types";
+import { useRequestorStore } from "../store";
 
 type OrphanLog = {
   traceId: string;
@@ -42,12 +42,13 @@ type OrphanLog = {
 };
 
 type Props = {
-  traceId: string;
-  togglePanel: (panelName: keyof Panels) => void;
+  traceId?: string;
 };
 
-export function LogsTable({ traceId, togglePanel }: Props) {
+//TODO: add a better empty state
+export function LogsTable({ traceId = "" }: Props) {
   const { data: spans } = useOtelTrace(traceId);
+  const { togglePanel } = useRequestorStore("togglePanel");
   const logs = useOrphanLogs(traceId, spans ?? []);
   const [expandedRowId, setExpandedRowId] = useState<number | null>(null);
 
@@ -110,7 +111,7 @@ export function LogsTable({ traceId, togglePanel }: Props) {
           <Button
             variant="ghost"
             size="icon"
-            onClick={() => togglePanel("logs")}
+            onClick={() => togglePanel("logsPanel")}
             className="h-6 w-6"
           >
             <Cross1Icon className="h-3 w-3 cursor-pointer" />
diff --git a/studio/src/pages/RequestorPage/NavigationPanel/NavigationPanel.tsx b/studio/src/pages/RequestorPage/NavigationPanel/NavigationPanel.tsx
index 1c622e460..563ab7e13 100644
--- a/studio/src/pages/RequestorPage/NavigationPanel/NavigationPanel.tsx
+++ b/studio/src/pages/RequestorPage/NavigationPanel/NavigationPanel.tsx
@@ -1,6 +1,6 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useKeySequence } from "@/hooks/useKeySequence";
-import React, { useCallback, useMemo } from "react";
+import { useHandler } from "@fiberplane/hooks";
 import { useSearchParams } from "react-router-dom";
 import { RequestsPanel } from "./RequestsPanel";
 import { RoutesPanel } from "./RoutesPanel";
@@ -22,22 +22,9 @@ export function NavigationPanel() {
   const [params, setParams] = useSearchParams();
   const tab = getTab(params);
 
-  const tabRefs = useMemo(() => {
-    return TAB_KEYS.reduce(
-      (acc, key) => {
-        acc[key] = React.createRef<HTMLButtonElement>();
-        return acc;
-      },
-      {} as Record<NavigationTab, React.RefObject<HTMLButtonElement>>,
-    );
-  }, []);
-
-  const setTab = useCallback(
-    (newTab: NavigationTab) => {
-      setParams({ [FILTER_TAB_KEY]: newTab }, { replace: true });
-    },
-    [setParams],
-  );
+  const setTab = useHandler((newTab: NavigationTab) => {
+    setParams({ [FILTER_TAB_KEY]: newTab }, { replace: true });
+  });
 
   useKeySequence(["g", "r"], () => {
     setTab("routes");
@@ -54,15 +41,15 @@ export function NavigationPanel() {
     >
       <TabsList className="w-full grid grid-cols-2">
         {TAB_KEYS.map((tabKey) => (
-          <TabsTrigger key={tabKey} ref={tabRefs[tabKey]} value={tabKey}>
+          <TabsTrigger key={tabKey} value={tabKey}>
             {tabKey.charAt(0).toUpperCase() + tabKey.slice(1)}
           </TabsTrigger>
         ))}
       </TabsList>
-      <TabsContent value="routes" className="h-full pt-4">
+      <TabsContent value="routes" className="h-[calc(100%-40px)] pt-4">
         <RoutesPanel />
       </TabsContent>
-      <TabsContent value="requests" className="h-full pt-4">
+      <TabsContent value="requests" className="h-[calc(100%-40px)] pt-4">
         <RequestsPanel />
       </TabsContent>
     </Tabs>
diff --git a/studio/src/pages/RequestorPage/NavigationPanel/RequestsPanel/RequestsPanel.tsx b/studio/src/pages/RequestorPage/NavigationPanel/RequestsPanel/RequestsPanel.tsx
index bdab265e1..593d8cdac 100644
--- a/studio/src/pages/RequestorPage/NavigationPanel/RequestsPanel/RequestsPanel.tsx
+++ b/studio/src/pages/RequestorPage/NavigationPanel/RequestsPanel/RequestsPanel.tsx
@@ -11,7 +11,7 @@ import {
   getStatusCode,
 } from "@/utils";
 import type { OtelTrace } from "@fiberplane/fpx-types";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import {
   Link,
@@ -45,9 +45,12 @@ export function RequestsPanel() {
   );
   const { id = activeHistoryResponseTraceId } = useParams();
 
-  const [selectedIndex, setSelectedIndex] = useState<number>(() => {
-    const activeIndex = filteredItems.findIndex((item) => getId(item) === id);
-    return activeIndex !== -1 ? activeIndex : 0;
+  const activeIndex = useMemo(() => {
+    return filteredItems.findIndex((item) => getId(item) === id);
+  }, [filteredItems, id]);
+
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(() => {
+    return activeIndex !== -1 ? getId(filteredItems[activeIndex]) : null;
   });
 
   const navigate = useNavigate();
@@ -57,7 +60,7 @@ export function RequestsPanel() {
   const handleItemSelect = useCallback(
     (item: MergedListItem) => {
       navigate({
-        pathname: `/requestor/${item.type}/${getId(item)}`,
+        pathname: `/${item.type}/${getId(item)}`,
         search: searchParams.toString(),
       });
     },
@@ -76,21 +79,31 @@ export function RequestsPanel() {
     return nextIndex;
   };
 
-  useHotkeys(["j", "k", "ArrowDown", "ArrowUp", "/"], (event) => {
+  useHotkeys(["j", "k", "/"], (event) => {
     event.preventDefault();
     switch (event.key) {
       case "j":
-      case "ArrowDown":
-        setSelectedIndex((prevIndex) => getNextItemIndex(prevIndex, 1));
+        setSelectedItemId((prevId) => {
+          const currentIndex = filteredItems.findIndex(
+            (item) => getId(item) === prevId,
+          );
+          const nextIndex = getNextItemIndex(currentIndex, 1);
+          return getId(filteredItems[nextIndex]);
+        });
         break;
       case "k":
-      case "ArrowUp":
-        setSelectedIndex((prevIndex) => getNextItemIndex(prevIndex, -1));
+        setSelectedItemId((prevId) => {
+          const currentIndex = filteredItems.findIndex(
+            (item) => getId(item) === prevId,
+          );
+          const nextIndex = getNextItemIndex(currentIndex, -1);
+          return getId(filteredItems[nextIndex]);
+        });
         break;
       case "/": {
         if (searchRef.current) {
           searchRef.current.focus();
-          setSelectedIndex(-1);
+          setSelectedItemId(null);
         }
         break;
       }
@@ -103,9 +116,9 @@ export function RequestsPanel() {
       switch (event.key) {
         case "Enter": {
           if (isInputFocused && filteredItems.length > 0) {
-            setSelectedIndex(0);
+            setSelectedItemId(getId(filteredItems[0]));
             const firstItemElement = document.getElementById(
-              `item-${selectedIndex}`,
+              `item-${getId(filteredItems[0])}`,
             );
             if (firstItemElement) {
               firstItemElement.focus();
@@ -113,8 +126,13 @@ export function RequestsPanel() {
             break;
           }
 
-          if (selectedIndex !== -1 && filteredItems[selectedIndex]) {
-            handleItemSelect(filteredItems[selectedIndex]);
+          if (selectedItemId !== null) {
+            const selectedItem = filteredItems.find(
+              (item) => getId(item) === selectedItemId,
+            );
+            if (selectedItem) {
+              handleItemSelect(selectedItem);
+            }
           }
           break;
         }
@@ -122,9 +140,14 @@ export function RequestsPanel() {
         case "Escape": {
           if (isInputFocused) {
             blurActiveInput();
-          } else if (filterValue) {
+            break;
+          }
+          if (filterValue) {
             setFilterValue("");
+            break;
           }
+
+          setSelectedItemId(id);
           break;
         }
       }
@@ -149,13 +172,11 @@ export function RequestsPanel() {
             <p className="text-sm text-muted-foreground">No requests found</p>
           </div>
         )}
-        {filteredItems.map((item, index) => (
+        {filteredItems.map((item) => (
           <NavItem
             key={getId(item)}
             item={item}
-            index={index}
-            selectedIndex={selectedIndex}
-            setSelectedIndex={setSelectedIndex}
+            isSelected={getId(item) === selectedItemId}
             onSelect={() => handleItemSelect(item)}
             searchParams={searchParams}
           />
@@ -167,78 +188,69 @@ export function RequestsPanel() {
 
 type NavItemProps = {
   item: MergedListItem;
-  index: number;
-  selectedIndex: number;
-  setSelectedIndex: (index: number) => void;
+  isSelected: boolean;
   onSelect: () => void;
   searchParams: URLSearchParams;
 };
 
-const NavItem = ({
-  item,
-  index,
-  selectedIndex,
-  setSelectedIndex,
-  onSelect,
-  searchParams,
-}: NavItemProps) => {
-  const { activeHistoryResponseTraceId } = useRequestorStore(
-    "activeHistoryResponseTraceId",
-  );
-  const { id = activeHistoryResponseTraceId } = useParams();
-  const itemRef = useRef<HTMLAnchorElement>(null);
+const NavItem = memo(
+  ({ item, isSelected, onSelect, searchParams }: NavItemProps) => {
+    const { activeHistoryResponseTraceId } = useRequestorStore(
+      "activeHistoryResponseTraceId",
+    );
+    const { id = activeHistoryResponseTraceId } = useParams();
+    const itemRef = useRef<HTMLAnchorElement>(null);
 
-  const isSelected = index === selectedIndex;
-
-  useEffect(() => {
-    if (isSelected && itemRef.current) {
-      itemRef.current.focus();
-    }
-  }, [isSelected]);
+    useEffect(() => {
+      if (isSelected && itemRef.current) {
+        itemRef.current.focus();
+      }
+    }, [isSelected]);
 
-  return (
-    <Link
-      ref={itemRef}
-      to={{
-        pathname: `/requestor/${item.type}/${getId(item)}`,
-        search: searchParams.toString(),
-      }}
-      className={cn(
-        "grid grid-cols-[38px_38px_1fr] gap-2 hover:bg-muted p-1.5 rounded cursor-pointer items-center",
-        "focus:outline-none focus:ring-1 focus:ring-blue-500",
-        {
-          "bg-muted": id === getId(item),
-          "hover:bg-muted": id !== getId(item),
-          "ring-1 bg-muted ring-blue-500": id !== getId(item) && isSelected,
-        },
-      )}
-      onClick={(e) => {
-        e.preventDefault();
-        onSelect();
-      }}
-      onFocus={() => setSelectedIndex(index)}
-      onKeyDown={(e) => {
-        if (e.key === "Enter") {
+    return (
+      <Link
+        ref={itemRef}
+        to={{
+          pathname: `/${item.type}/${getId(item)}`,
+          search: searchParams.toString(),
+        }}
+        className={cn(
+          "grid grid-cols-[38px_38px_1fr] gap-2 hover:bg-muted px-2 py-1 rounded cursor-pointer items-center",
+          "focus:outline-none",
+          {
+            "bg-muted": id === getId(item),
+            "hover:bg-muted": id !== getId(item),
+            "focus:ring-1 bg-muted focus:ring-blue-500 focus:ring-opacity-25 focus:ring-inset":
+              id !== getId(item) && isSelected,
+          },
+        )}
+        onClick={(e: React.MouseEvent) => {
           e.preventDefault();
           onSelect();
-        }
-      }}
-      data-state-active={id === getId(item)}
-      data-state-selected={isSelected}
-      id={`item-${index}`}
-    >
-      <div>
-        <StatusCell item={item} />
-      </div>
-      <div>
-        <MethodCell item={item} />
-      </div>
-      <div>
-        <PathCell item={item} />
-      </div>
-    </Link>
-  );
-};
+        }}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            onSelect();
+          }
+        }}
+        data-state-active={id === getId(item)}
+        data-state-selected={isSelected}
+        id={`item-${getId(item)}`}
+      >
+        <div>
+          <StatusCell item={item} />
+        </div>
+        <div>
+          <MethodCell item={item} />
+        </div>
+        <div>
+          <PathCell item={item} />
+        </div>
+      </Link>
+    );
+  },
+);
 
 const getId = (item: MergedListItem) => {
   return item.type === "request"
@@ -262,7 +274,11 @@ const PathCell = ({ item }: { item: MergedListItem }) => {
       ? removeServiceUrlFromPath(item.data.app_requests.requestUrl)
       : removeServiceUrlFromPath(getRequestUrl(getSpan(item.data)));
 
-  return <div className="text-sm font-mono">{path}</div>;
+  return (
+    <div className="text-sm font-mono overflow-hidden text-ellipsis whitespace-nowrap">
+      {path}
+    </div>
+  );
 };
 
 const StatusCell = ({ item }: { item: MergedListItem }) => {
diff --git a/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesItem.tsx b/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesItem.tsx
index 312c946f4..3542fea15 100644
--- a/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesItem.tsx
+++ b/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesItem.tsx
@@ -1,6 +1,6 @@
 import { cn, getHttpMethodTextColor } from "@/utils";
 import { TrashIcon } from "@radix-ui/react-icons";
-import { useEffect, useRef } from "react";
+import { memo, useEffect, useRef } from "react";
 import { useDeleteRoute } from "../../queries";
 import { type ProbedRoute, isWsRequest } from "../../types";
 
@@ -10,10 +10,10 @@ type RoutesItemProps = {
   activeRoute: ProbedRoute | null;
   selectedRoute: ProbedRoute | null;
   handleRouteClick: (route: ProbedRoute) => void;
-  setSelectedRouteIndex: (index: number) => void;
+  setSelectedRouteIndex: (index: number | null) => void;
 };
 
-export function RoutesItem(props: RoutesItemProps) {
+export const RoutesItem = memo(function RoutesItem(props: RoutesItemProps) {
   const {
     index,
     route,
@@ -45,16 +45,19 @@ export function RoutesItem(props: RoutesItemProps) {
       type="button"
       onClick={() => handleRouteClick(route)}
       onFocus={() => setSelectedRouteIndex(index)}
+      onBlur={() => setSelectedRouteIndex(null)}
+      onMouseEnter={() => setSelectedRouteIndex(null)}
       data-state-active={isActive}
       data-state-selected={isSelected}
       tabIndex={0}
       className={cn(
-        "flex items-center py-1 pl-5 pr-2 rounded cursor-pointer font-mono text-sm w-full",
-        "focus:outline-none focus:ring-1 focus:ring-blue-500",
+        "flex items-center px-2 py-1 rounded cursor-pointer font-mono text-sm text-left w-full",
+        "focus:outline-none",
         {
           "bg-muted": isActive,
           "hover:bg-muted": !isActive,
-          "ring-1 bg-muted ring-blue-500": !isActive && isSelected,
+          "focus:ring-inset focus:ring-1 focus:ring-blue-500 focus:ring-opacity-25 bg-muted":
+            isSelected,
         },
       )}
       id={`route-${index}`}
@@ -80,4 +83,4 @@ export function RoutesItem(props: RoutesItemProps) {
       )}
     </button>
   );
-}
+});
diff --git a/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesPanel.tsx b/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesPanel.tsx
index 2eef868c8..5897e9de1 100644
--- a/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesPanel.tsx
+++ b/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesPanel.tsx
@@ -24,7 +24,7 @@ export function RoutesPanel() {
   const handleRouteClick = useHandler((route: ProbedRoute) => {
     navigate(
       {
-        pathname: "/requestor/",
+        pathname: "/",
       },
       { replace: true },
     );
@@ -47,7 +47,7 @@ export function RoutesPanel() {
     if (cleanFilter.length < 3 && routes) {
       return routes;
     }
-    return routes?.filter((r) => r.path.includes(filterValue));
+    return routes?.filter((r) => r.path.toLowerCase().includes(cleanFilter));
   }, [filterValue, routes]);
 
   const detectedRoutes = useMemo(() => {
@@ -71,13 +71,15 @@ export function RoutesPanel() {
     );
   }, [filteredRoutes]);
 
+  const allRoutes = useMemo(() => {
+    return [...userAddedRoutes, ...detectedRoutes, ...openApiRoutes];
+  }, [userAddedRoutes, detectedRoutes, openApiRoutes]);
+
   const activeRouteIndex = useMemo(() => {
-    return (
-      filteredRoutes?.findIndex(
-        (r) => r.path === activeRoute?.path && r.method === activeRoute.method,
-      ) ?? -1
+    return allRoutes.findIndex(
+      (r) => r.path === activeRoute?.path && r.method === activeRoute.method,
     );
-  }, [filteredRoutes, activeRoute]);
+  }, [allRoutes, activeRoute]);
 
   const [selectedRouteIndex, setSelectedRouteIndex] = useState<number | null>(
     null,
@@ -86,8 +88,8 @@ export function RoutesPanel() {
   const getNextRouteIndex = (currentIndex: number, direction: 1 | -1) => {
     let nextIndex = currentIndex + direction;
     if (nextIndex < 0) {
-      nextIndex = filteredRoutes.length - 1;
-    } else if (nextIndex >= filteredRoutes.length) {
+      nextIndex = allRoutes.length - 1;
+    } else if (nextIndex >= allRoutes.length) {
       nextIndex = 0;
     }
     return nextIndex;
@@ -95,17 +97,15 @@ export function RoutesPanel() {
 
   const searchRef = useRef<HTMLInputElement>(null);
 
-  useHotkeys(["j", "k", "ArrowDown", "ArrowUp", "/"], (event) => {
+  useHotkeys(["j", "k", "/"], (event) => {
     event.preventDefault();
     switch (event.key) {
       case "j":
-      case "ArrowDown":
         setSelectedRouteIndex((prevIndex) =>
           getNextRouteIndex(prevIndex ?? activeRouteIndex, 1),
         );
         break;
       case "k":
-      case "ArrowUp":
         setSelectedRouteIndex((prevIndex) =>
           getNextRouteIndex(prevIndex ?? activeRouteIndex, -1),
         );
@@ -126,7 +126,7 @@ export function RoutesPanel() {
     (event) => {
       switch (event.key) {
         case "Enter": {
-          if (isInputFocused && filteredRoutes.length > 0) {
+          if (isInputFocused && allRoutes.length > 0) {
             setSelectedRouteIndex(0);
             const firstRouteElement = document.getElementById(
               `route-${selectedRouteIndex}`,
@@ -137,11 +137,8 @@ export function RoutesPanel() {
             break;
           }
 
-          if (
-            selectedRouteIndex !== null &&
-            filteredRoutes[selectedRouteIndex]
-          ) {
-            handleRouteClick(filteredRoutes[selectedRouteIndex]);
+          if (selectedRouteIndex !== null && allRoutes[selectedRouteIndex]) {
+            handleRouteClick(allRoutes[selectedRouteIndex]);
           }
           break;
         }
@@ -149,9 +146,15 @@ export function RoutesPanel() {
         case "Escape": {
           if (isInputFocused) {
             blurActiveInput();
-          } else if (filterValue) {
+            break;
+          }
+
+          if (filterValue) {
             setFilterValue("");
+            break;
           }
+
+          setSelectedRouteIndex(null);
           break;
         }
       }
@@ -166,7 +169,7 @@ export function RoutesPanel() {
           <Input
             ref={searchRef}
             className="text-sm"
-            placeholder={`Search (hit ${"/"} to focus)`}
+            placeholder="Search (hit / to focus)"
             value={filterValue}
             onChange={(e) => setFilterValue(e.target.value)}
             onFocus={() => setSelectedRouteIndex(null)}
@@ -174,7 +177,6 @@ export function RoutesPanel() {
           <AddRouteButton />
         </div>
       </div>
-      {/* TODO: resolve when routes overflow */}
       <div className="overflow-y-auto h-full relative">
         {hasAnyUserAddedRoutes && (
           <RoutesSection title="Custom routes">
@@ -244,13 +246,13 @@ export function RoutesSection(props: RoutesSectionProps) {
   const { title, children } = props;
 
   return (
-    <section className="p-2">
-      <div>
-        <h4 className="font-medium font-mono uppercase text-xs text-muted-foreground">
-          {title}
-        </h4>
+    <section className="p-2 w-full">
+      <h4 className="font-medium font-mono uppercase text-xs text-muted-foreground">
+        {title}
+      </h4>
+      <div className="space-y-0.5 overflow-y-auto mt-4 w-full overflow-x-hidden">
+        {children}
       </div>
-      <div className="space-y-0.5 overflow-y-auto mt-4">{children}</div>
     </section>
   );
 }
diff --git a/studio/src/pages/RequestorPage/RequestorPage.tsx b/studio/src/pages/RequestorPage/RequestorPage.tsx
index dd7037426..b27bb0b4b 100644
--- a/studio/src/pages/RequestorPage/RequestorPage.tsx
+++ b/studio/src/pages/RequestorPage/RequestorPage.tsx
@@ -30,10 +30,7 @@ export const RequestorPage = () => {
   // NOTE - This sets the `routes` and `serviceBaseUrl` in the reducer
   useRoutes();
 
-  const { sidePanelOpen } = useRequestorStore(
-    "sidePanelOpen",
-    "setSidePanelOpen",
-  );
+  const { sidePanel } = useRequestorStore("sidePanel");
 
   // NOTE - Use this to test overflow of requests panel
   // useEffect(() => {
@@ -72,7 +69,7 @@ export const RequestorPage = () => {
   const generateLinkToTrace = useCallback(
     (traceId: string) => {
       const search = searchParams.toString();
-      return `/requestor/request/${traceId}${search ? `?${search}` : ""}`;
+      return `/request/${traceId}${search ? `?${search}` : ""}`;
     },
     [searchParams],
   );
@@ -94,7 +91,7 @@ export const RequestorPage = () => {
         id="requestor-page-main"
         className="w-full"
       >
-        {isLgScreen && sidePanelOpen && (
+        {isLgScreen && sidePanel === "open" && (
           <>
             <ResizablePanel
               id="routes"
diff --git a/studio/src/pages/RequestorPage/RequestorPageContent.tsx b/studio/src/pages/RequestorPage/RequestorPageContent.tsx
index a058f7668..c1feefa92 100644
--- a/studio/src/pages/RequestorPage/RequestorPageContent.tsx
+++ b/studio/src/pages/RequestorPage/RequestorPageContent.tsx
@@ -7,7 +7,7 @@ import {
 import { useToast } from "@/components/ui/use-toast";
 import { useIsLgScreen, useKeySequence } from "@/hooks";
 import { cn } from "@/utils";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useMemo, useRef } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { LogsTable } from "./LogsTable";
 import { RequestPanel } from "./RequestPanel";
@@ -18,7 +18,6 @@ import { AiTestGenerationPanel, useAi } from "./ai";
 import { type Requestornator, useMakeProxiedRequest } from "./queries";
 import { useActiveRoute, useRequestorStore } from "./store";
 import { BACKGROUND_LAYER } from "./styles";
-import type { Panels } from "./types";
 import { useMakeWebsocketRequest } from "./useMakeWebsocketRequest";
 import { useRequestorSubmitHandler } from "./useRequestorSubmitHandler";
 import { sortRequestornatorsDescending } from "./utils";
@@ -94,21 +93,15 @@ export const RequestorPageContent: React.FC<RequestorPageContentProps> = (
     setIgnoreAiInputsBanner,
   } = useAi(history);
 
-  const [openPanels, setOpenPanels] = useState<Panels>({
-    timeline: "closed",
-    aiTestGeneration: "closed",
-    logs: "closed",
-  });
-
-  const togglePanel = useCallback((panelName: keyof Panels) => {
-    setOpenPanels((current) => ({
-      ...current,
-      [panelName]: current[panelName] === "open" ? "closed" : "open",
-    }));
-  }, []);
-
   const isLgScreen = useIsLgScreen();
 
+  const { logsPanel, timelinePanel, aiPanel, togglePanel } = useRequestorStore(
+    "togglePanel",
+    "logsPanel",
+    "timelinePanel",
+    "aiPanel",
+  );
+
   useHotkeys(
     "mod+g",
     (e) => {
@@ -132,7 +125,7 @@ export const RequestorPageContent: React.FC<RequestorPageContentProps> = (
   useKeySequence(
     ["g", "l"],
     () => {
-      togglePanel("logs");
+      togglePanel("logsPanel");
     },
     { description: "Open logs panel" },
   );
@@ -140,7 +133,7 @@ export const RequestorPageContent: React.FC<RequestorPageContentProps> = (
   useKeySequence(
     ["g", "t"],
     () => {
-      togglePanel("timeline");
+      togglePanel("timelinePanel");
     },
     { description: "Open timeline panel" },
   );
@@ -148,7 +141,7 @@ export const RequestorPageContent: React.FC<RequestorPageContentProps> = (
   useKeySequence(
     ["g", "i"],
     () => {
-      togglePanel("aiTestGeneration");
+      togglePanel("aiPanel");
     },
     {
       description: "Open AI assistant panel",
@@ -175,8 +168,6 @@ export const RequestorPageContent: React.FC<RequestorPageContentProps> = (
       tracedResponse={mostRecentRequestornatorForRoute}
       isLoading={isRequestorRequesting}
       websocketState={websocketState}
-      openPanels={openPanels}
-      togglePanel={togglePanel}
     />
   );
 
@@ -243,7 +234,7 @@ export const RequestorPageContent: React.FC<RequestorPageContentProps> = (
             </ResizablePanel>
           </ResizablePanelGroup>
         </ResizablePanel>
-        {openPanels.timeline === "open" && traceId && (
+        {timelinePanel === "open" && (
           <>
             <ResizableHandle
               hitAreaMargins={{ coarse: 20, fine: 10 }}
@@ -260,11 +251,11 @@ export const RequestorPageContent: React.FC<RequestorPageContentProps> = (
                 "mt-2",
               )}
             >
-              <RequestorTimeline togglePanel={togglePanel} traceId={traceId} />
+              <RequestorTimeline traceId={traceId} />
             </ResizablePanel>
           </>
         )}
-        {openPanels.logs === "open" && traceId && (
+        {logsPanel === "open" && (
           <>
             <ResizableHandle
               hitAreaMargins={{ coarse: 20, fine: 10 }}
@@ -281,11 +272,11 @@ export const RequestorPageContent: React.FC<RequestorPageContentProps> = (
                 "mt-2",
               )}
             >
-              <LogsTable togglePanel={togglePanel} traceId={traceId} />
+              <LogsTable traceId={traceId} />
             </ResizablePanel>
           </>
         )}
-        {openPanels.aiTestGeneration === "open" && (
+        {aiPanel === "open" && (
           <>
             <ResizableHandle
               hitAreaMargins={{ coarse: 20, fine: 10 }}
@@ -302,10 +293,7 @@ export const RequestorPageContent: React.FC<RequestorPageContentProps> = (
                 "mt-2",
               )}
             >
-              <AiTestGenerationPanel
-                history={history}
-                togglePanel={togglePanel}
-              />
+              <AiTestGenerationPanel history={history} />
             </ResizablePanel>
           </>
         )}
diff --git a/studio/src/pages/RequestorPage/RequestorTimeline.tsx b/studio/src/pages/RequestorPage/RequestorTimeline.tsx
index 632155bc8..bfcbe171d 100644
--- a/studio/src/pages/RequestorPage/RequestorTimeline.tsx
+++ b/studio/src/pages/RequestorPage/RequestorTimeline.tsx
@@ -20,16 +20,18 @@ import { Tabs } from "@radix-ui/react-tabs";
 import type { ReactNode } from "react";
 import { useOrphanLogs } from "../RequestDetailsPage/RequestDetailsPageV2/useOrphanLogs";
 import { CustomTabTrigger, CustomTabsContent, CustomTabsList } from "./Tabs";
-import type { Panels } from "./types";
+import { useRequestorStore } from "./store";
 
 type Props = {
-  traceId: string;
-  togglePanel: (panelName: keyof Panels) => void;
+  traceId?: string;
 };
 
-export function RequestorTimeline({ traceId, togglePanel }: Props) {
+//TODO: add a better empty state
+export function RequestorTimeline({ traceId = "" }: Props) {
   const { data: spans } = useOtelTrace(traceId);
 
+  const { togglePanel } = useRequestorStore("togglePanel");
+
   const orphanLogs = useOrphanLogs(traceId, spans ?? []);
   const { waterfall } = useAsWaterfall(spans ?? [], orphanLogs);
   const { minStart, duration } = extractWaterfallTimeStats(waterfall);
@@ -50,7 +52,7 @@ export function RequestorTimeline({ traceId, togglePanel }: Props) {
           <Button
             variant="ghost"
             size="icon"
-            onClick={() => togglePanel("timeline")}
+            onClick={() => togglePanel("timelinePanel")}
             className="h-6 w-6"
           >
             <Cross1Icon className="h-3 w-3 cursor-pointer" />
diff --git a/studio/src/pages/RequestorPage/ResponsePanel/ResponsePanel.tsx b/studio/src/pages/RequestorPage/ResponsePanel/ResponsePanel.tsx
index 931dfaca3..6986d4c32 100644
--- a/studio/src/pages/RequestorPage/ResponsePanel/ResponsePanel.tsx
+++ b/studio/src/pages/RequestorPage/ResponsePanel/ResponsePanel.tsx
@@ -1,13 +1,7 @@
-import RobotIcon from "@/assets/Robot.svg";
-import { KeyboardShortcutKey } from "@/components/KeyboardShortcut";
 import { KeyValueTable } from "@/components/Timeline/DetailsList/KeyValueTableV2";
-import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs } from "@/components/ui/tabs";
-import { Tooltip, TooltipContent } from "@/components/ui/tooltip";
 import { SENSITIVE_HEADERS, cn, parsePathFromRequestUrl } from "@/utils";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { TooltipTrigger } from "@radix-ui/react-tooltip";
 import { memo } from "react";
 import { Method, StatusCode } from "../RequestorHistory";
 import { CustomTabTrigger, CustomTabsContent, CustomTabsList } from "../Tabs";
@@ -18,7 +12,7 @@ import {
   type RequestorActiveResponse,
   isRequestorActiveResponse,
 } from "../store/types";
-import { type Panels, isWsRequest } from "../types";
+import { isWsRequest } from "../types";
 import type { WebSocketState } from "../useMakeWebsocketRequest";
 import { FailedRequest, ResponseBody } from "./ResponseBody";
 import {
@@ -31,16 +25,12 @@ type Props = {
   tracedResponse?: Requestornator;
   isLoading: boolean;
   websocketState: WebSocketState;
-  openPanels: Panels;
-  togglePanel: (panelName: keyof Panels & {}) => void;
 };
 
 export const ResponsePanel = memo(function ResponsePanel({
   tracedResponse,
   isLoading,
   websocketState,
-  openPanels,
-  togglePanel,
 }: Props) {
   const {
     activeResponse,
@@ -73,7 +63,6 @@ export const ResponsePanel = memo(function ResponsePanel({
     : responseToRender?.app_responses?.responseHeaders;
 
   const shouldShowMessages = shouldShowResponseTab("messages");
-  const traceId = tracedResponse?.app_responses.traceId;
 
   return (
     <div className="overflow-x-hidden overflow-y-auto h-full relative">
@@ -104,98 +93,6 @@ export const ResponsePanel = memo(function ResponsePanel({
               </span>
             )}
           </CustomTabTrigger>
-
-          <div className="flex-grow flex justify-end">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant={openPanels.logs === "open" ? "outline" : "ghost"}
-                  size="icon"
-                  disabled={!traceId}
-                  onClick={() => togglePanel("logs")}
-                  className={cn(
-                    openPanels.logs === "open" && "opacity-50 bg-slate-900",
-                    "h-6 w-6",
-                  )}
-                >
-                  <Icon icon="lucide:logs" className="cursor-pointer h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent
-                side="bottom"
-                className="bg-slate-900 text-white px-2 py-1.5 text-sm flex gap-2 items-center"
-                align="center"
-              >
-                <p>Toggle logs</p>
-                <div className="flex gap-1">
-                  <KeyboardShortcutKey>G</KeyboardShortcutKey>
-                  <span className="text-xs font-mono">then</span>
-                  <KeyboardShortcutKey>L</KeyboardShortcutKey>
-                </div>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant={openPanels.timeline === "open" ? "outline" : "ghost"}
-                  size="icon"
-                  disabled={!traceId}
-                  onClick={() => togglePanel("timeline")}
-                  className={cn(
-                    openPanels.timeline === "open" && "opacity-50 bg-slate-900",
-                    "h-6 w-6",
-                  )}
-                >
-                  <Icon
-                    icon="lucide:chart-gantt"
-                    className="cursor-pointer h-4 w-4"
-                  />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent
-                side="bottom"
-                className="bg-slate-900 text-white px-2 py-1.5 text-sm flex gap-2 items-center"
-                align="center"
-              >
-                <p>Toggle timeline</p>
-                <div className="flex gap-1 items-center">
-                  <KeyboardShortcutKey>G</KeyboardShortcutKey>
-                  <span className="text-xs font-mono">then</span>
-                  <KeyboardShortcutKey>T</KeyboardShortcutKey>
-                </div>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant={
-                    openPanels.aiTestGeneration === "open" ? "outline" : "ghost"
-                  }
-                  size="icon"
-                  onClick={() => togglePanel("aiTestGeneration")}
-                  className={cn(
-                    openPanels.aiTestGeneration === "open" &&
-                      "opacity-50 bg-slate-900",
-                    "h-6 w-6",
-                  )}
-                >
-                  <RobotIcon className="h-3 w-3 cursor-pointer" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent
-                side="bottom"
-                className="bg-slate-900 text-white px-2 py-1.5 text-sm flex gap-2 items-center"
-                align="center"
-              >
-                <p>Toggle AI test panel</p>
-                <div className="flex gap-1 items-center">
-                  <KeyboardShortcutKey>G</KeyboardShortcutKey>
-                  <span className="text-xs font-mono">then</span>
-                  <KeyboardShortcutKey>I</KeyboardShortcutKey>
-                </div>
-              </TooltipContent>
-            </Tooltip>
-          </div>
         </CustomTabsList>
         <CustomTabsContent value="messages">
           <TabContentInner
diff --git a/studio/src/pages/RequestorPage/ai/AiTestGenerationPanel.tsx b/studio/src/pages/RequestorPage/ai/AiTestGenerationPanel.tsx
index 161d36924..21e744786 100644
--- a/studio/src/pages/RequestorPage/ai/AiTestGenerationPanel.tsx
+++ b/studio/src/pages/RequestorPage/ai/AiTestGenerationPanel.tsx
@@ -12,19 +12,17 @@ import { useMemo, useState } from "react";
 import { CustomTabTrigger, CustomTabsContent, CustomTabsList } from "../Tabs";
 import type { Requestornator } from "../queries";
 import { findMatchedRoute } from "../routes";
-import { useActiveRoute, useServiceBaseUrl } from "../store";
-import type { Panels } from "../types";
+import { useActiveRoute, useRequestorStore, useServiceBaseUrl } from "../store";
 import { ContextEntry } from "./AiTestGenerationDrawer";
 import { usePrompt } from "./ai-test-generation";
 
 export function AiTestGenerationPanel({
   history,
-  togglePanel,
 }: {
   history: Array<Requestornator>;
-  togglePanel: (panelName: keyof Panels) => void;
 }) {
   const { isCopied, copyToClipboard } = useCopyToClipboard();
+  const { togglePanel } = useRequestorStore("togglePanel");
 
   const activeRoute = useActiveRoute();
   const { removeServiceUrlFromPath } = useServiceBaseUrl();
@@ -72,7 +70,7 @@ export function AiTestGenerationPanel({
             <Button
               variant="ghost"
               size="icon"
-              onClick={() => togglePanel("aiTestGeneration")}
+              onClick={() => togglePanel("aiPanel")}
               className="h-6 w-6"
             >
               <Cross1Icon className="h-3 w-3 cursor-pointer" />
diff --git a/studio/src/pages/RequestorPage/store/slices/types.ts b/studio/src/pages/RequestorPage/store/slices/types.ts
index 2f46f5d0d..22ec7e14d 100644
--- a/studio/src/pages/RequestorPage/store/slices/types.ts
+++ b/studio/src/pages/RequestorPage/store/slices/types.ts
@@ -76,10 +76,15 @@ export interface WebsocketSlice {
 }
 
 export interface UISlice {
-  sidePanelOpen: boolean;
-  setSidePanelOpen: (sidePanelOpen: boolean) => void;
+  sidePanel: PanelState;
+  logsPanel: PanelState;
+  timelinePanel: PanelState;
+  aiPanel: PanelState;
+  togglePanel: (panelName: Exclude<keyof UISlice, "togglePanel">) => void;
 }
 
+export type PanelState = "open" | "closed";
+
 export type Store = RequestResponseSlice &
   RoutesSlice &
   TabsSlice &
diff --git a/studio/src/pages/RequestorPage/store/slices/uiSlice.ts b/studio/src/pages/RequestorPage/store/slices/uiSlice.ts
index e0632f139..04a2ab833 100644
--- a/studio/src/pages/RequestorPage/store/slices/uiSlice.ts
+++ b/studio/src/pages/RequestorPage/store/slices/uiSlice.ts
@@ -7,7 +7,13 @@ export const uiSlice: StateCreator<
   [["zustand/immer", never], ["zustand/devtools", never]]
 > = (set) => {
   return {
-    sidePanelOpen: isLgScreen(),
-    setSidePanelOpen: (sidePanelOpen) => set({ sidePanelOpen }),
+    sidePanel: isLgScreen() ? "open" : "closed",
+    logsPanel: "closed",
+    timelinePanel: "closed",
+    aiPanel: "closed",
+    togglePanel: (panelName) =>
+      set((state) => ({
+        [panelName]: state[panelName] === "open" ? "closed" : "open",
+      })),
   };
 };
diff --git a/studio/src/pages/RequestorPage/useRequestorSubmitHandler.ts b/studio/src/pages/RequestorPage/useRequestorSubmitHandler.ts
index 684017e4d..88afba0fc 100644
--- a/studio/src/pages/RequestorPage/useRequestorSubmitHandler.ts
+++ b/studio/src/pages/RequestorPage/useRequestorSubmitHandler.ts
@@ -107,7 +107,7 @@ export function useRequestorSubmitHandler({
           // otherwise the newest trace will automatically be shown
           if (urlHasId) {
             navigate({
-              pathname: `/requestor/requests/${traceId}`,
+              pathname: `/requests/${traceId}`,
               search: params.toString(),
             });
           }