diff --git a/ui/src/components/AppShell.tsx b/ui/src/components/AppShell.tsx
index a8fc0f4b..cda3189f 100644
--- a/ui/src/components/AppShell.tsx
+++ b/ui/src/components/AppShell.tsx
@@ -4,21 +4,30 @@ import type { ReactNode } from "react";
 
 import type { SessionUser } from "@/lib/api";
 import { AppSidebar } from "@/components/AppSidebar";
+import { cn } from "@/lib/utils";
 
 interface AppShellProps {
   user: SessionUser;
   title: string;
   description?: string;
   backTo?: { to: string; label: string };
+  className?: string;
   children: ReactNode;
 }
 
-export function AppShell({ user, title, description, backTo, children }: AppShellProps) {
+export function AppShell({
+  user,
+  title,
+  description,
+  backTo,
+  className,
+  children,
+}: AppShellProps) {
   return (
     <div className="flex h-svh overflow-hidden bg-background text-foreground">
       <AppSidebar user={user} />
       <main className="flex-1 overflow-y-auto">
-        <div className="mx-auto max-w-3xl px-4 pt-14 pb-6 sm:px-8 sm:py-10">
+        <div className={cn("mx-auto max-w-3xl px-4 pt-14 pb-6 sm:px-8 sm:py-10", className)}>
           {backTo && (
             <Link
               to={backTo.to}
diff --git a/ui/src/routes/usage.tsx b/ui/src/routes/usage.tsx
index eb5333eb..5bc11be0 100644
--- a/ui/src/routes/usage.tsx
+++ b/ui/src/routes/usage.tsx
@@ -60,7 +60,7 @@ function UsagePage() {
   if (!session.data) return <Navigate to="/login" />
 
   return (
-    <AppShell user={session.data} title="Usage">
+    <AppShell user={session.data} title="Usage" className="max-w-5xl">
       <SettingsSection
         title="Agent leaderboard"
         description="Ranked by agent lines of code, then PRs opened and agent runs."