diff --git a/assets/css/app.css b/assets/css/app.css
index d08ba93..4eaa579 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -105,6 +105,10 @@
 
 /* This file is for your main application CSS */
 
+html {
+  scrollbar-gutter: stable;
+}
+
 .skip-link {
   position: fixed;
   z-index: 100;
diff --git a/lib/who_need_help_web/components/core_components.ex b/lib/who_need_help_web/components/core_components.ex
index 56623eb..fcf520c 100644
--- a/lib/who_need_help_web/components/core_components.ex
+++ b/lib/who_need_help_web/components/core_components.ex
@@ -266,7 +266,7 @@ defmodule WhoNeedHelpWeb.CoreComponents do
 
     ~H"""
     <div class="fieldset mb-2">
-      <label for={@id}>
+      <label for={@id} class="block min-w-0 max-w-full">
         <input
           type="hidden"
           name={@name}
@@ -274,16 +274,17 @@ defmodule WhoNeedHelpWeb.CoreComponents do
           disabled={@rest[:disabled]}
           form={@rest[:form]}
         />
-        <span class="label">
+        <span class="label flex w-full min-w-0 max-w-full items-start justify-start gap-2 whitespace-normal">
           <input
             type="checkbox"
             id={@id}
             name={@name}
             value="true"
             checked={@checked}
-            class={@class || "checkbox checkbox-sm"}
+            class={[@class || "checkbox checkbox-sm", "shrink-0"]}
             {@rest}
-          />{@label}
+          />
+          <span class="min-w-0 break-words">{@label}</span>
         </span>
       </label>
       <.error :for={msg <- @errors}>{msg}</.error>
diff --git a/lib/who_need_help_web/components/layouts.ex b/lib/who_need_help_web/components/layouts.ex
index 8a5f105..da57400 100644
--- a/lib/who_need_help_web/components/layouts.ex
+++ b/lib/who_need_help_web/components/layouts.ex
@@ -31,6 +31,16 @@ defmodule WhoNeedHelpWeb.Layouts do
     default: nil,
     doc: "the current [scope](https://phoenix.hexdocs.pm/scopes.html)"
 
+  attr :page_width, :atom,
+    default: :wide,
+    values: [:wide, :form, :reading, :medium, :compact, :narrow, :auth],
+    doc: "the centralized content width used inside the stable application grid"
+
+  attr :page_align, :atom,
+    default: :start,
+    values: [:start, :center],
+    doc: "whether constrained content follows the application grid or is centered"
+
   slot :inner_block, required: true
 
   def app(assigns) do
@@ -136,8 +146,14 @@ defmodule WhoNeedHelpWeb.Layouts do
     </header>
 
     <main id="main-content" tabindex="-1" class="px-4 py-8 outline-none sm:px-6 lg:px-8">
-      <div class="mx-auto max-w-7xl space-y-4">
-        {render_slot(@inner_block)}
+      <div class="mx-auto w-full max-w-7xl">
+        <div class={[
+          "w-full space-y-4",
+          page_width_class(@page_width),
+          @page_align == :center && "mx-auto"
+        ]}>
+          {render_slot(@inner_block)}
+        </div>
       </div>
     </main>
 
@@ -159,6 +175,14 @@ defmodule WhoNeedHelpWeb.Layouts do
     """
   end
 
+  defp page_width_class(:wide), do: "max-w-none"
+  defp page_width_class(:form), do: "max-w-5xl"
+  defp page_width_class(:reading), do: "max-w-4xl"
+  defp page_width_class(:medium), do: "max-w-3xl"
+  defp page_width_class(:compact), do: "max-w-2xl"
+  defp page_width_class(:narrow), do: "max-w-xl"
+  defp page_width_class(:auth), do: "max-w-sm"
+
   attr :current_scope, :map, default: nil
   attr :link_class, :string, default: "btn btn-ghost btn-sm"
 
diff --git a/lib/who_need_help_web/controllers/content_removal_html/new.html.heex b/lib/who_need_help_web/controllers/content_removal_html/new.html.heex
index 528e2b7..bb3109b 100644
--- a/lib/who_need_help_web/controllers/content_removal_html/new.html.heex
+++ b/lib/who_need_help_web/controllers/content_removal_html/new.html.heex
@@ -1,5 +1,5 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-2xl">
+<Layouts.app flash={@flash} current_scope={@current_scope} page_width={:compact}>
+  <div>
     <div class="text-sm font-semibold text-error">{gettext("CONTENT REMOVAL")}</div>
     <h1 class="mt-2 text-4xl font-black">{gettext("Report illegal or harmful content")}</h1>
     <p class="mt-3 text-base-content/65">
diff --git a/lib/who_need_help_web/controllers/content_removal_html/received.html.heex b/lib/who_need_help_web/controllers/content_removal_html/received.html.heex
index e65923e..143505c 100644
--- a/lib/who_need_help_web/controllers/content_removal_html/received.html.heex
+++ b/lib/who_need_help_web/controllers/content_removal_html/received.html.heex
@@ -1,5 +1,10 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-xl text-center">
+<Layouts.app
+  flash={@flash}
+  current_scope={@current_scope}
+  page_width={:narrow}
+  page_align={:center}
+>
+  <div class="text-center">
     <div class="text-sm font-semibold text-success">{gettext("NOTICE RECEIVED")}</div>
     <h1 class="mt-2 text-4xl font-black">
       {gettext("Your reference is %{reference}", reference: @reference)}
diff --git a/lib/who_need_help_web/controllers/content_removal_html/show.html.heex b/lib/who_need_help_web/controllers/content_removal_html/show.html.heex
index 63ad3bf..dfccfcc 100644
--- a/lib/who_need_help_web/controllers/content_removal_html/show.html.heex
+++ b/lib/who_need_help_web/controllers/content_removal_html/show.html.heex
@@ -1,5 +1,5 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-2xl">
+<Layouts.app flash={@flash} current_scope={@current_scope} page_width={:compact}>
+  <div>
     <div class="flex flex-wrap items-center gap-2">
       <span class="badge badge-outline">{@notice.reference}</span>
       <span class={[
diff --git a/lib/who_need_help_web/controllers/content_removal_html/take_it_down.html.heex b/lib/who_need_help_web/controllers/content_removal_html/take_it_down.html.heex
index f05058f..cce6fa7 100644
--- a/lib/who_need_help_web/controllers/content_removal_html/take_it_down.html.heex
+++ b/lib/who_need_help_web/controllers/content_removal_html/take_it_down.html.heex
@@ -1,5 +1,5 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-2xl">
+<Layouts.app flash={@flash} current_scope={@current_scope} page_width={:compact}>
+  <div>
     <div class="text-sm font-semibold text-error">{gettext("TAKE IT DOWN")}</div>
     <h1 class="mt-2 text-4xl font-black">
       {gettext("Request removal of intimate visual material")}
diff --git a/lib/who_need_help_web/controllers/feedback_html/show.html.heex b/lib/who_need_help_web/controllers/feedback_html/show.html.heex
index 1ed2532..6679cbf 100644
--- a/lib/who_need_help_web/controllers/feedback_html/show.html.heex
+++ b/lib/who_need_help_web/controllers/feedback_html/show.html.heex
@@ -1,5 +1,5 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-3xl">
+<Layouts.app flash={@flash} current_scope={@current_scope} page_width={:medium}>
+  <div>
     <div class="text-sm font-semibold text-success">OPENAI BUILD WEEK</div>
     <h1 class="mt-2 text-4xl font-black">{gettext("Build feedback")}</h1>
     <p class="mt-4 text-base-content/65">
diff --git a/lib/who_need_help_web/controllers/google_auth_html/complete.html.heex b/lib/who_need_help_web/controllers/google_auth_html/complete.html.heex
index 9410359..77ae194 100644
--- a/lib/who_need_help_web/controllers/google_auth_html/complete.html.heex
+++ b/lib/who_need_help_web/controllers/google_auth_html/complete.html.heex
@@ -1,5 +1,10 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-md space-y-5">
+<Layouts.app
+  flash={@flash}
+  current_scope={@current_scope}
+  page_width={:narrow}
+  page_align={:center}
+>
+  <div class="space-y-5">
     <div class="text-center">
       <.header>
         {gettext("Continue with Google")}
diff --git a/lib/who_need_help_web/controllers/page_html/privacy.html.heex b/lib/who_need_help_web/controllers/page_html/privacy.html.heex
index a094463..0e5a7b9 100644
--- a/lib/who_need_help_web/controllers/page_html/privacy.html.heex
+++ b/lib/who_need_help_web/controllers/page_html/privacy.html.heex
@@ -1,5 +1,5 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <article class="mx-auto max-w-4xl">
+<Layouts.app flash={@flash} current_scope={@current_scope} page_width={:reading}>
+  <article>
     <div class="text-sm font-semibold text-brand">WHO NEED HELP</div>
     <h1 class="mt-2 text-4xl font-black">Privacy Policy</h1>
     <p class="mt-3 text-sm text-base-content/60">Effective: 21 July 2026</p>
diff --git a/lib/who_need_help_web/controllers/page_html/safety.html.heex b/lib/who_need_help_web/controllers/page_html/safety.html.heex
index 7ada2be..3d9f9bd 100644
--- a/lib/who_need_help_web/controllers/page_html/safety.html.heex
+++ b/lib/who_need_help_web/controllers/page_html/safety.html.heex
@@ -1,5 +1,5 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <article class="mx-auto max-w-4xl">
+<Layouts.app flash={@flash} current_scope={@current_scope} page_width={:reading}>
+  <article>
     <div class="text-sm font-semibold text-warning">
       {gettext("READ BEFORE USING THE SERVICE")}
     </div>
diff --git a/lib/who_need_help_web/controllers/page_html/terms.html.heex b/lib/who_need_help_web/controllers/page_html/terms.html.heex
index 0508101..9914c1f 100644
--- a/lib/who_need_help_web/controllers/page_html/terms.html.heex
+++ b/lib/who_need_help_web/controllers/page_html/terms.html.heex
@@ -1,5 +1,5 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <article class="mx-auto max-w-4xl">
+<Layouts.app flash={@flash} current_scope={@current_scope} page_width={:reading}>
+  <article>
     <div class="text-sm font-semibold text-brand">WHO NEED HELP</div>
     <h1 class="mt-2 text-4xl font-black">Terms of Service</h1>
     <p class="mt-3 text-sm text-base-content/60">Effective: 21 July 2026</p>
diff --git a/lib/who_need_help_web/controllers/support_html/delete_account.html.heex b/lib/who_need_help_web/controllers/support_html/delete_account.html.heex
index 58db3d8..ab1e2f3 100644
--- a/lib/who_need_help_web/controllers/support_html/delete_account.html.heex
+++ b/lib/who_need_help_web/controllers/support_html/delete_account.html.heex
@@ -1,5 +1,5 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-2xl">
+<Layouts.app flash={@flash} current_scope={@current_scope} page_width={:compact}>
+  <div>
     <div class="text-sm font-semibold text-error">{gettext("ACCOUNT AND DATA")}</div>
     <h1 class="mt-2 text-4xl font-black">{gettext("Request account deletion")}</h1>
     <p class="mt-3 text-base-content/65">
diff --git a/lib/who_need_help_web/controllers/support_html/index.html.heex b/lib/who_need_help_web/controllers/support_html/index.html.heex
index de6f9c1..47fa890 100644
--- a/lib/who_need_help_web/controllers/support_html/index.html.heex
+++ b/lib/who_need_help_web/controllers/support_html/index.html.heex
@@ -1,5 +1,5 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-4xl">
+<Layouts.app flash={@flash} current_scope={@current_scope} page_width={:reading}>
+  <div>
     <div class="flex flex-wrap items-center justify-between gap-3">
       <div>
         <div class="text-sm font-semibold text-primary">{gettext("SUPPORT")}</div>
diff --git a/lib/who_need_help_web/controllers/support_html/new.html.heex b/lib/who_need_help_web/controllers/support_html/new.html.heex
index 93ec2ab..8db4031 100644
--- a/lib/who_need_help_web/controllers/support_html/new.html.heex
+++ b/lib/who_need_help_web/controllers/support_html/new.html.heex
@@ -1,5 +1,5 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-2xl">
+<Layouts.app flash={@flash} current_scope={@current_scope} page_width={:compact}>
+  <div>
     <div class="text-sm font-semibold text-primary">{gettext("SUPPORT")}</div>
     <h1 class="mt-2 text-4xl font-black">{gettext("Contact Who Need Help")}</h1>
     <p class="mt-3 text-base-content/65">
diff --git a/lib/who_need_help_web/controllers/support_html/received.html.heex b/lib/who_need_help_web/controllers/support_html/received.html.heex
index a6f3b22..7418261 100644
--- a/lib/who_need_help_web/controllers/support_html/received.html.heex
+++ b/lib/who_need_help_web/controllers/support_html/received.html.heex
@@ -1,5 +1,10 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-xl text-center">
+<Layouts.app
+  flash={@flash}
+  current_scope={@current_scope}
+  page_width={:narrow}
+  page_align={:center}
+>
+  <div class="text-center">
     <div class="text-sm font-semibold text-success">{gettext("REQUEST RECEIVED")}</div>
     <h1 class="mt-2 text-4xl font-black">{gettext("Check your email")}</h1>
     <p class="mt-4 text-base-content/65">
diff --git a/lib/who_need_help_web/controllers/support_html/show.html.heex b/lib/who_need_help_web/controllers/support_html/show.html.heex
index 46dbf43..bc93185 100644
--- a/lib/who_need_help_web/controllers/support_html/show.html.heex
+++ b/lib/who_need_help_web/controllers/support_html/show.html.heex
@@ -1,5 +1,5 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-2xl">
+<Layouts.app flash={@flash} current_scope={@current_scope} page_width={:compact}>
+  <div>
     <div class="flex flex-wrap items-center gap-2">
       <span class="badge badge-outline">{@request.reference}</span>
       <span class="badge badge-primary">{status_label(@request.status)}</span>
diff --git a/lib/who_need_help_web/controllers/user_registration_html/new.html.heex b/lib/who_need_help_web/controllers/user_registration_html/new.html.heex
index 0852920..1f6f794 100644
--- a/lib/who_need_help_web/controllers/user_registration_html/new.html.heex
+++ b/lib/who_need_help_web/controllers/user_registration_html/new.html.heex
@@ -1,5 +1,10 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-sm space-y-5">
+<Layouts.app
+  flash={@flash}
+  current_scope={@current_scope}
+  page_width={:auth}
+  page_align={:center}
+>
+  <div class="space-y-5">
     <div class="text-center">
       <.header>
         {gettext("Register for an account")}
diff --git a/lib/who_need_help_web/controllers/user_registration_html/sent.html.heex b/lib/who_need_help_web/controllers/user_registration_html/sent.html.heex
index 77e8030..396286b 100644
--- a/lib/who_need_help_web/controllers/user_registration_html/sent.html.heex
+++ b/lib/who_need_help_web/controllers/user_registration_html/sent.html.heex
@@ -1,5 +1,10 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-xl space-y-6">
+<Layouts.app
+  flash={@flash}
+  current_scope={@current_scope}
+  page_width={:narrow}
+  page_align={:center}
+>
+  <div class="space-y-6">
     <div class="text-center">
       <.header>
         {if @email_flow == "register",
diff --git a/lib/who_need_help_web/controllers/user_session_html/new.html.heex b/lib/who_need_help_web/controllers/user_session_html/new.html.heex
index fed6b33..64a428d 100644
--- a/lib/who_need_help_web/controllers/user_session_html/new.html.heex
+++ b/lib/who_need_help_web/controllers/user_session_html/new.html.heex
@@ -1,5 +1,10 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-sm space-y-4">
+<Layouts.app
+  flash={@flash}
+  current_scope={@current_scope}
+  page_width={:auth}
+  page_align={:center}
+>
+  <div class="space-y-4">
     <div class="text-center">
       <.header>
         <p>{gettext("Log in")}</p>
diff --git a/lib/who_need_help_web/controllers/user_settings_html/confirm_email.html.heex b/lib/who_need_help_web/controllers/user_settings_html/confirm_email.html.heex
index 9a26ac0..3a9bfa2 100644
--- a/lib/who_need_help_web/controllers/user_settings_html/confirm_email.html.heex
+++ b/lib/who_need_help_web/controllers/user_settings_html/confirm_email.html.heex
@@ -1,5 +1,10 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
-  <div class="mx-auto max-w-md text-center">
+<Layouts.app
+  flash={@flash}
+  current_scope={@current_scope}
+  page_width={:narrow}
+  page_align={:center}
+>
+  <div class="text-center">
     <.header>
       {gettext("Confirm email change")}
       <:subtitle>{gettext("Confirm the new email address for your account.")}</:subtitle>
diff --git a/lib/who_need_help_web/controllers/user_settings_html/edit.html.heex b/lib/who_need_help_web/controllers/user_settings_html/edit.html.heex
index cbebfcf..3493f6b 100644
--- a/lib/who_need_help_web/controllers/user_settings_html/edit.html.heex
+++ b/lib/who_need_help_web/controllers/user_settings_html/edit.html.heex
@@ -1,4 +1,4 @@
-<Layouts.app flash={@flash} current_scope={@current_scope}>
+<Layouts.app flash={@flash} current_scope={@current_scope} page_width={:reading}>
   <div class="text-center">
     <.header>
       {gettext("Account Settings")}
diff --git a/lib/who_need_help_web/live/activity_live/new.ex b/lib/who_need_help_web/live/activity_live/new.ex
index 182c141..31c6ef0 100644
--- a/lib/who_need_help_web/live/activity_live/new.ex
+++ b/lib/who_need_help_web/live/activity_live/new.ex
@@ -112,8 +112,8 @@ defmodule WhoNeedHelpWeb.ActivityLive.New do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} current_scope={@current_scope}>
-      <div class="mx-auto max-w-3xl">
+    <Layouts.app flash={@flash} current_scope={@current_scope} page_width={:form}>
+      <div>
         <.link navigate={~p"/activities"} class="btn btn-ghost btn-sm mb-4">
           {gettext("← Back to activities")}
         </.link>
diff --git a/lib/who_need_help_web/live/leaderboard_live.ex b/lib/who_need_help_web/live/leaderboard_live.ex
index b8f37c2..664918d 100644
--- a/lib/who_need_help_web/live/leaderboard_live.ex
+++ b/lib/who_need_help_web/live/leaderboard_live.ex
@@ -32,11 +32,11 @@ defmodule WhoNeedHelpWeb.LeaderboardLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} current_scope={@current_scope}>
+    <Layouts.app flash={@flash} current_scope={@current_scope} page_width={:reading}>
       <.link navigate={~p"/requests"} class="btn btn-ghost btn-sm">
         {gettext("← Requests")}
       </.link>
-      <div class="mt-5 max-w-4xl">
+      <div class="mt-5">
         <div class="text-sm font-semibold text-success">{gettext("COMMUNITY TRUST")}</div>
         <h1 class="mt-1 text-4xl font-black tracking-tight">
           {gettext("Helpers leaderboard")}
diff --git a/lib/who_need_help_web/live/profile_live.ex b/lib/who_need_help_web/live/profile_live.ex
index 547233f..4002d5d 100644
--- a/lib/who_need_help_web/live/profile_live.ex
+++ b/lib/who_need_help_web/live/profile_live.ex
@@ -137,8 +137,8 @@ defmodule WhoNeedHelpWeb.ProfileLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} current_scope={@current_scope}>
-      <div class="mx-auto max-w-4xl">
+    <Layouts.app flash={@flash} current_scope={@current_scope} page_width={:reading}>
+      <div>
         <h1 class="text-4xl font-black">{gettext("Your profile")}</h1>
         <div class="mt-6 grid gap-6 md:grid-cols-[1fr_.75fr]">
           <.form
diff --git a/lib/who_need_help_web/live/request_live/new.ex b/lib/who_need_help_web/live/request_live/new.ex
index 5a162ea..1e6827c 100644
--- a/lib/who_need_help_web/live/request_live/new.ex
+++ b/lib/who_need_help_web/live/request_live/new.ex
@@ -182,8 +182,8 @@ defmodule WhoNeedHelpWeb.RequestLive.New do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} current_scope={@current_scope}>
-      <div class="mx-auto max-w-3xl">
+    <Layouts.app flash={@flash} current_scope={@current_scope} page_width={:form}>
+      <div>
         <.link navigate={~p"/requests"} class="btn btn-ghost btn-sm mb-4">
           {gettext("← Back to requests")}
         </.link>
diff --git a/test/who_need_help_web/live/mutual_aid_live_test.exs b/test/who_need_help_web/live/mutual_aid_live_test.exs
index af43b06..8d3e1af 100644
--- a/test/who_need_help_web/live/mutual_aid_live_test.exs
+++ b/test/who_need_help_web/live/mutual_aid_live_test.exs
@@ -270,6 +270,11 @@ defmodule WhoNeedHelpWeb.MutualAidLiveTest do
   test "new request form uses separate local date and time controls", %{conn: conn} do
     {:ok, view, _html} = live(conn, ~p"/requests/new")
 
+    assert has_element?(
+             view,
+             "#main-content > div.max-w-7xl > div.max-w-5xl:not(.mx-auto)"
+           )
+
     assert has_element?(view, "#help_request_expires_at[type='hidden']")
     assert has_element?(view, "#help_request_expires_at-date[type='date']")
     assert has_element?(view, "#help_request_expires_at-time[type='time']")