diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c16338e..42e30b7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -52,7 +52,7 @@ const RootLayout = ({
                             background: "var(--background-gradient)",
                         }}
                     >
-                        <div className="px-3 sm:px-7 max-w-[90rem] mx-auto flex flex-col transition-all">
+                        <div className="px-3 sm:px-7 max-w-screen-2xl mx-auto flex flex-col transition-all">
                             <Navbar />
                             <div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5">
                                 <div className="relative hidden xs:flex">
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
index 5eae321..d358312 100644
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@@ -9,7 +9,7 @@ const Navbar = (): ReactElement => {
     const pages: DocsContentMetadata[] = getDocsContent();
     return (
         <nav className="fixed left-0 inset-x-0 bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b z-50">
-            <div className="px-3 sm:px-7 max-w-[90rem] mx-auto py-4 flex justify-between items-center transition-all transform-gpu">
+            <div className="px-3 sm:px-7 max-w-screen-2xl mx-auto py-4 flex justify-between items-center transition-all transform-gpu">
                 {/* Branding */}
                 <Link
                     className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none"