diff --git a/package-lock.json b/package-lock.json
index 5849e3ed253..6ef83711baa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "@types/source-map": "0.5.2",
         "express": "^5.1.0",
         "fflate": "^0.8.1",
-        "igniteui-theming": "^21.0.2",
+        "igniteui-theming": "^22.0.0-beta.1",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.2",
@@ -13403,9 +13403,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "21.0.2",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.2.tgz",
-      "integrity": "sha512-RXs8b3PThVlS1FhLeUT9TlLMcPoNAiwJm/L+jHU7jrwsgZU7gGjipjEbQQRe97AURyTxgXKiC4M8CAuUilWQ2A==",
+      "version": "22.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.0.0-beta.1.tgz",
+      "integrity": "sha512-9+itoHayUT2h029KTxPqI8lG+JG6u2IgcrIbbml+4MWLzF8bRbPQQkGy9JAsOaRp2+FZUspSLh9kyyZCs3gr/g==",
       "license": "MIT"
     },
     "node_modules/igniteui-trial-watermark": {
diff --git a/package.json b/package.json
index 37449a322a4..a941b44f90f 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^21.0.2",
+    "igniteui-theming": "^22.0.0-beta.1",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
index c051bc13e2e..418edb6ee79 100644
--- a/projects/igniteui-angular/package.json
+++ b/projects/igniteui-angular/package.json
@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^21.0.2",
+        "igniteui-theming": "^22.0.0-beta.1",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss
index 5cd16765d30..5825fe309be 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss
@@ -6,8 +6,12 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin date-range-picker($theme) {
     @include css-vars($theme);
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-date-range-picker {
+        @include sizable();
+        --input-group-size: #{map.get($theme, 'size')};
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
         display: flex;
 
         > igx-icon {
@@ -27,6 +31,8 @@
     igx-date-range-end,
     %igx-date-range-picker__start,
     %igx-date-range-picker__end {
+        --size: var(--input-group-size) !important;
+
         flex: 1 0 0%;
     }
 
@@ -35,6 +41,21 @@
         align-items: center;
         color: var-get($theme, 'label-color');
         margin: 0 rem(8px);
+        height: var(--input-group-size);
+
+        @if $variant != 'material' {
+            align-self: flex-end;
+
+            &.input-has-hint {
+                align-self: center;
+
+                &:not(.input-has-label) {
+                    align-self: flex-start;
+                }
+            }
+        } @else {
+            align-self: flex-start;
+        }
     }
 
     %igx-date-range-picker-buttons {
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
index 46347ae67c4..781315ce2ec 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -24,7 +24,7 @@ import { DateTimeUtil } from '../date-common/util/date-time.util';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
 import {
     IgxInputDirective, IgxInputGroupComponent, IgxInputGroupType, IgxInputState,
-    IgxLabelDirective, IGX_INPUT_GROUP_TYPE, IgxSuffixDirective
+    IgxLabelDirective, IgxHintDirective, IGX_INPUT_GROUP_TYPE, IgxSuffixDirective
 } from '../input-group/public_api';
 import {
     AutoPositionStrategy, IgxOverlayService, OverlayCancelableEventArgs, OverlayEventArgs,
@@ -407,6 +407,9 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     @ContentChild(IgxLabelDirective)
     public label: IgxLabelDirective;
 
+    @ContentChild(IgxHintDirective)
+    public hint: IgxHintDirective;
+
     @ContentChild(IgxPickerActionsDirective)
     public pickerActions: IgxPickerActionsDirective;
 
@@ -537,7 +540,10 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
 
     /** @hidden @internal */
     public get separatorClass(): string {
-        return 'igx-date-range-picker__label';
+        const classes = ['igx-date-range-picker__label'];
+        if (this.label) classes.push('input-has-label');
+        if (this.hint) classes.push('input-has-hint');
+        return classes.join(' ');
     }
 
     protected override get toggleContainer(): HTMLElement | undefined {
diff --git a/src/app/date-range/date-range.sample.html b/src/app/date-range/date-range.sample.html
index 550e770ec48..d7623b79436 100644
--- a/src/app/date-range/date-range.sample.html
+++ b/src/app/date-range/date-range.sample.html
@@ -46,6 +46,9 @@ <h6>Angular Date Range Picker, two inputs, template-driven form</h6>
           type="text"
           [placeholder]="properties.placeholder"
         />
+        @if (properties.hint) {
+            <span igxHint>{{ properties.hint }}</span>
+        }
       </igx-date-range-start>
       <igx-date-range-end>
         <igx-picker-toggle igxPrefix>
diff --git a/src/app/date-range/date-range.sample.ts b/src/app/date-range/date-range.sample.ts
index 17a6c357b24..d9dc33bd735 100644
--- a/src/app/date-range/date-range.sample.ts
+++ b/src/app/date-range/date-range.sample.ts
@@ -150,6 +150,12 @@ export class DateRangeSampleComponent {
                 defaultValue: 'MM/dd/yyyy'
             }
         },
+        hint: {
+            label: 'Hint Text',
+            control: {
+                type: 'text'
+            }
+        },
         displayFormat: {
             label: 'Display Format',
             control: {