diff --git a/backend/app/main.py b/backend/app/main.py
index e64ac93..4bbb0c2 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -62,11 +62,16 @@ app = FastAPI(
     lifespan=lifespan
 )
 
-# Configure CORS
+# Configure CORS. The frontend normally talks to the backend through the
+# nginx (prod) or vite (dev) proxy, so requests are same-origin and never
+# trip CORS. The wildcard here is a fallback for the rare case where a
+# user / script hits the backend directly from a browser at some other
+# origin (LAN IP, reverse proxy under a different host, etc.). This is a
+# single-user homelab tool, so a permissive CORS policy is fine.
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["http://localhost:3000", "http://localhost:5173"],  # Frontend URLs
-    allow_credentials=True,
+    allow_origins=["*"],
+    allow_credentials=False,
     allow_methods=["*"],
     allow_headers=["*"],
 )
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5c9b54a..29900fb 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -53,9 +53,6 @@ function App() {
   return (
     <div className="flex flex-col h-screen bg-bg text-text">
       <TopBar />
-      <FilterBar />
-      <DiscardActionBar />
-      <KeyboardHints />
 
       <div className="flex flex-1 overflow-hidden">
         {/* Left Sidebar */}
@@ -67,9 +64,15 @@ function App() {
           <LeftSidebar />
         </div>
 
-        {/* Main Content - Timeline */}
-        <div className="flex-1 overflow-auto">
-          <Timeline />
+        {/* Main column — filter bar, discard bar, timeline. Lives to the
+         *  right of the left sidebar so the filter row doesn't bleed
+         *  across the sidebar. */}
+        <div className="flex min-w-0 flex-1 flex-col">
+          <FilterBar />
+          <DiscardActionBar />
+          <div className="flex-1 overflow-auto">
+            <Timeline />
+          </div>
         </div>
 
         {/* Right Sidebar */}
@@ -82,6 +85,10 @@ function App() {
         </div>
       </div>
 
+      {/* Floating keyboard hints — pinned bottom-center, glassy. Sits
+       *  above the timeline and below the toast layer. */}
+      <KeyboardHints />
+
       {/* Scan Progress Indicator */}
       <ScanProgress />
 
diff --git a/frontend/src/components/KeyboardHints.tsx b/frontend/src/components/KeyboardHints.tsx
index 2dbe667..e011ca0 100644
--- a/frontend/src/components/KeyboardHints.tsx
+++ b/frontend/src/components/KeyboardHints.tsx
@@ -25,22 +25,22 @@ export function KeyboardHints() {
       ]
 
   return (
-    <div className="flex justify-center border-b border-border bg-surface/60 px-4 py-1.5">
-      <div className="flex items-center gap-3">
+    <div className="pointer-events-none fixed bottom-4 left-1/2 z-30 -translate-x-1/2">
+      <div className="pointer-events-auto flex items-center gap-3 rounded-full border border-border/60 bg-surface/40 px-4 py-1.5 shadow-lg ring-1 ring-white/5 backdrop-blur-md">
         {hints.map((hint, i) => (
           <div key={i} className="flex items-center gap-1.5">
-            <kbd className="rounded bg-surface-offset px-2 py-0.5 text-[11px] font-medium text-text">
+            <kbd className="rounded bg-surface-offset/80 px-1.5 py-0.5 text-[11px] font-medium text-text">
               {hint.key}
             </kbd>
             <span className="text-xs text-text-muted">{hint.action}</span>
             {i < hints.length - 1 && (
-              <span className="ml-2 text-text-faint">•</span>
+              <span className="ml-1 text-text-faint">•</span>
             )}
           </div>
         ))}
         {selectedCount > 0 && (
           <>
-            <span className="ml-2 text-text-faint">•</span>
+            <span className="text-text-faint">•</span>
             <span className="text-xs font-medium text-primary">
               {selectedCount} selected
             </span>
diff --git a/frontend/src/components/filter/FilterBar.tsx b/frontend/src/components/filter/FilterBar.tsx
index ce6c4c1..d719892 100644
--- a/frontend/src/components/filter/FilterBar.tsx
+++ b/frontend/src/components/filter/FilterBar.tsx
@@ -93,7 +93,7 @@ export function FilterBar() {
   const anyActive = hasActiveFilters(filterState)
 
   return (
-    <div className="flex items-center gap-1.5 overflow-x-auto border-b border-border bg-surface px-3 py-1.5">
+    <div className="flex items-center justify-center gap-1.5 overflow-x-auto border-b border-border bg-surface px-3 py-1.5">
       {/* Date */}
       <FilterPill
         label="Date"
@@ -320,7 +320,7 @@ export function FilterBar() {
       {anyActive && (
         <button
           onClick={clearAll}
-          className="ml-auto whitespace-nowrap rounded-full border border-border px-2.5 py-1 text-xs text-text-muted hover:bg-surface-2 hover:text-text"
+          className="ml-2 whitespace-nowrap rounded-full border border-border px-2.5 py-1 text-xs text-text-muted hover:bg-surface-2 hover:text-text"
           title="Clear all filters in this section"
         >
           Clear all
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index d9d8464..75d6afa 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -1,6 +1,11 @@
 import axios from 'axios'
 
-const API_BASE_URL = 'http://localhost:8001/api/v1'
+// Relative API base. In production the nginx in front of the SPA proxies
+// /api/ to the backend container; in dev the vite server has the same
+// proxy in vite.config.ts. Using a relative URL means requests are
+// always same-origin, so the app works whether you hit it from
+// localhost, a LAN IP, or a reverse proxy without any CORS dance.
+const API_BASE_URL = '/api/v1'
 
 const api = axios.create({
   baseURL: API_BASE_URL,