diff --git a/package-lock.json b/package-lock.json
index 32d928f..49d5336 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -948,9 +948,9 @@
       }
     },
     "node_modules/@exodus/bytes": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.0.tgz",
-      "integrity": "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==",
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
+      "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
       "license": "MIT",
       "engines": {
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
@@ -2543,9 +2543,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "25.9.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.0.tgz",
-      "integrity": "sha512-AOQwYUNolgy3VosiRqXrACUXTN8nJUtPl7FJXMqZVyxiiCLhQuG3jXKvCS1ALr+Y2OmZhzzLVlYPEqJaiqkaJQ==",
+      "version": "25.9.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz",
+      "integrity": "sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -2707,9 +2707,9 @@
       }
     },
     "node_modules/astro": {
-      "version": "6.3.5",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-6.3.5.tgz",
-      "integrity": "sha512-gU+4KedkbTuVgz7YoVAN+9Ftnq0GaYwejxK2NbqDzB0M9dWd0f3kXZBuaM9hzbchRFoRAJfJjFtdX9LK6Ir7ZA==",
+      "version": "6.3.6",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-6.3.6.tgz",
+      "integrity": "sha512-lM30gGI/iASK9Z1WQVnBBYzxVwDv8slkXbJOF7FNJdZQeBrFETpsQvYoLRupM/adt2ObP5hkYAWEeCjofoqlRw==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/compiler": "^4.0.0",
@@ -3933,9 +3933,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/fast-wrap-ansi": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/fast-wrap-ansi/-/fast-wrap-ansi-0.2.0.tgz",
-      "integrity": "sha512-rLV8JHxTyhVmFYhBJuMujcrHqOT2cnO5Zxj37qROj23CP39GXubJRBUFF0z8KFK77Uc0SukZUf7JZhsVEQ6n8w==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/fast-wrap-ansi/-/fast-wrap-ansi-0.2.2.tgz",
+      "integrity": "sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==",
       "license": "MIT",
       "dependencies": {
         "fast-string-width": "^3.0.2"
@@ -4985,9 +4985,9 @@
       }
     },
     "node_modules/lru-cache": {
-      "version": "11.4.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.4.0.tgz",
-      "integrity": "sha512-W+R+kFL4HgVxONq2bhXPi3bGpzGe/yEhVOp233qw9wCRtgncJ15P3bC+e4zZMu4Cq7d+WAJjXGW0uUkifhcatA==",
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.0.tgz",
+      "integrity": "sha512-5YgH9UJd7wVb9hIouI2adWpgqrrICkt070Dnj8EUY1+B4B2P9eRLPAkAAo6NICA7CEhOIeBHl46u9zSNpNu7zA==",
       "license": "BlueOak-1.0.0",
       "engines": {
         "node": "20 || >=22"
diff --git a/playground/astro.config.mjs b/playground/astro.config.mjs
index ede0d96..d683bd3 100644
--- a/playground/astro.config.mjs
+++ b/playground/astro.config.mjs
@@ -105,6 +105,13 @@ export default defineConfig({
   image: { service: { entrypoint: 'astro/assets/services/noop' } },
   integrations: [mdx()],
   markdown: {
+    shikiConfig: {
+      themes: {
+        light: 'catppuccin-latte',
+        dark: 'catppuccin-mocha',
+      },
+      wrap: true,
+    },
     rehypePlugins: [rehypeHeadingAnchors, rehypeTableWrapper],
   },
   vite: {
diff --git a/playground/src/pages/components/styleguide.mdx b/playground/src/pages/components/styleguide.mdx
index 5358d75..0ccf1be 100644
--- a/playground/src/pages/components/styleguide.mdx
+++ b/playground/src/pages/components/styleguide.mdx
@@ -334,7 +334,7 @@ The `<video>` element plays media files directly in the browser.
     align-items: center;
     gap: 8px;
     padding: 16px;
-    border: 1px solid light-dark(var(--ig-gray-300), var(--ig-gray-900));
+    border: 1px solid light-dark(var(--ig-gray-300), var(--ig-gray-100));
     border-radius: 0.5rem;
     font-size: 0.7rem;
     text-align: center;
diff --git a/src/components/DocsBreadcrumb/DocsBreadcrumb.astro b/src/components/DocsBreadcrumb/DocsBreadcrumb.astro
index 70e71c8..8eff036 100644
--- a/src/components/DocsBreadcrumb/DocsBreadcrumb.astro
+++ b/src/components/DocsBreadcrumb/DocsBreadcrumb.astro
@@ -41,13 +41,13 @@ const crumbs            = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle
         { resolvedSiteTitle && (
             <li class="docs-breadcrumb-item docs-breadcrumb-home">
                 <span>{ resolvedSiteTitle }</span>
-                <span class="docs-breadcrumb-sep" aria-hidden="true">
-                /
-                </span>
             </li>
         ) }
         { crumbs.map((label, i) => (
             <li class="docs-breadcrumb-item">
+                <span class="docs-breadcrumb-sep" aria-hidden="true">
+                /
+                </span>
                 <span class="docs-breadcrumb-crumb" title={ label }>{ label }</span>
             </li>
         )) }
diff --git a/src/components/DocsBreadcrumb/DocsBreadcrumb.scss b/src/components/DocsBreadcrumb/DocsBreadcrumb.scss
index 3c3c7ba..9106600 100644
--- a/src/components/DocsBreadcrumb/DocsBreadcrumb.scss
+++ b/src/components/DocsBreadcrumb/DocsBreadcrumb.scss
@@ -17,7 +17,17 @@
 	gap: rem(4px);
 	list-style: none;
 	padding: 0;
-	color: var(--ig-gray-500);
+	color: light-dark(var(--ig-gray-700), var(--ig-gray-400));
+}
+
+[data-theme='dark'] {
+	.docs-breadcrumb-list {
+		color: var(--ig-gray-600);
+	}
+	
+	.docs-breadcrumb-home {
+		color: var(--ig-gray-400);
+	}
 }
 
 .docs-breadcrumb-item {
@@ -29,8 +39,7 @@
 }
 
 .docs-breadcrumb-home {
-	font-weight: 600;
-	color: var(--ig-gray-700);
+	color: light-dark(var(--ig-gray-500), var(--ig-gray-600));
 	flex-shrink: 0;
 }
 
diff --git a/src/components/DocsSidebar/DocsSidebar.astro b/src/components/DocsSidebar/DocsSidebar.astro
index 21a791b..158fa8c 100644
--- a/src/components/DocsSidebar/DocsSidebar.astro
+++ b/src/components/DocsSidebar/DocsSidebar.astro
@@ -9,6 +9,7 @@
  * in the <script> block below to use @infragistics/igniteui-webcomponents.
  */
 import { sidebar as sidebarData, trailingSlash as configuredTrailingSlash } from 'virtual:docs-template/site-meta';
+import logoRaw from '../../assets/ig-logo.svg?raw';
 import SidebarFilterInput from './SidebarFilterInput.astro';
 import './DocsSidebar.scss';
 import SidebarLabel from './SidebarLabel.astro';
@@ -43,7 +44,10 @@ const activeId = normalizeSlug(currentSlug);
 
 <sidebar-filter class="docs-sidebar" id="docs-sidebar" data-no-results="No topics match">
     <div class="sidebar-gutter">
-        { showFilter && <SidebarFilterInput/> }
+        <div class="sidebar-logo" aria-hidden="true">
+            <Fragment set:html={logoRaw} />
+        </div>
+{ showFilter && <SidebarFilterInput/> }
     </div>
     <div class="sidebar-scroll" data-sidebar-scroll>
         <DocsTree
diff --git a/src/components/DocsSidebar/DocsSidebar.scss b/src/components/DocsSidebar/DocsSidebar.scss
index 6c80d7e..9876838 100644
--- a/src/components/DocsSidebar/DocsSidebar.scss
+++ b/src/components/DocsSidebar/DocsSidebar.scss
@@ -1,10 +1,13 @@
 @use 'igniteui-theming/sass/typography' as *;
-@use '../../styles/global/breakpoints' as *;
 
+@layer components {
+
+// Desktop base. On tablet/mobile DocsLayout.scss turns this into a slide-in overlay.
 .docs-sidebar {
+	--igd-sidebar-z-index: 0;
 	display: flex;
 	flex-direction: column;
-	z-index: 0;
+	z-index: var(--igd-sidebar-z-index);
 	border-inline-end: var(--igd-app-outline);
 	padding-inline: var(--igd-padding-md);
 	padding-block: calc(var(--igd-padding-lg) + rem(14px));
@@ -16,60 +19,41 @@
 	align-self: start;
 	gap: rem(24px);
 
-	// On tablet/mobile: sidebar becomes a full-height fixed overlay, hidden off-screen by default.
-	@media (max-width: #{$bp-tablet-max}) {
-		position: fixed;
-		inset-block: 0;
-		inset-inline-start: 0;
-		height: 100dvh;
-		max-height: 100dvh;
-		width: min(rem(360px), 85vw);
-		z-index: 100;
-		transform: translateX(-100%);
-		transition: transform 250ms ease, box-shadow 250ms ease;
-		box-shadow: none;
-	}
-	
 	.sidebar-gutter {
 		overflow-y: hidden;
 		scrollbar-gutter: stable;
-		
+
 		// This Makes sure the input border is visible
 		// This is the height of the input in fluent theme + 8px padding
 		// TODO this can be made smart using a css variable to override the original height of the input and used here
 		min-height: rem(40px);
+
+
+		igc-icon {
+			color: light-dark(var(--ig-gray-800), var(--ig-gray-300));
+		}
+
+		&:empty {
+			display: none;
+		}
 	}
 }
 
-// Overlay backdrop — only visible on tablet when sidebar is open.
+// Hidden by default. DocsLayout.scss reveals it on tablet/mobile when the sidebar is open.
 .docs-sidebar-backdrop {
 	display: none;
-
-	@media (max-width: #{$bp-tablet-max}) {
-		display: block;
-		position: fixed;
-		inset: 0;
-		z-index: 99;
-		background: rgba(0, 0, 0, 0.4);
-		opacity: 0;
-		pointer-events: none;
-		transition: opacity 250ms ease;
-	}
 }
 
-// Open state — driven by data-sidebar-open on <body>
-body[data-sidebar-open] {
-	@media (max-width: #{$bp-tablet-max}) {
-		overflow: hidden;
+.sidebar-logo {
+	display: none;
+	margin-block-end: rem(8px);
+	padding-inline-start: rem(20px);
 
-		.docs-sidebar {
-			transform: translateX(0);
-			box-shadow: var(--ig-elevation-8);
-		}
+	> svg {
+		width: rem(79px);
 
-		.docs-sidebar-backdrop {
-			opacity: 1;
-			pointer-events: auto;
+		.logo-type {
+			fill: var(--igd-logo-type);
 		}
 	}
 }
@@ -166,3 +150,6 @@ body[data-sidebar-open] {
 	gap: rem(4px);
 	margin-left: auto;
 }
+
+}
+
diff --git a/src/components/DocsSidebar/SidebarFilterInput.astro b/src/components/DocsSidebar/SidebarFilterInput.astro
index a7ebc3a..d2e7ef7 100644
--- a/src/components/DocsSidebar/SidebarFilterInput.astro
+++ b/src/components/DocsSidebar/SidebarFilterInput.astro
@@ -31,9 +31,8 @@ import './SidebarFilterInput.scss';
 </igc-input>
 
 <p role="status"
-    aria-atomic="true"
-    class="sidebar-filter-status"
-    data-sidebar-filter-status>
-</p>
+aria-atomic="true"
+class="sidebar-filter-status"
+data-sidebar-filter-status></p>
 
 
diff --git a/src/components/DocsSidebar/SidebarFilterInput.scss b/src/components/DocsSidebar/SidebarFilterInput.scss
index a166986..d6ce5a3 100644
--- a/src/components/DocsSidebar/SidebarFilterInput.scss
+++ b/src/components/DocsSidebar/SidebarFilterInput.scss
@@ -5,7 +5,7 @@ igc-input {
 	--ig-input-group-input-suffix-color--filled: light-dark(var(--ig-gray-900), var(--ig-gray-800));
 	--ig-input-group-input-suffix-color--focused: light-dark(var(--ig-gray-900), var(--ig-gray-800));
 	--ig-input-group-idle-text-color: light-dark(var(--ig-gray-900), var(--ig-gray-800));
-	--ig-input-group-filled-text-color: light-dark(var(--ig-gray-900), var(--ig-gray-50));
+	--ig-input-group-filled-text-color: light-dark(var(--ig-gray-900), var(--ig-gray-900));
 	--ig-input-group-placeholder-color: var(--ig-gray-500);
 	--ig-input-group-hover-placeholder-color: var(--ig-gray-500);
 	--ig-flat-button-hover-background: transparent;
@@ -20,7 +20,7 @@ igc-input {
 }
 
 igc-input::part(input) {
-	@include type-style('caption') {
+	@include type-style('body-2') {
 		margin: 0;
 	}
 }
@@ -29,7 +29,6 @@ igc-input::part(container) {
 	border-inline: 0;
 	border-block-start: 0;
 	border-block-end: rem(1px) solid light-dark(var(--ig-gray-200), var(--ig-gray-300));
-	
 	border-radius: 0;
 	padding-inline: rem(16px);
 	
diff --git a/src/components/DocsSubHeader/DocsSubHeader.astro b/src/components/DocsSubHeader/DocsSubHeader.astro
index 92fcda3..4626ef4 100644
--- a/src/components/DocsSubHeader/DocsSubHeader.astro
+++ b/src/components/DocsSubHeader/DocsSubHeader.astro
@@ -110,7 +110,7 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
 
         <div class="igd-logo">
             <Fragment set:html={logoRaw} />
-            <h1 class="ig-typography__body-2">{logoText}</h1>
+            <h1>{logoText}</h1>
         </div>
 
         <div class="igd-docs-subheader__content">
@@ -119,7 +119,7 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
 
             <!-- Package selector (optional) -->
             {packages && packages.length > 0 && (
-                <igc-select id="package-select" class="igd-package-select" outlined value={selectedPackage} aria-label={packageLabel}>
+                <igc-select distance="17" placement="bottom-end" id="package-select" class="igd-package-select" outlined value={selectedPackage} aria-label={packageLabel}>
                     {platformIcon && <igc-icon name={platformIcon} collection="docs" slot="prefix" aria-hidden="true"></igc-icon>}
                     {packages.map((p) => (
                             <igc-select-item value={p}>{p}</igc-select-item>
@@ -129,7 +129,7 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
 
             <!-- Version selector (optional) -->
             {versions && versions.length > 0 && (
-                <igc-select class="igd-version-select" id="version-select" outlined value={selectedVersion} aria-label={versionLabel}>
+                <igc-select distance="17" class="igd-version-select" id="version-select" outlined value={selectedVersion} aria-label={versionLabel}>
                     {versions.map((v) => (
                             <igc-select-item value={v}>{v}</igc-select-item>
                     ))}
@@ -150,7 +150,7 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
                 </igc-icon-button>
             )}
 
-            <!-- Hamburger — visible only when the sidebar is hidden (tablet + mobile) -->
+            <!-- Sidebar toggle — visible only when the sidebar is hidden (tablet + mobile) -->
             <igc-icon-button
                 class="subheader-sidebar-toggle"
                 variant="flat"
@@ -158,7 +158,8 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
                 aria-label="Toggle sidebar navigation"
                 aria-expanded="false"
                 title="Toggle sidebar">
-                <igc-icon name="hamburger-menu" collection="docs" aria-hidden="true"></igc-icon>
+                <igc-icon name="dropdown-indicator-bold" collection="docs" class="toggle-icon toggle-icon--dropdown" aria-hidden="true"></igc-icon>
+                <igc-icon name="hamburger-menu" collection="docs" class="toggle-icon toggle-icon--hamburger" aria-hidden="true"></igc-icon>
             </igc-icon-button>
 
             <!-- TODO WHY WE NEED THIS? -->
@@ -213,6 +214,14 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
                         document.documentElement.setAttribute('data-theme', next);
                         const key = themeBtn.dataset.themeKey || 'docs-theme';
                         try { localStorage.setItem(key, next); } catch (_) {}
+
+                        // Force WebKit to repaint the document scrollbar so
+                        // ::-webkit-scrollbar-* styles pick up the new data-theme.
+                        const html = document.documentElement;
+                        const saved = html.style.overflow;
+                        html.style.overflow = 'hidden';
+                        html.offsetHeight; // trigger reflow
+                        html.style.overflow = saved;
                     });
                 }
 
@@ -221,7 +230,7 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
                 if (globalNav) {
                     const observer = new IntersectionObserver(
                         ([entry]) => {
-                            this.classList.toggle('docs-subheader--pinned', !entry.isIntersecting);
+                            this.classList.toggle('igd-docs-subheader--pinned', !entry.isIntersecting);
                         },
                         { threshold: 0 }
                     );
@@ -231,7 +240,7 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
                     // The observer fires mid-transition (GlobalNavBar briefly clipped)
                     // and would leave --pinned set when the new page loads at scroll=0.
                     document.addEventListener('astro:before-swap', () => {
-                        this.classList.remove('docs-subheader--pinned');
+                        this.classList.remove('igd-docs-subheader--pinned');
                     });
                 }
             }
diff --git a/src/components/DocsSubHeader/DocsSubHeader.scss b/src/components/DocsSubHeader/DocsSubHeader.scss
index 2c83653..a18a88b 100644
--- a/src/components/DocsSubHeader/DocsSubHeader.scss
+++ b/src/components/DocsSubHeader/DocsSubHeader.scss
@@ -1,10 +1,14 @@
 @use 'igniteui-theming/sass/typography' as *;
-@use '../../styles/global/breakpoints' as *;
+
+@layer components {
 
 .igd-docs-subheader {
 	position: sticky;
 	inset: 0;
 	display: grid;
+	
+	// Subgrid: mirror the parent .igd-page-layout column tracks so the logo
+	// column aligns with the sidebar column at all breakpoints.
 	grid-template-columns: var(--igd-page-layout-grid);
 	align-items: center;
 	width: 100%;
@@ -15,31 +19,16 @@
 	z-index: 1;
 	background-color: var(--igd-layout-sections-bg);
 
-	// On tablet the sidebar column collapses — logo+toggle share their column,
-	// search fills the remainder. No extra column needed.
-	@media (max-width: #{$bp-mobile-horizontal-max}) {
-		.igd-docs-subheader {
-			--igd-page-layout-grid: 1fr;
-		}
-		
-		padding-inline-end: rem(16px);
-	}
-	
 	.igd-logo {
 		display: flex;
 		align-items: center;
 		height: 100%;
 		padding-inline: rem(32px) rem(16px);
 
-		@media (max-width: #{$bp-mobile-horizontal-max}) {
-			display: none;
-		}
-
 		> svg {
 			min-width: rem(79px);
 			height: rem(22px);
 			opacity: 0;
-			transform: translateY(-4px);
 			transition: opacity 200ms ease, transform 200ms ease;
 			position: absolute;
 
@@ -48,11 +37,13 @@
 			}
 		}
 
-		h1 {
+		> h1 {
+			@include type-style('body-2') {
+				margin: 0;
+			};
+			
 			opacity: 1;
-			transform: translateY(0);
 			transition: opacity 200ms ease, transform 200ms ease;
-			margin: 0;
 		}
 
 		border-inline-end: var(--igd-app-outline);
@@ -84,28 +75,21 @@
 	align-items: center;
 	height: 100%;
 	gap: rem(16px);
-	
+
 	> igc-select:first-of-type {
 		margin-inline-start: auto;
 	}
-	
+
 	&:last-child {
 		margin-inline-end: rem(32px);
 	}
-	
-	@media (max-width: #{$bp-mobile-horizontal-max}) {
-		&:last-child {
-			margin-inline-end: 0;
-		}
-	}
 }
 
-// Sidebar toggle button — only visible on tablet/mobile (when the sidebar is hidden).
-// Rendered as igc-icon-button; styled via CSS custom properties.
+// Hidden by default. DocsLayout.scss reveals it on tablet/mobile (when the sidebar is hidden).
 .subheader-sidebar-toggle {
 	display: none;
 
-	--foreground: light-dark(var(--ig-gray-700), var(--ig-gray-300));
+	--foreground: light-dark(var(--ig-gray-900), var(--ig-gray-900));
 	--background: transparent;
 	--border-color: transparent;
 
@@ -118,9 +102,19 @@
 	--active-foreground: var(--igd-accent);
 	--active-background: transparent;
 
-	@media (max-width: #{$bp-tablet-max}) {
+	.toggle-icon--hamburger {
+		display: none;
+	}
+}
+
+// When the subheader becomes sticky, swap dropdown-indicator → hamburger.
+.igd-docs-subheader--pinned .subheader-sidebar-toggle {
+	.toggle-icon--dropdown {
+		display: none;
+	}
+
+	.toggle-icon--hamburger {
 		display: flex;
-		flex-shrink: 0;
 	}
 }
 
@@ -130,13 +124,13 @@
 	--background: transparent;
 	--border-color: transparent;
 	
-	--hover-foreground: var(--ig-primary-100);
+	--hover-foreground: var(--igd-accent);
 	--hover-background: transparent;
 	
-	--focus-foreground: var(--ig-primary-100);
+	--focus-foreground: var(--igd-accent);
 	--focus-background: transparent;
 	
-	--active-foreground: var(--ig-primary-100);
+	--active-foreground: var(--igd-accent);
 	--active-background: transparent;
 	
 	.theme-icon {
@@ -167,3 +161,6 @@
 		}
 	}
 }
+
+}
+
diff --git a/src/components/DocsToc/DocsToc.astro b/src/components/DocsToc/DocsToc.astro
index f516a81..1a6f4d1 100644
--- a/src/components/DocsToc/DocsToc.astro
+++ b/src/components/DocsToc/DocsToc.astro
@@ -92,9 +92,11 @@ const nodes = headingsToTreeNodes(headings, tocConfig);
             this.querySelectorAll('a[aria-current]').forEach(
                 (a) => a.removeAttribute('aria-current'),
             );
-            // Clear any stale selected state on tree items.
+            // Clear any stale selected / active state on tree items.
             this.querySelectorAll('igc-tree-item').forEach((item) => {
-                (item as HTMLElement & { selected: boolean }).selected = false;
+                const treeItem = item as HTMLElement & { selected: boolean; active: boolean };
+                treeItem.selected = false;
+                treeItem.active = false;
             });
 
             this.links = Array.from(this.querySelectorAll<HTMLAnchorElement>('a[href^="#"]'));
@@ -212,12 +214,15 @@ const nodes = headingsToTreeNodes(headings, tocConfig);
             const next = this.links[index];
             if (!next || next === this.currentLink) return;
 
-            const prevItem = this.currentLink?.closest<HTMLElement & { selected: boolean }>('igc-tree-item');
-            if (prevItem) prevItem.selected = false;
+            const prevItem = this.currentLink?.closest<HTMLElement & { selected: boolean; active: boolean }>('igc-tree-item');
+            if (prevItem) {
+                prevItem.selected = false;
+                prevItem.active = false;
+            }
             this.currentLink?.removeAttribute('aria-current');
 
             next.setAttribute('aria-current', 'true');
-            const nextItem = next.closest<HTMLElement & { selected: boolean }>('igc-tree-item');
+            const nextItem = next.closest<HTMLElement & { selected: boolean; active: boolean }>('igc-tree-item');
             if (nextItem) nextItem.selected = true;
 
             this.currentLink = next;
diff --git a/src/components/DocsToc/DocsToc.scss b/src/components/DocsToc/DocsToc.scss
index 864b3dc..0cbe009 100644
--- a/src/components/DocsToc/DocsToc.scss
+++ b/src/components/DocsToc/DocsToc.scss
@@ -19,15 +19,14 @@
 	background-color: var(--igd-layout-sections-bg);
 }
 
-.ig-typography {
-	.toc-sidebar__heading {
-		@include type-style('body-2') {
-			margin: 0;
-		};
-		
-		color: var(--ig-gray-500);
-		padding-block-end: rem(8px);
-		padding-inline: rem(24px) 0;
-		text-transform: uppercase;
-	}
+
+.toc-sidebar__heading {
+	@include type-style('body-2') {
+		margin: 0;
+	};
+	
+	color: var(--ig-gray-500);
+	padding-block-end: rem(8px);
+	padding-inline: rem(24px) 0;
+	text-transform: uppercase;
 }
diff --git a/src/components/DocsTree/docs-tree.scss b/src/components/DocsTree/docs-tree.scss
index b8e999d..835b6fa 100644
--- a/src/components/DocsTree/docs-tree.scss
+++ b/src/components/DocsTree/docs-tree.scss
@@ -66,7 +66,7 @@ igc-tree[data-variant='toc'] igc-tree-item[selected] > [slot='label'] {
 igc-tree-item {
 	--igc-tree-indentation-size: #{rem(20px)};
 	--background: transparent;
-	--foreground: light-dark(var(--ig-gray-600), var(--ig-gray-500));
+	--foreground: light-dark(var(--ig-gray-600), var(--ig-gray-400));
 	--background-selected: transparent;
 	--background-active: transparent;
 	--foreground-active: var(--igd-accent);
@@ -123,6 +123,7 @@ igc-tree-item::part(indicator) {
 igc-tree-item::part(label) {
 	width: 100%;
 	max-height: 100%;
+	padding-block: rem(6px);
 }
 
 igc-tree-item[data-has-children] {
@@ -142,21 +143,27 @@ igc-tree-item[data-has-children] {
 	transition: transform 0.2s ease;
 }
 
-igc-tree-item[aria-expanded='true'] {
+igc-tree-item[aria-expanded='false'] > [slot='label'] {
 	.tree-expand-icon {
-		transform: rotate(0deg);
 		color: var(--igd-accent);
 	}
 }
 
+igc-tree-item[aria-expanded='true'] > [slot='label'] {
+	.tree-expand-icon {
+		transform: rotate(0deg);
+		color: light-dark(var(--ig-gray-800), var(--ig-gray-300));
+	}
+}
+
 igc-tree-item[data-has-children][data-depth='0'] {
 	--igc-tree-indentation-size: 0;
 }
 
 igc-tree-item[data-has-children] {
-	--foreground: light-dark(var(--ig-gray-900), var(--ig-gray-50));
-	--foreground-selected: light-dark(var(--ig-gray-900), var(--ig-gray-50));
-	--foreground-active-selected: light-dark(var(--ig-gray-900), var(--ig-gray-50));
+	--foreground: light-dark(var(--ig-gray-900), var(--ig-gray-600));
+	--foreground-selected: light-dark(var(--ig-gray-900), var(--ig-gray-600));
+	--foreground-active-selected: light-dark(var(--ig-gray-900), var(--ig-gray-600));
 	--foreground-active: light-dark(var(--ig-gray-900), var(--ig-gray-50));
 	--foreground-hover: light-dark(var(--ig-gray-900), var(--ig-gray-50));
 }
@@ -175,9 +182,9 @@ igc-tree[data-variant='sidebar'] {
 	overflow: hidden;
 	
 	igc-tree-item[data-has-children] {
-		--foreground: light-dark(var(--ig-gray-900), var(--ig-gray-50));
-		--foreground-selected: light-dark(var(--ig-gray-900), var(--ig-gray-50));
-		--foreground-active-selected: light-dark(var(--ig-gray-900), var(--ig-gray-50));
+		--foreground: light-dark(var(--ig-gray-900), var(--ig-gray-600));
+		--foreground-selected: light-dark(var(--ig-gray-900), var(--ig-gray-600));
+		--foreground-active-selected: light-dark(var(--ig-gray-900), var(--ig-gray-600));
 		--foreground-active: light-dark(var(--ig-gray-900), var(--ig-gray-50));
 		--foreground-hover: light-dark(var(--ig-gray-900), var(--ig-gray-50));
 	}
diff --git a/src/components/MobileTocToggle/MobileTocToggle.astro b/src/components/MobileTocToggle/MobileTocToggle.astro
new file mode 100644
index 0000000..7ea6881
--- /dev/null
+++ b/src/components/MobileTocToggle/MobileTocToggle.astro
@@ -0,0 +1,96 @@
+---
+/**
+ * MobileTocToggle
+ *
+ * Mobile-only sticky row rendered below the DocsSubHeader.
+ * Shows "On this page" with the current active heading and a chevron.
+ * Tapping it opens a dropdown containing the TOC links.
+ *
+ * Hidden on tablet and above — the full DocsToc sidebar is shown there.
+ */
+import type { MarkdownHeading } from 'astro';
+import DocsTree from '../DocsTree/DocsTree.astro';
+import { headingsToTreeNodes, type TocConfig } from '../DocsToc/toTreeNodes';
+import './MobileTocToggle.scss';
+
+interface Props {
+    headings?: MarkdownHeading[];
+    tocConfig?: TocConfig;
+    label?: string;
+}
+
+const { headings = [], tocConfig, label = 'On this page' } = Astro.props;
+const nodes = headingsToTreeNodes(headings, tocConfig);
+---
+
+{nodes.length > 0 && (
+    <div class="mobile-toc">
+        <button
+            class="mobile-toc__trigger"
+            id="mobile-toc-trigger"
+            aria-expanded="false"
+            aria-controls="mobile-toc-dropdown"
+        >
+            <span class="mobile-toc__label">{label}</span>
+            <span class="mobile-toc__active" id="mobile-toc-active" aria-hidden="true"></span>
+            <svg class="mobile-toc__chevron" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+        </button>
+
+        <div class="mobile-toc__dropdown" id="mobile-toc-dropdown" aria-hidden="true">
+            <nav aria-label={label}>
+                <DocsTree nodes={nodes} variant="toc" />
+            </nav>
+        </div>
+    </div>
+)}
+
+<script>
+    function initMobileToc() {
+        const trigger = document.getElementById('mobile-toc-trigger');
+        const dropdown = document.getElementById('mobile-toc-dropdown');
+        const activeLabel = document.getElementById('mobile-toc-active');
+        if (!trigger || !dropdown) return;
+
+        // Toggle open/close
+        trigger.addEventListener('click', () => {
+            const isOpen = dropdown.getAttribute('aria-hidden') === 'false';
+            dropdown.setAttribute('aria-hidden', String(isOpen));
+            trigger.setAttribute('aria-expanded', String(!isOpen));
+        });
+
+        // Close on link click
+        dropdown.addEventListener('click', (e) => {
+            if ((e.target as Element | null)?.closest('a')) {
+                dropdown.setAttribute('aria-hidden', 'true');
+                trigger.setAttribute('aria-expanded', 'false');
+            }
+        });
+
+        // Close on Escape
+        document.addEventListener('keyup', (e) => {
+            if (e.key === 'Escape' && dropdown.getAttribute('aria-hidden') === 'false') {
+                dropdown.setAttribute('aria-hidden', 'true');
+                trigger.setAttribute('aria-expanded', 'false');
+                trigger.focus();
+            }
+        });
+
+        // Sync active heading text from the desktop TOC scroll-spy.
+        // DocsToc sets aria-current="true" on the active anchor — observe that.
+        const syncActive = () => {
+            if (!activeLabel) return;
+            const active = document.querySelector<HTMLAnchorElement>(
+                '#mobile-toc-dropdown a[aria-current="true"]'
+            );
+            activeLabel.textContent = active?.textContent?.trim() ?? '';
+        };
+
+        const observer = new MutationObserver(syncActive);
+        observer.observe(dropdown, { subtree: true, attributeFilter: ['aria-current'] });
+        syncActive();
+    }
+
+    document.addEventListener('astro:page-load', initMobileToc);
+</script>
diff --git a/src/components/MobileTocToggle/MobileTocToggle.scss b/src/components/MobileTocToggle/MobileTocToggle.scss
new file mode 100644
index 0000000..f32106a
--- /dev/null
+++ b/src/components/MobileTocToggle/MobileTocToggle.scss
@@ -0,0 +1,74 @@
+@use 'igniteui-theming/sass/typography' as *;
+
+@layer components {
+
+// Hidden by default. DocsLayout.scss reveals it on mobile-horizontal viewports.
+.mobile-toc {
+	display: none;
+}
+
+.mobile-toc__trigger {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	gap: rem(8px);
+	padding-inline: var(--igd-padding-md);
+	padding-block: rem(12px);
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	color: light-dark(var(--ig-gray-700), var(--ig-gray-300));
+
+	&:focus-visible {
+		outline: none;
+		box-shadow: inset 0 0 0 1px var(--igd-accent);
+	}
+
+	&[aria-expanded='true'] .mobile-toc__chevron {
+		transform: rotate(180deg);
+	}
+}
+
+.mobile-toc__label {
+	@include type-style('body-2') { margin: 0; };
+	font-weight: 600;
+	flex-shrink: 0;
+}
+
+.mobile-toc__active {
+	@include type-style('body-2') { margin: 0; };
+	color: var(--igd-accent);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	flex: 1;
+	text-align: start;
+
+	&:empty { display: none; }
+
+	&::before { content: '— '; }
+}
+
+.mobile-toc__chevron {
+	flex-shrink: 0;
+	margin-inline-start: auto;
+	transition: transform 200ms ease;
+}
+
+.mobile-toc__dropdown {
+	overflow: hidden;
+	max-height: 0;
+	transition: max-height 300ms ease;
+
+	&[aria-hidden='false'] {
+		max-height: 75dvh;
+		overflow-y: auto;
+	}
+
+	nav {
+		padding-inline: var(--igd-padding-md);
+		padding-block-end: rem(16px);
+	}
+}
+
+}
diff --git a/src/components/Search/Search.astro b/src/components/Search/Search.astro
index e92e8fd..19e9832 100644
--- a/src/components/Search/Search.astro
+++ b/src/components/Search/Search.astro
@@ -33,6 +33,17 @@ import './Search.scss';
 
 <dialog id="search-dialog" class="search-dialog" aria-label="Search">
   <div class="igd-search-shell">
+    <div class="igd-search-mobile-bar">
+      <button
+        type="button"
+        class="search-trigger search-close"
+        aria-label="Close search"
+        commandfor="search-dialog"
+        command="close"
+      >
+        <igc-icon name="close" collection="docs" aria-hidden="true"></igc-icon>
+      </button>
+    </div>
     <div class="igd-search-status" aria-live="polite"></div>
     <div id="search-pagefind"></div>
   </div>
diff --git a/src/components/Search/Search.scss b/src/components/Search/Search.scss
index c837bc9..277e386 100644
--- a/src/components/Search/Search.scss
+++ b/src/components/Search/Search.scss
@@ -1,5 +1,8 @@
+@use 'igniteui-theming' as *;
 @use '../../styles/global/search-shared' as *;
 
+@layer components {
+
 .search-dialog {
 	@include search-dialog-base-styles;
 	background: var(--igd-layout-sections-bg);
@@ -16,3 +19,13 @@
 		@include search-dialog-backdrop-open;
 	}
 }
+
+// Mobile-only bar — DocsLayout.scss flips display:flex on mobile.
+.igd-search-mobile-bar {
+	display: none;
+	justify-content: flex-end;
+	border-bottom: rem(1px) solid var(--igd-app-outline-color);
+	min-height: rem(48px);
+}
+
+}
diff --git a/src/components/SearchAdvanced/SearchAdvanced.astro b/src/components/SearchAdvanced/SearchAdvanced.astro
index 925ee99..ee86859 100644
--- a/src/components/SearchAdvanced/SearchAdvanced.astro
+++ b/src/components/SearchAdvanced/SearchAdvanced.astro
@@ -114,7 +114,7 @@ const resolvedIndexUrl = indexUrl ?? `${basePath}api-search-index/manifest.json`
     <igc-dialog aria-label={placeholder} class="igd-search-dialog" hide-default-action close-on-outside-click>
         <div class="igd-search-shell">
             <header class="igd-search-header">
-                <igc-select slot="prefix" class="igd-search-scope" outlined aria-label="Search scope" value="current">
+                <igc-select  placement="bottom-start" distance="17" slot="prefix" class="igd-search-scope" outlined aria-label="Search scope" value="current">
                     {platformIcon && <igc-icon id="search-scope-trigger-icon" name={platformIcon} collection="docs" slot="prefix" aria-hidden="true"></igc-icon>}
                     <igc-select-item value="current">
                         <span data-scope-label>Current package</span>
@@ -132,11 +132,22 @@ const resolvedIndexUrl = indexUrl ?? `${basePath}api-search-index/manifest.json`
                     outlined
                     aria-label={placeholder}
                 >
-                    <igc-icon name="search" collection="docs" slot="prefix" aria-hidden="true"></igc-icon>
+                    <igc-icon class="igd-search-icon" name="search" collection="docs" slot="prefix" aria-hidden="true"></igc-icon>
                     <igc-icon-button slot="suffix" class="igd-search-clear" variant="flat" type="button" aria-label="Clear search" name="clear" collection="docs" hidden></igc-icon-button>
                 </igc-input>
+
+                <button
+                    type="button"
+                    data-close-modal
+                    class="search-trigger search-close"
+                    aria-label="Close search"
+                >
+                    <igc-icon name="close" collection="docs" aria-hidden="true"></igc-icon>
+                </button>
             </header>
 
+            <igc-divider></igc-divider>
+
             <div class="igd-search-status" aria-live="polite"></div>
 
             <igc-tabs class="igd-search-tabs" activation="manual" hidden></igc-tabs>
@@ -280,6 +291,7 @@ const resolvedIndexUrl = indexUrl ?? `${basePath}api-search-index/manifest.json`
       }
 
       const openBtn  = this.querySelector<HTMLButtonElement>('button[data-open-modal]')!;
+      const closeBtn = this.querySelector<HTMLButtonElement>('button[data-close-modal]')!;
       this.dialog    = this.querySelector<IgcDialogComponent>('igc-dialog')!;
       this.input     = this.querySelector<IgcInputComponent>('igc-input.igd-search-input')!;
       this.clearBtn  = this.querySelector<IgcIconButtonComponent>('.igd-search-clear')!;
@@ -341,6 +353,8 @@ const resolvedIndexUrl = indexUrl ?? `${basePath}api-search-index/manifest.json`
       openBtn.addEventListener('click', open);
       openBtn.disabled = false;
 
+      closeBtn.addEventListener('click', () => this.closeModal());
+
       this.dialog.addEventListener('igcClosed', () => {
         document.body.toggleAttribute('data-search-modal-open', false);
       });
@@ -758,7 +772,7 @@ const resolvedIndexUrl = indexUrl ?? `${basePath}api-search-index/manifest.json`
         allContent.push(
           `<span class="igd-search-category-header">${escapeHtml(cat.label)}</span>` +
           `<igc-list class="igd-search-results">${items}</igc-list>` +
-          moreBtn
+          moreBtn + `<igc-divider></igc-divider>`
         );
       }
       tabsHtml.push(
diff --git a/src/components/SearchAdvanced/SearchAdvanced.scss b/src/components/SearchAdvanced/SearchAdvanced.scss
index c9d7106..18a23cc 100644
--- a/src/components/SearchAdvanced/SearchAdvanced.scss
+++ b/src/components/SearchAdvanced/SearchAdvanced.scss
@@ -1,94 +1,93 @@
 @use 'igniteui-theming' as *;
 @use '../../styles/global/search-shared' as *;
 
-api-search-advanced { display: contents; }
-
-.igd-search-dialog {
-	--border-radius: 0;
-	--background: var(--igd-layout-sections-bg);
-	--transition-duration: 150ms;
-	border: none;
-
-	&::part(base) {
-		@include search-dialog-base-styles;
-
-		&:focus-visible {
-			outline: none;
+@layer components {
+	api-search-advanced { display: contents; }
+	
+	.igd-search-dialog {
+		--border-radius: 0;
+		--background: var(--igd-layout-sections-bg);
+		--transition-duration: 150ms;
+		
+		border: none;
+	
+		&::part(base) {
+			@include search-dialog-base-styles;
+	
+			&:focus-visible {
+				outline: none;
+			}
 		}
-	}
-
-	&::part(content) {
-		padding: 0;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
-
-	&::part(backdrop) {
-		@include search-dialog-backdrop;
-	}
-
-	&[open]::part(backdrop) {
-		@include search-dialog-backdrop-open;
-	}
-
-	igc-input {
-		height: 100%;
-
-		&::part(container) {
-			border: 0;
+	
+		&::part(content) {
 			padding: 0;
+			display: flex;
+			flex-direction: column;
 			height: 100%;
 		}
+	
+		&::part(backdrop) {
+			@include search-dialog-backdrop;
+		}
+	
+		&[open]::part(backdrop) {
+			@include search-dialog-backdrop-open;
+		}
+		
+		igc-input {
+			height: 100%;
+		}
+		
+		igc-input::part(container) {
+			border: 0;
+			height: 100%;
+			padding: 0 rem(16px) !important;
+			border-block-end: none !important;
+			
+			&:focus-within {
+				box-shadow:
+					0 0 0 1px var(--igd-accent),
+					inset 0 1px 0 var(--igd-accent),
+					inset 0 -1px 0 var(--igd-accent),
+					inset -1px 0 0 var(--igd-accent);
+			}
+		}
 	}
-
-	igc-divider {
-		margin-inline: rem(16px);
+	
+	.search-trigger {
+		color: light-dark(var(--ig-gray-600), var(--ig-gray-400));
 	}
-}
-
-// TODO BUG IN THE TAB COMPONENT
-igc-tabs::part(inner) {
-	flex-grow: 1;
-}
-
-// TODO Log issue in the component this is not suppose to be affected by the ig-typography
-igc-tab::part(content) {
-	@include type-style('subtitle-1') {
-		margin: 0;
+	
+	.igd-search-icon {
+		color: light-dark(var(--ig-gray-900), var(--ig-gray-500));
 	}
-}
-
-.igd-search-tabs {
-	--item-background: var(--igd-layout-sections-bg);
 	
-	flex: 1 1 auto;
-	min-height: 0;
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
+	// TODO BUG IN THE TAB COMPONENT
+	igc-tabs::part(inner) {
+		flex-grow: 1;
+		
+	}
 	
-	&::part(base) {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		min-height: 0;
+	igc-tabs {
+		igc-divider {
+			margin-block: rem(26px);
+			
+			&:last-of-type {
+				display: none;
+			}
+		}
+	}
+	
+	// TODO Log issue in the component this is not suppose to be affected by the ig-typography
+	igc-tab::part(content) {
+		@include type-style('subtitle-1') {
+			margin: 0;
+		}
 	}
 	
-	igc-tab {
-		--item-text-color: light-dark(var(--ig-gray-900), var(--ig-gray-700));
+	.igd-search-tabs {
 		--item-background: var(--igd-layout-sections-bg);
-		--item-hover-background: var(--igd-layout-sections-bg);
-		--item-hover-color: var(--igd-accent);
-		--item-active-color: var(--igd-accent);
-		--item-active-hover-color: var(--igd-accent);
-		--item-icon-color: var(--igd-accent);
-		--item-active-icon-color: var(--igd-accent);
-		--item-active-hover-icon-color: var(--igd-accent);
-		--item-hover-icon-color: var(--igd-accent);
-		--item-active-background: var(--igd-layout-sections-bg);
-		--item-active-hover-background: var(--igd-layout-sections-bg);
-		--indicator-color: var(--igd-accent);
+		--indicator-color: transparent;
 		--button-color: var(--igd-accent);
 		--button-hover-color: var(--igd-accent);
 		--button-background: var(--igd-layout-sections-bg);
@@ -96,82 +95,114 @@ igc-tab::part(content) {
 		--border-color: var(--igd-layout-sections-bg);
 		--border-color--hover: var(--igd-layout-sections-bg);
 		--border-radius: 0;
+		
+		flex: 1 1 auto;
+		min-height: 0;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		
+		&::part(base) {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+			min-height: 0;
+		}
+		
+		igc-tab {
+			--item-text-color: light-dark(var(--ig-gray-900), var(--ig-gray-700));
+			--item-background: var(--igd-layout-sections-bg);
+			--item-hover-background: var(--igd-layout-sections-bg);
+			--item-hover-color: var(--igd-accent);
+			--item-active-color: var(--igd-accent);
+			--item-active-hover-color: var(--igd-accent);
+			--item-icon-color: var(--igd-accent);
+			--item-active-icon-color: var(--igd-accent);
+			--item-active-hover-icon-color: var(--igd-accent);
+			--item-hover-icon-color: var(--igd-accent);
+			--item-active-background: var(--igd-layout-sections-bg);
+			--item-active-hover-background: var(--igd-layout-sections-bg);
+		}
+		
+		igc-tab::part(content),
+		igc-tab::part(base) {
+			@include type-style('overline') {
+				margin: 0;
+			}
+		}
+		
+		igc-tab::part(tab-body) {
+			overflow-y: auto;
+			flex: 1 1 auto;
+			min-height: 0;
+			padding-block: rem(26px);
+		}
 	}
 	
-	igc-tab::part(content),
-	igc-tab::part(base) {
-		@include type-style('overline') {
-			margin: 0;
-		}
+	.igd-search-header {
+		display: flex;
+		min-height: rem(75px);
+		padding-inline-start: rem(16px);
 	}
 	
-	igc-tab::part(tab-body) {
-		overflow-y: auto;
-		flex: 1 1 auto;
-		min-height: 0;
-		padding: rem(26px);
+	.igd-search-scope {
+		flex-shrink: 0;
+		align-self: center;
 	}
-}
-
-.igd-search-header {
-	display: flex;
-	border-bottom: rem(1px) solid var(--igd-app-outline-color);
-	min-height: rem(75px);
-	padding-inline: rem(16px);
-}
-
-.igd-search-scope {
-	flex-shrink: 0;
-	align-self: center;
-}
-
-.igd-search-input {
-	--input-prefix-background: transparent;
-	--input-prefix-background--focused: transparent;
-	--input-prefix-background--filled: transparent;
 	
-	--input-suffix-background: transparent;
-	--input-suffix-background--focused: transparent;
-	--input-suffix-background--filled: transparent;
+	.igd-search-input {
+		--input-prefix-background: transparent;
+		--input-prefix-background--focused: transparent;
+		--input-prefix-background--filled: transparent;
 	
-	width: 100%;
+		--input-suffix-background: transparent;
+		--input-suffix-background--focused: transparent;
+		--input-suffix-background--filled: transparent;
 	
-	&::part(input) {
-		@include type-style('body-2') {
-			margin: 0;
+		width: 100%;
+		min-width: 0;
+		flex: 1 1 auto;
+	
+		&::part(input) {
+			@include type-style('body-2') {
+				margin: 0;
+			}
 		}
 	}
-}
-
-.igd-search-clear {
-	--foreground: light-dark(var(--ig-gray-900), var(--ig-gray-900));
-	--backgroind-hover: transparent;
-	--hover-foreground: var(--igd-accent);
-	--focus-hover-foreground: var(--igd-accent);
-	--focus-foreground: var(--igd-accent);
-	--active-foreground: var(--igd-accent);
-	--shadow-color: transparent;
-	--background: transparent;
-	--hover-background: transparent;
-	--focus-background: transparent;
-	--focus-hover-background: transparent;
-	--active-background: transparent;
-	--border-color: transparent;
-	--focus-border-color: red;
-	--border-radius: 0;
-	
-	&::part(base) {
-		&::after {
-			display: none;
+	
+	.igd-search-clear {
+		--foreground: light-dark(var(--ig-gray-900), var(--ig-gray-900));
+		--backgroind-hover: transparent;
+		--hover-foreground: var(--igd-accent);
+		--focus-hover-foreground: var(--igd-accent);
+		--focus-foreground: var(--igd-accent);
+		--active-foreground: var(--igd-accent);
+		--shadow-color: transparent;
+		--background: transparent;
+		--hover-background: transparent;
+		--focus-background: transparent;
+		--focus-hover-background: transparent;
+		--active-background: transparent;
+		--border-color: transparent;
+		--border-radius: 0;
+		
+		&::part(base) {
+			&::after {
+				display: none;
+			}
+		}
+		
+		&::part(focused) {
+			--foreground: var(--igd-accent);
 		}
 	}
 	
-	&::part(focused) {
-		--foreground: var(--igd-accent);
+	.igd-search-tab-count {
+		color: light-dark(var(--ig-gray-500), var(--ig-gray-300));
+	}
+	
+	igc-divider {
+		--color: light-dark(var(--ig-gray-400), var(--ig-gray-300));
 	}
-}
-
-.igd-search-tab-count {
-	color: light-dark(var(--ig-gray-500), var(--ig-gray-300));
 }
 
diff --git a/src/components/mdx/DocsAside/DocsAside.scss b/src/components/mdx/DocsAside/DocsAside.scss
index d0338c1..df96615 100644
--- a/src/components/mdx/DocsAside/DocsAside.scss
+++ b/src/components/mdx/DocsAside/DocsAside.scss
@@ -21,10 +21,6 @@ blockquote {
 	padding: var(--igd-aside-padding);
 	border-radius: var(--igd-aside-border-radius);
 	margin-block-end: var(--igd-aside-margin-bottom);
-	
-	code {
-		color: inherit;
-	}
 }
 
 .igd-aside__title {
@@ -58,10 +54,6 @@ blockquote {
 	.igd-aside__content {
 		color: var(--igd-aside-info-content);
 	}
-	
-	code {
-		background: var(--igd-aside-info-code-background);
-	}
 }
 
 .igd-aside--warning {
@@ -79,10 +71,6 @@ blockquote {
 	.igd-aside__content {
 		color: var(--igd-aside-warning-content);
 	}
-	
-	code {
-		background: var(--igd-aside-warning-code-background);
-	}
 }
 
 .igd-aside--note {
@@ -100,25 +88,20 @@ blockquote {
 	.igd-aside__content {
 		color: var(--igd-aside-note-content);
 	}
-	
-	code {
-		background: var(--igd-aside-note-code-background);
-	}
 }
 
 // TYPOGRAPHY STYLES
-.ig-typography {
-	.igd-aside__title {
-		@include type-style('body-2') {
-			font-weight: bold;
-			margin: 0;
-		};
-		
-	}
+.igd-aside__title {
+	@include type-style('body-2') {
+		font-weight: bold;
+		margin: 0;
+	};
 	
-	.igd-aside__content {
-		@include type-style('detail-1', false) {
-			margin: 0;
-		}
+}
+
+.igd-aside__content {
+	@include type-style('detail-1', false) {
+		margin: 0;
 	}
 }
+
diff --git a/src/components/mdx/Sample/Sample.scss b/src/components/mdx/Sample/Sample.scss
index 5ca7c81..f365f2e 100644
--- a/src/components/mdx/Sample/Sample.scss
+++ b/src/components/mdx/Sample/Sample.scss
@@ -9,7 +9,7 @@ igc-tabs {
 		flex-grow: 1;
 	}
 	
-	--item-text-color: var(--ig-gray-800);
+	--item-text-color: light-dark(var(--ig-gray-900), var(--ig-gray-50));
 	--item-hover-color: var(--igd-accent);
 	--item-background: var(--igd-layout-sections-bg);
 	--item-hover-background: var(--igd-layout-sections-bg);
@@ -20,13 +20,13 @@ igc-tabs {
 	--item-active-hover-background: var(--igd-layout-sections-bg);
 	--indicator-color: var(--igd-accent);
 	
-	--button-color: var(--ig-gray-800);
+	--button-color: light-dark(var(--ig-gray-900), var(--ig-gray-50));
 	--button-hover-color: var(--igd-accent);
 	--button-background: var(--igd-layout-sections-bg);
 	--button-hover-background: var(--igd-layout-sections-bg);
 	
 	.igd-code-view__header-actions {
-		border-block: rem(1px) solid var(--ig-gray-300);
+		border-block: rem(1px) solid light-dark(var(--ig-gray-300), var(--ig-gray-200));
 	}
 	
 	.igd-sample-container {
diff --git a/src/layouts/DocsLayout/DocsLayout.astro b/src/layouts/DocsLayout/DocsLayout.astro
index 65a8e25..8d7f514 100644
--- a/src/layouts/DocsLayout/DocsLayout.astro
+++ b/src/layouts/DocsLayout/DocsLayout.astro
@@ -61,11 +61,14 @@ type HeadEntry = { tag: string; attrs?: Record<string, string | boolean | undefi
   <slot name="head" />
   <ClientRouter />
   <script is:inline>
-    // Force light theme on load and after every View Transitions swap
-    document.documentElement.setAttribute('data-theme', 'light');
-    document.addEventListener('astro:after-swap', function () {
-      document.documentElement.setAttribute('data-theme', 'light');
-    });
+    // Restore persisted theme (or default to light) on load and after every View Transitions swap
+    function applyStoredTheme() {
+      var stored;
+      try { stored = localStorage.getItem('docs-theme'); } catch (_) {}
+      document.documentElement.setAttribute('data-theme', stored || 'light');
+    }
+    applyStoredTheme();
+    document.addEventListener('astro:after-swap', applyStoredTheme);
 
     // Enable smooth scrolling only after the page is fully loaded so the
     // browser's scroll-position restoration on refresh is instant (no visible
@@ -185,6 +188,21 @@ type HeadEntry = { tag: string; attrs?: Record<string, string | boolean | undefi
     }
     document.addEventListener('astro:page-load', initSidebarHeights);
     initSidebarHeights();
+
+    // Toggle data-scrolled-y / data-scrolled-x on each .igd-table-wrapper
+    // so the sticky header/column can show a double border while scrolled.
+    function initTableScrollStates() {
+      document.querySelectorAll('.igd-table-wrapper').forEach(function(wrapper) {
+        function update() {
+          wrapper.toggleAttribute('data-scrolled-y', wrapper.scrollTop > 0);
+          wrapper.toggleAttribute('data-scrolled-x', wrapper.scrollLeft > 0);
+        }
+        wrapper.addEventListener('scroll', update, { passive: true });
+        update();
+      });
+    }
+    document.addEventListener('astro:page-load', initTableScrollStates);
+    initTableScrollStates();
   </script>
 </head>
 <body>
@@ -200,7 +218,7 @@ type HeadEntry = { tag: string; attrs?: Record<string, string | boolean | undefi
      the .igd-page-layout not on the body.
      Any igc component rendered dynamically on body level should have .ig-typography in order to have proper type styles.
     -->
-    <div class="igd-page-layout ig-typography">
+    <div class="igd-page-layout">
         <!-- TODO: WE DONT NEED TO CALCULAtE THE IG HEADER HEIGHT ANYMORE - REMOVE IT -->
         <!-- <DocsSubHeader style={ `--docs-global-nav-height: ${ showGlobalNav ? '4.7rem': '0' }` } data-nav-height-wrapper/> -->
         <slot name="subheader">
diff --git a/src/layouts/DocsLayout/DocsLayout.scss b/src/layouts/DocsLayout/DocsLayout.scss
index c6e8093..518c9ff 100644
--- a/src/layouts/DocsLayout/DocsLayout.scss
+++ b/src/layouts/DocsLayout/DocsLayout.scss
@@ -1,6 +1,13 @@
 @use '../../styles/global/breakpoints' as *;
 @use 'igniteui-theming/sass/typography/functions' as *;
 
+// ────────────────────────────────────────────────────────────────────────────
+// Base (desktop-default) styles. Responsive overrides live in the
+// "RESPONSIVE" section at the bottom of this file — that is the single
+// place where every breakpoint-driven rule for the docs layout (and the
+// components it contains) is defined.
+// ────────────────────────────────────────────────────────────────────────────
+
 .igd-page-layout {
 	display: grid;
 	grid-template-columns: var(--igd-page-layout-grid);
@@ -8,40 +15,7 @@
 	color: var(--igd-on-app-bg);
 	margin: 0;
 	z-index: 0;
-	
-	@media (max-width: #{$bp-tablet-max}) {
-		--igd-page-layout-grid: 1fr;
-		--igd-page-padding: #{rem(38px)};
-		
-		.search-trigger__lable,
-		.search-trigger__hint {
-			display: none;
-		}
-		
-		.search-trigger {
-			border-inline-end: var(--igd-app-outline);
-		}
-	}
-	
-	@media (min-width: #{$bp-tablet-min}) {
-		justify-content: center;
-		padding-inline: 0;
-		
-		.igd-docs-subheader {
-			--igd-page-layout-grid: auto 1fr;
-		}
-	}
-	
-	@media (min-width: #{$bp-desktop-min}) {
-		.igd-docs-subheader {
-			--igd-page-layout-grid: #{minmax(rem(300px), rem(400px)) 1fr};
-		}
-	}
-	
-	@media (max-width: #{$bp-mobile-horizontal-max}) {
-		padding-inline: 0;
-	}
-	
+
 	&:not(:has(.igd-right-sidebar)) {
 		.igd-main-pane {
 			> main {
@@ -53,17 +27,8 @@
 
 .igd-main-content {
 	display: grid;
-	padding-inline: rem(32px);
 	position: relative;
-	
-	@media (min-width: #{$bp-tablet-min}) {
-		padding-inline: 0;
-	}
-	
-	@media (max-width: #{$bp-mobile-horizontal-max}) {
-		padding-inline: 0;
-	}
-	
+
 	&:not(:has(.igd-right-sidebar)) {
 		.igd-main-pane {
 			> main {
@@ -71,7 +36,7 @@
 			}
 		}
 	}
-	
+
 	// ── Static square grid background ────────────────────────────────────────────
 	// Pure CSS: two repeating-linear-gradients intersected via mask-composite
 	// create 4×4px squares at a 35px grid pitch.
@@ -84,40 +49,34 @@
 		pointer-events: none;
 		user-select: none;
 		z-index: 0;
-		
+
 		$pitch: 35px;
 		$sq:     3px;
 		$pad:   15.5px;
-		
+
 		background-color: light-dark(var(--ig-gray-500), var(--igd-accent));
-		
-		// Three mask layers, all intersected:
-		//   vignette ∩ horizontal-strips ∩ vertical-strips → squares that fade at the edges
+
+		// Two mask layers intersected:
+		//   horizontal-strips ∩ vertical-strips → squares with no edge fade
 		mask-image:
-			// 1. Vignette — opaque center, transparent at edges
-			radial-gradient(ellipse 80% 80% at 50% 40%, black 40%, transparent 100%),
-				// 2. Horizontal 4px bands at 35px pitch  (repeating-linear 0deg = top-to-bottom)
+			// 1. Horizontal 4px bands at 35px pitch  (repeating-linear 0deg = top-to-bottom)
 			repeating-linear-gradient(0deg,
 			transparent 0,           transparent #{$pad},
 			black        #{$pad},    black        #{$pad + $sq},
 			transparent  #{$pad + $sq}, transparent #{$pitch}
 			),
-				// 3. Vertical 4px bands at 35px pitch  (repeating-linear 90deg = left-to-right)
+			// 2. Vertical 4px bands at 35px pitch  (repeating-linear 90deg = left-to-right)
 			repeating-linear-gradient(90deg,
 			transparent 0,           transparent #{$pad},
 			black        #{$pad},    black        #{$pad + $sq},
 			transparent  #{$pad + $sq}, transparent #{$pitch}
 			);
-		
-		mask-size: 100% 100%, #{$pitch} #{$pitch}, #{$pitch} #{$pitch};
-		mask-composite: intersect, intersect;
-		-webkit-mask-composite: source-in, source-in;
-		
+
+		mask-size: #{$pitch} #{$pitch}, #{$pitch} #{$pitch};
+		mask-composite: intersect;
+		-webkit-mask-composite: source-in;
+
 		opacity: .5;
-		
-		@media (max-width: #{$bp-mobile-max}) {
-			display: none;
-		}
 	}
 }
 
@@ -126,12 +85,8 @@
 	gap: var(--ig-padding);
 	background-color: var(--igd-layout-sections-bg);
 	border-inline: var(--igd-app-outline);
-	width: clamp(rem(300px), 100%, rem(940px));
-	margin-inline-start: auto;
-	
-	@media (max-width: #{$bp-mobile-horizontal-max}) {
-		border: none;
-	}
+	width: clamp(rem(1000px), 100%, rem(1200px));
+	margin-inline: auto;
 }
 
 .igd-main-content__page + aside {
@@ -144,27 +99,232 @@
 	padding-inline: rem(70px) rem(32px);
 	position: relative;
 
-	@media (max-width: #{$bp-sidebar-max}) {
-		padding-inline: rem(34px) rem(16px);
-		gap: rem(24px);
+	&:has(aside) {
+		.igd-main-content__page {
+			margin-inline-end: 0;
+		}
+	}
+}
+
+.content {
+	max-width: 60rem;
+	margin: 0 auto;
+	padding: 0;
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// RESPONSIVE — 3 viewport tiers
+//
+//   mobile:    < 768px       (max-width: $bp-mobile-max)
+//   tablet:    768–1279px    (max-width: $bp-tablet-max  /  min-width: $bp-tablet-min)
+//   desktop:   ≥ 1280px      (default — no media query)
+//
+// This is the single source of truth for every responsive rule that affects
+// the docs layout and the components rendered inside `.igd-page-layout`.
+// ════════════════════════════════════════════════════════════════════════════
+
+
+@media (max-width: #{$bp-reduce-sidebar}) {
+	.igd-page-layout {
+		--igd-page-layout-grid: #{minmax(rem(200px), rem(290px)) 1fr};
 	}
 	
-	@media (max-width: #{$bp-tablet-max}) {
-		padding-inline: rem(16px);
-		gap: rem(16px)
+	.igd-main-content__inner {
+		padding-inline: rem(26px) 0;
+		gap: rem(26px);
+	}
+}
+
+// ── Mobile + Tablet (< 1280px) — everything below desktop ──────────────────
+@media (max-width: #{$bp-tablet-max}) {
+	:root {
+		--igd-header-height: #{rem(50px)};
+		--igd-page-padding: #{rem(38px)};
+	}
+
+	// Single-column page grid; subheader follows via subgrid.
+	.igd-page-layout {
+		--igd-page-layout-grid: 1fr;
 	}
 	
-	@media (max-width: #{$bp-mobile-horizontal-max}) {
-		padding: 0;
+	.igd-main-content {
+		grid-row: 2;
+	}
+
+	// Logo only shown on desktop, where it can sit in its own sidebar-aligned column.
+	.igd-logo {
+		display: none;
+	}
+
+	// Search: collapse trigger to icon-only and reveal the mobile-only close UI.
+	.search-trigger {
+		max-width: none;
+		width: auto;
+	}
+
+	.search-trigger__label,
+	.search-trigger__lable,
+	.search-trigger__hint {
+		display: none;
+	}
+
+	.igd-search-mobile-bar {
+		display: flex;
+	}
+
+	// Sidebar becomes a fixed slide-in overlay, hidden off-screen by default.
+	.docs-sidebar {
+		--igd-sidebar-z-index: 1000;
 		
+		position: fixed;
+		inset-block: 0;
+		inset-inline-start: 0;
+		height: 100dvh;
+		max-height: 100dvh;
+		width: min(rem(360px), 85vw);
+		transform: translateX(-100%);
+		transition: transform 250ms ease, box-shadow 250ms ease;
+		box-shadow: none;
+	}
+
+	.docs-sidebar-backdrop {
+		display: block;
+		position: fixed;
+		inset: 0;
+		z-index: 99;
+		background: light-dark(var(--ig-gray-900), var(--ig-gray-100));
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 250ms ease;
+	}
+
+	body[data-sidebar-open] {
+		overflow: hidden;
+
+		.docs-sidebar {
+			transform: translateX(0);
+			box-shadow: var(--ig-elevation-8);
+		}
+
+		.docs-sidebar-backdrop {
+			opacity: .6;
+			pointer-events: auto;
+			backdrop-filter: blur(10px);
+		}
+	}
+
+	// Subheader sidebar toggle reveals when the sidebar is not persistent.
+	.subheader-sidebar-toggle {
+		display: flex;
+		flex-shrink: 0;
+	}
+
+	// Logo inside the slide-in sidebar (visible only when sidebar is an overlay).
+	.sidebar-logo {
+		display: flex;
+		margin-block-end: rem(16px);
+	}
+
+	.igd-main-content__inner {
+		padding-inline: 0;
+	}
+	
+	// This is the height of the input in fluent theme + 8px padding + height of the logo above
+	.sidebar-gutter {
+		min-height: rem(80px);
+	}
+}
+
+// ── Mobile only (< 768px) ──────────────────────────────────────────────────
+@media (max-width: #{$bp-mobile-max}) {
+	.igd-main-content::before {
+		display: none;
+	}
+
+	.igd-version-select {
+		max-width: rem(90px);
+	}
+
+	.igd-docs-subheader {
+		padding-inline-end: rem(16px);
+	}
+
+	.igd-docs-subheader__content:last-child {
+		margin-inline-end: 0;
+	}
+
+	.mobile-toc {
+		display: block;
+		position: sticky;
+		top: var(--igd-header-height);
+		z-index: 10;
+		grid-column: 1 / -1;
+		border-block-end: var(--igd-app-outline);
+		background-color: var(--igd-layout-sections-bg);
+	}
+
+	.igd-main-content__markdown {
+		padding-inline: rem(32px);
+	}
+
+	// Search dialog goes fullscreen on mobile only.
+	// `.igd-page-layout` prefix bumps specificity so this beats the
+	// centered-card base styles declared in Search.scss / SearchAdvanced.scss
+	// (those files load after this one in the Astro bundle).
+	.igd-page-layout .search-dialog,
+	.igd-page-layout .igd-search-dialog::part(base) {
+		margin: 0;
+		width: 100%;
+		max-width: 100%;
+		height: 100dvh;
+		max-height: 100dvh;
+		border-radius: 0;
+	}
+	
+	.search-trigger.search-close {
+		display: flex;
+		flex-shrink: 0;
+		padding-inline: var(--igd-padding-sm);
+	}
+	
+	igc-input {
+		&::part(container) {
+			&:focus-within {
+				box-shadow:
+					0 0 0 1px var(--igd-accent),
+					inset 0 1px 0 var(--igd-accent),
+					inset 0 -1px 0 var(--igd-accent),
+					 -1px 0 0 var(--igd-accent);
+			}
+		}
+	}
+}
+
+@media (max-width: #{$bp-hide-toc}) {
+	.igd-main-content__inner {
 		aside {
 			display: none;
 		}
 	}
+	
+	
+	.igd-main-content__page {
+		border: none;
+	}
 }
 
-.content {
-	max-width: 60rem;
-	margin: 0 auto;
-	padding: 0;
+// ── Tablet + Desktop (≥ 768px) ─────────────────────────────────────────────
+@media (min-width: #{$bp-tablet-min}) {
+	.igd-page-layout {
+		justify-content: center;
+	}
+
+	.igd-package-select::part(native-input),
+	.igd-version-select::part(native-input) {
+		field-sizing: content;
+
+		&::part(base) {
+			min-width: 100%;
+		}
+	}
 }
diff --git a/src/styles/global/_breakpoints.scss b/src/styles/global/_breakpoints.scss
index 5756db2..0215e19 100644
--- a/src/styles/global/_breakpoints.scss
+++ b/src/styles/global/_breakpoints.scss
@@ -1,48 +1,26 @@
 @use 'igniteui-theming/sass/typography/functions' as *;
 
-// Breakpoints
-
-// Single source of truth for all responsive breakpoints.
-
-// Viewport ranges:
-//   mobile            < 480px   (≤ 29.999rem)
-//   mobile-horizontal 480–767px (30rem – 47.999rem)
-//   tablet            768–1023px (48rem – 63.999rem)
-//   desktop           1024–1439px (64rem – 89.999rem)
-//   large-desktop     ≥ 1440px  (≥ 90rem)
-
+// Breakpoints — 3 viewport tiers
+//
+//   mobile:   < 768px               (max-width: $bp-mobile-max)
+//   tablet:   768px – 1279px        (max-width: $bp-tablet-max / min-width: $bp-tablet-min)
+//   desktop:  ≥ 1280px              (min-width: $bp-desktop-min)
+//
 // Usage:  @media (max-width: #{$bp-mobile-max}) { … }
 // Never use var() inside @media — CSS custom properties don't work there.
 
-/// Upper bounds (max-width)
-/// Top of mobile range  (< 480px)
-$bp-mobile-max: #{rem(479px)};
-
-/// Top of mobile-horizontal range (< 768px)
-$bp-mobile-horizontal-max: #{rem(767px)};
-
-/// Top of tablet range (< 1024px)
-$bp-tablet-max: #{rem(1023px)};
-
-/// Top of desktop range (< 1440px)
-$bp-desktop-max: #{rem(1439px)};
-
-/// Lower bounds (min-width)
-/// Start of mobile-horizontal (≥ 480px)
-$bp-mobile-horizontal-min: #{rem(480px)};
+/// Top of mobile range (< 768px)
+$bp-mobile-max: #{rem(767px)};
 
-/// Start of tablet (≥ 768px)
+/// Start of tablet range (≥ 768px)
 $bp-tablet-min: #{rem(768px)};
 
-/// Start of desktop (≥ 1024px)
-$bp-desktop-min: #{rem(1024px)};
+/// Top of tablet range (< 1280px)
+$bp-tablet-max: #{rem(1279px)};
 
-/// Start of large-desktop (≥ 1280px)
-$bp-large-desktop-min: #{rem(1280px)};
+$bp-reduce-sidebar: #{rem(1500px)};
 
-/// Layout-specific
-/// Below this the sidebar becomes a slide-in overlay (< 1300px)
-$bp-sidebar-max: #{rem(1600px)};
+$bp-hide-toc: #{rem(1100px)};
 
-/// At this and above the sidebar is always visible (≥ 1300px)
-$bp-sidebar-min: #{rem(1400px)};
+/// Start of desktop range (≥ 1280px)
+$bp-desktop-min: #{rem(1280px)};
diff --git a/src/styles/global/_component-themes.scss b/src/styles/global/_component-themes.scss
index 19fb583..039cd36 100644
--- a/src/styles/global/_component-themes.scss
+++ b/src/styles/global/_component-themes.scss
@@ -1,4 +1,3 @@
-@use '../../styles/global/breakpoints' as *;
 @use 'igniteui-theming' as *;
 
 
@@ -68,25 +67,6 @@ igc-select::part(toggle-icon) {
 }
 
 
-@media (max-width: #{$bp-mobile-max}) {
-	.igd-version-select {
-		max-width: rem(90px);
-	}
-}
-
-@media (min-width: #{$bp-mobile-max}) {
-	.igd-package-select::part(native-input),
-	.igd-version-select::part(native-input) {
-		field-sizing: content;
-		
-		&::part(base) {
-			min-width: 100%;
-		}
-	}
-	
-
-}
-
 igc-select-item {
 	margin-block: 0;
 }
@@ -105,7 +85,7 @@ igc-select::part(base) {
 }
 
 igc-icon-button[variant='outlined'] {
-	--foreground: light-dark(var(--ig-gray-900), var(--ig-gray-200));
+	--foreground: light-dark(var(--ig-gray-900), var(--ig-gray-700));
 	--hover-foreground: var(--igd-accent);
 	--focus-foreground: var(--igd-accent);
 	--active-foreground: var(--igd-accent);
@@ -117,8 +97,9 @@ igc-icon-button[variant='outlined'] {
 	--focus-hover-background: transparent;
 	--focus-visible-background: transparent;
 	
-	--border-color: light-dark(var(--ig-gray-400), var(--ig-gray-700));
-	--focus-border-color: light-dark(var(--ig-gray-400), var(--ig-gray-700));
+	--border-color: light-dark(var(--ig-gray-400), var(--ig-gray-200));
+	--focus-border-color: light-dark(var(--ig-gray-400), var(--ig-gray-200));
+	--hover-border-color: light-dark(var(--ig-gray-400), var(--ig-gray-200));
 	--border-radius: #{rem(4px)};
 	
 	&::part(base) {
@@ -136,13 +117,13 @@ igc-icon-button[variant='outlined'] {
 
 igc-button[variant='outlined'] {
 	&::part(base) {
-		--border-color: light-dark(var(--ig-gray-400), var(--ig-gray-700));
-		--hover-border-color: light-dark(var(--ig-gray-400), var(--ig-gray-700));
-		--focus-border-color: light-dark(var(--ig-gray-400), var(--ig-gray-700));
+		--border-color: light-dark(var(--ig-gray-400), var(--ig-gray-200));
+		--hover-border-color: light-dark(var(--ig-gray-400), var(--ig-gray-200));
+		--focus-border-color: light-dark(var(--ig-gray-400), var(--ig-gray-200));
 		--focus-visible-border-color: light-dark(var(--ig-gray-400), var(--ig-gray-700));
 		--active-border-color: light-dark(var(--ig-gray-400), var(--ig-gray-700));
 		
-		--foreground: light-dark(var(--ig-gray-900), var(--ig-gray-200));
+		--foreground: light-dark(var(--ig-gray-900), var(--ig-gray-700));
 		--hover-foreground: var(--igd-accent);
 		--focus-foreground: var(--igd-accent);
 		--active-foreground: var(--igd-accent);
diff --git a/src/styles/global/_markdown.scss b/src/styles/global/_markdown.scss
index 1e8e4c6..5f92945 100644
--- a/src/styles/global/_markdown.scss
+++ b/src/styles/global/_markdown.scss
@@ -1,532 +1,594 @@
-@use '../../styles/global/breakpoints' as *;
 @use 'igniteui-theming/sass/typography' as *;
 
-// 'code' and 'small' are custom type-scale entries — their CSS vars are
-// generated by typography() but type-style() only accepts standard names.
-// Read the generated --ig-* vars directly to avoid the warning.
-.igd-main-content__markdown {
-	padding: var(--igd-page-padding);
-	min-width: 0;
-	
-	> pre {
-		@include type-style('code', false) {
-			margin: 0;
-		};
+@layer components {
+	// 'code' and 'small' are custom type-scale entries — their CSS vars are
+	// generated by typography() but type-style() only accepts standard names.
+	// Read the generated --ig-* vars directly to avoid the warning.
+	.igd-main-content__markdown {
+		p {
+			@include type-style('body-1');
+		}
 		
-		border: rem(1px) solid light-dark(var(--ig-gray-200), var(--ig-primary-900));
-		background-color: light-dark(var(--ig-gray-50), var(--ig-gray-50)) !important;
-		color: light-dark(var(--ig-gray-900), var(--ig-gray-800));
-	}
-	
-	> pre,
-	> code {
-		margin-block-end: rem(26px);
-	}
-	
-	kbd {
-		@include type-style('code', false) {
-			margin: 0;
-		};
+		h1 {
+			@include type-style('h1');
+		}
 		
-		background-color: var(--ig-gray-100);
-		color: var(--ig-gray-100-contrast);
-		box-shadow: none;
-		border: rem(1px) solid var(--ig-gray-300);
-	}
-	
-	// <code> that is not inside a <pre> tag
-	code:not(pre code) {
-		@include type-style('code', false) {
-			margin: 0;
-		};
+		h2 {
+			@include type-style('h2');
+		}
 		
-		background: light-dark(var(--ig-primary-50), var(--ig-gray-50));
-		color: light-dark(var(--ig-primary-600), var(--ig-gray-500));
-		border: rem(1px) solid light-dark(var(--ig-gray-300), var(--ig-gray-200));
+		h3 {
+			@include type-style('h3');
+		}
 		
-		padding: rem(4px) rem(8px);
-		border-radius: rem(4px);
-	}
-	
-	> ul,
-	> ol,
-	> dl {
-		@include type-style('body-2') {
-			margin: 0;
+		h4 {
+			@include type-style('h4');
+		}
+		
+		h5 {
+			@include type-style('h5');
 		}
 		
-		padding-inline-start: rem(18px);
-		padding-block: 0;
+		h6 {
+			@include type-style('h6');
+		}
 		
-		li {
-			@include type-style('secondary-text', false) {
+		p,h1,h2,h3,h4,h5,h6,table {
+			code {
+				margin-block-end: 0;
+			}
+		}
+		
+		color: light-dark(var(--ig-gray-700), var(--ig-gray-500));
+		
+		padding: var(--igd-page-padding);
+		min-width: 0;
+		
+		pre {
+			@include type-style('code', false) {
 				margin: 0;
 			};
 			
-			> strong {
-				@include type-style('subtitle-2') {
-					margin: 0;
-				}
-			;
+			border: rem(1px) solid light-dark(var(--ig-gray-200), var(--ig-primary-900));
+			background-color: light-dark(var(--ig-gray-50), var(--ig-gray-50)) !important;
+			color: light-dark(var(--ig-gray-900), var(--ig-gray-800));
+		}
+		
+		pre,
+		code {
+			margin-block-end: rem(26px);
+		}
+		
+		code {
+			--shiki-dark-bg: transparent;
+			--shiki-light-bg: transparent;
+		}
+		
+		kbd {
+			@include type-style('code', false) {
+				margin: 0;
+			};
+			
+			background-color: var(--ig-gray-100);
+			color: var(--ig-gray-100-contrast);
+			box-shadow: none;
+			border: rem(1px) solid var(--ig-gray-300);
+		}
+		
+		// <code> that is not inside a <pre> tag
+		code:not(pre code) {
+			@include type-style('code', false) {
+				margin: 0;
+			};
+			
+			background: light-dark(var(--ig-primary-50), #112031);
+			color: light-dark(var(--ig-primary-600), var(--ig-gray-400));
+			border: rem(1px) solid light-dark(var(--ig-gray-300), #1A314A);
+			
+			padding: rem(4px) rem(8px);
+			border-radius: rem(4px);
+		}
+		
+		ul,
+		ol,
+		dl {
+			@include type-style('body-1') {
+				margin: 0;
 			}
 			
-			position: relative;
-			color: var(--ig-gray-700);
-			padding-inline: 0 rem(8px);
-			padding-block: rem(8px);
+			padding-inline-start: rem(18px);
+			padding-block: 0;
+			color: inherit;
 			
-			> .shiki {
-				margin-top: rem(8px);
+			li {
+				> strong {
+					@include type-style('subtitle-2') {
+						margin: 0;
+					}
+				;
+				}
+				
+				position: relative;
+				color: inherit;
+				padding-inline: 0 rem(8px);
+				padding-block: rem(8px);
+				
+				> .shiki {
+					margin-top: rem(8px);
+				}
+				
+				::marker {
+					color: var(--ig-gray-700);
+				}
+				
+				&:has(> ul) {
+					padding-block-end: 0;
+				}
 			}
 			
-			::marker {
-				color: var(--ig-gray-700);
+			code {
+				margin-block-end: 0;
 			}
 			
-			&:has(> ul) {
-				padding-block-end: 0;
+			p, h1, h2, h3, h4, h5, h6:only-child {
+				margin: 0;
 			}
 		}
 		
-		p, h1, h2, h3, h4, h5, h6:only-child {
-			margin: 0;
+		// <ul> that is not inside <li>
+		// <ol> that is not inside <li>
+		ul:not(li ul),
+		ol:not(li ol),
+		dl:not(dd dl)
+		{
+			margin-bottom: rem(26px) !important;
 		}
-	}
-	
-	// <ul> that is not inside <li>
-	// <ol> that is not inside <li>
-	> ul:not(li ul),
-	> ol:not(li ol),
-	> dl:not(dd dl)
-	{
-		margin-bottom: rem(26px) !important;
-	}
-	
-	dl {
-		padding-inline-start: 0;
 		
-		dt {
-			color: var(--ig-gray-900);
-		}
-		
-		dd {
-			margin-block-end: rem(16px);
-			color: var(--ig-gray-700);
+		dl {
+			padding-inline-start: 0;
+			
+			dt {
+				color: var(--ig-gray-900);
+			}
+			
+			dd {
+				margin-block-end: rem(16px);
+				color: inherit;
+			}
 		}
-	}
-	
-	> address {
-		line-height: rem(32px);
 		
-		p {
-			@include type-style('body-2') {
-				line-height: rem(32px);
-			};
+		address {
+			line-height: rem(32px);
+			
+			p {
+				@include type-style('body-2') {
+					line-height: rem(32px);
+				};
+			}
+			
+			a {
+				color: inherit;
+				text-decoration: underline;
+			}
+			
+			margin-block-end: rem(26px);
 		}
 		
 		a {
 			color: inherit;
 			text-decoration: underline;
+			
+			&:hover,
+			&:focus {
+				color: light-dark(var(--ig-primary-600), var(--ig-primary-100));
+			}
 		}
 		
-		margin-block-end: rem(26px);
-	}
-	
-	a {
-		color: inherit;
-		text-decoration: underline;
-		
-		&:hover,
-		&:focus {
-			color: light-dark(var(--ig-primary-600), var(--ig-primary-100));
+		.igd-defined-in {
+			> span {
+				white-space: nowrap;
+			}
+			
+			border: 1px solid light-dark(var(--ig-primary-500), var(--ig-primary-800));
+			padding: rem(8px) rem(16px);
+			border-radius: var(--igd-border-radius);
+			
+			@include type-style('body-1');
+			
+			display: grid;
+			align-items: start;
+			grid-template-columns: auto 1fr;
+			gap: rem(8px);
+			color: var(--ig-secondary-500);
+			margin-block-end: rem(26px);
+			
+			a {
+				min-width: 0;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				overflow: hidden;
+			}
 		}
-	}
+		
+		// Headings injected with anchor link button by rehype-heading-anchors
+		h2, h3, h4, h5, h6 {
+			display: flex;
+			align-items: center;
+			gap: rem(8px);
+			// CSS baseline: ensure in-page anchor links scroll the heading clear of
+			// the sticky subheader. The JS-driven scroll-padding-top set by DocsToc
+			// (using the measured subheader bottom) takes precedence when available.
+			scroll-margin-top: rem(18px);
 	
-	.igd-defined-in {
-		> span {
-			white-space: nowrap;
+			&:hover .igd-anchor-link {
+				opacity: 1;
+			}
 		}
 		
-		border: 1px solid light-dark(var(--ig-primary-500), var(--ig-primary-800));
-		padding: rem(8px) rem(16px);
-		border-radius: var(--igd-border-radius);
-		
-		@include type-style('body-1');
-		
-		display: grid;
-		align-items: start;
-		grid-template-columns: auto 1fr;
-		gap: rem(8px);
-		color: var(--ig-secondary-500);
-		margin-block-end: rem(26px);
-		
-		a {
-			min-width: 0;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
+		h1, h2, h3, h4, h5, h6 {
+			color: light-dark(var(--ig-gray-800), var(--ig-gray-700));
 		}
-	}
 	
-	// Headings injected with anchor link button by rehype-heading-anchors
-	h2, h3, h4, h5, h6 {
-		display: flex;
-		align-items: center;
-		gap: rem(8px);
-		// CSS baseline: ensure in-page anchor links scroll the heading clear of
-		// the sticky subheader. The JS-driven scroll-padding-top set by DocsToc
-		// (using the measured subheader bottom) takes precedence when available.
-		scroll-margin-top: rem(18px);
-
-		&:hover .igd-anchor-link {
-			opacity: 1;
+		.igd-anchor-link {
+			opacity: 0;
+			flex-shrink: 0;
+			transition: opacity 0.15s ease;
+	
+			// igc-icon-button internal sizing
+			--ig-size: 1;
+			--foreground: var(--ig-secondary-500);
+			--background: light-dark(var(--ig-gray-100), var(--ig-secondary-900));
+			--border-color: light-dark(var(--ig-gray-100), var(--ig-secondary-500));
+			
+			--hover-foreground: var(--ig-secondary-500);
+			--hover-background: light-dark(var(--ig-gray-100), var(--ig-secondary-900));
+			
+			--focus-foreground: var(--ig-secondary-500);
+			--focus-background: light-dark(var(--ig-gray-100), var(--ig-secondary-900));
+			
+			--active-foreground: var(--ig-secondary-500);
+			--active-background: light-dark(var(--ig-gray-100), var(--ig-secondary-900));
+	
+			&::part(focused) {
+				&:after {
+					display: none;
+				}
+			}
+			
+			&:focus-within,
+			&:focus-visible {
+				opacity: 1;
+				outline: none;
+			}
+	
+			igc-icon {
+				--size: rem(24px);
+			}
 		}
-	}
-
-	.igd-anchor-link {
-		opacity: 0;
-		flex-shrink: 0;
-		transition: opacity 0.15s ease;
-
-		// igc-icon-button internal sizing
-		--ig-size: 1;
-		--foreground: var(--ig-secondary-500);
-		--background: light-dark(var(--ig-gray-100), var(--ig-secondary-900));
-		--border-color: light-dark(var(--ig-gray-100), var(--ig-secondary-500));
 		
-		--hover-foreground: var(--ig-secondary-500);
-		--hover-background: light-dark(var(--ig-gray-100), var(--ig-secondary-900));
-		
-		--focus-foreground: var(--ig-secondary-500);
-		--focus-background: light-dark(var(--ig-gray-100), var(--ig-secondary-900));
-		
-		--active-foreground: var(--ig-secondary-500);
-		--active-background: light-dark(var(--ig-gray-100), var(--ig-secondary-900));
-
-		&::part(focused) {
-			&:after {
-				display: none;
-			}
+		.lead {
+			margin-bottom: rem(26px)
 		}
 		
-		&:focus-within,
-		&:focus-visible {
-			opacity: 1;
-			outline: none;
+		img {
+			display: block;
+			max-width: 100%;
+			height: auto;
+			margin-block-end: rem(26px);
+			border-radius: var(--igd-border-radius);
+			content-visibility: auto;
 		}
-
-		igc-icon {
-			--size: rem(24px);
+	
+		// Image wrapped in a link — no underline, contain the block margin
+		a:has(> img) {
+			text-decoration: none;
+			display: inline-block;
 		}
-	}
 	
-	.lead {
-		margin-bottom: rem(26px)
-	}
+		// Figure / figcaption
+		figure {
+			margin-inline: 0;
+			margin-block-end: rem(26px);
 	
-	img {
-		display: block;
-		max-width: 100%;
-		height: auto;
-		margin-block-end: rem(26px);
-		border-radius: var(--igd-border-radius);
-		content-visibility: auto;
-	}
-
-	// Image wrapped in a link — no underline, contain the block margin
-	a:has(> img) {
-		text-decoration: none;
-		display: inline-block;
-	}
-
-	// Figure / figcaption
-	figure {
-		margin-inline: 0;
-		margin-block-end: rem(26px);
-
-		// Nested img should not double-margin
-		img,
-		video,
-		p, h1, h2, h3, h4, h5, h6 {
-			margin-block-end: 0;
+			// Nested img should not double-margin
+			img,
+			video,
+			p, h1, h2, h3, h4, h5, h6 {
+				margin-block-end: 0;
+			}
 		}
-	}
-
-	figcaption {
-		@include type-style('caption') { margin: 0; }
-		
-		> p {
+	
+		figcaption {
 			@include type-style('caption') { margin: 0; }
-		}
-
-		padding-block-start: rem(8px);
-		margin-block-end: rem(26px);
-		color: var(--ig-gray-600);
-		text-align: center;
-	}
+			
+			> p {
+				@include type-style('caption') { margin: 0; }
+			}
 	
-	blockquote {
-		padding: rem(16px);
-		border-inline-start-width: rem(1px);
-		border-inline-start-color:  var(--ig-gray-500);
-		margin-block-end: rem(26px);
+			padding-block-start: rem(8px);
+			margin-block-end: rem(26px);
+			color: var(--ig-gray-600);
+			text-align: center;
+		}
 		
-		p:only-child {
-			@include type-style('detail-1', false) {
+		blockquote {
+			padding: rem(16px);
+			border-inline-start-width: rem(1px);
+			border-inline-start-color:  var(--ig-gray-500);
+			margin-block-end: rem(26px);
+			
+			p:only-child {
+				@include type-style('detail-1', false) {
+					margin: 0;
+					font-style: italic;
+				}
+				
 				margin: 0;
-				font-style: italic;
 			}
+		}
+		
+		blockquote .small,
+		blockquote footer,
+		blockquote small {
+			@include type-style('detail-1', false) { margin: 0; }
 			
-			margin: 0;
+			color: var(--ig-gray-600);
 		}
-	}
 	
-	blockquote .small,
-	blockquote footer,
-	blockquote small {
-		@include type-style('detail-1', false) { margin: 0; }
-		
-		color: var(--ig-gray-600);
-	}
-
-	// Responsive video / iframe embeds
-	// Wrap a YouTube (or any 16:9) <iframe> in:
-	//   <div class="igd-video"> … </div>
-	// or <figure class="igd-video"> for a caption.
-	.igd-video {
-		position: relative;
-		width: 100%;
-		aspect-ratio: 16 / 9;
-		margin-block-end: rem(26px);
-		border-radius: var(--igd-border-radius);
-		overflow: hidden;
-		outline: rem(1px) solid light-dark(var(--ig-gray-200), var(--ig-gray-700));
-
-		iframe,
-		video {
-			position: absolute;
-			inset: 0;
+		// Responsive video / iframe embeds
+		// Wrap a YouTube (or any 16:9) <iframe> in:
+		//   <div class="igd-video"> … </div>
+		// or <figure class="igd-video"> for a caption.
+		.igd-video {
+			position: relative;
 			width: 100%;
-			height: 100%;
-			border: 0;
-		}
-	}
-
-	// Native <video> standalone
-	video {
-		display: block;
-		max-width: 100%;
-		height: auto;
-		border-radius: var(--igd-border-radius);
-		margin-block-end: rem(26px);
-		font-family: inherit;
-		outline: rem(1px) solid light-dark(var(--ig-gray-200), var(--ig-gray-700));
-	}
-
-	// Native <audio> standalone
-	audio {
-		display: block;
-		width: 100%;
-		margin-block-end: rem(26px);
-	}
+			aspect-ratio: 16 / 9;
+			margin-block-end: rem(26px);
+			border-radius: var(--igd-border-radius);
+			overflow: hidden;
+			outline: rem(1px) solid light-dark(var(--ig-gray-200), var(--ig-gray-100));
 	
-	p, ul, ol, table {
-		code {
-			@include type-style('code', false) {
-				margin: 0;
-			};
-			
-			padding: rem(2px) rem(4px);
-			font-size: 90%;
-			color: var(--ig-primary-800);
-			background-color: var(--ig-primary-50);
-			border-radius: rem(4px);
-		}
-		
-		a:has(code) {
-			text-decoration: none;
-			
-			&:hover {
-				text-decoration: underline;
+			iframe,
+			video {
+				position: absolute;
+				inset: 0;
+				width: 100%;
+				height: 100%;
+				border: 0;
 			}
 		}
-	}
 	
-	> hr {
-		border: none;
-		border-block-start: rem(1px) solid light-dark(var(--ig-gray-200), var(--ig-gray-100));
-		margin-block: rem(26px);
-	}
-	
-	@media (max-width: #{$bp-mobile-horizontal-max}) {
-		padding-inline: rem(32px);
-	}
-}
-
-// Theme property map tab switcher (used in component theming sections)
-.theme-switcher-wrapper {
-	input[type='radio'][name='theme'] {
-		display: none;
-	}
-
-	.switch-label {
-		display: inline-block;
-		cursor: pointer;
-		padding: rem(6px) rem(16px);
-		border-bottom: rem(2px) solid transparent;
-		margin-inline-end: rem(4px);
-		color: var(--ig-gray-600);
-
-		&:hover {
-			color: var(--ig-gray-900);
+		// Native <video> standalone
+		video {
+			display: block;
+			max-width: 100%;
+			height: auto;
+			border-radius: var(--igd-border-radius);
+			margin-block-end: rem(26px);
+			font-family: inherit;
+			outline: rem(1px) solid light-dark(var(--ig-gray-200), var(--ig-gray-100));
 		}
-	}
-
-	.tables .theme-table {
-		display: none;
-	}
-
-	#material:checked ~ .tables .theme-table.material,
-	#fluent:checked ~ .tables .theme-table.fluent,
-	#bootstrap:checked ~ .tables .theme-table.bootstrap,
-	#indigo:checked ~ .tables .theme-table.indigo {
-		display: block;
-	}
-
-	#material:checked ~ label[for='material'],
-	#fluent:checked ~ label[for='fluent'],
-	#bootstrap:checked ~ label[for='bootstrap'],
-	#indigo:checked ~ label[for='indigo'] {
-		color: var(--igd-accent);
-		border-bottom-color: var(--igd-accent);
-		font-weight: 600;
-	}
-}
-
-// Scroll container — wraps every <table> (injected by rehypeTableWrapper).
-// Technique from https://piccalil.li/blog/styling-tables-the-modern-css-way/
-.igd-table-wrapper {
-	overflow: auto;
-	max-height: var(--igd-table-max-height);
-	border: rem(1px) solid var(--igd-table-border-color);
-	margin-block-end: rem(26px);
-	width: 100%;
-	position: relative;
-	z-index: 0;
 	
-	table {
-		font-family: inherit;
-		border-collapse: collapse;
-		
-		// Ensure the table is at least as wide as its container but can grow
-		// wider for many columns — enabling horizontal scroll in the wrapper.
-		min-width: 100%;
-		color: var(--igd-table-fg);
-		
-		th {
-			white-space: nowrap;
-		}
-		
-		td, th {
-			// Only row borders — no column dividers.
-			border-block: rem(1px) solid var(--igd-table-border-color);
-			border-inline: none;
-			padding-block: rem(16px);
-			padding-inline: rem(24px);
-			vertical-align: baseline;
+		// Native <audio> standalone
+		audio {
+			display: block;
+			width: 100%;
+			margin-block-end: rem(26px);
 		}
 		
-		// First row: no top border — the wrapper provides it.
-		thead tr:first-child th,
-		tbody tr:first-child td,
-		tbody tr:first-child th {
-			border-block-start: none;
-		}
 		
-		// Last row: no bottom border — the wrapper provides it.
-		tbody tr:last-child td,
-		tbody tr:last-child th,
-		tfoot tr:last-child td,
-		tfoot tr:last-child th {
-			border-block-end: none;
+		> hr {
+			border: none;
+			border-block-start: rem(1px) solid light-dark(var(--ig-gray-200), var(--ig-gray-100));
+			margin-block: rem(26px);
 		}
-		
-		thead th {
-			vertical-align: bottom;
-			
-			// Remove the cell's own bottom border — the ::after pseudo-element
-			// on the sticky rule below provides the single 2px line.
-			border-block-end: none;
+	}
+	
+	// Theme property map tab switcher (used in component theming sections)
+	.theme-switcher-wrapper {
+		input[type='radio'][name='theme'] {
+			display: none;
 		}
-		
-		// Zebra effect — disabled by default.
-		tr {
-			background-color: var(--igd-table-bg);
+	
+		.switch-label {
+			display: inline-block;
+			cursor: pointer;
+			padding: rem(6px) rem(16px);
+			border-bottom: rem(2px) solid transparent;
+			margin-inline-end: rem(4px);
+			color: var(--ig-gray-600);
+	
+			&:hover {
+				color: var(--ig-gray-900);
+			}
 		}
-		
-		tr:nth-child(even) {
-			background-color: var(--igd-tabe-row-even-bg);
+	
+		.tables .theme-table {
+			display: none;
 		}
-		
-		tr:hover {
-			background-color: var(--igd-tabe-row-hover-bg);
+	
+		#material:checked ~ .tables .theme-table.material,
+		#fluent:checked ~ .tables .theme-table.fluent,
+		#bootstrap:checked ~ .tables .theme-table.bootstrap,
+		#indigo:checked ~ .tables .theme-table.indigo {
+			display: block;
 		}
-		
-		th {
-			text-align: left;
-			background-color: var(--igd-table-header-bg);
-			color: var(--igd-table-header-fg);
+	
+		#material:checked ~ label[for='material'],
+		#fluent:checked ~ label[for='fluent'],
+		#bootstrap:checked ~ label[for='bootstrap'],
+		#indigo:checked ~ label[for='indigo'] {
+			color: var(--igd-accent);
+			border-bottom-color: var(--igd-accent);
+			font-weight: 600;
 		}
+	}
+	
+	// Scroll container — wraps every <table> (injected by rehypeTableWrapper).
+	// Technique from https://piccalil.li/blog/styling-tables-the-modern-css-way/
+	.igd-table-wrapper {
+		overflow: auto;
+		max-height: var(--igd-table-max-height);
+		border: rem(1px) solid var(--igd-table-border-color);
+		margin-block-end: rem(26px);
+		width: 100%;
+		position: relative;
+		z-index: 0;
 		
-		// Sticky header row
-		thead th {
-			position: sticky;
-			top: 0;
-			z-index: 2;
-			
-			// ::before for the bottom border so it doesn't conflict with the
-			// ::after column separator on th:first-child (both are the same element).
-			&::before {
-				content: '';
-				position: absolute;
-				inset-block-end: 0;
+		table {
+			font-family: inherit;
+			border-collapse: collapse;
+			
+			// Ensure the table is at least as wide as its container but can grow
+			// wider for many columns — enabling horizontal scroll in the wrapper.
+			min-width: 100%;
+			color: var(--igd-table-fg);
+			
+			th {
+				@include type-style('subtitle-2') {
+					margin: 0;
+				}
+				
+				white-space: nowrap;
+			}
+			
+			td {
+				@include type-style('detail-1', false) {
+					margin: 0;
+				}
+			}
+			
+			td, th {
+				// Only row borders — no column dividers.
+				border-block: rem(1px) solid var(--igd-table-border-color);
+				border-inline: none;
+				padding-block: rem(16px);
+				padding-inline: rem(24px);
+				vertical-align: baseline;
+			}
+			
+			// First row: no top border — the wrapper provides it.
+			thead tr:first-child th,
+			tbody tr:first-child td,
+			tbody tr:first-child th {
+				border-block-start: none;
+			}
+			
+			// Last row: no bottom border — the wrapper provides it.
+			tbody tr:last-child td,
+			tbody tr:last-child th,
+			tfoot tr:last-child td,
+			tfoot tr:last-child th {
+				border-block-end: none;
+			}
+			
+			thead th {
+				vertical-align: bottom;
+				
+				// Remove the cell's own bottom border — the ::after pseudo-element
+				// on the sticky rule below provides the single 2px line.
+				border-block-end: none;
+			}
+			
+			// Zebra effect — disabled by default.
+			tr {
+				background-color: var(--igd-table-bg);
+			}
+			
+			tr:nth-child(even) {
+				background-color: var(--igd-tabe-row-even-bg);
+			}
+			
+			tr:hover {
+				background-color: var(--igd-tabe-row-hover-bg);
+			}
+			
+			th {
+				text-align: left;
+				background-color: var(--igd-table-header-bg);
+				color: var(--igd-table-header-fg);
+			}
+			
+			// Sticky header row
+			thead th {
+				position: sticky;
+				top: 0;
+				z-index: 2;
+				
+				// ::before for the bottom border so it doesn't conflict with the
+				// ::after column separator on th:first-child (both are the same element).
+				&::before {
+					content: '';
+					position: absolute;
+					inset-block-end: 0;
+					inset-inline-start: 0;
+					width: 100%;
+					height: var(--igd-table-pinned-border-size);
+					background: var(--igd-table-border-color);
+				}
+			}
+	
+			// Double bottom border on the sticky header row when scrolled vertically.
+			.igd-table-wrapper[data-scrolled-y] & thead th::before {
+				height: rem(3px);
+				background: linear-gradient(
+					to bottom,
+					var(--igd-table-border-color) 0,
+					var(--igd-table-border-color) rem(1px),
+					transparent rem(1px),
+					transparent rem(2px),
+					var(--igd-table-border-color) rem(2px),
+					var(--igd-table-border-color) rem(3px)
+				);
+			}
+			
+			// Sticky first column — each cell needs its own background so content doesn't bleed through.
+			th:first-child {
+				background-color: var(--igd-table-header-bg);
+			}
+			
+			td:first-child {
+				background-color: var(--igd-table-bg);
+			}
+			
+			th:first-child,
+			td:first-child {
+				position: sticky;
 				inset-inline-start: 0;
-				width: 100%;
-				height: var(--igd-table-pinned-border-size);
-				background: var(--igd-table-border-color);
+				
+				&::after {
+					content: '';
+					position: absolute;
+					inset-block-start: 0;
+					inset-inline-end: 0;
+					width: var(--igd-table-pinned-border-size);
+					height: 100%;
+					background: var(--igd-table-border-color);
+				}
 			}
-		}
-		
-		// Sticky first column — each cell needs its own background so content doesn't bleed through.
-		th:first-child {
-			background-color: var(--igd-table-header-bg);
-		}
-		
-		td:first-child {
-			background-color: var(--igd-table-bg);
-		}
-		
-		th:first-child,
-		td:first-child {
-			position: sticky;
-			inset-inline-start: 0;
 			
-			&::after {
-				content: '';
-				position: absolute;
-				inset-block-start: 0;
-				inset-inline-end: 0;
-				width: var(--igd-table-pinned-border-size);
-				height: 100%;
-				background: var(--igd-table-border-color);
+			// Double right border on the sticky first column when scrolled horizontally.
+			.igd-table-wrapper[data-scrolled-x] & th:first-child::after,
+			.igd-table-wrapper[data-scrolled-x] & td:first-child::after {
+				width: rem(3px);
+				background: linear-gradient(
+					to right,
+					var(--igd-table-border-color) 0,
+					var(--igd-table-border-color) rem(1px),
+					transparent rem(1px),
+					transparent rem(2px),
+					var(--igd-table-border-color) rem(2px),
+					var(--igd-table-border-color) rem(3px)
+				);
+			}
+			
+			// Sticky first header cell sits above both axes — needs header background.
+			thead th:first-child,
+			tfoot th:first-child {
+				background-color: var(--igd-table-header-bg);
+				z-index: 3;
 			}
-		}
-		
-		// Sticky first header cell sits above both axes — needs header background.
-		thead th:first-child,
-		tfoot th:first-child {
-			background-color: var(--igd-table-header-bg);
-			z-index: 3;
 		}
 	}
 }
+
diff --git a/src/styles/global/_palette.scss b/src/styles/global/_palette.scss
index 83ef000..387e92b 100644
--- a/src/styles/global/_palette.scss
+++ b/src/styles/global/_palette.scss
@@ -123,16 +123,17 @@ $dark-palette: (
 );
 
 [data-theme='light'] {
-	color-scheme: light;
-	--igd-scrollbar-thumb: var(--ig-gray-300);
-	--igd-scrollbar-track: transparent;
 	@include palette($light-palette);
+	--igd-scrollbar-thumb: var(--ig-gray-300);
+	--igd-scrollbar-track:transparent;
+	
+	color-scheme: light;
 }
 
 [data-theme='dark'] {
-	color-scheme: dark;
-	--igd-scrollbar-thumb: rgba(255, 255, 255, 0.25);
-	--igd-scrollbar-track: rgba(255, 255, 255, 0.05);
-
 	@include palette($dark-palette);
+	--igd-scrollbar-thumb: var(--ig-gray-300);
+	--igd-scrollbar-track: transparent;
+	
+	color-scheme: dark;
 }
diff --git a/src/styles/global/_search-shared.scss b/src/styles/global/_search-shared.scss
index 4c84e2a..10d30b3 100644
--- a/src/styles/global/_search-shared.scss
+++ b/src/styles/global/_search-shared.scss
@@ -1,11 +1,10 @@
-@use '../../styles/global/breakpoints' as *;
 @use 'igniteui-theming/sass/typography' as *;
 
-// ── Trigger button ─────────────────────────────────────────────────────────
+@layer components {
 
 .search-trigger {
 	--ig-size: 1;
-	
+
 	width: 100%;
 	max-width: rem(330px);
 	display: flex;
@@ -16,104 +15,95 @@
 	padding-inline: var(--igd-padding-sm);
 	gap: rem(8px);
 	white-space: nowrap;
-	
+
 	// Override native button styles
 	background-color: transparent;
 	box-shadow: none;
-	
+
 	&:focus-visible {
 		outline: none;
 		box-shadow: inset 0 0 0 1px var(--igd-accent);
 	}
-	
-	@media (max-width: #{$bp-tablet-max}) {
-		max-width: none;
-		width: auto;
-		border-inline-end: none;
-	}
 }
 
 .search-trigger__hint {
+	@include type-style('subtitle-1') {
+		margin: 0;
+	};
+	
+	display: flex;
+	align-items: center;
+	margin-inline-start: auto;
+	gap: rem(4px);
 	background: transparent;
 	box-shadow: none;
 	border: none;
-	
+
 	kbd {
 		@include type-style('subtitle-1') {
 			margin: 0;
 		};
-		
+
 		background: transparent;
 		box-shadow: none;
 		border: none;
-		color: var(--ig-gray-500);
+		color: light-dark(var(--ig-gray-600), var(--ig-gray-400));
 	}
 }
 
-.search-trigger__label,
-.search-trigger__hint {
-	@media (max-width: #{$bp-tablet-max}) {
-		display: none;
-	}
-}
-
-.search-trigger__hint {
-	@include type-style('subtitle-1') {
-		margin: 0;
-	};
-	
-	display: flex;
-	align-items: center;
-	margin-inline-start: auto;
-	gap: rem(4px);
-}
-
 .search-trigger__label {
 	@include type-style('body-2') {
 		margin: 0;
 	};
-	
+
 	color: var(--ig-gray-600);
 }
 
-// ── Shared dialog mixins ───────────────────────────────────────────────────
+// Close button — hidden by default; DocsLayout.scss reveals it on mobile.
+.search-trigger.search-close {
+	display: none;
+	color: light-dark(var(--ig-gray-600), var(--ig-gray-400));
+	
+	border-inline-start: rem(1px) solid light-dark(var(--ig-gray-400), var(--ig-gray-300));
+	border-inline-end: 0;
+
+	igc-icon {
+		--size: #{rem(32px)};
+	}
+}
 
-/// Sizing/position for both igc-dialog::part(base) and native <dialog>.
+}  // close first @layer components block (mixin definitions stay un-nested below)
+
+// Centered-card sizing for both igc-dialog::part(base) and native <dialog>.
+// DocsLayout.scss flips this to fullscreen on mobile.
 @mixin search-dialog-base-styles {
-	margin: 0;
+	margin: auto;
 	padding: 0;
-	width: 100%;
-	max-width: 100%;
-	height: 100dvh;
-	max-height: 100dvh;
+	width: 90%;
+	max-width: rem(672px);
+	height: calc(100vh - #{rem(128px)});
+	max-height: rem(768px);
 	box-shadow: none;
 	border: none;
-
-	@media (min-width: 50rem) {
-		margin: auto;
-		width: 90%;
-		max-width: 42rem;
-		height: calc(100vh - 8rem);
-		max-height: 48rem;
-		border-radius: 0;
-	}
+	border-radius: 0;
 }
 
 /// Backdrop base state (before open animation).
 @mixin search-dialog-backdrop {
-	background-color: light-dark(var(--ig-gray-800), var(--ig-gray-800));
+	background-color: light-dark(var(--ig-gray-800), var(--ig-gray-50));
 	will-change: backdrop-filter, opacity;
 }
 
-/// Backdrop visible/open state.
+// Backdrop visible/open state.
 @mixin search-dialog-backdrop-open {
 	opacity: .6;
 	-webkit-backdrop-filter: blur(10px);
 	backdrop-filter: blur(10px);
 }
 
-// ── Shared dialog chrome ───────────────────────────────────────────────────
+@layer components {
 
+// Shared dialog chrome
 [data-search-modal-open] { overflow: hidden; }
 
 .igd-search-shell {
@@ -125,7 +115,7 @@
 	border-radius: 0;
 }
 
-/* ── Status ─────────────────────────────────────────────────────────────── */
+// Status
 .igd-search-status {
 	@include type-style('overline') {
 		margin: 0;
@@ -143,11 +133,13 @@
 	color: var(--igd-accent);
 }
 
-/* ── Results ─────────────────────────────────────────────────────────────── */
+// Results
 .igd-search-results {
 	--background: transparent;
 	
-	gap: rem(16px);
+	position: relative;
+	
+	gap: rem(8px);
 	
 	igc-list-item {
 		--item-border-radius: 0;
@@ -166,12 +158,10 @@
 	}
 	
 	&:last-of-type {
-		margin-block-end: 0;
+		padding-block-end: 0;
 	}
-}
-
-.igd-search-results {
-	margin-block-end: rem(26px);
+	
+	padding-inline: rem(26px);
 }
 
 .igd-search-results,
@@ -206,7 +196,7 @@
 		margin: 0;
 	}
 	
-	color: light-dark(var(--ig-gray-900), var(--ig-gray-300));
+	color: light-dark(var(--ig-gray-900), var(--ig-gray-600));
 
 	mark {
 		background: transparent;
@@ -228,7 +218,7 @@
 	background: light-dark(var(--ig-gray-200), #112031);
 }
 
-/* ── Category header (above each result list in the All tab) ─────────────── */
+// Category header (above each result list in the All tab)
 .igd-search-category-header {
 	@include type-style('detail-2', false) {
 		margin: 0;
@@ -237,6 +227,7 @@
 	display: inline-block;
 	color: light-dark(var(--ig-gray-900), var(--ig-gray-300));
 	margin-block-end: rem(16px);
+	padding-inline: rem(26px);
 }
 
 .igd-search-more-btn {
@@ -249,7 +240,8 @@
 	--hover-foreground: var(--igd-accent);
 	--focus-background: transparent;
 	--focus-foreground: var(--igd-accent);
-	--active-foreground: transparent;
+	--active-foreground: var(--igd-accent);
+	--active-background: transparent;
 	--focus-hover-background: var(--igd-accent);
 	--focus-hover-foreground: transparent;
 	--focus-visible-foreground: var(--igd-accent);
@@ -268,6 +260,13 @@
 	
 	display: flex;
 	justify-self: center;
-	margin-block-end: rem(36px);
+	
+	margin-block-start: rem(26px);
 }
 
+.igd-search-meta {
+	color: light-dark(var(--ig-gray-900), var(--ig-gray-300));
+}
+
+}  // close second @layer components block
+
diff --git a/src/styles/global/_type-scale.scss b/src/styles/global/_type-scale.scss
index a285d7a..325ed9f 100644
--- a/src/styles/global/_type-scale.scss
+++ b/src/styles/global/_type-scale.scss
@@ -34,7 +34,7 @@ $h3: type-style(
 
 $h4: type-style(
     $font-size: rem(20px),
-    $font-weight: 400,
+    $font-weight: 500,
     $letter-spacing: normal,
     $line-height: rem(20px),
     $text-transform: none,
@@ -104,7 +104,7 @@ $detail-2: type-style(
 
 $subtitle-1: type-style(
     $font-size: rem(16px),
-    $font-weight: 400,
+    $font-weight: 500,
     $letter-spacing: 0.15px,
     $line-height: rem(24px),
     $text-transform: none,
diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss
index 7054c23..d5eea69 100644
--- a/src/styles/global/_variables.scss
+++ b/src/styles/global/_variables.scss
@@ -1,6 +1,5 @@
 @use 'igniteui-theming/sass/typography' as *;
 @use 'palette' as *;
-@use 'breakpoints' as *;
 
 /* ============================================================
    CSS Custom Properties
@@ -31,26 +30,15 @@
 
 	--igd-sidebar-spacing: #{rem(46px)} #{rem(24px)};
 	
-	--igd-header-height: #{rem(50px)};
-	
-	@media (min-width: #{$bp-tablet-max}) {
-		--igd-header-height: #{rem(75px)};
-	}
-	
+	// Desktop default. DocsLayout.scss overrides to 50px on mobile + tablet.
+	--igd-header-height: #{rem(75px)};
+
 	--sticky-sidebar-top: 0;
-	
+
 	--igd-members-spacing: var(--igd-border-radius) #{rem(16px)};
-	
-	--igd-page-layout-grid: #{minmax(rem(300px), rem(400px)) 1fr};
-	
-	@media (max-width: #{$bp-sidebar-max}) {
-		--igd-page-layout-grid: #{minmax(rem(180px), rem(260px)) 1fr};
-	}
 
-	@media (max-width: #{$bp-desktop-min}) {
-		--igd-page-padding: #{rem(36px)};
-	}
-	
+	--igd-page-layout-grid: #{minmax(rem(200px), rem(340px)) 1fr};
+
 	--igd-page-padding: #{rem(50px)};
 	
 	// Padding
@@ -97,7 +85,6 @@
 	--igd-aside-info-border: light-dark(var(--ig-primary-700), var(--ig-primary-400));
 	--igd-aside-info-code-background: light-dark(var(--ig-primary-100), var(--ig-primary-900));
 	
-	
 	--igd-aside-warning-title: light-dark(var(--ig-secondary-700), var(--ig-secondary-400));
 	--igd-aside-warning-content: light-dark(var(--ig-secondary-700), var(--ig-secondary-300));
 	--igd-aside-warning-icon: light-dark(var(--ig-secondary-700), var(--ig-secondary-400));
@@ -116,11 +103,11 @@
 	// TABLES
 	--igd-table-max-height: #{rem(350px)};
 	--igd-table-pinned-border-size: #{rem(1px)};
-	--igd-table-fg: light-dark(var(--ig-gray-900), var(--ig-gray-900));
+	--igd-table-fg: light-dark(var(--ig-gray-700), var(--ig-gray-500));
 	--igd-table-bg: var(--igd-layout-sections-bg);
 	--igd-tabe-even-row-bg: var(--igd-table-bg);
 	--igd-table-border-color: light-dark(var(--ig-gray-200), var(--ig-gray-200));
 	
 	--igd-table-header-bg: var(--igd-layout-sections-bg);
-	--igd-table-header-fg: light-dark(var(--ig-gray-900), var(--ig-gray-400));
+	--igd-table-header-fg: light-dark(var(--ig-gray-900), var(--ig-gray-700));
 }
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 1edb816..265c6ed 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -10,18 +10,23 @@
 // still create the layer on first encounter, but the ORDER would be undefined
 // relative to our own unlayered rules — meaning Bootstrap could win.
 //
-// By declaring the layer order here (before any Bootstrap stylesheet loads)
-// we guarantee that ANY unlayered rule — all of our ig-theme.scss /
-// DocsLayout.scss styles — wins over everything inside the bootstrap layer,
-// regardless of selector specificity.
+// `components` holds every component-level stylesheet (DocsSubHeader, Search,
+// DocsSidebar, …). The layout-level overrides in DocsLayout.scss stay
+// UNLAYERED so they always beat component base styles regardless of import
+// order and even when component selectors have higher specificity.
 //
 // Rule: lower layers lose to higher layers, and unlayered rules beat all layers.
-@layer bootstrap;
+@layer bootstrap, components;
 
 // Restore browser default (16px). Bootstrap 3 sets html { font-size: 10px }
 // inside @layer(bootstrap) which would break all rem-based sizing without this.
 html {
 	font-size: 16px;
+	background: var(--igd-app-bg);
+}
+
+body {
+	scrollbar-gutter: stable;
 }
 
 // Define font CSS custom properties so components can reference or override them.
@@ -112,10 +117,23 @@ igc-icon {
 	border-radius: rem(5px);
 }
 
-// Explicit dark-mode overrides — bypass CSS variable resolution issues in
+// Explicit theme overrides — bypass CSS variable resolution issues in
 // ::-webkit-scrollbar pseudo-elements.
-// html[data-theme='dark'] targets the document scrollbar (html is the scroller).
-// [data-theme='dark'] ::-webkit-scrollbar-* targets inner scrollable elements.
+// html[data-theme='...'] targets the document scrollbar (html is the scroller).
+// [data-theme='...'] ::-webkit-scrollbar-* targets inner scrollable elements.
+
+// Light
+html[data-theme='light']::-webkit-scrollbar-track,
+[data-theme='light'] ::-webkit-scrollbar-track {
+	background-color: rgba(0, 0, 0, 0.05);
+}
+
+html[data-theme='light']::-webkit-scrollbar-thumb,
+[data-theme='light'] ::-webkit-scrollbar-thumb {
+	background-color: rgba(0, 0, 0, 0.25);
+}
+
+// Dark
 html[data-theme='dark']::-webkit-scrollbar-track,
 [data-theme='dark'] ::-webkit-scrollbar-track {
 	background-color: rgba(255, 255, 255, 0.05);