ADDED website templates #1

2025-07-13 09:32:53 +00:00
parent e467247175
commit 9201f49b5b
330 changed files with 35271 additions and 0 deletions
--- a/Web/themes/modernize/src/app/app.component.html
+++ b/Web/themes/modernize/src/app/app.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
--- a/Web/themes/modernize/src/app/app.component.spec.ts
+++ b/Web/themes/modernize/src/app/app.component.spec.ts
@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'Angular15'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('Angular15');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('Angular15 app is running!');
+  });
+});
--- a/Web/themes/modernize/src/app/app.component.ts
+++ b/Web/themes/modernize/src/app/app.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+    selector: 'app-root',
+    imports: [RouterOutlet],
+    templateUrl: './app.component.html'
+})
+export class AppComponent {
+  title = 'Modernize Angular Admin Template';
+}
--- a/Web/themes/modernize/src/app/app.config.ts
+++ b/Web/themes/modernize/src/app/app.config.ts
@@ -0,0 +1,55 @@
+import {
+  ApplicationConfig,
+  provideZoneChangeDetection,
+  importProvidersFrom,
+} from '@angular/core';
+import {
+  HttpClient,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import { routes } from './app.routes';
+import {
+  provideRouter,
+  withComponentInputBinding,
+  withInMemoryScrolling,
+} from '@angular/router';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideClientHydration } from '@angular/platform-browser';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+// icons
+import { TablerIconsModule } from 'angular-tabler-icons';
+import * as TablerIcons from 'angular-tabler-icons/icons';
+
+// perfect scrollbar
+import { NgScrollbarModule } from 'ngx-scrollbar';
+
+//Import all material modules
+import { MaterialModule } from './material.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(
+      routes,
+      withInMemoryScrolling({
+        scrollPositionRestoration: 'enabled',
+        anchorScrolling: 'enabled',
+      }),
+      withComponentInputBinding()
+    ),
+    provideHttpClient(withInterceptorsFromDi()),
+    provideClientHydration(),
+    provideAnimationsAsync(),
+    importProvidersFrom(
+      FormsModule,
+      ReactiveFormsModule,
+      MaterialModule,
+      TablerIconsModule.pick(TablerIcons),
+      NgScrollbarModule,
+    ),
+  ],
+};
--- a/Web/themes/modernize/src/app/app.routes.ts
+++ b/Web/themes/modernize/src/app/app.routes.ts
@@ -0,0 +1,51 @@
+import { Routes } from '@angular/router';
+import { BlankComponent } from './layouts/blank/blank.component';
+import { FullComponent } from './layouts/full/full.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: FullComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: '/dashboard',
+        pathMatch: 'full',
+      },
+      {
+        path: 'dashboard',
+        loadChildren: () =>
+          import('./pages/pages.routes').then((m) => m.PagesRoutes),
+      },
+      {
+        path: 'ui-components',
+        loadChildren: () =>
+          import('./pages/ui-components/ui-components.routes').then(
+            (m) => m.UiComponentsRoutes
+          ),
+      },
+      {
+        path: 'extra',
+        loadChildren: () =>
+          import('./pages/extra/extra.routes').then((m) => m.ExtraRoutes),
+      },
+    ],
+  },
+  {
+    path: '',
+    component: BlankComponent,
+    children: [
+      {
+        path: 'authentication',
+        loadChildren: () =>
+          import('./pages/authentication/authentication.routes').then(
+            (m) => m.AuthenticationRoutes
+          ),
+      },
+    ],
+  },
+  {
+    path: '**',
+    redirectTo: 'authentication/error',
+  },
+];
--- a/Web/themes/modernize/src/app/components/blog-card/blog-card.component.html
+++ b/Web/themes/modernize/src/app/components/blog-card/blog-card.component.html
@@ -0,0 +1,32 @@
+<div class="row">
+    @for(productcard of productcards; track productcards) {
+    <div class="col-sm-6 col-lg-3">
+        <mat-card class="cardWithShadow productcard overflow-hidden">
+            <a routerLink="/widgets/cards">
+                <img src="{{ productcard.imgSrc }}" alt="imgSrc" class="w-100" mat-card-image />
+            </a>
+            <mat-card-content class="p-b-24 p-t-12 position-relative">
+                <button mat-mini-fab class="icon-30 cart-btn bg-primary text-white d-block" matTooltip="Add to Cart">
+                    <i-tabler name="basket" class="icon-16"></i-tabler>
+                </button>
+                <mat-card-title class="mat-headline-2 f-s-16 m-b-4">{{
+                    productcard.title
+                    }}</mat-card-title>
+                <div class="d-flex align-items-center justify-content-between">
+                    <div class="d-flex align-items-center">
+                        <h6 class="f-w-600 f-s-16">${{ productcard.price }}</h6>
+                        <span class="f-s-14 m-l-4 text-decoration-line-through">${{ productcard.rprice }}</span>
+                    </div>
+                    <div class="m-l-auto d-flex gap-4">
+                        <span><i-tabler name="star" class="fill-warning icon-18"></i-tabler></span>
+                        <span><i-tabler name="star" class="fill-warning icon-18"></i-tabler></span>
+                        <span><i-tabler name="star" class="fill-warning icon-18"></i-tabler></span>
+                        <span><i-tabler name="star" class="fill-warning icon-18"></i-tabler></span>
+                        <span><i-tabler name="star" class="fill-warning icon-18"></i-tabler></span>
+                    </div>
+                </div>
+            </mat-card-content>
+        </mat-card>
+    </div>
+    }
+</div>
--- a/Web/themes/modernize/src/app/components/blog-card/blog-card.component.ts
+++ b/Web/themes/modernize/src/app/components/blog-card/blog-card.component.ts
@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { TablerIconsModule } from 'angular-tabler-icons';
+
+// ecommerce card
+interface productCards {
+    id: number;
+    imgSrc: string;
+    title: string;
+    price: string;
+    rprice: string;
+}
+
+@Component({
+    selector: 'app-blog-card',
+    imports: [MatCardModule, TablerIconsModule, MatButtonModule],
+    templateUrl: './blog-card.component.html',
+})
+export class AppBlogCardsComponent {
+    constructor() { }
+
+    productcards: productCards[] = [
+        {
+            id: 1,
+            imgSrc: '/assets/images/products/s4.jpg',
+            title: 'Boat Headphone',
+            price: '285',
+            rprice: '375',
+        },
+        {
+            id: 2,
+            imgSrc: '/assets/images/products/s5.jpg',
+            title: 'MacBook Air Pro',
+            price: '285',
+            rprice: '375',
+        },
+        {
+            id: 3,
+            imgSrc: '/assets/images/products/s7.jpg',
+            title: 'Red Valvet Dress',
+            price: '285',
+            rprice: '375',
+        },
+        {
+            id: 4,
+            imgSrc: '/assets/images/products/s11.jpg',
+            title: 'Cute Soft Teddybear',
+            price: '285',
+            rprice: '375',
+        },
+    ];
+}
--- a/Web/themes/modernize/src/app/components/monthly-earnings/monthly-earnings.component.html
+++ b/Web/themes/modernize/src/app/components/monthly-earnings/monthly-earnings.component.html
@@ -0,0 +1,24 @@
+<mat-card class="cardWithShadow overflow-hidden">
+    <mat-card-content class="p-b-0">
+        <div class="d-flex align-items-center m-b-8">
+            <mat-card-title>Monthly Earnings</mat-card-title>
+            <div class="m-l-auto">
+                <button mat-fab class="icon-48 bg-secondary ">
+                    <i-tabler name="currency-dollar" class="text-white d-flex"></i-tabler>
+                </button>
+            </div>
+        </div>
+        <h4 class="f-s-24 m-b-6">$6,820</h4>
+        <div class="d-flex align-items-center m-t-16">
+            <button mat-mini-fab class="bg-light-error text-error shadow-none icon-27 p-0 d-flex align-items-center justify-content-center">
+                <i-tabler name="arrow-down-right" class="icon-20 d-flex align-items-center"></i-tabler>
+            </button>
+            <div class="f-s-14 f-w-600 m-l-12">+9%</div>
+            <div class="f-s-14 m-l-4">last year</div>
+        </div>
+    </mat-card-content>
+    <apx-chart [series]="monthlyChart.series" [dataLabels]="monthlyChart.dataLabels" [chart]="monthlyChart.chart"
+        [legend]="monthlyChart.legend" [colors]="monthlyChart.colors" [stroke]="monthlyChart.stroke"
+        [tooltip]="monthlyChart.tooltip" [plotOptions]="monthlyChart.plotOptions"
+        [responsive]="monthlyChart.responsive"></apx-chart>
+</mat-card>
--- a/Web/themes/modernize/src/app/components/monthly-earnings/monthly-earnings.component.ts
+++ b/Web/themes/modernize/src/app/components/monthly-earnings/monthly-earnings.component.ts
@@ -0,0 +1,81 @@
+import { Component, ViewChild } from '@angular/core';
+import {
+    ApexChart,
+    ChartComponent,
+    ApexDataLabels,
+    ApexLegend,
+    ApexStroke,
+    ApexTooltip,
+    ApexAxisChartSeries,
+    ApexPlotOptions,
+    ApexResponsive,
+    NgApexchartsModule,
+} from 'ng-apexcharts';
+
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from 'src/app/material.module';
+
+export interface monthlyChart {
+    series: ApexAxisChartSeries;
+    chart: ApexChart;
+    dataLabels: ApexDataLabels;
+    plotOptions: ApexPlotOptions;
+    tooltip: ApexTooltip;
+    stroke: ApexStroke;
+    legend: ApexLegend;
+    responsive: ApexResponsive;
+}
+
+@Component({
+    selector: 'app-monthly-earnings',
+    imports: [NgApexchartsModule, MaterialModule, TablerIconsModule],
+    templateUrl: './monthly-earnings.component.html',
+})
+export class AppMonthlyEarningsComponent {
+    @ViewChild('chart') chart: ChartComponent = Object.create(null);
+    public monthlyChart!: Partial<monthlyChart> | any;
+
+    constructor() {
+        this.monthlyChart = {
+            series: [
+                {
+                    name: '',
+                    color: '#49BEFF',
+                    data: [25, 66, 20, 40, 12, 58, 20],
+                },
+            ],
+
+            chart: {
+                type: 'area',
+                fontFamily: "'Plus Jakarta Sans', sans-serif;",
+                foreColor: '#adb0bb',
+                toolbar: {
+                    show: false,
+                },
+                height: 85,
+                sparkline: {
+                    enabled: true,
+                },
+                group: 'sparklines',
+            },
+            stroke: {
+                curve: 'smooth',
+                width: 2,
+            },
+            fill: {
+                colors: ['#E8F7FF'],
+                type: 'solid',
+                opacity: 0.05,
+            },
+            markers: {
+                size: 0,
+            },
+            tooltip: {
+                theme: 'dark',
+                x: {
+                    show: false,
+                },
+            },
+        };
+    }
+}
--- a/Web/themes/modernize/src/app/components/product-performance/product-performance.component.html
+++ b/Web/themes/modernize/src/app/components/product-performance/product-performance.component.html
@@ -0,0 +1,98 @@
+<mat-card class="cardWithShadow">
+    <mat-card-content>
+        <div class="d-flex">
+            <div class="m-r-auto">
+                <mat-card-title>Top Projects</mat-card-title>
+                <mat-card-subtitle>Best Products</mat-card-subtitle>
+            </div>
+            <mat-form-field class="theme-select" appearance="outline">
+                <mat-select value="mar">
+                    @for(month of months; track month.value) {
+                    <mat-option [value]="month.value">
+                        {{ month.viewValue }}
+                    </mat-option>
+                    }
+                </mat-select>
+            </mat-form-field>
+        </div>
+        <div class="table-responsive">
+            <table mat-table [dataSource]="dataSource" class="w-100">
+                <!-- Position Column -->
+                <ng-container matColumnDef="product">
+                    <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14 p-l-0">
+                        Product
+                    </th>
+                    <td mat-cell *matCellDef="let element" class="p-l-0">
+                        <div class="d-flex align-items-center">
+                            <img [src]="element.imagePath" alt="users" width="48" class="rounded" />
+                            <div class="m-l-16">
+                                <h6 class="f-s-14 f-w-600">
+                                    {{ element.pname }}
+                                </h6>
+                                <span class=" f-s-12">
+                                    {{ element.category }}
+                                </span>
+                            </div>
+                        </div>
+                    </td>
+                </ng-container>
+
+                <!-- Name Column -->
+                <ng-container matColumnDef="progress">
+                    <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14">
+                        Progress
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        {{ element.progress }}%
+                    </td>
+                </ng-container>
+
+                <!-- Weight Column -->
+                <ng-container matColumnDef="status">
+                    <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14">
+                        Status
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        @if(element.status == 'low') {
+                        <span class="bg-light-success text-success rounded f-w-600 p-6 p-y-4 f-s-12">
+                            {{ element.status | titlecase }}
+                        </span>
+                        }
+
+                        @if(element.status == 'medium') {
+                        <span class="bg-light-warning text-warning rounded f-w-600 p-6 p-y-4 f-s-12">
+                            {{ element.status | titlecase }}
+                        </span>
+                        }
+
+                        @if(element.status == 'high') {
+                        <span class="bg-light-primary text-primary rounded f-w-600 p-6 p-y-4 f-s-12">
+                            {{ element.status | titlecase }}
+                        </span>
+                        }
+
+                        @if(element.status == 'critical') {
+                        <span class="bg-light-error text-error rounded f-w-600 p-6 p-y-4 f-s-12">
+                            {{ element.status | titlecase }}
+                        </span>
+                        }
+
+                    </td>
+                </ng-container>
+
+                <!-- Symbol Column -->
+                <ng-container matColumnDef="sales">
+                    <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14">
+                        Sales
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        ${{ element.sales }}k
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            </table>
+        </div>
+    </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/components/product-performance/product-performance.component.ts
+++ b/Web/themes/modernize/src/app/components/product-performance/product-performance.component.ts
@@ -0,0 +1,80 @@
+import { Component } from '@angular/core';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { CommonModule } from '@angular/common';
+import { MaterialModule } from 'src/app/material.module';
+
+export interface performanceData {
+  id: number;
+  imagePath: string;
+  pname: string;
+  category: string;
+  progress: number;
+  sales: number;
+  status: string;
+}
+
+const ELEMENT_DATA: performanceData[] = [
+  {
+    id: 1,
+    imagePath: 'assets/images/products/s6.jpg',
+    pname: 'Gaming Console',
+    category: 'Electronics',
+    progress: 78.5,
+    sales: 3.9,
+    status: 'low',
+  },
+  {
+    id: 2,
+    imagePath: 'assets/images/products/s9.jpg',
+    pname: 'Leather Purse',
+    category: 'Fashion',
+    progress: 58.6,
+    sales: 3.5,
+    status: 'medium',
+  },
+  {
+    id: 3,
+    imagePath: 'assets/images/products/s7.jpg',
+    pname: 'Red Velvate Dress',
+    category: 'Womens Fashion',
+    progress: 25,
+    sales: 3.8,
+    status: 'high',
+  },
+  {
+    id: 4,
+    imagePath: 'assets/images/products/s4.jpg',
+    pname: 'Headphone Boat',
+    category: 'Electronics',
+    progress: 96.3,
+    sales: 3.54,
+    status: 'critical',
+  },
+];
+
+interface month {
+  value: string;
+  viewValue: string;
+}
+
+@Component({
+  selector: 'app-product-performance',
+  imports: [
+    NgApexchartsModule,
+    MaterialModule,
+    TablerIconsModule,
+    CommonModule,
+  ],
+  templateUrl: './product-performance.component.html',
+})
+export class AppProductPerformanceComponent {
+  displayedColumns: string[] = ['product', 'progress', 'status', 'sales'];
+  dataSource = ELEMENT_DATA;
+
+  months: month[] = [
+    { value: 'mar', viewValue: 'March 2025' },
+    { value: 'apr', viewValue: 'April 2025' },
+    { value: 'june', viewValue: 'June 2025' },
+  ];
+}
--- a/Web/themes/modernize/src/app/components/recent-transactions/recent-transactions.component.html
+++ b/Web/themes/modernize/src/app/components/recent-transactions/recent-transactions.component.html
@@ -0,0 +1,33 @@
+<mat-card class="cardWithShadow">
+    <mat-card-content>
+        <mat-card-title>Recent Transactions</mat-card-title>
+
+        <div class="timeline m-t-24">
+            @for(stat of stats; track stat.title) {
+            <div class="timeline-item d-flex overflow-hidden">
+                <div class="time text-right f-s-14">{{ stat.time }}</div>
+                <div class="point d-flex align-items-center">
+                    <span class="timeline-badge border-{{ stat.color }} m-y-8"></span>
+                    <span class="timline-border d-block"></span>
+                </div>
+                <div class="desc">
+                    @if(stat.subtext) {
+                    <span class="f-s-14 lh-20">{{ stat.subtext }}</span>
+                    }
+
+                    @if(stat.title) {
+                    <span class="f-s-14 lh-20 f-w-600 d-block">{{
+                        stat.title
+                        }}</span>
+                    }
+
+                    @if(stat.link) {
+                    <a href="#" class="text-primary text-decoration-none f-s-14">#ML-3467</a>
+                    }
+
+                </div>
+            </div>
+            }
+        </div>
+    </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/components/recent-transactions/recent-transactions.component.ts
+++ b/Web/themes/modernize/src/app/components/recent-transactions/recent-transactions.component.ts
@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { MaterialModule } from 'src/app/material.module';
+
+
+interface stats {
+    id: number;
+    time: string;
+    color: string;
+    title?: string;
+    subtext?: string;
+    link?: string;
+}
+
+@Component({
+    selector: 'app-recent-transactions',
+    imports: [NgApexchartsModule, MaterialModule],
+    templateUrl: './recent-transactions.component.html',
+})
+export class AppRecentTransactionsComponent {
+    stats: stats[] = [
+        {
+            id: 1,
+            time: '09.30 am',
+            color: 'primary',
+            subtext: 'Payment received from John Doe of $385.90',
+        },
+        {
+            id: 2,
+            time: '10.30 am',
+            color: 'accent',
+            title: 'New sale recorded',
+            link: '#ML-3467',
+        },
+        {
+            id: 3,
+            time: '12.30 pm',
+            color: 'success',
+            subtext: 'Payment was made of $64.95 to Michael',
+        },
+        {
+            id: 4,
+            time: '12.30 pm',
+            color: 'warning',
+            title: 'New sale recorded',
+            link: '#ML-3467',
+        },
+        {
+            id: 5,
+            time: '12.30 pm',
+            color: 'error',
+            title: 'New arrival recorded',
+            link: '#ML-3467',
+        },
+        {
+            id: 6,
+            time: '12.30 pm',
+            color: 'success',
+            subtext: 'Payment Done',
+        },
+    ];
+}
--- a/Web/themes/modernize/src/app/components/sales-overview/sales-overview.component.html
+++ b/Web/themes/modernize/src/app/components/sales-overview/sales-overview.component.html
@@ -0,0 +1,22 @@
+<mat-card class="cardWithShadow">
+    <mat-card-content>
+        <div class="d-flex w-100">
+            <mat-card-title>Sales Overview</mat-card-title>
+            <div class="m-l-auto">
+                <mat-form-field class="theme-select" appearance="outline">
+                    <mat-select value="mar">
+                        @for(month of months; track month.viewValue ) {
+                        <mat-option [value]="month.value">
+                            {{ month.viewValue }}
+                        </mat-option>
+                        }
+                    </mat-select>
+                </mat-form-field>
+            </div>
+        </div>
+        <apx-chart [series]="salesOverviewChart.series" [dataLabels]="salesOverviewChart.dataLabels"
+            [chart]="salesOverviewChart.chart" [legend]="salesOverviewChart.legend" [xaxis]="salesOverviewChart.xaxis"
+            [yaxis]="salesOverviewChart.yaxis" [grid]="salesOverviewChart.grid" [stroke]="salesOverviewChart.stroke"
+            [tooltip]="salesOverviewChart.tooltip" [plotOptions]="salesOverviewChart.plotOptions"></apx-chart>
+    </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/components/sales-overview/sales-overview.component.ts
+++ b/Web/themes/modernize/src/app/components/sales-overview/sales-overview.component.ts
@@ -0,0 +1,153 @@
+import { Component, ViewChild } from '@angular/core';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from 'src/app/material.module';
+
+import {
+  ApexChart,
+  ChartComponent,
+  ApexDataLabels,
+  ApexLegend,
+  ApexStroke,
+  ApexTooltip,
+  ApexAxisChartSeries,
+  ApexXAxis,
+  ApexYAxis,
+  ApexGrid,
+  ApexPlotOptions,
+  ApexFill,
+  ApexMarkers,
+  ApexResponsive,
+  NgApexchartsModule,
+} from 'ng-apexcharts';
+import { MatButtonModule } from '@angular/material/button';
+
+interface month {
+  value: string;
+  viewValue: string;
+}
+
+export interface salesOverviewChart {
+  series: ApexAxisChartSeries;
+  chart: ApexChart;
+  dataLabels: ApexDataLabels;
+  plotOptions: ApexPlotOptions;
+  yaxis: ApexYAxis;
+  xaxis: ApexXAxis;
+  fill: ApexFill;
+  tooltip: ApexTooltip;
+  stroke: ApexStroke;
+  legend: ApexLegend;
+  grid: ApexGrid;
+  marker: ApexMarkers;
+}
+
+@Component({
+  selector: 'app-sales-overview',
+  imports: [MaterialModule, TablerIconsModule, NgApexchartsModule, MatButtonModule],
+  templateUrl: './sales-overview.component.html',
+})
+export class AppSalesOverviewComponent {
+
+  @ViewChild('chart') chart: ChartComponent = Object.create(null);
+
+  public salesOverviewChart!: Partial<salesOverviewChart> | any;
+
+  months: month[] = [
+    { value: 'mar', viewValue: 'Sep 2025' },
+    { value: 'apr', viewValue: 'Oct 2025' },
+    { value: 'june', viewValue: 'Nov 2025' },
+  ];
+
+
+  constructor() {
+
+    // sales overview chart
+    this.salesOverviewChart = {
+      series: [
+        {
+          name: 'Eanings this month',
+          data: [355, 390, 300, 350, 390, 180, 355, 390],
+          color: '#5D87FF',
+        },
+        {
+          name: 'Expense this month',
+          data: [280, 250, 325, 215, 250, 310, 280, 250],
+          color: '#49BEFF',
+        },
+      ],
+
+      grid: {
+        borderColor: 'rgba(0,0,0,0.1)',
+        strokeDashArray: 3,
+        xaxis: {
+          lines: {
+            show: false,
+          },
+        },
+      },
+      plotOptions: {
+        bar: { horizontal: false, columnWidth: '35%', borderRadius: [4] },
+      },
+      chart: {
+        type: 'bar',
+        height: 390,
+        offsetX: -15,
+        toolbar: { show: false },
+        foreColor: '#adb0bb',
+        fontFamily: 'inherit',
+        sparkline: { enabled: false },
+      },
+      dataLabels: { enabled: false },
+      markers: { size: 0 },
+      legend: { show: false },
+      xaxis: {
+        type: 'category',
+        categories: [
+          '16/08',
+          '17/08',
+          '18/08',
+          '19/08',
+          '20/08',
+          '21/08',
+          '22/08',
+          '23/08',
+        ],
+        labels: {
+          style: { cssClass: 'grey--text lighten-2--text fill-color' },
+        },
+      },
+      yaxis: {
+        show: true,
+        min: 0,
+        max: 400,
+        tickAmount: 4,
+        labels: {
+          style: {
+            cssClass: 'grey--text lighten-2--text fill-color',
+          },
+        },
+      },
+      stroke: {
+        show: true,
+        width: 3,
+        lineCap: 'butt',
+        colors: ['transparent'],
+      },
+      tooltip: { theme: 'light' },
+
+      responsive: [
+        {
+          breakpoint: 600,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 3,
+              },
+            },
+          },
+        },
+      ],
+    };
+
+  }
+}
--- a/Web/themes/modernize/src/app/components/yearly-breakup/yearly-breakup.component.html
+++ b/Web/themes/modernize/src/app/components/yearly-breakup/yearly-breakup.component.html
@@ -0,0 +1,34 @@
+<mat-card class="cardWithShadow">
+    <mat-card-content>
+        <mat-card-title>Yearly Breakup</mat-card-title>
+        <div class="row m-t-24">
+            <div class="col-7">
+                <h4 class="f-s-24">$36,358</h4>
+                <div class="d-flex align-items-center m-t-16">
+                    <button mat-icon-button class="bg-light-success text-success shadow-none icon-27 p-0 d-flex align-items-center justify-content-center">
+                        <i-tabler name="arrow-up-right" class="icon-20 d-flex align-items-center"></i-tabler>
+                    </button>
+                    <div class="f-w-600 m-l-12 f-s-14">+9%</div>
+                    <div class="m-l-4 f-s-14">last year</div>
+                </div>
+
+                <div class="d-flex align-items-center m-t-32">
+                    <div class="d-flex align-items-center">
+                        <i-tabler name="circle-filled" class="text-primary icon-12 d-flex"></i-tabler>
+                        <div class="m-l-12 f-s-14">2025</div>
+                    </div>
+                    <div class="d-flex align-items-center m-l-16">
+                        <i-tabler name="circle-filled" class="text-light-primary icon-12 d-flex"></i-tabler>
+                        <div class="m-l-12 f-s-14">2024</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-5 d-flex align-items-start">
+                <apx-chart [series]="yearlyChart.series" [dataLabels]="yearlyChart.dataLabels"
+                    [chart]="yearlyChart.chart" [legend]="yearlyChart.legend" [colors]="yearlyChart.colors"
+                    [stroke]="yearlyChart.stroke" [tooltip]="yearlyChart.tooltip"
+                    [plotOptions]="yearlyChart.plotOptions" [responsive]="yearlyChart.responsive"></apx-chart>
+            </div>
+        </div>
+    </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/components/yearly-breakup/yearly-breakup.component.ts
+++ b/Web/themes/modernize/src/app/components/yearly-breakup/yearly-breakup.component.ts
@@ -0,0 +1,101 @@
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import {
+    ApexChart,
+    ChartComponent,
+    ApexDataLabels,
+    ApexLegend,
+    ApexStroke,
+    ApexTooltip,
+    ApexAxisChartSeries,
+    ApexXAxis,
+    ApexYAxis,
+    ApexGrid,
+    ApexPlotOptions,
+    ApexFill,
+    ApexMarkers,
+    ApexResponsive,
+    NgApexchartsModule,
+} from 'ng-apexcharts';
+import { MaterialModule } from 'src/app/material.module';
+
+
+export interface yearlyChart {
+    series: ApexAxisChartSeries;
+    chart: ApexChart;
+    dataLabels: ApexDataLabels;
+    plotOptions: ApexPlotOptions;
+    tooltip: ApexTooltip;
+    stroke: ApexStroke;
+    legend: ApexLegend;
+    responsive: ApexResponsive;
+}
+
+
+
+@Component({
+    selector: 'app-yearly-breakup',
+    templateUrl: './yearly-breakup.component.html',
+    imports: [MaterialModule, NgApexchartsModule, TablerIconsModule],
+    encapsulation: ViewEncapsulation.None,
+})
+export class AppYearlyBreakupComponent {
+    @ViewChild('chart') chart: ChartComponent = Object.create(null);
+
+    public yearlyChart!: Partial<yearlyChart> | any;
+
+
+    constructor() {
+
+        this.yearlyChart = {
+
+            color: "#adb5bd",
+            series: [38, 40, 25],
+            labels: ["2025", "2024", "2023"],
+            chart: {
+                width: 125,
+                type: "donut",
+                fontFamily: "inherit",
+                foreColor: "#adb0bb",
+            },
+            plotOptions: {
+                pie: {
+                    startAngle: 0,
+                    endAngle: 360,
+                    donut: {
+                        size: "75%",
+                    },
+                },
+            },
+            stroke: {
+                show: false,
+            },
+
+            dataLabels: {
+                enabled: false,
+            },
+
+            legend: {
+                show: false,
+            },
+            colors: ['#5D87FF', '#ECF2FF', '#F9F9FD'],
+
+            responsive: [
+                {
+                    breakpoint: 991,
+                    options: {
+                        chart: {
+                            width: 120,
+                        },
+                    },
+                },
+            ],
+            tooltip: {
+                theme: "dark",
+                fillSeriesColor: false,
+            },
+        };
+
+
+    }
+}
--- a/Web/themes/modernize/src/app/config.ts
+++ b/Web/themes/modernize/src/app/config.ts
@@ -0,0 +1,11 @@
+export interface AppSettings {
+
+  sidenavOpened: boolean;
+  sidenavCollapsed: boolean;
+
+}
+
+export const defaults: AppSettings = {
+  sidenavOpened: false,
+  sidenavCollapsed: false,
+};
--- a/Web/themes/modernize/src/app/layouts/blank/blank.component.html
+++ b/Web/themes/modernize/src/app/layouts/blank/blank.component.html
@@ -0,0 +1,6 @@
+<!-- ============================================================== -->
+<!-- Only router without any element -->
+<!-- ============================================================== -->
+<mat-sidenav-container dir="ltr" class="light-theme">
+  <router-outlet></router-outlet>
+</mat-sidenav-container>
--- a/Web/themes/modernize/src/app/layouts/blank/blank.component.ts
+++ b/Web/themes/modernize/src/app/layouts/blank/blank.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { CoreService } from 'src/app/services/core.service';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+import { MaterialModule } from 'src/app/material.module';
+
+@Component({
+  selector: 'app-blank',
+  templateUrl: './blank.component.html',
+  styleUrls: [],
+  imports: [RouterOutlet, MaterialModule, CommonModule],
+})
+export class BlankComponent {
+  private htmlElement!: HTMLHtmlElement;
+
+  options = this.settings.getOptions();
+
+  constructor(private settings: CoreService) {
+    this.htmlElement = document.querySelector('html')!;
+  }
+
+
+}
--- a/Web/themes/modernize/src/app/layouts/full/full.component.html
+++ b/Web/themes/modernize/src/app/layouts/full/full.component.html
@@ -0,0 +1,59 @@
+
+<app-topstrip></app-topstrip>
+<mat-sidenav-container class="mainWrapper blue_theme light-theme" autosize autoFocus dir="ltr">
+  <!-- ============================================================== -->
+  <!-- Vertical Sidebar -->
+  <!-- ============================================================== -->
+  <mat-sidenav #leftsidenav [mode]="isOver ? 'over' : 'side'" [opened]="!isOver"
+    (openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
+    <div class="flex-layout">
+      <app-sidebar (toggleMobileNav)="sidenav.toggle()" [showToggle]="isOver"></app-sidebar>
+      <ng-scrollbar class="position-relative" style="height: 100%">
+        <mat-nav-list class="sidebar-list">
+          @for(item of navItems; track item) {
+          <app-nav-item [item]="item" (notify)="sidenav.toggle()">
+          </app-nav-item>
+          }
+        </mat-nav-list>
+      </ng-scrollbar>
+      <div class="p-24">
+        <div class="bg-light-secondary d-flex align-items-center gap-4 rounded p-20 m-t-20">
+          <div>
+            <h5 class="f-s-16 f-w-600 m-b-8">
+              Check Pro <br> Version
+            </h5>
+            <a mat-flat-button
+              href="https://adminmart.com/product/modernize-angular-material-dashboard/?ref=56#product-demo-section" target="_blank"
+              class="d-flex justify-content-center bg-secondary">
+              Check
+            </a>
+          </div>
+          <img src="/assets/images/backgrounds/rocket.png" alt="imgae" class="side-img m-t--48 m-r--8" />
+        </div>
+      </div>
+    </div>
+  </mat-sidenav>
+  
+  <!-- ============================================================== -->
+  <!-- Main Content -->
+  <!-- ============================================================== -->
+  <mat-sidenav-content class="contentWrapper" #content>
+    <!-- ============================================================== -->
+    <!-- VerticalHeader -->
+    <!-- ============================================================== -->
+    
+    <app-header [showToggle]="!isOver" (toggleMobileNav)="sidenav.toggle()"></app-header>
+    
+    <main class="pageWrapper maxWidth">
+      <!-- ============================================================== -->
+      <!-- Outlet -->
+      <!-- ============================================================== -->
+      <router-outlet></router-outlet>
+    </main>
+
+    <div class="p-16 p-b-30 text-center">
+      Design & Developed by <a class="text-decoration-none" href="https://adminmart.com/" target="_blank">AdminMart.com</a> 
+    </div>
+  </mat-sidenav-content>
+
+</mat-sidenav-container>
--- a/Web/themes/modernize/src/app/layouts/full/full.component.ts
+++ b/Web/themes/modernize/src/app/layouts/full/full.component.ts
@@ -0,0 +1,117 @@
+import { BreakpointObserver, MediaMatcher } from '@angular/cdk/layout';
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { MatSidenav, MatSidenavContent } from '@angular/material/sidenav';
+import { CoreService } from 'src/app/services/core.service';
+
+import { filter } from 'rxjs/operators';
+import { NavigationEnd, Router } from '@angular/router';
+import { NavService } from '../../services/nav.service';
+import { RouterModule } from '@angular/router';
+import { MaterialModule } from 'src/app/material.module';
+import { CommonModule } from '@angular/common';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { HeaderComponent } from './header/header.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { AppNavItemComponent } from './sidebar/nav-item/nav-item.component';
+import { navItems } from './sidebar/sidebar-data';
+import { AppTopstripComponent } from './top-strip/topstrip.component';
+
+
+const MOBILE_VIEW = 'screen and (max-width: 768px)';
+const TABLET_VIEW = 'screen and (min-width: 769px) and (max-width: 1024px)';
+
+
+@Component({
+  selector: 'app-full',
+  imports: [
+    RouterModule,
+    AppNavItemComponent,
+    MaterialModule,
+    CommonModule,
+    SidebarComponent,
+    NgScrollbarModule,
+    TablerIconsModule,
+    HeaderComponent,
+    AppTopstripComponent
+  ],
+  templateUrl: './full.component.html',
+  styleUrls: [],
+  encapsulation: ViewEncapsulation.None
+})
+export class FullComponent implements OnInit {
+  navItems = navItems;
+
+  @ViewChild('leftsidenav')
+  public sidenav: MatSidenav;
+  resView = false;
+  @ViewChild('content', { static: true }) content!: MatSidenavContent;
+  //get options from service
+  options = this.settings.getOptions();
+  private layoutChangesSubscription = Subscription.EMPTY;
+  private isMobileScreen = false;
+  private isContentWidthFixed = true;
+  private isCollapsedWidthFixed = false;
+  private htmlElement!: HTMLHtmlElement;
+
+  get isOver(): boolean {
+    return this.isMobileScreen;
+  }
+
+
+  constructor(
+    private settings: CoreService,
+    private router: Router,
+    private breakpointObserver: BreakpointObserver,
+  ) {
+    this.htmlElement = document.querySelector('html')!;
+    this.layoutChangesSubscription = this.breakpointObserver
+      .observe([MOBILE_VIEW, TABLET_VIEW])
+      .subscribe((state) => {
+        // SidenavOpened must be reset true when layout changes
+        this.options.sidenavOpened = true;
+        this.isMobileScreen = state.breakpoints[MOBILE_VIEW];
+        if (this.options.sidenavCollapsed == false) {
+          this.options.sidenavCollapsed = state.breakpoints[TABLET_VIEW];
+        }
+      });
+
+    // Initialize project theme with options
+
+
+    // This is for scroll to top
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe((e) => {
+        this.content.scrollTo({ top: 0 });
+      });
+  }
+
+  ngOnInit(): void { }
+
+  ngOnDestroy() {
+    this.layoutChangesSubscription.unsubscribe();
+  }
+
+  toggleCollapsed() {
+    this.isContentWidthFixed = false;
+    this.options.sidenavCollapsed = !this.options.sidenavCollapsed;
+    this.resetCollapsedState();
+  }
+
+  resetCollapsedState(timer = 400) {
+    setTimeout(() => this.settings.setOptions(this.options), timer);
+  }
+
+  onSidenavClosedStart() {
+    this.isContentWidthFixed = false;
+  }
+
+  onSidenavOpenedChange(isOpened: boolean) {
+    this.isCollapsedWidthFixed = !this.isOver;
+    this.options.sidenavOpened = isOpened;
+    //this.settings.setOptions(this.options);
+  }
+
+}
--- a/Web/themes/modernize/src/app/layouts/full/header/header.component.html
+++ b/Web/themes/modernize/src/app/layouts/full/header/header.component.html
@@ -0,0 +1,48 @@
+<mat-toolbar class="topbar gap-10">
+
+  <!-- Mobile Menu -->
+  
+  <button mat-icon-button (click)="toggleMobileNav.emit()" class="d-flex d-lg-none justify-content-center">
+    <i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
+  </button>
+
+  <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Notifications">
+    <i-tabler class="d-flex" name="bell" matBadge="1" matBadgeColor="primary"></i-tabler>
+  </button>
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item>Item 1</button>
+    <button mat-menu-item>Item 2</button>
+  </mat-menu>
+
+
+  <span class="flex-1-auto"></span>
+
+  <!-- --------------------------------------------------------------- -->
+  <!-- profile Dropdown -->
+  <!-- --------------------------------------------------------------- -->
+  <a mat-flat-button href="https://adminmart.com/product/modernize-angular-admin-dashboard/?ref=56#product-demo-section"
+    target="_blank" class="d-flex justify-content-center bg-success">
+    Check Pro Template
+  </a>
+  <button mat-mini-fab [matMenuTriggerFor]="profilemenu" aria-label="Notifications">
+    <img src="/assets/images/profile/user-1.jpg" class="rounded-circle object-cover d-block" width="35" />
+  </button>
+  <mat-menu #profilemenu="matMenu" class="cardWithShadow topbar-dd">
+    <button mat-menu-item>
+      <mat-icon class="d-flex align-items-center"><i-tabler name="user" class="icon-18 d-flex"></i-tabler></mat-icon>My
+      Profile
+    </button>
+    <button mat-menu-item>
+      <mat-icon class="d-flex align-items-center"><i-tabler name="mail" class="icon-18 d-flex"></i-tabler></mat-icon>My
+      Account
+    </button>
+    <button mat-menu-item>
+      <mat-icon class="d-flex align-items-center"><i-tabler name="list-check"
+          class="icon-18 d-flex"></i-tabler></mat-icon>My Task
+    </button>
+
+    <div class="p-x-12 m-t-12">
+      <a [routerLink]="['/authentication/login']" mat-stroked-button class="w-100">Logout</a>
+    </div>
+  </mat-menu>
+</mat-toolbar>
--- a/Web/themes/modernize/src/app/layouts/full/header/header.component.ts
+++ b/Web/themes/modernize/src/app/layouts/full/header/header.component.ts
@@ -0,0 +1,30 @@
+import {
+  Component,
+  Output,
+  EventEmitter,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from 'src/app/material.module';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+
+@Component({
+  selector: 'app-header',
+  imports: [
+    RouterModule,
+    CommonModule,
+    NgScrollbarModule,
+    TablerIconsModule,
+    MaterialModule,
+  ],
+  templateUrl: './header.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class HeaderComponent {
+  @Input() showToggle = true;
+  @Input() toggleChecked = false;
+  @Output() toggleMobileNav = new EventEmitter<void>();
+}
--- a/Web/themes/modernize/src/app/layouts/full/sidebar/branding.component.ts
+++ b/Web/themes/modernize/src/app/layouts/full/sidebar/branding.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { CoreService } from 'src/app/services/core.service';
+
+@Component({
+  selector: 'app-branding',
+  imports: [],
+  template: `
+    <a href="/" class="logodark">
+      <img
+        src="./assets/images/logos/dark-logo.svg"
+        class="align-middle m-2"
+        alt="logo"
+      />
+    </a>
+  `,
+})
+export class BrandingComponent {
+  options = this.settings.getOptions();
+  constructor(private settings: CoreService) {}
+}
--- a/Web/themes/modernize/src/app/layouts/full/sidebar/nav-item/nav-item.component.html
+++ b/Web/themes/modernize/src/app/layouts/full/sidebar/nav-item/nav-item.component.html
@@ -0,0 +1,48 @@
+@if(item.navCap){
+<div mat-subheader class="nav-caption">
+  {{ item.navCap }}
+</div>
+} @if(!item.navCap && !item.external) {
+<a mat-list-item (click)="onItemSelected(item)" [ngClass]="{
+    activeMenu: item.route ? router.isActive(item.route, true) : false,
+    expanded: expanded,
+    disabled: item.disabled
+  }" class="menu-list-item">
+  <i-tabler class="routeIcon" name="{{ item.iconName }}" matListItemIcon></i-tabler>
+  <span class="hide-menu">{{ item.displayName }}</span>
+  
+  @if(item.children && item.children.length) {
+  <span class="arrow-icon" fxFlex>
+    <span fxFlex></span>
+    @if(item.chip) {
+      <span>
+        <span class="{{ item.chipClass }} p-x-8 p-y-4 item-chip f-w-500 rounded-pill ">{{ item.chipContent }}</span>
+      </span>
+      }
+    <mat-icon [@indicatorRotate]="expanded ? 'expanded' : 'collapsed'">
+      expand_more
+    </mat-icon>
+  </span>
+  }
+</a>
+}
+
+<!-- external Link -->
+
+@if(!item.navCap && item.external) {
+<mat-list-item (click)="openExternalLink(item.route)" class="menu-list-item" target="_blank">
+  <i-tabler class="routeIcon" name="{{ item.iconName }}" matListItemIcon></i-tabler>
+  <span class="hide-menu">{{ item.displayName }} </span>
+  @if(item.chip) {
+  <span>
+    <span class="{{ item.chipClass }} p-x-8 p-y-4 item-chip f-w-500 rounded-pill ">{{ item.chipContent }}</span>
+  </span>
+  }
+</mat-list-item>
+}
+
+<!-- children -->
+@if(expanded) { @for(child of item.children; track child) {
+<app-nav-item [item]="child" (click)="onSubItemSelected(child)" [depth]="depth + 1">
+</app-nav-item>
+} }
--- a/Web/themes/modernize/src/app/layouts/full/sidebar/nav-item/nav-item.component.ts
+++ b/Web/themes/modernize/src/app/layouts/full/sidebar/nav-item/nav-item.component.ts
@@ -0,0 +1,77 @@
+import {
+  Component,
+  HostBinding,
+  Input,
+  OnChanges,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { NavItem } from './nav-item';
+import { Router } from '@angular/router';
+import { NavService } from '../../../../services/nav.service';
+
+import { TranslateModule } from '@ngx-translate/core';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from 'src/app/material.module';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-nav-item',
+  imports: [TranslateModule, TablerIconsModule, MaterialModule, CommonModule],
+  templateUrl: './nav-item.component.html',
+  styleUrls: [],
+})
+export class AppNavItemComponent implements OnChanges {
+  @Output() notify: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  @Input() item: NavItem | any;
+
+  expanded: any = false;
+
+  @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
+  @Input() depth: any;
+
+  constructor(public navService: NavService, public router: Router) {}
+
+  ngOnChanges() {
+    const url = this.navService.currentUrl();
+    if (this.item.route && url) {
+      this.expanded = url.indexOf(`/${this.item.route}`) === 0;
+      this.ariaExpanded = this.expanded;
+    }
+  }
+
+  onItemSelected(item: NavItem) {
+    if (!item.children || !item.children.length) {
+      this.router.navigate([item.route]);
+    }
+    if (item.children && item.children.length) {
+      this.expanded = !this.expanded;
+    }
+    //scroll
+    window.scroll({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
+    if (!this.expanded) {
+      if (window.innerWidth < 1024) {
+        this.notify.emit();
+      }
+    }
+  }
+
+  openExternalLink(url: string): void {
+    if (url) {
+      window.open(url, '_blank');
+    }
+  }
+
+  onSubItemSelected(item: NavItem) {
+    if (!item.children || !item.children.length) {
+      if (this.expanded && window.innerWidth < 1024) {
+        this.notify.emit();
+      }
+    }
+  }
+}
--- a/Web/themes/modernize/src/app/layouts/full/sidebar/nav-item/nav-item.ts
+++ b/Web/themes/modernize/src/app/layouts/full/sidebar/nav-item/nav-item.ts
@@ -0,0 +1,11 @@
+export interface NavItem {
+    displayName?: string;
+    iconName?: string;
+    navCap?: string;
+    route?: string;
+    children?: NavItem[];
+    chip?: boolean;
+    chipContent?: string;
+    chipClass?: string;
+    external?: boolean;
+}
--- a/Web/themes/modernize/src/app/layouts/full/sidebar/sidebar-data.ts
+++ b/Web/themes/modernize/src/app/layouts/full/sidebar/sidebar-data.ts
@@ -0,0 +1,914 @@
+import { NavItem } from './nav-item/nav-item';
+
+export const navItems: NavItem[] = [
+  {
+    navCap: 'Home',
+  },
+  {
+    displayName: 'Dashboard',
+    iconName: 'layout-grid-add',
+    route: '/dashboard',
+  },
+  {
+    displayName: 'Analytical',
+    iconName: 'aperture',
+    route: 'https://modernize-angular-main.netlify.app/dashboards/dashboard1',
+    chip: true,
+    external: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'eCommerce',
+    iconName: 'shopping-cart',
+    route: 'https://modernize-angular-main.netlify.app/dashboards/dashboard2',
+    chip: true,
+    external: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+
+  {
+    navCap: 'Apps',
+  },
+  {
+    displayName: 'Chat',
+    iconName: 'message-dots',
+    route: 'https://modernize-angular-main.netlify.app/apps/chat',
+    chip: true,
+    external: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Calendar',
+    iconName: 'calendar',
+    route: 'https://modernize-angular-main.netlify.app/apps/calendar',
+    chip: true,
+    external: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Email',
+    iconName: 'mail',
+    route: 'https://modernize-angular-main.netlify.app/apps/email/inbox',
+    chip: true,
+    external: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Kanban',
+    iconName: 'checklist',
+    route: 'https://modernize-angular-main.netlify.app/apps/kanban',
+    chip: true,
+    external: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Contacts',
+    iconName: 'phone',
+    route: 'https://modernize-angular-main.netlify.app/apps/contacts',
+    chip: true,
+    external: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Contact List',
+    iconName: 'list-details',
+    route: 'https://modernize-angular-main.netlify.app/apps/contact-list',
+    chip: true,
+    external: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Courses',
+    iconName: 'certificate',
+    route: 'https://modernize-angular-main.netlify.app/apps/courses',
+    chip: true,
+    external: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Employee',
+    iconName: 'brand-ctemplar',
+    route: 'https://modernize-angular-main.netlify.app/apps/employee',
+    chip: true,
+    external: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Notes',
+    iconName: 'note',
+    route: 'https://modernize-angular-main.netlify.app/apps/notes',
+    chip: true,
+    external: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Tickets',
+    iconName: 'ticket',
+    route: 'https://modernize-angular-main.netlify.app/apps/tickets',
+    chip: true,
+    external: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'ToDo',
+    iconName: 'edit',
+    route: 'https://modernize-angular-main.netlify.app/apps/todo',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Invoice',
+    iconName: 'file-invoice',
+    chip: true,
+    route: '',
+    children: [
+      {
+        displayName: 'List',
+        iconName: 'point',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+        route: '/https://modernize-angular-main.netlify.app/apps/invoice',
+      },
+      {
+        displayName: 'Detail',
+        iconName: 'point',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+        route:
+          '/https://modernize-angular-main.netlify.app/apps/viewInvoice/101',
+      },
+      {
+        displayName: 'Create',
+        iconName: 'point',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+        route: '/https://modernize-angular-main.netlify.app/apps/addInvoice',
+      },
+      {
+        displayName: 'Edit',
+        iconName: 'point',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+        route:
+          '/https://modernize-angular-main.netlify.app/apps/editinvoice/101',
+      },
+    ],
+  },
+  
+  {
+    displayName: 'Blog',
+    iconName: 'chart-donut-3',
+    chip: true,
+    route: 'apps/blog',
+    children: [
+      {
+        displayName: 'Post',
+        iconName: 'point',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+        route: 'https://modernize-angular-main.netlify.app/apps/blog/post',
+      },
+      {
+        displayName: 'Detail',
+        iconName: 'point',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+        route:
+          'https://modernize-angular-main.netlify.app/apps/blog/detail/Early Black Friday Amazon deals: cheap TVs, headphones, laptops',
+      },
+    ],
+  },
+
+  {
+    navCap: 'Ui Components',
+  },
+  {
+    displayName: 'Badge',
+    iconName: 'archive',
+    route: '/ui-components/badge',
+  },
+  {
+    displayName: 'Chips',
+    iconName: 'info-circle',
+    route: '/ui-components/chips',
+  },
+  {
+    displayName: 'Lists',
+    iconName: 'list-details',
+    route: '/ui-components/lists',
+  },
+  {
+    displayName: 'Menu',
+    iconName: 'file-text',
+    route: '/ui-components/menu',
+  },
+  {
+    displayName: 'Tooltips',
+    iconName: 'file-text-ai',
+    route: '/ui-components/tooltips',
+  },
+  {
+    displayName: 'Forms',
+    iconName: 'clipboard-text',
+    route: '/ui-components/forms',
+  },
+  {
+    displayName: 'Tables',
+    iconName: 'table',
+    route: '/ui-components/tables',
+  },
+  {
+    displayName: 'Expansion Panel',
+    iconName: 'layout-bottombar-inactive',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/expansion',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Dialog',
+    iconName: 'diabolo',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/dialog',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Divider',
+    iconName: 'separator',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/divider',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Paginator',
+    iconName: 'text-wrap',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/paginator',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Progress Bar',
+    iconName: 'progress',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/progress',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Progress Spinner',
+    iconName: 'rotate-2',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/progress-spinner',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Ripples',
+    iconName: 'ripple',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/ripples',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Slide Toggle',
+    iconName: 'toggle-left',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/slide-toggle',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Slider',
+    iconName: 'adjustments-alt',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/slider',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Snackbar',
+    iconName: 'stack-backward',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/snackbar',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Tabs',
+    iconName: 'border-all',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/tabs',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Toolbar',
+    iconName: 'tools-kitchen',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/toolbar',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Tooltips',
+    iconName: 'tooltip',
+    route: 'https://modernize-angular-main.netlify.app/ui-components/tooltips',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+
+  {
+    navCap: 'Pages',
+  },
+  {
+    displayName: 'Roll Base Access',
+    iconName: 'lock-access',
+    route: 'https://modernize-angular-main.netlify.app/apps/permission',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Treeview',
+    iconName: 'git-merge',
+    route: 'https://modernize-angular-main.netlify.app/theme-pages/treeview',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Pricing',
+    iconName: 'currency-dollar',
+    route: 'https://modernize-angular-main.netlify.app/theme-pages/pricing',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Account Setting',
+    iconName: 'user-circle',
+    route:
+      'https://modernize-angular-main.netlify.app/theme-pages/account-setting',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'FAQ',
+    iconName: 'help',
+    route: 'https://modernize-angular-main.netlify.app/theme-pages/faq',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Landingpage',
+    iconName: 'app-window',
+    route: 'https://modernize-angular-main.netlify.app/landingpage',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Widgets',
+    iconName: 'layout',
+    route: 'widgets',
+    chip: true,
+    children: [
+      {
+        displayName: 'Cards',
+        iconName: 'point',
+        route: 'https://modernize-angular-main.netlify.app/widgets/cards',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Banners',
+        iconName: 'point',
+        route: 'https://modernize-angular-main.netlify.app/widgets/banners',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Charts',
+        iconName: 'point',
+        route: 'https://modernize-angular-main.netlify.app/widgets/charts',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+    ],
+  },
+  {
+    navCap: 'Extra',
+  },
+  {
+    displayName: 'Icons',
+    iconName: 'mood-smile',
+    route: '/extra/icons',
+  },
+  {
+    displayName: 'Sample Page',
+    iconName: 'brand-dribbble',
+    route: '/extra/sample-page',
+  },
+  {
+    navCap: 'Forms',
+  },
+  {
+    displayName: 'Elements',
+    iconName: 'apps',
+    chip: true,
+    route: 'forms/forms-elements',
+    children: [
+      {
+        displayName: 'Autocomplete',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/forms/forms-elements/autocomplete',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Button',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/forms/forms-elements/button',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Checkbox',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/forms/forms-elements/checkbox',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Radio',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/forms/forms-elements/radio',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Datepicker',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/forms/forms-elements/datepicker',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+    ],
+  },
+  {
+    displayName: 'Form Layouts',
+    iconName: 'file-description',
+    route: 'https://modernize-angular-main.netlify.app/forms/form-layouts',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Form Horizontal',
+    iconName: 'box-align-bottom',
+    route: 'https://modernize-angular-main.netlify.app/forms/form-horizontal',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Form Vertical',
+    iconName: 'box-align-left',
+    route: 'https://modernize-angular-main.netlify.app/forms/form-vertical',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Form Wizard',
+    iconName: 'files',
+    route: 'https://modernize-angular-main.netlify.app/forms/form-wizard',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Toastr',
+    iconName: 'notification',
+    route: 'https://modernize-angular-main.netlify.app/forms/form-toastr',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  
+  {
+    navCap: 'Tables',
+  },
+  {
+    displayName: 'Tables',
+    iconName: 'layout',
+    route: 'tables',
+    chip: true,
+    children: [
+      {
+        displayName: 'Basic Table',
+        iconName: 'point',
+        route: 'https://modernize-angular-main.netlify.app/tables/basic-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Dynamic Table',
+        iconName: 'point',
+        route: 'https://modernize-angular-main.netlify.app/tables/dynamic-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Expand Table',
+        iconName: 'point',
+        route: 'https://modernize-angular-main.netlify.app/tables/expand-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Filterable Table',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/tables/filterable-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Footer Row Table',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/tables/footer-row-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'HTTP Table',
+        iconName: 'point',
+        route: 'https://modernize-angular-main.netlify.app/tables/http-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Mix Table',
+        iconName: 'point',
+        route: 'https://modernize-angular-main.netlify.app/tables/mix-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Multi Header Footer',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/tables/multi-header-footer-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Pagination Table',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/tables/pagination-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Row Context Table',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/tables/row-context-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Selection Table',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/tables/selection-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Sortable Table',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/tables/sortable-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Sticky Column',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/tables/sticky-column-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+      {
+        displayName: 'Sticky Header Footer',
+        iconName: 'point',
+        route:
+          'https://modernize-angular-main.netlify.app/tables/sticky-header-footer-table',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+      },
+    ],
+  },
+  {
+    displayName: 'Data table',
+    iconName: 'border-outer',
+    route: 'https://modernize-angular-main.netlify.app/datatable/kichen-sink',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    navCap: 'Chart',
+  },
+  {
+    displayName: 'Line',
+    iconName: 'chart-line',
+    route: 'https://modernize-angular-main.netlify.app/charts/line',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Gredient',
+    iconName: 'chart-arcs',
+    route: 'https://modernize-angular-main.netlify.app/charts/gredient',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Area',
+    iconName: 'chart-area',
+    route: 'https://modernize-angular-main.netlify.app/charts/area',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Candlestick',
+    iconName: 'chart-candle',
+    route: 'https://modernize-angular-main.netlify.app/charts/candlestick',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Column',
+    iconName: 'chart-dots',
+    route: 'https://modernize-angular-main.netlify.app/charts/column',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Doughnut & Pie',
+    iconName: 'chart-donut-3',
+    route: 'https://modernize-angular-main.netlify.app/charts/doughnut-pie',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Radialbar & Radar',
+    iconName: 'chart-radar',
+    route: 'https://modernize-angular-main.netlify.app/charts/radial-radar',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+
+  {
+    navCap: 'Auth',
+  },
+  {
+    displayName: 'Login',
+    iconName: 'login',
+    route: '/authentication',
+    children: [
+      {
+        displayName: 'Login',
+        iconName: 'point',
+        route: '/authentication/login',
+      },
+      {
+        displayName: 'Side Login',
+        iconName: 'point',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary', 
+        chipContent: 'PRO',
+        route: 'https://modernize-angular-main.netlify.app/authentication/login',
+      },
+    ],
+  },
+  {
+    displayName: 'Register',
+    iconName: 'user-plus',
+    route: '/authentication',
+    children: [
+      {
+        displayName: 'Register',
+        iconName: 'point',
+        route: '/authentication/register',
+      },
+      {
+        displayName: 'Side Register',
+        iconName: 'point',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+        route: 'https://modernize-angular-main.netlify.app/authentication/side-register',
+      },
+    ],
+  },
+  {
+    displayName: 'Forgot Pwd',
+    iconName: 'rotate',
+    chip: true,
+    route: '/authentication',
+    children: [
+      {
+        displayName: 'Side Forgot Pwd',
+        iconName: 'point',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+        route: 'https://modernize-angular-main.netlify.app/authentication/side-forgot-pwd',
+      },
+      {
+        displayName: 'Boxed Forgot Pwd',
+        iconName: 'point',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+        route: 'https://modernize-angular-main.netlify.app/authentication/boxed-forgot-pwd',
+      },
+    ],
+  },
+  {
+    displayName: 'Two Steps',
+    iconName: 'zoom-code',
+    chip: true,
+    route: '/authentication',
+    children: [
+      {
+        displayName: 'Side Two Steps',
+        iconName: 'point',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+        route: 'https://modernize-angular-main.netlify.app/authentication/side-two-steps',
+      },
+      {
+        displayName: 'Boxed Two Steps',
+        iconName: 'point',
+        external: true,
+        chip: true,
+        chipClass: 'bg-light-secondary text-secondary',
+        chipContent: 'PRO',
+        route: 'https://modernize-angular-main.netlify.app/authentication/boxed-two-steps',
+      },
+    ],
+  },
+  {
+    displayName: 'Error',
+    iconName: 'alert-circle',
+    route: 'https://modernize-angular-main.netlify.app//authentication/error',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+  {
+    displayName: 'Maintenance',
+    iconName: 'settings',
+    route: 'https://modernize-angular-main.netlify.app//authentication/maintenance',
+    external: true,
+    chip: true,
+    chipClass: 'bg-light-secondary text-secondary',
+    chipContent: 'PRO',
+  },
+];
--- a/Web/themes/modernize/src/app/layouts/full/sidebar/sidebar.component.html
+++ b/Web/themes/modernize/src/app/layouts/full/sidebar/sidebar.component.html
@@ -0,0 +1,10 @@
+<div class="d-flex align-items-center justify-content-between">
+  <div class="branding"><app-branding></app-branding></div>
+
+  @if(showToggle) {
+  <a href="javascript:void(0)" (click)="toggleMobileNav.emit()"
+    class="d-flex justify-content-center ng-star-inserted icon-40 align-items-center">
+    <i-tabler name="x" class="icon-20 d-flex"></i-tabler>
+  </a>
+  }
+</div>
--- a/Web/themes/modernize/src/app/layouts/full/sidebar/sidebar.component.ts
+++ b/Web/themes/modernize/src/app/layouts/full/sidebar/sidebar.component.ts
@@ -0,0 +1,25 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { BrandingComponent } from './branding.component';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from 'src/app/material.module';
+
+@Component({
+  selector: 'app-sidebar',
+  imports: [BrandingComponent, TablerIconsModule, MaterialModule],
+  templateUrl: './sidebar.component.html',
+})
+export class SidebarComponent implements OnInit {
+  constructor() {}
+  @Input() showToggle = true;
+  @Output() toggleMobileNav = new EventEmitter<void>();
+  @Output() toggleCollapsed = new EventEmitter<void>();
+
+  ngOnInit(): void {}
+}
--- a/Web/themes/modernize/src/app/layouts/full/top-strip/topstrip.component.html
+++ b/Web/themes/modernize/src/app/layouts/full/top-strip/topstrip.component.html
@@ -0,0 +1,121 @@
+<div class="app-topstrip bg-dark text-white p-y-16 p-x-24 w-100 d-flex align-items-center justify-content-between">
+    <div class="d-none d-sm-flex align-items-center justify-content-center gap-20">
+        <a class="d-flex align-items-center" href="https://adminmart.com/" target="_blank">
+            <img src="/assets/images/logos/logo-adminmart.svg" alt="" width="150">
+        </a>
+
+        <div class="linkbar d-none d-lg-flex align-items-center justify-content-center gap-16">
+            <!-- Templates -->
+            <a mat-button class="link-hover p-x-0 text-white d-flex" href="https://adminmart.com/templates/angular/"
+                target="_blank">
+                <div class="d-flex align-items-center gap-8 f-s-16 f-w-400">
+                    <i class="iconify icon-20 d-flex" data-icon="solar:window-frame-linear"></i>
+                    Templates
+                </div>
+            </a>
+
+            <!-- Support -->
+            <a mat-button class="link-hover p-x-0 text-white d-flex" href="https://adminmart.com/support/"
+                target="_blank">
+                <div class="d-flex align-items-center gap-8 f-s-16 f-w-400">
+                    <i class="iconify icon-20 d-flex" data-icon="solar:question-circle-linear"></i>
+                    Help
+                </div>
+            </a>
+
+            <!-- Hire Us -->
+            <a mat-button class="link-hover p-x-0 text-white d-flex" href="https://adminmart.com/hire-us/"
+                target="_blank">
+                <div class="d-flex align-items-center gap-8 f-s-16 f-w-400">
+                    <i class="iconify icon-20 d-flex" data-icon="solar:case-round-linear"></i>
+                    Hire Us
+                </div>
+            </a>
+        </div>
+    </div>
+
+    <div class="topstrip-right d-flex align-items-center justify-content-center gap-16">
+        <h6 class="text-linear-gradient f-s-14 text-uppercase text-lg-left text-center">Checkout Pro Version</h6>
+
+        <div class="topstrip-right-inner d-flex justify-content-center align-items-center gap-10">
+
+            <div class="d-flex justify-content-center align-items-center gap-10">
+                <!-- Live Preview -->
+                <button class="live-preview-drop d-flex align-items-center gap-4 text-white f-s-16 p-x-16" mat-button
+                    [matMenuTriggerFor]="beforeMenu">
+                    <div class="d-flex align-items-center gap-6">
+                        Live Preview
+                        <i class="iconify icon-20 d-flex" data-icon="solar:alt-arrow-down-linear"></i>
+                    </div>
+                </button>
+                <mat-menu class="p-x-16 p-y-8 rounded-7" #beforeMenu="matMenu" xPosition="before">
+                    <a mat-menu-item class="rounded-7"
+                        href="https://adminmart.com/product/modernize-angular-material-dashboard/?ref=56#product-demo-section"
+                        target="_blank">
+                        <div class="d-flex align-items-center gap-12 f-s-16">
+                            <img src="/assets/images/svgs/angular-cat-icon.svg" width="18" alt="angular">
+                            Angular Version
+                        </div>
+                    </a>
+                    <a mat-menu-item class="rounded-7"
+                        href="https://adminmart.com/product/modernize-react-mui-dashboard-theme/?ref=56#product-demo-section"
+                        target="_blank">
+                        <div class="d-flex align-items-center gap-12 f-s-16">
+                            <img src="/assets/images/svgs/react-cat-icon.svg" width="18" alt="react">
+                            React Version
+                        </div>
+                    </a>
+                    <a mat-menu-item class="rounded-7"
+                        href="https://adminmart.com/product/modernize-vuetify-vue-admin-dashboard/?ref=56#product-demo-section"
+                        target="_blank">
+                        <div class="d-flex align-items-center gap-12 f-s-16">
+                            <img src="/assets/images/svgs/vue-cat-icon.svg" width="18" alt="vueJs">
+                            VueJs Version
+                        </div>
+                    </a>
+                    <a mat-menu-item class="rounded-7"
+                        href="https://adminmart.com/product/modernize-next-js-admin-dashboard/?ref=56#product-demo-section"
+                        target="_blank">
+                        <div class="d-flex align-items-center gap-12 f-s-16">
+                            <img src="/assets/images/svgs/next-cat-icon.svg" width="18" alt="nextJs">
+                            NextJs Version
+                        </div>
+                    </a>
+                    <a mat-menu-item class="rounded-7"
+                        href="https://adminmart.com/product/modernize-nuxt-js-admin-dashboard/?ref=56#product-demo-section"
+                        target="_blank">
+                        <div class="d-flex align-items-center gap-12 f-s-16">
+                            <img src="/assets/images/svgs/nuxt-cat-icon.svg" width="18" alt="nuxtJs">
+                            NuxtJs Version
+                        </div>
+                    </a>
+                    <a mat-menu-item class="rounded-7"
+                        href="https://adminmart.com/product/modernize-tailwind-nextjs-dashboard-template/?ref=56#product-demo-section"
+                        target="_blank">
+                        <div class="d-flex align-items-center gap-12 f-s-16">
+                            <img src="/assets/images/svgs/tailwindcss.svg" width="20" alt="tailwind">
+                            Tailwind Version
+                        </div>
+                    </a>
+                    <a mat-menu-item class="rounded-7"
+                        href="https://adminmart.com/product/modernize-bootstrap-5-admin-template/?ref=56#product-demo-section"
+                        target="_blank">
+                        <div class="d-flex align-items-center gap-12 f-s-16">
+                            <img src="/assets/images/svgs/bt-cat-icon.svg" width="20" alt="bootstrap">
+                            Bootstrap Version
+                        </div>
+                    </a>
+                </mat-menu>
+
+                <!-- Get Pro -->
+                <a mat-button class="get-pro-btn text-white p-x-16"
+                    href="https://adminmart.com/product/modernize-angular-material-dashboard/?ref=56" target="_blank">
+                    <div class="d-flex align-items-center gap-8 f-s-16 f-w-400">
+                        <i class="iconify icon-18 d-flex" data-icon="solar:crown-linear"></i>
+                        Get Pro
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
--- a/Web/themes/modernize/src/app/layouts/full/top-strip/topstrip.component.ts
+++ b/Web/themes/modernize/src/app/layouts/full/top-strip/topstrip.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { TablerIconsModule } from 'angular-tabler-icons';
+
+@Component({
+    selector: 'app-topstrip',
+    imports: [TablerIconsModule, MatButtonModule, MatMenuModule],
+    templateUrl: './topstrip.component.html',
+})
+export class AppTopstripComponent {
+    constructor() { }
+
+}
+ 
--- a/Web/themes/modernize/src/app/material.module.ts
+++ b/Web/themes/modernize/src/app/material.module.ts
@@ -0,0 +1,85 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// Material Form Controls
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+// Material Navigation
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+// Material Layout
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatListModule } from '@angular/material/list';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTreeModule } from '@angular/material/tree';
+// Material Buttons & Indicators
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatRippleModule } from '@angular/material/core';
+// Material Popups & Modals
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+// Material Data tables
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+
+@NgModule({
+  declarations: [],
+  exports: [
+    MatAutocompleteModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatMenuModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatListModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatTreeModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatBadgeModule,
+    MatChipsModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatRippleModule,
+    MatBottomSheetModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+  ],
+})
+export class MaterialModule {}
--- a/Web/themes/modernize/src/app/pages/authentication/authentication.routes.ts
+++ b/Web/themes/modernize/src/app/pages/authentication/authentication.routes.ts
@@ -0,0 +1,20 @@
+import { Routes } from '@angular/router';
+
+import { AppSideLoginComponent } from './side-login/side-login.component';
+import { AppSideRegisterComponent } from './side-register/side-register.component';
+
+export const AuthenticationRoutes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'login',
+        component: AppSideLoginComponent,
+      },
+      {
+        path: 'register',
+        component: AppSideRegisterComponent,
+      },
+    ],
+  },
+];
--- a/Web/themes/modernize/src/app/pages/authentication/side-login/side-login.component.html
+++ b/Web/themes/modernize/src/app/pages/authentication/side-login/side-login.component.html
@@ -0,0 +1,64 @@
+<div class="blank-layout-container justify-content-center align-items-center bg-light">
+  <div class="position-relative row w-100 h-100 bg-gredient justify-content-center">
+    <div class="col-lg-4 d-flex align-items-center">
+      <mat-card class="cardWithShadow boxed-auth">
+        <mat-card-content class="p-32">
+          <div class="text-center">
+            <a [routerLink]="['/dashboard']">
+              <img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
+            </a>
+          </div>
+
+          <div class="row m-t-24 custom-row">
+            <div class="col-12 col-sm-6">
+              <button mat-stroked-button class="w-100">
+                <div class="d-flex align-items-center">
+                  <img src="/assets/images/svgs/google-icon.svg" alt="google" width="16" class="m-r-8" />
+                  <span>
+                    Sign in with Google
+                  </span>
+                </div>
+              </button>
+            </div>
+            <div class="col-12 col-sm-6">
+              <button mat-stroked-button class="w-100 d-flex align-items-center">
+                <div class="d-flex align-items-center">
+                  <img src="/assets/images/svgs/facebook-icon.svg" alt="facebook" width="40" class="m-r-4" />
+                  Sign in with FB
+                </div>
+              </button>
+            </div>
+          </div>
+
+          <div class="or-border m-t-30">or sign in with</div>
+
+          <form class="m-t-30">
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Username</mat-label>
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput />
+            </mat-form-field>
+            <!-- password -->
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Password</mat-label>
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput type="password" />
+            </mat-form-field>
+
+            <div class="d-flex align-items-center m-b-12">
+              <mat-checkbox color="primary">Remember this Device</mat-checkbox>
+              <a [routerLink]="['/']" class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14">Forgot Password
+                ?</a>
+            </div>
+            <a [routerLink]="['/']" mat-flat-button color="primary" class="w-100">
+              Sign In
+            </a>
+            <!-- input -->
+          </form>
+          <span class="d-block f-w-500 text-center m-t-24">New to Modernize?
+            <a [routerLink]="['/authentication/register']" class="text-decoration-none text-primary f-w-500 f-s-14">
+              Create an account</a>
+          </span>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>
--- a/Web/themes/modernize/src/app/pages/authentication/side-login/side-login.component.ts
+++ b/Web/themes/modernize/src/app/pages/authentication/side-login/side-login.component.ts
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { MaterialModule } from 'src/app/material.module';
+import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-side-login',
+  imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule],
+  templateUrl: './side-login.component.html',
+})
+export class AppSideLoginComponent {
+
+  constructor( private router: Router) {}
+
+  form = new FormGroup({
+    uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
+    password: new FormControl('', [Validators.required]),
+  });
+
+  get f() {
+    return this.form.controls;
+  }
+
+  submit() {
+    // console.log(this.form.value);
+    this.router.navigate(['/']);
+  }
+}
--- a/Web/themes/modernize/src/app/pages/authentication/side-register/side-register.component.html
+++ b/Web/themes/modernize/src/app/pages/authentication/side-register/side-register.component.html
@@ -0,0 +1,62 @@
+<div class="blank-layout-container justify-content-center align-items-center bg-light">
+  <div class="position-relative row w-100 h-100 bg-gredient justify-content-center">
+    <div class="col-lg-4 d-flex align-items-center">
+      <mat-card class="cardWithShadow boxed-auth">
+        <mat-card-content class="p-32">
+          <div class="text-center">
+            <a [routerLink]="['/dashboard']">
+              <img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
+            </a>
+          </div>
+
+          <div class="row m-t-24 custom-row">
+            <div class="col-12 col-sm-6">
+              <button mat-stroked-button class="w-100">
+                <div class="d-flex align-items-center">
+                  <img src="/assets/images/svgs/google-icon.svg" alt="google" width="16" class="m-r-8" />
+                  Sign in with Google
+                </div>
+              </button>
+            </div>
+            <div class="col-12 col-sm-6">
+              <button mat-stroked-button class="w-100 d-flex align-items-center">
+                <div class="d-flex align-items-center">
+                  <img src="/assets/images/svgs/facebook-icon.svg" alt="facebook" width="40" class="m-r-4" />
+                  Sign in with FB
+                </div>
+              </button>
+            </div>
+          </div>
+
+          <div class="or-border m-t-30">or sign up with</div>
+
+          <form class="m-t-30">
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Name</mat-label>
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput />
+            </mat-form-field>
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Email Adddress</mat-label>
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput type="email" />
+            </mat-form-field>
+            <!-- password -->
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Password</mat-label>
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput type="password" />
+            </mat-form-field>
+
+            <a [routerLink]="['/']" mat-flat-button color="primary" class="w-100">
+              Sign Up
+            </a>
+            <!-- input -->
+          </form>
+          <span class="d-block f-w-500 text-center m-t-24">Already have an Account?
+
+            <a [routerLink]="['/authentication/login']" class="text-decoration-none text-primary f-w-500 f-s-14">
+              Sign In</a>
+          </span>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>
--- a/Web/themes/modernize/src/app/pages/authentication/side-register/side-register.component.ts
+++ b/Web/themes/modernize/src/app/pages/authentication/side-register/side-register.component.ts
@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { CoreService } from 'src/app/services/core.service';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { MaterialModule } from 'src/app/material.module';
+
+@Component({
+  selector: 'app-side-register',
+  imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule],
+  templateUrl: './side-register.component.html',
+})
+export class AppSideRegisterComponent {
+  options = this.settings.getOptions();
+
+  constructor(private settings: CoreService, private router: Router) {}
+
+  form = new FormGroup({
+    uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
+    email: new FormControl('', [Validators.required]),
+    password: new FormControl('', [Validators.required]),
+  });
+
+  get f() {
+    return this.form.controls;
+  }
+
+  submit() {
+    // console.log(this.form.value);
+    this.router.navigate(['/']);
+  }
+}
--- a/Web/themes/modernize/src/app/pages/extra/extra.routes.ts
+++ b/Web/themes/modernize/src/app/pages/extra/extra.routes.ts
@@ -0,0 +1,22 @@
+import { Routes } from '@angular/router';
+
+
+// pages
+import { AppIconsComponent } from './icons/icons.component';
+import { AppSamplePageComponent } from './sample-page/sample-page.component';
+
+export const ExtraRoutes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'icons',
+        component: AppIconsComponent,
+      },
+      {
+        path: 'sample-page',
+        component: AppSamplePageComponent,
+      },
+    ],
+  },
+];
--- a/Web/themes/modernize/src/app/pages/extra/icons/icons.component.html
+++ b/Web/themes/modernize/src/app/pages/extra/icons/icons.component.html
@@ -0,0 +1,12 @@
+<!-- ============================================================== -->
+<!-- Simple four boxes Row -->
+<!-- ============================================================== -->
+<mat-card class="cardWithShadow">
+  <mat-card-content>
+    <mat-card-title>Icons</mat-card-title>
+    <mat-card-subtitle class="m-b-24">Tabler Icons</mat-card-subtitle>
+    <iframe src="https://tabler.io/icons" title="Tabler Icons" width="100%" height="630px"
+      allowfullscreen frameBorder="0">
+    </iframe>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/extra/icons/icons.component.ts
+++ b/Web/themes/modernize/src/app/pages/extra/icons/icons.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { MaterialModule } from '../../../material.module';
+
+@Component({
+  selector: 'app-icons',
+  imports: [MaterialModule],
+  templateUrl: './icons.component.html',
+})
+export class AppIconsComponent { }
--- a/Web/themes/modernize/src/app/pages/extra/sample-page/sample-page.component.html
+++ b/Web/themes/modernize/src/app/pages/extra/sample-page/sample-page.component.html
@@ -0,0 +1,9 @@
+<!-- ============================================================== -->
+<!-- Simple four boxes Row -->
+<!-- ============================================================== -->
+<mat-card class="cardWithShadow">
+  <mat-card-content>
+    <mat-card-title>Sample Page</mat-card-title>
+    <mat-card-subtitle>This is test page</mat-card-subtitle>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/extra/sample-page/sample-page.component.ts
+++ b/Web/themes/modernize/src/app/pages/extra/sample-page/sample-page.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { MaterialModule } from '../../../material.module';
+
+@Component({
+  selector: 'app-sample-page',
+  imports: [MaterialModule],
+  templateUrl: './sample-page.component.html',
+})
+
+export class AppSamplePageComponent { }
--- a/Web/themes/modernize/src/app/pages/pages.routes.ts
+++ b/Web/themes/modernize/src/app/pages/pages.routes.ts
@@ -0,0 +1,16 @@
+import { Routes } from '@angular/router';
+import { StarterComponent } from './starter/starter.component';
+
+export const PagesRoutes: Routes = [
+  {
+    path: '',
+    component: StarterComponent,
+    data: {
+      title: 'Starter Page',
+      urls: [
+        { title: 'Dashboard', url: '/dashboards/dashboard1' },
+        { title: 'Starter Page' },
+      ],
+    },
+  },
+];
--- a/Web/themes/modernize/src/app/pages/starter/starter.component.html
+++ b/Web/themes/modernize/src/app/pages/starter/starter.component.html
@@ -0,0 +1,24 @@
+<div class="row">
+  <div class="col-lg-8">
+    <app-sales-overview></app-sales-overview>
+  </div>
+  <div class="col-lg-4">
+    <app-yearly-breakup></app-yearly-breakup>
+    <app-monthly-earnings></app-monthly-earnings>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-4">
+    <app-recent-transactions></app-recent-transactions>
+  </div>
+  <div class="col-lg-8">
+    <app-product-performance></app-product-performance>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-12">
+    <app-blog-card></app-blog-card>
+  </div>
+</div>
--- a/Web/themes/modernize/src/app/pages/starter/starter.component.ts
+++ b/Web/themes/modernize/src/app/pages/starter/starter.component.ts
@@ -0,0 +1,25 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { MaterialModule } from '../../material.module';
+import { AppSalesOverviewComponent } from 'src/app/components/sales-overview/sales-overview.component';
+import { AppYearlyBreakupComponent } from 'src/app/components/yearly-breakup/yearly-breakup.component';
+import { AppMonthlyEarningsComponent } from 'src/app/components/monthly-earnings/monthly-earnings.component';
+import { AppRecentTransactionsComponent } from 'src/app/components/recent-transactions/recent-transactions.component';
+import { AppProductPerformanceComponent } from 'src/app/components/product-performance/product-performance.component';
+import { AppBlogCardsComponent } from 'src/app/components/blog-card/blog-card.component';
+
+
+@Component({
+  selector: 'app-starter',
+  imports: [
+    MaterialModule,
+    AppSalesOverviewComponent,
+    AppYearlyBreakupComponent,
+    AppMonthlyEarningsComponent,
+    AppRecentTransactionsComponent,
+    AppProductPerformanceComponent,
+    AppBlogCardsComponent
+  ],
+  templateUrl: './starter.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class StarterComponent { }
--- a/Web/themes/modernize/src/app/pages/ui-components/badge/badge.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/badge/badge.component.html
@@ -0,0 +1,51 @@
+<mat-card class="cardWithShadow theme-card">
+  <mat-card-header>
+    <mat-card-title class="m-b-0">Badges</mat-card-title>
+  </mat-card-header>
+  <mat-card-content class="b-t-1">
+    <mat-card class="b-1 shadow-none">
+      <mat-card-content>
+        <div matBadge="4" matBadgeOverlap="false" class="d-inline">Text with a badge</div>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="b-1 shadow-none">
+      <mat-card-content>
+        <div matBadge="1" matBadgeSize="small" class="d-inline">Text with small badge</div><br /><br />
+        <div matBadge="1" matBadgeSize="large" class="d-inline">Text with large badge</div>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="b-1 shadow-none">
+      <mat-card-content>
+        <p class="f-w-500 text-muted">
+          Button with a badge on the left
+          <button mat-flat-button color="primary" matBadge="8" matBadgePosition="before" matBadgeColor="accent">
+            Action
+          </button>
+        </p>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="b-1 shadow-none">
+      <mat-card-content>
+        <p class="f-w-500 text-muted">
+          Icon with a badge
+          <mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
+        </p>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="b-1 shadow-none">
+      <mat-card-content>
+        <p>
+          Button toggles badge visibility
+          <button mat-flat-button color="primary" matBadge="7" [matBadgeHidden]="hidden"
+            (click)="toggleBadgeVisibility()">
+            Hide
+          </button>
+        </p>
+      </mat-card-content>
+    </mat-card>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/badge/badge.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/badge/badge.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  selector: 'app-badge',
+  templateUrl: './badge.component.html',
+  imports: [MatBadgeModule, MatButtonModule, MatIconModule, MatCardModule],
+})
+export class AppBadgeComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  hidden = false;
+
+  toggleBadgeVisibility() {
+    this.hidden = !this.hidden;
+  }
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/chips/chips.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/chips/chips.component.html
@@ -0,0 +1,172 @@
+<mat-card class="cardWithShadow theme-card">
+  <mat-card-header>
+    <mat-card-title class="m-b-0">Chips</mat-card-title>
+  </mat-card-header>
+  <mat-card-content class="b-t-1">
+    <div class="row">
+      <div class="col-lg-6">
+        <!-- ------------------------------------------------------------------------- -->
+        <!-- basic -->
+        <!-- ------------------------------------------------------------------------- -->
+
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Basic</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-chip-listbox aria-label="Fish selection">
+              <mat-chip-option class="f-s-14" color="primary">One fish</mat-chip-option>
+              <mat-chip-option class="f-s-14">Two fish</mat-chip-option>
+              <mat-chip-option class="f-s-14" color="accent" selected>Accent fish</mat-chip-option>
+              <mat-chip-option class="f-s-14" color="warn">Warn fish</mat-chip-option>
+            </mat-chip-listbox>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- ------------------------------------------------------------------------- -->
+        <!-- avatar -->
+        <!-- ------------------------------------------------------------------------- -->
+
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Avatar</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-chip-set aria-label="Dog selection">
+              <mat-chip class="f-s-14">
+                <img matChipAvatar src="/assets/images/profile/user-1.jpg" alt="Photo of a Shiba Inu" />
+                Anderson
+              </mat-chip>
+              <mat-chip class="f-s-14" color="primary">
+                <img matChipAvatar src="/assets/images/profile/user-2.jpg" alt="Photo of a Shiba Inu" />
+                Monty
+              </mat-chip>
+              <mat-chip class="f-s-14" color="accent">
+                <img matChipAvatar src="/assets/images/profile/user-3.jpg" alt="Photo of a Shiba Inu" />
+                Mathew
+              </mat-chip>
+            </mat-chip-set>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- ------------------------------------------------------------------------- -->
+        <!-- Drag n Drop -->
+        <!-- ------------------------------------------------------------------------- -->
+
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Drag n Drop</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-chip-set class="example-chip" cdkDropList cdkDropListOrientation="horizontal"
+              (cdkDropListDropped)="drop($event)">
+              @for (vegetable of vegetables(); track vegetable.name) {
+              <mat-chip class="example-box" cdkDrag>{{
+                vegetable.name
+                }}</mat-chip>
+              }
+            </mat-chip-set>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- ------------------------------------------------------------------------- -->
+        <!-- Stacked  -->
+        <!-- ------------------------------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Stacked </mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-chip-listbox class="mat-mdc-chip-set-stacked" aria-label="Color selection">
+              @for(chip of availableColors; track chip.color) {
+              <mat-chip-option selected [color]="chip.color">
+                {{ chip.name }}
+              </mat-chip-option>
+              }
+            </mat-chip-listbox>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-12">
+        <!-- ------------------------------------------------------------------------- -->
+        <!-- Input -->
+        <!-- ------------------------------------------------------------------------- -->
+
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Input</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-form-field appearance="outline" class="w-100">
+              <mat-label>Favorite Fruits</mat-label>
+              <mat-chip-grid #chipGrid aria-label="Enter fruits">
+                @for(fruit of fruits; track fruit.name) {
+                <mat-chip-row (removed)="remove(fruit)" [editable]="true" (edited)="edit(fruit, $event)"
+                  [aria-description]="'press enter to edit ' + fruit.name" class="f-s-14">
+                  {{ fruit.name }}
+                  <button matChipRemove [attr.aria-label]="'remove ' + fruit.name">
+                    <mat-icon>cancel</mat-icon>
+                  </button>
+                </mat-chip-row>
+                }
+
+                <input placeholder="New fruit..." [matChipInputFor]="chipGrid"
+                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
+                  (matChipInputTokenEnd)="add($event)" />
+              </mat-chip-grid>
+            </mat-form-field>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-12">
+        <!-- ------------------------------------------------------------------------- -->
+        <!-- Form Control -->
+        <!-- ------------------------------------------------------------------------- -->
+
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Form Control</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <div class="d-flex gap-8">
+              <button mat-stroked-button color="primary" (click)="formControl.disable()">
+                Disable form control
+              </button>
+              <button mat-raised-button color="primary" (click)="formControl.enable()">
+                Enable form control
+              </button>
+            </div>
+            <mat-form-field appearance="outline" class="w-100 m-t-20">
+              <mat-label>Video keywords</mat-label>
+              <mat-chip-grid #formChip aria-label="Enter keywords" [formControl]="formControl">
+                @for (keyword of keywords(); track keyword) {
+                <mat-chip-row (removed)="removeKeyword(keyword)">
+                  {{ keyword }}
+                  <button matChipRemove aria-label="'remove ' + keyword">
+                    <mat-icon>cancel</mat-icon>
+                  </button>
+                </mat-chip-row>
+                }
+              </mat-chip-grid>
+              <input placeholder="New keyword..." [matChipInputFor]="formChip"
+                (matChipInputTokenEnd)="addForm($event)" />
+            </mat-form-field>
+
+            <p>
+              <span class="f-w-600">The following keywords are entered:</span>
+              {{ formControl.value }}
+            </p>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/chips/chips.component.scss
+++ b/Web/themes/modernize/src/app/pages/ui-components/chips/chips.component.scss
@@ -0,0 +1,7 @@
+.example-box.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-chip .cdk-drop-list-dragging {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/chips/chips.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/chips/chips.component.ts
@@ -0,0 +1,161 @@
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { ThemePalette } from '@angular/material/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal,
+} from '@angular/core';
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
+import { MatCardModule } from '@angular/material/card';
+import {
+  MatChipEditedEvent,
+  MatChipInputEvent,
+  MatChipsModule,
+} from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { MatButtonModule } from '@angular/material/button';
+
+export interface ChipColor {
+  name: string;
+  color: ThemePalette;
+}
+
+export interface Fruit {
+  name: string;
+}
+
+export interface Vegetable {
+  name: string;
+}
+
+@Component({
+  selector: 'app-chips',
+  templateUrl: './chips.component.html',
+  styleUrls: ['./chips.component.scss'],
+  imports: [
+    MatFormFieldModule,
+    MatChipsModule,
+    MatIconModule,
+    MatCardModule,
+    CdkDropList,
+    CdkDrag,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppChipsComponent {
+  // drag n drop
+  readonly vegetables = signal<Vegetable[]>([
+    { name: 'apple' },
+    { name: 'banana' },
+    { name: 'strawberry' },
+    { name: 'orange' },
+    { name: 'kiwi' },
+    { name: 'cherry' },
+  ]);
+
+  drop(event: CdkDragDrop<Vegetable[]>) {
+    this.vegetables.update((vegetables) => {
+      moveItemInArray(vegetables, event.previousIndex, event.currentIndex);
+      return [...vegetables];
+    });
+  }
+
+  //
+  // Stacked
+  //
+  availableColors: ChipColor[] = [
+    { name: 'Primary', color: 'primary' },
+    { name: 'Accent', color: 'accent' },
+    { name: 'Warn', color: 'warn' },
+  ];
+
+  //
+  //  chips with input
+  //
+  addOnBlur = true;
+  readonly separatorKeysCodes = [ENTER, COMMA] as const;
+  fruits: Fruit[] = [{ name: 'Lemon' }, { name: 'Lime' }, { name: 'Apple' }];
+
+  add(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+
+    // Add our fruit
+    if (value) {
+      this.fruits.push({ name: value });
+    }
+
+    // Clear the input value
+    event.chipInput!.clear();
+  }
+
+  remove(fruit: Fruit): void {
+    const index = this.fruits.indexOf(fruit);
+
+    if (index >= 0) {
+      this.fruits.splice(index, 1);
+    }
+  }
+
+  edit(fruit: Fruit, event: MatChipEditedEvent) {
+    const value = event.value.trim();
+
+    // Remove fruit if it no longer has a name
+    if (!value) {
+      this.remove(fruit);
+      return;
+    }
+
+    // Edit existing fruit
+    const index = this.fruits.indexOf(fruit);
+    if (index >= 0) {
+      this.fruits[index].name = value;
+    }
+  }
+
+  // form control
+
+  readonly keywords = signal(['angular', 'how-to', 'tutorial', 'accessibility']);
+  readonly formControl = new FormControl(['angular']);
+
+  announcer = inject(LiveAnnouncer);
+
+  removeKeyword(keyword: string) {
+    this.keywords.update(keywords => {
+      const index = keywords.indexOf(keyword);
+      if (index < 0) {
+        return keywords;
+      }
+
+      keywords.splice(index, 1);
+      this.announcer.announce(`removed ${keyword}`);
+      return [...keywords];
+    });
+  }
+
+  addForm(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+
+    // Add our keyword
+    if (value) {
+      this.keywords.update(keywords => [...keywords, value]);
+    }
+
+    // Clear the input value
+    event.chipInput!.clear();
+  }
+}
+function isDragDrop(object: any): object is CdkDragDrop<string[]> {
+  return 'previousIndex' in object;
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/forms/forms.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/forms/forms.component.html
@@ -0,0 +1,73 @@
+<mat-card class="cardWithShadow theme-card">
+  <mat-card-header>
+    <mat-card-title class="m-b-0">Form</mat-card-title>
+  </mat-card-header>
+  <mat-card-content class="b-t-1">
+    <form>
+      <div class="row">
+        <div class="col-lg-6">
+          <!-- input -->
+          <mat-label class="f-w-600 m-b-8 d-block">Your Name</mat-label>
+          <mat-form-field appearance="outline" class="w-100" color="primary">
+            <input matInput placeholder="your name " />
+          </mat-form-field>
+        </div>
+        <div class="col-lg-6">
+          <mat-label class="f-w-600 m-b-8 d-block">Country</mat-label>
+          <mat-form-field appearance="outline" class="w-100">
+            <mat-select [(value)]="selectedCountry">
+              @for(option of country; track option.value) {
+              <mat-option [value]="option.value">{{
+                option.viewValue
+                }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="col-lg-6">
+          <!-- input -->
+          <mat-label class="f-w-600 m-b-8 d-block">Email</mat-label>
+          <mat-form-field appearance="outline" class="w-100" color="primary">
+            <input matInput type="email" placeholder="your email" />
+          </mat-form-field>
+        </div>
+        <div class="col-lg-6">
+          <mat-label class="f-w-600 m-b-8 d-block">State</mat-label>
+          <mat-form-field appearance="outline" class="w-100">
+            <mat-select [(value)]="selectedState">
+              @for(option of state; track option.value) {
+              <mat-option [value]="option.value">{{
+                option.viewValue
+                }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="col-lg-6">
+          <!-- input -->
+          <mat-label class="f-w-600 m-b-8 d-block">Password</mat-label>
+          <mat-form-field appearance="outline" class="w-100" color="primary">
+            <input matInput type="password" placeholder="your password" />
+          </mat-form-field>
+        </div>
+        <div class="col-lg-6">
+          <mat-label class="f-w-600 m-b-8 d-block">City</mat-label>
+          <mat-form-field appearance="outline" class="w-100">
+            <mat-select [(value)]="selectedCity">
+              @for(option of city; track option.value) {
+              <mat-option [value]="option.value">{{
+                option.viewValue
+                }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+      </div>
+
+      <div class="m-t-12">
+        <button mat-flat-button color="primary" class="m-r-8">Submit</button>
+        <button mat-stroked-button color="warn">Cancel</button>
+      </div>
+    </form>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/forms/forms.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/forms/forms.component.ts
@@ -0,0 +1,58 @@
+import { Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatRadioModule } from '@angular/material/radio';
+
+interface Food {
+  value: string;
+  viewValue: string;
+}
+
+@Component({
+  selector: 'app-forms',
+  imports: [
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatRadioModule,
+    MatButtonModule,
+    MatCardModule,
+    MatInputModule,
+    MatCheckboxModule,
+  ],
+  templateUrl: './forms.component.html',
+})
+export class AppFormsComponent {
+  country: Food[] = [
+    { value: 'steak-0', viewValue: 'USA' },
+    { value: 'pizza-1', viewValue: 'India' },
+    { value: 'tacos-2', viewValue: 'France' },
+    { value: 'tacos-3', viewValue: 'UK' },
+  ];
+
+  selectedCountry = this.country[2].value;
+
+  city: Food[] = [
+    { value: 'steak-0', viewValue: 'Mexico' },
+    { value: 'pizza-1', viewValue: 'Mumbai' },
+    { value: 'tacos-2', viewValue: 'Tokyo' },
+    { value: 'tacos-3', viewValue: 'New York' },
+  ];
+
+  selectedCity = this.city[1].value;
+
+  state: Food[] = [
+    { value: 'steak-0', viewValue: 'Cuba' },
+    { value: 'pizza-1', viewValue: 'Djibouti' },
+    { value: 'tacos-2', viewValue: 'Bulgaria' },
+    { value: 'tacos-3', viewValue: 'Cabo Verde' },
+  ];
+
+  selectedState = this.state[3].value;
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/lists/lists.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/lists/lists.component.html
@@ -0,0 +1,197 @@
+<mat-card class="cardWithShadow theme-card">
+  <mat-card-header>
+    <mat-card-title class="m-b-0">Lists</mat-card-title>
+  </mat-card-header>
+  <mat-card-content class="b-t-1">
+    <div class="row">
+      <div class="col-lg-6">
+        <!-- --------------------------------------------------- -->
+        <!-- basic -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Basic</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-list role="list">
+              <mat-list-item role="listitem">Item 1</mat-list-item>
+              <mat-list-item role="listitem">Item 2</mat-list-item>
+              <mat-list-item role="listitem">Item 3</mat-list-item>
+            </mat-list>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- --------------------------------------------------- -->
+        <!-- two line -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Two Line</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-list>
+              <mat-list-item>
+                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
+                <span matListItemLine>Second line</span>
+              </mat-list-item>
+              <mat-list-item>
+                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
+                <span matListItemLine>Second line</span>
+              </mat-list-item>
+            </mat-list>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- --------------------------------------------------- -->
+        <!-- two line -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Three Line</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-list>
+              <mat-list-item>
+                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
+                <span matListItemLine>Second line</span>
+                <span matListItemLine>Third line</span>
+              </mat-list-item>
+              <mat-list-item>
+                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
+                <span matListItemLine>Second line. This line will truncate.</span>
+                <span>Third line</span>
+              </mat-list-item>
+            </mat-list>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- --------------------------------------------------- -->
+        <!-- two line -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Three Line with Text wrapping</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-list style="max-width: 500px">
+              <mat-list-item lines="3">
+                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
+                <span>Secondary line that will wrap because the list lines is
+                  explicitly set to 3 lines. Text inside of a `matListItemTitle`
+                  or `matListItemLine` will never wrap.
+                </span>
+              </mat-list-item>
+              <mat-list-item lines="3">
+                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
+                <span>Secondary line that will wrap because the list lines is
+                  explicitly set to 3 lines. Text inside of a `matListItemTitle`
+                  or `matListItemLine` will never wrap.
+                </span>
+              </mat-list-item>
+            </mat-list>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- --------------------------------------------------- -->
+        <!-- List with Selection -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>List with Selection</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-selection-list #shoes>
+              @for(shoe of typesOfShoes; track shoe) {
+              <mat-list-option>
+                {{ shoe }}
+              </mat-list-option>
+              }
+            </mat-selection-list>
+
+            <p class="f-w-600 p-16 bg-light-primary rounded">
+              Options selected: {{ shoes.selectedOptions.selected.length }}
+            </p>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- --------------------------------------------------- -->
+        <!-- List with single Selection -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>List with single Selection</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-selection-list #shoes2 [multiple]="false">
+              @for(shoe of typesOfShoes; track shoe) {
+              <mat-list-option [value]="shoe">
+                {{ shoe }}
+              </mat-list-option>
+              }
+            </mat-selection-list>
+
+            <p class="f-w-600 p-16 bg-light-primary rounded">
+              Option selected:
+              {{
+              shoes2.selectedOptions.hasValue()
+              ? shoes2.selectedOptions.selected[0].value
+              : "None"
+              }}
+            </p>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-12">
+        <!-- --------------------------------------------------- -->
+        <!-- List with sections -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>List with sections</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-list>
+              <div mat-subheader class="m-b-16 f-w-600">Folders</div>
+              @for(folder of folders; track folder.name) {
+              <mat-list-item>
+                <mat-icon matListItemIcon>folder</mat-icon>
+                <div matListItemTitle class="f-w-600">
+                  {{ folder.name }}
+                </div>
+                <div matListItemLine class="f-s-14 ">
+                  {{ folder.updated | date }}
+                </div>
+              </mat-list-item>
+              }
+
+              <mat-divider></mat-divider>
+              <div mat-subheader class="m-y-16 f-w-600">Notes</div>
+              @for(note of notes; track note.name) {
+              <mat-list-item>
+                <mat-icon matListItemIcon>note</mat-icon>
+                <div matListItemTitle class="f-w-600">
+                  {{ note.name }}
+                </div>
+                <div matListItemLine class="f-s-14 ">
+                  {{ note.updated | date }}
+                </div>
+              </mat-list-item>
+              }
+            </mat-list>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/lists/lists.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/lists/lists.component.ts
@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatListModule } from '@angular/material/list';
+import {MatIconModule} from '@angular/material/icon';
+import {DatePipe} from '@angular/common';
+import { MaterialModule } from 'src/app/material.module';
+
+
+export interface Section {
+  name: string;
+  updated: Date;
+}
+
+@Component({
+  selector: 'app-lists',
+  imports: [MatListModule, MatCardModule, DatePipe,MatIconModule, MaterialModule ],
+  templateUrl: './lists.component.html',
+})
+export class AppListsComponent {
+  constructor() {}
+
+  typesOfShoes: string[] = ['Loafers', 'Sneakers'];
+
+  folders: Section[] = [
+    {
+      name: 'Photos',
+      updated: new Date('1/1/25'),
+    },
+    {
+      name: 'Recipes',
+      updated: new Date('1/17/25'),
+    },
+    {
+      name: 'Work',
+      updated: new Date('1/28/25'),
+    },
+  ];
+  notes: Section[] = [
+    {
+      name: 'Vacation Itinerary',
+      updated: new Date('2/20/25'),
+    },
+    {
+      name: 'Kitchen Remodel',
+      updated: new Date('1/18/25'),
+    },
+  ];
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/menu/menu.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/menu/menu.component.html
@@ -0,0 +1,166 @@
+<mat-card class="cardWithShadow theme-card">
+  <mat-card-header>
+    <mat-card-title class="m-b-0">Menu</mat-card-title>
+  </mat-card-header>
+  <mat-card-content class="b-t-1">
+    <div class="row">
+      <div class="col-sm-6 col-lg-4">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Basic</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-flat-button color="primary" class="m-t-8" [matMenuTriggerFor]="menu">
+              Menu
+            </button>
+            <mat-menu #menu="matMenu" class="cardWithShadow">
+              <button mat-menu-item>Item 1</button>
+              <button mat-menu-item>Item 2</button>
+            </mat-menu>
+          </mat-card-content>
+        </mat-card>
+      </div>
+      <div class="col-sm-6 col-lg-4">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>with Icons</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+              <mat-icon>
+                <i-tabler name="dots" class="icon-20"></i-tabler>
+              </mat-icon>
+            </button>
+            <mat-menu #menu="matMenu" class="cardWithShadow">
+              <button mat-menu-item>
+                <mat-icon>dialpad</mat-icon>
+                <span>Redial</span>
+              </button>
+              <button mat-menu-item disabled>
+                <mat-icon>voicemail</mat-icon>
+                <span>Check voice mail</span>
+              </button>
+              <button mat-menu-item>
+                <mat-icon>notifications_off</mat-icon>
+                <span>Disable alerts</span>
+              </button>
+            </mat-menu>
+          </mat-card-content>
+        </mat-card>
+      </div>
+      <div class="col-sm-6 col-lg-4">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Nested Menu</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-flat-button color="primary" [matMenuTriggerFor]="animals" class="m-t-8">
+              Animal index
+            </button>
+            <mat-menu class="cardWithShadow" #animals="matMenu">
+              <button mat-menu-item [matMenuTriggerFor]="vertebrates">
+                Vertebrates
+              </button>
+              <button mat-menu-item [matMenuTriggerFor]="invertebrates">
+                Invertebrates
+              </button>
+            </mat-menu>
+
+            <mat-menu class="cardWithShadow" #vertebrates="matMenu">
+              <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
+              <button mat-menu-item [matMenuTriggerFor]="amphibians">
+                Amphibians
+              </button>
+              <button mat-menu-item [matMenuTriggerFor]="reptiles">
+                Reptiles
+              </button>
+              <button mat-menu-item>Birds</button>
+              <button mat-menu-item>Mammals</button>
+            </mat-menu>
+
+            <mat-menu class="cardWithShadow" #invertebrates="matMenu">
+              <button mat-menu-item>Insects</button>
+              <button mat-menu-item>Molluscs</button>
+              <button mat-menu-item>Crustaceans</button>
+              <button mat-menu-item>Corals</button>
+              <button mat-menu-item>Arachnids</button>
+              <button mat-menu-item>Velvet worms</button>
+              <button mat-menu-item>Horseshoe crabs</button>
+            </mat-menu>
+
+            <mat-menu class="cardWithShadow" #fish="matMenu">
+              <button mat-menu-item>Baikal oilfish</button>
+              <button mat-menu-item>Bala shark</button>
+              <button mat-menu-item>Ballan wrasse</button>
+              <button mat-menu-item>Bamboo shark</button>
+              <button mat-menu-item>Banded killifish</button>
+            </mat-menu>
+
+            <mat-menu class="cardWithShadow" #amphibians="matMenu">
+              <button mat-menu-item>Sonoran desert toad</button>
+              <button mat-menu-item>Western toad</button>
+              <button mat-menu-item>Arroyo toad</button>
+              <button mat-menu-item>Yosemite toad</button>
+            </mat-menu>
+
+            <mat-menu class="cardWithShadow" #reptiles="matMenu">
+              <button mat-menu-item>Banded Day Gecko</button>
+              <button mat-menu-item>Banded Gila Monster</button>
+              <button mat-menu-item>Black Tree Monitor</button>
+              <button mat-menu-item>Blue Spiny Lizard</button>
+              <button mat-menu-item disabled>Velociraptor</button>
+            </mat-menu>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-12">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Positions</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <div class="row">
+              <div class="col-sm-3">
+                <button mat-flat-button color="primary" class="w-100" [matMenuTriggerFor]="aboveMenu">
+                  Above
+                </button>
+                <mat-menu class="cardWithShadow" #aboveMenu="matMenu" yPosition="above">
+                  <button mat-menu-item>Item 1</button>
+                  <button mat-menu-item>Item 2</button>
+                </mat-menu>
+              </div>
+              <div class="col-sm-3">
+                <button mat-flat-button color="accent" class="w-100" [matMenuTriggerFor]="belowMenu">
+                  Below
+                </button>
+                <mat-menu class="cardWithShadow" #belowMenu="matMenu" yPosition="below">
+                  <button mat-menu-item>Item 1</button>
+                  <button mat-menu-item>Item 2</button>
+                </mat-menu>
+              </div>
+              <div class="col-sm-3">
+                <button mat-flat-button color="warn" class="w-100" [matMenuTriggerFor]="beforeMenu">
+                  Before
+                </button>
+                <mat-menu class="cardWithShadow" #beforeMenu="matMenu" xPosition="before">
+                  <button mat-menu-item>Item 1</button>
+                  <button mat-menu-item>Item 2</button>
+                </mat-menu>
+              </div>
+              <div class="col-sm-3">
+                <button mat-flat-button color="primary" class="w-100" [matMenuTriggerFor]="afterMenu">
+                  After
+                </button>
+                <mat-menu class="cardWithShadow" #afterMenu="matMenu" xPosition="after">
+                  <button mat-menu-item>Item 1</button>
+                  <button mat-menu-item>Item 2</button>
+                </mat-menu>
+              </div>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/menu/menu.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/menu/menu.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { TablerIconsModule } from 'angular-tabler-icons';
+
+@Component({
+  selector: 'app-menu',
+  imports: [MatCardModule, MatMenuModule, MatIconModule, TablerIconsModule, MatButtonModule],
+  templateUrl: './menu.component.html',
+})
+export class AppMenuComponent {
+  constructor() {}
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/tables/tables.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/tables/tables.component.html
@@ -0,0 +1,102 @@
+<mat-card class="cardWithShadow">
+  <mat-card-content>
+    <mat-card-title>Table</mat-card-title>
+
+    <div class="table-responsive">
+      <table mat-table [dataSource]="dataSource1" class="w-100">
+        <!-- Position Column -->
+        <ng-container matColumnDef="assigned">
+          <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14 p-l-0">
+            Product
+          </th>
+          <td mat-cell *matCellDef="let element" class="p-l-0">
+            <div class="d-flex align-items-center">
+              <img [src]="element.imagePath" alt="users" width="60" class="rounded" />
+              <div class="m-l-16">
+                <h6 class="f-s-14 f-w-600">
+                  {{ element.uname }}
+                </h6>
+              </div>
+            </div>
+          </td>
+        </ng-container>
+
+        <!-- Name Column -->
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14">
+            Payment
+          </th>
+          <td mat-cell *matCellDef="let element">
+            @if(element.budget >= 160) {
+            <h6 class=" f-s-16 m-b-4">
+              <span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
+            </h6>
+            <span class="f-s-14 f-w-500 d-block m-b-4">Full paid</span>
+            <mat-progress-bar mode="determinate" value="80" color="primary"></mat-progress-bar>
+            } @else if(element.budget > 119) {
+            <h6 class=" f-s-16 m-b-4">
+              <span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
+            </h6>
+            <span class="f-s-14 f-w-500 d-block m-b-4">Partially paid</span>
+            <mat-progress-bar mode="determinate" class="mat-error" value="35" color="accent"></mat-progress-bar>
+            } @else if(element.budget < 100) { <h6 class=" f-s-16 m-b-4">
+              <span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
+              </h6>
+              <span class="f-s-14 f-w-500 d-block m-b-4">Cancelled</span>
+              <mat-progress-bar mode="determinate" class="mat-warning" value="50" color="warn"></mat-progress-bar>
+              }
+          </td>
+        </ng-container>
+
+        <!-- Weight Column -->
+        <ng-container matColumnDef="priority">
+          <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14">
+            Status
+          </th>
+          <td mat-cell *matCellDef="let element">
+            @if(element.priority == 'cancelled') {
+            <span class="bg-light-warning text-warning rounded f-w-600 p-6 p-y-4 f-s-12">
+              {{ element.priority | titlecase }}
+            </span>
+            } @if(element.priority == 'rejected') {
+            <span class="bg-light-error text-error rounded f-w-600 p-6 p-y-4 f-s-12">
+              {{ element.priority | titlecase }}
+            </span>
+            } @if(element.priority == 'confirmed') {
+            <span class="bg-light-success text-success rounded f-w-600 p-6 p-y-4 f-s-12">
+              {{ element.priority | titlecase }}
+            </span>
+            }
+          </td>
+        </ng-container>
+
+        <!-- Symbol Column -->
+        <ng-container matColumnDef="budget">
+          <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14"></th>
+          <td mat-cell *matCellDef="let element">
+            <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+              <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #menu="matMenu">
+              <button mat-menu-item>
+                <mat-icon>add</mat-icon>
+                <span>Add</span>
+              </button>
+              <button mat-menu-item>
+                <mat-icon>edit</mat-icon>
+                <span>Edit</span>
+              </button>
+              <button mat-menu-item>
+                <mat-icon>delete</mat-icon>
+                <span>Delete</span>
+              </button>
+            </mat-menu>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns1"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns1"></tr>
+      </table>
+    </div>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/tables/tables.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/tables/tables.component.ts
@@ -0,0 +1,67 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatTableModule } from '@angular/material/table';
+import { MaterialModule } from 'src/app/material.module';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+
+// table 1
+export interface productsData {
+  id: number;
+  imagePath: string;
+  uname: string;
+  budget: number;
+  priority: string;
+}
+
+const PRODUCT_DATA: productsData[] = [
+  {
+    id: 1,
+    imagePath: 'assets/images/products/product-1.png',
+    uname: 'iPhone 13 pro max-Pacific Blue-128GB storage',
+    budget: 180,
+    priority: 'confirmed',
+  },
+  {
+    id: 2,
+    imagePath: 'assets/images/products/product-2.png',
+    uname: 'Apple MacBook Pro 13 inch-M1-8/256GB-space',
+    budget: 90,
+    priority: 'cancelled',
+  },
+  {
+    id: 3,
+    imagePath: 'assets/images/products/product-3.png',
+    uname: 'PlayStation 5 DualSense Wireless Controller',
+    budget: 120,
+    priority: 'rejected',
+  },
+  {
+    id: 4,
+    imagePath: 'assets/images/products/product-4.png',
+    uname: 'Amazon Basics Mesh, Mid-Back, Swivel Office',
+    budget: 160,
+    priority: 'confirmed',
+  },
+];
+
+@Component({
+  selector: 'app-tables',
+  imports: [
+    MatTableModule,
+    CommonModule,
+    MatCardModule,
+    MaterialModule,
+    MatIconModule,
+    MatMenuModule,
+    MatButtonModule,
+  ],
+  templateUrl: './tables.component.html',
+})
+export class AppTablesComponent {
+  // table 1
+  displayedColumns1: string[] = ['assigned', 'name', 'priority', 'budget'];
+  dataSource1 = PRODUCT_DATA;
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/tooltips/tooltips.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/tooltips/tooltips.component.html
@@ -0,0 +1,128 @@
+<mat-card class="cardWithShadow theme-card">
+  <mat-card-header>
+    <mat-card-title class="m-b-0">Tooltips</mat-card-title>
+  </mat-card-header>
+  <mat-card-content class="b-t-1">
+    <div class="row">
+      <div class="col-lg-4 col-sm-6">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Basic</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-flat-button color="primary" matTooltip="Info about the action">
+              Button
+            </button>
+          </mat-card-content>
+        </mat-card>
+      </div>
+      <div class="col-lg-4 col-sm-6">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Uppercase</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-flat-button color="primary" matTooltip="Info about the action" matTooltipClass="text-uppercase">
+              Button
+            </button>
+          </mat-card-content>
+        </mat-card>
+      </div>
+      <div class="col-lg-4 col-sm-6">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Disabled on click</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-flat-button color="primary" matTooltip="Info about the action"
+              [matTooltipDisabled]="disabled.value" class="m-r-8">
+              Action
+            </button>
+
+            <mat-checkbox [formControl]="disabled" class="example-disabled-checkbox">
+              Tooltip disabled
+            </mat-checkbox>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Position</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-flat-button color="primary" #tooltip="matTooltip" matTooltip="Info about the action"
+              matTooltipPosition="below" matTooltipHideDelay="100000">
+              Below
+            </button>
+            <button mat-flat-button color="accent" #tooltip="matTooltip" matTooltip="Info about the action"
+              matTooltipPosition="above" class="m-l-8" matTooltipHideDelay="100000">
+              Above
+            </button>
+            <button mat-flat-button color="warn" #tooltip="matTooltip" matTooltip="Info about the action"
+              matTooltipPosition="left" class="m-l-8" matTooltipHideDelay="100000">
+              Left
+            </button>
+            <button mat-flat-button color="primary" #tooltip="matTooltip" matTooltip="Info about the action"
+              matTooltipPosition="right" class="m-l-8" matTooltipHideDelay="100000">
+              Right
+            </button>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Show and Hide</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <div class="row">
+              <div class="col-sm-4">
+                <mat-form-field class="w-100" appearance="outline">
+                  <mat-label>Show delay</mat-label>
+                  <input matInput type="number" [formControl]="showDelay" />
+                  <mat-hint>milliseconds</mat-hint>
+                </mat-form-field>
+              </div>
+              <div class="col-sm-4">
+                <mat-form-field class="w-100" appearance="outline">
+                  <mat-label>Hide delay</mat-label>
+                  <input matInput type="number" [formControl]="hideDelay2" />
+                  <mat-hint>milliseconds</mat-hint>
+                </mat-form-field>
+              </div>
+              <div class="col-sm-4">
+                <button mat-flat-button color="primary" matTooltip="Info about the action"
+                  [matTooltipShowDelay]="showDelay.value" [matTooltipHideDelay]="hideDelay2.value">
+                  Action
+                </button>
+              </div>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-4 col-sm-6">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Change Message</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-form-field class="w-100" appearance="outline">
+              <mat-label>Tooltip message</mat-label>
+              <input matInput [formControl]="message" />
+            </mat-form-field>
+
+            <button mat-flat-button color="primary" [matTooltip]="message.value || ''"
+              aria-label="Button that displays a tooltip with a custom message">
+              Action
+            </button>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+    </div>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/tooltips/tooltips.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/tooltips/tooltips.component.ts
@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSelectModule} from '@angular/material/select';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+@Component({
+  selector: 'app-tooltips',
+  imports: [
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatTooltipModule, MatCardModule, MatInputModule, MatCheckboxModule
+  ],
+  templateUrl: './tooltips.component.html',
+})
+export class AppTooltipsComponent {
+  //  disabled
+  disabled = new FormControl(false);
+
+  // show and hide
+  showDelay = new FormControl(1000);
+  hideDelay2 = new FormControl(2000);
+
+  // change message
+  message = new FormControl('Info about the action');
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/ui-components.routes.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/ui-components.routes.ts
@@ -0,0 +1,46 @@
+import { Routes } from '@angular/router';
+
+// ui
+import { AppBadgeComponent } from './badge/badge.component';
+import { AppChipsComponent } from './chips/chips.component';
+import { AppListsComponent } from './lists/lists.component';
+import { AppMenuComponent } from './menu/menu.component';
+import { AppTooltipsComponent } from './tooltips/tooltips.component';
+import { AppFormsComponent } from './forms/forms.component';
+import { AppTablesComponent } from './tables/tables.component';
+
+export const UiComponentsRoutes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'badge',
+        component: AppBadgeComponent,
+      },
+      {
+        path: 'chips',
+        component: AppChipsComponent,
+      },
+      {
+        path: 'lists',
+        component: AppListsComponent,
+      },
+      {
+        path: 'menu',
+        component: AppMenuComponent,
+      },
+      {
+        path: 'tooltips',
+        component: AppTooltipsComponent,
+      },
+      {
+        path: 'forms',
+        component: AppFormsComponent,
+      },
+      {
+        path: 'tables',
+        component: AppTablesComponent,
+      },
+    ],
+  },
+];
--- a/Web/themes/modernize/src/app/pipe/filter.pipe.ts
+++ b/Web/themes/modernize/src/app/pipe/filter.pipe.ts
@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'appFilter', standalone: true, pure: true })
+export class FilterPipe implements PipeTransform {
+  transform(items: any[], searchText: string): any[] {
+    if (!items) {
+      return [];
+    }
+    if (!searchText) {
+      return items;
+    }
+    searchText = searchText.toLocaleLowerCase();
+
+    return items.filter((it) => {
+      return it.displayName.toLocaleLowerCase().includes(searchText);
+    });
+  }
+}
--- a/Web/themes/modernize/src/app/services/core.service.ts
+++ b/Web/themes/modernize/src/app/services/core.service.ts
@@ -0,0 +1,21 @@
+import { Injectable, signal } from '@angular/core';
+import { AppSettings, defaults } from '../config';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class CoreService {
+    private optionsSignal = signal<AppSettings>(defaults);
+
+    getOptions() {
+        return this.optionsSignal();
+    }
+
+    setOptions(options: Partial<AppSettings>) {
+        this.optionsSignal.update((current) => ({
+            ...current,
+            ...options,
+        }));
+    }
+
+}
--- a/Web/themes/modernize/src/app/services/nav.service.ts
+++ b/Web/themes/modernize/src/app/services/nav.service.ts
@@ -0,0 +1,17 @@
+import { Injectable, signal } from '@angular/core';
+import { Event, NavigationEnd, Router } from '@angular/router';
+
+@Injectable({ providedIn: 'root' })
+export class NavService {
+  showClass: any = false;
+
+  public currentUrl = signal<string | undefined>(undefined);
+
+  constructor(private router: Router) {
+    this.router.events.subscribe((event: Event) => {
+      if (event instanceof NavigationEnd) {
+        this.currentUrl.set(event.urlAfterRedirects);
+      }
+    });
+  }
+}
--- a/Web/themes/modernize/src/assets/.gitkeep
+++ b/Web/themes/modernize/src/assets/.gitkeep
--- a/Web/themes/modernize/src/assets/i18n/de.json
+++ b/Web/themes/modernize/src/assets/i18n/de.json
@@ -0,0 +1,7 @@
+{
+  "Starter": "Menüebene",
+  "Menu Level": "Menüebene",
+  "Menu 1": "Menü 1",
+  "Menu 2": "Menü 2",
+  "Disabled": "Behinderte"
+}
--- a/Web/themes/modernize/src/assets/i18n/en.json
+++ b/Web/themes/modernize/src/assets/i18n/en.json
@@ -0,0 +1,7 @@
+{
+  "Starter": "Starter",
+  "Menu Level": "Menu Level",
+  "Menu 1": "Menu 1",
+  "Menu 2": "Menu 2",
+  "Disabled": "Disabled"
+}
--- a/Web/themes/modernize/src/assets/i18n/es.json
+++ b/Web/themes/modernize/src/assets/i18n/es.json
@@ -0,0 +1,7 @@
+{
+  "Starter": "Analítica",
+  "Menu Level": "Nível do menu",
+  "Menu 1": "Menu 1",
+  "Menu 2": "Menu 2",
+  "Disabled": "Desabilitada"
+}
--- a/Web/themes/modernize/src/assets/i18n/fr.json
+++ b/Web/themes/modernize/src/assets/i18n/fr.json
@@ -0,0 +1,7 @@
+{
+  "Starter": "Analytique",
+  "Menu Level": "Niveau menu",
+  "Menu 1": "Menu 1",
+  "Menu 2": "Menu 2",
+  "Disabled": "Désactivé"
+}
--- a/Web/themes/modernize/src/assets/images/backgrounds/rocket.png
+++ b/Web/themes/modernize/src/assets/images/backgrounds/rocket.png
--- a/Web/themes/modernize/src/assets/images/logos/dark-logo.svg
+++ b/Web/themes/modernize/src/assets/images/logos/dark-logo.svg
--- a/Web/themes/modernize/src/assets/images/logos/logo-adminmart.svg
+++ b/Web/themes/modernize/src/assets/images/logos/logo-adminmart.svg
@@ -0,0 +1,26 @@
+<svg width="174" height="37" viewBox="0 0 174 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_191_340)">
+<mask id="mask0_191_340" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="174" height="37">
+<path d="M173.774 0H0V37H173.774V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_191_340)">
+<path d="M14.9806 5.34988C15.3855 4.66071 15.9677 4.08845 16.6687 3.69058C17.3699 3.29271 18.1651 3.08325 18.9747 3.08325C19.7842 3.08325 20.5795 3.29271 21.2805 3.69058C21.9817 4.08845 22.5639 4.66071 22.9686 5.34988L35.7495 27.1114C36.1542 27.8005 36.3674 28.5823 36.3674 29.3782C36.3674 30.174 36.1542 30.9557 35.7495 31.6449C35.3446 32.3341 34.7625 32.9064 34.0615 33.3043C33.3604 33.7022 32.5651 33.9119 31.7555 33.9119H6.19296C5.38339 33.9119 4.58806 33.7022 3.88696 33.3043C3.18589 32.9064 2.60369 32.3341 2.19891 31.6449C1.79413 30.9557 1.58105 30.174 1.58105 29.3782C1.58106 28.5823 1.79415 27.8005 2.19893 27.1114L14.9806 5.34988Z" fill="#3772FF"/>
+<path d="M18.8598 17.6157C19.3927 17.9094 19.7853 18.3989 19.9514 18.9771C20.1174 19.555 20.0433 20.1742 19.7453 20.6986L12.5192 33.9124H6.93408L15.7208 18.4852C15.8689 18.2255 16.0675 17.997 16.3053 17.8128C16.5432 17.6286 16.8157 17.4922 17.1072 17.4114C17.3986 17.3306 17.7034 17.3071 18.0042 17.3422C18.3049 17.3773 18.5956 17.4701 18.8598 17.6157Z" fill="#90DBFB"/>
+<path d="M19.8809 33.916L24.0225 26.645C24.1704 26.3853 24.369 26.1567 24.6068 25.9724C24.8446 25.7881 25.1171 25.6516 25.4085 25.5708C25.7 25.4899 26.0048 25.4663 26.3056 25.5013C26.6063 25.5363 26.8972 25.6292 27.1613 25.7746C27.4256 25.92 27.6581 26.1152 27.8457 26.349C28.0332 26.5828 28.172 26.8506 28.2542 27.1371C28.3364 27.4237 28.3605 27.7233 28.3248 28.0189C28.2893 28.3146 28.1949 28.6004 28.0469 28.8601L25.1709 33.9107" fill="white"/>
+<path d="M63.6293 26.5951H67.1707L60.7964 10.6963H57.0194L50.5979 26.5951H54.0446L55.4375 22.9623H62.2364L63.6293 26.5951ZM58.837 14.1272L61.1506 20.1369H56.5236L58.837 14.1272Z" fill="white"/>
+<path d="M79.6801 10.3604H76.5876V16.6616C76.257 16.0786 75.3127 15.2937 73.3061 15.2937C70.0249 15.2937 67.7349 17.8276 67.7349 21.0567C67.7349 24.3979 70.0957 26.8646 73.4005 26.8646C74.9588 26.8646 76.1391 26.1919 76.6584 25.3173C76.6584 25.8331 76.7292 26.3713 76.7764 26.5955H79.7748C79.7276 26.147 79.6801 25.3398 79.6801 24.5998V10.3604ZM70.8981 21.0567C70.8981 19.0834 72.173 17.9622 73.7783 17.9622C75.3838 17.9622 76.6348 19.061 76.6348 21.0343C76.6348 23.0301 75.3838 24.1961 73.7783 24.1961C72.1259 24.1961 70.8981 23.0301 70.8981 21.0567Z" fill="white"/>
+<path d="M85.99 26.5957V20.1375C85.99 18.9266 86.7928 17.9624 88.1621 17.9624C89.5785 17.9624 90.2159 18.8593 90.2159 20.0478V26.5957H93.3319V20.1375C93.3319 18.949 94.1347 17.9624 95.4804 17.9624C96.9205 17.9624 97.5342 18.8593 97.5342 20.0478V26.5957H100.579V19.4424C100.579 16.4824 98.5257 15.249 96.3775 15.249C94.8428 15.249 93.6153 15.7424 92.6946 17.0878C92.1045 15.8993 90.8296 15.249 89.2479 15.249C87.973 15.249 86.4858 15.832 85.8485 16.9084V15.563H82.8503V26.5957H85.99Z" fill="white"/>
+<path d="M106.664 26.5951V15.5623H103.525V26.5951H106.664ZM103.146 11.952C103.146 12.9387 104.02 13.7684 105.083 13.7684C106.168 13.7684 107.018 12.9387 107.018 11.952C107.018 10.9205 106.168 10.0908 105.083 10.0908C104.02 10.0908 103.146 10.9205 103.146 11.952Z" fill="white"/>
+<path d="M112.929 20.2492C112.929 18.971 113.732 17.9619 115.101 17.9619C116.612 17.9619 117.249 18.9262 117.249 20.1595V26.5952H120.389V19.6437C120.389 17.2219 119.067 15.271 116.187 15.271C114.936 15.271 113.543 15.7868 112.835 16.9304V15.5625H109.789V26.5952H112.929V20.2492Z" fill="white"/>
+<path d="M142.25 26.5951V10.6963H137.812L132.902 22.1775L127.873 10.6963H123.577V26.5951H126.693V15.5399L131.509 26.5951H134.224L139.04 15.4502V26.5951H142.25Z" fill="white"/>
+<path d="M144.852 23.5903C144.852 25.317 146.363 26.9091 148.842 26.9091C150.565 26.9091 151.675 26.1467 152.265 25.2721C152.265 25.6982 152.312 26.3036 152.383 26.5951H155.263C155.192 26.2139 155.121 25.4291 155.121 24.8461V19.4194C155.121 17.1994 153.752 15.2261 150.069 15.2261C146.953 15.2261 145.277 17.1321 145.088 18.8588L147.874 19.4194C147.968 18.4551 148.724 17.6255 150.093 17.6255C151.415 17.6255 152.052 18.2758 152.052 19.0606C152.052 19.4418 151.84 19.7558 151.179 19.8455L148.322 20.2491C146.386 20.5182 144.852 21.617 144.852 23.5903ZM149.503 24.6891C148.488 24.6891 147.992 24.0612 147.992 23.4109C147.992 22.5588 148.629 22.1327 149.432 22.0206L152.052 21.6394V22.1327C152.052 24.0836 150.825 24.6891 149.503 24.6891Z" fill="white"/>
+<path d="M165.131 15.5177C164.895 15.4953 164.659 15.4729 164.399 15.4729C163.407 15.4729 161.802 15.742 161.094 17.1996V15.5626H158.048V26.5953H161.188V21.5499C161.188 19.1729 162.581 18.4329 164.186 18.4329C164.47 18.4329 164.777 18.4553 165.131 18.5226V15.5177Z" fill="white"/>
+<path d="M171.437 12.2666H168.604V13.8139C168.604 14.8005 168.038 15.563 166.81 15.563H166.22V18.209H168.321V23.3442C168.321 25.4745 169.737 26.7527 172.004 26.7527C172.924 26.7527 173.491 26.5957 173.774 26.4836V24.0169C173.609 24.0618 173.184 24.1066 172.806 24.1066C171.909 24.1066 171.437 23.7927 171.437 22.8284V18.209H173.774V15.563H171.437V12.2666Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_191_340">
+<rect width="174" height="37" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/Web/themes/modernize/src/assets/images/products/product-1.png
+++ b/Web/themes/modernize/src/assets/images/products/product-1.png
--- a/Web/themes/modernize/src/assets/images/products/product-2.png
+++ b/Web/themes/modernize/src/assets/images/products/product-2.png
--- a/Web/themes/modernize/src/assets/images/products/product-3.png
+++ b/Web/themes/modernize/src/assets/images/products/product-3.png
--- a/Web/themes/modernize/src/assets/images/products/product-4.png
+++ b/Web/themes/modernize/src/assets/images/products/product-4.png
--- a/Web/themes/modernize/src/assets/images/products/s11.jpg
+++ b/Web/themes/modernize/src/assets/images/products/s11.jpg
--- a/Web/themes/modernize/src/assets/images/products/s4.jpg
+++ b/Web/themes/modernize/src/assets/images/products/s4.jpg
--- a/Web/themes/modernize/src/assets/images/products/s5.jpg
+++ b/Web/themes/modernize/src/assets/images/products/s5.jpg
--- a/Web/themes/modernize/src/assets/images/products/s6.jpg
+++ b/Web/themes/modernize/src/assets/images/products/s6.jpg
--- a/Web/themes/modernize/src/assets/images/products/s7.jpg
+++ b/Web/themes/modernize/src/assets/images/products/s7.jpg
--- a/Web/themes/modernize/src/assets/images/products/s9.jpg
+++ b/Web/themes/modernize/src/assets/images/products/s9.jpg
--- a/Web/themes/modernize/src/assets/images/profile/user-1.jpg
+++ b/Web/themes/modernize/src/assets/images/profile/user-1.jpg
--- a/Web/themes/modernize/src/assets/images/profile/user-2.jpg
+++ b/Web/themes/modernize/src/assets/images/profile/user-2.jpg
--- a/Web/themes/modernize/src/assets/images/profile/user-3.jpg
+++ b/Web/themes/modernize/src/assets/images/profile/user-3.jpg
--- a/Web/themes/modernize/src/assets/images/profile/user-4.jpg
+++ b/Web/themes/modernize/src/assets/images/profile/user-4.jpg
--- a/Web/themes/modernize/src/assets/images/svgs/angular-cat-icon.svg
+++ b/Web/themes/modernize/src/assets/images/svgs/angular-cat-icon.svg
@@ -0,0 +1,12 @@
+<svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_908_99)">
+<path d="M0.0102539 4.51888L12.7873 0.0693359L25.9085 4.43976L23.7839 20.9624L12.7873 26.9149L1.96274 21.0415L0.0102539 4.51888Z" fill="#E23237"/>
+<path d="M25.9087 4.43976L12.7876 0.0693359V26.9149L23.7842 20.9723L25.9087 4.43976Z" fill="#B52E31"/>
+<path d="M12.8078 3.2041L4.84619 20.5178L7.82037 20.4683L9.41883 16.5626H16.561L18.3112 20.5178L21.1539 20.5672L12.8078 3.2041ZM12.8281 8.75121L15.519 14.2488H10.4607L12.8281 8.75121Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_908_99">
+<rect width="26" height="27" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/Web/themes/modernize/src/assets/images/svgs/bt-cat-icon.svg
+++ b/Web/themes/modernize/src/assets/images/svgs/bt-cat-icon.svg
@@ -0,0 +1,10 @@
+<svg width="30" height="23" viewBox="0 0 30 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.74151 0C5.09409 0 3.87508 1.44193 3.92967 3.00566C3.98206 4.50798 3.91399 6.45371 3.42418 8.04045C2.93261 9.63164 2.10186 10.64 0.744629 10.7694V12.2306C2.10186 12.3603 2.93261 13.3681 3.42412 14.9596C3.91399 16.5463 3.982 18.492 3.92961 19.9943C3.87503 21.5578 5.09404 23 6.74174 23H23.6223C25.2697 23 26.4885 21.5581 26.4339 19.9943C26.3815 18.492 26.4496 16.5463 26.9394 14.9596C27.431 13.3681 28.2597 12.3599 29.617 12.2306V10.7694C28.2598 10.6397 27.431 9.63187 26.9394 8.04045C26.4496 6.45393 26.3815 4.50798 26.4339 3.00566C26.4885 1.44215 25.2697 0 23.6223 0H6.74128H6.74151Z" fill="url(#paint0_linear_908_106)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3209 14.1549C20.3209 16.3081 18.7148 17.6139 16.0494 17.6139H11.5123C11.3825 17.6139 11.2581 17.5624 11.1663 17.4706C11.0745 17.3788 11.0229 17.2544 11.0229 17.1246V5.86925C11.0229 5.73946 11.0745 5.61499 11.1663 5.52321C11.2581 5.43144 11.3825 5.37988 11.5123 5.37988H16.0236C18.2461 5.37988 19.7046 6.58373 19.7046 8.43201C19.7046 9.72929 18.7234 10.8907 17.4734 11.0941V11.1618C19.1751 11.3485 20.3209 12.527 20.3209 14.1549ZM15.5547 6.93115H12.9677V10.5853H15.1466C16.831 10.5853 17.7598 9.90704 17.7598 8.69468C17.7596 7.55851 16.9611 6.93115 15.5547 6.93115ZM12.9677 12.0352V16.0622H15.6499C17.4037 16.0622 18.3326 15.3584 18.3326 14.036C18.3326 12.7135 17.3776 12.035 15.5371 12.035H12.9677V12.0352Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_908_106" x1="0.744629" y1="11.5" x2="29.617" y2="11.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8B12FD"/>
+<stop offset="1" stop-color="#6E11F4"/>
+</linearGradient>
+</defs>
+</svg>
--- a/Web/themes/modernize/src/assets/images/svgs/facebook-icon.svg
+++ b/Web/themes/modernize/src/assets/images/svgs/facebook-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" viewBox="-204.79995 -341.33325 1774.9329 2047.9995"><path d="M1365.333 682.667C1365.333 305.64 1059.693 0 682.667 0 305.64 0 0 305.64 0 682.667c0 340.738 249.641 623.16 576 674.373V880H402.667V682.667H576v-150.4c0-171.094 101.917-265.6 257.853-265.6 74.69 0 152.814 13.333 152.814 13.333v168h-86.083c-84.804 0-111.25 52.623-111.25 106.61v128.057h189.333L948.4 880H789.333v477.04c326.359-51.213 576-333.635 576-674.373" fill="#1877f2"/><path d="M948.4 880l30.267-197.333H789.333V554.609C789.333 500.623 815.78 448 900.584 448h86.083V280s-78.124-13.333-152.814-13.333c-155.936 0-257.853 94.506-257.853 265.6v150.4H402.667V880H576v477.04a687.805 687.805 0 00106.667 8.293c36.288 0 71.91-2.84 106.666-8.293V880H948.4" fill="#fff"/></svg>
--- a/Web/themes/modernize/src/assets/images/svgs/google-icon.svg
+++ b/Web/themes/modernize/src/assets/images/svgs/google-icon.svg
@@ -0,0 +1,6 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.9851 14.2618C27.9851 13.1146 27.8899 12.2775 27.6837 11.4094H14.2788V16.5871H22.1472C21.9886 17.8738 21.132 19.8116 19.2283 21.1137L19.2016 21.287L23.44 24.4956L23.7336 24.5242C26.4304 22.0904 27.9851 18.5093 27.9851 14.2618Z" fill="#4285F4"/>
+<path d="M14.279 27.904C18.1338 27.904 21.37 26.6637 23.7338 24.5245L19.2285 21.114C18.0228 21.9356 16.4047 22.5092 14.279 22.5092C10.5034 22.5092 7.29894 20.0754 6.15663 16.7114L5.9892 16.7253L1.58205 20.0583L1.52441 20.2149C3.87224 24.7725 8.69486 27.904 14.279 27.904Z" fill="#34A853"/>
+<path d="M6.15656 16.7113C5.85516 15.8432 5.68072 14.913 5.68072 13.9519C5.68072 12.9907 5.85516 12.0606 6.14071 11.1925L6.13272 11.0076L1.67035 7.62109L1.52435 7.68896C0.556704 9.58024 0.00146484 11.7041 0.00146484 13.9519C0.00146484 16.1997 0.556704 18.3234 1.52435 20.2147L6.15656 16.7113Z" fill="#FBBC05"/>
+<path d="M14.279 5.3947C16.9599 5.3947 18.7683 6.52635 19.7995 7.47204L23.8289 3.6275C21.3542 1.37969 18.1338 0 14.279 0C8.69485 0 3.87223 3.1314 1.52441 7.68899L6.14077 11.1925C7.29893 7.82856 10.5034 5.3947 14.279 5.3947Z" fill="#EB4335"/>
+</svg>
--- a/Web/themes/modernize/src/assets/images/svgs/next-cat-icon.svg
+++ b/Web/themes/modernize/src/assets/images/svgs/next-cat-icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2141 0.00645944C11.1625 0.0111515 10.9982 0.0275738 10.8504 0.039304C7.44164 0.346635 4.24868 2.18593 2.22639 5.01291C1.10029 6.58476 0.380059 8.36775 0.107918 10.2563C0.0117302 10.9156 0 11.1103 0 12.0041C0 12.898 0.0117302 13.0927 0.107918 13.7519C0.760117 18.2587 3.96716 22.0452 8.31672 23.4481C9.0956 23.6991 9.91672 23.8704 10.8504 23.9736C11.2141 24.0135 12.7859 24.0135 13.1496 23.9736C14.7613 23.7953 16.1267 23.3965 17.4733 22.7091C17.6798 22.6035 17.7196 22.5754 17.6915 22.5519C17.6727 22.5378 16.793 21.3578 15.7372 19.9314L13.8182 17.339L11.4135 13.7801C10.0903 11.8235 9.00176 10.2235 8.99238 10.2235C8.98299 10.2211 8.97361 11.8024 8.96891 13.7331C8.96188 17.1138 8.95953 17.2499 8.9173 17.3296C8.85631 17.4446 8.80938 17.4915 8.71085 17.5431C8.63578 17.5807 8.57009 17.5877 8.21584 17.5877H7.80997L7.70205 17.5197C7.63167 17.4751 7.58006 17.4164 7.54487 17.3484L7.4956 17.2428L7.50029 12.539L7.50733 7.83285L7.58006 7.74136C7.6176 7.69209 7.69736 7.62875 7.75367 7.59825C7.84985 7.55133 7.88739 7.54664 8.29325 7.54664C8.77185 7.54664 8.85161 7.5654 8.97595 7.70147C9.01114 7.73901 10.3132 9.7003 11.871 12.0628C13.4287 14.4252 15.5589 17.651 16.6053 19.2346L18.5056 22.1132L18.6018 22.0499C19.4534 21.4962 20.3543 20.7079 21.0674 19.8868C22.5853 18.1437 23.5636 16.0182 23.8921 13.7519C23.9883 13.0927 24 12.898 24 12.0041C24 11.1103 23.9883 10.9156 23.8921 10.2563C23.2399 5.74957 20.0328 1.96306 15.6833 0.560125C14.9161 0.311445 14.0997 0.140184 13.1848 0.036958C12.9595 0.0134976 11.4088 -0.0123089 11.2141 0.00645944ZM16.1267 7.26511C16.2393 7.32142 16.3308 7.42933 16.3636 7.54194C16.3824 7.60294 16.3871 8.90734 16.3824 11.8469L16.3754 16.0651L15.6317 14.9249L14.8856 13.7848V10.7185C14.8856 8.73608 14.895 7.62171 14.9091 7.56775C14.9466 7.43637 15.0287 7.33315 15.1413 7.27215C15.2375 7.22288 15.2727 7.21819 15.6411 7.21819C15.9883 7.21819 16.0493 7.22288 16.1267 7.26511Z" fill="black"/>
+<path d="M18.3869 22.1645C18.3048 22.2161 18.279 22.2513 18.3517 22.2114C18.4033 22.1809 18.4878 22.1176 18.4737 22.1152C18.4667 22.1152 18.4268 22.1387 18.3869 22.1645ZM18.225 22.2701C18.1828 22.3029 18.1828 22.3053 18.2344 22.2795C18.2626 22.2654 18.286 22.249 18.286 22.2443C18.286 22.2255 18.2743 22.2302 18.225 22.2701ZM18.1077 22.3405C18.0655 22.3733 18.0655 22.3756 18.1171 22.3498C18.1453 22.3358 18.1687 22.3193 18.1687 22.3146C18.1687 22.2959 18.157 22.3006 18.1077 22.3405ZM17.9904 22.4108C17.9482 22.4437 17.9482 22.446 17.9998 22.4202C18.028 22.4061 18.0514 22.3897 18.0514 22.385C18.0514 22.3663 18.0397 22.371 17.9904 22.4108ZM17.8121 22.5047C17.723 22.5516 17.7277 22.5704 17.8168 22.5258C17.8567 22.5047 17.8872 22.4836 17.8872 22.4789C17.8872 22.4624 17.8848 22.4648 17.8121 22.5047Z" fill="black"/>
+</svg>
--- a/Web/themes/modernize/src/assets/images/svgs/nuxt-cat-icon.svg
+++ b/Web/themes/modernize/src/assets/images/svgs/nuxt-cat-icon.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="24" viewBox="0 0 36 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8181 1.2951C14.8138 -0.431701 12.3031 -0.431701 11.2988 1.2951L0.353465 20.1146C-0.650832 21.8415 0.604536 24 2.61314 24H11.1576C10.2994 23.2499 9.98151 21.9523 10.631 20.8389L18.9205 6.62947L15.8181 1.2951Z" fill="#80EEC0"/>
+<path d="M22.7535 5.42292C23.5847 4.01007 25.6625 4.01007 26.4937 5.42292L35.5518 20.8207C36.383 22.2335 35.3441 23.9996 33.6817 23.9996H15.5654C13.9032 23.9996 12.8642 22.2335 13.6954 20.8207L22.7535 5.42292Z" fill="#00DC82"/>
+</svg>
--- a/Web/themes/modernize/src/assets/images/svgs/react-cat-icon.svg
+++ b/Web/themes/modernize/src/assets/images/svgs/react-cat-icon.svg
@@ -0,0 +1,4 @@
+<svg width="27" height="24" viewBox="0 0 27 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.0741 11.6127C26.0741 9.8854 23.911 8.24846 20.5946 7.23335C21.3599 3.85318 21.0198 1.16393 19.521 0.30294C19.1756 0.10098 18.7716 0.00531465 18.3305 0.00531465V1.1905C18.575 1.1905 18.7716 1.23833 18.9364 1.32868C19.6592 1.74323 19.9728 3.32171 19.7283 5.35193C19.6698 5.85152 19.5742 6.37768 19.4572 6.91447C18.4155 6.65936 17.2782 6.46271 16.0824 6.33516C15.3649 5.35193 14.6208 4.45906 13.8714 3.67779C15.6041 2.06743 17.2304 1.18519 18.3358 1.18519V0C16.8743 0 14.961 1.04169 13.0264 2.8487C11.0918 1.05232 9.17854 0.021259 7.71699 0.021259V1.20644C8.81714 1.20644 10.4488 2.08337 12.1814 3.68311C11.4373 4.46438 10.6932 5.35193 9.98638 6.33516C8.78525 6.46271 7.6479 6.65936 6.60621 6.91978C6.48397 6.38831 6.39362 5.87278 6.32984 5.37851C6.08005 3.34828 6.38831 1.76981 7.1058 1.34994C7.26524 1.25428 7.47251 1.21176 7.71699 1.21176V0.0265737C7.27055 0.0265737 6.86663 0.122239 6.51586 0.324199C5.02242 1.18519 4.68759 3.86912 5.45823 7.23866C2.15247 8.25909 0 9.89072 0 11.6127C0 13.34 2.1631 14.9769 5.47949 15.992C4.71417 19.3722 5.05431 22.0615 6.55306 22.9224C6.89852 23.1244 7.30244 23.2201 7.74888 23.2201C9.21043 23.2201 11.1237 22.1784 13.0583 20.3714C14.9929 22.1677 16.9062 23.1988 18.3677 23.1988C18.8141 23.1988 19.2181 23.1031 19.5688 22.9012C21.0623 22.0402 21.3971 19.3563 20.6265 15.9867C23.9216 14.9716 26.0741 13.3347 26.0741 11.6127ZM19.1543 8.06776C18.9576 8.75336 18.7132 9.46022 18.4368 10.1671C18.2189 9.7419 17.9904 9.31673 17.7406 8.89155C17.4961 8.46637 17.2357 8.05182 16.9753 7.6479C17.7299 7.75951 18.4581 7.89769 19.1543 8.06776ZM16.7201 13.728C16.3056 14.4454 15.8804 15.1257 15.4393 15.7582C14.6474 15.8273 13.8449 15.8645 13.037 15.8645C12.2345 15.8645 11.432 15.8273 10.6454 15.7635C10.2043 15.131 9.77379 14.4561 9.35924 13.7439C8.95532 13.0477 8.58861 12.3408 8.25378 11.6286C8.58329 10.9165 8.95532 10.2043 9.35393 9.50805C9.76848 8.79057 10.1937 8.11028 10.6348 7.47783C11.4267 7.40874 12.2292 7.37153 13.037 7.37153C13.8396 7.37153 14.6421 7.40874 15.4287 7.47251C15.8698 8.10497 16.3003 8.77994 16.7148 9.49211C17.1187 10.1883 17.4855 10.8952 17.8203 11.6074C17.4855 12.3195 17.1187 13.0317 16.7201 13.728ZM18.4368 13.037C18.7238 13.7492 18.9683 14.4614 19.1702 15.1523C18.474 15.3224 17.7406 15.4659 16.9806 15.5775C17.241 15.1682 17.5014 14.7484 17.7459 14.3179C17.9904 13.8927 18.2189 13.4622 18.4368 13.037ZM13.0477 18.7079C12.5534 18.1976 12.0591 17.629 11.5702 17.0071C12.0485 17.0284 12.5375 17.0443 13.0317 17.0443C13.5313 17.0443 14.0256 17.0337 14.5092 17.0071C14.0309 17.629 13.5366 18.1976 13.0477 18.7079ZM9.0935 15.5775C8.33881 15.4659 7.6107 15.3277 6.91447 15.1576C7.11111 14.472 7.35559 13.7652 7.63195 13.0583C7.84986 13.4835 8.07839 13.9087 8.32818 14.3338C8.57798 14.759 8.83308 15.1736 9.0935 15.5775ZM13.0211 4.51752C13.5154 5.02774 14.0096 5.59641 14.4986 6.21824C14.0203 6.19698 13.5313 6.18103 13.037 6.18103C12.5375 6.18103 12.0432 6.19166 11.5595 6.21824C12.0379 5.59641 12.5321 5.02774 13.0211 4.51752ZM9.08819 7.6479C8.82777 8.05713 8.56735 8.477 8.32287 8.90749C8.07839 9.33267 7.84986 9.75785 7.63195 10.183C7.34496 9.47085 7.10048 8.75868 6.89852 8.06776C7.59475 7.90301 8.32819 7.75951 9.08819 7.6479ZM4.27836 14.3019C2.39694 13.4994 1.17987 12.4471 1.17987 11.6127C1.17987 10.7783 2.39694 9.72064 4.27836 8.92343C4.73543 8.72679 5.23501 8.5514 5.75054 8.38665C6.05348 9.42833 6.45208 10.5125 6.94635 11.6233C6.4574 12.7288 6.06411 13.8077 5.76648 14.844C5.24033 14.6793 4.74074 14.4986 4.27836 14.3019ZM7.13768 21.8967C6.41488 21.4821 6.10131 19.9037 6.34579 17.8734C6.40425 17.3739 6.49992 16.8477 6.61684 16.3109C7.65853 16.566 8.79588 16.7627 9.9917 16.8902C10.7092 17.8734 11.4532 18.7663 12.2026 19.5476C10.47 21.1579 8.84371 22.0402 7.73825 22.0402C7.49909 22.0349 7.29713 21.987 7.13768 21.8967ZM19.7442 17.8469C19.994 19.8771 19.6858 21.4556 18.9683 21.8754C18.8088 21.9711 18.6016 22.0136 18.3571 22.0136C17.2569 22.0136 15.6253 21.1367 13.8927 19.537C14.6368 18.7557 15.3808 17.8681 16.0877 16.8849C17.2888 16.7574 18.4262 16.5607 19.4679 16.3003C19.5901 16.8371 19.6858 17.3526 19.7442 17.8469ZM21.7904 14.3019C21.3333 14.4986 20.8337 14.674 20.3182 14.8387C20.0153 13.797 19.6167 12.7128 19.1224 11.6021C19.6114 10.4966 20.0047 9.4177 20.3023 8.38133C20.8284 8.54609 21.328 8.72679 21.7957 8.92343C23.6771 9.72596 24.8942 10.7783 24.8942 11.6127C24.8889 12.4471 23.6718 13.5047 21.7904 14.3019Z" fill="#48CBEF"/>
+<path d="M13.0319 14.0413C14.3733 14.0413 15.4607 12.9538 15.4607 11.6124C15.4607 10.271 14.3733 9.18359 13.0319 9.18359C11.6905 9.18359 10.603 10.271 10.603 11.6124C10.603 12.9538 11.6905 14.0413 13.0319 14.0413Z" fill="#48CBEF"/>
+</svg>
--- a/Web/themes/modernize/src/assets/images/svgs/tailwindcss.svg
+++ b/Web/themes/modernize/src/assets/images/svgs/tailwindcss.svg
@@ -0,0 +1 @@
+<svg height="1504" preserveAspectRatio="xMidYMid" width="2500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 153.6"><linearGradient id="a" x1="-2.778%" y1="32%" y2="67.556%"><stop offset="0" stop-color="#2298bd"/><stop offset="1" stop-color="#0ed7b5"/></linearGradient><path d="M128 0C93.867 0 72.533 17.067 64 51.2 76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0zM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2 9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8z" fill="url(#a)"/></svg>
--- a/Web/themes/modernize/src/assets/images/svgs/vue-cat-icon.svg
+++ b/Web/themes/modernize/src/assets/images/svgs/vue-cat-icon.svg
@@ -0,0 +1,11 @@
+<svg width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_910_151)">
+<path d="M17.2334 0L14 5.54247L10.7666 0H0L14 24L28 0H17.2334Z" fill="#4DBA87"/>
+<path d="M17.2335 0L14.0001 5.54247L10.7667 0H5.6001L14.0001 14.3993L22.4001 0H17.2335Z" fill="#435466"/>
+</g>
+<defs>
+<clipPath id="clip0_910_151">
+<rect width="28" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/Web/themes/modernize/src/assets/scss/_container.scss
+++ b/Web/themes/modernize/src/assets/scss/_container.scss
@@ -0,0 +1,141 @@
+@use "variables" as *;
+
+*,
+:after,
+:before {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: $font-family;
+  line-height: 1.334rem;
+  overflow-x: hidden;
+  color: var(--mat-sys-on-background);
+}
+
+.app-topstrip{
+  position: fixed;
+  top: 0;
+  z-index: 10;
+}
+
+.mainWrapper {
+  display: flex;
+  min-height: calc(100vh - 72px);
+  width: 100%;
+  flex: 1;
+  margin-top: 72px;
+}
+
+@media (max-width: 991px){
+  .mainWrapper{
+    margin-top: 157px;
+  }
+}
+
+@media (max-width: 767px){
+  .mainWrapper{
+    margin-top: 108px;
+  }
+}
+
+.container {
+  max-width: 1200px;
+  padding-left: 24px;
+  padding-right: 24px;
+  margin: 0 auto;
+
+  &.full-width {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+}
+
+.pageWrapper {
+  padding: 24px;
+  min-height: calc(100vh - 70px);
+
+  margin: 0 auto;
+
+  &.maxWidth {
+    max-width: $boxedWidth;
+  }
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.shadow-none {
+  box-shadow: none !important;
+}
+
+.rounded {
+  border-radius: $border-radius !important;
+}
+
+.rounded-circle {
+  border-radius: 50% !important;
+}
+
+.rounded-pill {
+  border-radius: 25px !important;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.text-decoration-none {
+  text-decoration: none;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.table-responsive {
+  overflow-x: auto;
+
+  td,
+  mat-cell {
+    white-space: nowrap;
+    padding: 16px;
+  }
+}
+
+.op-5 {
+  opacity: 0.5;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+a {
+  color: var(--mat-sys-on-background);
+
+  &:hover {
+    color: $primary;
+  }
+}
+
+pre {
+  margin: 0;
+  white-space: nowrap;
+}
+
+td.hljs-ln-line.hljs-ln-numbers {
+  padding-right: 10px;
+}
+
+@media (min-width: 768px) {
+  html .flex-sm-row {
+    flex-direction: row !important;
+  }
+}
--- a/Web/themes/modernize/src/assets/scss/_variables.scss
+++ b/Web/themes/modernize/src/assets/scss/_variables.scss
@@ -0,0 +1,44 @@
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");
+
+// font
+$font-family: "Plus Jakarta Sans", sans-serif;
+
+// light color variable
+
+// Sidenav
+$sidenav-desktop: 270px !default;
+$sidenav-mini: 80px !default;
+$header-height: 70px !default;
+
+//BorderColor
+$borderColor: var(--mat-sys-outline-variant);
+$borderformColor: var(--mat-sys-outline-variant);
+
+// custom
+$primary: var(--mat-sys-primary);
+$secondary: var(--mat-sys-secondary);
+$accent: var(--mat-sys-secondary);
+$error: var(--mat-sys-error);
+$warning: #ffae1f;
+$success: #13deb9;
+$white: #ffffff;
+
+$light: var(--mat-sys-surface-bright);
+$light-primary: var(--mat-sys-primary-fixed-dim);
+$light-secondary: var(--mat-sys-secondary-fixed-dim);
+$light-accent: var(--mat-sys-secondary-fixed-dim);
+$light-error: var(--mat-sys-error-fixed-dim);
+$light-warning: #ffad1f40;
+$light-success: #13deb940;
+$dark: #223742;
+
+// layout
+$boxedWidth: 1200px;
+$border-radius: 7px;
+
+$card-spacer: 24px;
+
+$text-color: var(--mat-sys-on-background);
+
+$dark-text-secondary: rgba(255, 255, 255, 0.67);
+$dark-body-bg: #141a21;
--- a/Web/themes/modernize/src/assets/scss/grid/_grid.scss
+++ b/Web/themes/modernize/src/assets/scss/grid/_grid.scss
@@ -0,0 +1,35 @@
+@use 'variables';
+@use 'mixins';
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: variables.$grid-gutter * -.5;
+  margin-left: variables.$grid-gutter * -.5;
+}
+
+.no-gutters {
+  margin-right: 0;
+  margin-left: 0;
+
+  > .col,
+  > [class*='col-'] {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+@include mixins.make-grid-columns();
+
+
+@each $breakpoint, $infix in variables.$breakpoint-infixs {
+  @if ($breakpoint== 'xsmall') {
+    @include mixins.loop-grid-columns(variables.$grid-columns, $infix);
+  }
+
+  @else {
+    @include mixins.bp-gt($breakpoint) {
+      @include mixins.loop-grid-columns(variables.$grid-columns, $infix);
+    }
+  }
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" viewBox="-204.79995 -341.33325 1774.9329 2047.9995"><path d="M1365.333 682.667C1365.333 305.64 1059.693 0 682.667 0 305.64 0 0 305.64 0 682.667c0 340.738 249.641 623.16 576 674.373V880H402.667V682.667H576v-150.4c0-171.094 101.917-265.6 257.853-265.6 74.69 0 152.814 13.333 152.814 13.333v168h-86.083c-84.804 0-111.25 52.623-111.25 106.61v128.057h189.333L948.4 880H789.333v477.04c326.359-51.213 576-333.635 576-674.373" fill="#1877f2"/><path d="M948.4 880l30.267-197.333H789.333V554.609C789.333 500.623 815.78 448 900.584 448h86.083V280s-78.124-13.333-152.814-13.333c-155.936 0-257.853 94.506-257.853 265.6v150.4H402.667V880H576v477.04a687.805 687.805 0 00106.667 8.293c36.288 0 71.91-2.84 106.666-8.293V880H948.4" fill="#fff"/></svg>
				`@@ -0,0 +1 @@`
				<svg height="1504" preserveAspectRatio="xMidYMid" width="2500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 153.6"><linearGradient id="a" x1="-2.778%" y1="32%" y2="67.556%"><stop offset="0" stop-color="#2298bd"/><stop offset="1" stop-color="#0ed7b5"/></linearGradient><path d="M128 0C93.867 0 72.533 17.067 64 51.2 76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0zM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2 9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8z" fill="url(#a)"/></svg>