diff --git a/web/src/components/app-shell.tsx b/web/src/components/app-shell.tsx
index c748ba01..5a563b5a 100644
--- a/web/src/components/app-shell.tsx
+++ b/web/src/components/app-shell.tsx
@@ -109,8 +109,9 @@ export function AppShell({ children }: { children: ReactNode }) {
 				</header>
 
 				<main className="flex-1">
-					{/* pb-24 leaves room for the fixed bottom nav on mobile. */}
-					<div className="mx-auto max-w-[1700px] p-6 pb-24 sm:p-10 sm:pb-10">
+					{/* Mobile: a 16px side gutter (matching the top bar) so content isn't overly narrow;
+					    pb-24 leaves room for the fixed bottom nav. Roomier padding from sm up. */}
+					<div className="mx-auto max-w-[1700px] px-4 py-6 pb-24 sm:p-10 sm:pb-10">
 						{children}
 					</div>
 				</main>
diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
index 0a8c44e3..c47cfa2b 100644
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -33,7 +33,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<div
 		ref={ref}
-		className={cn("flex flex-col space-y-1.5 p-6", className)}
+		className={cn("flex flex-col space-y-1.5 p-4 sm:p-6", className)}
 		{...props}
 	/>
 ));
@@ -67,7 +67,7 @@ const CardContent = React.forwardRef<
 	HTMLDivElement,
 	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+	<div ref={ref} className={cn("p-4 pt-0 sm:p-6 sm:pt-0", className)} {...props} />
 ));
 CardContent.displayName = "CardContent";
 
@@ -77,7 +77,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<div
 		ref={ref}
-		className={cn("flex items-center p-6 pt-0", className)}
+		className={cn("flex items-center p-4 pt-0 sm:p-6 sm:pt-0", className)}
 		{...props}
 	/>
 ));