diff --git a/packages/api/src/auth/google-callback-handler.ts b/packages/api/src/auth/google-callback-handler.ts
index bb1ac5f..3668f22 100644
--- a/packages/api/src/auth/google-callback-handler.ts
+++ b/packages/api/src/auth/google-callback-handler.ts
@@ -93,8 +93,14 @@ export function googleCallbackHandler(
           return;
         }
 
+        const regSlugResult = await db.query<{ slug: string }>(
+          `SELECT slug FROM tenants WHERE id = $1`,
+          [result.tenantId],
+        );
+        const regSlug = regSlugResult.rows[0]?.slug;
+
         res.cookie(COOKIE_NAME, result.sessionToken, cookieOptions());
-        res.redirect(returnTo);
+        res.redirect(regSlug ? `/${regSlug}${returnTo === "/" ? "/" : returnTo}` : returnTo);
       } else {
         // --- Login flow ---
         let identity;
@@ -153,8 +159,14 @@ export function googleCallbackHandler(
           detail,
         });
 
+        const loginSlugResult = await db.query<{ slug: string }>(
+          `SELECT slug FROM tenants WHERE id = $1`,
+          [membership.tenant_id],
+        );
+        const loginSlug = loginSlugResult.rows[0]?.slug;
+
         res.cookie(COOKIE_NAME, token, cookieOptions());
-        res.redirect(returnTo);
+        res.redirect(loginSlug ? `/${loginSlug}${returnTo === "/" ? "/" : returnTo}` : returnTo);
       }
     } catch (err) {
       req.log.error({ err }, "Unexpected error in Google callback handler");
diff --git a/packages/api/src/auth/slug.ts b/packages/api/src/auth/slug.ts
index f9d2799..f207b7c 100644
--- a/packages/api/src/auth/slug.ts
+++ b/packages/api/src/auth/slug.ts
@@ -10,9 +10,14 @@ const RESERVED_SLUGS = new Set([
   "app",
   "auth",
   "billing",
+  "callback",
   "dashboard",
+  "error",
+  "health",
   "help",
+  "invite",
   "login",
+  "logout",
   "register",
   "settings",
   "status",
diff --git a/packages/api/src/index.ts b/packages/api/src/index.ts
index e40f5df..95d2977 100644
--- a/packages/api/src/index.ts
+++ b/packages/api/src/index.ts
@@ -7,6 +7,7 @@ import { logger } from "./logger.ts";
 import { requestLogger } from "./middleware/request-logger.ts";
 import { requestContextMiddleware } from "./middleware/request-context.ts";
 import { sessionMiddleware } from "./middleware/session.ts";
+import { tenantContextMiddleware } from "./middleware/tenant-context.ts";
 import { createAuthRouter } from "./routes/auth.ts";
 import { createTenantsRouter } from "./routes/tenants.ts";
 import { createSyncRouter } from "./routes/sync.ts";
@@ -54,6 +55,7 @@ app.use(express.urlencoded({ extended: false }));
 app.use(requestLogger);
 app.use(requestContextMiddleware);
 app.use(sessionMiddleware);
+app.use(tenantContextMiddleware);
 
 app.get("/api/health", (_req, res) => {
   res.json({ status: "ok" });
diff --git a/packages/api/src/middleware/tenant-context.ts b/packages/api/src/middleware/tenant-context.ts
new file mode 100644
index 0000000..f0ae782
--- /dev/null
+++ b/packages/api/src/middleware/tenant-context.ts
@@ -0,0 +1,114 @@
+import type { RequestHandler } from "express";
+import { pool } from "../db.ts";
+import type { TenantContext } from "../session-context.ts";
+
+const CACHE_TTL_MS = 60 * 1000;
+
+interface MembershipCacheEntry {
+  tenantId: string;
+  role: string;
+  cachedAt: number;
+}
+
+// Keyed by "principalId:tenantId" for ID-based lookups,
+// "principalId:slug:<slug>" for slug-based lookups
+const membershipCache = new Map<string, MembershipCacheEntry | null>();
+
+function getCached(key: string): MembershipCacheEntry | null | undefined {
+  const entry = membershipCache.get(key);
+  if (entry === undefined) return undefined;
+  if (entry !== null && Date.now() - entry.cachedAt > CACHE_TTL_MS) {
+    membershipCache.delete(key);
+    return undefined;
+  }
+  // Null entries (no membership) also expire
+  if (entry === null) {
+    // We store null with a timestamp trick — just expire after TTL
+    // For simplicity, re-check by not caching negatives
+    membershipCache.delete(key);
+    return undefined;
+  }
+  return entry;
+}
+
+async function resolveTenantBySlug(
+  principalId: string,
+  slug: string,
+): Promise<TenantContext | null> {
+  const slugKey = `${principalId}:slug:${slug}`;
+  const cached = getCached(slugKey);
+  if (cached !== undefined) return cached;
+
+  const result = await pool.query<{ tenant_id: string; role: string }>(
+    `SELECT m.tenant_id, m.role
+     FROM memberships m
+     JOIN tenants t ON t.id = m.tenant_id
+     WHERE m.principal_id = $1 AND t.slug = $2 AND t.status = 'active'`,
+    [principalId, slug],
+  );
+
+  const row = result.rows[0];
+  if (!row) return null;
+
+  const entry: MembershipCacheEntry = {
+    tenantId: row.tenant_id,
+    role: row.role,
+    cachedAt: Date.now(),
+  };
+  membershipCache.set(slugKey, entry);
+  return { tenantId: entry.tenantId, role: entry.role };
+}
+
+async function resolveTenantById(
+  principalId: string,
+  tenantId: string,
+): Promise<TenantContext | null> {
+  const idKey = `${principalId}:${tenantId}`;
+  const cached = getCached(idKey);
+  if (cached !== undefined) return cached;
+
+  const result = await pool.query<{ role: string }>(
+    `SELECT m.role
+     FROM memberships m
+     JOIN tenants t ON t.id = m.tenant_id
+     WHERE m.principal_id = $1 AND m.tenant_id = $2 AND t.status = 'active'`,
+    [principalId, tenantId],
+  );
+
+  const row = result.rows[0];
+  if (!row) return null;
+
+  const entry: MembershipCacheEntry = {
+    tenantId,
+    role: row.role,
+    cachedAt: Date.now(),
+  };
+  membershipCache.set(idKey, entry);
+  return { tenantId, role: entry.role };
+}
+
+export const tenantContextMiddleware: RequestHandler = async (req, res, next) => {
+  if (!req.session) {
+    next();
+    return;
+  }
+
+  const slug = req.headers["x-tenant-slug"];
+  const { principalId, tenantId: defaultTenantId } = req.session;
+
+  let tenantContext: TenantContext | null;
+
+  if (typeof slug === "string" && slug) {
+    tenantContext = await resolveTenantBySlug(principalId, slug);
+  } else {
+    tenantContext = await resolveTenantById(principalId, defaultTenantId);
+  }
+
+  if (!tenantContext) {
+    res.status(403).json({ error: "no_membership" });
+    return;
+  }
+
+  req.tenantContext = tenantContext;
+  next();
+};
diff --git a/packages/api/src/routes/sync.test.ts b/packages/api/src/routes/sync.test.ts
index ea1906d..8ac56e4 100644
--- a/packages/api/src/routes/sync.test.ts
+++ b/packages/api/src/routes/sync.test.ts
@@ -21,7 +21,10 @@ const SESSION: SessionContext = {
 function makeApp(sessionOverride: SessionContext | null, pool: ReturnType<typeof makePool>) {
   const app = express();
   app.use((req, _res, next) => {
-    if (sessionOverride) req.session = sessionOverride;
+    if (sessionOverride) {
+      req.session = sessionOverride;
+      req.tenantContext = { tenantId: sessionOverride.tenantId, role: "owner" };
+    }
     next();
   });
   app.use("/api/sync", createSyncRouter(pool, kms));
diff --git a/packages/api/src/routes/sync.ts b/packages/api/src/routes/sync.ts
index 4c249ab..ebd8263 100644
--- a/packages/api/src/routes/sync.ts
+++ b/packages/api/src/routes/sync.ts
@@ -15,12 +15,12 @@ export function createSyncRouter(pool: Pool, kms: KeyManagementService): Router
   const router = Router();
 
   router.get("/bootstrap", async (req, res) => {
-    if (!req.session) {
+    if (!req.tenantContext) {
       res.status(401).json({ error: "not_authenticated" });
       return;
     }
 
-    const { tenantId } = req.session;
+    const { tenantId } = req.tenantContext;
 
     const client = await pool.connect();
     let events: HydratedTenantEvent[];
diff --git a/packages/api/src/routes/user.test.ts b/packages/api/src/routes/user.test.ts
index 9875f5c..a22d85c 100644
--- a/packages/api/src/routes/user.test.ts
+++ b/packages/api/src/routes/user.test.ts
@@ -21,7 +21,10 @@ const SESSION: SessionContext = {
 function makeApp(sessionOverride: SessionContext | null, pool: ReturnType<typeof makePool>) {
   const app = express();
   app.use((req, _res, next) => {
-    if (sessionOverride) req.session = sessionOverride;
+    if (sessionOverride) {
+      req.session = sessionOverride;
+      req.tenantContext = { tenantId: sessionOverride.tenantId, role: "owner" };
+    }
     next();
   });
   app.use("/api/user", createUserRouter(pool, kms));
diff --git a/packages/api/src/routes/user.ts b/packages/api/src/routes/user.ts
index 7d6c070..c8d3b78 100644
--- a/packages/api/src/routes/user.ts
+++ b/packages/api/src/routes/user.ts
@@ -7,12 +7,13 @@ export function createUserRouter(pool: Pool, kms: KeyManagementService): Router
   const router = Router();
 
   router.get("/me/events", async (req, res) => {
-    if (!req.session) {
+    if (!req.session || !req.tenantContext) {
       res.status(401).json({ error: "not_authenticated" });
       return;
     }
 
-    const { principalId, tenantId } = req.session;
+    const { principalId } = req.session;
+    const { tenantId } = req.tenantContext;
 
     const rawAfterVersion = req.query.afterVersion;
     const afterVersion =
diff --git a/packages/api/src/session-context.ts b/packages/api/src/session-context.ts
index 4e32cd2..9678b3d 100644
--- a/packages/api/src/session-context.ts
+++ b/packages/api/src/session-context.ts
@@ -7,10 +7,16 @@ export interface SessionContext {
   expiresAt: Date;
 }
 
+export interface TenantContext {
+  tenantId: string;
+  role: string;
+}
+
 declare global {
   namespace Express {
     interface Request {
       session?: SessionContext;
+      tenantContext?: TenantContext;
       requestContext: RequestContext;
     }
   }
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index aa04087..6e92224 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -1,5 +1,7 @@
 import { Route, Routes } from "react-router";
 import { RequireAuth } from "./components/RequireAuth";
+import { RootRedirect } from "./components/RootRedirect";
+import { TenantShell } from "./components/TenantShell";
 import { HomePage } from "./pages/HomePage";
 import { LoginPage } from "./pages/LoginPage";
 import { RegisterPage } from "./pages/RegisterPage";
@@ -10,9 +12,12 @@ export function App() {
     <Routes>
       <Route path="/login" element={<LoginPage />} />
       <Route path="/register" element={<RegisterPage />} />
+      <Route path="/" element={<RootRedirect />} />
       <Route element={<RequireAuth />}>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/settings" element={<SettingsPage />} />
+        <Route path="/:tenantSlug" element={<TenantShell />}>
+          <Route index element={<HomePage />} />
+          <Route path="settings" element={<SettingsPage />} />
+        </Route>
       </Route>
     </Routes>
   );
diff --git a/packages/web/src/api/fetch.ts b/packages/web/src/api/fetch.ts
index 765df2a..e85f24b 100644
--- a/packages/web/src/api/fetch.ts
+++ b/packages/web/src/api/fetch.ts
@@ -1,13 +1,22 @@
 import { generateTraceId, CORRELATION_HEADER } from "@heim/logging";
 
+let activeTenantSlug: string | undefined;
+
+export function setActiveTenantSlug(slug: string | undefined): void {
+  activeTenantSlug = slug;
+}
+
 /**
- * Thin wrapper around `fetch` that attaches a correlation ID to every request.
- * The ID is a W3C-compatible trace-id (32 hex chars) generated fresh per call.
+ * Thin wrapper around `fetch` that attaches a correlation ID and tenant slug
+ * to every request.
  */
 export function apiFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
   const headers = new Headers(init?.headers);
   if (!headers.has(CORRELATION_HEADER)) {
     headers.set(CORRELATION_HEADER, generateTraceId());
   }
+  if (activeTenantSlug) {
+    headers.set("x-tenant-slug", activeTenantSlug);
+  }
   return fetch(input, { ...init, headers });
 }
diff --git a/packages/web/src/components/RootRedirect.tsx b/packages/web/src/components/RootRedirect.tsx
new file mode 100644
index 0000000..3451675
--- /dev/null
+++ b/packages/web/src/components/RootRedirect.tsx
@@ -0,0 +1,14 @@
+import { Navigate } from "react-router";
+import { useAuth } from "../auth/auth-context";
+
+export function RootRedirect(): React.ReactElement {
+  const { status, session } = useAuth();
+
+  if (status === "loading") return <p>Loading…</p>;
+
+  if (status === "authenticated" && session?.tenant) {
+    return <Navigate to={`/${session.tenant.slug}/`} replace />;
+  }
+
+  return <Navigate to="/login" replace />;
+}
diff --git a/packages/web/src/components/TenantShell.tsx b/packages/web/src/components/TenantShell.tsx
new file mode 100644
index 0000000..995c89f
--- /dev/null
+++ b/packages/web/src/components/TenantShell.tsx
@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+import { Link, Outlet, useParams } from "react-router";
+import { useAuth } from "../auth/auth-context";
+import { setActiveTenantSlug } from "../api/fetch";
+import { useSyncBootstrap } from "../sync/use-sync-bootstrap";
+
+export function TenantShell(): React.ReactElement {
+  const { tenantSlug } = useParams<{ tenantSlug: string }>();
+  const { session } = useAuth();
+
+  useEffect(() => {
+    setActiveTenantSlug(tenantSlug);
+    return () => setActiveTenantSlug(undefined);
+  }, [tenantSlug]);
+
+  const bootstrapStatus = useSyncBootstrap(tenantSlug!);
+
+  if (bootstrapStatus === "denied") {
+    const defaultSlug = session?.tenant?.slug;
+    return (
+      <div style={{ padding: 32 }}>
+        <h1>Access Denied</h1>
+        <p>You don't have access to this workspace.</p>
+        {defaultSlug && <Link to={`/${defaultSlug}/`}>Go to your workspace</Link>}
+      </div>
+    );
+  }
+
+  if (bootstrapStatus === "loading") {
+    return <p>Loading…</p>;
+  }
+
+  if (bootstrapStatus === "error") {
+    return (
+      <div style={{ padding: 32 }}>
+        <h1>Something went wrong</h1>
+        <p>Failed to load workspace data. Please try refreshing.</p>
+      </div>
+    );
+  }
+
+  return <Outlet />;
+}
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
index e09cb16..5563dc6 100644
--- a/packages/web/src/main.tsx
+++ b/packages/web/src/main.tsx
@@ -4,15 +4,12 @@ import { BrowserRouter } from "react-router";
 import { App } from "./App";
 import "./index.css";
 import { AuthProvider } from "./auth/auth-context";
-import { SyncBootstrap } from "./sync/SyncBootstrap";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BrowserRouter>
       <AuthProvider>
-        <SyncBootstrap>
-          <App />
-        </SyncBootstrap>
+        <App />
       </AuthProvider>
     </BrowserRouter>
   </StrictMode>,
diff --git a/packages/web/src/pages/HomePage.tsx b/packages/web/src/pages/HomePage.tsx
index 2cc7276..eca11d6 100644
--- a/packages/web/src/pages/HomePage.tsx
+++ b/packages/web/src/pages/HomePage.tsx
@@ -29,7 +29,7 @@ export const HomePage = observer(function HomePage() {
         </p>
       )}
       <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
-        <Link to="/settings" style={{ padding: "8px 16px" }}>
+        <Link to="settings" style={{ padding: "8px 16px" }}>
           Settings
         </Link>
         <button onClick={() => void logout()} style={{ padding: "8px 16px", cursor: "pointer" }}>
diff --git a/packages/web/src/pages/LoginPage.tsx b/packages/web/src/pages/LoginPage.tsx
index e866801..d0b523f 100644
--- a/packages/web/src/pages/LoginPage.tsx
+++ b/packages/web/src/pages/LoginPage.tsx
@@ -11,7 +11,7 @@ const ERROR_MESSAGES: Record<string, string> = {
 };
 
 export function LoginPage() {
-  const { status } = useAuth();
+  const { status, session } = useAuth();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
@@ -20,10 +20,11 @@ export function LoginPage() {
   const errorMessage = errorCode ? (ERROR_MESSAGES[errorCode] ?? "Sign-in failed.") : null;
 
   useEffect(() => {
-    if (status === "authenticated") {
-      void navigate(returnTo, { replace: true });
+    if (status === "authenticated" && session?.tenant) {
+      const target = returnTo === "/" ? `/${session.tenant.slug}/` : returnTo;
+      void navigate(target, { replace: true });
     }
-  }, [status, navigate, returnTo]);
+  }, [status, session, navigate, returnTo]);
 
   const { buttonRef, error: gisError } = useGoogleSignIn(returnTo);
 
diff --git a/packages/web/src/pages/RegisterPage.tsx b/packages/web/src/pages/RegisterPage.tsx
index 1e9147c..326e490 100644
--- a/packages/web/src/pages/RegisterPage.tsx
+++ b/packages/web/src/pages/RegisterPage.tsx
@@ -18,7 +18,7 @@ const ERROR_MESSAGES: Record<string, string> = {
 type InviteStatus = "loading" | "valid" | "invalid";
 
 export function RegisterPage() {
-  const { status } = useAuth();
+  const { status, session } = useAuth();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [inviteStatus, setInviteStatus] = useState<InviteStatus>("loading");
@@ -29,9 +29,10 @@ export function RegisterPage() {
 
   useEffect(() => {
     if (status === "authenticated") {
-      void navigate("/", { replace: true });
+      const target = session?.tenant ? `/${session.tenant.slug}/` : "/";
+      void navigate(target, { replace: true });
     }
-  }, [status, navigate]);
+  }, [status, session, navigate]);
 
   useEffect(() => {
     if (!inviteCode) {
diff --git a/packages/web/src/pages/SettingsPage.tsx b/packages/web/src/pages/SettingsPage.tsx
index 0260ed0..da577e6 100644
--- a/packages/web/src/pages/SettingsPage.tsx
+++ b/packages/web/src/pages/SettingsPage.tsx
@@ -4,7 +4,7 @@ export function SettingsPage() {
   return (
     <div style={{ padding: 32 }}>
       <h1>Settings</h1>
-      <Link to="/">← Back</Link>
+      <Link to="..">← Back</Link>
     </div>
   );
 }
diff --git a/packages/web/src/sync/SyncBootstrap.tsx b/packages/web/src/sync/SyncBootstrap.tsx
deleted file mode 100644
index 283b454..0000000
--- a/packages/web/src/sync/SyncBootstrap.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useSyncBootstrap } from "./use-sync-bootstrap.ts";
-
-export function SyncBootstrap({ children }: { children: React.ReactNode }) {
-  useSyncBootstrap();
-  return children;
-}
diff --git a/packages/web/src/sync/api.ts b/packages/web/src/sync/api.ts
index 6ce0717..22810a1 100644
--- a/packages/web/src/sync/api.ts
+++ b/packages/web/src/sync/api.ts
@@ -17,7 +17,7 @@ export async function fetchBootstrap(): Promise<BootstrapResponse | null> {
     credentials: "include",
   });
 
-  if (res.status === 401) return null;
+  if (res.status === 401 || res.status === 403) return null;
   if (!res.ok) throw new Error(`bootstrap fetch failed: ${res.status}`);
 
   const data = (await res.json()) as BootstrapResponse;
diff --git a/packages/web/src/sync/sync-store.ts b/packages/web/src/sync/sync-store.ts
index f51093f..b007c85 100644
--- a/packages/web/src/sync/sync-store.ts
+++ b/packages/web/src/sync/sync-store.ts
@@ -12,6 +12,14 @@ export class SyncStore {
     makeAutoObservable(this, { users: false });
   }
 
+  reset(): void {
+    runInAction(() => {
+      this.users.clear();
+      this.cursor = "";
+      this.status = "idle";
+    });
+  }
+
   loadSnapshots(snapshots: AggregateSnapshot[], cursor: string): void {
     runInAction(() => {
       this.users.clear();
diff --git a/packages/web/src/sync/use-sync-bootstrap.ts b/packages/web/src/sync/use-sync-bootstrap.ts
index 2cac6e8..bd69179 100644
--- a/packages/web/src/sync/use-sync-bootstrap.ts
+++ b/packages/web/src/sync/use-sync-bootstrap.ts
@@ -1,18 +1,20 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { runInAction } from "mobx";
-import { useAuth } from "../auth/auth-context.tsx";
 import { fetchBootstrap } from "./api.ts";
 import { syncStore } from "./sync-store.ts";
 
-export function useSyncBootstrap(): void {
-  const { status } = useAuth();
+type BootstrapStatus = "loading" | "ready" | "denied" | "error";
+
+export function useSyncBootstrap(tenantSlug: string): BootstrapStatus {
+  const [bootstrapStatus, setBootstrapStatus] = useState<BootstrapStatus>("loading");
 
   useEffect(() => {
-    if (status !== "authenticated") return;
+    syncStore.reset();
 
     runInAction(() => {
       syncStore.status = "loading";
     });
+    setBootstrapStatus("loading");
 
     let cancelled = false;
 
@@ -21,6 +23,10 @@ export function useSyncBootstrap(): void {
         if (cancelled) return;
         if (res) {
           syncStore.loadSnapshots(res.snapshots, res.cursor);
+          setBootstrapStatus("ready");
+        } else {
+          // null means 401/403 — no access to this tenant
+          setBootstrapStatus("denied");
         }
       })
       .catch(() => {
@@ -28,10 +34,13 @@ export function useSyncBootstrap(): void {
         runInAction(() => {
           syncStore.status = "error";
         });
+        setBootstrapStatus("error");
       });
 
     return () => {
       cancelled = true;
     };
-  }, [status]);
+  }, [tenantSlug]);
+
+  return bootstrapStatus;
 }