diff --git a/app/layout.tsx b/app/layout.tsx
index b2a3746..6302c81 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -146,7 +146,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       <body
         className={`${inter.variable} ${bricolageGrotesque.variable} ${spaceGrotesk.variable}`}
       >
-        <div className="min-h-screen flex flex-col">{children}</div>
+        <div className="mx-auto flex min-h-screen w-full max-w-[1920px] flex-col">
+          {children}
+        </div>
       </body>
     </html>
   );
diff --git a/tests/unit/Layout.test.jsx b/tests/unit/Layout.test.jsx
index a0f46f4..607a77e 100644
--- a/tests/unit/Layout.test.jsx
+++ b/tests/unit/Layout.test.jsx
@@ -72,6 +72,17 @@ describe("RootLayout", () => {
     expect(container).toBeTruthy();
   });
 
+  test("caps the page shell at 1920px", () => {
+    const tree = RootLayout({ children: <div>Test content</div> });
+    const container = findDescendant(
+      tree,
+      (n) => n.type === "div" && n.props?.className?.includes("min-h-screen"),
+    );
+    expect(container.props.className).toContain("max-w-[1920px]");
+    expect(container.props.className).toContain("mx-auto");
+    expect(container.props.className).toContain("w-full");
+  });
+
   test("renders children directly inside the flex container (no <main> at root)", () => {
     const testContent = "This is test content";
     const tree = RootLayout({ children: <div>{testContent}</div> });
