diff --git a/app/(app)/docs/layout.tsx b/app/(app)/docs/layout.tsx
index c70ef0f48..9e84c0a4b 100644
--- a/app/(app)/docs/layout.tsx
+++ b/app/(app)/docs/layout.tsx
@@ -5,7 +5,7 @@ import { Aside } from "@/components/aside"
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <div className="flex w-full flex-col">
-      <div className="relative mx-auto flex w-full max-w-8xl flex-auto justify-center lg:px-8">
+      <div className="relative mx-auto flex w-full max-w-7xl 2xl:max-w-screen-2xl flex-auto justify-center lg:px-8">
         <div className="hidden lg:relative lg:block lg:flex-none">
           <div className="absolute inset-y-0 right-0 w-[50vw] bg-zinc-50 dark:hidden" />
           <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-zinc-800 dark:block" />
diff --git a/components/hero.tsx b/components/hero.tsx
index 760e1122e..f0b41d612 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -23,7 +23,7 @@ export function Hero() {
       </div>
       <svg
         aria-hidden="true"
-        className="absolute sm:block hidden inset-0 -z-10 h-full w-full stroke-gray-200 dark:stroke-gray-800 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
+        className="absolute lg:block hidden inset-0 -z-10 h-full w-full stroke-zinc-200 dark:stroke-zinc-800 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
       >
         <defs>
           <pattern
@@ -44,7 +44,7 @@ export function Hero() {
           strokeWidth={0}
         />
       </svg>
-      <div className="pt-12 pb-6 sm:py-16 md:py-20 lg:py-24 border-b">
+      <div className="pt-10 pb-6 sm:py-8 lg:py-10 xl:py-20 2xl:py-24 border-b">
         <Container>
           <Header>
             <Link
diff --git a/components/nav-item.tsx b/components/nav-item.tsx
index 5e1f0e544..1814040ed 100644
--- a/components/nav-item.tsx
+++ b/components/nav-item.tsx
@@ -23,12 +23,13 @@ interface NavLinkProps {
   isNextLink?: boolean
   children?: React.ReactNode
   target?: string
+  className?: string
 }
 
-const NavLink = ({ href, isActive, isNextLink, ...props }: NavLinkProps) => {
+const NavLink = ({ href, isActive, className, isNextLink, ...props }: NavLinkProps) => {
   const El = isNextLink ? NextLink : LinkPrimitive
   return (
-    <El href={href} className={navLinkStyles({ isActive })} {...props}>
+    <El href={href} className={navLinkStyles({ isActive, className })} {...props}>
       <>
         {props.children}
         {isActive && (
diff --git a/components/navbar.tsx b/components/navbar.tsx
index eade71d70..31c351903 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -49,7 +49,7 @@ export function Navbar() {
       <LayoutGroup id={`navigation-${id}`}>
         <div className="sticky xnw2 top-0 z-30 hidden overflow-hidden pb-0 lg:block">
           <nav className="border-b bg-bg/95 py-2 backdrop-blur-lg supports-[backdrop-filter]:bg-bg/60">
-            <div className="mx-auto max-w-screen-2xl px-4">
+            <div className="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-x-6">
                   <NavbarDropdown />
diff --git a/components/ui/container.tsx b/components/ui/container.tsx
index dfbba0a1e..b49e2745b 100644
--- a/components/ui/container.tsx
+++ b/components/ui/container.tsx
@@ -3,10 +3,10 @@ import React from "react"
 import { tv } from "tailwind-variants"
 
 const containerStyles = tv({
-  base: "mx-auto w-full max-w-7xl",
+  base: "mx-auto w-full max-w-7xl lg:max-w-screen-xl 2xl:max-w-screen-2xl",
   variants: {
     intent: {
-      constrained: "container sm:px-6 lg:px-8",
+      constrained: "sm:px-6 lg:px-8",
       "padded-content": "px-4 sm:px-6 lg:px-8"
     }
   },
diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx
index 569ab6d4f..82827ae76 100644
--- a/components/ui/navbar.tsx
+++ b/components/ui/navbar.tsx
@@ -115,11 +115,12 @@ const navStyles = tv({
       true: "sticky z-40 top-0"
     },
     intent: {
-      floating: "bg-tertiary max-w-[1680px] mx-auto shadow-sm border rounded-xl sm:px-4",
+      floating:
+        "bg-tertiary w-full max-w-7xl 2xl:max-w-screen-2xl mx-auto shadow-sm border rounded-xl sm:px-4",
       navbar: "bg-tertiary shadow-sm border-b sm:px-6",
       inset: [
         "bg-secondary mx-auto dark:bg-bg sm:px-6",
-        "[&>div]:max-w-[1680px] lg:[&>div]:flex [&>div]:items-center [&>div]:w-full [&>div]:mx-auto"
+        "2xl:[&>div]:max-w-screen-2xl lg:[&>div]:flex [&>div]:items-center [&>div]:w-full [&>div]:mx-auto"
       ]
     }
   }