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 e7d1ea31a6e..c6468f96724 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
@@ -11,18 +11,21 @@
   flex-direction: column;
   padding: 0px;
   box-sizing: border-box;
+  padding-inline: var(--layout-padding);
 
   @media only screen and (max-width: 1430px) {
     container: docs-content / inline-size;
   }
 
-  @include mq.for-big-desktop-up{
+  @include mq.for-big-desktop-up {
     max-width: var(--page-width);
   }
 
   // check if TOC component present in the page and has more than one elenment
   &.docs-with-TOC:has(docs-table-of-contents ul > li:nth-child(2)) {
-    @media only screen and (min-width: 1430px) {
+
+    //applying styles when TOC position got translated to the top right 
+    @media only screen and (min-width: 1431px) {
       // take the available space except a reserved area for TOC
       margin-left: -16rem;
       width: calc(100% - 16rem);
@@ -83,6 +86,7 @@
   }
 
   a:not(.docs-github-links):not(.docs-card):not(.docs-pill):not(.docs-example-github-link) {
+
     &[href^='http:'],
     &[href^='https:'] {
       @include links.external-link-with-icon();
@@ -90,6 +94,7 @@
   }
 
   &-scroll-margin-large {
+
     h2,
     h3 {
       scroll-margin: 5em;
@@ -99,7 +104,8 @@
 
 .docs-header {
   margin-block-end: 1rem;
-  & > p:first-child {
+
+  &>p:first-child {
     color: var(--quaternary-contrast);
     font-weight: 500;
     margin: 0;
@@ -130,4 +136,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/adev/src/app/features/docs/docs.component.scss b/adev/src/app/features/docs/docs.component.scss
index 17c4389e8c9..52724a9a378 100644
--- a/adev/src/app/features/docs/docs.component.scss
+++ b/adev/src/app/features/docs/docs.component.scss
@@ -1,12 +1,16 @@
 :host {
+  display: block;
+  padding-top: var(--layout-padding);
+  padding-bottom: var(--layout-padding);
+
   .docs-viewer {
     &.docs-animate-content {
       animation: fade-in 500ms;
     }
   }
-  padding: var(--layout-padding);
-  
-  @media only screen and (min-width: 1430px) {
+
+  //applying styles when TOC position got translated to the top right 
+  @media only screen and (min-width: 1431px) {
     display: flex;
     justify-content: center;
   }
@@ -20,4 +24,4 @@
   to {
     opacity: 1;
   }
-}
+}
\ 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 a77579dcfe9..509b3da45fe 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
@@ -2,15 +2,35 @@
 @use '@angular/docs/styles/reference' as ref;
 
 :host {
-  display: block;
+  display: flex;
+  justify-content: center;
   width: 100%;
-  max-width: var(--page-width);
-  padding: var(--layout-padding) 0 1rem var(--layout-padding);
-  box-sizing: border-box;
 
-  @include mq.for-desktop-down {
-    padding: var(--layout-padding);
-    max-width: none;
+  padding-top: var(--layout-padding);
+  padding-bottom: var(--layout-padding);
+
+  &:has(> docs-viewer.docs-with-TOC) {
+    &:has(docs-table-of-contents ul > li:nth-child(2)) {
+
+      //applying styles when TOC position got translated to the top right 
+      @media only screen and (min-width: 1431px) {
+        // take the available space except a reserved area for TOC
+        width: calc(100% - 16rem);
+      }
+    }
+  }
+
+  docs-viewer {
+    display: block;
+    padding-inline: var(--layout-padding);
+    width: 100%;
+
+    //applying styles when TOC position got translated to the top right 
+    @media only screen and (min-width: 1431px) {
+      // take the available space except a reserved area for TOC
+      max-width: var(--page-width);
+    }
+
   }
 
   &::-webkit-scrollbar-thumb {
@@ -19,34 +39,42 @@
     transition: background-color 0.3s ease;
   }
 
-  & > *{
+  &>* {
     padding-inline: 0px;
-    @include mq.for-big-desktop-up{
+
+    @include mq.for-big-desktop-up {
       width: var(--page-width);
     }
   }
-  
+
   h1 {
     font-size: 1.5rem;
   }
+
   h2 {
     font-size: 1.25rem;
   }
+
   h3 {
     font-size: 1rem;
   }
+
   h4 {
     font-size: 0.95rem;
   }
+
   h5 {
     font-size: 0.875rem;
   }
+
   h6 {
     font-size: 0.6rem;
   }
+
+
 }
 
 ::ng-deep {
   @include ref.reference-common();
   @include ref.api-reference();
-}
+}
\ No newline at end of file
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 90d25c2d7c9..047d2f5d19e 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
@@ -2,15 +2,44 @@
 @use '@angular/docs/styles/reference' as ref;
 
 :host {
-  display: block;
+  display: flex;
+  justify-content: center;
   width: 100%;
-  max-width: var(--page-width);
-  padding: var(--layout-padding) 0 1rem var(--layout-padding);
   box-sizing: border-box;
+  padding-top: var(--layout-padding);
+  padding-bottom: var(--layout-padding);
 
-  @include mq.for-desktop-down {
-    padding: var(--layout-padding);
-    max-width: none;
+
+  &:has(> docs-viewer.docs-with-TOC) {
+    &:has(docs-table-of-contents ul > li:nth-child(2)) {
+
+      //applying styles when TOC position got translated to the top right 
+      @media only screen and (min-width: 1431px) {
+        // take the available space except a reserved area for TOC
+        width: calc(100% - 16rem);
+      }
+    }
+  }
+
+  docs-viewer {
+    display: block;
+    padding-inline: var(--layout-padding);
+    width: 100%;
+
+    //applying styles when TOC position got translated to the top right 
+    @media only screen and (min-width: 1431px) {
+      // take the available space except a reserved area for TOC
+      max-width: var(--page-width);
+    }
+  }
+
+  &>* {
+    width: 100%;
+
+    @include mq.for-desktop-up {
+      padding-inline: 0px;
+      width: var(--page-width);
+    }
   }
 }
 
@@ -18,20 +47,4 @@
 ::ng-deep {
   @include ref.reference-common();
   @include ref.cli-reference();
-}
-
-:host{
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  padding: var(--layout-padding);
-
-  & > *{
-    width: 100%;
-    
-    @include mq.for-desktop-up{
-      padding-inline: 0px;
-      width: var(--page-width);
-    }
-  }
 }
\ No newline at end of file