diff --git a/package-lock.json b/package-lock.json
index 4e688293e07..c7e8f734ec1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "@types/source-map": "0.5.2",
         "express": "^4.21.0",
         "fflate": "^0.8.1",
-        "igniteui-theming": "^12.0.0",
+        "igniteui-theming": "^12.2.1",
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.0",
@@ -13752,9 +13752,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-12.0.0.tgz",
-      "integrity": "sha512-blSZS1nkgLCoZwyydVXPA5zuvTCto3hIFuBaCAPafxc+3at94DO1YoWnp8l0D/khMVnXdzg+Cps0XQnwE2ThpQ==",
+      "version": "12.2.1",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-12.2.1.tgz",
+      "integrity": "sha512-gJRzGtahk5+n1DWgOf9XMYR54VIA/4GmwFSis/t6bMGWBbBk+9AyOJEp76GXF8Ity8VnlULSMyq0O0V3g/c4Pw==",
       "license": "MIT",
       "peerDependencies": {
         "sass": "^1.58.1"
diff --git a/package.json b/package.json
index 440029de025..edb11800942 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^12.0.0",
+    "igniteui-theming": "^12.2.1",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
index 2494b32e17a..87e748477ab 100644
--- a/projects/igniteui-angular/package.json
+++ b/projects/igniteui-angular/package.json
@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^12.0.0",
+        "igniteui-theming": "^12.2.1",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
index f10e8dc1165..95ec98e9d82 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.component.html
+++ b/projects/igniteui-angular/src/lib/combo/combo.component.html
@@ -36,7 +36,7 @@
     [width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
     (opened)="handleOpened()" (closed)="handleClosed()">
     <div class="igx-combo__search">
-        <igx-input-group *ngIf="displaySearchInput" theme="material" >
+        <igx-input-group *ngIf="displaySearchInput">
             <input igxInput #searchInput name="searchInput" autocomplete="off" type="text"
                    [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
                    (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder"
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
index d738d990602..e7590e2526b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
@@ -146,6 +146,10 @@
             @extend %date-selected-special !optional;
         }
 
+        @include e(date, $mods: ('selected', 'special', 'active')) {
+            @extend %date-selected-special-active !optional;
+        }
+
         @include e(date, $mods: ('selected', 'range')) {
             @extend %date-selected-range !optional;
         }
@@ -219,10 +223,22 @@
             @extend %date-range-selected-special-last !optional;
         }
 
-        @include e(date, $mods: ('selected', 'special', 'first', 'last')) {
+        @include e(date, $mods: ('range', 'selected', 'special', 'first', 'last')) {
             @extend %date-selected-special-first-last !optional;
         }
 
+        @include e(date, $mods: ('selected', 'special', 'current', 'first', 'last')) {
+            @extend %date-selected-special-current-first-last !optional;
+        }
+
+        @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'first')) {
+            @extend %date-selected-special-current-last !optional;
+        }
+
+        @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'last')) {
+            @extend %date-selected-special-current-first !optional;
+        }
+
         @include e(date, $mods: ('range', 'selected', 'active')) {
             @extend %date-range-selected-active !optional;
         }
@@ -299,6 +315,14 @@
             @extend %date-selected-current-active !optional;
         }
 
+        @include e(date, $mods: ('current', 'selected', 'special')) {
+            @extend %date-selected-current-special !optional;
+        }
+
+        @include e(date, $mods: ('current', 'selected', 'special', 'active')) {
+            @extend %date-selected-current-special-active !optional;
+        }
+
         @include e(date, 'special') {
             @extend %date-special !optional;
         }
@@ -307,16 +331,26 @@
             @extend %date-special-current !optional;
         }
 
+        @include e(date, $mods: ('special', 'current', 'selected')) {
+            @extend %date-special-current-selected !optional;
+        }
+
+        @include e(date, $mods: ('special', 'current', 'selected', 'active')) {
+            @extend %date-special-current-selected-active !optional;
+        }
+
         @include e(date, $mods: ('special' 'active')) {
             @extend %date-special-active !optional;
         }
 
         @include e(date, $mods: ('special', 'current', 'active')) {
             @extend %date-special-current !optional;
+            @extend %date-special-current-active !optional;
         }
 
         @include e(date, $mods: ('special', 'current', 'active', 'range')) {
             @extend %date-special-current !optional;
+            @extend %date-special-current-active !optional;
         }
 
         @include e(date, 'first') {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index 8958aeb3635..cf9a63636c5 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -112,6 +112,10 @@
 /// @param {Color} $date-selected-current-hover-outline [null] - The :hover outline of the current selected date.
 /// @param {Color} $date-selected-current-focus-outline [null] - The :focus outline of the current selected date.
 ///
+/// @param {Color} $date-selected-special-border-color: [null] - The border color of the selected special date,
+/// @param {Color} $date-selected-special-hover-border-color: [null] - The :hover border color of the selected special date,
+/// @param {Color} $date-selected-special-focus-border-color: [null] - The :focus border color of the selected special date,
+///
 /// @param {Color} $date-current-foreground [null] - The foreground of the current date.
 /// @param {Color} $date-current-background [null] - The background color of the current date.
 /// @param {Color} $date-current-hover-foreground [null] - The :hover text color of the current date.
@@ -282,6 +286,10 @@
     $date-selected-current-hover-outline: null,
     $date-selected-current-focus-outline: null,
 
+    $date-selected-special-border-color: null,
+    $date-selected-special-hover-border-color: null,
+    $date-selected-special-focus-border-color: null,
+
     $date-current-foreground: null,
     $date-current-background: null,
     $date-current-hover-foreground: null,
@@ -636,6 +644,10 @@
         date-selected-current-hover-outline: $date-selected-current-hover-outline,
         date-selected-current-focus-outline: $date-selected-current-focus-outline,
 
+        date-selected-special-border-color: $date-selected-special-border-color,
+        date-selected-special-hover-border-color: $date-selected-special-hover-border-color,
+        date-selected-special-focus-border-color: $date-selected-special-focus-border-color,
+
         date-special-foreground: $date-special-foreground,
         date-special-background: $date-special-background,
         date-special-hover-foreground: $date-special-hover-foreground,
@@ -1036,7 +1048,7 @@
     }
 
     %pickers-display--vertical,
-    %body-display--vertical  {
+    %body-display--vertical {
         display: contents;
     }
 
@@ -1169,8 +1181,8 @@
             }
         }
 
-        // TODO hide the 7 row anly of all the children have hidden class on them,
-        //  I need a wat to know if the calendar is in multi view to achieve this
+        // TODO Hide the 7th row only if all its children have the hidden class.
+        //  To implement this, we need to know if the calendar is in multi-view state.
         //&:nth-child(7) {
         //    > %date:has(:not(%date-hidden)) {
         //        display: none;
@@ -1311,10 +1323,10 @@
             &::after {
                 content: '';
                 position: absolute;
-                width: calc(100% - #{$border-size * 2});
-                height: calc(100% - #{$border-size * 2});
-                inset-inline-start: calc(#{$border-size});
-                inset-block-start: calc(#{$border-size});
+                width: 100%;
+                height: 100%;
+                inset-inline-start: 0;
+                inset-block-start: 0;
                 z-index: 0;
                 border-radius: inherit;
                 border: $border-size solid transparent;
@@ -1363,7 +1375,7 @@
                 box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-current-outline-focus-color');
             } @else {
                 box-shadow: inset 0 0 0 $border-size var(--content-background),
-                    0 0 0 rem(1px) var-get($theme, 'ym-current-outline-focus-color');
+                0 0 0 rem(1px) var-get($theme, 'ym-current-outline-focus-color');
             }
         }
     }
@@ -1499,6 +1511,12 @@
     %date-weekend {
         %date-inner {
             color: var-get($theme, 'weekend-color');
+
+            @if $variant == 'indigo' {
+                &:hover {
+                    color: var-get($theme, 'date-hover-foreground');
+                }
+            }
         }
     }
 
@@ -1542,6 +1560,28 @@
         }
     }
 
+    %date-selected-special {
+        %date-inner {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-border-color');
+            }
+
+            &:hover {
+                &::after {
+                    border-color: var-get($theme, 'date-selected-special-hover-border-color');
+                }
+            }
+        }
+    }
+
+    %date-selected-special-active {
+        %date-inner {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-focus-border-color');
+            }
+        }
+    }
+
     %date-selected-range {
         %date-inner {
             &::after {
@@ -1564,6 +1604,12 @@
             &:hover {
                 color: var-get($theme, 'date-special-hover-foreground');
                 background: var-get($theme, 'date-special-range-hover-background');
+
+                @if $variant == 'indigo' {
+                    &::after {
+                        border-color: var-get($theme, 'date-special-hover-border-color');
+                    }
+                }
             }
 
             @if $variant == 'material' {
@@ -1581,7 +1627,7 @@
                 }
             }
 
-            @if $variant == 'bootstrap' {
+            @if $variant == 'bootstrap' or $variant == 'indigo' {
                 &::after {
                     border-color: var-get($theme, 'date-special-border-color');
                 }
@@ -1589,6 +1635,16 @@
         }
     }
 
+    %date-selected-special-current-first,
+    %date-selected-special-current-last,
+    %date-selected-special-current-first-last {
+        %date-inner {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-border-color');
+            }
+        }
+    }
+
     %date-selected-special-range-active {
         %date-inner {
             color: var-get($theme, 'date-special-focus-foreground');
@@ -1629,6 +1685,13 @@
                     background: var-get($theme, 'date-current-background');
                 }
             }
+
+            @if $variant == 'indigo' {
+                &::after {
+                    width: $date-size;
+                    height: $date-size;
+                }
+            }
         }
     }
 
@@ -1701,6 +1764,21 @@
                 }
             }
 
+            @if $variant == 'indigo' {
+                background: var-get($theme, 'date-current-background');
+                border-color: var-get($theme, 'date-current-border-color');
+
+                &:hover {
+                    background: var-get($theme, 'date-current-hover-background');
+                    border-color: var-get($theme, 'date-current-hover-border-color');
+                }
+
+                &::after {
+                    width: calc($date-inner-size - #{rem(4px)});
+                    height: calc($date-inner-size - #{rem(4px)});
+                }
+            }
+
             @if $variant == 'fluent' {
                 color: var-get($theme, 'date-current-foreground');
 
@@ -1713,6 +1791,33 @@
         }
     }
 
+    @if $variant == 'indigo' {
+        %date-special-current-active {
+            %date-inner {
+                color: var-get($theme, 'date-special-focus-foreground');
+                background: var-get($theme, 'date-current-focus-background');
+                border-color: var-get($theme, 'date-current-focus-border-color');
+            }
+        }
+
+        %date-special-current-selected {
+            %date-inner {
+                &::after {
+                    width: calc($date-inner-size - #{rem(4px)});
+                    height: calc($date-inner-size - #{rem(4px)});
+                }
+            }
+        }
+    }
+
+    %date-special-current-selected-active {
+        %date-inner {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-border-color');
+            }
+        }
+    }
+
     %date-selected {
         %date-inner {
             color: var-get($theme, 'date-selected-foreground');
@@ -1735,43 +1840,16 @@
         }
     }
 
-    %date-selected-special {
-        %date-inner {
-            &::after {
-                @if $variant == 'material' or $variant == 'bootstrap' {
-                    border-color: var-get($theme, 'date-selected-foreground');
-                }
-            }
-        }
-    }
-
     %date-selected-current {
         %date-inner {
             color: var-get($theme, 'date-selected-current-foreground');
             background: var-get($theme, 'date-selected-current-background') ;
-
-            @if $variant != 'indigo' {
-                border-color: var-get($theme, 'date-selected-current-border-color');
-            }
+            border-color: var-get($theme, 'date-selected-current-border-color');
 
             &:hover {
                 color: var-get($theme, 'date-selected-current-hover-foreground');
                 background: var-get($theme, 'date-selected-current-hover-background');
-
-                @if $variant != 'indigo' {
-                    border-color: var-get($theme, 'date-selected-current-hover-border-color');
-                } @else {
-                    // stylelint-disable-next-line
-                    &::after {
-                        border-color: var-get($theme, 'date-selected-current-hover-border-color');
-                    }
-                }
-            }
-
-            &::after {
-                @if $variant == 'indigo' {
-                    border-color: var-get($theme, 'date-selected-current-border-color');
-                }
+                border-color: var-get($theme, 'date-selected-current-hover-border-color');
             }
         }
     }
@@ -1780,14 +1858,29 @@
         %date-inner {
             color: var-get($theme, 'date-selected-current-focus-foreground');
             background: var-get($theme, 'date-selected-current-focus-background');
+            border-color: var-get($theme, 'date-selected-current-focus-border-color');
+        }
+    }
 
-            @if $variant != 'indigo' {
-                border-color: var-get($theme, 'date-selected-current-focus-border-color');
+    @if $variant == 'indigo' {
+        %date-selected-current-special {
+            %date-inner {
+                &::after {
+                    border-color: var-get($theme, 'date-selected-special-border-color');
+                }
+
+                &:hover {
+                    &::after {
+                        border-color: var-get($theme, 'date-selected-special-hover-border-color');
+                    }
+                }
             }
+        }
 
-            &::after {
-                @if $variant == 'indigo' {
-                    border-color: var-get($theme, 'date-selected-current-focus-border-color');
+        %date-selected-current-special-active {
+            %date-inner {
+                &::after {
+                    border-color: var-get($theme, 'date-selected-special-focus-border-color');
                 }
             }
         }
@@ -1874,7 +1967,13 @@
         %date-inner {
             @if $variant == 'indigo' {
                 &::after {
-                    border-color: var-get($theme, 'date-selected-current-border-color');
+                    border-color: var-get($theme, 'date-current-border-color');
+                }
+
+                &:hover {
+                    &::after {
+                        border-color: var-get($theme, 'date-current-hover-border-color');
+                    }
                 }
             }
         }
@@ -1890,7 +1989,6 @@
 
             @if $variant == 'indigo' {
                 border-color: var-get($theme, 'date-current-border-color');
-                background: var-get($theme, 'date-special-range-background');
             }
 
             &:hover {
@@ -1906,6 +2004,7 @@
                 }
 
                 @if $variant == 'indigo' {
+                    background: var-get($theme, 'date-selected-current-range-hover-background');
                     border-color: var-get($theme, 'date-current-hover-border-color');
                 }
             }
@@ -1919,6 +2018,11 @@
                     height: sizable(rem(22px), rem(24px), rem(28px));
                 }
 
+                @if $variant == 'indigo' {
+                    width:  calc($date-inner-size - #{rem(4px)});
+                    height:  calc($date-inner-size - #{rem(4px)});
+                }
+
                 @if $variant == 'fluent' {
                     border-color: var-get($theme, 'date-current-foreground');
                 }
@@ -1928,7 +2032,7 @@
                 }
 
                 @if $variant == 'indigo' {
-                    border-color: transparent;
+                    border-color: var-get($theme, 'date-special-range-border-color');
                 }
             }
         }
@@ -1936,10 +2040,19 @@
 
     %date-selected-current-range-special-active:not(%date-selected-current-range-special-first),
     %date-selected-current-range-special-active:not(%date-selected-current-range-special-last) {
-        @if not $bootstrap-theme {
-            %date-inner {
+        %date-inner {
+            @if not $bootstrap-theme {
                 color: var-get($theme, 'date-special-focus-foreground');
             }
+
+            @if $variant == 'indigo' {
+                background: var-get($theme, 'date-selected-current-range-focus-background');
+                border-color: var-get($theme, 'date-current-focus-border-color');
+
+                &::after {
+                    border-color: var-get($theme, 'date-special-hover-border-color');
+                }
+            }
         }
     }
 
@@ -1970,7 +2083,9 @@
                 background: var-get($theme, 'date-selected-background');
 
                 &::after {
-                    border-color: var-get($theme, 'date-selected-current-border-color');
+                    width: calc($date-inner-size - #{rem(4px)});
+                    height: calc($date-inner-size - #{rem(4px)});
+                    border-color: var-get($theme, 'date-selected-special-border-color');
                 }
 
                 &:hover {
@@ -1979,7 +2094,7 @@
 
                     // stylelint-disable-next-line
                     &::after {
-                        border-color: var-get($theme, 'date-selected-current-hover-border-color');
+                        border-color: var-get($theme, 'date-selected-special-hover-border-color');
                     }
                 }
             }
@@ -1990,11 +2105,12 @@
     %date-selected-current-range-special-active-last {
         @if $variant == 'indigo' {
             %date-inner {
-                color: var-get($theme, 'date-selected-focus-foreground');
-                background: var-get($theme, 'date-selected-focus-background');
+                color: var-get($theme, 'date-selected-focus-foreground') !important;
+                background: var-get($theme, 'date-selected-focus-background') !important;
 
                 &::after {
-                    border-color: var-get($theme, 'date-selected-current-focus-border-color');
+                    width: calc($date-inner-size - #{rem(4px)});
+                    height: calc($date-inner-size - #{rem(4px)});
                 }
             }
         }
@@ -2077,15 +2193,6 @@
             width: $date-size;
             border-radius: var-get($theme, 'date-border-radius');
         }
-
-        %date-inner {
-            &::after {
-                @if $variant == 'indigo' {
-                    width: $date-inner-size;
-                    height: $date-inner-size;
-                }
-            }
-        }
     }
 
     %date-range-selected-first-disabled,
@@ -2108,12 +2215,9 @@
     %date-range-selected-special-last {
         %date-inner {
             &::after {
-                @if $variant == 'material' or $variant == 'bootstrap' {
-                    border-color: var-get($theme, 'date-selected-foreground');
-                }
-
                 width: $date-inner-size;
                 height: $date-inner-size;
+                border-color: var-get($theme, 'date-selected-special-border-color');
             }
         }
     }
@@ -2124,6 +2228,10 @@
                 @if $variant == 'material' or $variant == 'bootstrap' {
                     border-color: var-get($theme, 'date-selected-foreground');
                 }
+
+                @if $variant == 'indigo' {
+                    border-color: var-get($theme, 'date-current-border-color');
+                }
             }
         }
     }
@@ -2382,12 +2490,9 @@
     %date-first-preview-special {
         %date-inner {
             &::after {
-                @if $variant != 'fluent' {
+                @if $variant == 'material' or $variant == 'bootstrap' {
                     width: var-get($theme, 'inner-size');
                     height: var-get($theme, 'inner-size');
-                }
-
-                @if $variant == 'material' or $variant == 'bootstrap' {
                     border-color: var-get($theme, 'date-selected-foreground');
                 }
             }
@@ -2433,12 +2538,9 @@
     %date-last-preview-special {
         %date-inner {
             &::after {
-                @if $variant != 'fluent' {
+                @if $variant == 'material' or $variant == 'bootstrap' {
                     width: var-get($theme, 'inner-size');
                     height: var-get($theme, 'inner-size');
-                }
-
-                @if $variant == 'material' or $variant == 'bootstrap' {
                     border-color: var-get($theme, 'date-selected-foreground');
                 }
             }
@@ -2553,14 +2655,13 @@
     %date-disabled-special {
         %date-inner {
             color: var-get($theme, 'date-special-foreground');
-
             opacity: .38;
         }
     }
 
     %date-disabled-special-selected {
         %date-inner {
-            @if $variant == 'indigo' or $variant == 'fluent' {
+            @if $variant == 'fluent' {
                 color: var-get($theme, 'date-selected-foreground');
             }
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
index e1c37433f0a..be91d827b1a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
@@ -113,8 +113,8 @@
     }
 
     %igx-combo__search {
-        padding-inline: pad-inline(rem(16px));
-        padding-block: pad-block(rem(8px));
+        padding-inline: if($variant == 'indigo', pad-inline(rem(12px)), pad-inline(rem(16px)));
+        padding-block: if($variant == 'indigo', pad-block(rem(12px)), pad-block(rem(8px)));
         margin: 0 !important;
         z-index: 26;
         border-bottom: rem(1px) dashed var-get($theme, 'search-separator-border-color');
@@ -124,8 +124,18 @@
             height: auto;
         }
 
+        .igx-input-group__bundle-main {
+            padding-inline-start: 0;
+        }
+
+        .igx-input-group__bundle-start,
+        .igx-input-group__bundle-end {
+            display: none;
+        }
+
         igx-input-group {
-            --ig-size: var(--ig-size-small);
+            --theme: #{if($variant == 'indigo', 'indigo', 'material')};
+            --ig-size: #{if($variant == 'indigo', 2, 1)};
         }
     }
 
@@ -226,10 +236,16 @@
         }
     }
 
-    .igx-input-group:not(.igx-input-group--disabled) {
+    %form-group-bundle:not(%form-group-bundle--disabled):hover,
+    %form-group-bundle:not(%form-group-bundle--disabled):focus-within {
+        %igx-combo__toggle-button {
+            color: var-get($theme, 'toggle-button-foreground-focus');
+            background: var-get($theme, 'toggle-button-background-focus');
+        }
+
         %igx-combo__clear-button {
-            background: var-get($theme, 'clear-button-background');
-            color: var-get($theme, 'clear-button-foreground');
+            color: var-get($theme, 'clear-button-foreground-focus');
+            background: var-get($theme, 'clear-button-background-focus');
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
index 7eb685f01b3..b6b9f77c70e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
@@ -52,6 +52,7 @@
     }
 
     $theme: digest-schema($grid-summary-schema);
+    $meta: map.get($theme, '_meta');
 
     @if not($result-color) and $background-color {
         $result-color: text-contrast($background-color);
@@ -80,7 +81,10 @@
         pinned-border-width: $pinned-border-width,
         pinned-border-style: $pinned-border-style,
         pinned-border-color: $pinned-border-color,
-        label-hover-color: $label-hover-color
+        label-hover-color: $label-hover-color,
+        _meta: map.merge(if($meta, $meta, ()), (
+            variant: map.get($schema, '_meta', 'theme')
+        )),
     ));
 }
 
@@ -90,6 +94,8 @@
 @mixin grid-summary($theme) {
     @include css-vars($theme);
 
+    $variant: map.get($theme, '_meta', 'variant');
+
     $cell-pin: (
         style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'),
         color: var-get($theme, 'pinned-border-color')
@@ -113,7 +119,13 @@
         flex-direction: column;
         flex: 1 1 0%;
         padding-block: 0;
-        padding-inline: pad-inline(map.get($summary-padding-inline, 'compact'), map.get($summary-padding-inline, 'cosy'), map.get($summary-padding-inline, 'comfortable'));
+
+        @if $variant != 'indigo' {
+            padding-inline: pad-inline(map.get($summary-padding-inline, 'compact'), map.get($summary-padding-inline, 'cosy'), map.get($summary-padding-inline, 'comfortable'));
+        } @else {
+            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        }
+
         background: var-get($theme, 'background-color', inherit);
         overflow: hidden;
         outline-style: none;
@@ -126,6 +138,10 @@
         &:focus::after {
             background: var-get($theme, 'focus-background-color');
         }
+
+        @if $variant == 'indigo' {
+            border-top: rem(1px) solid var-get($theme, 'border-color');
+        }
     }
 
     %igx-grid-summary--pinned {
@@ -156,7 +172,13 @@
         align-items: center;
         padding-block: pad(map.get($item-padding-block, 'compact'), map.get($item-padding-block, 'cosy'), map.get($item-padding-block, 'comfortable'));
         padding-inline: 0;
-        font-size: rem(12px);
+
+        @if $variant != 'indigo' {
+            font-size: rem(12px);
+        } @else {
+            min-height: sizable(rem(24px), rem(30px), rem(36px));
+        }
+
         position: relative;
     }
 
@@ -165,14 +187,28 @@
         min-width: rem(30px);
         margin-inline-end: rem(3px);
 
+        @if $variant == 'indigo' {
+            @include type-style('caption');
+
+            margin-inline-end: initial;
+        }
+
         &:hover {
             color: var-get($theme, 'label-hover-color');
         }
     }
 
     %igx-grid-summary__result {
+        @if $variant == 'indigo' {
+            @include type-style('detail-2', false);
+        }
+
         color: var-get($theme, 'result-color');
-        font-weight: 600;
+
+        @if $variant != 'indigo' {
+            font-weight: 600;
+        }
+
         flex: 1 1 auto;
         text-align: end;
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
index 13e6424a1e1..897b85c30a0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
@@ -19,6 +19,7 @@
 /// @param {Color} $item-hover-text-color [null] - The toolbar drop-down item hover text color.
 /// @param {Color} $item-focus-background [null] - The toolbar drop-down item focus background color.
 /// @param {Color} $item-focus-text-color [null] - The toolbar drop-down item focus text color.
+/// @param {Color} $border-color [null] - The toolbar border-bottom color.
 /// @requires $light-material-schema
 /// @example scss Change the toolbar background color
 ///   $my-toolbar-theme: grid-toolbar-theme(
@@ -40,6 +41,7 @@
     $item-focus-background: null,
     $item-focus-text-color: null,
     $size: null,
+    $border-color: null,
 ) {
     $name: 'igx-grid-toolbar';
     $selector: 'igx-grid-toolbar, .igx-grid-toolbar__dd-list';
@@ -94,6 +96,7 @@
             variant: map.get($schema, '_meta', 'theme')
         )),
         size: $size,
+        border-color: $border-color
     ));
 }
 
@@ -121,12 +124,31 @@
         compact: rem(8px)
     );
 
+    $grid-toolbar-padding-start-indigo: (
+        comfortable: rem(24px),
+        cosy: rem(16px),
+        compact: rem(12px)
+    );
+
+    $grid-toolbar-padding-end-indigo: (
+        comfortable: rem(24px),
+        cosy: rem(16px),
+        compact: rem(12px)
+    );
+
+
     $grid-toolbar-spacer: (
         comfortable: rem(16px),
         cosy: rem(12px),
         compact: rem(8px)
     );
 
+    $grid-toolbar-spacer-indigo: (
+        comfortable: rem(16px),
+        cosy: rem(16px),
+        compact: rem(16px)
+    );
+
     $grid-toolbar-height: (
         comfortable: rem(58px),
         cosy: rem(52px),
@@ -143,19 +165,19 @@
         justify-content: space-between;
         grid-row: 1;
         font-size: $grid-toolbar-fs;
-
-        @if $bootstrap-theme {
-            border-bottom: rem(1px) solid color($color: 'gray', $variant: 100);
-        } @else {
-            border-bottom: rem(1px) solid color($color: 'gray', $variant: 300);
-        }
-
+        border-bottom: rem(1px) solid var-get($theme, 'border-color');
         background: var-get($theme, 'background-color');
         height: auto;
         min-height: var-get($theme, 'size');
         padding-block: 0;
-        padding-inline-start: pad-inline(map.get($grid-toolbar-padding-start, 'compact'), map.get($grid-toolbar-padding-start, 'cosy'), map.get($grid-toolbar-padding-start, 'comfortable'));
-        padding-inline-end: pad-inline(map.get($grid-toolbar-padding-end, 'compact'), map.get($grid-toolbar-padding-end, 'cosy'), map.get($grid-toolbar-padding-end, 'comfortable'));
+
+        @if $variant == 'indigo' {
+            padding-inline-start: pad-inline(map.get($grid-toolbar-padding-start-indigo, 'compact'), map.get($grid-toolbar-padding-start-indigo, 'cosy'), map.get($grid-toolbar-padding-start-indigo, 'comfortable'));
+            padding-inline-end: pad-inline(map.get($grid-toolbar-padding-end-indigo, 'compact'), map.get($grid-toolbar-padding-end-indigo, 'cosy'), map.get($grid-toolbar-padding-end-indigo, 'comfortable'));
+        } @else {
+            padding-inline-start: pad-inline(map.get($grid-toolbar-padding-start, 'compact'), map.get($grid-toolbar-padding-start, 'cosy'), map.get($grid-toolbar-padding-start, 'comfortable'));
+            padding-inline-end: pad-inline(map.get($grid-toolbar-padding-end, 'compact'), map.get($grid-toolbar-padding-end, 'cosy'), map.get($grid-toolbar-padding-end, 'comfortable'));
+        }
 
         [igxButton] {
             margin-inline-start: pad-inline(map.get($grid-toolbar-spacer, 'compact'), map.get($grid-toolbar-spacer, 'cosy'), map.get($grid-toolbar-spacer, 'comfortable'));
@@ -184,11 +206,22 @@
     }
 
     %igx-grid-toolbar__title {
+        @if $variant == 'indigo' {
+            /* stylelint-disable scss/at-extend-no-missing-placeholder */
+            @extend .ig-typography__h6;
+            /* stylelint-enable scss/at-extend-no-missing-placeholder */
+        }
+
         color: var-get($theme, 'title-text-color');
         flex: 1 1 auto;
         @include ellipsis();
         max-width: 40ch;
-        margin-inline-end: map.get($grid-toolbar-spacer, 'comfortable')
+
+        @if $variant == 'indigo' {
+            margin-inline-end: map.get($grid-toolbar-spacer-indigo, 'comfortable')
+        } @else {
+            margin-inline-end: map.get($grid-toolbar-spacer, 'comfortable')
+        }
     }
 
     %igx-grid-toolbar__custom-content {
@@ -196,7 +229,12 @@
         flex-wrap: wrap;
         flex-grow: 1;
         justify-content: flex-end;
-        margin-inline-end: map.get($grid-toolbar-spacer, 'comfortable');
+
+        @if $variant == 'indigo' {
+            margin-inline-end: map.get($grid-toolbar-spacer-indigo, 'comfortable')
+        } @else {
+            margin-inline-end: map.get($grid-toolbar-spacer, 'comfortable')
+        }
     }
 
     %igx-grid-toolbar__actions {
@@ -205,13 +243,14 @@
         flex-flow: row wrap;
         margin-inline-start: auto;
 
+        @if $variant == 'indigo' {
+            gap: map.get($grid-toolbar-spacer-indigo, 'comfortable')
+        } @else {
+            gap: map.get($grid-toolbar-spacer, 'comfortable')
+        }
+
         > * {
             display: flex;
-            margin-inline-start: map.get($grid-toolbar-spacer, 'comfortable');
-
-            &:first-child {
-                margin-inline-start: 0;
-            }
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss
index 355ad2374b6..3e2c91e373a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss
@@ -108,6 +108,7 @@
 
         @include e(actions-filter) {
             @extend %grid-excel-actions__action !optional;
+            @extend %grid-excel-actions__action-filter !optional;
         }
 
         @include e(actions-filter, $m: active) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
index b19d5ff9311..5a08349da99 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -17,6 +17,7 @@
 /// @param {Map} $theme - The grid theme used to style the component.
 @mixin excel-filtering($theme) {
     $variant: map.get($theme, '_meta', 'variant');
+    $theme-variant: map.get($theme, '_meta', 'theme-variant');
     $bootstrap-theme: $variant == 'bootstrap';
 
     $tree-node-indent: (
@@ -45,13 +46,24 @@
         width: rem(320px);
         height: 100%;
         flex-grow: 1;
-        box-shadow: elevation(12);
+
+        @if $variant == 'indigo' {
+            box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) color(null, 'gray', if($theme-variant == 'light', 400, 100));
+
+            // TODO: The border-radius should not be hardcoded.
+            border-radius: border-radius(rem(4px));
+        } @else {
+            box-shadow: elevation(12);
+        }
+
         overflow: auto;
         min-width: rem(320px);
+
     }
 
     %igx-excel-filter__sizing {
         @include sizable();
+
         min-height: sizable(
             rem(330px),
             rem(465px),
@@ -79,6 +91,14 @@
         display: flex;
         cursor: pointer;
 
+        @if $variant == 'indigo' {
+            opacity: if($theme-variant == 'light', .75, .85);
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+
         igx-icon {
             @if $variant == 'indigo' {
                 --component-size: 2;
@@ -91,12 +111,18 @@
     }
 
     %grid-excel-icon--filtered {
+        opacity: 1;
+
         igx-icon {
-            color: if(
-                $variant == 'indigo',
-                color($color: 'warn', $variant: 500),
-                color($color: 'secondary')
-            );
+            color: if($variant == 'indigo', color($color: 'primary', $variant: 500), color($color: 'secondary'));
+        }
+
+        @if $variant == 'indigo' {
+            &:hover {
+                igx-icon {
+                    color: color($color: 'primary', $variant: 400);
+                }
+            }
         }
     }
 
@@ -106,45 +132,74 @@
         display: flex;
         flex-direction: column;
         height: 100%;
-        background: var-get($theme, 'filtering-row-background');
+
         // TODO: The border-radius should not be hardcoded.
         border-radius: border-radius(rem(4px));
 
-        igx-buttongroup {
-            --shadow: none;
-            --item-background: #{var-get($theme, 'filtering-row-background')};
-            --item-hover-background: #{color($color: 'gray', $variant: 100)};
-            --item-selected-background: #{color($color: 'gray', $variant: 100)};
-            --item-text-color: #{color($color: 'gray', $variant: 700)};
-            --item-icon-color: #{color($color: 'gray', $variant: 700)};
-            --item-hover-text-color: #{color($color: 'gray', $variant: 800)};
-            --item-hover-icon-color: #{color($color: 'gray', $variant: 800)};
-            --item-selected-text-color: #{if(
+        @if $variant != 'indigo' {
+            background: var-get($theme, 'filtering-row-background');
+
+            %igx-group-display {
+                --shadow: none;
+                --item-background: #{var-get($theme, 'filtering-row-background')};
+                --item-hover-background: #{color($color: 'gray', $variant: 100)};
+                --item-selected-background: #{color($color: 'gray', $variant: 100)};
+                --item-text-color: #{color($color: 'gray', $variant: 700)};
+                --item-icon-color: #{color($color: 'gray', $variant: 700)};
+                --item-hover-text-color: #{color($color: 'gray', $variant: 800)};
+                --item-hover-icon-color: #{color($color: 'gray', $variant: 800)};
+                --item-selected-text-color: #{if(
                 $variant == 'indigo',
                 contrast-color($color: 'surface'),
                 color($color: 'secondary', $variant: 500)
             )};
-            --item-selected-icon-color: #{if(
+                --item-selected-icon-color: #{if(
                 $variant == 'indigo',
                 contrast-color($color: 'surface'),
                 color($color: 'secondary', $variant: 500)
             )};
-            --item-selected-hover-icon-color: #{if(
+                --item-selected-hover-icon-color: #{if(
                 $variant == 'fluent',
                 color($color: 'secondary', $variant: 500),
                 contrast-color($color: 'gray', $variant: 50)
             )};
-            --item-border-color: transparent;
-            --item-hover-border-color: transparent;
-            --item-focused-border-color: #{if(
+                --item-border-color: transparent;
+                --item-hover-border-color: transparent;
+                --item-focused-border-color: #{if(
                 $variant == 'fluent',
                 color($color: 'gray', $variant: 700),
                 transparent
             )};
-            --item-selected-border-color: transparent;
-            --item-selected-hover-border-color: transparent;
-            --item-disabled-border: transparent;
-            --disabled-selected-border-color: transparent;
+                --item-selected-border-color: transparent;
+                --item-selected-hover-border-color: transparent;
+                --item-disabled-border: transparent;
+                --disabled-selected-border-color: transparent;
+            }
+        } @else {
+            @if $theme-variant == 'light' {
+                background: contrast-color($color: 'gray', $variant: 900);
+            } @else {
+                background: color($color: 'gray', $variant: 50);
+            }
+
+            %igx-group-display {
+                --item-background: transparent;
+                --border-color: transparent;
+                --item-border-color: transparent;
+                --item-focused-border-color: transparent;
+                --item-hover-border-color: transparent;
+                --item-selected-border-color: transparent;
+                --item-selected-hover-border-color: transparent;
+                --item-disabled-border: transparent;
+                --disabled-selected-border-color: transparent;
+                --shadow: none;
+            }
+
+            %igx-group-item {
+                &:not(:nth-child(1)) {
+                    margin: 0;
+                }
+            }
         }
 
         @include tree(tree-theme(
@@ -163,8 +218,7 @@
         }
 
         igx-chips-area  {
-            padding-inline-start: pad-block(rem(4px), rem(8px), rem(16px));
-            padding-inline-end: pad-block(rem(4px), rem(8px), rem(16px));
+            padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
             padding-block-start: pad-block(rem(4px), rem(8px), rem(16px));
             padding-block-end: 0;
             gap: sizable(rem(4px), rem(4px), rem(8px));
@@ -174,10 +228,26 @@
     %grid-excel-menu__header {
         display: flex;
         align-items: center;
-        padding: pad(rem(4px), rem(8px), rem(16px));
+
+        @if $variant == 'indigo' {
+            padding: rem(16px) rem(16px) sizable(rem(8px), rem(12px), rem(16px));
+        } @else {
+            padding: pad(rem(4px), rem(8px), rem(16px));
+        }
+
         color: var-get($theme, 'excel-filtering-header-foreground');
     }
 
+    @if $variant == 'indigo' {
+        .ig-typography %grid-excel-menu--compact {
+            %grid-excel-menu__header {
+                > h4 {
+                    @include type-style('h6')
+                }
+            }
+        }
+    }
+
     %grid-excel-menu__header-actions {
         display: flex;
         margin-inline-start: auto;
@@ -222,12 +292,23 @@
     %grid-excel-sort,
     %grid-excel-move {
         display: block;
-        padding-block: pad-block(rem(4px), rem(8px), rem(8px));
-        padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
+
+        @if $variant == 'indigo' {
+            padding-inline: pad-inline(rem(16px));
+        } @else {
+            padding-block: pad-block(rem(4px), rem(8px), rem(8px));
+            padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
+        }
 
         header {
             color: var-get($theme, 'excel-filtering-subheader-foreground');
-            margin-bottom: rem(4px);
+
+            @if $variant == 'indigo' {
+                margin-block-end: sizable(rem(0), rem(4px), rem(4px)) !important;
+                text-transform: capitalize !important;
+            } @else {
+                margin-block-end: rem(4px);
+            }
         }
 
         igx-icon {
@@ -240,6 +321,26 @@
         }
     }
 
+    @if $variant == 'indigo' {
+        %grid-excel-move {
+            margin-block-end: sizable(rem(12px), rem(16px), rem(16px));
+        }
+
+        %grid-excel-sort + %grid-excel-move {
+            margin-block-start: sizable(rem(4px), rem(8px), rem(8px));
+        }
+
+        %grid-excel-sort {
+            padding-block-end: 0;
+        }
+
+        %grid-excel-actions__action {
+            span {
+                @include type-style('body-2');
+            }
+        }
+    }
+
     %grid-excel-action--compact {
         display: flex;
         align-items: center;
@@ -291,21 +392,56 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding-block: pad-block(rem(4px), rem(8px), rem(8px));
-        padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
+
+        @if $variant == 'indigo' {
+            padding-block: pad-block(rem(6px));
+            padding-inline: pad-inline(rem(12px));
+            margin-inline: rem(8px);
+            margin-block-end: rem(4px);
+            border-radius: rem(4px);
+        } @else {
+            padding-block: pad-block(rem(4px), rem(8px), rem(8px));
+            padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
+        }
+
         cursor: pointer;
         color: var-get($theme, 'excel-filtering-actions-foreground');
         outline-style: none;
 
         &:hover,
         &:focus {
-            background: color($color: 'gray', $variant: 100);
             color: var-get($theme, 'excel-filtering-actions-hover-foreground');
+
+            @if $variant == 'indigo' {
+                @if $theme-variant == 'light' {
+                    background: color($color: 'gray', $variant: 200);
+                } @else {
+                    background: contrast-color($color: 'gray', $variant: 50, $opacity: .1);
+                }
+
+                igx-icon {
+                    /* stylelint-disable max-nesting-depth */
+                    @if $theme-variant == 'light' {
+                        color: color($color: 'gray', $variant: 700);
+                    } @else {
+                        color: contrast-color($color: 'gray', $variant: 50, $opacity: .8);
+                    }
+                    /* stylelint-enable max-nesting-depth */
+                }
+            } @else {
+                background: color($color: 'gray', $variant: 100);
+            }
         }
 
         @if $variant == 'indigo' {
             igx-icon {
                 --component-size: 2;
+
+                @if $theme-variant == 'light' {
+                    color: color($color: 'gray', $variant: 600);
+                } @else {
+                    color: contrast-color($color: 'gray', $variant: 50, $opacity: .6);
+                }
             }
         }
 
@@ -316,6 +452,12 @@
         }
     }
 
+    @if $variant == 'indigo' {
+        %grid-excel-actions__action-filter {
+            margin-block-end: 0;
+        }
+    }
+
     %grid-excel-actions__action--active {
         background: color($color: 'gray', $variant: 100);
         color: var-get($theme, 'excel-filtering-actions-hover-foreground');
@@ -324,6 +466,12 @@
     %grid-excel-actions__action--disabled {
         color: var-get($theme, 'excel-filtering-actions-disabled-foreground');
         pointer-events: none;
+
+        @if $variant == 'indigo' {
+            igx-icon {
+                color: var-get($theme, 'excel-filtering-actions-disabled-foreground');
+            }
+        }
     }
 
     %igx-excel-filter__empty {
@@ -337,13 +485,40 @@
         flex-direction: column;
         flex-grow: 1;
         overflow: hidden;
-        padding: pad(rem(4px), rem(8px), rem(16px));
-        gap: pad(rem(4px), rem(8px), rem(16px));
 
-        igx-list {
+        @if $variant == 'indigo' {
+            padding: pad(rem(16px));
+            gap: sizable(rem(16px));
+        } @else {
+            padding: pad(rem(4px), rem(8px), rem(16px));
+            gap: sizable(rem(4px), rem(8px), rem(16px));
+        }
+
+        %igx-list {
             flex-grow: 1;
             overflow: hidden;
-            margin-inline: calc(sizable(rem(-4px), rem(-8px), rem(-16px)) * -1);
+
+            @if $variant == 'indigo' {
+                --background: #{color($color: 'surface', $variant: 500)};
+
+                margin-inline: calc(sizable(rem(-16px)) * -1);
+
+                // This is the only way to take the gap from the list,
+                // otherwise we have to hardcoded here
+                > div {
+                    gap: inherit;
+                }
+
+                igx-display-container {
+                    display: flex;
+                    flex-direction: column;
+                    gap: inherit;
+                    padding: rem(8px);
+                }
+            } @else  {
+                margin-inline: calc(sizable(rem(-4px), rem(-8px), rem(-16px)) * -1);
+            }
+
             border: 0;
 
             @if $bootstrap-theme {
@@ -353,6 +528,11 @@
                 border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
                 border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
             }
+
+            @if $variant == 'indigo' and $theme-variant == 'dark' {
+                border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
+                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
+            }
         }
 
         %igx-excel-filter__tree {
@@ -370,6 +550,11 @@
                 border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
             }
 
+            @if $variant == 'indigo' and $theme-variant == 'dark' {
+                border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
+                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
+            }
+
             igx-icon {
                 width: var(--igx-icon-size, #{$tree-node-expander-size});
                 height: var(--igx-icon-size, #{$tree-node-expander-size});
@@ -459,8 +644,10 @@
             }
         }
 
-        %grid-excel-move {
-            margin-bottom: 0;
+        @if $variant != 'indigo' {
+            %grid-excel-move {
+                margin-bottom: 0;
+            }
         }
     }
 
@@ -476,7 +663,13 @@
         display: flex;
         flex-wrap: wrap;
         align-items: center;
-        padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
+
+        @if $variant == 'indigo' {
+            padding-inline: pad-inline(rem(16px));
+        } @else {
+            padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
+        }
+
         padding-block: 0;
 
         igx-select {
@@ -531,12 +724,21 @@
 
     %grid-excel-menu__secondary-footer {
         padding: rem(8px) rem(16px);
+
         @if $bootstrap-theme {
             border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
         } @else {
             border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
         }
 
+        @if $variant == 'indigo' and $theme-variant == 'dark' {
+            border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
+        }
+
+        @if $variant == 'indigo' {
+            padding: rem(16px);
+        }
+
         %grid-excel-filter__apply,
         %grid-excel-filter__cancel {
             flex-grow: 0;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
index 1f8ea0ba40c..64bd308c169 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -664,9 +664,9 @@
     $cbx-padding-compact: map.get($grid-cbx-padding, 'compact');
 
     $grid-header-height: (
-        comfortable: rem(50px),
-        cosy: rem(40px),
-        compact: rem(32px)
+        comfortable: if($variant == 'indigo', rem(48px), rem(50px)),
+        cosy: if($variant == 'indigo', rem(40px), rem(40px)),
+        compact: if($variant == 'indigo', rem(32px), rem(32px))
     );
 
     $drop-area-height: (
@@ -712,9 +712,9 @@
     );
 
     $grouparea-min-height: (
-        comfortable: rem(57px),
-        cosy: rem(49px),
-        compact: rem(41px)
+        comfortable: if($variant == 'indigo', rem(56px), rem(57px)),
+        cosy: if($variant == 'indigo', rem(48px), rem(49px)),
+        compact: if($variant == 'indigo', rem(40px), rem(41px))
     );
 
     $grid-grouping-indicator-padding: (
@@ -731,7 +731,6 @@
     ), $variant);
 
     $drag-icon-size: rem(24px);
-    $grouping-padding-right: rem(12px);
 
     $grid-header-weight: map.get((
         'material': 600,
@@ -875,103 +874,106 @@
         }
     }
 
-    %filtering-row-input-overrides {
-        igx-input-group {
-            width: 100%;
-            max-width: rem(200px);
-            min-width: rem(140px);
-            border: rem(1px) solid color($color: 'gray', $variant: 300);
-
-            --size: calc(#{$filtering-row-height} - #{rem(8px)});
+    @if $variant != 'indigo' {
+        %filtering-row-input-overrides {
+            igx-input-group {
+                width: 100%;
+                max-width: rem(200px);
+                min-width: rem(140px);
+                border: rem(1px) solid color($color: 'gray', $variant: 300);
 
-            .igx-input-group__bundle,
-            .igx-input-group__bundle-start,
-            .igx-input-group__bundle-end,
-            igx-prefix,
-            igx-suffix {
-                background: transparent;
-                border-radius: 0;
+                --size: calc(#{$filtering-row-height} - #{rem(8px)});
 
-                &:hover,
-                &:focus,
-                &:focus-within {
+                .igx-input-group__bundle,
+                .igx-input-group__bundle-start,
+                .igx-input-group__bundle-end,
+                igx-prefix,
+                igx-suffix {
                     background: transparent;
-                }
-            }
+                    border-radius: 0;
 
-            igx-prefix,
-            igx-suffix {
-                height: 100% !important;
-                padding: 0 sizable(rem(4px), rem(6px), rem(8px));
-            }
+                    &:hover,
+                    &:focus,
+                    &:focus-within {
+                        background: transparent;
+                    }
+                }
 
-            .igx-input-group__input {
-                font-size: sizable(rem(12px), rem(14px), rem(16px));
-                padding-inline-start: 0;
-                padding-block: 0;
-                height: 100%;
-            }
+                igx-prefix,
+                igx-suffix {
+                    height: 100% !important;
+                    padding: 0 sizable(rem(4px), rem(6px), rem(8px));
+                }
 
-            .igx-input-group__bundle,
-            .igx-input-group__bundle-start,
-            .igx-input-group__bundle-end,
-            .igx-input-group__input {
-                border: 0;
+                .igx-input-group__input {
+                    font-size: sizable(rem(12px), rem(14px), rem(16px));
+                    padding-inline-start: 0;
+                    padding-block: 0;
+                    height: 100%;
+                }
 
-                &:hover,
-                &:focus,
-                &:focus-within {
+                .igx-input-group__bundle,
+                .igx-input-group__bundle-start,
+                .igx-input-group__bundle-end,
+                .igx-input-group__input {
                     border: 0;
-                    box-shadow: none;
-                }
-            }
 
-            .igx-input-group__bundle::after {
-                display: none;
-            }
+                    &:hover,
+                    &:focus,
+                    &:focus-within {
+                        border: 0;
+                        box-shadow: none;
+                    }
+                }
 
-            .igx-input-group__bundle:focus,
-            .igx-input-group__bundle:focus-within {
-                .igx-input-group__bundle-main,
-                .igx-input-group__bundle-start,
-                .igx-input-group__bundle-end {
-                    margin: 0 !important;
+                .igx-input-group__bundle::after {
+                    display: none;
                 }
-                border-width: rem(1px);
-            }
 
-            .igx-input-group__bundle-main {
-                padding-inline-start: 0;
-            }
+                .igx-input-group__bundle:focus,
+                .igx-input-group__bundle:focus-within {
+                    .igx-input-group__bundle-main,
+                    .igx-input-group__bundle-start,
+                    .igx-input-group__bundle-end {
+                        margin: 0 !important;
+                    }
+
+                    border-width: rem(1px);
+                }
 
-            color: var-get($theme, 'filtering-row-text-color');
+                .igx-input-group__bundle-main {
+                    padding-inline-start: 0;
+                }
 
-            &:hover,
-            &:focus,
-            &:focus-within {
                 color: var-get($theme, 'filtering-row-text-color');
-                border-color: color($color: 'primary', $variant: 500);
+
+                &:hover,
+                &:focus,
+                &:focus-within {
+                    color: var-get($theme, 'filtering-row-text-color');
+                    border-color: color($color: 'primary', $variant: 500);
+                }
             }
-        }
 
-        .igx-input-group__line {
-            display: none;
-        }
+            .igx-input-group__line {
+                display: none;
+            }
 
-        igx-prefix:focus {
-            color: color(map.get($theme, 'palette'), 'secondary');
-        }
+            igx-prefix:focus {
+                color: color(map.get($theme, 'palette'), 'secondary');
+            }
 
-        igx-suffix  {
-            igx-icon {
-                outline-style: none;
+            igx-suffix {
+                igx-icon {
+                    outline-style: none;
 
-                &:focus {
-                    color: color($color: 'secondary');
-                }
+                    &:focus {
+                        color: color($color: 'secondary');
+                    }
 
-                + igx-icon {
-                    margin-inline-start: rem(4px);
+                    + igx-icon {
+                        margin-inline-start: rem(4px);
+                    }
                 }
             }
         }
@@ -1041,11 +1043,13 @@
             map.get($grid-header-height, 'cosy'),
             map.get($grid-header-height, 'comfortable')
         )};
+
         --grouparea-size: #{sizable(
             map.get($grouparea-min-height, 'compact'),
             map.get($grouparea-min-height, 'cosy'),
             map.get($grouparea-min-height, 'comfortable')
         )};
+
         --igx-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))};
 
         position: relative;
@@ -1134,6 +1138,17 @@
             igx-icon {
                 --component-size: #{if($variant == 'indigo', 2, 3)};
             }
+
+            @if $variant == 'indigo' {
+                %igx-grid__group-expand-btn {
+                    color: var-get($theme, 'expand-icon-color');
+                }
+
+                %igx-grid__group-expand-btn:hover{
+                    color: var-get($theme, 'expand-icon-hover-color');
+                }
+            }
+
         }
 
         %igx-grid__drag-indicator {
@@ -1148,6 +1163,10 @@
                 border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
             }
         }
+
+        &:focus-visible {
+            outline-color: transparent;
+        }
     }
 
     %grid-thead-title {
@@ -1155,11 +1174,26 @@
         align-items: center !important;
         border-bottom: $grid-header-border;
         height: var(--header-size);
-        padding-inline: pad-inline(
-            map.get($grid-cell-padding-inline, 'compact'),
-            map.get($grid-cell-padding-inline, 'cosy'),
-            map.get($grid-cell-padding-inline, 'comfortable')
-        );
+
+        @if $variant != 'indigo' {
+            padding-inline: pad-inline(
+                map.get($grid-cell-padding-inline, 'compact'),
+                map.get($grid-cell-padding-inline, 'cosy'),
+                map.get($grid-cell-padding-inline, 'comfortable')
+            );
+        } @else {
+            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+
+            %igx-icon-display {
+                opacity: if($theme-variant == 'light', .75, .85);
+
+                &:hover {
+                    opacity: 1;
+                    cursor: pointer;
+                }
+            }
+        }
+
         padding-block: 0;
     }
 
@@ -1237,14 +1271,21 @@
         }
 
         %grid-cell-display {
-            border-inline-end: rem(1px) solid var-get($theme, 'row-border-color');
-            border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
+            border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
+            border-bottom: rem(1px) solid var-get($theme, 'header-border-color');
         }
     }
 
     %grid-row--mrl {
         &%grid-row {
             border-bottom-color: transparent;
+
+            @if $variant == 'indigo' {
+                %grid-cell-display {
+                    border-inline-end: rem(1px) solid var-get($theme, 'row-border-color');
+                    border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
+                }
+            }
         }
 
         %grid__cbx-selection,
@@ -1387,11 +1428,27 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        padding-inline: pad-inline(
-            map.get($grid-cell-padding-inline, 'compact'),
-            map.get($grid-cell-padding-inline, 'cosy'),
-            map.get($grid-cell-padding-inline, 'comfortable')
-        );
+
+        @if $variant != 'indigo' {
+            padding-inline: pad-inline(
+                map.get($grid-cell-padding-inline, 'compact'),
+                map.get($grid-cell-padding-inline, 'cosy'),
+                map.get($grid-cell-padding-inline, 'comfortable')
+            );
+        } @else {
+            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+
+            %igx-icon-display {
+                opacity: if($theme-variant == 'light', .75, .85);
+            }
+
+            &:hover {
+                %igx-icon-display {
+                    opacity: 1;
+                }
+            }
+        }
+
         padding-block: 0;
         flex: 1 0 auto;
         background: inherit;
@@ -1613,7 +1670,7 @@
         justify-content: center;
         user-select: none;
         outline-style: none;
-        margin-inline-end: rem(8);
+        margin-inline-end: if($variant == 'indigo', rem(4px), rem(8));
         cursor: pointer;
 
         color: var-get($theme, 'expand-icon-color');
@@ -1652,22 +1709,39 @@
         flex: 1 1 0%;
         align-items: center;
         outline-style: none;
-        padding-inline: pad-inline(
-            map.get($grid-cell-padding-inline, 'compact'),
-            map.get($grid-cell-padding-inline, 'cosy'),
-            map.get($grid-cell-padding-inline, 'comfortable')
-        );
+
+        @if $variant != 'indigo' {
+            padding-inline: pad-inline(
+                map.get($grid-cell-padding-inline, 'compact'),
+                map.get($grid-cell-padding-inline, 'cosy'),
+                map.get($grid-cell-padding-inline, 'comfortable')
+            );
+        } @else {
+            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        }
+
         padding-block: 0;
-        font-size: $grid-cell-fs;
-        line-height: $grid-cell-lh;
         color: inherit;
         text-align: start;
         background-clip: border-box !important;
-        min-height: sizable(
-            rem(32px),
-            rem(40px),
-            rem(50px)
-        );
+
+        @if $variant != 'indigo' {
+            font-size: $grid-cell-fs;
+            line-height: $grid-cell-lh;
+            min-height: sizable(
+                rem(32px),
+                rem(40px),
+                rem(50px)
+            );
+        } @else {
+            @include type-style('detail-1', false);
+
+            min-height: sizable(
+                rem(32px),
+                rem(40px),
+                rem(48px)
+            );
+        }
     }
 
     // This is no longer being extended and is left
@@ -1877,14 +1951,21 @@
         flex-flow: row nowrap;
         justify-content: space-between;
         align-items: flex-end;
-        font-size: $grid-head-fs;
-        font-weight: $grid-head-fw;
+
+        @if $variant != 'indigo' {
+            font-size: $grid-head-fs;
+            font-weight: $grid-head-fw;
+
+            padding-inline: pad-inline(
+                map.get($grid-header-padding-inline, 'compact'),
+                map.get($grid-header-padding-inline, 'cosy'),
+                map.get($grid-header-padding-inline, 'comfortable')
+            );
+        } @else {
+            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        }
+
         min-width: 0;
-        padding-inline: pad-inline(
-            map.get($grid-header-padding-inline, 'compact'),
-            map.get($grid-header-padding-inline, 'cosy'),
-            map.get($grid-header-padding-inline, 'comfortable')
-        );
         padding-block: 0;
         border-inline-end: $grid-header-border;
         min-height: var(--header-size);
@@ -1901,7 +1982,13 @@
 
     %grid-cell-header-title {
         @include ellipsis();
-        font-weight: $grid-header-weight;
+
+        @if $variant != 'indigo' {
+            font-weight: $grid-header-weight;
+        } @else {
+            @include type-style('detail-2', false);
+        }
+
         min-width: 3ch;
         user-select: none;
         cursor: initial;
@@ -1976,6 +2063,10 @@
 
     %igx-grid-th__group-title {
         @include ellipsis();
+
+        @if $variant == 'indigo' {
+            @include type-style('detail-2', false);
+        }
     }
 
     %igx-grid-th--collapsible {
@@ -1983,11 +2074,8 @@
     }
 
     %igx-grid-th--selectable {
-        color: var-get($theme, 'header-selected-text-color');
-        background: var-get($theme, 'header-selected-background');
-
         @if $variant != 'indigo' {
-            opacity: .7;
+            opacity: if($theme-variant == 'light', .75, .85);
 
             &%grid__drag-ghost-image {
                 opacity: 1;
@@ -2003,6 +2091,25 @@
                 background: var-get($theme, 'header-selected-background');
             }
         }
+    }
+
+    // TODO, remove igx-banner__row extra div if possible
+    @if $variant {
+        %igx-banner__row {
+            display: contents;
+        }
+    }
+
+    %igx-grid-th--selected {
+        .sort-icon::after {
+            background: var-get($theme, 'header-selected-background');
+        }
+    }
+
+    %igx-grid-th--selectable,
+    %igx-grid-th--selected {
+        color: var-get($theme, 'header-selected-text-color');
+        background: var-get($theme, 'header-selected-background');
 
         &%igx-grid-th--sorted {
             .sort-icon {
@@ -2014,23 +2121,23 @@
                 }
             }
         }
-    }
-
-    %igx-grid-th--selected {
-        color: var-get($theme, 'header-selected-text-color');
-        background: var-get($theme, 'header-selected-background');
-
-        .sort-icon::after {
-            background: var-get($theme, 'header-selected-background');
-        }
 
-        &%igx-grid-th--sorted {
-            .sort-icon {
+        @if $variant == 'indigo' {
+            %grid-excel-icon--filtered,
+            %grid-excel-icon {
                 color: var-get($theme, 'header-selected-text-color');
 
+                %igx-icon-display {
+                    color: var-get($theme, 'header-selected-text-color');
+                }
+
                 &:focus,
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
+
+                    %igx-icon-display {
+                        color: var-get($theme, 'header-selected-text-color');
+                    }
                 }
             }
         }
@@ -2052,7 +2159,7 @@
     %igx-grid-th--sortable {
         .sort-icon {
             cursor: pointer;
-            opacity: .7;
+            opacity: if($variant == 'indigo', if($theme-variant == 'light', .75, .85), .7);
 
             &:hover {
                 opacity: 1;
@@ -2073,14 +2180,16 @@
 
     %igx-grid-th--filtrable {
         %grid-cell-header-title {
-            opacity: .7;
+            @if $variant != 'indigo' {
+                opacity: .7;
+            }
         }
     }
 
     %igx-grid-th--filtrable-sortable {
         .sort-icon {
             cursor: pointer;
-            opacity: .7;
+            opacity: if($variant == 'indigo', 1, .7);
 
             &:hover {
                 opacity: 1;
@@ -2088,6 +2197,8 @@
         }
     }
 
+    %grid-excel-icon--filtered,
+    %grid-excel-icon,
     .sort-icon {
         transition: all 250ms ease-in-out;
     }
@@ -2164,6 +2275,7 @@
         %igx-grid-summary__result {
             color: var-get($theme, 'root-summaries-text-color');
         }
+
     }
 
     %grid-summaries--body {
@@ -2188,6 +2300,10 @@
         position: relative;
         z-index: 1;
         border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
+
+        @if $variant == 'indigo' {
+            border-top: rem(1px) solid var-get($theme, 'header-border-color');
+        }
     }
 
     // Column moving
@@ -2282,7 +2398,7 @@
         %grid-cell-header-title {
             @include ellipsis();
             flex: 1 0 0;
-            text-align: end;
+            text-align: if($variant == 'indigo', start, end);
         }
 
         %grid-cell-header-icons {
@@ -2296,7 +2412,7 @@
 
     %grid__drag-ghost-image-icon {
         color: var-get($theme, 'ghost-header-icon-color');
-        margin-inline-end: rem(12px);
+        margin-inline-end: if($variant == 'indigo', rem(8px), rem(12px));
     }
 
     %grid__drag-ghost-image-icon-group {
@@ -2359,14 +2475,7 @@
         align-items: center;
         justify-content: flex-start;
         line-height: rem(16px);
-
-        > * {
-            margin-inline-end: rem(4px);
-
-            &:last-child {
-                margin-inline-end: 0;
-            }
-        }
+        gap: rem(4px);
     }
 
     %igx-group-label__icon {
@@ -2379,34 +2488,42 @@
     }
 
     %igx-group-label__column-name {
+        @if $variant != 'indigo' {
+            font-weight: 600;
+            font-size: rem(12px);
+        } @else {
+            @include type-style('detail-2', false);
+        }
+
         color: var-get($theme, 'group-label-column-name-text');
-        font-weight: 600;
-        font-size: rem(12px);
+
     }
 
-    %igx-group-label__count-badge {
-        --background-color: #{var-get($theme, 'group-count-background')};
-        --text-color: #{var-get($theme, 'group-count-text-color')};
 
-        > span {
-            font-size: $grid-head-fs;
+        %igx-group-label__count-badge {
+            --background-color: #{var-get($theme, 'group-count-background')};
+            --text-color: #{var-get($theme, 'group-count-text-color')};
+
+            @if $variant == 'indigo' {
+                --shadow: none;
+            }
+
+            > span {
+                font-size: $grid-head-fs;
+            }
         }
-    }
+
 
     %igx-group-label__text {
-        font-size: rem(13px);
+        @if $variant != 'indigo' {
+            font-size: rem(13px);
+        } @else {
+            @include type-style('detail-1', false);
+        }
         color: var-get($theme, 'group-label-text')
     }
 
     [dir='rtl'] {
-        %igx-grid__group-content {
-            padding-inline-start: pad-inline(
-                map.get($grid-grouping-indicator-padding, 'compact'),
-                map.get($grid-grouping-indicator-padding, 'cosy'),
-                map.get($grid-grouping-indicator-padding, 'comfortable')
-            );
-        }
-
         %igx-group-label {
             > * {
                 margin-inline-start: rem(4px);
@@ -2423,11 +2540,16 @@
         align-items: center;
         justify-content: flex-start;
         flex: 1 1 auto;
-        padding-inline-start: pad-inline(
-            map.get($grid-grouping-indicator-padding, 'compact'),
-            map.get($grid-grouping-indicator-padding, 'cosy'),
-            map.get($grid-grouping-indicator-padding, 'comfortable')
-        );
+        @if $variant != 'indigo' {
+            padding-inline-start: pad-inline(
+                map.get($grid-grouping-indicator-padding, 'compact'),
+                map.get($grid-grouping-indicator-padding, 'cosy'),
+                map.get($grid-grouping-indicator-padding, 'comfortable')
+            );
+        } @else {
+            padding-inline-start: 0;
+        }
+
         min-height: sizable(
             map.get($grid-header-height, 'compact'),
             map.get($grid-header-height, 'cosy'),
@@ -2539,11 +2661,17 @@
             map.get($drop-area-height, 'cosy'),
             map.get($drop-area-height, 'comfortable')
         );
-        padding-inline: pad-inline(
-            map.get($grid-cell-padding-inline, 'compact'),
-            map.get($grid-cell-padding-inline, 'cosy'),
-            map.get($grid-cell-padding-inline, 'comfortable')
-        );
+
+        @if $variant != 'indigo' {
+            padding-inline: pad-inline(
+                map.get($grid-cell-padding-inline, 'compact'),
+                map.get($grid-cell-padding-inline, 'cosy'),
+                map.get($grid-cell-padding-inline, 'comfortable')
+            );
+        } @else {
+            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        }
+
         padding-block: 0;
         flex: 1 0 0%;
         background: var-get($theme, 'drop-area-background');
@@ -2576,7 +2704,7 @@
         align-items: center;
         z-index: 1;
         cursor: pointer;
-        padding-inline-end: $grouping-padding-right;
+        padding-inline-end: if($variant == 'indigo', rem(16px), rem(12px));
         margin-inline-start: sizable(
             #{map.get($grid-grouping-indicator-padding, 'compact')},
             #{map.get($grid-grouping-indicator-padding, 'cosy')},
@@ -2715,11 +2843,17 @@
         border-inline-end: $grid-header-border;
         border-top: $grid-header-border;
         height: var(--header-size);
-        padding-inline: pad-inline(
-            map.get($grid-header-padding-inline, 'compact'),
-            map.get($grid-header-padding-inline, 'cosy'),
-            map.get($grid-header-padding-inline, 'comfortable')
-        );
+
+        @if $variant != 'indigo' {
+            padding-inline: pad-inline(
+                map.get($grid-header-padding-inline, 'compact'),
+                map.get($grid-header-padding-inline, 'cosy'),
+                map.get($grid-header-padding-inline, 'comfortable')
+            );
+        } @else {
+            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        }
+
         padding-block: 0;
         overflow: hidden;
 
@@ -2796,7 +2930,11 @@
             z-index: -1;
         }
 
-        @extend %filtering-row-input-overrides;
+        @extend %filtering-row-input-overrides !optional;
+
+        igx-input-group {
+            --ig-size: var(--grid-size) !important;
+        }
 
         [igxIconButton] {
             --ig-size: 1;
@@ -2828,48 +2966,38 @@
         igx-chips-area {
             transition: transform .25s $ease-out-back;
             flex-wrap: nowrap;
-            margin: 0 rem(8px);
-        }
-
-        igx-chip {
-            margin: 0 rem(4px);
+            margin-inline: if($variant == 'indigo', rem(12px), rem(8px));
+            gap: rem(4px);
         }
 
-        [igxButton] {
-            igx-icon {
-                position: absolute;
-                inset-inline-start: rem(12px);
-                // IE fix for vertical alignment
-                top: 50%;
-                transform: translateY(-50%);
+        @if $variant != 'indigo' {
+            igx-chip {
+                margin: 0 rem(4px);
             }
 
-            span {
-                margin-inline-start: rem(16px);
+            [igxButton] {
+                igx-icon {
+                    position: absolute;
+                    inset-inline-start: rem(12px);
+                    // IE fix for vertical alignment
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+
+                span {
+                    margin-inline-start: rem(16px);
+                }
             }
         }
     }
 
     %igx-grid__filtering-scroll-start {
-        width: rem(24px);
-        height: rem(24px);
-        position: relative;
-        overflow: visible;
-        margin: 0 rem(8px);
-        z-index: 1;
-
         &::after {
             @include _filtering-scroll-mask($theme, right);
             inset-inline-start: calc(100% + 6px);
         }
 
         [dir='rtl'] & {
-            transform: scaleX(-1);
-
-            &::after {
-                content: initial;
-            }
-
             &::before {
                 @include _filtering-scroll-mask($theme, right);
                 inset-inline-end: calc(100% + 6px);
@@ -2877,29 +3005,34 @@
         }
     }
 
+    %igx-grid__filtering-scroll-end {
+        &::before {
+            @include _filtering-scroll-mask($theme, left);
+            inset-inline-end: calc(100% + 6px);
+        }
+
+        [dir='rtl'] & {
+            &::after {
+                @include _filtering-scroll-mask($theme, left);
+                inset-inline-start: calc(100% + 6px);
+            }
+        }
+    }
+
+    %igx-grid__filtering-scroll-start,
     %igx-grid__filtering-scroll-end {
         width: rem(24px);
         height: rem(24px);
         position: relative;
         overflow: visible;
-        margin: 0 rem(8px);
+        margin: if($variant == 'indigo', rem(12px), rem(8px));
         z-index: 1;
 
-        &::before {
-            @include _filtering-scroll-mask($theme, left);
-            inset-inline-end: calc(100% + 6px);
-        }
-
         [dir='rtl'] & {
             transform: scaleX(-1);
 
-            &::before {
-                content: initial;
-            }
-
             &::after {
-                @include _filtering-scroll-mask($theme, left);
-                inset-inline-start: calc(100% + 6px);
+                content: initial;
             }
         }
     }
@@ -3043,7 +3176,11 @@
 
     %advanced-filtering-dialog {
         background: var-get($theme, 'filtering-row-background');
-        box-shadow: elevation(12);
+        box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 12));
+
+        @if $variant == 'indigo' {
+            border-radius: rem(10px);
+        }
 
         igx-query-builder {
             --igx-query-builder-background: #{var-get($theme, 'filtering-row-background')};
@@ -3052,6 +3189,10 @@
             --igx-query-builder-background-or: #{var-get($theme, 'filtering-background-or')};
             --igx-query-builder-background-or--focus: #{var-get($theme, 'filtering-background-or--focus')};
             box-shadow: none;
+
+            @if $variant == 'indigo' {
+                border-radius: rem(10px);
+            }
         }
 
         igx-query-builder-header {
@@ -3090,7 +3231,7 @@
         --ig-size: 1 !important;
         %grid-cell-display,
         %grid-cell-header {
-            padding: 0 rem(4px) !important;
+            padding: 0 if($variant != 'indigo', rem(4px), rem(6px)) !important;
             min-height: rem(24px) !important;
             height: rem(24px);
         }
@@ -3104,7 +3245,6 @@
         }
     }
 
-
     %grid-thead--pivot {
         display: flex;
 
@@ -3129,11 +3269,17 @@
         overflow: hidden;
         z-index: 3;
         height: var(--header-size);
-        padding-inline: pad-inline(
-            map.get($grid-header-padding-inline, 'compact'),
-            map.get($grid-header-padding-inline, 'cosy'),
-            map.get($grid-header-padding-inline, 'comfortable')
-        );
+
+        @if $variant != 'indigo' {
+            padding-inline: pad-inline(
+                map.get($grid-header-padding-inline, 'compact'),
+                map.get($grid-header-padding-inline, 'cosy'),
+                map.get($grid-header-padding-inline, 'comfortable')
+            );
+        } @else {
+            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        }
+
         padding-block: 0;
         background-clip: border-box !important;
         border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
@@ -3174,8 +3320,19 @@
     }
 
     %igx-grid__pivot-empty-chip-area {
-        line-height: normal;
-        font-size: rem(14px);
+        @if $variant != 'indigo' {
+            line-height: normal;
+            font-size: rem(14px);
+        } @else {
+            @include type-style('body-2');
+
+            @if $theme-variant == 'light' {
+                color: color($color: 'gray', $variant: 600);
+            } @else {
+                color: contrast-color($color: 'gray', $variant: 50, $opacity: .6);
+            }
+        }
+
         margin-inline-end: 0 !important;
     }
 
@@ -3256,24 +3413,45 @@
             igx-pivot-row-dimension-header {
                 align-items: center;
             }
+
+            @if $variant == 'indigo' {
+                %igx-icon-display {
+                    opacity: if($theme-variant == 'light', .75, .85);
+
+
+                    &:hover {
+                        opacity: 1;
+                        cursor: pointer;
+                    }
+                }
+            }
         }
 
         igx-pivot-row-header-group {
-            padding-left: pad-inline(
-                map.get($grid-header-padding-inline, 'compact'),
-                map.get($grid-header-padding-inline, 'cosy'),
-                map.get($grid-header-padding-inline, 'comfortable')
-            );
+            @if $variant != 'indigo' {
+                padding-inline-start: pad-inline(
+                    map.get($grid-header-padding-inline, 'compact'),
+                    map.get($grid-header-padding-inline, 'cosy'),
+                    map.get($grid-header-padding-inline, 'comfortable')
+                );
+            } @else {
+                padding-inline-start: pad-inline(rem(8px), rem(12px), rem(16px));
+            }
 
             igx-pivot-row-dimension-header {
                 align-items: center;
 
                 .igx-grid-th__icons {
-                    padding-right: pad-inline(
-                        map.get($grid-header-padding-inline, 'compact'),
-                        map.get($grid-header-padding-inline, 'cosy'),
-                        map.get($grid-header-padding-inline, 'comfortable')
-                    );
+                    @if $variant != 'indigo' {
+                        padding-inline-end: pad-inline(
+                            map.get($grid-header-padding-inline, 'compact'),
+                            map.get($grid-header-padding-inline, 'cosy'),
+                            map.get($grid-header-padding-inline, 'comfortable')
+                        );
+                    } @else {
+                        padding-inline-end: pad-inline(rem(8px), rem(12px), rem(16px));
+                    }
+
                     align-self: center;
                 }
             }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
index 16e1e3cfac2..bb6a932ab7e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
@@ -38,6 +38,7 @@
     }
 
     $theme: digest-schema($grid-paginator-schema);
+    $meta: map.get($theme, '_meta');
 
     @if not($text-color) and $background-color {
         $text-color: text-contrast($background-color);
@@ -47,7 +48,10 @@
         name: $name,
         text-color: $text-color,
         background-color: $background-color,
-        border-color: $border-color
+        border-color: $border-color,
+        _meta: map.merge(if($meta, $meta, ()), (
+            variant: map.get($schema, '_meta', 'theme')
+        )),
     ));
 }
 
@@ -57,6 +61,8 @@
 @mixin paginator($theme) {
     @include css-vars($theme);
 
+    $variant: map.get($theme, '_meta', 'variant');
+
     $paginator-padding-inline: (
         comfortable: rem(24px),
         cosy: rem(16px),
@@ -73,6 +79,13 @@
         background: var-get($theme, 'background-color');
         font-size: rem(12px);
         border-top: rem(1px) solid var-get($theme, 'border-color');
+
+        @if $variant == 'indigo' {
+            font-size: rem(11px);
+            font-weight: 400;
+            line-height: rem(15px);
+        }
+
         z-index: 1;
         padding-inline: pad-inline(map.get($paginator-padding-inline, 'compact'), map.get($paginator-padding-inline, 'cosy'), map.get($paginator-padding-inline, 'comfortable'));
         padding-block: 0;
@@ -112,8 +125,10 @@
         max-width: rem(114px);
         min-width: rem(100px);
 
-        igx-select {
-            --ig-size: 1;
+        @if $variant != 'indigo' {
+            igx-select {
+                --ig-size: 1;
+            }
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
index 71b0f9524f6..365e3839b1b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
@@ -9,6 +9,7 @@
 /// @param {Color} background [null] - The background color of the filtering row.
 /// @param {Color} header-background [null] - The background color of the query builder header.
 /// @param {Color} header-foreground [null] - The foreground color of the query builder header.
+/// @param {Color} header-border [null] - The border color of the query builder header.
 /// @param {Map} background-and [null] - The background color of advanced filtering "AND" condition.
 /// @param {Map} background-and--focus [null] - The background color on focus/selected of advanced filtering "AND" condition.
 /// @param {Map} background-or [null] - The background color of advanced filtering "OR" condition.
@@ -24,6 +25,7 @@
     $background: null,
     $header-background: null,
     $header-foreground: null,
+    $header-border: null,
     $background-and: null,
     $background-and--focus: null,
     $background-or: null,
@@ -53,6 +55,7 @@
         background: $background,
         header-background: $header-background,
         header-foreground: $header-foreground,
+        header-border: $header-border,
         background-and: $background-and,
         background-and--focus: $background-and--focus,
         background-or: $background-or,
@@ -77,6 +80,7 @@
     @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'variant');
+    $theme-variant: map.get($theme, '_meta', 'theme-variant');
     $bootstrap-theme: $variant == 'bootstrap';
     $not-bootstrap-theme: not($bootstrap-theme);
 
@@ -105,16 +109,22 @@
     }
 
     %advanced-filter__header {
+        @if $variant != 'indigo' {
+            @include type-style('h6');
+        } @else {
+            @include type-style('h5');
+
+            border-top-left-radius: border-radius(rem(10px));
+            border-top-right-radius: border-radius(rem(10px));
+        }
+
         display: flex;
         align-items: center;
         background-color: var-get($theme, 'header-background');
         color: var-get($theme, 'header-foreground');
         user-select: none;
-
-        h4,
-        .ig-typography__h6 {
-            margin-bottom: 0;
-        }
+        margin-bottom: 0;
+        border-block-end: rem(1px) solid var-get($theme, 'header-border');
     }
 
     %advanced-filter__main {
@@ -342,6 +352,10 @@
         align-items: center;
         font-size: rem(12px);
 
+        @if $variant == 'indigo' {
+            font-weight: 400;
+        }
+
         &::before {
             content: '';
             width: rem(24px);
@@ -444,7 +458,15 @@
     }
 
     %filter-empty__title {
-        color: color(null, 'gray', 500);
+        @if $variant == 'indigo' {
+            @if $theme-variant == 'light' {
+                color: color(null, 'gray', 600);
+            } @else {
+                color: contrast-color(null, 'gray', 50, .6);
+            }
+        } @else {
+            color: color(null, 'gray', 600);
+        }
     }
 
     %advanced-filter--inline {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
index 70e18e47fac..8e35876a950 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
@@ -100,6 +100,13 @@
         }
     }
 
+    %form-group-bundle:hover,
+    %form-group-bundle:focus-within {
+        %igx-select__toggle-button {
+            color: var-get($theme, 'toggle-button-foreground-focus');
+        }
+    }
+
     .igx-input-group--filled {
         %igx-select__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-filled');
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss
index f8b1330833f..10a0a363109 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss
@@ -32,7 +32,7 @@
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
 
-@mixin typography() {
+@mixin typography($type-scale) {
     @include badge-typography($categories: (
         text: 'button',
     ));
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss
index 9eed3f653d8..08450762053 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss
@@ -36,7 +36,7 @@
     }
 
     @if $variant == 'indigo' {
-        @include indigo.typography();
+        @include indigo.typography($type-scale);
     }
 }
 
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.html b/projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.html
index 95a23b432b0..f0536d6aa08 100644
--- a/projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.html
+++ b/projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.html
@@ -1,5 +1,5 @@
 <div class="igx-query-builder__header">
-    <div class="ig-typography__h6" style="pointer-events: none;">
+    <div style="pointer-events: none;">
         {{ title }}
         <ng-content></ng-content>
     </div>
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts
index 5df2f464cbd..eff53cf0560 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts
@@ -1445,7 +1445,7 @@ export class GridFunctions {
 
     public static getAdvancedFilteringHeaderText(fix: ComponentFixture<any>) {
         const header = GridFunctions.getAdvancedFilteringHeader(fix);
-        const title = header.querySelector('.ig-typography__h6');
+        const title = header.querySelector('.igx-query-builder__header > div');
         return title.innerText;
     }
 
diff --git a/src/app/grid-column-selection/grid-column-selection.sample.html b/src/app/grid-column-selection/grid-column-selection.sample.html
index 53baa4569ed..b14d5e328a3 100644
--- a/src/app/grid-column-selection/grid-column-selection.sample.html
+++ b/src/app/grid-column-selection/grid-column-selection.sample.html
@@ -1,102 +1,106 @@
-<div class="wrapper">
-    <div class="sample-content">
-        <div class="sample-column">
-            <div class="sample-buttons">
-                <button igxButton="contained" [igxToggleAction]="dropDownComfortable"
-                    [igxDropDownItemNavigation]="dropDownComfortable">
-                    Column Selection: {{grid1.columnSelection}}</button>
-                <igx-drop-down #dropDownComfortable (selected)="selected($event)">
-                    <igx-drop-down-item *ngFor="let item of selectionModes">
-                        {{ item }}
-                    </igx-drop-down-item>
-                </igx-drop-down>
-            </div>
-            <div class="density-chooser">
-                <igx-buttongroup [values]="sizes" (selected)="selectDensity($event)"></igx-buttongroup>
-            </div>
-            <igx-grid #grid1 [data]="data" [columnSelection]="'multiple'" [allowFiltering]="true"
-                [rowSelection]="'multiple'" [filterMode]="'excelStyleFilter'" [moving]="true" [width]="'900px'"
-                [height]="'800px'" (columnSelectionChanging)="onColumnSelection($event)">
-                <igx-grid-toolbar>
-                    <igx-grid-toolbar-actions>
-                       <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
-                       <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
-                        <!-- <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering> -->
-                    </igx-grid-toolbar-actions>
-                    <button igxButton="outlined" #columnSelectionButton igxRipple (click)="toggleColumnSelection()"
-                            >
-                        <igx-checkbox [checked]="true" [disableRipple]="true" [readonly]="true" [disabled]="true">
-                        </igx-checkbox>
-                        <span>{{ grid1.selectedColumns().length }}</span>
-                    </button>
-                    <igx-drop-down #columnSelectionDropdown>
-                        <igx-input-group class="igx-column-hiding__header-input">
+<div>
+    <igx-grid #grid1 [data]="data" [columnSelection]="'multiple'" [allowFiltering]="true"
+              [rowSelection]="'multiple'" [filterMode]="'excelStyleFilter'" [moving]="true"
+              [height]="'530px'" (columnSelectionChanging)="onColumnSelection($event)">
+        <igx-grid-toolbar>
+            <igx-grid-toolbar-title>
+                Grid 1 selection mode is: <span class="selection-mode">{{grid1.columnSelection}}</span>
+            </igx-grid-toolbar-title>
+            <igx-grid-toolbar-actions>
+                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
+                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
+                <!-- <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering> -->
+            </igx-grid-toolbar-actions>
+            <button igxButton="outlined" #columnSelectionButton igxRipple (click)="toggleColumnSelection()"
+            >
+                <igx-checkbox [checked]="grid1.selectedColumns().length > 0" [disableRipple]="true" [readonly]="true" [disabled]="true">
+                </igx-checkbox>
+                <span>{{ grid1.selectedColumns().length }}</span>
+            </button>
+            <igx-drop-down #columnSelectionDropdown>
+                <div class="column-actions">
+                    <div class="column-actions__header">
+                        <igx-input-group class="column-actions__header-input">
+                            <label igxLabel>Column list</label>
                             <input igxInput tabindex="0" [(ngModel)]="searchSelectedColumn"
                                    [placeholder]="'Filter Column list ...'" autocomplete="off" />
                         </igx-input-group>
-                        <div class="igx-column-hiding__columns"
-                             [style.max-height]="(grid1.calcHeight) ? grid1.calcHeight * 0.7 + 'px' : '100%'">
-                            <igx-checkbox
-                                    *ngFor="let columnItem of grid1.columns | filterColumns: searchSelectedColumn"
-                                    class="igx-column-hiding__columns-item"
-                                    (change)="columnItem.selected = !columnItem.selected" [checked]="columnItem.selected"
-                                    [disabled]="!columnItem.selectable">
-                                {{ columnItem.field }}
-                            </igx-checkbox>
-                        </div>
-                        <div class="igx-column-hiding__buttons">
-                            <button igxButton igxRipple (click)="grid1.selectAllColumns()">Select All</button>
-                            <button igxButton igxRipple (click)="grid1.deselectAllColumns()"
-                                    [disabled]="grid1.selectedColumns().length === 0">Deselect All</button>
-                        </div>
-                    </igx-drop-down>
-                </igx-grid-toolbar>
-                <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field"
+                    </div>
+                    <div class="column-actions__columns"
+                         [style.max-height]="(grid1.calcHeight) ? grid1.calcHeight * 0.7 + 'px' : '100%'">
+                        <igx-checkbox
+                                *ngFor="let columnItem of grid1.columns | filterColumns: searchSelectedColumn"
+                                class="igx-column-hiding__columns-item"
+                                (change)="columnItem.selected = !columnItem.selected" [checked]="columnItem.selected"
+                                [disabled]="!columnItem.selectable">
+                            {{ columnItem.field }}
+                        </igx-checkbox>
+                    </div>
+                    <div class="column-hiding__buttons">
+                        <button igxButton igxRipple (click)="grid1.selectAllColumns()">Select All</button>
+                        <button igxButton igxRipple (click)="grid1.deselectAllColumns()"
+                                [disabled]="grid1.selectedColumns().length === 0">Deselect All</button>
+                    </div>
+                </div>
+            </igx-drop-down>
+        </igx-grid-toolbar>
+        <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field"
                     [groupable]="c.groupable" [resizable]="c.resizable" [width]="c.width" [sortable]="c.sortable"
                     [filterable]="true" [editable]="true" [hidden]="c.hidden" [hasSummary]="true"
                     [selectable]="c.selectable" [dataType]="c.type">
-                </igx-column>
-                <igx-paginator *ngIf="paging"></igx-paginator>
-            </igx-grid>
+        </igx-column>
+        <igx-paginator *ngIf="paging"></igx-paginator>
+    </igx-grid>
 
-            <h4 class="sample-title">TEST EXAMPLE</h4>
-            <igx-grid #grid [data]="data" height="500px" width="1000px" [columnSelection]="'multiple'"
-                columnWidth="100px">
-                <igx-column-group header="General Information">
-                    <igx-column field="CompanyName"></igx-column>
-                    <igx-column-group header="Person Details">
-                        <igx-column field="ContactName" [hidden]="true"></igx-column>
-                        <igx-column field="ContactTitle" [selectable]="false"></igx-column>
-                    </igx-column-group>
-                </igx-column-group>
-                <igx-column field="ID"></igx-column>
-                <igx-column-group header="Country Information">
+    <igx-grid #grid2 [data]="data" height="300px" [columnSelection]="'multiple'"
+              columnWidth="100px">
+        <igx-grid-toolbar>
+            <igx-grid-toolbar-title>
+                Grid 2 selection mode is: <span class="selection-mode">{{grid2.columnSelection}}</span>
+            </igx-grid-toolbar-title>
+        </igx-grid-toolbar>
+        <igx-column-group header="General Information">
+            <igx-column field="CompanyName"></igx-column>
+            <igx-column-group header="Person Details">
+                <igx-column field="ContactName" [hidden]="true"></igx-column>
+                <igx-column field="ContactTitle" [selectable]="false"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+        <igx-column field="ID"></igx-column>
+        <igx-column-group header="Country Information">
 
-                    <igx-column-group header="Region Information">
-                        <igx-column field="Country" [selectable]="false"></igx-column>
-                        <igx-column field="Region"></igx-column>
-                        <igx-column field="PostalCode"></igx-column>
-                    </igx-column-group>
-                    <igx-column-group header="City Information">
-                        <igx-column field="City"></igx-column>
-                        <igx-column field="Address"></igx-column>
-                    </igx-column-group>
-                </igx-column-group>
-            </igx-grid>
-            <div class="sample-buttons">
-                <igx-buttongroup [values]="filterModes" (selected)="selectFilterMode($event)">
-                </igx-buttongroup>
-            </div>
-            <div class="sample-buttons">
-                <igx-switch [(ngModel)]="paging">Enable Paging</igx-switch>
-                <br>
-                <button igxButton="contained" (click)="getGridSelectedColunsData()">Get Selected Columns Data</button>
-                <button igxButton="contained" (click)="getGridSelectedColumns()">Get Selected Columns</button>
-                <button igxButton="contained" (click)="selectedColumns()">Select Columns</button>
-                <button igxButton="contained" (click)="deselectCol()">Deselect ID</button>
-                <button igxButton="contained" (click)="grid1.deselectAllColumns()">Deselect all columns</button>
-                <button igxButton="contained" (click)="getGenInfoState()">get gen info state</button>
-            </div>
-        </div>
-    </div>
+            <igx-column-group header="Region Information">
+                <igx-column field="Country" [selectable]="false"></igx-column>
+                <igx-column field="Region"></igx-column>
+                <igx-column field="PostalCode"></igx-column>
+            </igx-column-group>
+            <igx-column-group header="City Information">
+                <igx-column field="City"></igx-column>
+                <igx-column field="Address"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+    </igx-grid>
 </div>
+
+<div class="sample-actions">
+    <igx-buttongroup [values]="sizes" (selected)="selectDensity($event)"></igx-buttongroup>
+    <igx-buttongroup [values]="filterModes" (selected)="selectFilterMode($event)"></igx-buttongroup>
+    <button igxButton="outlined" [igxToggleAction]="dropDownComfortable"
+            [igxDropDownItemNavigation]="dropDownComfortable">
+        <span>Selection mode: {{grid1.columnSelection}}</span>
+        <igx-icon igxSuffix>expand_more</igx-icon>
+    </button>
+    <igx-drop-down #dropDownComfortable (selectionChanging)="selected($event)">
+        <igx-drop-down-item *ngFor="let item of selectionModes">
+            {{ item }}
+        </igx-drop-down-item>
+    </igx-drop-down>
+    <igx-switch [(ngModel)]="paging">Enable Paging</igx-switch>
+    <button igxButton="contained" (click)="getGridSelectedColunsData()">Console log Selected Columns Data</button>
+    <button igxButton="contained" (click)="getGridSelectedColumns()">Console log Selected Columns</button>
+    <button igxButton="contained" (click)="getGenInfoState()">Console log gen info state</button>
+    <button igxButton (click)="selectedColumns()">Select Columns</button>
+    <button igxButton [disabled]="" (click)="deselectCol()">Deselect ID</button>
+    <button igxButton (click)="grid1.deselectAllColumns()">Deselect all columns</button>
+</div>
+
diff --git a/src/app/grid-column-selection/grid-column-selection.sample.scss b/src/app/grid-column-selection/grid-column-selection.sample.scss
index c01c8648c58..ac5fdf58eb2 100644
--- a/src/app/grid-column-selection/grid-column-selection.sample.scss
+++ b/src/app/grid-column-selection/grid-column-selection.sample.scss
@@ -1,23 +1,71 @@
-.sample-buttons {
-    margin-top: 24px;
+:host {
+    display: flex;
+    gap: 32px;
 
-    & > button,
-    & > igx-drop-down {
-        --ig-size: var(--ig-size-large);
+    > :first-child {
+        flex: 1;
     }
 }
 
-[igxButton] {
-    margin: 8px 8px 8px 0;
+.sample-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    border: 1px solid hsla(var(--ig-gray-200));
+    margin-block-end: 8px;
+}
+
+.column-actions {
+    max-width: 230px;
+}
+
+.column-actions,
+.column-actions__header,
+.column-actions__columns {
+    display: flex;
+    flex-direction: column;
+}
+
+.column-actions__header {
+    padding: 16px;
+}
+
+.column-actions__columns {
+    flex: 1;
+    height: 150px;
+    overflow-y: auto;
+
+    gap: 8px;
+
+    > * {
+        padding-block: 4px;
+        padding-inline: 16px;
+    }
+}
+
+.column-hiding__buttons {
+    display: flex;
+    gap: 16px;
+    padding: 8px 16px;
 }
 
 .density-chooser {
-    margin-bottom: 16px;
-    max-width: 900px;
+    display: block;
+    margin-block-end: 16px;
 }
 
 igx-grid {
+    margin-block-end: 32px;
+
+    z-index: 0;
+
     &:first-of-type {
-        margin-bottom: 3rem;
+        z-index: 1;
     }
 }
+
+.selection-mode {
+    text-transform: uppercase;
+    color: hsla(var(--ig-primary-400));
+}
diff --git a/src/app/grid-column-selection/grid-column-selection.sample.ts b/src/app/grid-column-selection/grid-column-selection.sample.ts
index c9ee32c18d9..d87b0466b3e 100644
--- a/src/app/grid-column-selection/grid-column-selection.sample.ts
+++ b/src/app/grid-column-selection/grid-column-selection.sample.ts
@@ -3,7 +3,36 @@ import { NgFor, NgIf } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 import { SAMPLE_DATA } from '../shared/sample-data';
-import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, FilterMode, HorizontalAlignment, IgxButtonDirective, IgxButtonGroupComponent, IgxCheckboxComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxGridComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxInputDirective, IgxInputGroupComponent, IgxPaginatorComponent, IgxRippleDirective, IgxSwitchComponent, IgxToggleActionDirective, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular';
+import {
+    AbsoluteScrollStrategy,
+    ConnectedPositioningStrategy,
+    FilterMode,
+    HorizontalAlignment,
+    IgxButtonDirective,
+    IgxButtonGroupComponent,
+    IgxCheckboxComponent,
+    IgxColumnComponent,
+    IgxColumnGroupComponent,
+    IgxDropDownComponent,
+    IgxDropDownItemComponent,
+    IgxDropDownItemNavigationDirective,
+    IgxGridComponent,
+    IgxGridToolbarActionsComponent,
+    IgxGridToolbarComponent,
+    IgxGridToolbarHidingComponent,
+    IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent,
+    IgxIconComponent,
+    IgxInputDirective,
+    IgxInputGroupComponent,
+    IgxLabelDirective,
+    IgxPaginatorComponent,
+    IgxRippleDirective, IgxSuffixDirective,
+    IgxSwitchComponent,
+    IgxToggleActionDirective,
+    OverlaySettings,
+    PositionSettings,
+    VerticalAlignment
+} from 'igniteui-angular';
 
 
 @Pipe({
@@ -34,7 +63,7 @@ export class GridColumnSelectionFilterPipe implements PipeTransform {
     styleUrls: ['grid-column-selection.sample.scss'],
     templateUrl: 'grid-column-selection.sample.html',
     standalone: true,
-    imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, NgIf, IgxDropDownItemComponent, IgxButtonGroupComponent, IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxPaginatorComponent, IgxRippleDirective, IgxCheckboxComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxSwitchComponent, GridColumnSelectionFilterPipe]
+    imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, NgIf, IgxDropDownItemComponent, IgxButtonGroupComponent, IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxPaginatorComponent, IgxRippleDirective, IgxCheckboxComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxSwitchComponent, GridColumnSelectionFilterPipe, IgxLabelDirective, IgxIconComponent, IgxSuffixDirective, IgxGridToolbarTitleComponent]
 })
 export class GridColumnSelectionSampleComponent implements OnInit, AfterViewInit {
     @HostBinding('style.--ig-size')
@@ -42,7 +71,7 @@ export class GridColumnSelectionSampleComponent implements OnInit, AfterViewInit
         return `var(--ig-size-${this.size})`;
     }
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
-    @ViewChild('grid', { static: true }) public grid: IgxGridComponent;
+    @ViewChild('grid2', { static: true }) public grid2: IgxGridComponent;
 
     @ViewChild('columnSelectionDropdown', { read: IgxDropDownComponent })
     public columnSelectionDropdown: IgxDropDownComponent;
@@ -120,8 +149,8 @@ export class GridColumnSelectionSampleComponent implements OnInit, AfterViewInit
     }
 
     public getGenInfoState() {
-        console.log('general info', this.grid.getColumnByName('CompanyName').parent.selected);
-        console.log('company name', this.grid.getColumnByName('CompanyName').selected);
+        console.log('general info', this.grid2.getColumnByName('CompanyName').parent.selected);
+        console.log('company name', this.grid2.getColumnByName('CompanyName').selected);
     }
 
     public selectDensity(event) {
@@ -129,17 +158,19 @@ export class GridColumnSelectionSampleComponent implements OnInit, AfterViewInit
     }
 
     public selected(event) {
-        const selection = event.newSelection.element.nativeElement.textContent.trim();
-        this.grid.columnSelection = selection;
-        this.grid1.columnSelection = selection;
+        const selectedItem = event.newSelection.element.nativeElement.textContent.trim();
+
+        this.grid1.columnSelection = selectedItem;
+        this.grid2.columnSelection = selectedItem;
     }
 
     public getGridSelectedColunsData() {
         const data = this.grid1.getSelectedColumnsData();
         console.log(data);
     }
+
     public deselectCol() {
-        this.grid1.getColumnByName('ID').selected = true;
+        this.grid1.getColumnByName('ID').selected = false;
     }
 
     public toggleColumnSelection() {
@@ -158,7 +189,7 @@ export class GridColumnSelectionSampleComponent implements OnInit, AfterViewInit
     }
 
     public selectedColumns() {
-        this.grid1.selectColumns(['ID', 'Name', 'aaaa']);
+        this.grid1.selectColumns(['ID', 'CompanyName', 'aaaa']);
     }
 
     public selectFilterMode(event) {
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index cf782515de3..632665ad146 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,10 +1,10 @@
 @use 'sass:map';
 @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *;
 
-$palette: $light-indigo-palette;
-$schema: $light-indigo-schema;
-$typeface: $indigo-typeface;
-$type-scale: $indigo-type-scale;
+$palette: $light-material-palette;
+$schema: $light-material-schema;
+$typeface: $material-typeface;
+$type-scale: $material-type-scale;
 $variant: map.get($schema, '_meta', 'variant');
 
 $background-color: var(--ig-gray-900-contrast);