diff --git a/live-editing/configs/TabsConfigGenerator.ts b/live-editing/configs/TabsConfigGenerator.ts
index 84b8005fd..cb5210fe3 100644
--- a/live-editing/configs/TabsConfigGenerator.ts
+++ b/live-editing/configs/TabsConfigGenerator.ts
@@ -63,6 +63,12 @@ export class TabsConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/layouts/tabs/"
         }));
 
+        configs.push(new Config({
+            component: 'TabsHeaderPositionComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/layouts/tabs/"
+        }));
+
         return configs;
     }
 }
diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts
index b04b9a6cf..688bd06c0 100644
--- a/src/app/layouts/layouts-routes-data.ts
+++ b/src/app/layouts/layouts-routes-data.ts
@@ -79,6 +79,7 @@ export const layoutsRoutesData = {
     'tabs-states': { displayName: 'Tabs States', parentName: 'Tabs' },
     'tabs-styling': { displayName: 'Tabs Styling', parentName: 'Tabs' },
     'tabs-tailwind-styling': { displayName: 'Tabs Tailwind Styling', parentName: 'Tabs' },
+    'tabs-header-position': { displayName: 'Tabs Header Position', parentName: 'Tabs' },
     'card-overview': { displayName: 'Overview', parentName: 'Card' },
     'card-actions': { displayName: 'Card Actions', parentName: 'Card' },
     'card-media': { displayName: 'Card Media', parentName: 'Card' },
diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts
index 433190f3e..c98f50d22 100644
--- a/src/app/layouts/layouts.routes.ts
+++ b/src/app/layouts/layouts.routes.ts
@@ -101,6 +101,7 @@ import { TabsAmountComponent } from './tabs/tabs-amount/tabs-amount.component';
 import { TabsStatesComponent } from './tabs/tabs-states/tabs-states.component';
 import { TabsStylingComponent } from './tabs/tabs-styling/tabs-styling.component';
 import { TabsTailwindStylingComponent } from './tabs/tabs-tailwind-styling/tabs-tailwind-styling.component';
+import { TabsHeaderPositionComponent } from './tabs/tabs-header-position/tabs-header-position.component';
 import { AccordionSample1Component } from './accordion/accordion-sample-1/accordion-sample-1.component';
 import { AccordionCustomizationComponent } from './accordion/accordion-customization/accordion-customization.component';
 import { AccordionNestedScenarioComponent } from './accordion/accordion-nested-scenario/accordion-nested-scenario.component';
@@ -537,6 +538,11 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['tabs-tailwind-styling'],
         path: 'tabs-tailwind-styling'
     },
+    {
+        component: TabsHeaderPositionComponent,
+        data: layoutsRoutesData['tabs-header-position'],
+        path: 'tabs-header-position'
+    },
     {
         component: CardOverviewComponent,
         data: layoutsRoutesData['card-overview'],
diff --git a/src/app/layouts/tabs/tabs-header-position/tabs-header-position.component.html b/src/app/layouts/tabs/tabs-header-position/tabs-header-position.component.html
new file mode 100644
index 000000000..45f2d63d0
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-header-position/tabs-header-position.component.html
@@ -0,0 +1,19 @@
+<div class="sample">
+    <igx-buttongroup selectionMode="singleRequired" aria-label="Header position">
+        @for (position of positions; track position.value) {
+            <button igxButton [selected]="position.value === headerPosition" (click)="headerPosition = position.value">{{ position.label }}</button>
+        }
+    </igx-buttongroup>
+    <div class="tabs-container">
+        <igx-tabs [headerPosition]="headerPosition">
+            @for (section of sections; track section.label) {
+                <igx-tab-item>
+                    <igx-tab-header>
+                        <span igxTabHeaderLabel>{{ section.label }}</span>
+                    </igx-tab-header>
+                    <igx-tab-content>{{ section.text }}</igx-tab-content>
+                </igx-tab-item>
+            }
+        </igx-tabs>
+    </div>
+</div>
diff --git a/src/app/layouts/tabs/tabs-header-position/tabs-header-position.component.scss b/src/app/layouts/tabs/tabs-header-position/tabs-header-position.component.scss
new file mode 100644
index 000000000..a49dbc2b4
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-header-position/tabs-header-position.component.scss
@@ -0,0 +1,25 @@
+@use "igniteui-theming/sass/typography" as *;
+
+.sample {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 1.5rem 1rem;
+}
+
+.tabs-container {
+    width: 100%;
+    max-width: 33.125rem;
+}
+
+igx-tabs {
+    height: 11rem;
+}
+
+igx-tab-content {
+    @include type-style("body-2");
+
+    padding: 0.75rem 1rem;
+    color: var(--ig-gray-900);
+}
diff --git a/src/app/layouts/tabs/tabs-header-position/tabs-header-position.component.ts b/src/app/layouts/tabs/tabs-header-position/tabs-header-position.component.ts
new file mode 100644
index 000000000..f1f8e9113
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-header-position/tabs-header-position.component.ts
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent, IgxTabsHeaderPosition } from 'igniteui-angular/tabs';
+
+interface Section {
+    label: string;
+    text: string;
+}
+
+@Component({
+    selector: 'app-tabs-header-position',
+    styleUrls: ['./tabs-header-position.component.scss'],
+    templateUrl: './tabs-header-position.component.html',
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent]
+})
+export class TabsHeaderPositionComponent {
+    public headerPosition: IgxTabsHeaderPosition = IgxTabsHeaderPosition.start;
+
+    public positions: { label: string; value: IgxTabsHeaderPosition }[] = [
+        { label: 'Top', value: IgxTabsHeaderPosition.top },
+        { label: 'Start', value: IgxTabsHeaderPosition.start },
+        { label: 'End', value: IgxTabsHeaderPosition.end }
+    ];
+
+    public sections: Section[] = [
+        { label: 'Profile', text: 'Update your name, photo, and contact details.' },
+        { label: 'Security', text: 'Change your password and sign-in options.' },
+        { label: 'Notifications', text: 'Choose which updates you receive by email.' }
+    ];
+}