diff --git a/apps/site/components/Releases/MinorReleasesTable/index.module.css b/apps/site/components/Releases/MinorReleasesTable/index.module.css
index 0f1d714fc3842..9fc65821e7ff4 100644
--- a/apps/site/components/Releases/MinorReleasesTable/index.module.css
+++ b/apps/site/components/Releases/MinorReleasesTable/index.module.css
@@ -20,12 +20,12 @@
     overflow-y-auto;
 
   table {
-    @apply xs:border-t-0
+    @apply ml:border-t-0
       border-t;
   }
 
   th {
-    @apply xs:border-t
+    @apply ml:border-t
       border-neutral-200
       dark:border-neutral-800;
   }
diff --git a/apps/site/components/withBlogCategories.tsx b/apps/site/components/withBlogCategories.tsx
index 18be83b343e07..e4b58cebf793c 100644
--- a/apps/site/components/withBlogCategories.tsx
+++ b/apps/site/components/withBlogCategories.tsx
@@ -31,7 +31,7 @@ const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
         tabs={categories}
         activeTab={blogData.category}
       >
-        <div className="max-xs:grid-cols-[1fr] grid grid-cols-[repeat(auto-fill,minmax(--spacing(80),1fr))] [grid-gap:--spacing(12)_--spacing(8)]">
+        <div className="max-ml:grid-cols-[1fr] grid grid-cols-[repeat(auto-fill,minmax(--spacing(80),1fr))] [grid-gap:--spacing(12)_--spacing(8)]">
           {blogData.posts.map(post => (
             <BlogPostCard
               key={post.slug}
diff --git a/apps/site/components/withBlogCrossLinks.tsx b/apps/site/components/withBlogCrossLinks.tsx
index 5875ab7581649..468100521dddc 100644
--- a/apps/site/components/withBlogCrossLinks.tsx
+++ b/apps/site/components/withBlogCrossLinks.tsx
@@ -28,7 +28,7 @@ const WithBlogCrossLinks: FC = () => {
   ];
 
   return (
-    <div className="max-xs:grid-cols-1 mt-4 grid w-full grid-cols-2 gap-4">
+    <div className="max-ml:grid-cols-1 mt-4 grid w-full grid-cols-2 gap-4">
       {(previousCrossLink && (
         <CrossLink
           type="previous"
diff --git a/apps/site/layouts/layouts.module.css b/apps/site/layouts/layouts.module.css
index 2ffb28d5d5d1a..770ea8c62ef06 100644
--- a/apps/site/layouts/layouts.module.css
+++ b/apps/site/layouts/layouts.module.css
@@ -53,7 +53,7 @@
         }
 
         small {
-          @apply max-xs:text-xs
+          @apply max-ml:text-xs
             text-center
             text-sm
             text-neutral-600
@@ -97,8 +97,8 @@
 .downloadLayout {
   @apply bg-gradient-subtle
     dark:bg-gradient-subtle-dark
-    max-xs:bg-none
-    max-xs:dark:bg-none
+    max-ml:bg-none
+    max-ml:dark:bg-none
     flex
     w-full
     justify-center;
@@ -136,22 +136,22 @@
 
 .contentLayout {
   @apply max-w-8xl
-    max-xs:m-0
-    max-xs:block
+    max-ml:m-0
+    max-ml:block
     mx-auto
     grid
     w-full
     grid-rows-[1fr]
-    sm:grid-cols-[1fr_theme(spacing.52)]
-    xl:grid-cols-[1fr_theme(spacing.80)];
+    sm:grid-cols-[1fr_--spacing(52)]
+    xl:grid-cols-[1fr_--spacing(80)];
 
   > *:nth-child(1) {
     @apply bg-gradient-subtle
       dark:bg-gradient-subtle-dark
-      max-xs:border-l-0
-      max-xs:bg-none
-      max-xs:pb-4
-      max-xs:dark:bg-none
+      max-ml:border-l-0
+      max-ml:bg-none
+      max-ml:pb-4
+      max-ml:dark:bg-none
       flex
       w-full
       justify-center
@@ -166,15 +166,15 @@
     main {
       @apply max-w-[660px]
         gap-4
-        [overflow-wrap:_anywhere];
+        wrap-anywhere;
     }
   }
 
   > *:nth-child(2) {
-    @apply xs:mt-0
-      xs:max-w-xs
-      xs:border-l
-      xs:border-t-0
+    @apply ml:mt-0
+      ml:max-w-xs
+      ml:border-l
+      ml:border-t-0
       mt-8
       border-t;
   }
diff --git a/apps/site/next.dynamic.constants.mjs b/apps/site/next.dynamic.constants.mjs
index 0aa3afbbb071e..e2baca642891c 100644
--- a/apps/site/next.dynamic.constants.mjs
+++ b/apps/site/next.dynamic.constants.mjs
@@ -74,6 +74,5 @@ export const PAGE_VIEWPORT = {
     },
   ],
   width: 'device-width',
-  initialScale: 1,
-  maximumScale: 2,
+  initialScale: '1.0',
 };
diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx
index 4e48630d02bad..e2552634be402 100644
--- a/apps/site/pages/en/index.mdx
+++ b/apps/site/pages/en/index.mdx
@@ -27,7 +27,7 @@ layout: home
         <small className="!text-xs">for EOL Node.js versions</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
       <span className="text-center text-sm! text-neutral-800 dark:text-neutral-600 text-balance">Node.js is proudly supported by the partners above <Link href="/about/partners">and more</Link>.</span>
diff --git a/apps/site/pages/fr/index.mdx b/apps/site/pages/fr/index.mdx
index 3e805ea1b4f58..78c669832a43f 100644
--- a/apps/site/pages/fr/index.mdx
+++ b/apps/site/pages/fr/index.mdx
@@ -27,7 +27,7 @@ layout: home
         <small className="!text-xs">pour les versions Node.js en fin de vie</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 
diff --git a/apps/site/pages/id/index.mdx b/apps/site/pages/id/index.mdx
index 8bd969571652d..79f499ab020f8 100644
--- a/apps/site/pages/id/index.mdx
+++ b/apps/site/pages/id/index.mdx
@@ -29,7 +29,7 @@ layout: home
         <small className="!text-xs">untuk versi Node.js yang telah mencapai EOL</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 
diff --git a/apps/site/pages/ja/index.mdx b/apps/site/pages/ja/index.mdx
index 757edee846a20..5b3b61e1c6dc2 100644
--- a/apps/site/pages/ja/index.mdx
+++ b/apps/site/pages/ja/index.mdx
@@ -27,7 +27,7 @@ layout: home
         <small className="!text-xs">EOLバージョン用</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 
diff --git a/apps/site/pages/pt-br/index.mdx b/apps/site/pages/pt-br/index.mdx
index 9c6f34ecd1278..fd684d2cf2dce 100644
--- a/apps/site/pages/pt-br/index.mdx
+++ b/apps/site/pages/pt-br/index.mdx
@@ -27,7 +27,7 @@ layout: home
         <small className="!text-xs">para versões EOL do Node.js</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 
diff --git a/apps/site/pages/ro/index.mdx b/apps/site/pages/ro/index.mdx
index 71863d3af4714..ec2f60407d098 100644
--- a/apps/site/pages/ro/index.mdx
+++ b/apps/site/pages/ro/index.mdx
@@ -29,7 +29,7 @@ layout: home
         <small className="!text-xs">pentru versiunile Node.js EOL</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 
diff --git a/apps/site/pages/uk/index.mdx b/apps/site/pages/uk/index.mdx
index feefc298ca4c1..ad9476793d8f5 100644
--- a/apps/site/pages/uk/index.mdx
+++ b/apps/site/pages/uk/index.mdx
@@ -28,7 +28,7 @@ layout: home
         <small className="!text-xs">для версій Node.js, які досягли кінця підтримки (EOL)</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 
diff --git a/apps/site/pages/zh-cn/index.mdx b/apps/site/pages/zh-cn/index.mdx
index 86c7518c78951..4fa3e0da66336 100644
--- a/apps/site/pages/zh-cn/index.mdx
+++ b/apps/site/pages/zh-cn/index.mdx
@@ -28,7 +28,7 @@ layout: home
         <small className="!text-xs">对于不受支持的 Node.js 版本（EOL）</small>
       </Button>
 
-      <div className="flex justify-center xs:mt-3">
+      <div className="flex justify-center ml:mt-3">
         <PartnersList sort="weight" />
       </div>
 
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 198aa53cf7d7f..9b2934cbb3f4d 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "type": "module",
   "exports": {
     "./*": [
diff --git a/packages/ui-components/src/Common/AvatarGroup/Avatar/index.module.css b/packages/ui-components/src/Common/AvatarGroup/Avatar/index.module.css
index 652ac5a605e3b..0389d4ef6f459 100644
--- a/packages/ui-components/src/Common/AvatarGroup/Avatar/index.module.css
+++ b/packages/ui-components/src/Common/AvatarGroup/Avatar/index.module.css
@@ -1,8 +1,8 @@
 @reference "../../../styles/index.css";
 
 .item {
-  @apply xs:max-h-10
-    xs:max-w-10
+  @apply ml:max-h-10
+    ml:max-w-10
     flex
     h-full
     max-h-12
@@ -25,13 +25,13 @@
   @apply size-8;
 
   .wrapper {
-    @apply max-xs:block
-      max-xs:py-0;
+    @apply max-ml:block
+      max-ml:py-0;
   }
 }
 
 .small {
-  @apply xs:size-8
+  @apply ml:size-8
     size-10;
 }
 
diff --git a/packages/ui-components/src/Common/Breadcrumbs/BreadcrumbRoot/index.module.css b/packages/ui-components/src/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
index cc665fa4772c9..d4e4cd2d43f7a 100644
--- a/packages/ui-components/src/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
+++ b/packages/ui-components/src/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
@@ -1,7 +1,7 @@
 @reference "../../../styles/index.css";
 
 .list {
-  @apply xs:w-full
+  @apply ml:w-full
     flex
     w-screen
     gap-5
diff --git a/packages/ui-components/src/Common/Modal/index.module.css b/packages/ui-components/src/Common/Modal/index.module.css
index 577ad45a1fe3c..2952835480743 100644
--- a/packages/ui-components/src/Common/Modal/index.module.css
+++ b/packages/ui-components/src/Common/Modal/index.module.css
@@ -10,7 +10,7 @@
     dark:bg-neutral-950/40;
 
   .content {
-    @apply xs:p-6
+    @apply ml:p-6
       relative
       m-4
       inline-flex
diff --git a/packages/ui-components/src/Common/Search/Modal/index.module.css b/packages/ui-components/src/Common/Search/Modal/index.module.css
index 1f63a7ebb5a40..d683d4c51a183 100644
--- a/packages/ui-components/src/Common/Search/Modal/index.module.css
+++ b/packages/ui-components/src/Common/Search/Modal/index.module.css
@@ -99,9 +99,14 @@
     lg:bottom-auto
     lg:h-auto
     lg:max-w-3xl
+    lg:min-w-lg
     lg:bg-neutral-100
     dark:bg-zinc-950
     lg:dark:bg-neutral-950;
+
+  > section {
+    @apply lg:min-w-lg;
+  }
 }
 
 .modalContent {
@@ -110,7 +115,6 @@
     w-screen
     flex-col
     border-neutral-200
-    md:max-w-[42rem]
     lg:h-auto
     lg:max-h-[70vh]
     lg:w-auto
diff --git a/packages/ui-components/src/Common/Search/Modal/index.tsx b/packages/ui-components/src/Common/Search/Modal/index.tsx
index 18be7b53b0766..0996d9ee3dcf3 100644
--- a/packages/ui-components/src/Common/Search/Modal/index.tsx
+++ b/packages/ui-components/src/Common/Search/Modal/index.tsx
@@ -30,6 +30,7 @@ const SearchModal: FC<PropsWithChildren<SearchModalProps>> = ({
           <MagnifyingGlassIcon />
           {placeholder}
         </div>
+
         <span className={styles.searchButtonShortcut}>⌘ K</span>
       </Modal.Trigger>
 
diff --git a/packages/ui-components/src/Containers/Article/index.module.css b/packages/ui-components/src/Containers/Article/index.module.css
index 21c58515f0aa3..c4d541d9fb19f 100644
--- a/packages/ui-components/src/Containers/Article/index.module.css
+++ b/packages/ui-components/src/Containers/Article/index.module.css
@@ -1,53 +1,54 @@
 @reference "../../styles/index.css";
 
 .articleLayout {
-  @apply max-w-8xl
+  @apply max-w-10xl
+    ml:grid
+    ml:grid-cols-[--spacing(52)_1fr]
+    ml:grid-rows-[1fr]
+    ml:overflow-visible
+    ml:[grid-template-areas:'sidebar_main''sidebar_footer']
     mx-auto
     block
     w-full
-    sm:grid
-    sm:grid-cols-[theme(spacing.52)_1fr]
-    sm:grid-rows-[1fr]
-    sm:overflow-visible
-    sm:[grid-template-areas:'sidebar_main''sidebar_footer']
-    md:grid-cols-[theme(spacing.64)_1fr]
-    lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
-    lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
-    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
+    xl:grid-cols-[--spacing(52)_1fr_--spacing(52)]
+    xl:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
+    2xl:grid-cols-[--spacing(80)_1fr_--spacing(80)];
 
   > *:nth-child(1) {
     @apply [grid-area:sidebar]
-      lg:sticky
-      lg:top-0
-      lg:h-[100vh]
-      lg:overflow-y-auto;
+      xl:sticky
+      xl:top-0
+      xl:h-screen
+      xl:overflow-y-auto;
   }
 
   > *:nth-child(2) {
-    @apply contents
-      sm:max-lg:block;
+    @apply ml:max-xl:block
+      contents;
 
     > *:first-child {
-      @apply sm:bg-gradient-subtle
-        sm:dark:bg-gradient-subtle-dark
+      @apply ml:bg-gradient-subtle
+        ml:dark:bg-gradient-subtle-dark
+        3xl:px-18
+        ml:bg-fixed
+        ml:p-8
+        min-w-0
         p-4
         [grid-area:main]
         motion-safe:scroll-smooth
-        sm:bg-fixed
-        sm:p-12
-        xl:px-18;
+        xl:p-12;
     }
 
     > *:last-child {
-      @apply mt-8
+      @apply ml:mt-0
+        mt-8
         border-t
         [grid-area:metabar]
-        sm:mt-0
-        lg:sticky
-        lg:top-0
-        lg:max-w-xs
-        lg:border-t-0
-        lg:border-l;
+        xl:sticky
+        xl:top-0
+        xl:max-w-xs
+        xl:border-t-0
+        xl:border-l;
     }
   }
 
diff --git a/packages/ui-components/src/Containers/Footer/index.module.css b/packages/ui-components/src/Containers/Footer/index.module.css
index 5347cdf8da6cb..2cc080588e1c3 100644
--- a/packages/ui-components/src/Containers/Footer/index.module.css
+++ b/packages/ui-components/src/Containers/Footer/index.module.css
@@ -73,7 +73,7 @@
     }
 
     a {
-      @apply max-xs:font-semibold
+      @apply max-ml:font-semibold
         text-green-600
         dark:text-green-400;
 
diff --git a/packages/ui-components/src/Containers/MetaBar/index.module.css b/packages/ui-components/src/Containers/MetaBar/index.module.css
index 126c0a09377cd..341c3f8b84e69 100644
--- a/packages/ui-components/src/Containers/MetaBar/index.module.css
+++ b/packages/ui-components/src/Containers/MetaBar/index.module.css
@@ -9,7 +9,7 @@
     border-neutral-200
     px-4
     py-6
-    [overflow-wrap:anywhere]
+    wrap-anywhere
     lg:sticky
     lg:top-0
     lg:max-h-screen
@@ -46,8 +46,8 @@
       dark:text-white;
 
     a {
-      @apply max-xs:inline-block
-        max-xs:py-1
+      @apply max-ml:inline-block
+        max-ml:py-1
         font-semibold
         text-neutral-900
         underline
diff --git a/packages/ui-components/src/Containers/NavBar/index.module.css b/packages/ui-components/src/Containers/NavBar/index.module.css
index 764c0edd5ec7a..7e569a8eb13fb 100644
--- a/packages/ui-components/src/Containers/NavBar/index.module.css
+++ b/packages/ui-components/src/Containers/NavBar/index.module.css
@@ -3,13 +3,13 @@
 .container {
   @apply border-neutral-200
     bg-white
-    lg:flex
-    lg:h-16
-    lg:flex-row
-    lg:items-center
-    lg:gap-8
-    lg:border-b
-    lg:px-8
+    xl:flex
+    xl:h-16
+    xl:flex-row
+    xl:items-center
+    xl:gap-8
+    xl:border-b
+    xl:px-8
     dark:border-neutral-900
     dark:bg-neutral-950;
 }
@@ -22,11 +22,11 @@
     border-b
     border-neutral-200
     px-4
-    lg:flex
-    lg:h-full
-    lg:items-center
-    lg:border-0
-    lg:px-0
+    xl:flex
+    xl:h-full
+    xl:items-center
+    xl:border-0
+    xl:px-0
     dark:border-neutral-900;
 }
 
@@ -52,7 +52,7 @@
 .sidebarItemTogglerLabel {
   @apply block
     cursor-pointer
-    lg:hidden;
+    xl:hidden;
 }
 
 .main {
@@ -60,9 +60,9 @@
     flex-col
     justify-between
     gap-4
-    lg:flex
-    lg:flex-row
-    lg:items-center;
+    xl:flex
+    xl:flex-row
+    xl:items-center;
 }
 
 .navItems {
@@ -72,11 +72,11 @@
     border-b
     border-neutral-200
     p-4
-    lg:flex-1
-    lg:flex-row
-    lg:gap-1
-    lg:border-0
-    lg:p-0
+    xl:flex-1
+    xl:flex-row
+    xl:gap-1
+    xl:border-0
+    xl:p-0
     dark:border-neutral-900;
 }
 
@@ -91,9 +91,9 @@
     border-neutral-200
     p-4
     sm:flex-nowrap
-    lg:basis-96
-    lg:border-0
-    lg:p-0
+    xl:basis-96
+    xl:border-0
+    xl:p-0
     dark:border-neutral-900;
 }
 
diff --git a/packages/ui-components/src/Containers/Sidebar/index.module.css b/packages/ui-components/src/Containers/Sidebar/index.module.css
index 67873b65391f5..610c7d51936a2 100644
--- a/packages/ui-components/src/Containers/Sidebar/index.module.css
+++ b/packages/ui-components/src/Containers/Sidebar/index.module.css
@@ -1,7 +1,11 @@
 @reference "../../styles/index.css";
 
 .wrapper {
-  @apply flex
+  @apply scrollbar-thin
+    ml:max-w-xs
+    ml:overflow-auto
+    ml:border-r
+    flex
     w-full
     flex-col
     gap-8
@@ -10,21 +14,18 @@
     bg-white
     px-4
     py-6
-    sm:overflow-auto
-    sm:border-r
-    md:max-w-xs
-    lg:px-6
+    2xl:px-6
     dark:border-neutral-900
     dark:bg-neutral-950;
 
   .navigation {
-    @apply hidden
-      sm:flex;
+    @apply ml:flex
+      hidden;
   }
 
   .mobileSelect {
-    @apply flex
-      w-full
-      sm:hidden;
+    @apply ml:hidden
+      flex
+      w-full;
   }
 }
diff --git a/packages/ui-components/src/styles/markdown.css b/packages/ui-components/src/styles/markdown.css
index 373bc886cab8d..333f735e52839 100644
--- a/packages/ui-components/src/styles/markdown.css
+++ b/packages/ui-components/src/styles/markdown.css
@@ -74,7 +74,7 @@ main {
   /* link that isn't inside a heading */
   a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a),
   .anchor {
-    @apply max-xs:font-semibold
+    @apply max-ml:font-semibold
       text-green-600
       dark:text-green-400;
 
@@ -84,12 +84,12 @@ main {
     }
 
     &[role='button'] {
-      @apply max-xs:font-regular;
+      @apply max-ml:font-regular;
     }
 
     &:has(code) {
-      @apply max-xs:decoration-neutral-800
-        dark:max-xs:decoration-neutral-200;
+      @apply max-ml:decoration-neutral-800
+        dark:max-ml:decoration-neutral-200;
 
       code {
         @apply text-inherit;
@@ -161,7 +161,7 @@ main {
       @apply sm:border-b-0;
 
       &:last-child {
-        @apply max-xs:border-b-0;
+        @apply max-ml:border-b-0;
       }
     }
 
diff --git a/packages/ui-components/src/styles/theme.css b/packages/ui-components/src/styles/theme.css
index 8a5e56530a0d7..0d70b7bcdd0d2 100644
--- a/packages/ui-components/src/styles/theme.css
+++ b/packages/ui-components/src/styles/theme.css
@@ -5,6 +5,13 @@
 @source '../Icons';
 
 @theme {
+  --container-8xl: 88rem;
+  --container-9xl: 96rem;
+  --container-10xl: 104rem;
+  --container-11xl: 112rem;
+  --container-12xl: 120rem;
+  --breakpoint-ml: 896px;
+  --breakpoint-3xl: 120rem;
   --color-green-100: #edf2eb;
   --color-green-200: #c5e5b4;
   --color-green-300: #99cc7d;
@@ -112,17 +119,12 @@
   --font-6xl-line-height: 3.75rem;
   --font-7xl: 4.5rem;
   --font-7xl-line-height: 4.5rem;
-  --breakpoint-xs: 670px;
 }
 
 @utility scrollbar-thin {
   scrollbar-width: thin;
 }
 
-@utility max-w-8xl {
-  max-width: 95rem;
-}
-
 @utility bg-gradient-subtle-dark {
   background-image: linear-gradient(
     180deg,