diff --git a/src/app/(dashboard)/settings/page.tsx b/src/app/(dashboard)/settings/page.tsx
index ff4f6f2..7f607b3 100644
--- a/src/app/(dashboard)/settings/page.tsx
+++ b/src/app/(dashboard)/settings/page.tsx
@@ -62,7 +62,7 @@ export default function SettingsPage() {
   };
 
   return (
-    <div className="mx-auto max-w-[1040px]">
+    <div>
       <div>
         <h1 className="text-2xl font-bold tracking-tight text-foreground">
           Settings
@@ -73,7 +73,7 @@ export default function SettingsPage() {
         </p>
       </div>
 
-      <div className="mt-6 grid gap-6 lg:grid-cols-[236px_1fr] lg:items-start">
+      <div className="mt-6 grid gap-6 lg:grid-cols-[236px_minmax(0,1fr)] lg:items-start">
         <SettingsRail active={section} onSelect={go} hints={hints} />
         <div className="min-w-0">{panel[section]}</div>
       </div>
diff --git a/src/components/settings/appearance-panel.tsx b/src/components/settings/appearance-panel.tsx
index 693608d..0a83bd7 100644
--- a/src/components/settings/appearance-panel.tsx
+++ b/src/components/settings/appearance-panel.tsx
@@ -22,7 +22,7 @@ import { SettingsPanelHead } from "./settings-panel-head";
 export function AppearancePanel() {
   const { theme, setTheme, mode, setMode } = useTheme();
   return (
-    <section className="animate-in fade-in-50 duration-200">
+    <section className="max-w-3xl animate-in fade-in-50 duration-200">
       <SettingsPanelHead
         title="Appearance"
         description="Set the mode and accent colour used across the app. Saved to this device — try it, it changes live."
diff --git a/src/components/settings/deals-settings.tsx b/src/components/settings/deals-settings.tsx
index 0ae6842..1e8d1a4 100644
--- a/src/components/settings/deals-settings.tsx
+++ b/src/components/settings/deals-settings.tsx
@@ -68,7 +68,7 @@ export function DealsSettings() {
   }
 
   return (
-    <section className="animate-in fade-in-50 duration-200">
+    <section className="max-w-2xl animate-in fade-in-50 duration-200">
       <SettingsPanelHead
         title="Deals & currency"
         description="The currency used for new deals and for pipeline and dashboard totals."
diff --git a/src/components/settings/fields-and-tags-panel.tsx b/src/components/settings/fields-and-tags-panel.tsx
index a4d92f7..3e7f276 100644
--- a/src/components/settings/fields-and-tags-panel.tsx
+++ b/src/components/settings/fields-and-tags-panel.tsx
@@ -17,7 +17,7 @@ export function FieldsAndTagsPanel() {
   const canEditSettings = useCan('edit-settings');
 
   return (
-    <section className="animate-in fade-in-50 space-y-4 duration-200">
+    <section className="max-w-3xl animate-in fade-in-50 space-y-4 duration-200">
       <SettingsPanelHead
         title="Fields & tags"
         description="Two ways to organize contacts: colour-coded tags for quick grouping, and custom fields for structured data."
diff --git a/src/components/settings/profile-form.tsx b/src/components/settings/profile-form.tsx
index 20593f8..c6f0eae 100644
--- a/src/components/settings/profile-form.tsx
+++ b/src/components/settings/profile-form.tsx
@@ -205,7 +205,7 @@ export function ProfileForm() {
     : '—';
 
   return (
-    <section className="animate-in fade-in-50 duration-200">
+    <section className="max-w-2xl animate-in fade-in-50 duration-200">
       <SettingsPanelHead
         title="Your profile"
         description="How you show up across the app. Your avatar and name appear in the header, sidebar, and anywhere your teammates see you."
diff --git a/src/components/settings/security-panel.tsx b/src/components/settings/security-panel.tsx
index 736a149..948274a 100644
--- a/src/components/settings/security-panel.tsx
+++ b/src/components/settings/security-panel.tsx
@@ -10,7 +10,7 @@ import { SettingsPanelHead } from './settings-panel-head';
  */
 export function SecurityPanel() {
   return (
-    <section className="animate-in fade-in-50 duration-200">
+    <section className="max-w-2xl animate-in fade-in-50 duration-200">
       <SettingsPanelHead
         title="Login & security"
         description="Change your password and sign out of your devices. These keep your account safe."
diff --git a/src/components/settings/settings-overview.tsx b/src/components/settings/settings-overview.tsx
index 73b5f5d..fff559a 100644
--- a/src/components/settings/settings-overview.tsx
+++ b/src/components/settings/settings-overview.tsx
@@ -248,7 +248,7 @@ export function SettingsOverview({
       </Card>
 
       {/* Status tiles */}
-      <div className="mt-4 grid gap-3 sm:grid-cols-2">
+      <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
         {tiles.map(({ section, loading, subtitle }) => {
           const meta = SECTION_META[section];
           const Icon = meta.icon;
diff --git a/src/components/settings/template-manager.tsx b/src/components/settings/template-manager.tsx
index f36bb37..0d6ab27 100644
--- a/src/components/settings/template-manager.tsx
+++ b/src/components/settings/template-manager.tsx
@@ -515,7 +515,7 @@ export function TemplateManager() {
           </CardContent>
         </Card>
       ) : (
-        <div className="grid gap-3">
+        <div className="grid gap-3 xl:grid-cols-2">
           {templates.map((template) => {
             const statusKey = template.status || 'DRAFT';
             const status = templateStatusConfig[statusKey];