diff --git a/.github/workflows/deploy-trigger.yml b/.github/workflows/deploy-trigger.yml
new file mode 100644
index 0000000000..b69c7fa122
--- /dev/null
+++ b/.github/workflows/deploy-trigger.yml
@@ -0,0 +1,34 @@
+name: Trigger Deployment Workflow
+
+on:
+  push:
+    branches:
+      - vnext
+      - master
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: 'Input a branch name (e.g., vnext)'
+        required: true
+
+permissions:
+  contents: read
+jobs:
+  trigger:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Trigger Workflow in Another Repository
+        env:
+          GH_TOKEN: ${{ secrets.CLASSIC_PATKA }}
+        run: |
+          # Set the required variables
+          repo="IgniteUI/igniteui-actions"
+          event_type="igniteui-angular-samples-cd"
+          branch="${{ github.ref_name }}"
+
+          # Trigger repository dispatch using GitHub CLI
+          gh api repos/$repo/dispatches \
+            --method POST \
+            --field event_type="$event_type" \
+            --raw-field client_payload="{\"branch\": \"$branch\", \"unit\": false, \"integration\": true}"
\ No newline at end of file
diff --git a/live-editing/configs/BaseConfig.ts b/live-editing/configs/BaseConfig.ts
index d8f4d4f0dc..0aa9662bbf 100644
--- a/live-editing/configs/BaseConfig.ts
+++ b/live-editing/configs/BaseConfig.ts
@@ -7,5 +7,7 @@ export const BaseAppConfig = {
     providers: [
         { 'provider': 'provideAnimations()', 'import': '@angular/platform-browser/animations' }
     ],
-    router: false
-}
\ No newline at end of file
+    routesConfig: {
+        router: false
+    }
+}
diff --git a/live-editing/configs/CarouselConfigGenerator.ts b/live-editing/configs/CarouselConfigGenerator.ts
index aeccd5f3d5..a909c4440d 100644
--- a/live-editing/configs/CarouselConfigGenerator.ts
+++ b/live-editing/configs/CarouselConfigGenerator.ts
@@ -41,6 +41,13 @@ export class CarouselConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/layouts/carousel/"
         }));
 
+        configs.push(new Config({
+            component: 'CarouselStylingSampleComponent',
+            additionalFiles: ["/src/app/layouts/carousel/carousel-styling-sample/layout.scss"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/layouts/carousel/"
+        }));
+        
         return configs;
     }
 }
diff --git a/live-editing/configs/GridCRMConfigGenerator.ts b/live-editing/configs/GridCRMConfigGenerator.ts
index dd0100d557..dd36ae0233 100644
--- a/live-editing/configs/GridCRMConfigGenerator.ts
+++ b/live-editing/configs/GridCRMConfigGenerator.ts
@@ -26,8 +26,7 @@ export class GridCRMConfigGenerator implements IConfigGenerator {
                 ],
                 providers: [
                     { 'provider': 'provideAnimations()', 'import': '@angular/platform-browser/animations' }
-                ],
-                router: true
+                ]
             }
             /*appConfig: BaseAppConfig*/
 
diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts
index 4c27d5eeb9..450a500884 100644
--- a/live-editing/configs/GridConfigGenerator.ts
+++ b/live-editing/configs/GridConfigGenerator.ts
@@ -452,11 +452,17 @@ export class GridConfigGenerator implements IConfigGenerator {
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts',
                 '/src/app/grid/grid-save-state/localData.ts',
                 '/src/app/grid/grid-save-state/about.component.ts',
-                '/src/app/grid/grid-save-state/about.component.html'
+                '/src/app/grid/grid-save-state/about.component.html',
+                '/src/app/grid/grid-save-state/routes.ts'
             ],
-            appConfig: BaseAppConfig
+            appConfig: {
+                ...BaseAppConfig,
+                routesConfig: {
+                    router: true,
+                    routesImportPath: './grid/grid-save-state/routes'
+                }
+            }
         });
-        gridSaveStateSampleConfig.usesRouting = true;
         configs.push(gridSaveStateSampleConfig);
 
         configs.push(new Config({
diff --git a/live-editing/configs/HierarchicalGridConfigGenerator.ts b/live-editing/configs/HierarchicalGridConfigGenerator.ts
index 7780d0d0cc..1b8d63c1ba 100644
--- a/live-editing/configs/HierarchicalGridConfigGenerator.ts
+++ b/live-editing/configs/HierarchicalGridConfigGenerator.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 /* eslint-disable max-len */
-import {ReactiveFormsModule} from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import {
     IgxActionStripModule,
@@ -517,12 +517,18 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
                 '/src/app/data/singersData.ts',
                 '/src/app/hierarchical-grid/models.ts',
                 '/src/app/hierarchical-grid/hierarchical-grid-save-state/about.component.ts',
-                '/src/app/hierarchical-grid/hierarchical-grid-save-state/about.component.html'
+                '/src/app/hierarchical-grid/hierarchical-grid-save-state/about.component.html',
+                '/src/app/hierarchical-grid/hierarchical-grid-save-state/routes.ts'
             ],
-            appConfig: BaseAppConfig,
+            appConfig: {
+                ...BaseAppConfig,
+                routesConfig: {
+                    router: true,
+                    routesImportPath: './hierarchical-grid/hierarchical-grid-save-state/routes'
+                }
+            },
             component: 'HGridSaveStateComponent'
         });
-        hGridSaveStateSampleConfig.usesRouting = true;
         configs.push(hGridSaveStateSampleConfig);
 
         configs.push(new Config({
diff --git a/live-editing/configs/PivotGridConfigGenerator.ts b/live-editing/configs/PivotGridConfigGenerator.ts
index 1c451d3c14..a9676ce379 100644
--- a/live-editing/configs/PivotGridConfigGenerator.ts
+++ b/live-editing/configs/PivotGridConfigGenerator.ts
@@ -42,14 +42,21 @@ export class PivotGridConfigGenerator implements IConfigGenerator {
         }));
 
         configs.push(new Config({
-            additionalFiles: 
+            additionalFiles:
             [
                 '/src/app/directives/prevent-scroll.directive.ts',
                 '/src/app/data/dataToAnalyze.ts',
                 '/src/app/pivot-grid/pivot-state-persistence/about.component.ts',
                 '/src/app/pivot-grid/pivot-state-persistence/about.component.html',
+                '/src/app/pivot-grid/pivot-state-persistence/routes.ts'
             ],
-            appConfig: BaseAppConfig,
+             appConfig: {
+                ...BaseAppConfig,
+                routesConfig: {
+                    router: true,
+                    routesImportPath: './pivot-grid/pivot-state-persistence/routes'
+                }
+            },
             component: 'PivotGridStatePersistenceSampleComponent'
         }));
 
diff --git a/live-editing/configs/TabBarConfigGenerator.ts b/live-editing/configs/TabBarConfigGenerator.ts
index 10701008b4..597cd869a1 100644
--- a/live-editing/configs/TabBarConfigGenerator.ts
+++ b/live-editing/configs/TabBarConfigGenerator.ts
@@ -37,8 +37,8 @@ export class TabBarConfigGenerator implements IConfigGenerator {
                 "/src/app/layouts/tabbar/views/view3/view3.component.ts",
                 "/src/app/layouts/tabbar/views/view3/view3.component.html"
             ],
-            /* TODO: Adding the correct router config needs to be done separately */
-            appConfig: { ...BaseAppConfig, ...{ router: true }},
+            /* Note: the Tabbar samples are not used anymore */
+            appConfig: { ...BaseAppConfig, ...{ routesConfig: { router: true } }},
             shortenComponentPathBy: "/layouts/tabbar/"
         }));
 
diff --git a/live-editing/configs/TabsConfigGenerator.ts b/live-editing/configs/TabsConfigGenerator.ts
index 2773942d7a..6a69385dd0 100644
--- a/live-editing/configs/TabsConfigGenerator.ts
+++ b/live-editing/configs/TabsConfigGenerator.ts
@@ -45,10 +45,16 @@ export class TabsConfigGenerator implements IConfigGenerator {
                 "/src/app/layouts/tabs/views/view2/view2.component.ts",
                 "/src/app/layouts/tabs/views/view2/view2.component.html",
                 "/src/app/layouts/tabs/views/view3/view3.component.ts",
-                "/src/app/layouts/tabs/views/view3/view3.component.html"
+                "/src/app/layouts/tabs/views/view3/view3.component.html",
+                "/src/app/layouts/tabs/tabs-sample-4/routes.ts"
             ],
-            /* TODO: Adding the correct router config needs to be done separately */
-            appConfig: { ...BaseAppConfig, ...{ router: true }},
+             appConfig: {
+                ...BaseAppConfig,
+                routesConfig: {
+                    router: true,
+                    routesImportPath: './tabs-sample-4/routes'
+                }
+            },
             shortenComponentPathBy: "/layouts/tabs/"
         }));
 
diff --git a/live-editing/configs/TreeGridConfigGenerator.ts b/live-editing/configs/TreeGridConfigGenerator.ts
index e1e847104a..afdaf948b6 100644
--- a/live-editing/configs/TreeGridConfigGenerator.ts
+++ b/live-editing/configs/TreeGridConfigGenerator.ts
@@ -672,12 +672,19 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
                 '/src/app/directives/prevent-scroll.directive.ts',
                 '/src/app/tree-grid/tree-grid-save-state/data.ts',
                 '/src/app/tree-grid/tree-grid-save-state/about.component.ts',
-                '/src/app/tree-grid/tree-grid-save-state/about.component.html'],
-            appConfig: BaseAppConfig,
+                '/src/app/tree-grid/tree-grid-save-state/about.component.html',
+                '/src/app/tree-grid/tree-grid-save-state/routes.ts'
+            ],
+            appConfig: {
+                ...BaseAppConfig,
+                routesConfig: {
+                    router: true,
+                    routesImportPath: './tree-grid-save-state/routes'
+                }
+            },
             component: 'TGridSaveStateComponent',
             shortenComponentPathBy: '/tree-grid/'
         });
-        treeGridSaveStateSampleConfig.usesRouting = true;
         configs.push(treeGridSaveStateSampleConfig);
 
         configs.push(new Config({
diff --git a/package-lock.json b/package-lock.json
index 241cad0560..72aad866bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,12 +36,12 @@
         "file-saver": "^2.0.2",
         "hammerjs": "^2.0.8",
         "igniteui-angular": "^20.1.4",
-        "igniteui-angular-charts": "^19.0.1",
-        "igniteui-angular-core": "^19.0.1",
-        "igniteui-angular-extras": "^20.0.0",
+        "igniteui-angular-charts": "^20.1.0",
+        "igniteui-angular-core": "^20.1.0",
+        "igniteui-angular-extras": "^20.0.2",
         "igniteui-angular-i18n": "^20.1.4",
         "igniteui-dockmanager": "^1.17.0",
-        "igniteui-live-editing": "^3.1.1",
+        "igniteui-live-editing": "^3.2.0",
         "igniteui-webcomponents": "^6.2.0",
         "minireset.css": "0.0.6",
         "postcss": "^8.5.5",
@@ -12591,38 +12591,38 @@
       }
     },
     "node_modules/igniteui-angular-charts": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-angular-charts/-/igniteui-angular-charts-19.1.0.tgz",
-      "integrity": "sha512-GtWTI8gmJk5MpbUUGjK2ATJfyfl1sxbfEdR23xAvI7XrOvwpJnsGAf4QKeGg45XOS4fyF5hGBl/HN95m9lyoSw==",
+      "version": "20.1.0",
+      "resolved": "https://registry.npmjs.org/igniteui-angular-charts/-/igniteui-angular-charts-20.1.0.tgz",
+      "integrity": "sha512-VwVsWRjHHMAjXHmrN2ddFqJwyRaXCVo52zaXyydc/Iq7VOK7pwruGdsiDbOj/5uFbMDpYu5O9x7DZ7T09mJwPA==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "@angular/common": "^19.0.0",
-        "@angular/compiler": "^19.0.0",
-        "@angular/core": "^19.0.0",
-        "igniteui-angular-core": "19.1.0"
+        "@angular/common": "^20.0.0",
+        "@angular/compiler": "^20.0.0",
+        "@angular/core": "^20.0.0",
+        "igniteui-angular-core": "20.1.0"
       }
     },
     "node_modules/igniteui-angular-core": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-angular-core/-/igniteui-angular-core-19.1.0.tgz",
-      "integrity": "sha512-8SKEDy4qn+Ft6hTrjN0OZOIM1WSvr3ULPGmRJY08qsTYWuRBhW2ZIx4/TxCvXbnO0mJv3nLUMtNGWLAH92s0MA==",
+      "version": "20.1.0",
+      "resolved": "https://registry.npmjs.org/igniteui-angular-core/-/igniteui-angular-core-20.1.0.tgz",
+      "integrity": "sha512-KsOmwRjJp6vwaYpznhB8byZq8smMH3KLB+NNU1SU+O4iSx4inSBfYTa09pn9Hov+I/k1CfX90n0NqchMs5pgqg==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "@angular/common": "^19.0.0",
-        "@angular/compiler": "^19.0.0",
-        "@angular/core": "^19.0.0"
+        "@angular/common": "^20.0.0",
+        "@angular/compiler": "^20.0.0",
+        "@angular/core": "^20.0.0"
       }
     },
     "node_modules/igniteui-angular-extras": {
-      "version": "20.0.0",
-      "resolved": "https://registry.npmjs.org/igniteui-angular-extras/-/igniteui-angular-extras-20.0.0.tgz",
-      "integrity": "sha512-chYEtnynwEUiJQqlNG3n79FChxHBA/y9WclKcVvzvpldwRZX3ctQh22cUH/G/rCT4gc98GV1qbwvogHAL017OA==",
+      "version": "20.0.2",
+      "resolved": "https://registry.npmjs.org/igniteui-angular-extras/-/igniteui-angular-extras-20.0.2.tgz",
+      "integrity": "sha512-/jWLKtL2Ls0+erb7IBhApVM2KsAKlotEC713xo5NgGvBr78S/cdKQFfLNsrfCYHddqur/KEmamhZtfz/0e5e9Q==",
       "dependencies": {
         "igniteui-trial-watermark": "^3.0.2",
         "tslib": "^2.0.0"
@@ -12631,8 +12631,8 @@
         "@angular/common": "20",
         "@angular/core": "20",
         "igniteui-angular": "20",
-        "igniteui-angular-charts": "19",
-        "igniteui-angular-core": "19"
+        "igniteui-angular-charts": "20",
+        "igniteui-angular-core": "20"
       }
     },
     "node_modules/igniteui-angular-i18n": {
@@ -12657,9 +12657,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/igniteui-live-editing": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/igniteui-live-editing/-/igniteui-live-editing-3.1.1.tgz",
-      "integrity": "sha512-WyoNlXS5yazjfhRcv01HnvRIiTrCMHMmQ/Ko3eNDSijsZPQLtjckb9vcj6jDeowNyG+GT4d8hE/S6hEoYXTpUg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/igniteui-live-editing/-/igniteui-live-editing-3.2.0.tgz",
+      "integrity": "sha512-GfDDql8G9GjqtmmaDmB13fvqzaZtO34Db/hhJnYud8MThPq7oECl37jrzvRMxBSXRIFKpZ4SLPneb7UlWz93hA==",
       "license": "MIT"
     },
     "node_modules/igniteui-theming": {
diff --git a/package.json b/package.json
index ab9eab0058..f11155a678 100644
--- a/package.json
+++ b/package.json
@@ -73,12 +73,12 @@
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
     "igniteui-angular": "^20.1.4",
-    "igniteui-angular-charts": "^19.0.1",
-    "igniteui-angular-core": "^19.0.1",
-    "igniteui-angular-extras": "^20.0.0",
+    "igniteui-angular-charts": "^20.1.0",
+    "igniteui-angular-core": "^20.1.0",
+    "igniteui-angular-extras": "^20.0.2",
     "igniteui-angular-i18n": "^20.1.4",
     "igniteui-dockmanager": "^1.17.0",
-    "igniteui-live-editing": "^3.1.1",
+    "igniteui-live-editing": "^3.2.0",
     "igniteui-webcomponents": "^6.2.0",
     "minireset.css": "0.0.6",
     "postcss": "^8.5.5",
diff --git a/projects/app-lob/src/app/app.routes.server.ts b/projects/app-lob/src/app/app.routes.server.ts
index 0c54bd67c9..65ab8a3247 100644
--- a/projects/app-lob/src/app/app.routes.server.ts
+++ b/projects/app-lob/src/app/app.routes.server.ts
@@ -1,28 +1,28 @@
 import { RenderMode, ServerRoute } from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
-    {
-        path: 'grid/grid',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
-    {
-        path: 'treegrid-finjs',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
-    {
-        path: 'samples/treegrid-finjs',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
-    {
-        path: 'grid-finjs-dock-manager/**',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
-    {
-        path: 'samples/grid-finjs-dock-manager/**',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
+//    {
+//        path: 'grid/grid',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
+//    {
+//        path: 'treegrid-finjs',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
+//    {
+//        path: 'samples/treegrid-finjs',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
+//    {
+//        path: 'grid-finjs-dock-manager/**',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
+//    {
+//        path: 'samples/grid-finjs-dock-manager/**',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
     {
         path: '**',
-        renderMode: RenderMode.Prerender
+        renderMode: RenderMode.Client // SSR disabled for all routes
     }
 ];
diff --git a/projects/app-lob/src/app/app.routes.ts b/projects/app-lob/src/app/app.routes.ts
index 2562d66bfa..592250f6ea 100644
--- a/projects/app-lob/src/app/app.routes.ts
+++ b/projects/app-lob/src/app/app.routes.ts
@@ -45,6 +45,11 @@ export const SamplesRoutes: Routes = [
         loadChildren: () => import('./grid-dynamic-chart-data/grid-dynamic-chart-data.routes')
         .then(m => m.GridDynamicChartRoutes),
         path: 'grid-dynamic-chart-data'
+    },
+    {
+        data: ['PivotGridsModule'],
+        loadChildren: () => import('./pivot-grid/pivot-grids.routes').then(m => m.PivotGridsRoutes),
+        path: 'pivot-grid'
     }
 ];
 
diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
index e2b9e26abd..689c101204 100644
--- a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
+++ b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
@@ -1,7 +1,4 @@
 
-<app-page-header title="Data Analysis Grid">
-    Excel like data analysis showcase application with Ignite UI Angular components and extras
-</app-page-header>
 <div class="grid-chart-contextmenu-wrapper">
     <igx-grid #grid igxChartIntegration igxConditionalFormatting igxContextMenu primaryKey='id' [data]="data">
         <igx-column field="id" [hidden]="true"></igx-column>
diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts
index 36392c552e..e3a58d98a3 100644
--- a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts
+++ b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts
@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
-import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective,  OPTIONS_TYPE, CHART_TYPE, PageHeaderComponent } from 'igniteui-angular-extras';
+import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective,  OPTIONS_TYPE, CHART_TYPE } from 'igniteui-angular-extras';
 
 import { FinancialData } from '../data/financialData';
 import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular';
@@ -10,7 +10,7 @@ import { DecimalPipe, CurrencyPipe } from '@angular/common';
     selector: 'app-grid-dynamic-chart-data',
     templateUrl: './grid-dynamic-chart-data.component.html',
     styleUrls: ['./grid-dynamic-chart-data.component.scss'],
-    imports: [IgxGridComponent, PageHeaderComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
+    imports: [IgxGridComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
 })
 export class GridDynamicChartDataComponent implements OnInit, AfterViewInit {
 
diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
index 7bcaa33c2b..17c88a1cf1 100644
--- a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
+++ b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
@@ -74,13 +74,15 @@
         </div>
       </ng-template>
     </igx-column>
-    <igx-column [field]="'Chart'" [width]="'60px'" [hidden]="false" [filterable]="false">
-      <ng-template igxCell let-cell="cell" class="center-text">
-        <button class="button-icon" igxIconButton="flat" tabindex="-1">
-          <igx-icon family="material" (click)="chartColumnAction(cell)">insert_chart_outlined</igx-icon>
-        </button>
-      </ng-template>
-    </igx-column>
+    @if (allowChart) {
+      <igx-column [field]="'Chart'" [width]="'60px'" [filterable]="false">
+        <ng-template igxCell let-cell="cell" class="center-text">
+          <button class="button-icon" igxIconButton="flat" tabindex="-1">
+            <igx-icon family="material" (click)="chartColumnAction(cell)">insert_chart_outlined</igx-icon>
+          </button>
+        </ng-template>
+      </igx-column>
+    }
 
     <igx-column [field]="'change'" [width]="'120px'" dataType="number" [headerClasses]="'headerAlignSyle'"
       [sortable]="true" [cellClasses]="trendsChange" >
diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts
index 1dc58f623a..a0b2341874 100644
--- a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts
+++ b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts
@@ -1,23 +1,23 @@
 /* eslint-disable max-len */
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild, DOCUMENT, inject } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, DOCUMENT, inject } from '@angular/core';
 import { CellType, DefaultSortingStrategy, GridSelectionMode, IGridKeydownEventArgs, IgxGridComponent, IgxOverlayOutletDirective, IRowSelectionEventArgs, OverlaySettings, SortingDirection, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective } from 'igniteui-angular';
 import { BehaviorSubject } from 'rxjs';
 import { Contract, REGIONS, Stock } from '../data/financialData';
-import { SignalRService } from '../services/signal-r.service';
-import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive';
+import { SignalRService } from '../services/signal-r.service';
+import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive';
 import { FormsModule } from '@angular/forms';
 
-@Component({
-    selector: 'app-finjs-grid',
-    templateUrl: './grid-finjs.component.html',
-    styleUrls: ['./grid-finjs.component.scss'],
-    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
+@Component({
+    selector: 'app-finjs-grid',
+    templateUrl: './grid-finjs.component.html',
+    styleUrls: ['./grid-finjs.component.scss'],
+    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
 })
-export class GridFinJSComponent implements OnInit {
-    private el = inject(ElementRef);
-    private document = inject<Document>(DOCUMENT);
-    dataService = inject(SignalRService);
+export class GridFinJSComponent implements OnInit {
+    private el = inject(ElementRef);
+    private document = inject<Document>(DOCUMENT);
+    dataService = inject(SignalRService);
 
     @ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
     @ViewChild(IgxOverlayOutletDirective, { static: true }) public outlet: IgxOverlayOutletDirective;
@@ -25,6 +25,8 @@ export class GridFinJSComponent implements OnInit {
     @Output() public keyDown = new EventEmitter();
     @Output() public chartColumnKeyDown = new EventEmitter<Stock>();
 
+    @Input() public allowChart = false;
+
     public contracts = Contract;
     public regions = REGIONS;
     public selectionMode: GridSelectionMode = 'multiple';
diff --git a/projects/app-lob/src/app/grid-finjs/main.component.html b/projects/app-lob/src/app/grid-finjs/main.component.html
index eb2f501684..e1306dd015 100644
--- a/projects/app-lob/src/app/grid-finjs/main.component.html
+++ b/projects/app-lob/src/app/grid-finjs/main.component.html
@@ -6,6 +6,7 @@
         (playAction)="onPlayAction($event)">
     </app-finjs-controllers>
     <app-finjs-grid #finGrid
+        [allowChart]="true"
         (selectedDataChanged)="setChartData($event)"
         (keyDown)="dialog.open()"
         (chartColumnKeyDown)="openSingleRowChart($event)">
diff --git a/projects/app-lob/src/app/grid-finjs/main.component.ts b/projects/app-lob/src/app/grid-finjs/main.component.ts
index 81c8fbd224..a8130ee115 100644
--- a/projects/app-lob/src/app/grid-finjs/main.component.ts
+++ b/projects/app-lob/src/app/grid-finjs/main.component.ts
@@ -1,16 +1,15 @@
 import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
 import { IgxDialogComponent, IgxOverlayOutletDirective, OverlaySettings, IgxDialogTitleDirective, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective } from 'igniteui-angular';
-import { IgxCategoryChartComponent, IgxCategoryChartCoreModule } from 'igniteui-angular-charts';
+import { IgxCategoryChartComponent, IgxCategoryChartModule } from 'igniteui-angular-charts';
 import { Stock } from '../data/financialData';
 import { ControllerComponent } from './controllers.component';
 import { GridFinJSComponent } from './grid-finjs.component';
 
-@Component({
-    selector: 'app-finjs-main',
-    styleUrls: ['./main.component.scss'],
-    templateUrl: './main.component.html',
-    imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartCoreModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective]
+@Component({
+    selector: 'app-finjs-main',
+    styleUrls: ['./main.component.scss'],
+    templateUrl: './main.component.html',
+    imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective]
 })
 export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
     @ViewChild('finGrid', { static: true }) public finGrid: GridFinJSComponent;
@@ -99,7 +98,7 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
     public setChartData(args: Stock[]): void {
         this.chartData = [];
         args.forEach(rowKey => {
-            const row: Stock = this.finGrid.grid.getRowByKey(rowKey).data;
+            const row: Stock = this.finGrid.grid.getRowByKey(rowKey.id).data;
             this.chartData.push(row);
             this.chart.notifyInsertItem(this.chartData, this.chartData.length - 1, row);
         });
diff --git a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts
index a3caf58201..6fadf6ef8f 100644
--- a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts
+++ b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { Component, ViewChild } from '@angular/core';
 import { IgxColumnComponent, IgxGridComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective } from 'igniteui-angular';
-import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartCoreModule } from 'igniteui-angular-charts';
+import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';
 import { employeesData } from '../../data/employeesData';
 import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive';
 
@@ -9,7 +9,7 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/dir
     selector: 'app-grid-master-detail',
     styleUrls: ['./grid-master-detail.component.scss'],
     templateUrl: 'grid-master-detail.component.html',
-    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartCoreModule]
+    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule]
 })
 
 export class GridMasterDetailSampleComponent {
diff --git a/projects/app-lob/src/app/index/index.component.ts b/projects/app-lob/src/app/index/index.component.ts
index 6e5b01e95a..bb56290608 100644
--- a/projects/app-lob/src/app/index/index.component.ts
+++ b/projects/app-lob/src/app/index/index.component.ts
@@ -2,7 +2,7 @@ import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, DOCUMEN
 import { NavigationStart, Route, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { IgxNavigationDrawerComponent, IgxLayoutDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconButtonDirective, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxInputDirective, IgxSuffixDirective, IgxFlexDirective, IgxNavbarComponent } from 'igniteui-angular';
 import { filter } from 'rxjs/operators';
-import { pivotGridsRoutesData } from '../../../../../src/app/pivot-grid/pivot-grid-routes-data';
+import { pivotGridsRoutesData } from '../pivot-grid/pivot-grid-routes-data';
 import { gridDynamicChartRoutesData } from '../grid-dynamic-chart-data/grid-dynamic-chart-data-routes-data';
 import { finJsDockManagerGridRoutes } from '../grid-finjs-dock-manager/grid-finjs-dock-manager-routes-data';
 import { gridfinjsRoutesData} from '../grid-finjs/grid-finjs-routes-data';
diff --git a/projects/app-lob/src/app/pivot-grid/pivot-grid-routes-data.ts b/projects/app-lob/src/app/pivot-grid/pivot-grid-routes-data.ts
new file mode 100644
index 0000000000..299f6ad504
--- /dev/null
+++ b/projects/app-lob/src/app/pivot-grid/pivot-grid-routes-data.ts
@@ -0,0 +1,12 @@
+// tslint:disable:object-literal-sort-keys
+export const pivotGridsRoutesData = {
+    'pivot-grid-basic': { displayName: 'Basic Pivot Grid', parentName: 'Pivot Grid' },
+    'pivot-grid-datasource': { displayName: 'Pivot Grid With Datasource Component', parentName: 'Pivot Grid' },
+    'pivot-grid-noop': { displayName: 'Noop Pivot Grid', parentName: 'Pivot Grid' },
+    'pivot-grid-export': { displayName: 'Pivot Grid Export', parentName: 'Pivot Grid' },
+    'pivot-grid-features': { displayName: 'Pivot Grid With Features', parentName: 'Pivot Grid' },
+    'pivot-grid-state-persistence': { displayName: 'Pivot Grid With State Persistence', parentName: 'Pivot Grid' },
+    'pivot-grid-noop-persistence': { displayName: 'Pivot Noop Grid with State Persistence', parentName: 'Pivot Grid' },
+    'pivot-grid-about': { displayName: 'Pivot Grid About', parentName: 'Pivot Grid' },
+    'pivot-grid-layout': { displayName: 'Pivot Grid Layout', parentName: 'Pivot Grid' }
+};
\ No newline at end of file
diff --git a/projects/app-lob/src/app/pivot-grid/pivot-grids.routes.ts b/projects/app-lob/src/app/pivot-grid/pivot-grids.routes.ts
new file mode 100644
index 0000000000..394c0616d7
--- /dev/null
+++ b/projects/app-lob/src/app/pivot-grid/pivot-grids.routes.ts
@@ -0,0 +1,62 @@
+/* eslint-disable max-len */
+import { Routes } from '@angular/router';
+// Import components from the main project
+import { PivotGridBasicSampleComponent } from '../../../../../src/app/pivot-grid/pivot-basic-sample/pivot-grid-basic-sample.component';
+import { PivotDataSelectorSampleComponent } from '../../../../../src/app/pivot-grid/pivot-datasource/pivot-data-selector-sample.component';
+import { PivotFeaturesComponent } from '../../../../../src/app/pivot-grid/pivot-features/pivot-features.component';
+import { PivotExportComponent } from '../../../../../src/app/pivot-grid/pivot-export/pivot-export.component';
+import { PivotGridNoopPersistenceSampleComponent } from '../../../../../src/app/pivot-grid/pivot-grid-noop-persistence/pivot-grid-noop-persistence-sample.component';
+import { PivotGridNoopSampleComponent } from '../../../../../src/app/pivot-grid/pivot-grid-noop/pivot-grid-noop-sample.component';
+import { pivotGridsRoutesData } from './pivot-grid-routes-data';
+import { PivotGridAboutComponent } from '../../../../../src/app/pivot-grid/pivot-state-persistence/about.component';
+import { PivotGridStatePersistenceSampleComponent } from '../../../../../src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component';
+import { PivotGridLayoutComponent } from '../../../../../src/app/pivot-grid/pivot-layout/pivot-layout.component'
+// tslint:enable:max-line-length
+
+export const PivotGridsRoutes: Routes = [
+    {
+        component: PivotGridBasicSampleComponent,
+        data: pivotGridsRoutesData['pivot-grid-basic'],
+        path: 'pivot-grid-basic'
+    },
+    {
+        component: PivotExportComponent,
+        data: pivotGridsRoutesData['pivot-grid-export'],
+        path: 'pivot-grid-export'
+    },
+    {
+        component: PivotFeaturesComponent,
+        data: pivotGridsRoutesData['pivot-grid-features'],
+        path: 'pivot-grid-features'
+    },
+    {
+        component: PivotDataSelectorSampleComponent,
+        data: pivotGridsRoutesData['pivot-grid-datasource'],
+        path: 'pivot-grid-datasource'
+    },
+    {
+        component: PivotGridNoopSampleComponent,
+        data: pivotGridsRoutesData['pivot-grid-noop'],
+        path: 'pivot-grid-noop'
+    },
+    {
+        component: PivotGridStatePersistenceSampleComponent,
+        data: pivotGridsRoutesData['pivot-grid-state-persistence'],
+        path: 'pivot-grid-state-persistence'
+    },
+    {
+        component: PivotGridNoopPersistenceSampleComponent,
+        data: pivotGridsRoutesData['pivot-grid-noop-persistence'],
+        path: 'pivot-grid-noop-persistence'
+    },
+    {
+        component: PivotGridAboutComponent,
+        data: pivotGridsRoutesData['pivot-grid-about'],
+        path: 'pivot-grid-about'
+    },
+    {
+        component: PivotGridLayoutComponent,
+        data: pivotGridsRoutesData['pivot-grid-layout'],
+        path: 'pivot-grid-layout'
+    }
+];
\ No newline at end of file
diff --git a/src/app/grid/grid-save-state/routes.ts b/src/app/grid/grid-save-state/routes.ts
new file mode 100644
index 0000000000..d9769b71ce
--- /dev/null
+++ b/src/app/grid/grid-save-state/routes.ts
@@ -0,0 +1,13 @@
+import { Routes } from "@angular/router";
+import { AboutComponent } from "./about.component";
+import { GridSaveStateComponent } from "./grid-state.component";
+
+export const routes: Routes = [
+  { path: 'grid-about', component: AboutComponent },
+  { path: 'grid-state', component: GridSaveStateComponent },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'grid-state'
+  }
+];
diff --git a/src/app/hierarchical-grid/hierarchical-grid-save-state/routes.ts b/src/app/hierarchical-grid/hierarchical-grid-save-state/routes.ts
new file mode 100644
index 0000000000..79a5970551
--- /dev/null
+++ b/src/app/hierarchical-grid/hierarchical-grid-save-state/routes.ts
@@ -0,0 +1,13 @@
+import { Routes } from "@angular/router";
+import { HGridSaveStateComponent } from "./hGrid-state.component";
+import { HGridAboutComponent } from "./about.component";
+
+export const routes: Routes = [
+  { path: 'hGrid-state-about', component: HGridAboutComponent },
+  { path: 'hGrid-state', component: HGridSaveStateComponent },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'hGrid-state'
+  }
+];
diff --git a/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.html b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.html
new file mode 100644
index 0000000000..f8bbee2281
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.html
@@ -0,0 +1,19 @@
+<div class="carousel-container">
+    <igx-carousel>
+        <igx-slide>
+            <div class="slide-content-wrapper">
+                <img src="assets/images/carousel/slide1@x2.jpg">
+            </div>
+        </igx-slide>
+        <igx-slide>
+            <div class="slide-content-wrapper">
+                <img src="assets/images/carousel/16-9-CulturalDip.png">
+            </div>
+        </igx-slide>
+        <igx-slide>
+            <div class="slide-content-wrapper">
+                <img src="assets/images/carousel/slide3@x2.jpg">
+            </div>
+        </igx-slide>
+    </igx-carousel>
+</div>
diff --git a/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.scss b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.scss
new file mode 100644
index 0000000000..f486e8edd9
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.scss
@@ -0,0 +1,15 @@
+@use "layout.scss";
+@use "igniteui-angular/theming" as *;
+
+// Create a carousel theme.
+$custom-carousel-theme: carousel-theme(
+  $button-background: rgb(124 50 221 / 60%),
+  $button-arrow-color: #c5bcd0,
+  $button-hover-arrow-color: #F3E8FF,
+  $indicator-background: rgb(124 50 221 / 60%),
+  $indicator-border-color: #a29aab,
+  $button-shadow: var(--ig-elevation-5)
+);
+
+// Apply the custom theme.
+@include css-vars($custom-carousel-theme); 
\ No newline at end of file
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
new file mode 100644
index 0000000000..ffa184d634
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-carousel',
+    styleUrls: ['./carousel-styling-sample.component.scss'],
+    templateUrl: './carousel-styling-sample.component.html',
+    imports: [IgxCarouselComponent, IgxSlideComponent]
+})
+
+export class CarouselStylingSampleComponent { }
diff --git a/src/app/layouts/carousel/carousel-styling-sample/layout.scss b/src/app/layouts/carousel/carousel-styling-sample/layout.scss
new file mode 100644
index 0000000000..4a4e6e05c6
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-styling-sample/layout.scss
@@ -0,0 +1,27 @@
+.carousel-container {
+  margin: 2rem 2rem auto;
+}
+
+:host ::ng-deep {
+  [role='button'],
+  [role='tablist'] {
+    backdrop-filter: blur(2px);
+
+    &:hover {
+      backdrop-filter: blur(10px);
+    }
+  }
+
+  .igx-carousel__inner {
+    min-width: unset;
+  }
+
+  .igx-slide {
+    display: flex;
+    align-items: center;
+
+    img {
+      min-height: 15rem;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.html b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.html
new file mode 100644
index 0000000000..13c9b7dc40
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.html
@@ -0,0 +1,19 @@
+<div class="carousel-container">
+    <igx-carousel class="!light-carousel ![--indicator-background:#a7b6de] ![--button-background:#a7b6de] ![--button-hover-background:#8d9abc] ![--indicator-border-color:#3E4853] ![--button-arrow-color:#3E4853]">
+        <igx-slide>
+            <div class="slide-content-wrapper">
+                <img src="assets/images/carousel/slide1@x2.jpg">
+            </div>
+        </igx-slide>
+        <igx-slide>
+            <div class="slide-content-wrapper">
+                <img src="assets/images/carousel/16-9-CulturalDip.png">
+            </div>
+        </igx-slide>
+        <igx-slide>
+            <div class="slide-content-wrapper">
+                <img src="assets/images/carousel/slide3@x2.jpg">
+            </div>
+        </igx-slide>
+    </igx-carousel>
+</div>
diff --git a/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.scss b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.scss
new file mode 100644
index 0000000000..fbf71820a8
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.scss
@@ -0,0 +1,22 @@
+igx-carousel {
+  --button-shadow: var(--ig-elevation-15);
+}
+
+.carousel-container {
+  margin: 2rem 2rem auto;
+}
+
+:host ::ng-deep {
+  .igx-carousel__inner {
+    min-width: unset;
+  }
+
+  .igx-slide {
+    display: flex;
+    align-items: center;
+
+    img {
+      min-height: 15rem;
+    }
+  }
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..51b302e18e
--- /dev/null
+++ b/src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IgxCarouselComponent, IgxSlideComponent} from 'igniteui-angular';
+
+@Component({
+    selector: 'app-carousel',
+    styleUrls: ['./carousel-tailwind-sample.component.scss'],
+    templateUrl: './carousel-tailwind-sample.component.html',
+    imports: [IgxCarouselComponent, IgxSlideComponent]
+})
+
+export class CarouselTailwindSampleComponent { }
diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts
index 6243a73522..984fe9348d 100644
--- a/src/app/layouts/layouts-routes-data.ts
+++ b/src/app/layouts/layouts-routes-data.ts
@@ -16,6 +16,8 @@ export const layoutsRoutesData = {
     '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' },
+    'carousel-tailwind-sample': { displayName: 'Carousel Tailwind', parentName: 'Carousel' },
+    'carousel-styling-sample': { displayName: 'Carousel Styling', parentName: 'Carousel' },
     'dock-manager-sample': { displayName: 'Dock Manager', parentName: 'Dock Manager' },
     'expansion-sample-1': { displayName: 'Expansion Panel 1', parentName: 'Expansion Panel' },
     'expansion-sample-2': { displayName: 'Expansion Panel 2', parentName: 'Expansion Panel' },
diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts
index 857d87a2d2..a8f23171c7 100644
--- a/src/app/layouts/layouts.routes.ts
+++ b/src/app/layouts/layouts.routes.ts
@@ -23,6 +23,12 @@ import {
 import {
     CarouselWithComponentsSampleComponent
 } from './carousel/carousel-with-components-sample/carousel-with-components-sample.component';
+import {
+    CarouselTailwindSampleComponent
+} from './carousel/carousel-tailwind-sample/carousel-tailwind-sample.component';
+import {
+    CarouselStylingSampleComponent
+} from './carousel/carousel-styling-sample/carousel-styling-sample.component';
 import { CarouselComponent } from './carousel/carousel.component';
 import { DividerDashedComponent } from './divider/dashed/divider-dashed.component';
 import { DividerDefaultComponent } from './divider/default/divider-default.component';
@@ -156,6 +162,16 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['carousel-with-components-sample'],
         path: 'carousel-with-components-sample'
     },
+    {
+        component: CarouselTailwindSampleComponent,
+        data: layoutsRoutesData['carousel-tailwind-sample'],
+        path: 'carousel-tailwind-sample'
+    },
+    {
+        component: CarouselStylingSampleComponent,
+        data: layoutsRoutesData['carousel-styling-sample'],
+        path: 'carousel-styling-sample'
+    },
     {
         component: CarouselComponent,
         data: layoutsRoutesData['carousel'],
diff --git a/src/app/layouts/tabs/tabs-sample-4/routes.ts b/src/app/layouts/tabs/tabs-sample-4/routes.ts
new file mode 100644
index 0000000000..2ceec4061b
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-sample-4/routes.ts
@@ -0,0 +1,21 @@
+import { Routes } from "@angular/router";
+import { View1Component } from "../views/view1/view1.component";
+import { View2Component } from "../views/view2/view2.component";
+import { View3Component } from "../views/view3/view3.component";
+import { TabsSample4Component } from "./components/tabs-sample-4.component";
+
+export const routes: Routes = [
+    {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: '/tabs-routing'
+    },
+    {
+        path: 'tabs-routing',
+        component: TabsSample4Component,
+        children: [
+            { path: 'view1', component: View1Component },
+            { path: 'view2', component: View2Component },
+            { path: 'view3', component: View3Component }
+        ]
+    }];
diff --git a/src/app/pivot-grid/pivot-state-persistence/routes.ts b/src/app/pivot-grid/pivot-state-persistence/routes.ts
new file mode 100644
index 0000000000..f2a2b4e721
--- /dev/null
+++ b/src/app/pivot-grid/pivot-state-persistence/routes.ts
@@ -0,0 +1,13 @@
+import { Routes } from "@angular/router";
+import { PivotGridStatePersistenceSampleComponent } from "./pivot-grid-state-persistence-sample.component";
+import { PivotGridAboutComponent } from "./about.component";
+
+export const routes: Routes = [
+  { path: 'pivot-state-about', component: PivotGridAboutComponent },
+  { path: 'pivot-grid-state-persistence', component: PivotGridStatePersistenceSampleComponent },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'pivot-grid-state-persistence'
+  }
+];
diff --git a/src/app/tree-grid/tree-grid-save-state/routes.ts b/src/app/tree-grid/tree-grid-save-state/routes.ts
new file mode 100644
index 0000000000..279b08be6d
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-save-state/routes.ts
@@ -0,0 +1,13 @@
+import { Routes } from "@angular/router";
+import { TGridAboutComponent } from "./about.component";
+import { TGridSaveStateComponent } from "./tGrid-state.component";
+
+export const routes: Routes = [
+  { path: 'tree-grid-state-about', component: TGridAboutComponent },
+  { path: 'tree-grid-state', component: TGridSaveStateComponent },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'tree-grid-state'
+  }
+];
diff --git a/src/assets/images/carousel/16-9-CulturalDip.png b/src/assets/images/carousel/16-9-CulturalDip.png
new file mode 100644
index 0000000000..c1168c79fd
Binary files /dev/null and b/src/assets/images/carousel/16-9-CulturalDip.png differ