diff --git a/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.ts b/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.ts
index a2cb7bf53..0f93105d9 100644
--- a/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.ts
+++ b/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.ts
@@ -10,7 +10,8 @@ import { TitleCasePipe } from '@angular/common';
 
 @Component({
     selector: 'app-carousel',
-    styleUrls: ['./carousel-animations-sample.component.scss'],
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-animations-sample.component.scss', '../carousel-bootstrap-theme.scss'],
     templateUrl: './carousel-animations-sample.component.html',
     imports: [IgxSelectComponent, IgxSwitchComponent, FormsModule, IgxSelectItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, TitleCasePipe]
 })
diff --git a/src/app/layouts/carousel/carousel-animations/carousel-animations.component.html b/src/app/layouts/carousel/carousel-animations/carousel-animations.component.html
new file mode 100644
index 000000000..30756ec4a
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-animations/carousel-animations.component.html
@@ -0,0 +1,31 @@
+<div class="carousel-wrapper">
+  <div class="action-wrapper">
+    <div class="action">
+      <span class="action-label">Animation</span>
+      <igx-select type="border" [(ngModel)]="animationType">
+        @for (animation of animationTypes; track animation.value) {
+          <igx-select-item [value]="animation.value">{{ animation.label }}</igx-select-item>
+        }
+      </igx-select>
+    </div>
+    <div class="action">
+      <igx-switch labelPosition="before" [(ngModel)]="isCarouselVertical">Vertical</igx-switch>
+    </div>
+  </div>
+
+  <igx-carousel [animationType]="animationType" [indicators]="false" [vertical]="isCarouselVertical">
+    @for (slide of slides; track slide.title) {
+      <igx-slide>
+        <article class="slide-wrapper">
+          <div class="slide-content">
+            <span class="slide-label">{{ slide.label }}</span>
+            <h3>{{ slide.title }}</h3>
+            <p>{{ slide.subtitle }}</p>
+            <div class="slide-details"><span>{{ slide.detail }}</span><strong>{{ slide.metric }}</strong></div>
+          </div>
+          <div class="slide-preview" aria-hidden="true"><span></span><span></span><span></span></div>
+        </article>
+      </igx-slide>
+    }
+  </igx-carousel>
+</div>
diff --git a/src/app/layouts/carousel/carousel-animations/carousel-animations.component.scss b/src/app/layouts/carousel/carousel-animations/carousel-animations.component.scss
new file mode 100644
index 000000000..f91cd5679
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-animations/carousel-animations.component.scss
@@ -0,0 +1,112 @@
+.carousel-wrapper {
+    display: flex;
+    width: min(860px, calc(100% - 32px));
+    flex-direction: column;
+    gap: 16px;
+    margin: 16px auto 0;
+}
+
+.action-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 24px;
+}
+
+.action { display: flex; align-items: center; gap: 8px; }
+.action-label { color: var(--ig-gray-700); }
+
+igx-select {
+    width: 150px;
+    --ig-size: 1;
+}
+
+:host ::ng-deep igx-select igx-input-group { --size: 2rem; }
+
+igx-switch { --ig-size: var(--ig-size-small); }
+
+igx-carousel {
+    height: 360px;
+    overflow: hidden;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 8px;
+    background: var(--ig-surface-500);
+}
+
+:host ::ng-deep .igx-slide {
+    height: 100%;
+}
+
+.slide-wrapper {
+    position: relative;
+    display: grid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 56px 84px;
+    overflow: hidden;
+    place-items: center;
+    background:
+        linear-gradient(135deg, rgba(25, 118, 210, 0.08), transparent 46%),
+        linear-gradient(315deg, rgba(0, 150, 136, 0.10), transparent 42%),
+        var(--ig-gray-100);
+}
+
+.slide-content { width: min(460px, calc(100% - 128px)); max-width: 460px; color: var(--ig-gray-900); }
+
+.slide-label {
+    display: block;
+    margin-bottom: 12px;
+    color: var(--ig-primary-600);
+    font-size: 12px;
+    font-weight: 700;
+}
+
+.slide-content h3 { margin: 0; font-size: 32px; line-height: 1.15; }
+.slide-content p { margin: 12px 0 0; color: var(--ig-gray-700); font-size: 18px; line-height: 1.45; }
+
+.slide-details {
+    display: inline-flex;
+    align-items: center;
+    gap: 16px;
+    margin-top: 28px;
+    padding: 10px 14px;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.72);
+}
+
+.slide-details span { color: var(--ig-gray-700); }
+.slide-details strong { color: var(--ig-gray-900); }
+
+.slide-preview {
+    position: absolute;
+    top: 50%;
+    right: 84px;
+    display: grid;
+    width: 120px;
+    height: 220px;
+    grid-template-columns: repeat(3, 1fr);
+    align-items: center;
+    gap: 14px;
+    transform: translateY(-50%);
+}
+
+.slide-preview span {
+    display: block;
+    border-radius: 8px;
+    background: var(--ig-primary-100);
+    box-shadow: 0 10px 24px rgba(11, 31, 53, 0.12);
+}
+
+.slide-preview span:nth-child(1) { height: 120px; opacity: 0.55; }
+.slide-preview span:nth-child(2) { height: 180px; background: var(--ig-primary-300); }
+.slide-preview span:nth-child(3) { height: 92px; opacity: 0.75; }
+
+@media (max-width: 640px) {
+    .action-wrapper { align-items: flex-start; flex-direction: column; gap: 12px; }
+    .slide-wrapper { grid-template-columns: 1fr; gap: 28px; padding: 32px 64px; }
+    .slide-preview { position: static; width: 100%; height: 120px; transform: none; }
+    .slide-content h3 { font-size: 28px; }
+}
diff --git a/src/app/layouts/carousel/carousel-animations/carousel-animations.component.ts b/src/app/layouts/carousel/carousel-animations/carousel-animations.component.ts
new file mode 100644
index 000000000..aa0163ecc
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-animations/carousel-animations.component.ts
@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CarouselAnimationType, IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel';
+import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
+import { IgxSwitchComponent } from 'igniteui-angular/switch';
+
+@Component({
+    selector: 'app-carousel-animations',
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-animations.component.scss', '../carousel-bootstrap-theme.scss'],
+    templateUrl: './carousel-animations.component.html',
+    imports: [
+        FormsModule,
+        IgxCarouselComponent,
+        IgxSelectComponent,
+        IgxSelectItemComponent,
+        IgxSlideComponent,
+        IgxSwitchComponent
+    ]
+})
+export class CarouselAnimationsComponent {
+    public animationType: CarouselAnimationType = CarouselAnimationType.slide;
+    public isCarouselVertical = false;
+    public readonly animationTypes = [
+        { label: 'Slide', value: CarouselAnimationType.slide },
+        { label: 'Fade', value: CarouselAnimationType.fade },
+        { label: 'None', value: CarouselAnimationType.none }
+    ];
+    public readonly slides = [
+        {
+            detail: 'Best for sequential browsing',
+            label: '01',
+            metric: '320ms',
+            subtitle: 'Moves content horizontally or vertically to preserve directional context.',
+            title: 'Slide transition'
+        },
+        {
+            detail: 'Best for featured content',
+            label: '02',
+            metric: '240ms',
+            subtitle: 'Cross-fades between slides when the relationship between items is looser.',
+            title: 'Fade transition'
+        },
+        {
+            detail: 'Best for direct state changes',
+            label: '03',
+            metric: '0ms',
+            subtitle: 'Updates the active slide immediately for reduced motion or dense workflows.',
+            title: 'No transition'
+        }
+    ];
+}
diff --git a/src/app/layouts/carousel/carousel-bootstrap-theme.scss b/src/app/layouts/carousel/carousel-bootstrap-theme.scss
new file mode 100644
index 000000000..b34f2fd16
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-bootstrap-theme.scss
@@ -0,0 +1,12 @@
+@use 'igniteui-angular/theming' as *;
+
+:host {
+    @include typography(
+        $font-family: $bootstrap-typeface,
+        $type-scale: $bootstrap-type-scale
+    );
+
+    ::ng-deep {
+        @include bootstrap-light-theme($light-bootstrap-palette);
+    }
+}
\ No newline at end of file
diff --git a/src/app/layouts/carousel/carousel-components-sample/carousel-components-sample.component.html b/src/app/layouts/carousel/carousel-components-sample/carousel-components-sample.component.html
new file mode 100644
index 000000000..96c870a57
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-components-sample/carousel-components-sample.component.html
@@ -0,0 +1,71 @@
+<div class="carousel-container">
+  <igx-carousel>
+    <igx-slide class="slide-frame slide-coast">
+      <article class="slide-shell">
+        <form class="feature-card">
+          <div class="feature-copy">
+            <span class="slide-label">Featured route</span>
+            <h3>Coastal weekend</h3>
+            <p>Browse curated travel ideas and search directly from the active slide.</p>
+          </div>
+          <igx-input-group type="border">
+            <igx-prefix><igx-icon>search</igx-icon></igx-prefix>
+            <input igxInput type="text" placeholder="City or landmark" />
+          </igx-input-group>
+          <div class="chip-row" aria-label="Route highlights">
+            <span>3 stops</span>
+            <span>Sea view</span>
+            <span>Weekend</span>
+          </div>
+          <button igxButton="contained" type="reset">Explore</button>
+        </form>
+        <div class="feature-visual route-visual" aria-hidden="true"><span></span><span></span><span></span></div>
+      </article>
+    </igx-slide>
+
+    <igx-slide class="slide-frame slide-city">
+      <article class="slide-shell">
+        <section class="feature-card event-card">
+          <div class="feature-copy">
+            <span class="slide-label">City guide</span>
+            <h3>Museum night pass</h3>
+            <p>Reserve a late gallery visit and keep the event details visible in the active slide.</p>
+          </div>
+          <div class="event-summary" aria-label="Museum night pass details">
+            <div class="event-date" aria-hidden="true"><span>FRI</span><strong>18</strong><span>OCT</span></div>
+            <div class="event-details"><strong>6:30 PM - 10:00 PM</strong><span>North wing galleries</span></div>
+          </div>
+          <igx-checkbox>Send event reminder</igx-checkbox>
+          <button igxButton="contained">Notify Me</button>
+        </section>
+        <div class="event-visual" aria-hidden="true">
+          <span class="ticket ticket--back"></span>
+          <span class="ticket ticket--front"><span></span><span></span><span></span></span>
+        </div>
+      </article>
+    </igx-slide>
+
+    <igx-slide class="slide-frame slide-resort">
+      <article class="slide-shell">
+        <form class="feature-card offer-card">
+          <div class="feature-copy">
+            <span class="slide-label">Seasonal offer</span>
+            <h3>Resort day access</h3>
+            <p>Build a compact offer configuration that lets users review inclusions before applying a code.</p>
+          </div>
+          <div class="offer-summary" aria-label="Day pass summary">
+            <div><span>Day pass</span><strong>$89</strong></div>
+            <span>Pool access and spa credit included</span>
+          </div>
+          <div class="addon-row"><span>Lunch add-on</span><strong>+$18</strong></div>
+          <igx-input-group type="border">
+            <igx-prefix><igx-icon>lock</igx-icon></igx-prefix>
+            <input igxInput type="text" placeholder="Promo code" />
+          </igx-input-group>
+          <button igxButton="contained" type="reset">Apply Code</button>
+        </form>
+        <div class="amenity-visual" aria-hidden="true"><span></span><span></span><span></span></div>
+      </article>
+    </igx-slide>
+  </igx-carousel>
+</div>
diff --git a/src/app/layouts/carousel/carousel-components-sample/carousel-components-sample.component.scss b/src/app/layouts/carousel/carousel-components-sample/carousel-components-sample.component.scss
new file mode 100644
index 000000000..c06e404e7
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-components-sample/carousel-components-sample.component.scss
@@ -0,0 +1,213 @@
+.carousel-container {
+    width: min(760px, 100%);
+    margin: 16px auto 0;
+}
+
+igx-carousel {
+    height: 440px;
+    overflow: hidden;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 8px;
+    background: var(--ig-surface-500);
+}
+
+:host ::ng-deep {
+    .igx-carousel__nav-button {
+        width: 40px;
+        height: 40px;
+    }
+
+    .igx-slide {
+        display: grid;
+        box-sizing: border-box;
+        height: 100%;
+        padding-bottom: 48px;
+        place-items: center;
+    }
+
+    .igx-slide.slide-frame {
+        background: var(--ig-gray-100);
+    }
+
+    .igx-slide.slide-coast {
+        background:
+            linear-gradient(135deg, rgba(25, 118, 210, 0.12), transparent 45%),
+            var(--ig-gray-100);
+    }
+
+    .igx-slide.slide-city {
+        background:
+            linear-gradient(135deg, rgba(103, 58, 183, 0.12), transparent 45%),
+            var(--ig-gray-100);
+    }
+
+    .igx-slide.slide-resort {
+        padding-bottom: 76px;
+        background:
+            linear-gradient(135deg, rgba(0, 150, 136, 0.12), transparent 45%),
+            var(--ig-gray-100);
+    }
+}
+
+.slide-shell {
+    display: grid;
+    width: fit-content;
+    height: auto;
+    grid-template-columns: minmax(0, 390px) 120px;
+    align-items: center;
+    justify-content: center;
+    gap: 28px;
+    margin: 0 auto;
+    padding: 24px 0;
+}
+
+.feature-card {
+    display: grid;
+    gap: 14px;
+    padding: 22px 24px;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.86);
+    box-shadow: 0 14px 34px rgba(11, 31, 53, 0.14);
+}
+
+.slide-label {
+    color: var(--ig-primary-600);
+    font-size: 12px;
+    font-weight: 700;
+}
+
+.feature-copy {
+    display: grid;
+    gap: 8px;
+}
+
+.feature-copy h3 {
+    margin: 0;
+    color: var(--ig-gray-900);
+    font-size: 24px;
+    line-height: 1.2;
+}
+
+.feature-copy p {
+    margin: 0 0 8px;
+    color: var(--ig-gray-700);
+    line-height: 1.45;
+}
+
+.feature-card button {
+    justify-self: start;
+}
+
+.chip-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.chip-row span {
+    padding: 6px 10px;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 999px;
+    color: var(--ig-gray-700);
+    background: var(--ig-surface-500);
+    font-size: 14px;
+}
+
+.route-visual {
+    display: grid;
+    width: 120px;
+    height: 180px;
+    grid-template-columns: repeat(3, 1fr);
+    align-items: end;
+    gap: 8px;
+}
+
+.route-visual span,
+.ticket,
+.amenity-visual span {
+    display: block;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.72);
+    box-shadow: 0 10px 24px rgba(11, 31, 53, 0.12);
+}
+
+.route-visual span:nth-child(1) { height: 46%; opacity: 0.75; }
+.route-visual span:nth-child(2) { height: 82%; }
+.route-visual span:nth-child(3) { height: 62%; opacity: 0.9; }
+
+.event-card { gap: 10px; padding: 18px 22px; }
+
+.event-summary {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 8px;
+    background: var(--ig-surface-500);
+}
+
+.event-date {
+    display: grid;
+    width: 46px;
+    padding: 4px 0;
+    place-items: center;
+    border-radius: 6px;
+    color: var(--ig-primary-600);
+    background: var(--ig-primary-100);
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1.1;
+}
+
+.event-date strong { color: var(--ig-gray-900); font-size: 22px; }
+
+.event-details { display: grid; gap: 3px; color: var(--ig-gray-700); font-size: 14px; }
+.event-details strong { color: var(--ig-gray-900); font-size: 15px; }
+
+.event-visual { position: relative; width: 120px; height: 180px; }
+
+.ticket { position: absolute; display: grid; width: 96px; height: 144px; border-radius: 10px; }
+.ticket--back { top: 16px; left: 4px; opacity: 0.56; transform: rotate(-8deg); }
+
+.ticket--front {
+    top: 10px;
+    right: 2px;
+    grid-template-rows: 1fr auto 1fr;
+    padding: 18px;
+    transform: rotate(5deg);
+}
+
+.ticket--front span { display: block; height: 8px; border-radius: 999px; background: var(--ig-primary-300); }
+.ticket--front span:nth-child(2) { width: 72%; background: var(--ig-primary-500); }
+.ticket--front span:nth-child(3) { align-self: end; width: 54%; background: var(--ig-gray-300); }
+
+.offer-summary { display: grid; gap: 4px; color: var(--ig-gray-700); font-size: 14px; }
+.offer-card { gap: 8px; padding: 16px 22px; }
+.offer-summary > div { display: flex; align-items: baseline; justify-content: space-between; }
+.offer-summary strong { color: var(--ig-gray-900); font-size: 24px; }
+
+.addon-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 9px 12px;
+    border-radius: 8px;
+    color: var(--ig-gray-700);
+    background: var(--ig-gray-100);
+    font-size: 14px;
+}
+
+.addon-row strong { color: var(--ig-gray-900); }
+
+.amenity-visual { display: grid; width: 120px; height: 180px; align-content: center; gap: 12px; }
+.amenity-visual span { height: 44px; border-radius: 12px; }
+.amenity-visual span:nth-child(1) { width: 78%; }
+.amenity-visual span:nth-child(2) { width: 100%; background: rgba(255, 255, 255, 0.9); }
+.amenity-visual span:nth-child(3) { width: 62%; justify-self: end; }
+
+@media (max-width: 720px) {
+    .slide-shell { grid-template-columns: 1fr; padding: 32px 64px; }
+    .feature-visual, .event-visual, .amenity-visual { display: none; }
+}
diff --git a/src/app/layouts/carousel/carousel-components-sample/carousel-components-sample.component.ts b/src/app/layouts/carousel/carousel-components-sample/carousel-components-sample.component.ts
new file mode 100644
index 000000000..e56e975c4
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-components-sample/carousel-components-sample.component.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel';
+import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective } from 'igniteui-angular/input-group';
+
+@Component({
+    selector: 'app-carousel-components-sample',
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-components-sample.component.scss', '../carousel-bootstrap-theme.scss'],
+    templateUrl: './carousel-components-sample.component.html',
+    imports: [
+        IgxButtonDirective,
+        IgxCarouselComponent,
+        IgxCheckboxComponent,
+        IgxIconComponent,
+        IgxInputDirective,
+        IgxInputGroupComponent,
+        IgxPrefixDirective,
+        IgxSlideComponent
+    ]
+})
+export class CarouselComponentsSampleComponent { }
diff --git a/src/app/layouts/carousel/carousel-configuration-sample/carousel-configuration-sample.component.html b/src/app/layouts/carousel/carousel-configuration-sample/carousel-configuration-sample.component.html
new file mode 100644
index 000000000..d756d02d6
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-configuration-sample/carousel-configuration-sample.component.html
@@ -0,0 +1,19 @@
+<div class="configuration-sample">
+  <div class="configuration-controls">
+    <igx-switch labelPosition="before" [(ngModel)]="hideNavigation">Hide navigation</igx-switch>
+    <igx-switch labelPosition="before" [(ngModel)]="hideIndicators">Hide indicators</igx-switch>
+    <igx-switch labelPosition="before" [(ngModel)]="disableLoop">Disable loop</igx-switch>
+  </div>
+
+  <igx-carousel [navigation]="!hideNavigation" [indicators]="!hideIndicators" [loop]="!disableLoop">
+    <igx-slide>
+      <article class="slide-card"><span>01</span><h3>Coastal route</h3><p>A compact visual slide for checking navigation and indicators.</p></article>
+    </igx-slide>
+    <igx-slide>
+      <article class="slide-card"><span>02</span><h3>City guide</h3><p>A second slide makes loop behavior easy to verify.</p></article>
+    </igx-slide>
+    <igx-slide>
+      <article class="slide-card"><span>03</span><h3>Resort access</h3><p>Use the controls to compare the Carousel configuration states.</p></article>
+    </igx-slide>
+  </igx-carousel>
+</div>
diff --git a/src/app/layouts/carousel/carousel-configuration-sample/carousel-configuration-sample.component.scss b/src/app/layouts/carousel/carousel-configuration-sample/carousel-configuration-sample.component.scss
new file mode 100644
index 000000000..eee11c5a0
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-configuration-sample/carousel-configuration-sample.component.scss
@@ -0,0 +1,60 @@
+.configuration-sample {
+    display: grid;
+    width: min(860px, calc(100% - 32px));
+    gap: 16px;
+    margin: 16px auto 0;
+}
+
+.configuration-controls {
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    align-items: center;
+    justify-content: end;
+    gap: 16px;
+}
+
+igx-switch { --ig-size: var(--ig-size-small); }
+
+igx-carousel {
+    height: 340px;
+    overflow: hidden;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 8px;
+    background: var(--ig-surface-500);
+}
+
+:host ::ng-deep {
+    .igx-carousel__arrow { width: 40px; height: 40px; }
+    .igx-carousel__arrow--prev { left: 16px; }
+    .igx-carousel__arrow--next { right: 16px; }
+    .igx-slide {
+        display: grid;
+        height: 100%;
+        place-items: center;
+        background:
+            linear-gradient(135deg, rgba(25, 118, 210, 0.10), transparent 42%),
+            linear-gradient(315deg, rgba(0, 150, 136, 0.10), transparent 42%),
+            var(--ig-gray-100);
+    }
+}
+
+.slide-card {
+    display: grid;
+    width: min(420px, 100%);
+    gap: 10px;
+    margin: 0;
+    padding: 28px;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 8px;
+    color: var(--ig-gray-900);
+    background: rgba(255, 255, 255, 0.88);
+    box-shadow: 0 14px 34px rgba(11, 31, 53, 0.14);
+}
+
+.slide-card span { color: var(--ig-primary-600); font-size: 12px; font-weight: 700; }
+.slide-card h3 { margin: 0; font-size: 28px; line-height: 1.2; }
+.slide-card p { margin: 0; color: var(--ig-gray-700); line-height: 1.45; }
+
+@media (max-width: 760px) {
+    .configuration-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
+}
diff --git a/src/app/layouts/carousel/carousel-configuration-sample/carousel-configuration-sample.component.ts b/src/app/layouts/carousel/carousel-configuration-sample/carousel-configuration-sample.component.ts
new file mode 100644
index 000000000..6b4faca90
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-configuration-sample/carousel-configuration-sample.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel';
+import { IgxSwitchComponent } from 'igniteui-angular/switch';
+
+@Component({
+    selector: 'app-carousel-configuration-sample',
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-configuration-sample.component.scss', '../carousel-bootstrap-theme.scss'],
+    templateUrl: './carousel-configuration-sample.component.html',
+    imports: [FormsModule, IgxCarouselComponent, IgxSlideComponent, IgxSwitchComponent]
+})
+export class CarouselConfigurationSampleComponent {
+    public hideNavigation = false;
+    public hideIndicators = false;
+    public disableLoop = false;
+}
diff --git a/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.ts b/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.ts
index e848ec555..9d51c9d7f 100644
--- a/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.ts
+++ b/src/app/layouts/carousel/carousel-no-navigation-sample/carousel-no-navigation-sample.component.ts
@@ -5,7 +5,8 @@ import { NgStyle, NgClass, CurrencyPipe } from '@angular/common';
 
 @Component({
     selector: 'app-carousel',
-    styleUrls: ['./carousel-no-navigation-sample.component.scss'],
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-no-navigation-sample.component.scss', '../carousel-bootstrap-theme.scss'],
     templateUrl: './carousel-no-navigation-sample.component.html',
     imports: [IgxCarouselComponent, IgxSlideComponent, NgStyle, NgClass, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, CurrencyPipe]
 })
diff --git a/src/app/layouts/carousel/carousel-overview-sample/carousel-overview-sample.component.html b/src/app/layouts/carousel/carousel-overview-sample/carousel-overview-sample.component.html
new file mode 100644
index 000000000..64d7356db
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-overview-sample/carousel-overview-sample.component.html
@@ -0,0 +1,11 @@
+<div class="carousel-container">
+  <igx-carousel>
+    @for (slide of slides; track slide.src) {
+      <igx-slide>
+        <div class="image-container">
+          <img [src]="slide.src" [alt]="slide.alt" />
+        </div>
+      </igx-slide>
+    }
+  </igx-carousel>
+</div>
diff --git a/src/app/layouts/carousel/carousel-overview-sample/carousel-overview-sample.component.scss b/src/app/layouts/carousel/carousel-overview-sample/carousel-overview-sample.component.scss
new file mode 100644
index 000000000..27bc6d9e8
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-overview-sample/carousel-overview-sample.component.scss
@@ -0,0 +1,30 @@
+.carousel-container {
+    padding: 16px;
+}
+
+.image-container {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+igx-carousel {
+    height: 450px;
+    margin-inline: auto;
+    max-width: 75%;
+}
+
+img {
+    max-height: 90%;
+    max-width: 90%;
+    object-fit: contain;
+}
+
+:host ::ng-deep .igx-slide {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 75%;
+    margin-inline: auto;
+}
diff --git a/src/app/layouts/carousel/carousel-overview-sample/carousel-overview-sample.component.ts b/src/app/layouts/carousel/carousel-overview-sample/carousel-overview-sample.component.ts
new file mode 100644
index 000000000..f9b09aa45
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-overview-sample/carousel-overview-sample.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel';
+
+@Component({
+    selector: 'app-carousel-overview-sample',
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-overview-sample.component.scss', '../carousel-bootstrap-theme.scss'],
+    templateUrl: './carousel-overview-sample.component.html',
+    imports: [IgxCarouselComponent, IgxSlideComponent]
+})
+export class CarouselOverviewSampleComponent {
+    public readonly slides = [
+        {
+            alt: 'Ignite UI Angular Indigo Design',
+            src: 'https://dl.infragistics.com/x/img/carousel/ignite-ui-angular-indigo-design.png'
+        },
+        {
+            alt: 'Chart preview',
+            src: 'https://dl.infragistics.com/x/img/carousel/slider-image-chart.png'
+        },
+        {
+            alt: 'Ignite UI Angular Charts',
+            src: 'https://dl.infragistics.com/x/img/carousel/ignite-ui-angular-charts.png'
+        }
+    ];
+}
diff --git a/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.ts b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.ts
index b8c53cf23..202766c1d 100644
--- a/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.ts
+++ b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.ts
@@ -3,7 +3,8 @@ import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carous
 
 @Component({
     selector: 'app-carousel',
-    styleUrls: ['./carousel-styling-sample.component.scss'],
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-styling-sample.component.scss', '../carousel-bootstrap-theme.scss'],
     templateUrl: './carousel-styling-sample.component.html',
     imports: [IgxCarouselComponent, IgxSlideComponent]
 })
diff --git a/src/app/layouts/carousel/carousel-styling/carousel-styling.component.html b/src/app/layouts/carousel/carousel-styling/carousel-styling.component.html
new file mode 100644
index 000000000..f09b81c5d
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-styling/carousel-styling.component.html
@@ -0,0 +1,26 @@
+<div class="container sample center">
+  <igx-carousel class="styled-carousel">
+    <ng-template igxCarouselPrevButton>
+      <span class="carousel-navigation-button"><igx-icon>chevron_left</igx-icon></span>
+    </ng-template>
+    <ng-template igxCarouselNextButton>
+      <span class="carousel-navigation-button"><igx-icon>chevron_right</igx-icon></span>
+    </ng-template>
+    <ng-template igxCarouselIndicator let-slide>
+      <span class="carousel-indicator" [class.carousel-indicator-active]="slide.active"></span>
+    </ng-template>
+
+    @for (slide of slides; track slide.image) {
+      <igx-slide>
+        <article class="slide-card">
+          <img class="slide-image" [src]="slide.image" [alt]="slide.alt" />
+          <div class="slide-content">
+            <span class="slide-label">{{ slide.label }}</span>
+            <h3>{{ slide.title }}</h3>
+            <p>{{ slide.subtitle }}</p>
+          </div>
+        </article>
+      </igx-slide>
+    }
+  </igx-carousel>
+</div>
diff --git a/src/app/layouts/carousel/carousel-styling/carousel-styling.component.scss b/src/app/layouts/carousel/carousel-styling/carousel-styling.component.scss
new file mode 100644
index 000000000..af21c4ba1
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-styling/carousel-styling.component.scss
@@ -0,0 +1,111 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
+.container {
+    width: min(860px, calc(100% - 32px));
+    margin: 16px auto 0;
+}
+
+.styled-carousel {
+    width: 100%;
+    height: 430px;
+    margin: 0;
+    overflow: hidden;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 8px;
+    background: var(--ig-surface-500);
+}
+
+:host ::ng-deep {
+    .styled-carousel .igx-carousel-indicators {
+        gap: 8px;
+        padding: 6px 10px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.82);
+        box-shadow: 0 6px 16px rgba(11, 31, 53, 0.16);
+    }
+
+    .styled-carousel .igx-carousel__arrow {
+        display: grid;
+        width: 40px;
+        height: 40px;
+        place-items: center;
+        border: 0;
+        border-radius: 50%;
+        color: var(--ig-gray-800);
+        background: rgba(255, 255, 255, 0.88);
+        box-shadow: 0 6px 16px rgba(11, 31, 53, 0.22);
+    }
+
+    .styled-carousel .igx-slide {
+        height: 100%;
+    }
+}
+
+.carousel-navigation-button {
+    display: inline-grid;
+    width: 20px;
+    height: 20px;
+    place-items: center;
+    line-height: 1;
+}
+
+.carousel-navigation-button igx-icon {
+    width: 20px;
+    height: 20px;
+    color: inherit;
+}
+
+.carousel-indicator {
+    display: block;
+    width: 9px;
+    height: 9px;
+    border: 2px solid var(--ig-gray-600);
+    border-radius: 50%;
+    background: transparent;
+}
+
+.carousel-indicator-active {
+    border-color: var(--ig-primary-500);
+    background: var(--ig-primary-500);
+}
+
+.slide-card {
+    position: relative;
+    display: grid;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+}
+
+.slide-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.slide-content {
+    position: absolute;
+    inset: auto 56px 44px 56px;
+    max-width: 380px;
+    padding: 20px 24px;
+    border-radius: 8px;
+    color: var(--ig-gray-900);
+    background: rgba(255, 255, 255, 0.88);
+    box-shadow: 0 14px 34px rgba(11, 31, 53, 0.18);
+}
+
+.slide-label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--ig-primary-600);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0;
+}
+
+.slide-content h3 { margin: 0; font-size: 24px; line-height: 1.2; }
+.slide-content p { margin: 8px 0 0; color: var(--ig-gray-700); line-height: 1.45; }
diff --git a/src/app/layouts/carousel/carousel-styling/carousel-styling.component.ts b/src/app/layouts/carousel/carousel-styling/carousel-styling.component.ts
new file mode 100644
index 000000000..8bb88e8c7
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-styling/carousel-styling.component.ts
@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import {
+    IgxCarouselComponent,
+    IgxCarouselIndicatorDirective,
+    IgxCarouselNextButtonDirective,
+    IgxCarouselPrevButtonDirective,
+    IgxSlideComponent
+} from 'igniteui-angular/carousel';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+@Component({
+    selector: 'app-carousel-styling',
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-styling.component.scss', '../carousel-bootstrap-theme.scss'],
+    templateUrl: './carousel-styling.component.html',
+    imports: [
+        IgxCarouselComponent,
+        IgxCarouselIndicatorDirective,
+        IgxCarouselNextButtonDirective,
+        IgxCarouselPrevButtonDirective,
+        IgxIconComponent,
+        IgxSlideComponent
+    ]
+})
+export class CarouselStylingComponent {
+    public readonly slides = [
+        {
+            alt: 'Wonderful coast',
+            image: 'https://dl.infragistics.com/x/img/carousel/WonderfulCoast.png',
+            label: '01',
+            subtitle: 'A quiet route along cliffs, beach towns, and open water.',
+            title: 'Coastal retreat'
+        },
+        {
+            alt: 'Cultural district',
+            image: 'https://dl.infragistics.com/x/img/carousel/CulturalDip.png',
+            label: '02',
+            subtitle: 'Museums, galleries, and historic streets in one walkable plan.',
+            title: 'Cultural district'
+        },
+        {
+            alt: 'Golden beaches',
+            image: 'https://dl.infragistics.com/x/img/carousel/GoldenBeaches.png',
+            label: '03',
+            subtitle: 'A sunny itinerary built around swimming, dining, and sunsets.',
+            title: 'Golden beaches'
+        }
+    ];
+}
diff --git a/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.ts b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.ts
index 58903f63e..71d18ca95 100644
--- a/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.ts
+++ b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.ts
@@ -3,7 +3,8 @@ import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carous
 
 @Component({
     selector: 'app-carousel',
-    styleUrls: ['./carousel-tailwind-sample.component.scss'],
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-tailwind-sample.component.scss', '../carousel-bootstrap-theme.scss'],
     templateUrl: './carousel-tailwind-sample.component.html',
     imports: [IgxCarouselComponent, IgxSlideComponent]
 })
diff --git a/src/app/layouts/carousel/carousel-tailwind-styling/carousel-tailwind-styling.component.html b/src/app/layouts/carousel/carousel-tailwind-styling/carousel-tailwind-styling.component.html
new file mode 100644
index 000000000..2de32eeb7
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-tailwind-styling/carousel-tailwind-styling.component.html
@@ -0,0 +1,39 @@
+<div class="container sample center">
+  <igx-carousel class="styled-carousel h-[430px] w-full overflow-hidden rounded-lg border border-[var(--ig-gray-300)] bg-[var(--ig-surface-500)]">
+    <ng-template igxCarouselPrevButton>
+      <span class="carousel-navigation-button inline-grid h-5 w-5 place-items-center leading-none"><igx-icon>chevron_left</igx-icon></span>
+    </ng-template>
+    <ng-template igxCarouselNextButton>
+      <span class="carousel-navigation-button inline-grid h-5 w-5 place-items-center leading-none"><igx-icon>chevron_right</igx-icon></span>
+    </ng-template>
+    <ng-template igxCarouselIndicator let-slide>
+      <span class="carousel-indicator" [class.carousel-indicator-active]="slide.active"></span>
+    </ng-template>
+
+    @for (slide of slides; track slide.image) {
+      <igx-slide>
+        <article class="m-0 grid h-full w-full overflow-hidden bg-[var(--ig-gray-100)] md:grid-cols-[1.15fr_0.85fr]">
+          <img class="h-52 w-full object-cover md:h-full" [src]="slide.image" [alt]="slide.alt" />
+          <section class="grid content-center gap-5 bg-[var(--ig-surface-500)] py-10 pl-8 pr-24 text-[var(--ig-gray-900)]">
+            <div>
+              <span class="mb-2 block text-xs font-bold leading-none text-[var(--ig-primary-600)]">{{ slide.label }} / ITINERARY</span>
+              <h3 class="m-0 !text-2xl !leading-tight">{{ slide.title }}</h3>
+              <p class="mb-0 mt-2 leading-snug text-[var(--ig-gray-700)]">{{ slide.subtitle }}</p>
+            </div>
+            <div class="grid grid-cols-3 divide-x divide-[var(--ig-gray-300)] border-y border-[var(--ig-gray-300)] py-3">
+              @for (detail of slide.details; track detail) {
+                <span class="px-2 text-center text-xs font-semibold text-[var(--ig-gray-700)] first:!pl-0 last:!pr-0">{{ detail }}</span>
+              }
+            </div>
+            <div class="flex flex-wrap gap-2">
+              @for (tag of slide.tags; track tag) {
+                <span class="rounded-full border border-[var(--ig-gray-300)] px-3 py-1 text-xs text-[var(--ig-gray-700)]">{{ tag }}</span>
+              }
+            </div>
+            <button igxButton="contained">View itinerary</button>
+          </section>
+        </article>
+      </igx-slide>
+    }
+  </igx-carousel>
+</div>
diff --git a/src/app/layouts/carousel/carousel-tailwind-styling/carousel-tailwind-styling.component.scss b/src/app/layouts/carousel/carousel-tailwind-styling/carousel-tailwind-styling.component.scss
new file mode 100644
index 000000000..d6f1d8e69
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-tailwind-styling/carousel-tailwind-styling.component.scss
@@ -0,0 +1,60 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
+.container {
+    width: min(960px, calc(100% - 32px));
+    margin: 16px auto 0;
+}
+
+.styled-carousel {
+    width: 100%;
+    height: 430px;
+    margin: 0;
+}
+:host ::ng-deep {
+    .styled-carousel .igx-carousel-indicators {
+        gap: 8px;
+        padding: 6px 10px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.82);
+        box-shadow: 0 6px 16px rgba(11, 31, 53, 0.16);
+    }
+
+    .styled-carousel .igx-carousel__arrow {
+        display: grid;
+        width: 40px;
+        height: 40px;
+        place-items: center;
+        border: 0;
+        border-radius: 50%;
+        color: var(--ig-gray-800);
+        background: rgba(255, 255, 255, 0.88);
+        box-shadow: 0 6px 16px rgba(11, 31, 53, 0.22);
+    }
+
+    .styled-carousel .igx-slide {
+        height: 100%;
+    }
+}
+
+.carousel-navigation-button igx-icon {
+    width: 20px;
+    height: 20px;
+    color: inherit;
+}
+
+.carousel-indicator {
+    display: block;
+    width: 9px;
+    height: 9px;
+    border: 2px solid var(--ig-gray-600);
+    border-radius: 50%;
+    background: transparent;
+}
+
+.carousel-indicator-active {
+    border-color: var(--ig-primary-500);
+    background: var(--ig-primary-500);
+}
diff --git a/src/app/layouts/carousel/carousel-tailwind-styling/carousel-tailwind-styling.component.ts b/src/app/layouts/carousel/carousel-tailwind-styling/carousel-tailwind-styling.component.ts
new file mode 100644
index 000000000..77d6b35d5
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-tailwind-styling/carousel-tailwind-styling.component.ts
@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import {
+    IgxCarouselComponent,
+    IgxCarouselIndicatorDirective,
+    IgxCarouselNextButtonDirective,
+    IgxCarouselPrevButtonDirective,
+    IgxSlideComponent
+} from 'igniteui-angular/carousel';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+@Component({
+    selector: 'app-carousel-tailwind-styling',
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-tailwind-styling.component.scss', '../carousel-bootstrap-theme.scss'],
+    templateUrl: './carousel-tailwind-styling.component.html',
+    imports: [
+        IgxButtonDirective,
+        IgxCarouselComponent,
+        IgxCarouselIndicatorDirective,
+        IgxCarouselNextButtonDirective,
+        IgxCarouselPrevButtonDirective,
+        IgxIconComponent,
+        IgxSlideComponent
+    ]
+})
+export class CarouselTailwindStylingComponent {
+    public readonly slides = [
+        {
+            alt: 'Scenic travel destination',
+            details: ['3 days', '8 stops', 'Flexible dates'],
+            image: 'https://dl.infragistics.com/x/img/carousel/AdobeStock_1937350575-s.png',
+            label: '01',
+            subtitle: 'A flexible travel plan built around memorable views and time to explore.',
+            tags: ['Scenic route', 'Flexible pace'],
+            title: 'Scenic getaway'
+        },
+        {
+            alt: 'Mountain trail ride',
+            details: ['1 day', '12 km', 'Advanced'],
+            image: 'https://dl.infragistics.com/x/img/carousel/AdobeStock_215535179-s.png',
+            label: '02',
+            subtitle: 'A high-energy route through rugged terrain, with technical descents and open trail views.',
+            tags: ['Mountain bike', 'Trail ride'],
+            title: 'Mountain trail ride'
+        },
+        {
+            alt: 'Weekend escape',
+            details: ['Weekend', '5 highlights', 'Year round'],
+            image: 'https://dl.infragistics.com/x/img/carousel/AdobeStock_637533323-s.png',
+            label: '03',
+            subtitle: 'A short break with unhurried moments, fresh perspectives, and room to recharge.',
+            tags: ['Unwind', 'Go at your pace'],
+            title: 'Weekend escape'
+        }
+    ];
+}
diff --git a/src/app/layouts/carousel/carousel-thumbnail/carousel-thumbnail.component.html b/src/app/layouts/carousel/carousel-thumbnail/carousel-thumbnail.component.html
new file mode 100644
index 000000000..dcec596a9
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-thumbnail/carousel-thumbnail.component.html
@@ -0,0 +1,18 @@
+<div class="carousel-container">
+  <igx-carousel [navigation]="false" [pause]="false" [interval]="2000" [vertical]="true" animationType="fade">
+    <ng-template igxCarouselIndicator let-slide>
+      <img
+        [class.blurred]="!slide.active"
+        [src]="slides[slide.index].thumbnail"
+        [alt]="slides[slide.index].alt + ' thumbnail'"
+        width="50"
+        height="60" />
+    </ng-template>
+
+    @for (slide of slides; track slide.image) {
+      <igx-slide>
+        <img class="slide-image" [src]="slide.image" [alt]="slide.alt" />
+      </igx-slide>
+    }
+  </igx-carousel>
+</div>
diff --git a/src/app/layouts/carousel/carousel-thumbnail/carousel-thumbnail.component.scss b/src/app/layouts/carousel/carousel-thumbnail/carousel-thumbnail.component.scss
new file mode 100644
index 000000000..6847d4f55
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-thumbnail/carousel-thumbnail.component.scss
@@ -0,0 +1,26 @@
+.carousel-container {
+    margin: 16px auto 0;
+}
+
+igx-carousel {
+    height: 420px;
+    margin-inline: auto;
+    max-width: 75%;
+}
+
+:host ::ng-deep {
+    .igx-carousel-indicators {
+        border-radius: 2px;
+    }
+
+    .slide-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.blurred {
+    filter: blur(2px);
+    opacity: 0.5;
+}
diff --git a/src/app/layouts/carousel/carousel-thumbnail/carousel-thumbnail.component.ts b/src/app/layouts/carousel/carousel-thumbnail/carousel-thumbnail.component.ts
new file mode 100644
index 000000000..00cff07ec
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-thumbnail/carousel-thumbnail.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxSlideComponent } from 'igniteui-angular/carousel';
+
+@Component({
+    selector: 'app-carousel-thumbnail',
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-thumbnail.component.scss', '../carousel-bootstrap-theme.scss'],
+    templateUrl: './carousel-thumbnail.component.html',
+    imports: [IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxSlideComponent]
+})
+export class CarouselThumbnailComponent {
+    public readonly slides = [
+        { alt: 'Wonderful coast', image: 'assets/images/carousel/WonderfulCoast.png', thumbnail: 'assets/images/carousel/WonderfulCoastThumb.png' },
+        { alt: 'Cultural district', image: 'assets/images/carousel/CulturalDip.png', thumbnail: 'assets/images/carousel/CulturalDipThumb.png' },
+        { alt: 'Golden beaches', image: 'assets/images/carousel/GoldenBeaches.png', thumbnail: 'assets/images/carousel/GoldenBeachesThumb.png' },
+        { alt: 'Island of history', image: 'assets/images/carousel/IslandOfHistory.png', thumbnail: 'assets/images/carousel/IslandOfHistoryThumb.png' },
+        { alt: 'Amazing bridge', image: 'assets/images/carousel/AmazingBridge.png', thumbnail: 'assets/images/carousel/AmazingBridgeThumb.png' }
+    ];
+}
diff --git a/src/app/layouts/carousel/carousel-with-components-sample/carousel-with-components-sample.component.ts b/src/app/layouts/carousel/carousel-with-components-sample/carousel-with-components-sample.component.ts
index 02c4a0a0a..408fd5871 100644
--- a/src/app/layouts/carousel/carousel-with-components-sample/carousel-with-components-sample.component.ts
+++ b/src/app/layouts/carousel/carousel-with-components-sample/carousel-with-components-sample.component.ts
@@ -7,7 +7,8 @@ import { FormsModule } from '@angular/forms';
 
 @Component({
     selector: 'app-carousel',
-    styleUrls: ['./carousel-with-components-sample.component.scss'],
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-with-components-sample.component.scss', '../carousel-bootstrap-theme.scss'],
     templateUrl: './carousel-with-components-sample.component.html',
     imports: [IgxCarouselComponent, IgxSlideComponent, FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective, IgxInputDirective, IgxButtonDirective]
 })
diff --git a/src/app/layouts/carousel/carousel.component.ts b/src/app/layouts/carousel/carousel.component.ts
index 083bbe770..b11eb70c4 100644
--- a/src/app/layouts/carousel/carousel.component.ts
+++ b/src/app/layouts/carousel/carousel.component.ts
@@ -4,7 +4,8 @@ import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carous
 
 @Component({
     selector: 'app-carousel',
-    styleUrls: ['./carousel.component.scss'],
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel.component.scss', './carousel-bootstrap-theme.scss'],
     templateUrl: './carousel.component.html',
     imports: [IgxCarouselComponent, IgxSlideComponent]
 })
diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts
index 8890bf4c9..dc3b0b97b 100644
--- a/src/app/layouts/layouts-routes-data.ts
+++ b/src/app/layouts/layouts-routes-data.ts
@@ -12,6 +12,13 @@ export const layoutsRoutesData = {
     'avatar-styling': { displayName: 'Styling avatars', parentName: 'Avatar' },
     'avatar-tailwind-styling': { displayName: 'Styling Avatar with Tailwind', parentName: 'Avatar' },
     'carousel': { displayName: 'Carousel Base', parentName: 'Carousel' },
+    'carousel-overview-sample': { displayName: 'Carousel Overview', parentName: 'Carousel' },
+    'carousel-configuration-sample': { displayName: 'Carousel Configuration', parentName: 'Carousel' },
+    'carousel-components-sample': { displayName: 'Carousel Components', parentName: 'Carousel' },
+    'carousel-animations': { displayName: 'Carousel Animations', parentName: 'Carousel' },
+    'carousel-thumbnail': { displayName: 'Carousel Thumbnail Indicators', parentName: 'Carousel' },
+    'carousel-styling': { displayName: 'Carousel Styling', parentName: 'Carousel' },
+    'carousel-tailwind-styling': { displayName: 'Carousel Tailwind Styling', parentName: 'Carousel' },
     'carousel-no-navigation-sample': { displayName: 'Carousel No Navigation', parentName: 'Carousel' },
     'carousel-animations-sample': { displayName: 'Carousel Animations', parentName: 'Carousel' },
     'carousel-with-components-sample': { displayName: 'Carousel With Other Components', parentName: 'Carousel' },
diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts
index 7385391ce..ac972aaf3 100644
--- a/src/app/layouts/layouts.routes.ts
+++ b/src/app/layouts/layouts.routes.ts
@@ -28,6 +28,27 @@ import {
 import {
     CarouselStylingSampleComponent
 } from './carousel/carousel-styling-sample/carousel-styling-sample.component';
+import {
+    CarouselOverviewSampleComponent
+} from './carousel/carousel-overview-sample/carousel-overview-sample.component';
+import {
+    CarouselConfigurationSampleComponent
+} from './carousel/carousel-configuration-sample/carousel-configuration-sample.component';
+import {
+    CarouselComponentsSampleComponent
+} from './carousel/carousel-components-sample/carousel-components-sample.component';
+import {
+    CarouselAnimationsComponent
+} from './carousel/carousel-animations/carousel-animations.component';
+import {
+    CarouselThumbnailComponent
+} from './carousel/carousel-thumbnail/carousel-thumbnail.component';
+import {
+    CarouselStylingComponent
+} from './carousel/carousel-styling/carousel-styling.component';
+import {
+    CarouselTailwindStylingComponent
+} from './carousel/carousel-tailwind-styling/carousel-tailwind-styling.component';
 import { CarouselComponent } from './carousel/carousel.component';
 import { DividerDashedComponent } from './divider/dashed/divider-dashed.component';
 import { DividerDefaultComponent } from './divider/default/divider-default.component';
@@ -166,6 +187,41 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['carousel-styling-sample'],
         path: 'carousel-styling-sample'
     },
+    {
+        component: CarouselOverviewSampleComponent,
+        data: layoutsRoutesData['carousel-overview-sample'],
+        path: 'carousel-overview-sample'
+    },
+    {
+        component: CarouselConfigurationSampleComponent,
+        data: layoutsRoutesData['carousel-configuration-sample'],
+        path: 'carousel-configuration-sample'
+    },
+    {
+        component: CarouselComponentsSampleComponent,
+        data: layoutsRoutesData['carousel-components-sample'],
+        path: 'carousel-components-sample'
+    },
+    {
+        component: CarouselAnimationsComponent,
+        data: layoutsRoutesData['carousel-animations'],
+        path: 'carousel-animations'
+    },
+    {
+        component: CarouselThumbnailComponent,
+        data: layoutsRoutesData['carousel-thumbnail'],
+        path: 'carousel-thumbnail'
+    },
+    {
+        component: CarouselStylingComponent,
+        data: layoutsRoutesData['carousel-styling'],
+        path: 'carousel-styling'
+    },
+    {
+        component: CarouselTailwindStylingComponent,
+        data: layoutsRoutesData['carousel-tailwind-styling'],
+        path: 'carousel-tailwind-styling'
+    },
     {
         component: CarouselComponent,
         data: layoutsRoutesData['carousel'],