diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
index 787d0a7eee9..803c9376faa 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
@@ -1506,7 +1506,7 @@
         min-height: var(--header-size);
         outline-style: none;
         overflow: hidden;
-        transition: color 250ms ease-in-out;
+        transition: color 120ms $ease-in-out-cubic;
     }
 
     %grid-cell-header--filtering {
@@ -1530,7 +1530,7 @@
         flex-grow: 1; /* hey IE, the text should take most of the space */
         // align-self: flex-end; /* commenting out for now on external request */
         line-height: var(--header-size);
-        transition: color 250ms ease-in-out;
+        transition: color 120ms $ease-in-out-cubic;
     }
 
     %grid-cell-header-icons {
@@ -1748,7 +1748,7 @@
     %grid-excel-icon--filtered,
     %grid-excel-icon,
     .sort-icon {
-        transition: all 250ms ease-in-out;
+        transition: all 120ms $ease-in-out-cubic;
     }
 
     %grid-cell-number {
diff --git a/src/app/grid-theme-builder/grid-theme-builder.sample.html b/src/app/grid-theme-builder/grid-theme-builder.sample.html
index a8454b64fba..03b96aeef4f 100644
--- a/src/app/grid-theme-builder/grid-theme-builder.sample.html
+++ b/src/app/grid-theme-builder/grid-theme-builder.sample.html
@@ -1,18 +1,21 @@
 <div class="sample" #sampleEl
+    [class.has-header-overrides]="gridHeaderBackground() || gridHeaderTextColor()"
     [style.--ig-grid-foreground]="gridForeground() || null"
     [style.--ig-grid-background]="gridBackground() || null"
-    [style.--ig-grid-accent-color]="gridAccentColor() || null">
+    [style.--ig-grid-accent-color]="gridAccentColor() || null"
+    [style.--ig-grid-header-background]="gridHeaderBackground() || null"
+    [style.--ig-grid-header-text-color]="gridHeaderTextColor() || null">
 
     <div class="color-pickers">
         <span class="color-picker-item">
-            <label for="gridBackground">Background</label>
+            <label for="gridBackground">Grid Background</label>
             <input id="gridBackground" type="color" [value]="gridBackground()" (input)="gridBackground.set($any($event.target).value)" />
         </span>
         <span class="color-picker-item">
-            <label for="gridForeground">Foreground</label>
+            <label for="gridForeground">Grid Foreground</label>
             @if (gridForeground()) {
                 <input id="gridForeground" type="color" [value]="gridForeground()" (input)="gridForeground.set($any($event.target).value)" />
-                <button (click)="resetForeground()" title="Reset to auto">↺</button>
+                <button (click)="gridForeground.set('')" title="Reset to auto">↺</button>
             } @else {
                 <button class="no-color" (click)="gridForeground.set('#1E2A35')" title="Auto (click to override)"></button>
             }
@@ -23,6 +26,27 @@
         </span>
     </div>
 
+    <div class="color-pickers">
+        <span class="color-picker-item">
+            <label for="gridHeaderBackground">Header Background</label>
+            @if (gridHeaderBackground()) {
+                <input id="gridHeaderBackground" type="color" [value]="gridHeaderBackground()" (input)="gridHeaderBackground.set($any($event.target).value)" />
+                <button (click)="gridHeaderBackground.set('')" title="Reset to auto">↺</button>
+            } @else {
+                <button class="no-color" (click)="gridHeaderBackground.set('#e8e6e2')" title="Auto (click to override)"></button>
+            }
+        </span>
+        <span class="color-picker-item">
+            <label for="gridHeaderTextColor">Header Text Color</label>
+            @if (gridHeaderTextColor()) {
+                <input id="gridHeaderTextColor" type="color" [value]="gridHeaderTextColor()" (input)="gridHeaderTextColor.set($any($event.target).value)" />
+                <button (click)="gridHeaderTextColor.set('')" title="Reset to auto">↺</button>
+            } @else {
+                <button class="no-color" (click)="gridHeaderTextColor.set('#1E2A35')" title="Auto (click to override)"></button>
+            }
+        </span>
+    </div>
+
     <igx-grid #grid
         [data]="data"
         [primaryKey]="'ID'"
diff --git a/src/app/grid-theme-builder/grid-theme-builder.sample.scss b/src/app/grid-theme-builder/grid-theme-builder.sample.scss
index 36e1c26a0f8..66057cefc0c 100644
--- a/src/app/grid-theme-builder/grid-theme-builder.sample.scss
+++ b/src/app/grid-theme-builder/grid-theme-builder.sample.scss
@@ -11,9 +11,20 @@
         grid-theme(
             $schema: vars.$schema,
             $background: #f7f4f0,
-            $accent-color: #5B8F8A
+            $accent-color: #5B8F8A,
         )
     );
+
+    &.has-header-overrides {
+        @include tokens(
+            grid-theme(
+                $schema: vars.$schema,
+                $background: #f7f4f0,
+                $accent-color: #5B8F8A,
+                $header-background: var(--ig-grid-header-background),
+            )
+        );
+    }
 }
 
 .color-pickers {
diff --git a/src/app/grid-theme-builder/grid-theme-builder.sample.ts b/src/app/grid-theme-builder/grid-theme-builder.sample.ts
index 37da5b043cf..7759daf70ae 100644
--- a/src/app/grid-theme-builder/grid-theme-builder.sample.ts
+++ b/src/app/grid-theme-builder/grid-theme-builder.sample.ts
@@ -20,6 +20,8 @@ export class GridThemeBuilderSampleComponent implements OnInit, AfterViewInit {
     protected readonly gridForeground = signal('');
     protected readonly gridBackground = signal('');
     protected readonly gridAccentColor = signal('');
+    protected readonly gridHeaderBackground = signal('');
+    protected readonly gridHeaderTextColor = signal('');
 
     protected readonly gridRef = viewChild.required<IgxGridComponent>('grid');
     private readonly sampleEl = viewChild.required<ElementRef>('sampleEl');
@@ -36,8 +38,4 @@ export class GridThemeBuilderSampleComponent implements OnInit, AfterViewInit {
         this.gridBackground.set(styles.getPropertyValue('--ig-grid-background').trim());
         this.gridAccentColor.set(styles.getPropertyValue('--ig-grid-accent-color').trim());
     }
-
-    protected resetForeground(): void {
-        this.gridForeground.set('');
-    }
 }