diff --git a/src/components/ThemingWidget.astro b/src/components/ThemingWidget.astro
index 5bfca0dfbd..7c3f3b69ca 100644
--- a/src/components/ThemingWidget.astro
+++ b/src/components/ThemingWidget.astro
@@ -150,6 +150,6 @@ const lang = language === 'jp' ? 'ja' : undefined;
     min-height: 2.75rem;
     margin-bottom: 1rem;
     padding-bottom: 1rem;
-    border-bottom: 1px solid var(--sl-color-hairline);
+    border-bottom: 1px solid var(--ig-gray-300);
   }
 </style>
diff --git a/src/integration.ts b/src/integration.ts
index bd34a94a7e..b1acb15c30 100644
--- a/src/integration.ts
+++ b/src/integration.ts
@@ -391,7 +391,7 @@ export const navLang = ${JSON.stringify(navLang)};
                 try {
                     const { index, errors: initErrors } = await pagefindCreateIndex({});
                     if (initErrors?.length) throw new Error(initErrors.join(', '));
-                    const { errors: addErrors } = await index!.addDirectory({ path: outDir });
+                    const { errors: addErrors } = await index!.addDirectory({ path: outDir, rootSelector: 'main' });
                     if (addErrors?.length) console.warn('[docs-template] pagefind addDirectory warnings:', addErrors);
                     const { errors: writeErrors } = await index!.writeFiles({
                         outputPath: path.join(outDir, 'pagefind'),
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index f63521b2b8..1a9180f1ff 100644
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@@ -33,7 +33,5 @@ const currentSlug = entry.id.replace(/\.(md|mdx)$/i, '');
 <DocsLayout title={title} description={description} keywords={keywords}>
   <DocsSidebar slot="sidebar" currentSlug={currentSlug} />
   <DocsToc slot="toc" headings={headings} tocConfig={tableOfContents} offsetTarget=".docs-subheader" />
-  <div id="_top" class="sl-markdown-content" data-pagefind-body>
-    <Content />
-  </div>
+  <Content />
 </DocsLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index db45b37e82..dd9d49257c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -33,12 +33,12 @@ import DocsLayout from 'igniteui-astro-components/layouts/DocsLayout.astro';
   .hero h1 {
     font-size: clamp(2rem, 5vw, 3rem);
     margin-block: 0 0.5rem;
-    color: var(--sl-color-text);
+    color: var(--ig-gray-900);
   }
 
   .tagline {
     font-size: 1.125rem;
-    color: var(--sl-color-gray-3);
+    color: var(--ig-gray-600);
     margin-block: 0 2rem;
   }
 
@@ -62,13 +62,13 @@ import DocsLayout from 'igniteui-astro-components/layouts/DocsLayout.astro';
   .btn:hover { opacity: 0.85; text-decoration: none; }
 
   .btn-primary {
-    background: var(--sl-color-accent);
+    background: var(--ig-primary-500);
     color: #fff;
   }
 
   .btn-secondary {
     background: transparent;
-    color: var(--sl-color-text-accent);
-    border: 1px solid var(--sl-color-accent);
+    color: var(--ig-primary-500);
+    border: 1px solid var(--ig-primary-500);
   }
 </style>
diff --git a/src/routes/[...slug].astro b/src/routes/[...slug].astro
index 68e1ae34c7..83ab3e3f9c 100644
--- a/src/routes/[...slug].astro
+++ b/src/routes/[...slug].astro
@@ -34,7 +34,5 @@ const currentSlug = entry.id.replace(/\.(md|mdx)$/i, '');
 <DocsLayout title={title} description={description} keywords={keywords} currentSlug={currentSlug} license={license}>
   <DocsSidebar slot="sidebar" currentSlug={currentSlug} />
   <DocsToc slot="toc" headings={headings} tocConfig={tableOfContents} offsetTarget=".docs-subheader" />
-  <div id="_top" class="sl-markdown-content" data-pagefind-body>
-    <Content />
-  </div>
+  <Content />
 </DocsLayout>
diff --git a/src/styles/ig-theme.scss b/src/styles/ig-theme.scss
index 2a8a0d71aa..8760ae8329 100644
--- a/src/styles/ig-theme.scss
+++ b/src/styles/ig-theme.scss
@@ -18,13 +18,6 @@ $ig-palette: palette(
 
 @include palette($ig-palette);
 
-// Accent bridge — maps IG palette shades to --sl-color-accent-* CSS vars
-[data-theme='light'] {
-    --sl-color-accent-low:  var(--ig-primary-200);
-    --sl-color-accent:      var(--ig-primary-500);
-    --sl-color-accent-high: var(--ig-primary-800);
-}
-
 // Dark mode — re-emit palette with lighter primary/secondary for legibility
 // on dark surfaces. The theme sets [data-theme='dark'] on <html>.
 [data-theme='dark'] {
@@ -36,8 +29,4 @@ $ig-palette: palette(
     );
 
     @include palette($ig-palette-dark);
-
-    --sl-color-accent-low:  var(--ig-primary-900);
-    --sl-color-accent:      var(--ig-primary-400);
-    --sl-color-accent-high: var(--ig-primary-200);
 }