diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss
new file mode 100644
index 00000000000..134b20337be
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss
@@ -0,0 +1,77 @@
+////
+/// @group components
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(igx-stepper) {
+    $block: bem--selector-to-string(&);
+    @include register-component(igx-stepper);
+
+    @extend %stepper-display !optional;
+
+    @include e(header) {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        width: 100%;
+    }
+
+    @include e(body) {
+        display: flex;
+        flex-direction: row;
+        overflow: hidden;
+        position: relative
+    }
+
+    @include e(body-contnet) {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        z-index: -1;
+    }
+
+    @include e(body-contnet, $m: active) {
+        z-index: 1;
+        position: relative;
+    }
+}
+
+// TODO THIS SHOULD GO ON THE HOST ELEMENT
+.igx-stepper__header--horizontal {
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+// content
+.igx-stepper__header-step-content {
+    border: 2px solid #ccc;
+    border-radius: 15px;
+    padding: 16px;
+}
+
+.igx-stepper__header-step-content:hover {
+    background-color: rgba($color: #ccc, $alpha: .5);
+}
+
+.igx-stepper__header-step-content--active {
+    pointer-events: none;
+    background-color: rgba($color: green, $alpha: .5);
+}
+
+.igx-stepper__header-step-content--disabled {
+    pointer-events: none;
+    opacity: .5;
+}
+
+.igx-stepper__header-step-content--skip {
+    opacity: .5;
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
new file mode 100644
index 00000000000..e24cfffc6f4
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
@@ -0,0 +1,85 @@
+@use 'sass:math';
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// @param {Map} $palette [null] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+
+/// @example scss Set custom track and thumb on colors
+/// $my-stepper-theme: igx-stepper-theme();
+/// @include igx-stepper($my-stepper-theme);
+@function igx-stepper-theme(
+    $palette: null,
+    $schema: $light-schema,
+    $title-color: null,
+    $subtitle-color: null,
+    $incomplete-color: null,
+    $complete-color: null,
+    $error-color: null,
+    $optional-color: null,
+    $current-color: null,
+    $disabled-color: null,
+) {
+    $name: 'igx-switch';
+    $switch-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $switch-schema: map-get($schema, $name);
+    } @else {
+        $switch-schema: $schema;
+    }
+
+    $theme: apply-palette($switch-schema, $palette);
+
+    @return extend($theme, (
+        name: $name,
+        palette: $palette,
+    ));
+}
+
+/// @param {Map} $theme - The theme used to style the component.
+/// @requires {mixin} igx-css-vars
+/// @requires em
+/// @requires --var
+@mixin igx-stepper($theme) {
+    @include igx-css-vars($theme);
+
+    $variant: map-get($theme, variant);
+
+    $left: if-ltr(left, right);
+    $right: if-ltr(right, left);
+
+    %stepper-display {
+        display: flex;
+        width: 100%;
+        overflow: hidden;
+    }
+}
+
+/// Adds typography styles for the igx-stepper component.
+/// Uses the 'subtitle-1' category from the typographic scale.
+/// @group typography
+/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
+/// @param {Map} $categories [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.
+/// @requires {mixin} igx-type-style
+@mixin igx-switch-typography(
+    $type-scale,
+    $categories: (label: 'subtitle-1')
+) {
+    $label: map-get($categories, 'label');
+
+    %switch-label {
+        @include igx-type-style($type-scale, $label) {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
index 6ee4b013c61..c67a9387807 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
@@ -70,6 +70,7 @@
 @import '../components/splitter/splitter-component';
 @import '../components/snackbar/snackbar-component';
 @import '../components/switch/switch-component';
+@import '../components/stepper/stepper-component';
 @import '../components/tabs/tabs-component';
 @import '../components/toast/toast-component';
 @import '../components/tooltip/tooltip-component';
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
index e9f15f97bba..a179f339930 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
@@ -50,6 +50,7 @@
 @import '../components/tabs/tabs-theme';
 @import '../components/scrollbar/scrollbar-theme';
 @import '../components/switch/switch-theme';
+@import '../components/stepper/stepper-theme';
 @import '../components/snackbar/snackbar-theme';
 @import '../components/slider/slider-theme';
 @import '../components/splitter/splitter-theme';
@@ -445,6 +446,10 @@
         ));
     }
 
+    @if not(index($exclude, 'igx-stepper')) {
+        @include igx-stepper(igx-stepper-theme($schema: $schema));
+    }
+
     @if not(index($exclude, 'igx-tabs')) {
         @include igx-tabs(igx-tabs-theme(
             $schema: $schema,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
index aea995689c5..e12f406a412 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
@@ -55,6 +55,7 @@
 @import './sparkline';
 @import './splitter';
 @import './switch';
+@import './stepper';
 @import './tabs';
 @import './time-picker';
 @import './toast';
@@ -118,6 +119,7 @@
 /// @property {Map} sparkline [$_dark-sparkline]
 /// @property {Map} igx-splitter [$_dark-splitter]
 /// @property {Map} igx-switch [$_dark-switch]
+/// @property {Map} igx-stepper [$_dark-stepper]
 /// @property {Map} igx-tabs [$_dark-tabs]
 /// @property {Map} igx-time-picker [$_dark-time-picker]
 /// @property {Map} igx-toast [$_dark-toast]
@@ -177,6 +179,7 @@ $dark-schema: (
     sparkline: $_dark-sparkline,
     igx-splitter: $_dark-splitter,
     igx-switch: $_dark-switch,
+    igx-stepper: $_dark-stepper,
     igx-tabs: $_dark-tabs,
     igx-time-picker: $_dark-time-picker,
     igx-toast: $_dark-toast,
@@ -246,6 +249,7 @@ $dark-material-schema: $dark-schema;
 /// @property {Map} sparkline [$_dark-fluent-sparkline],
 /// @property {Map} igx-splitter [$_dark-fluent-splitter],
 /// @property {Map} igx-switch [$_dark-fluent-switch],
+/// @property {Map} igx-stepper [$_dark-fluent-stepper],
 /// @property {Map} igx-tabs [$_dark-fluent-tabs],
 /// @property {Map} igx-time-picker [$_dark-fluent-time-picker],
 /// @property {Map} igx-toast [$_dark-fluent-toast],
@@ -305,6 +309,7 @@ $dark-fluent-schema: (
     sparkline: $_dark-fluent-sparkline,
     igx-splitter: $_dark-fluent-splitter,
     igx-switch: $_dark-fluent-switch,
+    igx-stepper: $_dark-fluent-stepper,
     igx-tabs: $_dark-fluent-tabs,
     igx-time-picker: $_dark-fluent-time-picker,
     igx-toast: $_dark-fluent-toast,
@@ -369,6 +374,7 @@ $dark-fluent-schema: (
 /// @property {Map} sparkline [$_dark-bootstrap-sparkline],
 /// @property {Map} igx-splitter [$_dark-bootstrap-splitter],
 /// @property {Map} igx-switch [$_dark-bootstrap-switch],
+/// @property {Map} igx-stepper [$_dark-bootstrap-stepper],
 /// @property {Map} igx-tabs [$_dark-bootstrap-tabs],
 /// @property {Map} igx-time-picker [$_dark-bootstrap-time-picker],
 /// @property {Map} igx-toast [$_dark-bootstrap-toast],
@@ -428,6 +434,7 @@ $dark-bootstrap-schema: (
     sparkline: $_dark-bootstrap-sparkline,
     igx-splitter: $_dark-bootstrap-splitter,
     igx-switch: $_dark-bootstrap-switch,
+    igx-stepper: $_dark-bootstrap-stepper,
     igx-tabs: $_dark-bootstrap-tabs,
     igx-time-picker: $_dark-bootstrap-time-picker,
     igx-toast: $_dark-bootstrap-toast,
@@ -492,6 +499,7 @@ $dark-bootstrap-schema: (
 /// @property {Map} sparkline [$_dark-indigo-sparkline]
 /// @property {Map} igx-splitter [$_dark-indigo-splitter]
 /// @property {Map} igx-switch [$_dark-indigo-switch]
+/// @property {Map} igx-stepper [$_dark-indigo-stepper]
 /// @property {Map} igx-tabs [$_dark-indigo-tabs]
 /// @property {Map} igx-time-picker [$_dark-indigo-time-picker]
 /// @property {Map} igx-toast [$_dark-indigo-toast]
@@ -551,6 +559,7 @@ $dark-indigo-schema: (
     sparkline: $_dark-indigo-sparkline,
     igx-splitter: $_dark-indigo-splitter,
     igx-switch: $_dark-indigo-switch,
+    igx-stepper: $_dark-indigo-stepper,
     igx-tabs: $_dark-indigo-tabs,
     igx-time-picker: $_dark-indigo-time-picker,
     igx-toast: $_dark-indigo-toast,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_stepper.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_stepper.scss
new file mode 100644
index 00000000000..5a60567d499
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_stepper.scss
@@ -0,0 +1,37 @@
+@import '../light/stepper';
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// Generates a dark stepper schema.
+/// @type {Map}
+///
+/// @requires {function} extend
+/// @requires $_light-stepper
+/// @see $default-palette
+$_dark-stepper: extend($_light-stepper);
+
+/// Generates a dark fluent stepper schema
+/// @type {Map}
+///
+/// @requires {function} extend
+/// @requires $_fluent-stepper
+/// @requires $_base-dark-stepper
+$_dark-fluent-stepper: extend($_fluent-stepper);
+
+/// Generates a dark bootstrap stepper schema.
+/// @type {Map}
+///
+/// @requires {function} extend
+/// @requires $_bootstrap-stepper
+/// @requires $_base-dark-stepper
+$_dark-bootstrap-stepper: extend($_bootstrap-stepper);
+
+/// Generates a dark indigo stepper schema.
+/// @type {Map}
+///
+/// @requires {function} extend
+/// @requires $_indigo-stepper
+$_dark-indigo-stepper: extend($_indigo-stepper);
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
index b776bc62c36..f2c9d1acdc8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
@@ -55,6 +55,7 @@
 @import './sparkline';
 @import './splitter';
 @import './switch';
+@import './stepper';
 @import './tabs';
 @import './time-picker';
 @import './toast';
@@ -118,6 +119,7 @@
 /// @property {Map} sparkline [$_light-sparkline]
 /// @property {Map} igx-splitter [$_light-splitter]
 /// @property {Map} igx-switch [$_light-switch]
+/// @property {Map} igx-stepper [$_light-stepper]
 /// @property {Map} igx-tabs [$_light-tabs]
 /// @property {Map} igx-time-picker [$_light-time-picker]
 /// @property {Map} igx-toast [$_light-toast]
@@ -177,6 +179,7 @@ $light-schema: (
     sparkline: $_light-sparkline,
     igx-splitter: $_light-splitter,
     igx-switch: $_light-switch,
+    igx-stepper: $_light-stepper,
     igx-tabs: $_light-tabs,
     igx-time-picker: $_light-time-picker,
     igx-toast: $_light-toast,
@@ -247,6 +250,7 @@ $light-fluent-schema: (
     sparkline: $_fluent-sparkline,
     igx-splitter: $_fluent-splitter,
     igx-switch: $_fluent-switch,
+    igx-stepper: $_fluent-stepper,
     igx-tabs: $_fluent-tabs,
     igx-time-picker: $_fluent-time-picker,
     igx-toast: $_fluent-toast,
@@ -312,6 +316,7 @@ $light-bootstrap-schema: (
     sparkline: $_bootstrap-sparkline,
     igx-splitter: $_bootstrap-splitter,
     igx-switch: $_bootstrap-switch,
+    igx-stepper: $_bootstrap-stepper,
     igx-tabs: $_bootstrap-tabs,
     igx-time-picker: $_bootstrap-time-picker,
     igx-toast: $_bootstrap-toast,
@@ -377,6 +382,7 @@ $light-indigo-schema: (
     sparkline: $_indigo-sparkline,
     igx-splitter: $_indigo-splitter,
     igx-switch: $_indigo-switch,
+    igx-stepper: $_indigo-stepper,
     igx-tabs: $_indigo-tabs,
     igx-time-picker: $_indigo-time-picker,
     igx-toast: $_indigo-toast,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss
new file mode 100644
index 00000000000..4933e29b69e
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss
@@ -0,0 +1,51 @@
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// Generates a light stepper schema.
+/// @type {Map}
+///
+/// @requires {function} extend
+/// @see $default-palette
+$_light-stepper: extend(
+    (
+        variant: 'material',
+    )
+);
+
+/// Generates a fluent stepper schema.
+/// @type {Map}
+///
+/// @requires {function} extend
+/// @requires {Map} $_light-stepper
+$_fluent-stepper: extend(
+    $_light-stepper
+    (
+        variant: 'fluent',
+    )
+);
+
+/// Generates a bootstrap stepper schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $_light-stepper
+$_bootstrap-stepper: extend(
+    $_light-stepper,
+    (
+        variant: 'bootstrap',
+    )
+);
+
+/// Generates an indigo stepper schema.
+/// @type {Map}
+///
+/// @requires {function} extend
+/// @requires $_light-stepper
+$_indigo-stepper: extend(
+    $_light-stepper,
+    (
+        variant: 'indigo-design',
+    )
+);
diff --git a/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.scss b/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.scss
deleted file mode 100644
index a55ec7a707f..00000000000
--- a/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.igx-stepper {
-    display: flex;
-    width: 100%;
-    overflow: hidden;
-}
-
-.igx-stepper--horizontal {
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.igx-stepper--vertical {
-    flex-direction: column;
-    gap: 20px;
-}
-
-.horizontal-container {
-    overflow: hidden;
-    position: relative;
-    flex-grow: 1;
-    display: block;
-    height: 200px;
-
-    ::ng-deep {
-        .igx-step__content {
-            display: block;
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            width: 100%;
-            height: 100%;
-            overflow-x: hidden;
-            overflow-y: auto;
-            z-index: -1;
-        }
-
-        .igx-step__content--active {
-            position: relative;
-            z-index: 1;
-        }
-    }
-}
diff --git a/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts b/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts
index 98b6f1cbe76..38806cbe395 100644
--- a/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts
+++ b/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts
@@ -25,7 +25,6 @@ import { IgxStepperService } from './stepper.service';
 @Component({
     selector: 'igx-stepper',
     templateUrl: 'igx-stepper.component.html',
-    styleUrls: ['igx-stepper.component.scss'],
     providers: [
         IgxStepperService,
         { provide: IGX_STEPPER_COMPONENT, useExisting: IgxStepperComponent },
diff --git a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.scss b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.scss
deleted file mode 100644
index 9a1e53332ae..00000000000
--- a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.igx-step__header {
-    border: 2px solid #ccc;
-    border-radius: 15px;
-    padding: 16px;
-}
-
-.igx-step__header:hover {
-    background-color: rgba($color: #ccc, $alpha: 0.5);
-}
-
-.igx-step__header--active {
-    pointer-events: none;
-    background-color: rgba($color: green, $alpha: 0.5);
-}
-
-.igx-step__header--disabled {
-    pointer-events: none;
-    opacity: 0.5;
-}
-
-.igx-step__header--skip {
-    opacity: 0.5;
-}
-
-// .igx-step::after {
-//     content: '\21E2';
-//     color: white;
-//     position: relative;
-//     top: -50%;
-//     left: 100%;
-//     z-index: 1;
-// }
diff --git a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts
index 63a89a79764..d9c35c0d106 100644
--- a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts
+++ b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts
@@ -15,8 +15,7 @@ let NEXT_ID = 0;
 
 @Component({
     selector: 'igx-step',
-    templateUrl: 'igx-step.component.html',
-    styleUrls: ['igx-step.component.scss']
+    templateUrl: 'igx-step.component.html'
 })
 export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, AfterViewInit, OnDestroy, IgxSlideComponentBase {
 
@@ -206,8 +205,8 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A
     //  }
 
     /** @hidden @internal */
-    @HostBinding('class.igx-step')
-    public cssClass = 'igx-step';
+    @HostBinding('class.igx-stepper__header-step')
+    public cssClass = 'igx-stepper__header-step';
 
     //  // TODO: will be used in Drag and Drop implementation
     //  /** @hidden @internal */
@@ -314,10 +313,10 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A
             return 'igx-step__header--active';
         }
         if (this.disabled) {
-            return 'igx-step__header--disabled';
+            return 'igx-stepper__header-step-content--disabled';
         }
         if (this.skip) {
-            return 'igx-step__header--skip';
+            return 'igx-stepper__header-step-content--skip';
         }
         if (this.optional) {
             return 'igx-step__header--optional';
diff --git a/src/app/stepper/stepper.sample.html b/src/app/stepper/stepper.sample.html
index 2ce874d1782..9e25d090cd6 100644
--- a/src/app/stepper/stepper.sample.html
+++ b/src/app/stepper/stepper.sample.html
@@ -5,9 +5,6 @@
     </igx-step>
 </igx-stepper>
 <button (click)="stepperNg.navigateTo(2)">Navigate to 2 Step</button> -->
-
-<hr>
-
 <igx-stepper #stepper (activeStepChanged)="activeStepChanged($event)" (activeStepChanging)="activeStepChanging($event)" [orientation]="'Horizontal'">
     <igx-step [active]="true" #step>
         <igx-icon igxStepIcon>done</igx-icon>
@@ -46,8 +43,11 @@
         </div>
     </igx-step>
 </igx-stepper>
-<br>
-<!-- <button (click)="stepper.navigateTo(1)">Navigate to 2 Step</button> -->
-<!-- <igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup> -->
-<!-- <igx-buttongroup [values]="labelPositions" (selected)="toggleLabelPos($event)"></igx-buttongroup> -->
-<button (click)="changeOrientation()">Change Orientation</button>
+
+<div class="sample-actions">
+    <!-- <button (click)="stepper.navigateTo(1)">Navigate to 2 Step</button> -->
+    <!-- <igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup> -->
+    <!-- <igx-buttongroup [values]="labelPositions" (selected)="toggleLabelPos($event)"></igx-buttongroup> -->
+    <button igxButton="outlined" (click)="changeOrientation()">Change Orientation</button>
+</div>
+
diff --git a/src/app/stepper/stepper.sample.scss b/src/app/stepper/stepper.sample.scss
index e69de29bb2d..9d5295a8da6 100644
--- a/src/app/stepper/stepper.sample.scss
+++ b/src/app/stepper/stepper.sample.scss
@@ -0,0 +1,5 @@
+.sample-actions {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+}