diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index b5303cc..0ddbd78 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -90,14 +90,4 @@
         </svg>
         -->
     </div>
-    <!--
-    <mat-card>
-        <mat-card-header>
-            <mat-card-title>Card title</mat-card-title>
-        </mat-card-header>
-        <mat-card-content class="text-center mt-4">
-        </mat-card-content>
-    </mat-card>
-    -->
-
 </div>
\ No newline at end of file
diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
index 5fe7004..0034d03 100644
--- a/src/app/components/home/home.component.scss
+++ b/src/app/components/home/home.component.scss
@@ -1,6 +1,26 @@
 /* Home */
 //@use 'variable' as var;
-
+.icon-xxsmall {
+    transform: scale(0.25);
+}
+.icon-xsmall {
+    font-size: 16px;
+    height: 16px;
+    width: 16px;
+}
+.icon-small {
+    font-size: 18px;
+    height: 18px;
+    width: 18px;
+}
+.icon-medium {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+}
+.hstack .value {
+    min-width: 56px;
+}
 
 /*
 #FF41F8
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index 147ff34..748b29e 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -4,17 +4,18 @@ import { trigger, state, style, animate, transition } from '@angular/animations'
 import { Component, DestroyRef, inject, OnInit } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
 
-import { ListErrorsComponent,  } from 'src/app/components/shared';
+import { ListErrorsComponent } from 'src/app/components/shared';
 import { Errors } from 'src/app/core/models';
+//import { UtilitiesService } from 'src/app/core/services';
 //import { UserService } from 'src/app/core/services';
-
 @Component({
     selector: 'app-home',
     standalone: true,
     imports: [
         DatePipe,
-        MatCardModule, MatDividerModule,
+        MatCardModule, MatDividerModule, MatIconModule,
         ListErrorsComponent
     ],
     templateUrl: './home.component.html',
@@ -41,11 +42,33 @@ export class HomeComponent implements OnInit {
     public now = new Date();
 
     constructor(
-        private titleService: Title
+        private _titleService: Title,
+        //private _utilitiesService: UtilitiesService
         //private _userService: UserService
     ) { }
 
     ngOnInit() {
-        this.titleService.setTitle(this.title);
+
+        this._titleService.setTitle(this.title);
+        /*
+        type CreateArrayWithLengthX<
+            LENGTH extends number,
+            ACC extends unknown[] = [],
+        > = ACC['length'] extends LENGTH
+        ? ACC
+        : CreateArrayWithLengthX<LENGTH, [...ACC, 1]>;
+    
+        type NumericRange<
+            START_ARR extends number[],
+            END extends number,
+            ACC extends number = never>
+            = START_ARR['length'] extends END
+            ? ACC | END
+            : NumericRange<[...START_ARR, 1], END, ACC | START_ARR['length']>;
+    
+        //type TWENTY_TO_FORTY = NumericRange<CreateArrayWithLengthX<7>, 13, 7>;
+        //type TWENTY_TO_FORTY = NumericRange<CreateArrayWithLengthX<13>, 19>;
+        type TWENTY_TO_FORTY = NumericRange<CreateArrayWithLengthX<1>, 10>;
+        */
     }
 }
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index a3de357..d0f6108 100644
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -3,7 +3,9 @@ export * from './aeronefs/aeronefs.component';
 export * from './calculator/calculator.component';
 export * from './canopies/canopies.component';
 export * from './dashboard/dashboard.component';
+export * from './demo/demo.component';
 export * from './dropzones/dropzones.component';
+export * from './herowars/herowars.component';
 export * from './home/home.component';
 export * from './jump/jump.component';
 export * from './jumps/jumps.component';
diff --git a/src/app/components/jumps/jumps.component.html b/src/app/components/jumps/jumps.component.html
index 1e587bf..217365f 100644
--- a/src/app/components/jumps/jumps.component.html
+++ b/src/app/components/jumps/jumps.component.html
@@ -89,7 +89,7 @@
             </div>
         </mat-card-content>
     </mat-card>
-    <mat-card class="banner">
+    <mat-card class="bannercard">
         <mat-card-header>
             <mat-card-title>Types de sauts</mat-card-title>
         </mat-card-header>
diff --git a/src/app/components/jumps/jumps.component.scss b/src/app/components/jumps/jumps.component.scss
index 60b1a7d..06eb3f2 100644
--- a/src/app/components/jumps/jumps.component.scss
+++ b/src/app/components/jumps/jumps.component.scss
@@ -3,7 +3,7 @@ element.style {
     padding: 0.9rem 1.1rem;
     border-radius: 0;
 }
-.banner {
+.bannercard {
     background-color: #202020;
     color: #ffffff;
     margin: 1.5rem -1.5rem -1.5rem -1.5rem;
diff --git a/src/app/components/product/product.component.html b/src/app/components/product/product.component.html
index 772b623..c95517f 100644
--- a/src/app/components/product/product.component.html
+++ b/src/app/components/product/product.component.html
@@ -1 +1,28 @@
-<p>product works!</p>
+<div @flyInOut>
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{ product.name }}<small>- Sachet {{ product.weightNet | number : '1.0' }} g</small></h1>
+            <h2 class="mb-1">{{ (product.priceRetail! * (1 + (product.priceTaxe! / 100))) | number : '1.2-2' }} € TTC</h2>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2 text-end">
+            <span class="fs-5 text-primary">{{ product.createdAt | date: 'dd/MM/yyyy' }}</span>
+        </div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <app-list-errors [errors]="errors"></app-list-errors>
+    <div class="d-flex">
+        {{ product.description }}
+    </div>
+    @if (product.tags) {
+    <mat-divider class="my-3"></mat-divider>
+    <div class="d-flex">
+        @for (tag of getProductTags(); track tag) {
+        <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+            <mat-icon class="align-middle me-1" fontIcon="tag"></mat-icon>
+            {{ tag.name }}
+        </span>
+        }
+    </div>
+    }
+</div>
\ No newline at end of file
diff --git a/src/app/components/product/product.component.ts b/src/app/components/product/product.component.ts
index dfd92fe..e75f9fc 100644
--- a/src/app/components/product/product.component.ts
+++ b/src/app/components/product/product.component.ts
@@ -1,12 +1,70 @@
-import { Component } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { DatePipe, DecimalPipe } from '@angular/common';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { Observable, Subscription } from 'rxjs';
+
+import { ListErrorsComponent, } from 'src/app/components/shared';
+import { Errors, Product, ProductPageData } from 'src/app/core/models';
 
 @Component({
-  selector: 'app-product',
-  standalone: true,
-  imports: [],
-  templateUrl: './product.component.html',
-  styleUrl: './product.component.scss'
+    selector: 'app-product',
+    standalone: true,
+    imports: [
+        DatePipe, DecimalPipe, RouterLink,
+        MatCardModule, MatDividerModule, MatIconModule,
+        ListErrorsComponent
+    ],
+    templateUrl: './product.component.html',
+    styleUrl: './product.component.scss',
+    animations: [
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateY(0)' })),
+            transition('void => *', [
+                style({ transform: 'translateY(-100%)' }),
+                animate(200)
+            ]),
+            transition('* => void', [
+                style({ transform: 'translateY(100%)' }),
+                animate(200)
+            ])
+        ])
+    ]
 })
-export class ProductComponent {
+export class ProductComponent implements OnInit, OnDestroy {
+    private _data: Subscription = new Subscription();
+    public title = 'Ad Astra - Produit';
+    public description = 'Encore un peu de patience, notre shop sera mis en ligne d\'ici peu.';
+    public errors: Errors = { errors: {} };
+    public destroyRef = inject(DestroyRef);
+    public product: Product = {} as Product;
 
+    constructor(
+        private route: ActivatedRoute,
+        private titleService: Title
+    ) { }
+
+    ngOnInit() {
+        const data$: Observable<{ pageData: ProductPageData }> = this.route.data as Observable<{ pageData: ProductPageData }>;
+        this._data = data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { pageData: ProductPageData }) => {
+            this.product = data.pageData.product;
+            this.title = this.product.name;
+            this.description = this.product.description;
+            this.titleService.setTitle(this.product.name);
+            console.log(this.product);
+        });
+    }
+
+    ngOnDestroy() {
+        this._data.unsubscribe();
+    }
+
+    getProductTags() {
+        return this.product.tags;
+    }
 }
diff --git a/src/app/components/products/products.component.html b/src/app/components/products/products.component.html
index d786d45..28ab7b2 100644
--- a/src/app/components/products/products.component.html
+++ b/src/app/components/products/products.component.html
@@ -1 +1,50 @@
-<p>products works!</p>
+<div @flyInOut>
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{ title }} <span class="ms-1 fs-3 text-muted">({{ productsCount }})</span></h1>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2 text-end">
+
+        </div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <app-list-errors [errors]="errors"></app-list-errors>
+    <div class="d-flex">
+        <div class="fs-4" [innerHtml]="description"></div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <div class="row">
+    @for (product of products; track product) {
+        <div class="col-xs-12 col-sm-6 col-md-4 col-xl-3">
+            <mat-card class="mb-3">
+                <mat-card-header class="d-flex rounded-top py-2 px-4">
+                    <div class="flex-fill">
+                        <mat-card-title>
+                            {{ product.name }}
+                        </mat-card-title>
+                    </div>
+                    <span class="flex-spacer"></span>
+                    <div class="align-self-center me-2 text-end">
+                        <span class="fs-4">Sachet {{ product.weightNet | number : '1.0' }} g</span>
+                    </div>
+                </mat-card-header>
+                <mat-card-content>
+                    <p class="card-text">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales ultrices dolor, ullamcorper cursus mauris.<br />
+                        Nam risus metus, porttitor eget lacinia nec, mollis ac augue. In hac habitasse platea dictumst.<br />
+                        Aliquam vel volutpat diam. Integer sed nulla posuere, commodo augue ac, tincidunt.
+                    </p>
+                    <mat-card-subtitle>
+                        {{ product.productCategories[0].name }} {{ product.brand.name }}
+                    </mat-card-subtitle>
+                    <div class="align-self-center me-2 text-end">
+                        <span class="fs-4 fw-medium text-primary">{{ (product.priceRetail! * (1 + (product.priceTaxe! / 100))) | number : '1.2-2' }} € TTC</span>
+                        <button mat-flat-button class="ms-2" color="teal" type="button">Ajouter au panier</button>
+                    </div>
+                </mat-card-content>
+            </mat-card>
+        </div>
+    }
+    </div>
+</div>
diff --git a/src/app/components/products/products.component.ts b/src/app/components/products/products.component.ts
index d26e594..3aa5269 100644
--- a/src/app/components/products/products.component.ts
+++ b/src/app/components/products/products.component.ts
@@ -1,12 +1,72 @@
-import { Component } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { DatePipe, DecimalPipe } from '@angular/common';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { Observable, Subscription } from 'rxjs';
+
+import { ListErrorsComponent, } from 'src/app/components/shared';
+import { Errors, Product, ProductsPageData } from 'src/app/core/models';
 
 @Component({
-  selector: 'app-products',
-  standalone: true,
-  imports: [],
-  templateUrl: './products.component.html',
-  styleUrl: './products.component.scss'
+    selector: 'app-products',
+    standalone: true,
+    imports: [
+        DatePipe, DecimalPipe, RouterLink,
+        MatButtonModule, MatCardModule, MatDividerModule, MatIconModule,
+        ListErrorsComponent
+    ],
+    templateUrl: './products.component.html',
+    styleUrl: './products.component.scss',
+    animations: [
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateY(0)' })),
+            transition('void => *', [
+                style({ transform: 'translateY(-100%)' }),
+                animate(200)
+            ]),
+            transition('* => void', [
+                style({ transform: 'translateY(100%)' }),
+                animate(200)
+            ])
+        ])
+    ]
 })
-export class ProductsComponent {
+export class ProductsComponent implements OnInit, OnDestroy {
+    private _data: Subscription = new Subscription();
+    public title = 'Ad Astra - Produit';
+    public description = 'Encore un peu de patience, notre shop sera mis en ligne d\'ici peu.';
+    public errors: Errors = { errors: {} };
+    public destroyRef = inject(DestroyRef);
+    public products: Array<Product> = [];
+    public productsCount = 0;
+
+    constructor(
+        private route: ActivatedRoute,
+        private titleService: Title
+    ) { }
+
+    ngOnInit() {
+        const data$: Observable<{ pageData: ProductsPageData }> = this.route.data as Observable<{ pageData: ProductsPageData }>;
+        this._data = data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { pageData: ProductsPageData }) => {
+            this.products = data.pageData.products;
+            this.productsCount = data.pageData.count;
+            //this.title = 'Fleurs CBD';
+            this.title = data.pageData.products[0].productCategories[0]!.name;
+            this.description = data.pageData.products[0].productCategories[0]!.description;
+            this.titleService.setTitle(this.title);
+            console.log(data.pageData);
+            console.log(this.products);
+        });
+    }
+
+    ngOnDestroy() {
+        this._data.unsubscribe();
+    }
 
 }
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index c5bfe2e..1742c8c 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -1,5 +1,5 @@
-<div class="banner bg-accent mat-elevation-z2">
-    <div class="d-flex mx-2 mx-md-3 mx-lg-4">
+<div class="banner mat-elevation-z2">
+    <div class="banner-content d-flex text-bg-accent bg-opacity-50">
         <img [src]="user.image" class="user-img me-3" [alt]="user.username" />
         <div class="flex-spacer">
             <h3 class="mb-0">{{bannerTitle}}</h3>
@@ -45,7 +45,7 @@
         </mat-card-content>
     </mat-card>
     <mat-card>
-        <mat-card-header class="bg-primary text-bg-primary rounded-top py-2 px-4">
+        <mat-card-header class="text-bg-primary rounded-top py-2 px-4">
             <div class="flex-fill">
                 <mat-card-title>
                     Mes commandes
@@ -156,687 +156,3 @@
         </mat-card-content>
     </mat-card>
 </div>
-<mat-divider class="my-4"></mat-divider>
-<!--
-turquoise
-cyan
-navy
-purple
-raspberry
-orange
-yellow
--->
-<div class="content">
-    <mat-card>
-        <mat-card-header class="bg-primary text-bg-primary rounded-top py-3 px-4">
-            <div class="flex-fill">
-                <mat-card-title>
-                    Buttons variants
-                </mat-card-title>
-                <mat-card-subtitle class="fw-normal text-white">
-                    turquoise / cyan / navy / purple / raspberry / orange / yellow / megna / magenta / pink
-                </mat-card-subtitle>
-            </div>
-            <span class="flex-spacer"></span>
-            <div class="flex-fill"></div>
-        </mat-card-header>
-        <mat-card-content>
-            <section class="mt-4">
-                <div class="mb-2">Links</div>
-                <div class="p-2">
-                    <a href="#" class="me-2 text-muted">Muted</a>
-                    <a href="#" class="me-2 text-primary">Primary</a>
-                    <a href="#" class="me-2 text-accent">Accent</a>
-                    <a href="#" class="me-2 text-warn">Warn</a>
-                    <a href="#" class="me-2 text-danger">Danger</a>
-                    <a href="#" class="me-2 text-info">Info</a>
-                    <a href="#" class="me-2 text-success">Success</a>
-                    <a href="#" class="me-2 text-turquoise">Turquoise</a>
-                    <a href="#" class="me-2 text-cyan">Cyan</a>
-                    <a href="#" class="me-2 text-navy">Navy</a>
-                    <a href="#" class="me-2 text-navy-light">Navy light</a>
-                    <a href="#" class="me-2 text-purple">Purple</a>
-                    <a href="#" class="me-2 text-purple-light">Purple light</a>
-                    <a href="#" class="me-2 text-raspberry">Raspberry</a>
-                    <a href="#" class="me-2 text-orange">Orange</a>
-                    <a href="#" class="me-2 text-yellow">Yellow</a>
-                    <a href="#" class="me-2 text-teal">Teal</a>
-                    <a href="#" class="me-2 text-megna">Megna</a>
-                    <a href="#" class="me-2 text-magenta">Magenta</a>
-                    <a href="#" class="me-2 text-pink">Pink</a>
-                </div>
-                <div class="p-2">
-                    <span class="me-2 text-muted">Muted</span>
-                    <span class="me-2 text-primary">Primary</span>
-                    <span class="me-2 text-accent">Accent</span>
-                    <span class="me-2 text-warn">Warn</span>
-                    <span class="me-2 text-danger">Danger</span>
-                    <span class="me-2 text-info">Info</span>
-                    <span class="me-2 text-success">Success</span>
-                    <span class="me-2 text-turquoise">Turquoise</span>
-                    <span class="me-2 text-cyan">Cyan</span>
-                    <span class="me-2 text-navy">Navy</span>
-                    <span class="me-2 text-navy-light">Navy light</span>
-                    <span class="me-2 text-purple">Purple</span>
-                    <span class="me-2 text-purple-light">Purple light</span>
-                    <span class="me-2 text-raspberry">Raspberry</span>
-                    <span class="me-2 text-orange">Orange</span>
-                    <span class="me-2 text-yellow">Yellow</span>
-                    <span class="me-2 text-teal">Teal</span>
-                    <span class="me-2 text-megna">Megna</span>
-                    <span class="me-2 text-magenta">Magenta</span>
-                    <span class="me-2 text-pink">Pink</span>
-                </div>
-            </section>
-            <mat-divider class="my-4"></mat-divider>
-            <section>
-                <div class="mb-2">Basic</div>
-                <div class="p-2">
-                    <button mat-button class="me-2">Basic</button>
-                    <button mat-button class="me-2" color="primary">Primary</button>
-                    <button mat-button class="me-2" color="accent">Accent</button>
-                    <button mat-button class="me-2" color="warn">Warn</button>
-                    <button mat-button class="me-2" color="danger">Danger</button>
-                    <button mat-button class="me-2" color="info">Info</button>
-                    <button mat-button class="me-2" color="success">Success</button>
-                    <button mat-button class="me-2" color="turquoise">Turquoise</button>
-                    <button mat-button class="me-2" color="cyan">Cyan</button>
-                    <button mat-button class="me-2" color="navy">Navy</button>
-                    <button mat-button class="me-2" color="navy-light">Navy light</button>
-                    <button mat-button class="me-2" color="purple">Purple</button>
-                    <button mat-button class="me-2" color="purple-light">Purple light</button>
-                    <button mat-button class="me-2" color="raspberry">Raspberry</button>
-                    <button mat-button class="me-2" color="orange">Orange</button>
-                    <button mat-button class="me-2" color="yellow">Yellow</button>
-                    <button mat-button class="me-2" color="teal">Teal</button>
-                    <button mat-button class="me-2" color="megna">Megna</button>
-                    <button mat-button class="me-2" color="magenta">Magenta</button>
-                    <button mat-button class="me-2" color="pink">Pink</button>
-                    <button mat-button class="me-2" disabled>Disabled</button>
-                    <a mat-button href="https://www.google.com/" target="_blank">Link</a>
-                </div>
-            </section>
-            <mat-divider class="my-4"></mat-divider>
-            <section>
-                <div class="mb-2">Stroked</div>
-                <div class="p-2">
-                    <button mat-stroked-button class="me-2">Basic</button>
-                    <button mat-stroked-button class="me-2" color="primary">Primary</button>
-                    <button mat-stroked-button class="me-2" color="accent">Accent</button>
-                    <button mat-stroked-button class="me-2" color="warn">Warn</button>
-                    <button mat-stroked-button class="me-2" color="danger">Danger</button>
-                    <button mat-stroked-button class="me-2" color="info">Info</button>
-                    <button mat-stroked-button class="me-2" color="success">Success</button>
-                    <button mat-stroked-button class="me-2" color="turquoise">Turquoise</button>
-                    <button mat-stroked-button class="me-2" color="cyan">Cyan</button>
-                    <button mat-stroked-button class="me-2" color="navy">Navy</button>
-                    <button mat-stroked-button class="me-2" color="navy-light">Navy light</button>
-                    <button mat-stroked-button class="me-2" color="purple">Purple</button>
-                    <button mat-stroked-button class="me-2" color="purple-light">Purple light</button>
-                    <button mat-stroked-button class="me-2" color="raspberry">Raspberry</button>
-                    <button mat-stroked-button class="me-2" color="orange">Orange</button>
-                    <button mat-stroked-button class="me-2" color="yellow">Yellow</button>
-                    <button mat-stroked-button class="me-2" color="teal">Teal</button>
-                    <button mat-stroked-button class="me-2" color="megna">Megna</button>
-                    <button mat-stroked-button class="me-2" color="magenta">Magenta</button>
-                    <button mat-stroked-button class="me-2" color="pink">Pink</button>
-                    <button mat-stroked-button class="me-2" disabled>Disabled</button>
-                    <a mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
-                </div>
-            </section>
-            <mat-divider class="my-4"></mat-divider>
-            <section>
-                <div class="mb-2">Flat</div>
-                <div class="p-2">
-                    <button mat-flat-button class="me-2">Basic</button>
-                    <button mat-flat-button class="me-2" color="primary">Primary</button>
-                    <button mat-flat-button class="me-2" color="accent">Accent</button>
-                    <button mat-flat-button class="me-2" color="warn">Warn</button>
-                    <button mat-flat-button class="me-2" color="danger">Danger</button>
-                    <button mat-flat-button class="me-2" color="info">Info</button>
-                    <button mat-flat-button class="me-2" color="success">Success</button>
-                    <button mat-flat-button class="me-2" color="turquoise">Turquoise</button>
-                    <button mat-flat-button class="me-2" color="cyan">Cyan</button>
-                    <button mat-flat-button class="me-2" color="navy">Navy</button>
-                    <button mat-flat-button class="me-2" color="navy-light">Navy light</button>
-                    <button mat-flat-button class="me-2" color="purple">Purple</button>
-                    <button mat-flat-button class="me-2" color="purple-light">Purple light</button>
-                    <button mat-flat-button class="me-2" color="raspberry">Raspberry</button>
-                    <button mat-flat-button class="me-2" color="orange">Orange</button>
-                    <button mat-flat-button class="me-2" color="yellow">Yellow</button>
-                    <button mat-flat-button class="me-2" color="teal">Teal</button>
-                    <button mat-flat-button class="me-2" color="megna">Megna</button>
-                    <button mat-flat-button class="me-2" color="magenta">Magenta</button>
-                    <button mat-flat-button class="me-2" color="pink">Pink</button>
-                    <button mat-flat-button class="me-2" disabled>Disabled</button>
-                    <a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
-                </div>
-            </section>
-            <mat-divider class="my-4"></mat-divider>
-            <section>
-                <div class="mb-2">Raised</div>
-                <div class="p-2">
-                    <button mat-raised-button class="me-2">Basic</button>
-                    <button mat-raised-button class="me-2" color="primary">Primary</button>
-                    <button mat-raised-button class="me-2" color="accent">Accent</button>
-                    <button mat-raised-button class="me-2" color="warn">Warn</button>
-                    <button mat-raised-button class="me-2" color="danger">Danger</button>
-                    <button mat-raised-button class="me-2" color="info">Info</button>
-                    <button mat-raised-button class="me-2" color="success">Success</button>
-                    <button mat-raised-button class="me-2" color="turquoise">Turquoise</button>
-                    <button mat-raised-button class="me-2" color="cyan">Cyan</button>
-                    <button mat-raised-button class="me-2" color="navy">Navy</button>
-                    <button mat-raised-button class="me-2" color="navy-light">Navy light</button>
-                    <button mat-raised-button class="me-2" color="purple">Purple</button>
-                    <button mat-raised-button class="me-2" color="purple-light">Purple light</button>
-                    <button mat-raised-button class="me-2" color="raspberry">Raspberry</button>
-                    <button mat-raised-button class="me-2" color="orange">Orange</button>
-                    <button mat-raised-button class="me-2" color="yellow">Yellow</button>
-                    <button mat-raised-button class="me-2" color="teal">Teal</button>
-                    <button mat-raised-button class="me-2" color="megna">Megna</button>
-                    <button mat-raised-button class="me-2" color="magenta">Magenta</button>
-                    <button mat-raised-button class="me-2" color="pink">Pink</button>
-                    <button mat-raised-button class="me-2" disabled>Disabled</button>
-                    <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
-                </div>
-            </section>
-            <mat-divider class="my-4"></mat-divider>
-            <section>
-                <div class="mb-2">FAB</div>
-                <div class="p-2">
-                    <div class="demo-flex-container">
-                        <button mat-fab class="me-2" color="primary" aria-label="Example icon button with a delete icon">
-                            <mat-icon>delete</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="accent" aria-label="Example icon button with a bookmark icon">
-                            <mat-icon>bookmark</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="warn" aria-label="Example icon button with a home icon">
-                            <mat-icon>home</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="danger" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="info" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="success" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="turquoise" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="cyan" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="navy" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="navy-light" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="purple" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="purple-light" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="raspberry" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="orange" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="yellow" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="teal" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="megna" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="magenta" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" color="pink" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-fab class="me-2" disabled aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                    </div>
-                </div>
-            </section>
-            <mat-divider class="my-4"></mat-divider>
-            <section>
-                <div class="mb-2">Mini FAB</div>
-                <div class="p-2">
-                    <div class="demo-flex-container">
-                        <button mat-mini-fab class="me-2" color="primary" aria-label="Example icon button with a menu icon">
-                            <mat-icon>menu</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="accent" aria-label="Example icon button with a plus one icon">
-                            <mat-icon>plus_one</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="warn" aria-label="Example icon button with a filter list icon">
-                            <mat-icon>filter_list</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="danger" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="info" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="success" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="turquoise" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="cyan" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="navy" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="navy-light" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="purple" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="purple-light" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="raspberry" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="orange" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="yellow" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="teal" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="megna" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="magenta" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" color="pink" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-mini-fab class="me-2" disabled aria-label="Example icon button with a home icon">
-                            <mat-icon>home</mat-icon>
-                        </button>
-                    </div>
-                </div>
-            </section>
-            <mat-divider class="my-4"></mat-divider>
-            <section>
-                <div class="mb-2">Icon</div>
-                <div class="p-2">
-                    <div class="demo-flex-container">
-                        <button mat-icon-button class="me-2" aria-label="Example icon button with a vertical three dot icon">
-                            <mat-icon>more_vert</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="primary" aria-label="Example icon button with a home icon">
-                            <mat-icon>home</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="accent" aria-label="Example icon button with a menu icon">
-                            <mat-icon>menu</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="warn" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="danger" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="info" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="success" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="turquoise" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="cyan" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="navy" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="navy-light" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="purple" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="purple-light" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="raspberry" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="orange" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="yellow" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="teal" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="megna" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="magenta" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" color="pink" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="me-2" disabled aria-label="Example icon button with a open in new tab icon">
-                            <mat-icon>open_in_new</mat-icon>
-                        </button>
-                    </div>
-                </div>
-            </section>
-            <mat-divider class="my-4"></mat-divider>
-            <section>
-                <div class="mb-2">Demo</div>
-                <div class="d-flex my-2">
-                    <button mat-button color="primary" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="primary" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="primary" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="primary" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="primary" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="primary" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="primary" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="accent" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="accent" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="accent" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="accent" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="accent" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="accent" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="accent" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="warn" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="warn" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="warn" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="warn" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="warn" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="warn" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="warn" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="danger" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="danger" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="danger" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="danger" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="danger" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="danger" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="danger" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="info" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="info" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="info" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="info" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="info" class="me-2 align-self-center">
-                        <mat-icon>info</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="info" class="me-2 align-self-center">
-                        <mat-icon>info</mat-icon>
-                    </button>
-                    <button mat-icon-button color="info" class="me-2 align-self-center">
-                        <mat-icon>info</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="success" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="success" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="success" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="success" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="success" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="success" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="success" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="turquoise" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="turquoise" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="turquoise" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="turquoise" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="turquoise" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="turquoise" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="turquoise" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="cyan" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="cyan" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="cyan" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="cyan" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="cyan" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="cyan" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="cyan" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="navy" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="navy" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="navy" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="navy" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="navy" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="navy" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="navy" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="navy-light" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="navy-light" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="navy-light" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="navy-light" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="navy-light" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="navy-light" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="navy-light" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="purple" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="purple" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="purple" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="purple" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="purple" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="purple" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="purple" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="purple-light" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="purple-light" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="purple-light" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="purple-light" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="purple-light" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="purple-light" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="purple-light" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="raspberry" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="raspberry" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="raspberry" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="raspberry" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="raspberry" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="raspberry" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="raspberry" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="orange" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="orange" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="orange" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="orange" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="orange" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="orange" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="orange" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="yellow" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="yellow" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="yellow" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="yellow" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="yellow" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="yellow" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="yellow" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="teal" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="teal" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="teal" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="teal" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="teal" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="teal" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="teal" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="megna" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="megna" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="megna" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="megna" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="megna" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="megna" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="megna" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="magenta" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="magenta" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="magenta" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="magenta" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="magenta" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="magenta" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="magenta" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-                <div class="d-flex my-2">
-                    <button mat-button color="pink" class="me-2 align-self-center">Texte</button>
-                    <button mat-stroked-button color="pink" class="me-2 align-self-center">Texte Stroked</button>
-                    <button mat-flat-button color="pink" class="me-2 align-self-center">Texte Flat</button>
-                    <button mat-raised-button color="pink" class="me-2 align-self-center">Texte Raised</button>
-                    <button mat-fab color="pink" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-mini-fab color="pink" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                    <button mat-icon-button color="pink" class="me-2 align-self-center">
-                        <mat-icon>check_circle</mat-icon>
-                    </button>
-                </div>
-            </section>
-            <mat-divider class="my-4"></mat-divider>
-        </mat-card-content>
-    </mat-card>
-</div>
\ No newline at end of file
diff --git a/src/app/components/profile/profile.component.scss b/src/app/components/profile/profile.component.scss
index b30fb18..e462dc7 100644
--- a/src/app/components/profile/profile.component.scss
+++ b/src/app/components/profile/profile.component.scss
@@ -1,26 +1,7 @@
 /* Profile */
-@use 'variable' as var;
+//@use 'variable' as var;
+// --> background-color: var.$sidebar-footer;
 
-.banner {
-    background-color: var.$sidebar-footer;
-    padding: 1.3rem 0 1.1rem 0;
-    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
-    .user-img {
-        width: var.$user-img-size;
-        height: var.$user-img-size;
-        border-radius: var.$user-img-size;
-    }
-    h4 {
-        font-weight: 500;
-        margin-bottom: 0.75rem;
-    }
-    p {
-        margin: 0 auto .5rem;
-        color: var.$muted;
-        max-width: 450px;
-        font-weight: 300;
-    }
-}
 .mat-mdc-card + .mat-mdc-card {
     margin-top: 10px;
 }
diff --git a/src/app/components/qcm/qcm.component.scss b/src/app/components/qcm/qcm.component.scss
index 9d37d0e..7da2535 100644
--- a/src/app/components/qcm/qcm.component.scss
+++ b/src/app/components/qcm/qcm.component.scss
@@ -6,9 +6,9 @@ ol.squareItems {
     margin: 1rem 0;
     li {
         color: var.$primary;
-        background-color: var.$sidenav-content; //var.$dark;
+        background-color: var.$sidenav-content;
         background-image: none;
-        border: 1px solid var.$dark; //var.$extra-muted;
+        border: 1px solid var.$dark;
         cursor: pointer;
         float: left;
         list-style-type: none;
diff --git a/src/app/components/settings/credentials/credentials.component.html b/src/app/components/settings/credentials/credentials.component.html
index ce608fd..ca288e8 100644
--- a/src/app/components/settings/credentials/credentials.component.html
+++ b/src/app/components/settings/credentials/credentials.component.html
@@ -1,12 +1,12 @@
-<div class="banner bg-accent mat-elevation-z2">
-    <div class="d-flex mx-2 mx-md-3 mx-lg-4">
+<div class="banner mat-elevation-z2">
+    <div class="banner-content d-flex text-bg-accent bg-opacity-50">
         <img [src]="user.image" class="user-img me-3" [alt]="user.username" />
         <div class="flex-spacer">
             <h3 class="mb-0">{{bannerTitle}}</h3>
             <span class="fs-6">{{user.firstname}} {{user.lastname}}</span>
         </div>
         <div class="align-self-center text-end">
-            <button mat-raised-button color="cyan" [routerLink]="['/profile', user.username]">
+            <button mat-raised-button color="megna" [routerLink]="['/profile', user.username]">
                 <mat-icon aria-label="Voir le compte" fontIcon="person"></mat-icon> Mon compte
             </button>
             <button mat-raised-button color="warn" routerLink="/settings" class="ms-2">
diff --git a/src/app/components/settings/credentials/credentials.component.scss b/src/app/components/settings/credentials/credentials.component.scss
index d1c1efa..0fd0cde 100644
--- a/src/app/components/settings/credentials/credentials.component.scss
+++ b/src/app/components/settings/credentials/credentials.component.scss
@@ -1,26 +1,7 @@
 /* Credentials */
-@use 'variable' as var;
+//@use 'variable' as var;
+// --> background-color: var.$sidebar-footer;
 
-.banner {
-    background-color: var.$sidebar-footer;
-    padding: 1.3rem 0 1.1rem 0;
-    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
-    .user-img {
-        width: var.$user-img-size;
-        height: var.$user-img-size;
-        border-radius: var.$user-img-size;
-    }
-    h4 {
-        font-weight: 500;
-        margin-bottom: 0.75rem;
-    }
-    p {
-        margin: 0 auto .5rem;
-        color: var.$muted;
-        max-width: 450px;
-        font-weight: 300;
-    }
-}
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
diff --git a/src/app/components/settings/settings.component.html b/src/app/components/settings/settings.component.html
index 5b2fb85..3cc2563 100644
--- a/src/app/components/settings/settings.component.html
+++ b/src/app/components/settings/settings.component.html
@@ -1,12 +1,12 @@
-<div class="banner bg-accent mat-elevation-z2">
-    <div class="d-flex mx-2 mx-md-3 mx-lg-4">
+<div class="banner mat-elevation-z2">
+    <div class="banner-content d-flex text-bg-accent bg-opacity-50">
         <img [src]="user.image" class="user-img me-3" [alt]="user.username" />
         <div class="flex-spacer">
             <h3 class="mb-0">{{bannerTitle}}</h3>
             <span class="fs-6">{{user.firstname}} {{user.lastname}}</span>
         </div>
         <div class="align-self-center text-end">
-            <button mat-raised-button color="cyan" [routerLink]="['/profile', user.username]">
+            <button mat-raised-button color="megna" [routerLink]="['/profile', user.username]">
                 <mat-icon aria-label="Voir le compte" fontIcon="person"></mat-icon> Mon compte
             </button>
         </div>
diff --git a/src/app/components/settings/settings.component.scss b/src/app/components/settings/settings.component.scss
index 7664513..ab303f4 100644
--- a/src/app/components/settings/settings.component.scss
+++ b/src/app/components/settings/settings.component.scss
@@ -1,38 +1,6 @@
 /* Settings */
-@use 'variable' as var;
-
-.banner {
-    background-color: var.$sidebar-footer;
-    padding: 1.3rem 0 1.1rem 0;
-    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
-    /*
-    background-color: mat.get-color-from-palette(var.$md-custom-warn, 700);
-    margin-bottom: 1rem;
-    &.light {
-        background-color: mat.get-color-from-palette(var.$md-custom-accent, 700);
-        color: #555;
-        button {
-            color: #555;
-            border-color: #555;
-        }
-    }
-    */
-    .user-img {
-        width: var.$user-img-size;
-        height: var.$user-img-size;
-        border-radius: var.$user-img-size;
-    }
-    h4 {
-        font-weight: 500;
-        margin-bottom: 0.75rem;
-    }
-    p {
-        margin: 0 auto .5rem;
-        color: var.$muted;
-        max-width: 450px;
-        font-weight: 300;
-    }
-}
+//@use 'variable' as var;
+// --> background-color: var.$sidebar-footer;
 
 .settings-page > .container {
     margin-top: 2.4rem;
diff --git a/src/app/components/shared/index.ts b/src/app/components/shared/index.ts
index ab64501..80e0a7f 100644
--- a/src/app/components/shared/index.ts
+++ b/src/app/components/shared/index.ts
@@ -1,7 +1,9 @@
 export * from './accordion';
 export * from './dashboard-components';
+export * from './fortification-card-content/fortification-card-content.component';
 export * from './helpers-chart';
 export * from './helpers-jump';
+export * from './herowars-components';
 //export * from './layout';
 export * from './layout/footer.component';
 export * from './layout/full.component';
@@ -9,6 +11,7 @@ export * from './layout/header.component';
 export * from './list-errors/list-errors.component';
 export * from './spinner/spinner.component';
 export * from './confirmed.validator';
+export * from './floor.pipe';
 export * from './french-paginator.component';
 export * from './menu-items';
 export * from './show-authed.directive';
diff --git a/src/app/components/shared/layout/full.component.html b/src/app/components/shared/layout/full.component.html
index 4385b94..336a117 100755
--- a/src/app/components/shared/layout/full.component.html
+++ b/src/app/components/shared/layout/full.component.html
@@ -59,6 +59,9 @@
                 <button mat-menu-item routerLink="/settings" routerLinkActive="active">
                     <mat-icon fontIcon="settings" color="primary"></mat-icon> Paramètres
                 </button>
+                <button mat-menu-item routerLink="/demo" routerLinkActive="active">
+                    <mat-icon fontIcon="color_lens" color="primary"></mat-icon> Demo UI
+                </button>
                 <button mat-menu-item (click)="goToGitHub()">
                     <mat-icon fontIcon="code" color="primary"></mat-icon> GitHub
                 </button>
diff --git a/src/app/components/shared/layout/full.component.ts b/src/app/components/shared/layout/full.component.ts
index 7bc9123..b5ed0bb 100755
--- a/src/app/components/shared/layout/full.component.ts
+++ b/src/app/components/shared/layout/full.component.ts
@@ -47,7 +47,8 @@ export class FullComponent implements OnInit, OnDestroy {
     siteLink = 'https://www.adastra-cbd.com';
     author = 'Ad Astra';
     links: Menu[] = [];
-    visibleMenu: string[] = ['products', 'page'];
+    visibleMenu: string[] = [];
+    //visibleMenu: string[] = ['products', 'page'];
     //visibleMenu: string[] = ['products'];
 
     constructor(
diff --git a/src/app/components/shared/menu-items.ts b/src/app/components/shared/menu-items.ts
index 087998d..efacc80 100755
--- a/src/app/components/shared/menu-items.ts
+++ b/src/app/components/shared/menu-items.ts
@@ -52,7 +52,8 @@ const MENUITEMS: Menu[] = [
     { state: 'page', type: 'menu', name: 'Documentation', icon: 'books', desc: '' },
     { parent: 'page', state: 'les-fleurs', type: 'link', name: 'Fleurs', icon: 'marijuana', desc: '' },
     { parent: 'page', state: 'les-resines', type: 'link', name: 'Résines', icon: 'butter', desc: '' },
-    { parent: 'page', state: 'les-molecules', type: 'link', name: 'Molécules', icon: 'molecule', desc: '' }
+    { parent: 'page', state: 'les-molecules', type: 'link', name: 'Molécules', icon: 'molecule', desc: '' },
+    { state: 'herowars', type: 'link', name: 'Hero Wars', icon: 'military_tech', icontype: 'mat', desc: '' }
 ];
 
 const MENUPJUMP: Menu[] = [
diff --git a/src/app/core/models/index.ts b/src/app/core/models/index.ts
index 6e80dfd..88db527 100644
--- a/src/app/core/models/index.ts
+++ b/src/app/core/models/index.ts
@@ -13,6 +13,7 @@ export * from './category.model';
 export * from './chart.model';
 export * from './dropzone.model';
 export * from './errors.model';
+export * from './hw.model';
 export * from './jump.model';
 export * from './jump-list.model';
 export * from './jump-list-config.model';
diff --git a/src/app/core/services/utilities.service.ts b/src/app/core/services/utilities.service.ts
index f74a632..9166fe0 100644
--- a/src/app/core/services/utilities.service.ts
+++ b/src/app/core/services/utilities.service.ts
@@ -67,6 +67,15 @@ export class UtilitiesService {
     getCurrentDateFr(): string {
         return  new Date().toLocaleDateString('fr');
     }
+    
+    secondsToDuration(seconds: number, delimiter: string = ':'): string {
+        return [
+            Math.floor(seconds / 60 / 60),
+            Math.floor(seconds / 60 % 60),
+            Math.floor(seconds % 60)
+        ].join(delimiter)
+            .replace(/\b(\d)\b/g, "0$1")//.replace(/^00\:/, '')
+    }
 
     getSeriesColors(opacity: number, palette: string = 'all', offset: number = 0): string[] {
         let colors: string[] = [];
diff --git a/src/app/routes/auth.routes.ts b/src/app/routes/auth.routes.ts
index f6ca842..f986d1a 100644
--- a/src/app/routes/auth.routes.ts
+++ b/src/app/routes/auth.routes.ts
@@ -2,7 +2,7 @@ import { Routes } from '@angular/router';
 
 import {
     AeronefsComponent, CalculatorComponent, CanopiesComponent, CredentialsComponent,
-    DashboardComponent, DropzonesComponent, JumpComponent, JumpsComponent,
+    DashboardComponent, DemoComponent, DropzonesComponent, HerowarsComponent, JumpComponent, JumpsComponent,
     LogbookComponent, PageComponent, PagesComponent, ProductComponent, ProductsComponent, ProfileComponent, QcmComponent, SettingsComponent
 } from 'src/app/components';
 import { authGuard, adminGuard } from 'src/app/core/guards';
@@ -44,6 +44,11 @@ export const AUTH_ROUTES: Routes = [
             isAuthenticated: authResolver
         }
     },
+    {
+        path: 'demo',
+        component: DemoComponent,
+        canActivate: [ authGuard ]
+    },
     {
         path: 'dropzones',
         component: DropzonesComponent,
@@ -52,6 +57,11 @@ export const AUTH_ROUTES: Routes = [
             dropZonesPageData: dropZonesPageResolver
         }
     },
+    {
+        path: 'herowars',
+        component: HerowarsComponent,
+        canActivate: [ authGuard ]
+    },
     {
         path: 'jumps',
         component: JumpsComponent,
@@ -94,27 +104,27 @@ export const AUTH_ROUTES: Routes = [
         }
     },
     {
-        path: 'products',
-        component: ProductsComponent,
-        canActivate: [ authGuard, adminGuard ],
+        path: 'product/:slug',
+        component: ProductComponent,
+        canActivate: [ authGuard ],
         resolve: {
-            pageData: productsResolver
+            pageData: productResolver
         }
     },
     {
         path: 'products/:category',
         component: ProductsComponent,
-        canActivate: [ authGuard, adminGuard ],
+        canActivate: [ authGuard ],
         resolve: {
             pageData: productsResolver
         }
     },
     {
-        path: 'product/:slug',
-        component: ProductComponent,
-        canActivate: [ authGuard, adminGuard ],
+        path: 'products',
+        component: ProductsComponent,
+        canActivate: [ authGuard ],
         resolve: {
-            pageData: productResolver
+            pageData: productsResolver
         }
     },
     {
diff --git a/src/app/routes/noauth.routes.ts b/src/app/routes/noauth.routes.ts
index a300334..667f70f 100644
--- a/src/app/routes/noauth.routes.ts
+++ b/src/app/routes/noauth.routes.ts
@@ -1,8 +1,8 @@
 import { Routes } from '@angular/router';
 
-import { AuthComponent, HomeComponent, PageComponent, PagesComponent } from 'src/app/components';
+import { AuthComponent, HomeComponent, PageComponent, PagesComponent, ProductComponent } from 'src/app/components';
 import { noauthGuard } from 'src/app/core/guards';
-import { articleResolver, articlesResolver } from 'src/app/core/resolvers';
+import { articleResolver, articlesResolver, productResolver } from 'src/app/core/resolvers';
 
 export const NOAUTH_ROUTES: Routes = [
     {
@@ -35,6 +35,14 @@ export const NOAUTH_ROUTES: Routes = [
             pageData: articleResolver
         }
     },
+    {
+        path: 'product/:slug',
+        component: ProductComponent,
+        canActivate: [ noauthGuard ],
+        resolve: {
+            pageData: productResolver
+        }
+    },
     {
         path: '',
         redirectTo: 'home',
diff --git a/src/styles/_palettes.scss b/src/styles/_palettes.scss
index ae31e1b..fb1efdb 100644
--- a/src/styles/_palettes.scss
+++ b/src/styles/_palettes.scss
@@ -153,9 +153,9 @@ $md-custom-warn: (
         200 : #000000,
         300 : #000000,
         400 : #000000,
-        500 : #000000,
-        600 : #000000,
-        700 : #000000,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
         800 : #ffffff,
         900 : #ffffff,
         A100 : #000000,
@@ -580,6 +580,102 @@ $md-custom-pink: (
         A700 : #000000,
     )
 );
+$md-custom-red: (
+    50: #ffebee,
+    100: #ffcdd2,
+    200: #ef9a9a,
+    300: #e57373,
+    400: #ef5350,
+    500: #f44336,
+    600: #e53935,
+    700: #d32f2f,
+    800: #c62828,
+    900: #b71c1c,
+    A100: #ff8a80,
+    A200: #ff5252,
+    A400: #ff1744,
+    A700: #d50000,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #000000,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+$md-custom-green: (
+    50: #e8f5e9,
+    100: #c8e6c9,
+    200: #a5d6a7,
+    300: #81c784,
+    400: #66bb6a,
+    500: #4caf50,
+    600: #43a047,
+    700: #388e3c,
+    800: #2e7d32,
+    900: #1b5e20,
+    A100: #b9f6ca,
+    A200: #69f0ae,
+    A400: #00e676,
+    A700: #00c853,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #000000,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+$md-custom-blue: (
+    50: #e3f2fd,
+    100: #bbdefb,
+    200: #90caf9,
+    300: #64b5f6,
+    400: #42a5f5,
+    500: #2196f3,
+    600: #1e88e5,
+    700: #1976d2,
+    800: #1565c0,
+    900: #0d47a1,
+    A100: #82b1ff,
+    A200: #448aff,
+    A400: #2979ff,
+    A700: #2962ff,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #000000,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
 
 $md-complementary-green: (
     50 : #f6faf6,
diff --git a/src/styles/_sidebar.scss b/src/styles/_sidebar.scss
index 4cd6618..b54dea4 100755
--- a/src/styles/_sidebar.scss
+++ b/src/styles/_sidebar.scss
@@ -21,11 +21,10 @@ Main sidebar
     top: 8px;
 }
 
-#snav{
+#snav {
     /*box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);*/
     box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
     &.mat-drawer{
-        background-color: $sidebar-light;
         width: $sidenav-width;
         padding-top: 0px;
     }
@@ -66,13 +65,9 @@ Main sidebar
             font-size: 1rem;
             font-weight: 300;
             white-space: nowrap;
-            color:$sidebar-text;
             mat-icon:not(.dd-icon){
                 margin-right: 8px;
             }
-            mat-icon{
-                color:$sidebar-icons;
-            }
             .dd-icon{
                 font-size: 16px;
                 width: 16px;
@@ -94,10 +89,6 @@ Main sidebar
         &.selected > .mdc-list-item__content span > a{
             background: $sidebar-selected;
             border-radius: $radius;
-            color:$white;
-            mat-icon{
-                color:$white;
-            }
             .dd-icon{
                 -webkit-transform: rotate(-180deg);
                 transform: rotate(-180deg);
@@ -106,11 +97,33 @@ Main sidebar
         }
         &.selected .sub-item .mdc-list-item__content a.selected{
             background: transparent;
-            color:$inverse;
             font-weight: 500;
         }
     }
 }
+
+.light-theme #snav {
+    &.mat-drawer{
+        background-color: $sidebar-light;
+    }
+    mat-list-item {
+        a{
+            color:$sidebar-text;
+            mat-icon{
+                color:$sidebar-icons;
+            }
+        }
+        &.selected > .mdc-list-item__content span > a{
+            color:$white;
+            mat-icon{
+                color:$white;
+            }
+        }
+        &.selected .sub-item .mdc-list-item__content a.selected{
+            color: $white;
+        }
+    }
+}
 /*******************
 use profile section
 *******************/
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 3a72588..8bd7c06 100755
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -107,7 +107,36 @@ a.accent:hover {
 .font-monospace .fw-lighter {
     font-weight: 200 !important;
 }
-.dark-theme {
+
+.banner {
+    background-color: $white;
+    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
+    .banner-content {
+        padding: 1.3rem 1.1rem 1.1rem 1.1rem;
+    }
+    .user-img {
+        width: $user-img-size;
+        height: $user-img-size;
+        border-radius: $user-img-size;
+    }
+    h4 {
+        font-weight: 500;
+        margin-bottom: 0.75rem;
+    }
+    p {
+        margin: 0 auto .5rem;
+        color: $muted;
+        max-width: 450px;
+        font-weight: 300;
+    }
+}
+.dark-theme,
+.primary-theme {
+    dl.dl-horizontal dt {
+        color: $light;
+    }
+}
+.primary-theme {
     app-full-layout {
         /*--mat-sidenav-content-background-color: $sidenav-content;*/
         .mat-drawer-content {
@@ -122,9 +151,9 @@ a.accent:hover {
                 background-color: color.scale($sidebar, $lightness: 8%);
             }
         }
-    }
-    dl.dl-horizontal dt {
-        color: $light;
+        .banner {
+            background-color: color.scale($sidebar, $lightness: 90%);
+        }
     }
 }
 app-full-layout {
@@ -152,6 +181,11 @@ app-full-layout {
     .mat-mdc-table {
         background-color: initial;
     }
+    [class^="text-bg-"], [class*=" text-bg-"]{
+        .mat-mdc-card-subtitle {
+            color: inherit;
+        }
+    }
 }
 .mat-icon.mini {
     --mat-menu-item-icon-size: 22px;
@@ -205,10 +239,16 @@ dl.dl-horizontal {
         margin-left: 140px;
         /* color: $extra-light; */
     }
-    .dl-large dt {
+    &.dl-large dt {
+        width: 160px;
+    }
+    &.dl-large dd {
+        margin-left: 180px;
+    }
+    &.dl-xlarge dt {
         width: 200px;
     }
-    .dl-large dd {
+    &.dl-xlarge dd {
         margin-left: 220px;
     }
 }
@@ -216,130 +256,13 @@ dl.dl-horizontal {
 /**********************
 *  Extra Text Colors  *
 **********************/
-.text-primary {
-    color: $primary;
-}
-.text-accent {
-    color: $accent;
-}
-.text-warn {
-    color: $warn;
-}
-.text-white {
-    color: $white !important;
-}
-.text-red {
-    color: $red !important;
-}
-.text-red-dark {
-    color: $red-dark !important;
-}
-.text-green {
-    color: $green !important;
-}
-.text-blue {
-    color: $blue !important;
-}
-.text-grey {
-    color: $grey !important;
-}
-.text-muted {
-    color: $muted !important;
-}
-.text-extra-muted {
-    color: $extra-muted !important;
-}
-.text-empty {
-    color: $empty !important;
-}
 .text-error {
     color: $error !important;
 }
-.text-light-danger {
-    color: $light-danger !important;
-}
-.text-light-success {
-    color: $light-success !important;
-}
-.text-light-warning {
-    color: $light-warning !important;
-}
-.text-light-primary {
-    color: $light-primary !important;
-}
-.text-light-info {
-    color: $light-info !important;
-}
-.text-light-inverse {
-    color: $light-inverse !important;
-}
-.text-light-megna {
-    color: $light-megna !important;
-}
 
 /****************************
 *  Extra Background Colors  *
 ****************************/
-.bg-primary {
-    background-color: $headingtext !important; /* $primary */
-}
-.bg-accent {
-    background-color: $accent !important;
-}
-.bg-warn {
-    background-color: $warn !important;
-}
-.bg-white {
-    background-color: $white !important;
-}
-.bg-red {
-    background-color: $red !important;
-}
-.bg-red-dark {
-    background-color: $red-dark !important;
-}
-.bg-green {
-    background-color: $green !important;
-}
-.bg-blue {
-    background-color: $blue !important;
-}
-.bg-grey {
-    background-color: $grey !important;
-}
-.bg-muted {
-    background-color: $muted !important;
-}
-.bg-extra-muted {
-    background-color: $extra-muted !important;
-}
-.bg-empty {
-    background-color: $empty !important;
-}
-.bg-error {
-    background-color: $error !important;
-}
-.bg-light-danger {
-    background-color: $light-danger !important;
-}
-.bg-light-success {
-    background-color: $light-success !important;
-}
-.bg-light-warning {
-    background-color: $light-warning !important;
-}
-.bg-light-primary {
-    background-color: $light-primary !important;
-}
-.bg-light-info {
-    background-color: $light-info !important;
-}
-.bg-light-inverse {
-    background-color: $light-inverse !important;
-}
-.bg-light-megna {
-    background-color: $light-megna !important;
-}
 .bg-crystal,
 .bg-crystal .mdc-text-field--filled:not(.mdc-text-field--disabled) {
     background-color: transparent !important;
@@ -347,3 +270,29 @@ dl.dl-horizontal {
 .bg-dark-transparent {
     background-color: $dark-transparent !important;
 }
+
+/*****************************
+*         Icon Sizes         *
+*****************************/
+mat-icon {
+    &.icon-xxsmall {
+        font-size: 12px;
+        height: 12px;
+        width: 12px;
+    }
+    &.icon-xsmall {
+        font-size: 16px;
+        height: 16px;
+        width: 16px;
+    }
+    &.icon-small {
+        font-size: 18px;
+        height: 18px;
+        width: 18px;
+    }
+    &.icon-medium {
+        font-size: 20px;
+        height: 20px;
+        width: 20px;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/components/utils/_variants.scss b/src/styles/components/utils/_variants.scss
index 0442d7f..de65a9b 100644
--- a/src/styles/components/utils/_variants.scss
+++ b/src/styles/components/utils/_variants.scss
@@ -16,21 +16,4 @@
     .mat-mdc-progress-bar {
         @include _progress-bar-color($config, $variants);
     }
-    @each $variant, $variant-palette in $variants {
-        .text-#{"" + $variant},
-        a.text-#{"" + $variant},
-        .text-#{"" + $variant} a {
-            color: mat.get-color-from-palette($variant-palette, 500) !important;
-        }
-        a.text-#{"" + $variant}:hover,
-        .text-#{"" + $variant} a:hover {
-            color: mat.get-color-from-palette($variant-palette, 800) !important;
-        }
-        .bg-#{"" + $variant} {
-            background-color: mat.get-color-from-palette($variant-palette) !important;
-        }
-        .border-#{"" + $variant} {
-            border-color: mat.get-color-from-palette($variant-palette) !important;
-        }
-    }
 }
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index caa4703..52c51db 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -4,6 +4,7 @@ Author: UnEspace
 Email: rampeur@gmail.com
 File: scss
 */
+@use 'sass:color';
 @use 'sass:map';
 @use './components';
 @use '@angular/material' as mat;
@@ -52,12 +53,17 @@ File: scss
 //$adastra_app-warn: mat.define-palette(mat.$blue-palette);
 
 $adastra_app-primary: mat.define-palette($md-custom-primary, 500);
+$adastra_app-secondary: mat.define-palette($md-custom-warn);
 $adastra_app-accent: mat.define-palette($md-custom-accent, A200, A100, A400);
-$adastra_app-warn: mat.define-palette($md-custom-warn);
-$adastra_app-danger: mat.define-palette(mat.$red-palette);
-$adastra_app-success: mat.define-palette(mat.$green-palette);
-$adastra_app-info: mat.define-palette(mat.$blue-palette);
-$adastra_app-warning: mat.define-palette($md-custom-orange);
+//$adastra_app-warn: mat.define-palette($md-custom-warn);
+$adastra_app-warn: mat.define-palette($md-custom-raspberry, 400);
+$adastra_app-danger: mat.define-palette($md-custom-red, 700);
+$adastra_app-success: mat.define-palette($md-custom-green);
+$adastra_app-info: mat.define-palette($md-custom-blue);
+$adastra_app-warning: mat.define-palette($md-custom-orange, 700);
+$adastra_app-blue: mat.define-palette($md-custom-blue, 700);
+$adastra_app-red: mat.define-palette($md-custom-red);
+$adastra_app-green: mat.define-palette($md-custom-green, 400);
 
 $adastra_app-turquoise: mat.define-palette($md-custom-turquoise);
 $adastra_app-cyan: mat.define-palette($md-custom-cyan);
@@ -72,6 +78,8 @@ $adastra_app-pink: mat.define-palette($md-custom-pink);
 $adastra_app-megna: mat.define-palette($md-custom-megna);
 $adastra_app-purple-light: mat.define-palette($md-custom-purple-light);
 $adastra_app-navy-light: mat.define-palette($md-custom-navy-light);
+$adastra_app-grey: mat.define-palette(mat.$grey-palette, 400);
+$adastra_app-muted: mat.define-palette(mat.$grey-palette, 300);
 
 $custom-typography: mat.define-typography-config(
     $font-family: 'Barlow, sans-serif',
@@ -93,6 +101,7 @@ $custom-typography: mat.define-typography-config(
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
+//$adastra_app-theme: mat.define-dark-theme((
 $adastra_app-theme: mat.define-light-theme((
     color: (
         primary: $adastra_app-primary,
@@ -104,23 +113,29 @@ $adastra_app-theme: mat.define-light-theme((
 ));
 
 $adastra_app-variants: (
+    secondary: $adastra_app-secondary,
     danger: $adastra_app-danger,
     success: $adastra_app-success,
     info: $adastra_app-info,
     warning: $adastra_app-warning,
-    turquoise: $adastra_app-turquoise,
+    red: $adastra_app-red,
+    green: $adastra_app-green,
+    blue: $adastra_app-blue,
     cyan: $adastra_app-cyan,
+    teal: $adastra_app-teal,
+    turquoise: $adastra_app-turquoise,
+    megna: $adastra_app-megna,
     navy: $adastra_app-navy,
-    purple: $adastra_app-purple,
+    navy-light: $adastra_app-navy-light,
     raspberry: $adastra_app-raspberry,
     orange: $adastra_app-orange,
     yellow: $adastra_app-yellow,
-    teal: $adastra_app-teal,
+    purple: $adastra_app-purple,
+    purple-light: $adastra_app-purple-light,
     magenta: $adastra_app-magenta,
     pink: $adastra_app-pink,
-    megna: $adastra_app-megna,
-    purple-light: $adastra_app-purple-light,
-    navy-light: $adastra_app-navy-light
+    grey: $adastra_app-grey,
+    muted: $adastra_app-muted
 );
 /*
 $config: mat.get-color-config($adastra_app-theme);
@@ -158,6 +173,20 @@ $background: map.get($adastra_app-theme, background);
 
 //@import "chartist/dist/index";
 
+@each $variant, $var-color in $grays {
+    .bg-gray-#{"" + $variant} {
+        --#{$prefix}-bg-opacity: 1;
+        background-color: RGBA(color.red($var-color), color.green($var-color), color.blue($var-color), var(--#{$prefix}bg-opacity, 1)) !important;
+        /* background-color: RGBA(color.channel($var-color, "red"), color.channel($var-color, "green"), color.channel($var-color, "blue"), var(--#{$prefix}bg-opacity, 1)) !important; */
+    }
+}
+
+@each $variant, $variant-palette in $adastra_app-variants {
+    .text-bg-#{"" + $variant} {
+        color: mat.get-contrast-color-from-palette($variant-palette, 500) !important;
+    }
+}
+
 @import 'spinner';
 @import 'icomoon';
 @import 'header';
diff --git a/src/styles/variable.scss b/src/styles/variable.scss
index a8c285a..1ed5561 100755
--- a/src/styles/variable.scss
+++ b/src/styles/variable.scss
@@ -23,77 +23,205 @@ $sidenav-width: 237px;
 $sidenav-height: 35px;
 
 /* Theme Colors */
-$primary: mat.get-color-from-palette(palettes.$md-custom-primary, 700);          // #a7d4c4;
+$primary: mat.get-color-from-palette(palettes.$md-custom-primary, 700);          // #1c398e;
 $accent: mat.get-color-from-palette(palettes.$md-custom-accent, 700);            // #d9caae;
-$warn: mat.get-color-from-palette(palettes.$md-custom-warn, 600);                // #9788c7;
+$warn: mat.get-color-from-palette(palettes.$md-custom-raspberry, 400);           // #c0356f;
+//$warn: mat.get-color-from-palette(palettes.$md-custom-warn, 600);              // #9788c7;
 $secondary: mat.get-color-from-palette(palettes.$md-custom-warn, 600);           // #9788c7;
-$headingtext: mat.get-color-from-palette(palettes.$md-custom-primary, 500);      // #b7ddd0;
-$bodytext: mat.get-color-from-palette(palettes.$md-custom-primary, 100);         // #e9f5f1;
-//$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 700);        // #a7d4c4;
-$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 400);          // #cde7de;
+$headingtext: mat.get-color-from-palette(palettes.$md-custom-primary, 500);      // #2c4aa3;
+$bodytext: mat.get-color-from-palette(palettes.$md-custom-primary, 100);         // #c0c7e3;
+//$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 700);        // #1c398e;
+$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 900);          // #4f64af;
 $sidebar-light: #d9d9d9;
-$sidebar-selected: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #b7ddd0;
-$sidebar-footer: mat.get-color-from-palette(palettes.$md-custom-primary, 500);   // #90c7b3;
-$sidebar-text: mat.get-color-from-palette(palettes.$md-custom-primary, 500);
-$sidebar-icons: mat.get-color-from-palette(palettes.$md-custom-primary, 500);
+$sidebar-selected: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3;
+$sidebar-footer: mat.get-color-from-palette(palettes.$md-custom-primary, 500);   // #2c4aa3;
+$sidebar-text: mat.get-color-from-palette(palettes.$md-custom-primary, 500);     // #2c4aa3
+$sidebar-icons: mat.get-color-from-palette(palettes.$md-custom-primary, 500);    // #2c4aa3
 $sidenav-content: #1c1c1c;
 $armygreen: #4b5320;
 $odbgreen: #485b54;
 $error: #b95252; //#b85c5c;
 
-/*bootstrap Color*/
-$danger: #f15050;
-$success: #16d57c;
-$warning: #ffb035;
-$info: #0dcaf0;
-$inverse: #292154;
+/* Bootstrap Colors */
+$danger:  mat.get-color-from-palette(palettes.$md-custom-red, 700);        // #f15050
+$success: mat.get-color-from-palette(palettes.$md-custom-green, 500);      // #16d57c
+$warning: mat.get-color-from-palette(palettes.$md-custom-orange, 700);     // #ffb035
+$info:    mat.get-color-from-palette(palettes.$md-custom-blue, 500);       // #0dcaf0
+$inverse: mat.get-color-from-palette(palettes.$md-custom-raspberry, 400);  // #c0356f
 
-$empty: #717171;
-$muted: #aaaaaa;
-$extra-muted: #c4c4c4;
-$dark: #505050; //#242424;
-$light: #ebf5ef;
-$extra-light: #f2f4f8;
-
-
-/*Light colors*/
-$light-text: #a6b7bf;
-$light-danger: #f9e7eb;
-$light-success: #e8fdf8;
-$light-warning: #fff8ec;
-$light-primary: #f1effd;
-$light-info: #e3f3fd;
-$light-inverse: #f6f6f6;
-$light-megna: #e0f2f4;
-
-$danger-dark: #e6294b;
-$success-dark: #1eacbe;
-$warning-dark: #e9ab2e;
-$info-dark: #028ee1;
-$primary-dark: #6352ce;
-$inverse-dark: #232a37;
+/* Dark Colors */
+$danger-dark:  shade-color($danger, 30%) !default;  // #e6294b
+$success-dark: shade-color($success, 30%) !default; // #1eacbe
+$warning-dark: shade-color($warning, 30%) !default; // #e9ab2e
+$info-dark:    shade-color($info, 30%) !default;    // #028ee1
+$inverse-dark: shade-color($inverse, 30%) !default; // #232a37
+$primary-dark:     #6352ce;
 $dark-transparent: rgba(0, 0, 0, 0.05);
 
-/*Normal Color*/
-$white: #ffffff;
-$red: #f15050;
-$red-dark: #d61f1f;
-$orange: #f90; //#ffb035;
-$yellow: #ffe205; //#e8dd56; //#d4ce70;
-$megna: #00897b;
-$green: #4cae4c;
-$teal: #5dcc89; //#65e0b8;
-$turquoise: #02bfab;
-$cyan: #65dae0;
-$blue: #20b6fc;
-$navy: #17466f;
-$navy-light: #337ab7;
-$pink: #ed5094;
-$magenta: #fd18f3;
-$purple: #7460ee;
-$purple-light: #8a65e0;
-$raspberry: #b51156;
-$grey: #99abb4;
+/* Light Colors */
+$light-danger:  tint-color($danger, 86%) !default;  // #f9e7eb;
+$light-success: tint-color($success, 86%) !default; // #e8fdf8;
+$light-warning: tint-color($warning, 86%) !default; // #fff8ec;
+$light-info:    tint-color($info, 86%) !default;    // #e3f3fd;
+$light-inverse: tint-color($inverse, 86%) !default; // #f6f6f6;
+
+
+// scss-docs-start gray-color-variables
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+// scss-docs-end gray-color-variables
+
+$empty:       $gray-600 !default; // #6c757d;
+$muted:       $gray-500 !default; // #adb5bd;
+$dark:        $gray-700 !default; // #495057;
+$light:       $gray-200 !default; // #e9ecef;
+$extra-light: $gray-100 !default; // #f8f9fa;
+$grey:        $gray-500 !default; // #adb5bd;
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+    "100": $gray-100,
+    "200": $gray-200,
+    "300": $gray-300,
+    "400": $gray-400,
+    "500": $gray-500,
+    "600": $gray-600,
+    "700": $gray-700,
+    "800": $gray-800,
+    "900": $gray-900
+) !default;
+// scss-docs-end gray-colors-map
+// fusv-enable
+
+// scss-docs-start color-variables
+$blue-light:   #20b6fc !default;                                                          // #20b6fc
+$indigo:       #6610f2 !default;                                                          // #6610f2
+$blue:         mat.get-color-from-palette(palettes.$md-custom-blue, 700) !default;          // #1976d2
+$purple:       mat.get-color-from-palette(palettes.$md-custom-purple, 500) !default;        // #7460ee
+$purple-light: mat.get-color-from-palette(palettes.$md-custom-purple-light, 500) !default;  // #8a65e0
+$pink:         mat.get-color-from-palette(palettes.$md-custom-pink, 500) !default;          // #ed5094
+$magenta:      mat.get-color-from-palette(palettes.$md-custom-magenta, 500) !default;       // #fd18f3
+$raspberry:    mat.get-color-from-palette(palettes.$md-custom-raspberry, 500) !default;     // #b51156
+$red:          mat.get-color-from-palette(palettes.$md-custom-red, 500) !default;           // #f15050
+$orange:       mat.get-color-from-palette(palettes.$md-custom-orange, 500) !default;        // #ff9900
+$yellow:       mat.get-color-from-palette(palettes.$md-custom-yellow, 500) !default;        // #ffe205
+$megna:        mat.get-color-from-palette(palettes.$md-custom-megna, 500) !default;         // #00897b
+$green:        mat.get-color-from-palette(palettes.$md-custom-green, 400) !default;         // #4cae4c
+$teal:         mat.get-color-from-palette(palettes.$md-custom-teal, 500) !default;          // #5dcc89
+$turquoise:    mat.get-color-from-palette(palettes.$md-custom-turquoise, 500) !default;     // #02bfab
+$cyan:         mat.get-color-from-palette(palettes.$md-custom-cyan, 500) !default;          // #65dae0
+$navy:         mat.get-color-from-palette(palettes.$md-custom-navy, 500) !default;          // #17466f
+$navy-light:   mat.get-color-from-palette(palettes.$md-custom-navy-light, 500) !default;    // #337ab7
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+    "blue":         $blue,
+    "blue-light":   $blue-light,
+    "indigo":       $indigo,
+    "purple":       $purple,
+    "purple-light": $purple-light,
+    "pink":         $pink,
+    "magenta":      $magenta,
+    "raspberry":    $raspberry,
+    "red":          $red,
+    "orange":       $orange,
+    "yellow":       $yellow,
+    "megna":        $megna,
+    "green":        $green,
+    "teal":         $teal,
+    "turquoise":    $turquoise,
+    "cyan":         $cyan,
+    "navy":         $navy,
+    "navy-light":   $navy-light,
+    "black":        $black,
+    "white":        $white,
+    "gray":         $gray-600,
+    "gray-dark":    $gray-800,
+    "muted":        $muted
+) !default;
+// scss-docs-end colors-map
+
+// scss-docs-start theme-colors-map
+$theme-colors: (
+    "primary":      $primary,
+    "accent":       $accent,
+    "warn":         $warn,
+    "secondary":    $secondary,
+    "muted":        $muted,
+    "success":      $success,
+    "info":         $info,
+    "warning":      $warning,
+    "danger":       $danger,
+    "light":        $light,
+    "dark":         $dark,
+    "white":        $white,
+    "red":          $red,
+    "orange":       $orange,
+    "yellow":       $yellow,
+    "megna":        $megna,
+    "green":        $green,
+    "teal":         $teal,
+    "turquoise":    $turquoise,
+    "cyan":         $cyan,
+    "blue":         $blue,
+    "navy":         $navy,
+    "navy-light":   $navy-light,
+    "pink":         $pink,
+    "magenta":      $magenta,
+    "purple":       $purple,
+    "purple-light": $purple-light,
+    "raspberry":    $raspberry,
+    "grey":         $grey
+) !default;
+// scss-docs-end theme-colors-map
+
+/*
+
+// scss-docs-start theme-text-variables
+$primary-text-emphasis:   shade-color($primary, 60%) !default;
+$secondary-text-emphasis: shade-color($secondary, 60%) !default;
+$success-text-emphasis:   shade-color($success, 60%) !default;
+$info-text-emphasis:      shade-color($info, 60%) !default;
+$warning-text-emphasis:   shade-color($warning, 60%) !default;
+$danger-text-emphasis:    shade-color($danger, 60%) !default;
+$light-text-emphasis:     $gray-700 !default;
+$dark-text-emphasis:      $gray-700 !default;
+// scss-docs-end theme-text-variables
+
+// scss-docs-start theme-bg-subtle-variables
+$primary-bg-subtle:       tint-color($primary, 80%) !default;
+$secondary-bg-subtle:     tint-color($secondary, 80%) !default;
+$success-bg-subtle:       tint-color($success, 80%) !default;
+$info-bg-subtle:          tint-color($info, 80%) !default;
+$warning-bg-subtle:       tint-color($warning, 80%) !default;
+$danger-bg-subtle:        tint-color($danger, 80%) !default;
+$light-bg-subtle:         mix($gray-100, $white) !default;
+$dark-bg-subtle:          $gray-400 !default;
+// scss-docs-end theme-bg-subtle-variables
+
+// scss-docs-start theme-border-subtle-variables
+$primary-border-subtle:   tint-color($primary, 60%) !default;
+$secondary-border-subtle: tint-color($secondary, 60%) !default;
+$success-border-subtle:   tint-color($success, 60%) !default;
+$info-border-subtle:      tint-color($info, 60%) !default;
+$warning-border-subtle:   tint-color($warning, 60%) !default;
+$danger-border-subtle:    tint-color($danger, 60%) !default;
+$light-border-subtle:     $gray-200 !default;
+$dark-border-subtle:      $gray-500 !default;
+// scss-docs-end theme-border-subtle-variables
+
+*/
 
 /*Extra Variable*/
 $rgt: right;