diff --git a/adev/shared-docs/components/table-of-contents/BUILD.bazel b/adev/shared-docs/components/table-of-contents/BUILD.bazel
index b7348d81c154..ae218e49c516 100644
--- a/adev/shared-docs/components/table-of-contents/BUILD.bazel
+++ b/adev/shared-docs/components/table-of-contents/BUILD.bazel
@@ -32,6 +32,9 @@ ng_project(
 sass_binary(
     name = "style",
     src = "table-of-contents.component.scss",
+    deps = [
+        "//adev/shared-docs/styles",
+    ],
 )
 
 ts_project(
diff --git a/adev/shared-docs/components/table-of-contents/table-of-contents.component.scss b/adev/shared-docs/components/table-of-contents/table-of-contents.component.scss
index 76014d29cbe4..3c4e94cc4a70 100644
--- a/adev/shared-docs/components/table-of-contents/table-of-contents.component.scss
+++ b/adev/shared-docs/components/table-of-contents/table-of-contents.component.scss
@@ -1,3 +1,5 @@
+@use '../../styles/media-queries' as mq;
+
 :host {
   display: flex;
   flex-direction: column;
@@ -20,7 +22,7 @@
     display: none;
   }
 
-  @media only screen and (max-width: 1430px) {
+  @include mq.for-large-desktop-down {
     position: relative;
     right: 0;
     max-height: min-content;
@@ -91,7 +93,7 @@ button {
     }
   }
 
-  @media only screen and (max-width: 1430px) {
+  @include mq.for-large-desktop-down {
     display: none;
   }
-}
+}
\ No newline at end of file
diff --git a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.scss b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.scss
index 86ee4cd153b3..74faf098a671 100644
--- a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.scss
+++ b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.scss
@@ -13,22 +13,28 @@
   box-sizing: border-box;
   padding-inline: var(--layout-padding);
 
-  @media only screen and (max-width: 1430px) {
+  @include mq.for-large-desktop-down {
     container: docs-content / inline-size;
   }
 
-  @include mq.for-big-desktop-up {
+  @include mq.for-extra-large-desktop-up {
     max-width: var(--page-width);
   }
 
 
   //applying styles when TOC position got translated to the top right 
-  @media only screen and (min-width: 1431px) {
+  @include mq.for-large-desktop-up {
     // take the available space except a reserved area for TOC
     margin-left: -16rem;
     width: calc(100% - 16rem);
   }
 
+  // restrict the content to be fluid until it reaches that width
+  // $screen-xl is the breakpoint where Main content stop being fluid and made fixed
+
+  >*:not(docs-table-of-contents) {
+    max-width: calc(mq.$screen-xxl - var(--secondary-nav-width) - var(--primary-nav-width) - var(--layout-padding)*2)
+  }
 
   pre {
     margin-block: 0;
diff --git a/adev/shared-docs/styles/_media-queries.scss b/adev/shared-docs/styles/_media-queries.scss
index 870412c0c534..f908fa5386e4 100644
--- a/adev/shared-docs/styles/_media-queries.scss
+++ b/adev/shared-docs/styles/_media-queries.scss
@@ -2,7 +2,8 @@ $screen-xs: 700px;
 $screen-sm: 775px;
 $screen-md: 900px;
 $screen-lg: 1200px;
-$screen-xl: 1800px;
+$screen-xl: 1430px;
+$screen-xxl: 1800px;
 
 @mixin for-phone-only {
   @media (max-width: $screen-xs) {
@@ -40,8 +41,14 @@ $screen-xl: 1800px;
   }
 }
 
-@mixin for-big-desktop-up {
-  @media (min-width: calc($screen-xl + 1px)) {
+@mixin for-large-desktop-up {
+  @media (min-width: calc($screen-xl + .01px)) {
+    @content;
+  }
+}
+
+@mixin for-extra-large-desktop-up {
+  @media (min-width: calc($screen-xxl + 1px)) {
     @content;
   }
 }
@@ -52,6 +59,12 @@ $screen-xl: 1800px;
   }
 }
 
+@mixin for-large-desktop-down {
+  @media (max-width: calc($screen-xl )) {
+    @content;
+  }
+}
+
 @mixin for-tablet-landscape-down {
   @media (max-width: $screen-md) {
     @content;
@@ -62,4 +75,4 @@ $screen-xl: 1800px;
   @media (max-width: $screen-sm) {
     @content;
   }
-}
+}
\ No newline at end of file
diff --git a/adev/shared-docs/styles/_resets.scss b/adev/shared-docs/styles/_resets.scss
index c4e2e02a214e..818ec0c73782 100644
--- a/adev/shared-docs/styles/_resets.scss
+++ b/adev/shared-docs/styles/_resets.scss
@@ -9,7 +9,7 @@
       'Segoe UI Symbol', 'Noto Color Emoji';
     --page-width: 80ch;
     --layout-padding: 3.12rem; // a common padding value throughout the layout
-    --primary-nav-width: 110px;
+    --primary-nav-width: 6.875rem;
     --secondary-nav-width: 16.25rem;
     --fixed-content-height: calc(100vh - var(--layout-padding) * 2);
 
diff --git a/adev/shared-docs/styles/global-styles.scss b/adev/shared-docs/styles/global-styles.scss
index 6cd2a4717974..d6c471e7ca38 100644
--- a/adev/shared-docs/styles/global-styles.scss
+++ b/adev/shared-docs/styles/global-styles.scss
@@ -45,21 +45,17 @@
 @include mq.for-tablet-portrait-up();
 @include mq.for-tablet-landscape-up();
 @include mq.for-desktop-up();
-@include mq.for-big-desktop-up();
+@include mq.for-extra-large-desktop-up();
 @include mq.for-tablet-landscape-down();
 
 // temporary just to show different options of code component UI.
 $primary: mat.m2-define-palette(mat.$m2-indigo-palette);
 $accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
-$theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $primary,
-      accent: $accent,
-    ),
-    typography: mat.m2-define-typography-config(),
-  )
-);
+$theme: mat.m2-define-light-theme((color: (primary: $primary,
+        accent: $accent,
+      ),
+      typography: mat.m2-define-typography-config(),
+    ));
 
 // Include material core styles.
 @include cdk.a11y-visually-hidden();
@@ -85,6 +81,7 @@ $theme: mat.m2-define-light-theme(
 
 // Disable view transitions when reduced motion is requested.
 @media (prefers-reduced-motion) {
+
   ::view-transition-group(*),
   ::view-transition-old(*),
   ::view-transition-new(*) {
@@ -121,6 +118,7 @@ $theme: mat.m2-define-light-theme(
 
   a {
     color: inherit;
+
     &:hover {
       text-decoration: underline;
     }
@@ -146,4 +144,4 @@ $theme: mat.m2-define-light-theme(
       background-color: inherit;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/adev/src/app/core/layout/footer/footer.component.scss b/adev/src/app/core/layout/footer/footer.component.scss
index 1c83a907c67e..130fb95339b8 100644
--- a/adev/src/app/core/layout/footer/footer.component.scss
+++ b/adev/src/app/core/layout/footer/footer.component.scss
@@ -1,3 +1,5 @@
+@use '@angular/docs/styles/media-queries' as mq;
+
 .adev-footer-columns {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -18,8 +20,8 @@
   transition: background-color 0.3s ease;
 
   // this accounts for absolutely positioned TOC on the right
-  @media only screen and (min-width: 1430px) {
-    width: calc(100% - 195px - var(--layout-padding) * 3);
+  @include mq.for-large-desktop-up{   
+   width: calc(100% - 195px - var(--layout-padding) * 3);
   }
 
   h2 {
diff --git a/adev/src/app/features/docs/docs.component.scss b/adev/src/app/features/docs/docs.component.scss
index 52724a9a3783..45862baa07f1 100644
--- a/adev/src/app/features/docs/docs.component.scss
+++ b/adev/src/app/features/docs/docs.component.scss
@@ -1,3 +1,5 @@
+@use '@angular/docs/styles/media-queries' as mq;
+
 :host {
   display: block;
   padding-top: var(--layout-padding);
@@ -10,7 +12,7 @@
   }
 
   //applying styles when TOC position got translated to the top right 
-  @media only screen and (min-width: 1431px) {
+  @include mq.for-large-desktop-up{
     display: flex;
     justify-content: center;
   }
diff --git a/adev/src/app/features/home/components/home-animation/home-animation.component.scss b/adev/src/app/features/home/components/home-animation/home-animation.component.scss
index ddf36477a928..71e912424080 100644
--- a/adev/src/app/features/home/components/home-animation/home-animation.component.scss
+++ b/adev/src/app/features/home/components/home-animation/home-animation.component.scss
@@ -198,7 +198,7 @@ $transition: 200ms linear;
           }
         }
 
-        @include mq.for-big-desktop-up {
+        @include mq.for-extra-large-desktop-up {
           & {
             transform: scale(0.5);
           }
@@ -331,12 +331,10 @@ $transition: 200ms linear;
           }
 
           @mixin meteor-gradient($startColor, $endColor) {
-            background: linear-gradient(
-              calc(var(--math-pi) + var(--meteor-tilt-angle)),
-              $startColor 0,
-              $endColor 66%,
-              transparent 100%
-            );
+            background: linear-gradient(calc(var(--math-pi) + var(--meteor-tilt-angle)),
+                $startColor 0,
+                $endColor 66%,
+                transparent 100%);
           }
 
           &.type-1::after {
@@ -391,9 +389,9 @@ $transition: 200ms linear;
         transform: scale(1);
       }
 
-      .build-for-everyone-layer > .title {
+      .build-for-everyone-layer>.title {
         background-position-x: 0;
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss b/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
index 0ef946eca39d..86b1e9f2b1ee 100644
--- a/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
+++ b/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
@@ -11,7 +11,7 @@
 
 
   //applying styles when TOC position got translated to the top right 
-  @media only screen and (min-width: 1431px) {
+  @include mq.for-large-desktop-up {
     // take the available space except a reserved area for TOC
     width: calc(100% - 16rem);
   }
@@ -23,7 +23,7 @@
     width: 100%;
 
     //applying styles when TOC position got translated to the top right 
-    @media only screen and (min-width: 1431px) {
+    @include mq.for-large-desktop-up {
       // take the available space except a reserved area for TOC
       max-width: var(--page-width);
     }
@@ -39,7 +39,7 @@
   &>* {
     padding-inline: 0px;
 
-    @include mq.for-big-desktop-up {
+    @include mq.for-extra-large-desktop-up {
       width: var(--page-width);
     }
   }
diff --git a/adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.scss b/adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.scss
index c5b913685847..3ee3c55098d0 100644
--- a/adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.scss
+++ b/adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.scss
@@ -12,7 +12,7 @@
 
 
   //applying styles when TOC position got translated to the top right 
-  @media only screen and (min-width: 1431px) {
+  @include mq.for-large-desktop-up{
     // take the available space except a reserved area for TOC
     width: calc(100% - 16rem);
   }
@@ -24,7 +24,7 @@
     width: 100%;
 
     //applying styles when TOC position got translated to the top right 
-    @media only screen and (min-width: 1431px) {
+    @include mq.for-large-desktop-up{
       // take the available space except a reserved area for TOC
       max-width: var(--page-width);
     }
diff --git a/adev/src/app/features/tutorial/tutorial.component.scss b/adev/src/app/features/tutorial/tutorial.component.scss
index 8dd3482984ce..62066e0423d1 100644
--- a/adev/src/app/features/tutorial/tutorial.component.scss
+++ b/adev/src/app/features/tutorial/tutorial.component.scss
@@ -94,7 +94,7 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
   .docs-viewer {
 
     //applying styles when TOC position got translated to the top right 
-    @media only screen and (min-width: 1431px) {
+    @include mq.for-large-desktop-up {
       // take the available space except a reserved area for TOC
       margin-left: 0rem;
       width: unset;
@@ -148,7 +148,7 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
 .adev-split-tutorial {
   width: 50%;
 
-  @include mq.for-big-desktop-up {
+  @include mq.for-extra-large-desktop-up {
     width: 100%;
   }
 
diff --git a/adev/src/app/features/update/update.component.scss b/adev/src/app/features/update/update.component.scss
index 2a9c2de8d333..dda29aad9e0d 100644
--- a/adev/src/app/features/update/update.component.scss
+++ b/adev/src/app/features/update/update.component.scss
@@ -11,7 +11,7 @@
     padding-inline: var(--layout-padding);
 
     //applying styles when TOC position got translated to the top right 
-    @media only screen and (min-width: 1431px) {
+    @include mq.for-large-desktop-up {
       // take the available space except a reserved area for TOC
       margin-left: -16rem;
       width: calc(100% - 16rem);
@@ -28,7 +28,7 @@
   max-width: var(--page-width);
 
   &>* {
-    @include mq.for-big-desktop-up {
+    @include mq.for-extra-large-desktop-up {
       padding-inline: 0px;
     }
   }