diff --git a/demo/demo.ts b/demo/demo.ts
index c29f50a..76cdeb0 100644
--- a/demo/demo.ts
+++ b/demo/demo.ts
@@ -90,7 +90,7 @@ const themeChoose = html`
     <igc-select
       value="bootstrap"
       outlined
-      label="Choose theme"
+      title="Choose theme"
       @igcChange=${({ detail }) => setTheme(detail.value)}
     >
       ${themes.map(theme => html`<igc-select-item .value=${theme}>${theme}</igc-select-item>`)}
diff --git a/demo/index.html b/demo/index.html
index 145dc06..e0004c3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,7 +17,7 @@
       body {
         --ig-size: 1;
         --sample-body-padding: 20px;
-        background: hsla(var(--ig-surface-100));
+        background: var(--ig-surface-300);
         margin: 0;
         padding: var(--sample-body-padding);
         overflow: hidden;
@@ -34,7 +34,7 @@
         align-items: center;
         padding: 0.5rem 0;
         gap: 1rem;
-        min-height: 79px;
+        min-height: 75px;
       }
 
       #demo {
diff --git a/package-lock.json b/package-lock.json
index 45e007a..56da920 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "concurrently": "^9.2.0",
         "globby": "^14.1.0",
         "husky": "^9.1.7",
-        "igniteui-theming": "^22.1.0",
+        "igniteui-theming": "^24.0.0",
         "lint-staged": "^16.1.2",
         "node-watch": "^0.7.4",
         "playwright": "^1.53.2",
@@ -5027,9 +5027,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/igniteui-theming": {
-      "version": "22.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.1.0.tgz",
-      "integrity": "sha512-Fi3QaVXTX6sLfEAXEQn96yfw3xWpHCIibOl8joWXH6H3GWjAgupF6WHBSewOPeS9z9Ei5Lh/MfmktW8jaqwiaQ==",
+      "version": "24.0.0",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-24.0.0.tgz",
+      "integrity": "sha512-eZqZqcSzgi1kHYt1lVDjQDxP7uMZCn2UNTXYsfUaCAaVzG0ig2o7e1oZAWRT3AwT575+Phrw4bMpTpzWLqjFHQ==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/package.json b/package.json
index 59d8e8a..1e66cf8 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "concurrently": "^9.2.0",
     "globby": "^14.1.0",
     "husky": "^9.1.7",
-    "igniteui-theming": "^22.1.0",
+    "igniteui-theming": "^24.0.0",
     "lint-staged": "^16.1.2",
     "node-watch": "^0.7.4",
     "playwright": "^1.53.2",
diff --git a/src/components/grid.ts b/src/components/grid.ts
index 137f9ea..d2ae2cb 100644
--- a/src/components/grid.ts
+++ b/src/components/grid.ts
@@ -26,8 +26,9 @@ import { asArray, autoGenerateColumns, getFilterOperandsFor } from '../internal/
 import { watch } from '../internal/watch.js';
 import type { FilterExpression } from '../operations/filter/types.js';
 import type { SortExpression } from '../operations/sort/types.js';
-import { styles } from '../styles/grid/themes/grid.base.css.js';
-import { all } from '../styles/grid/themes/themes.js';
+import { styles } from '../styles/themes/grid.base.css.js';
+import { all } from '../styles/themes/grid-themes.js';
+import { styles as shared } from '../styles/themes/shared/grid.common.css.js';
 import IgcGridLiteCell from './cell.js';
 import IgcFilterRow from './filter-row.js';
 import IgcGridLiteHeaderRow from './header-row.js';
@@ -135,7 +136,7 @@ export class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteE
     return GRID_TAG;
   }
 
-  public static override styles = styles;
+  public static override styles = [styles, shared];
 
   public static register() {
     registerComponent(
diff --git a/src/components/header.ts b/src/components/header.ts
index 14cf1b2..326e019 100644
--- a/src/components/header.ts
+++ b/src/components/header.ts
@@ -11,8 +11,10 @@ import {
 import { partNameMap } from '../internal/part-map.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_HEADER_TAG } from '../internal/tags.js';
+import { addThemingController } from '../internal/theming.js';
 import type { ColumnConfiguration, IgcHeaderContext } from '../internal/types.js';
 import { styles } from '../styles/header-cell/header-cell.css.js';
+import { all } from '../styles/themes/grid-header-themes.js';
 
 export default class IgcGridLiteHeader<T extends object> extends LitElement {
   public static get tagName() {
@@ -47,6 +49,11 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {
   @property({ attribute: false })
   public column!: ColumnConfiguration<T>;
 
+  constructor() {
+    super();
+
+    addThemingController(this, all);
+  }
   #addResizeEventHandlers() {
     const config: AddEventListenerOptions = { once: true };
 
diff --git a/src/internal/theming.ts b/src/internal/theming.ts
index f356858..3544fd8 100644
--- a/src/internal/theming.ts
+++ b/src/internal/theming.ts
@@ -107,14 +107,12 @@ function isOfTypeThemeVariant(variant: string): variant is ThemeVariant {
 }
 
 function getTheme() {
-  if (!(theme && themeVariant)) {
-    const cssVars = getAllCssVariables();
-    const foundTheme = cssVars.igTheme;
-    const foundVariant = cssVars.igThemeVariant;
+  const cssVars = getAllCssVariables();
+  const foundTheme = cssVars.igTheme;
+  const foundVariant = cssVars.igThemeVariant;
 
-    theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';
-    themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';
-  }
+  theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';
+  themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';
 
   return { theme, themeVariant };
 }
diff --git a/src/styles/_common.scss b/src/styles/_common.scss
index bac24f6..74deb03 100644
--- a/src/styles/_common.scss
+++ b/src/styles/_common.scss
@@ -1,11 +1,44 @@
-@use "../../node_modules/igniteui-theming/" as *;
-@forward "../../node_modules/igniteui-theming/";
+@use 'igniteui-theming' as *;
+@forward 'igniteui-theming';
 
 $ig-cells-padding: sizable(rem(8px), rem(16px), rem(24px));
 $ig-cells-min-height: sizable(rem(24px), rem(34px), rem(50px));
 
-:host {
-  @include sizable();
+@mixin ig-scrollbar($track-size, $track-bg, $thumb-bg) {
+	// Firefox only
+	scrollbar-width: $track-size;
+	scrollbar-color: $thumb-bg $track-bg;
+	
+	// Chromium only
+	::-webkit-scrollbar {
+		width: $track-size;
+		height: $track-size;
+		background: $track-bg;
+	}
+	
+	::-webkit-scrollbar-thumb {
+		background: $thumb-bg;
+	}
+}
 
-  --component-size: 3;
+:host {
+	@include sizable();
+	
+	--component-size: 3;
+	
+	
+	position: relative;
+	box-sizing: border-box;
+	
+	@include ig-scrollbar(
+		var(--ig-scrollbar-size, var(--sb-size)),
+		var(--ig-scrollbar-track-background, var(--sb-track-bg-color)),
+		var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))
+	);
+	
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
 }
diff --git a/src/styles/body-cell/body-cell.scss b/src/styles/body-cell/body-cell.scss
index eb2ef30..7730727 100644
--- a/src/styles/body-cell/body-cell.scss
+++ b/src/styles/body-cell/body-cell.scss
@@ -1,7 +1,7 @@
 @use '../common' as *;
+@use '../themes/light/themes' as *;
 
-$row-border-width: var(--igx-row-border-width, var(--row-border-width));
-$cell-active-border-color: var(--igx-cell-active-border-color, var(--cell-active-border-color));
+$theme: $material;
 $inset-shadow-width: #{rem(1px)};
 
 :host {
@@ -11,8 +11,8 @@ $inset-shadow-width: #{rem(1px)};
     align-items: center;
     padding: 0 $ig-cells-padding;
     color: inherit;
-    border-right: $row-border-width solid transparent;
-    font-size: #{rem(13px)};
+    border-right: rem(1px) solid transparent;
+    font-size: rem(13px);
     overflow-wrap: anywhere;
 
     &:last-of-type {
@@ -22,7 +22,9 @@ $inset-shadow-width: #{rem(1px)};
 
 :host([active]) {
     outline: none;
-    box-shadow: inset 0 0 0 $inset-shadow-width $cell-active-border-color;
+    box-shadow: inset 0 0 0 $inset-shadow-width var-get($theme, 'cell-active-border-color');
+	color: var-get($theme, 'cell-selected-text-color');
+	background: var-get($theme, 'cell-selected-background');
 }
 
 :host(:last-child) {
@@ -30,32 +32,36 @@ $inset-shadow-width: #{rem(1px)};
 }
 
 igc-input {
-    position: absolute;
-    left: 0;
-    height: calc(100% - ($inset-shadow-width * 2));
-    width: 100%;
-
-    &::part(container),
-    &::part(input) {
-        border-color: transparent;
-        box-shadow: none;
-        height: 100%;
-    }
+	position: absolute;
+	left: 0;
+	height: calc(100% - ($inset-shadow-width * 2));
+	width: 100%;
 }
 
 igc-input,
 igc-select {
-    &::part(container),
-    &::part(input) {
-        background: inherit;
-        color: inherit;
-        font-size: #{rem(13px)};
-    }
-
-    &::part(helper-text),
-    &::part(container) {
-        &::after {
-            display: none;
-        }
-    }
+	&::part(container) {
+		height: calc(100% - ($inset-shadow-width * 2));
+		
+		&::before {
+			box-shadow: none;
+		}
+	}
+	
+	&::part(container),
+	&::part(input) {
+		box-shadow: none;
+		height: 100%;
+		background: inherit;
+		border: 0;
+		color: inherit;
+		font-size: rem(13px);
+	}
+	
+	&::part(helper-text),
+	&::part(container) {
+		&::after {
+			display: none;
+		}
+	}
 }
diff --git a/src/styles/body-row/body-row.scss b/src/styles/body-row/body-row.scss
index 80dc444..3d8a982 100644
--- a/src/styles/body-row/body-row.scss
+++ b/src/styles/body-row/body-row.scss
@@ -1,22 +1,15 @@
 @use '../common' as *;
+@use '../themes/light/themes' as *;
 
-$row-border-width: var(--igx-row-border-width, var(--header-border-width));
-$row-border-style: var(--igx-row-border-style, var(--header-border-style));
-$row-border-color: var(--igx-row-border-color, var(--header-border-color));
-$row-odd-background: var(--igx-row-odd-background, var(--row-odd-background));
-$row-odd-text-color: var(--igx-row-odd-text-color, var(--row-odd-text-color));
-$row-even-background: var(--igx-row-even-background, var(--row-even-background));
-$row-even-text-color: var(--igx-row-even-text-color, var(--row-even-text-color));
-$row-hover-background: var(--igx-row-hover-background, var(--row-hover-background));
-$row-hover-text-color: var(--igx-row-hover-text-color, var(--row-hover-text-color));
+$theme: $material;
 
 :host {
     display: grid;
     width: 100%;
     min-height: $ig-cells-min-height;
-    border-block-end: $row-border-width $row-border-style $row-border-color;
-    background: $row-odd-background;
-    color: $row-odd-text-color;
+    border-block-end: rem(1px) solid var-get($theme, 'row-border-color');
+    background: var-get($theme, 'content-background');
+    color: var-get($theme, 'row-odd-text-color');
     z-index: var(--z-index-base);
 }
 
@@ -24,12 +17,17 @@ $row-hover-text-color: var(--igx-row-hover-text-color, var(--row-hover-text-colo
     border-bottom: 0;
 }
 
+:host(:nth-of-type(odd)) {
+	background: var-get($theme, 'row-odd-background');
+	color: var-get($theme, 'row-odd-text-color');
+}
+
 :host(:nth-of-type(even)) {
-    background: $row-even-background;
-    color: $row-even-text-color;
+    background: var-get($theme, 'row-even-background');
+    color: var-get($theme, 'row-even-text-color');
 }
 
 :host(:hover) {
-    background: $row-hover-background;
-    color: $row-hover-text-color;
+    background: var-get($theme, 'row-hover-background');
+    color: var-get($theme, 'row-hover-text-color');
 }
diff --git a/src/styles/filter-row/filter-row.scss b/src/styles/filter-row/filter-row.scss
index a194daf..d959b74 100644
--- a/src/styles/filter-row/filter-row.scss
+++ b/src/styles/filter-row/filter-row.scss
@@ -1,12 +1,10 @@
 @use '../common' as *;
+@use '../themes/light/themes' as *;
 
-$filtering-row-background: var(--igx-filtering-row-background, var(--filtering-row-background));
-$filtering-row-text-color: var(--igx-filtering-row-text-color, var(--filtering-row-text-color));
-$header-background: var(--igx-header-background, var(--header-background));
-$header-text-color: var(--igx-header-text-color, var(--header-text-color));
-$header-border-width: var(--igx-header-border-width, var(--header-border-width));
-$header-border-style: var(--igx-header-border-style, var(--header-border-style));
-$header-border-color: var(--igx-header-border-color, var(--header-border-color));
+$theme: $material;
+$filtering-row-background: var-get($theme, 'filtering-row-background');
+$filtering-row-text-color: var-get($theme, 'filtering-row-text-color');
+$border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
 
 :host {
     --ig-size: 1;
@@ -14,9 +12,9 @@ $header-border-color: var(--igx-header-border-color, var(--header-border-color))
     display: grid;
     grid-row: filter-row;
     min-height: $ig-cells-min-height;
-    background: $header-background;
-    color: $header-text-color;
-    border-block-end: $header-border-width $header-border-style $header-border-color;
+    background: var-get($theme, 'header-background');
+    color: var-get($theme, 'header-text-color');
+    border-block-end: $border;
     z-index: var(--z-index-base);
     padding-inline-end: var(--scrollbar-offset);
 }
@@ -28,7 +26,7 @@ $header-border-color: var(--igx-header-border-color, var(--header-border-color))
     padding: 0 $ig-cells-padding;
     background: $filtering-row-background;
     color: $filtering-row-text-color;
-    border-inline-end: $header-border-width $header-border-style $header-border-color;
+    border-inline-end: $border;
 }
 
 [part~='active-state'] {
diff --git a/src/styles/grid/themes/dark/grid.bootstrap.scss b/src/styles/grid/themes/dark/grid.bootstrap.scss
deleted file mode 100644
index 887eb85..0000000
--- a/src/styles/grid/themes/dark/grid.bootstrap.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@use "../../../../../node_modules/igniteui-theming/sass/color/functions" as *;
-@use "../../../../../node_modules/igniteui-theming/sass/typography/functions" as *;
-
-:host {
-    // Header row
-    --header-border-color: #{color(null, gray, 200, 0.28)};
-
-    // Body row
-    --row-hover-background: #{color(null, gray, 100)};
-    --row-hover-text-color: #{contrast-color(null, gray, 100)};
-    --row-border-color: #{color(null, gray, 200, 0.24)};
-
-    // Body cell
-    --cell-active-border-color: #{color(null, primary, 500)};
-
-    // TODO: Common?
-    // Grid body
-    --content-background: #{color(null, gray, 50)};
-    --content-text-color: #{contrast-color(null, gray, 50)};
-
-    // Header row
-    --header-background: #{color(null, surface, 500)};
-    --header-text-color: #{contrast-color(null, surface, 500)};
-    --header-border-width: #{rem(1px)};
-    --header-border-style: solid;
-    --filtering-header-background: #{color(null, gray, 50)};
-
-    // Filtering row
-    --filtering-row-background: #{color(null, gray, 50)};
-    --filtering-row-text-color: #{contrast-color(null, gray, 50)};
-
-    // Header cell
-    --sorted-header-icon-color: #{color(null, primary, 500)};
-
-    // Icon color
-    --icon-color: 'currentColor';
-
-    // Body row
-    --row-even-background: #{color(null, gray, 50)};
-    --row-even-text-color: #{contrast-color(null, gray, 50)};
-    --row-odd-background: #{color(null, gray, 50)};
-    --row-odd-text-color: #{contrast-color(null, gray, 50)};
-    --row-border-style: solid;
-    --row-border-width: #{rem(1px)};
-
-    // Body Cell
-    --grid-resize-line-color: #{color(null, primary, 500)};
-}
diff --git a/src/styles/grid/themes/dark/grid.fluent.scss b/src/styles/grid/themes/dark/grid.fluent.scss
deleted file mode 100644
index cdc451f..0000000
--- a/src/styles/grid/themes/dark/grid.fluent.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@use "../../../../../node_modules/igniteui-theming/sass/color/functions" as *;
-@use "../../../../../node_modules/igniteui-theming/sass/typography/functions" as *;
-
-:host {
-    // Header row/cell
-    --header-background: #{color(null, gray, 100)};
-    --header-text-color: #{contrast-color(null, gray, 100)};
-    --header-border-color: #{color(null, gray, 200, 0.24)};
-
-    // Body Row/cell
-    --row-hover-background: #{color(null, gray, 100)};
-    --row-hover-text-color: #{contrast-color(null, gray, 100)};
-    --row-border-color: #{color(null, gray, 200, 0.24)};
-
-    // Body cell
-    --cell-active-border-color: #{color(null, primary, 100)};
-
-    // TODO: Common?
-    // Grid body
-    --content-background: #{var(color(null, gray, 50))};
-    --content-text-color: #{var(contrast-color(null, gray, 50))};
-
-    // Header row
-    --header-border-width: #{rem(1px)};
-    --header-border-style: solid;
-    --filtering-header-background: #{color(null, gray, 50)};
-
-    // Filtering row
-    --filtering-row-background: #{color(null, gray, 50)};
-    --filtering-row-text-color: #{contrast-color(null, gray, 50)};
-
-    // Header cell
-    --sorted-header-icon-color: #{color(null, secondary, 500)};
-
-    // Icon color
-    --icon-color: 'currentColor';
-
-    // Body row
-    --row-even-background: #{color(null, gray, 50)};
-    --row-even-text-color: #{contrast-color(null, gray, 50)};
-    --row-odd-background: #{color(null, gray, 50)};
-    --row-odd-text-color: #{contrast-color(null, gray, 50)};
-    --row-border-style: var(--header-border-style);
-    --row-border-width: var(--header-border-width);
-
-    // Body cell
-    --grid-resize-line-color: #{color(null, primary, 500)};
-}
diff --git a/src/styles/grid/themes/dark/grid.indigo.scss b/src/styles/grid/themes/dark/grid.indigo.scss
deleted file mode 100644
index b214983..0000000
--- a/src/styles/grid/themes/dark/grid.indigo.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@use "../../../../../node_modules/igniteui-theming/sass/color/functions" as *;
-@use "../../../../../node_modules/igniteui-theming/sass/typography/functions" as *;
-
-:host {
-    // Grid body
-    --content-background: #{color(null, gray, 50)};
-    --content-text-color: #{contrast-color(null, gray, 50)};
-
-    // Header row
-    --header-background: #{color(null, surface, 500)};
-    --header-text-color: #{contrast-color(null, surface, 500)};
-    --header-border-color: #{color(null, gray, 100, 0.24)};
-
-    // Header cell
-    --sorted-header-icon-color: #{contrast-color(null, surface, 500)};
-
-    // Body row
-    --row-hover-background: #{color(null, gray, 200)};
-    --row-even-background: #{color(null, gray, 100)};
-    --row-even-text-color: #{contrast-color(null, gray, 100)};
-    --row-odd-background: #{color(null, gray, 100)};
-    --row-odd-text-color: #{contrast-color(null, gray, 100)};
-    --row-border-color: #{color(null, gray, 50, 0.24)};
-
-    // Body cell
-    --cell-active-border-color: #{contrast-color(null, surface, 500)};
-
-    // TODO: Common?
-    // Header row
-    --header-border-width: #{rem(1px)};
-    --header-border-style: solid;
-    --filtering-header-background: #{color(null, gray, 50)};
-
-    // Filtering row
-    --filtering-row-background: #{color(null, gray, 50)};
-    --filtering-row-text-color: #{contrast-color(null, gray, 50)};
-
-    // Icon color
-    --icon-color: 'currentColor';
-
-    // Body Row
-    --row-hover-text-color: #{contrast-color(null, gray, 200)};
-    --row-border-style: var(--header-border-style);
-    --row-border-width: var(--header-border-width);
-
-    // Body cell
-    --grid-resize-line-color: #{color(null, primary, 500)};
-}
diff --git a/src/styles/grid/themes/dark/grid.material.scss b/src/styles/grid/themes/dark/grid.material.scss
deleted file mode 100644
index c92645e..0000000
--- a/src/styles/grid/themes/dark/grid.material.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@use "../../../../../node_modules/igniteui-theming/sass/color/functions" as *;
-@use "../../../../../node_modules/igniteui-theming/sass/typography/functions" as *;
-
-:host {
-    // Grid body
-    --content-text-color: #{color(null, gray, 800)};
-
-    // Header row
-    --header-border-color: #{color(null, gray, 200, 0.24)};
-
-    // Header cell
-    --sorted-header-icon-color: #{color(null, secondary, 500)};
-
-    // Body row
-    --row-hover-background: #{color(null, gray, 100)};
-    --row-hover-text-color: #{contrast-color(null, gray, 100)};
-    --row-border-color: #{color(null, gray, 200, 0.24)};
-
-    // TODO: Common?
-    // Grid body
-    --content-background: #{var(color(null, gray, 50))};
-
-    // Header row
-    --header-background: #{color(null, gray, 100)};
-    --header-text-color: #{color(null, gray, 800, .7)};
-    --header-border-width: #{rem(1px)};
-    --header-border-style: solid;
-    --filtering-header-background: #{color(null, gray, 50)};
-
-    // Filtering row
-    --filtering-row-background: #{color(null, gray, 50)};
-    --filtering-row-text-color: #{contrast-color(null, gray, 50)};
-
-    // Icon color
-    --icon-color: 'currentColor';
-
-    // Body Row
-    --row-even-background: #{color(null, gray, 50)};
-    --row-even-text-color: #{color(null, gray, 800)};
-    --row-odd-background: #{color(null, gray, 50)};
-    --row-odd-text-color: #{color(null, gray, 800)};
-    --row-border-style: var(--header-border-style);
-    --row-border-width: var(--header-border-width);
-
-    // Body cell
-    --cell-active-border-color: #{color(null, secondary, 500)};
-    --grid-resize-line-color: #{color(null, secondary, 500)};
-}
diff --git a/src/styles/grid/themes/light/grid.bootstrap.scss b/src/styles/grid/themes/light/grid.bootstrap.scss
deleted file mode 100644
index 875c257..0000000
--- a/src/styles/grid/themes/light/grid.bootstrap.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@use '../../../../../node_modules/igniteui-theming/sass/color/functions' as *;
-@use '../../../../../node_modules/igniteui-theming/sass/typography/functions' as *;
-
-:host {
-    // Grid body
-    --content-background: #{color(null, gray, 50)};
-    --content-text-color: #{contrast-color(null, gray, 50)};
-
-    // Header row
-    --header-background: #{color(null, surface, 500)};
-    --header-text-color: #{contrast-color(null, surface, 500)};
-    --header-border-width: #{rem(1px)};
-    --header-border-style: solid;
-    --header-border-color: #{color(null, gray, 400, .38)};
-    --filtering-header-background: #{color(null, gray, 50)};
-
-    // Filtering row
-    --filtering-row-background: #{color(null, gray, 50)};
-    --filtering-row-text-color: #{contrast-color(null, gray, 50)};
-
-    // Header cell
-    --sorted-header-icon-color: #{color(null, primary, 500)};
-
-    // Icon color
-    --icon-color: 'currentColor';
-
-    // Body row
-    --row-hover-background: #{color(null, gray, 200)};
-    --row-hover-text-color: #{contrast-color(null, gray, 200)};
-    --row-even-background: #{color(null, gray, 50)};
-    --row-even-text-color: #{contrast-color(null, gray, 50)};
-    --row-odd-background: #{color(null, gray, 50)};
-    --row-odd-text-color: #{contrast-color(null, gray, 50)};
-    --row-border-color: #{color(null, gray, 300, .38)};
-    --row-border-style: solid;
-    --row-border-width: #{rem(1px)};
-
-    // Body Cell
-    --cell-active-border-color: #{color(null, primary, 500)};
-    --grid-resize-line-color: #{color(null, primary, 500)};
-}
diff --git a/src/styles/grid/themes/light/grid.fluent.scss b/src/styles/grid/themes/light/grid.fluent.scss
deleted file mode 100644
index dcbb19e..0000000
--- a/src/styles/grid/themes/light/grid.fluent.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@use '../../../../../node_modules/igniteui-theming/sass/color/functions' as *;
-@use '../../../../../node_modules/igniteui-theming/sass/typography/functions' as *;
-
-:host {
-    // Grid body
-    --content-background: #{var(color(null, gray, 50))};
-    --content-text-color: #{var(contrast-color(null, gray, 50))};
-
-    // Header row
-    --header-background: #{color(null, surface, 500)};
-    --header-text-color: #{contrast-color(null, surface, 500)};
-    --header-border-width: #{rem(1px)};
-    --header-border-style: solid;
-    --header-border-color: #{color(null, gray, 100)};
-    --filtering-header-background: #{color(null, gray, 50)};
-
-    // Filtering row
-    --filtering-row-background: #{color(null, gray, 50)};
-    --filtering-row-text-color: #{contrast-color(null, gray, 50)};
-
-    // Header cell
-    --sorted-header-icon-color: #{color(null, secondary, 500)};
-
-    // Icon color
-    --icon-color: 'currentColor';
-
-    // Body row
-    --row-hover-background: #{color(null, gray, 200)};
-    --row-hover-text-color: #{contrast-color(null, gray, 200)};
-    --row-even-background: #{color(null, gray, 50)};
-    --row-even-text-color: #{contrast-color(null, gray, 50)};
-    --row-odd-background: #{color(null, gray, 50)};
-    --row-odd-text-color: #{contrast-color(null, gray, 50)};
-    --row-border-color: #{color(null, gray, 100)};
-    --row-border-style: var(--header-border-style);
-    --row-border-width: var(--header-border-width);
-
-    // Body cell
-    --cell-active-border-color: #{color(null, primary, 500)};
-    --grid-resize-line-color: #{color(null, primary, 500)};
-}
diff --git a/src/styles/grid/themes/light/grid.indigo.scss b/src/styles/grid/themes/light/grid.indigo.scss
deleted file mode 100644
index e53b878..0000000
--- a/src/styles/grid/themes/light/grid.indigo.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@use '../../../../../node_modules/igniteui-theming/sass/color/functions' as *;
-@use '../../../../../node_modules/igniteui-theming/sass/typography/functions' as *;
-
-:host {
-    // Grid body
-    --content-background: #{var(color(null, gray, 50))};
-    --content-text-color: #{var(contrast-color(null, gray, 50))};
-
-    // Header row
-    --header-background: #{color(null, gray, 100)};
-    --header-text-color: #{color(null, primary, 500)};
-    --header-border-width: #{rem(1px)};
-    --header-border-style: solid;
-    --header-border-color: #{color(null, primary, 500, .24)};
-    --filtering-header-background: #{color(null, gray, 50)};
-
-    // Filtering row
-    --filtering-row-background: #{color(null, gray, 50)};
-    --filtering-row-text-color: #{contrast-color(null, gray, 50)};
-
-    // Header cell
-    --sorted-header-icon-color: #{color(null, primary, 500)};
-
-    // Icon color
-    --icon-color: 'currentColor';
-
-    // Body Row
-    --row-hover-background: #{color(null, primary, 50)};
-    --row-hover-text-color: #{contrast-color(null, gray, 200)};
-    --row-even-background: #{color(null, gray, 50)};
-    --row-even-text-color: #{contrast-color(null, gray, 50)};
-    --row-odd-background: #{color(null, gray, 50)};
-    --row-odd-text-color: #{contrast-color(null, gray, 50)};
-    --row-border-color: #{color(null, primary, 50)};
-    --row-border-style: var(--header-border-style);
-    --row-border-width: var(--header-border-width);
-
-    // Body cell
-    --cell-active-border-color: #{color(null, primary, 500)};
-    --grid-resize-line-color: #{color(null, primary, 500)};
-}
diff --git a/src/styles/grid/themes/light/grid.material.scss b/src/styles/grid/themes/light/grid.material.scss
deleted file mode 100644
index c1da8de..0000000
--- a/src/styles/grid/themes/light/grid.material.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@use '../../../../../node_modules/igniteui-theming/sass/color/functions' as *;
-@use '../../../../../node_modules/igniteui-theming/sass/typography/functions' as *;
-
-:host {
-    // Grid body
-    --content-background: #{var(color(null, gray, 50))};
-    --content-text-color: #{var(contrast-color(null, gray, 50))};
-
-    // Header row
-    --header-background: #{color(null, gray, 100)};
-    --header-text-color: #{color(null, gray, 800, .7)};
-    --header-border-width: #{rem(1px)};
-    --header-border-style: solid;
-    --header-border-color: #{color(null, gray, 400, .38)};
-    --filtering-header-background: #{color(null, gray, 50)};
-
-    // Filtering row
-    --filtering-row-background: #{color(null, gray, 50)};
-    --filtering-row-text-color: #{contrast-color(null, gray, 50)};
-
-    // Header cell
-    --sorted-header-icon-color: #{color(null, secondary, 500)};
-
-    // Icon color
-    --icon-color: 'currentColor';
-
-    // Body Row
-    --row-hover-background: #{color(null, gray, 200)};
-    --row-hover-text-color: #{contrast-color(null, gray, 200)};
-    --row-even-background: #{color(null, gray, 50)};
-    --row-even-text-color: #{color(null, gray, 800)};
-    --row-odd-background: #{color(null, gray, 50)};
-    --row-odd-text-color: #{color(null, gray, 800)};
-    --row-border-color: #{color(null, gray, 300, .38)};
-    --row-border-style: var(--header-border-style);
-    --row-border-width: var(--header-border-width);
-
-    // Body cell
-    --cell-active-border-color: #{color(null, secondary, 500)};
-    --grid-resize-line-color: #{color(null, secondary, 500)};
-}
diff --git a/src/styles/header-cell/header-cell.scss b/src/styles/header-cell/header-cell.scss
index beab564..667713e 100644
--- a/src/styles/header-cell/header-cell.scss
+++ b/src/styles/header-cell/header-cell.scss
@@ -1,18 +1,13 @@
 @use '../common' as *;
+@use '../themes/light/themes' as *;
 
-$filtering-header-background: var(--igx-filtering-header-background, var(--filtering-header-background));
-$header-border-width: var(--igx-header-border-width, var(--header-border-width));
-$header-border-style: var(--igx-header-border-style, var(--header-border-style));
-$header-border-color: var(--igx-header-border-color, var(--header-border-color));
-$active-header-icon-color: var(--igx-sorted-header-icon-color, var(--sorted-header-icon-color));
-$inactive-header-icon-color: var(--igx-icon-color, var(--icon-color));
+$theme: $material;
 
 :host {
     display: flex;
     align-items: center;
     position: relative;
-    border-inline-end: $header-border-width $header-border-style $header-border-color;
-    font-weight: 600;
+    border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
     font-size: #{rem(12px)};
 }
 
@@ -27,7 +22,6 @@ $inactive-header-icon-color: var(--igx-icon-color, var(--icon-color));
     width: 100%;
     height: 100%;
     padding: 0 $ig-cells-padding;
-    font-weight: 500;
     overflow: hidden;
     user-select: none;
 }
@@ -39,6 +33,7 @@ $inactive-header-icon-color: var(--igx-icon-color, var(--icon-color));
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+	font-weight: 600;
     min-width: 3ch;
 }
 
@@ -60,8 +55,6 @@ $inactive-header-icon-color: var(--igx-icon-color, var(--icon-color));
 
     igc-icon {
         --size: #{rem(15px)};
-
-        color: $inactive-header-icon-color;
     }
 
     igc-icon::after {
@@ -73,21 +66,20 @@ $inactive-header-icon-color: var(--igx-icon-color, var(--icon-color));
         text-align: end;
         font-family: sans-serif;
         line-height: rem(10px);
-        color: $active-header-icon-color;
     }
 }
 
 [part~='sorted'],
 [part~='filtered'] {
-    color: $active-header-icon-color;
+	color: var-get($theme, 'sorted-header-icon-color');
 
     igc-icon {
-        color: $active-header-icon-color;
+	    color: inherit;
     }
 }
 
 [part~='filtered'] {
-    background: $filtering-header-background;
+    background: var-get($theme, 'filtering-header-background');
 }
 
 [part~='action']:empty {
diff --git a/src/styles/header-row/header-row.base.scss b/src/styles/header-row/header-row.base.scss
index a7ee2ce..61e0d9c 100644
--- a/src/styles/header-row/header-row.base.scss
+++ b/src/styles/header-row/header-row.base.scss
@@ -1,20 +1,16 @@
 @use '../common' as *;
+@use '../themes/light/themes' as *;
 
-$header-background: var(--igx-header-background, var(--header-background));
-$header-text-color: var(--igx-header-text-color, var(--header-text-color));
-$header-border-width: var(--igx-header-border-width, var(--header-border-width));
-$header-border-style: var(--igx-header-border-style, var(--header-border-style));
-$header-border-color: var(--igx-header-border-color, var(--header-border-color));
-$filtering-header-background: var(--igx-filtering-header-background, var(--filtering-header-background));
+$theme: $material;
 
 :host {
     display: grid;
     grid-row: header-row;
     min-height: $ig-cells-min-height;
-    background: $header-background;
-    color: $header-text-color;
+    background: var-get($theme, 'header-background');
+    color: var-get($theme, 'header-text-color');
     contain: content;
-    border-block-end: $header-border-width $header-border-style $header-border-color;
+    border-block-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
     z-index: var(--z-index-base);
     padding-inline-end: var(--scrollbar-offset);
 }
@@ -24,5 +20,5 @@ $filtering-header-background: var(--igx-filtering-header-background, var(--filte
 }
 
 [part='filtered'] {
-    background: $filtering-header-background;
+    background: var-get($theme, 'filtering-header-background');
 }
diff --git a/src/styles/themes/dark/_themes.scss b/src/styles/themes/dark/_themes.scss
new file mode 100644
index 0000000..18557ef
--- /dev/null
+++ b/src/styles/themes/dark/_themes.scss
@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes/functions' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/grid' as *;
+
+$base: digest-schema($base-dark-grid);
+$material: digest-schema($dark-material-grid);
+$bootstrap: digest-schema($dark-bootstrap-grid);
+$fluent: digest-schema($dark-fluent-grid);
+$indigo: digest-schema($dark-indigo-grid);
diff --git a/src/styles/themes/dark/grid.bootstrap.scss b/src/styles/themes/dark/grid.bootstrap.scss
new file mode 100644
index 0000000..c4da942
--- /dev/null
+++ b/src/styles/themes/dark/grid.bootstrap.scss
@@ -0,0 +1,11 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $bootstrap;
+
+:host {
+	@include css-vars-from-theme($base, 'igc-grid-lite');
+	@include css-vars-from-theme(diff(light.$base, $theme), 'igc-grid-lite');
+}
diff --git a/src/styles/themes/dark/grid.fluent.scss b/src/styles/themes/dark/grid.fluent.scss
new file mode 100644
index 0000000..0ed528c
--- /dev/null
+++ b/src/styles/themes/dark/grid.fluent.scss
@@ -0,0 +1,11 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $fluent;
+
+:host {
+	@include css-vars-from-theme($base, 'igc-grid-lite');
+	@include css-vars-from-theme(diff(light.$base, $theme), 'igc-grid-lite');
+}
diff --git a/src/styles/themes/dark/grid.indigo.scss b/src/styles/themes/dark/grid.indigo.scss
new file mode 100644
index 0000000..875f184
--- /dev/null
+++ b/src/styles/themes/dark/grid.indigo.scss
@@ -0,0 +1,11 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $indigo;
+
+:host {
+	@include css-vars-from-theme($base, 'igc-grid-lite');
+	@include css-vars-from-theme(diff(light.$base, $theme), 'igc-grid-lite');
+}
diff --git a/src/styles/themes/dark/grid.material.scss b/src/styles/themes/dark/grid.material.scss
new file mode 100644
index 0000000..29a2310
--- /dev/null
+++ b/src/styles/themes/dark/grid.material.scss
@@ -0,0 +1,11 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $material;
+
+:host {
+	@include css-vars-from-theme($base, 'igc-grid-lite');
+	@include css-vars-from-theme(diff(light.$base, $theme), 'igc-grid-lite');
+}
diff --git a/src/styles/themes/grid-header-themes.ts b/src/styles/themes/grid-header-themes.ts
new file mode 100644
index 0000000..a40d6d6
--- /dev/null
+++ b/src/styles/themes/grid-header-themes.ts
@@ -0,0 +1,27 @@
+import { css } from 'lit';
+
+import type { Themes } from '../../internal/theming.js';
+
+// Shared
+import { styles as bootstrap } from './shared/header.bootstrap.css.js';
+import { styles as fluent } from './shared/header.fluent.css.js';
+
+const light = {
+  bootstrap: css`
+      ${bootstrap}
+  `,
+  fluent: css`
+      ${fluent}
+  `,
+};
+
+const dark = {
+  bootstrap: css`
+      ${bootstrap}
+  `,
+  fluent: css`
+      ${fluent}
+  `,
+};
+
+export const all: Themes = { light, dark };
diff --git a/src/styles/grid/themes/themes.ts b/src/styles/themes/grid-themes.ts
similarity index 65%
rename from src/styles/grid/themes/themes.ts
rename to src/styles/themes/grid-themes.ts
index 305f7ab..76d0796 100644
--- a/src/styles/grid/themes/themes.ts
+++ b/src/styles/themes/grid-themes.ts
@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-import type { Themes } from '../../../internal/theming.js';
+import type { Themes } from '../../internal/theming.js';
 // Dark Overrides
 import { styles as bootstrapDark } from './dark/grid.bootstrap.css.js';
 import { styles as fluentDark } from './dark/grid.fluent.css.js';
@@ -11,34 +11,43 @@ import { styles as bootstrapLight } from './light/grid.bootstrap.css.js';
 import { styles as fluentLight } from './light/grid.fluent.css.js';
 import { styles as indigoLight } from './light/grid.indigo.css.js';
 import { styles as materialLight } from './light/grid.material.css.js';
+import { styles as shared } from './light/grid.shared.css.js';
+// Shared
+import { styles as bootstrap } from './shared/grid.common.css.js';
 
 const light = {
+  shared: css`
+      ${shared}
+  `,
   bootstrap: css`
-    ${bootstrapLight}
+      ${bootstrap} ${bootstrapLight}
   `,
   material: css`
-    ${materialLight}
+      ${materialLight}
   `,
   fluent: css`
-    ${fluentLight}
+      ${fluentLight}
   `,
   indigo: css`
-    ${indigoLight}
+      ${indigoLight}
   `,
 };
 
 const dark = {
+  shared: css`
+      ${shared}
+  `,
   bootstrap: css`
-    ${bootstrapDark}
+      ${bootstrapDark}
   `,
   material: css`
-    ${materialDark}
+      ${materialDark}
   `,
   fluent: css`
-    ${fluentDark}
+      ${fluentDark}
   `,
   indigo: css`
-    ${indigoDark}
+      ${indigoDark}
   `,
 };
 
diff --git a/src/styles/grid/themes/grid.base.scss b/src/styles/themes/grid.base.scss
similarity index 52%
rename from src/styles/grid/themes/grid.base.scss
rename to src/styles/themes/grid.base.scss
index 5ad190e..b0a0aa7 100644
--- a/src/styles/grid/themes/grid.base.scss
+++ b/src/styles/themes/grid.base.scss
@@ -1,20 +1,15 @@
-@use '../../common' as *;
-
-$content-background: var(--igx-content-background, var(--content-background));
-$content-text-color: var(--igx-content-text-color, var(--content-text-color));
-$grid-resize-line-color: var(--igx-grid-resize-line-color, var(--grid-resize-line-color));
+@use '../common' as *;
 
 :host {
+	--scrollbar-offset: 0;
+	--z-index-base: 1;
+	
     display: grid;
     height: 100%;
     position: relative;
-    font-family: var(--ig-font-family);
-    box-shadow: elevation(2);
+	font-family: var(--ig-font-family), serif;
     overflow: auto hidden;
     grid-template-rows: [header-row] max-content [filter-row] max-content [virtualized-container] auto;
-
-    --scrollbar-offset: 0;
-    --z-index-base: 1;
 }
 
 igc-virtualizer {
@@ -22,8 +17,6 @@ igc-virtualizer {
     display: flex;
     flex-flow: column;
     flex: 1;
-    background: $content-background;
-    color: $content-text-color;
     overflow: hidden auto !important;
 
     &:focus {
@@ -34,7 +27,6 @@ igc-virtualizer {
 [part~='resize-indicator'] {
     position: absolute;
     height: 100%;
-    background-color: $grid-resize-line-color;
     width: rem(2px);
     inset-inline-start: 0;
     top: 0;
diff --git a/src/styles/themes/light/_themes.scss b/src/styles/themes/light/_themes.scss
new file mode 100644
index 0000000..14bd72f
--- /dev/null
+++ b/src/styles/themes/light/_themes.scss
@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes/functions' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/grid' as *;
+
+$base: digest-schema($light-grid);
+$material: digest-schema($material-grid);
+$bootstrap: digest-schema($bootstrap-grid);
+$fluent: digest-schema($fluent-grid);
+$indigo: digest-schema($indigo-grid);
diff --git a/src/styles/themes/light/grid.bootstrap.scss b/src/styles/themes/light/grid.bootstrap.scss
new file mode 100644
index 0000000..6d1e416
--- /dev/null
+++ b/src/styles/themes/light/grid.bootstrap.scss
@@ -0,0 +1,9 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils' as *;
+@use 'themes' as *;
+
+$theme: $bootstrap;
+
+:host {
+	@include css-vars-from-theme(diff($base, $theme), 'igc-grid-lite');
+}
diff --git a/src/styles/themes/light/grid.fluent.scss b/src/styles/themes/light/grid.fluent.scss
new file mode 100644
index 0000000..36c7590
--- /dev/null
+++ b/src/styles/themes/light/grid.fluent.scss
@@ -0,0 +1,9 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils' as *;
+@use 'themes' as *;
+
+$theme: $fluent;
+
+:host {
+	@include css-vars-from-theme(diff($base, $theme), 'igc-grid-lite');
+}
diff --git a/src/styles/themes/light/grid.indigo.scss b/src/styles/themes/light/grid.indigo.scss
new file mode 100644
index 0000000..120ed26
--- /dev/null
+++ b/src/styles/themes/light/grid.indigo.scss
@@ -0,0 +1,9 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils' as *;
+@use 'themes' as *;
+
+$theme: $indigo;
+
+:host {
+	@include css-vars-from-theme(diff($base, $theme), 'igc-grid-lite');
+}
diff --git a/src/styles/themes/light/grid.material.scss b/src/styles/themes/light/grid.material.scss
new file mode 100644
index 0000000..29792b2
--- /dev/null
+++ b/src/styles/themes/light/grid.material.scss
@@ -0,0 +1,9 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils' as *;
+@use 'themes' as *;
+
+$theme: $material;
+
+:host {
+	@include css-vars-from-theme($theme, 'igc-grid-lite');
+}
diff --git a/src/styles/themes/light/grid.shared.scss b/src/styles/themes/light/grid.shared.scss
new file mode 100644
index 0000000..6f32650
--- /dev/null
+++ b/src/styles/themes/light/grid.shared.scss
@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils' as *;
+@use 'themes' as *;
+
+:host {
+	@include css-vars-from-theme($base, 'igc-grid-lite');
+}
diff --git a/src/styles/themes/shared/grid.common.scss b/src/styles/themes/shared/grid.common.scss
new file mode 100644
index 0000000..702a7af
--- /dev/null
+++ b/src/styles/themes/shared/grid.common.scss
@@ -0,0 +1,17 @@
+@use 'igniteui-theming/sass/themes/functions' as *;
+@use '../light/themes' as *;
+
+$theme: $base;
+
+:host {
+	box-shadow: var-get($theme, 'grid-elevation');
+	
+	igc-virtualizer {
+		background: var-get($theme, 'content-background');
+		color: var-get($theme, 'content-text-color');
+	}
+	
+	[part~='resize-indicator'] {
+		background-color: var-get($theme, 'resize-line-color');
+	}
+}
diff --git a/src/styles/themes/shared/header.bootstrap.scss b/src/styles/themes/shared/header.bootstrap.scss
new file mode 100644
index 0000000..c12744c
--- /dev/null
+++ b/src/styles/themes/shared/header.bootstrap.scss
@@ -0,0 +1,3 @@
+[part~='title'] {
+	font-weight: 700;
+}
diff --git a/src/styles/themes/shared/header.fluent.scss b/src/styles/themes/shared/header.fluent.scss
new file mode 100644
index 0000000..538345c
--- /dev/null
+++ b/src/styles/themes/shared/header.fluent.scss
@@ -0,0 +1,3 @@
+[part~='title'] {
+	font-weight: 800;
+}