diff --git a/package.json b/package.json
index 3b70bb6..9c36032 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "dev": "ng serve --configuration local --port 4201",
+    "serve": "ng serve --configuration local --port 4201",
+    "dev": "APP_ENV=development ng serve --port 4300 --configuration development",
     "local": "APP_ENV=local ng serve --port 4400 --configuration local",
     "lint": "ng lint",
     "test": "ng test"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6593469..c38a264 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,8 +2,8 @@ import { Component, OnInit, AfterContentInit } from '@angular/core';
 import { MAT_DATE_LOCALE, MAT_DATE_FORMATS, provideNativeDateAdapter } from '@angular/material/core';
 import { Title } from '@angular/platform-browser';
 
-import { FullComponent } from 'src/app/components/shared/layout';
-import { UserService } from "src/app/core/services";
+import { FullComponent } from '@components/shared/layout';
+import { UserService } from "@services";
 
 export const MY_FORMATS = {
     parse: {
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index fb0c7e0..be3e1c4 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -12,8 +12,8 @@ import { EMPTY } from "rxjs";
 registerLocaleData(localeFr);
 
 import { routes } from './app.routes';
-import { apiInterceptor, tokenInterceptor, errorInterceptor } from "src/app/core/interceptors";
-import { JwtService, UserService } from "src/app/core/services";
+import { apiInterceptor, tokenInterceptor, errorInterceptor } from "@interceptors";
+import { JwtService, UserService } from "@services";
 
 export function initAuth(jwtService: JwtService, userService: UserService) {
     return () => (jwtService.getToken() ? userService.getCurrentUser() : EMPTY);
diff --git a/src/app/components/aeronefs/aeronefs.component.ts b/src/app/components/aeronefs/aeronefs.component.ts
index d01a85f..1367d73 100644
--- a/src/app/components/aeronefs/aeronefs.component.ts
+++ b/src/app/components/aeronefs/aeronefs.component.ts
@@ -13,12 +13,12 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { Observable, Subscription } from 'rxjs';
 
-import { MenuItems } from 'src/app/components/shared';
-import { HistoryTableComponent } from 'src/app/components/shared/helpers-jump';
-import { BarsChartComponent, PieChartComponent } from 'src/app/components/shared/helpers-chart';
-import { Jump, AeronefsPageData } from 'src/app/core/models';
-import { UtilitiesService } from 'src/app/core/services';
-import { AeronefByImat, AeronefByYear } from 'src/app/core/models';
+import { MenuItems } from '@components/shared';
+import { HistoryTableComponent } from '@components/shared/helpers-jump';
+import { BarsChartComponent, PieChartComponent } from '@components/shared/helpers-chart';
+import { Jump, AeronefsPageData } from '@models';
+import { UtilitiesService } from '@services';
+import { AeronefByImat, AeronefByYear } from '@models';
 
 @Component({
     selector: 'app-aeronefs',
diff --git a/src/app/components/auth/auth.component.ts b/src/app/components/auth/auth.component.ts
index 339acc1..586e7a4 100644
--- a/src/app/components/auth/auth.component.ts
+++ b/src/app/components/auth/auth.component.ts
@@ -10,9 +10,9 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 
-import { Errors } from 'src/app/core/models';
-import { UserService } from 'src/app/core/services';
-import { ListErrorsComponent, ShowAuthedDirective } from 'src/app/components/shared';
+import { Errors } from '@models';
+import { UserService } from '@services';
+import { ListErrorsComponent, ShowAuthedDirective } from '@components/shared';
 
 @Component({
     standalone: true,
diff --git a/src/app/components/calculator/calculator.component.ts b/src/app/components/calculator/calculator.component.ts
index 0e8d8e7..95efc2f 100644
--- a/src/app/components/calculator/calculator.component.ts
+++ b/src/app/components/calculator/calculator.component.ts
@@ -17,9 +17,9 @@ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { BaseChartDirective } from 'ng2-charts';
 import { Observable, Subscription } from 'rxjs';
 
-import { MenuItems } from 'src/app/components/shared';
-import { CalculatorInfo, CalculatorResult, CalculatorState, InputParams, Jump, LineConfig, WeightSizeRange, TableHeader, User, WeightSize, weightSizes } from 'src/app/core/models';
-import { CalculatorService, JumpsService, UserService, UtilitiesService } from 'src/app/core/services';
+import { MenuItems } from '@components/shared';
+import { CalculatorInfo, CalculatorResult, CalculatorState, InputParams, Jump, LineConfig, WeightSizeRange, TableHeader, User, WeightSize, weightSizes } from '@models';
+import { CalculatorService, JumpsService, UserService, UtilitiesService } from '@services';
 
 @Component({
     selector: 'app-calculator',
diff --git a/src/app/components/canopies/canopies.component.ts b/src/app/components/canopies/canopies.component.ts
index efda03e..bfbeebc 100644
--- a/src/app/components/canopies/canopies.component.ts
+++ b/src/app/components/canopies/canopies.component.ts
@@ -12,12 +12,12 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { Observable, Subscription } from 'rxjs';
 
-import { MenuItems } from 'src/app/components/shared';
-import { HistoryTableComponent } from 'src/app/components/shared/helpers-jump';
-import { BarsChartComponent, PieChartComponent } from 'src/app/components/shared/helpers-chart';
-import { Jump, CanopiesPageData } from 'src/app/core/models';
-import { UtilitiesService } from 'src/app/core/services';
-import { CanopyBySize, CanopyByYear, CanopyModelBySize, CanopyModelByYear } from 'src/app/core/models';
+import { MenuItems } from '@components/shared';
+import { HistoryTableComponent } from '@components/shared/helpers-jump';
+import { BarsChartComponent, PieChartComponent } from '@components/shared/helpers-chart';
+import { Jump, CanopiesPageData } from '@models';
+import { UtilitiesService } from '@services';
+import { CanopyBySize, CanopyByYear, CanopyModelBySize, CanopyModelByYear } from '@models';
 
 @Component({
     selector: 'app-canopies',
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index bad0c1a..328f56d 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -7,16 +7,16 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Observable, Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 
-import { Aeronef, AeronefByImat, Canopy, CanopyModelBySize, DropZone, DropZoneByYear, Errors, Jump, User } from 'src/app/core/models';
-//import { AeronefsService, CanopiesService, DropZonesService, UserService } from 'src/app/core/services';
-import { JumpsService, UserService } from 'src/app/core/services';
-import { ShowAuthedDirective } from 'src/app/components/shared/show-authed.directive';
+import { Aeronef, AeronefByImat, Canopy, CanopyModelBySize, DropZone, DropZoneByYear, Errors, Jump, User } from '@models';
+//import { AeronefsService, CanopiesService, DropZonesService, UserService } from '@services';
+import { JumpsService, UserService } from '@services';
+import { ShowAuthedDirective } from '@components/shared/show-authed.directive';
 import {
     AeronefsPieComponent, AeronefsBarComponent,
     CanopiesModelsComponent, CanopiesSizesComponent,
     DropzonesPieComponent, DropzonesBarComponent,
     JumpsByMonthComponent
-} from 'src/app/components/shared/dashboard-components';
+} from '@components/shared/dashboard-components';
 
 @Component({
     standalone: true,
diff --git a/src/app/components/demo/demo.component.ts b/src/app/components/demo/demo.component.ts
index c697392..3412223 100644
--- a/src/app/components/demo/demo.component.ts
+++ b/src/app/components/demo/demo.component.ts
@@ -11,9 +11,9 @@ import { MatSliderModule } from '@angular/material/slider';
 
 import { Subscription } from 'rxjs';
 
-import { Errors, User } from 'src/app/core/models';
-import { UserService } from 'src/app/core/services';
-import { ListErrorsComponent } from 'src/app/components/shared';
+import { Errors, User } from '@models';
+import { UserService } from '@services';
+import { ListErrorsComponent } from '@components/shared';
 
 @Component({
     selector: 'app-demo',
diff --git a/src/app/components/dropzones/dropzones.component.ts b/src/app/components/dropzones/dropzones.component.ts
index d87a148..560c921 100644
--- a/src/app/components/dropzones/dropzones.component.ts
+++ b/src/app/components/dropzones/dropzones.component.ts
@@ -15,11 +15,11 @@ import { MatMenuModule } from '@angular/material/menu';
 //import { AxisOptions, Label } from 'chartist';
 import { Observable, Subscription } from 'rxjs';
 
-import { MenuItems } from 'src/app/components/shared';
-import { BarsChartComponent, PieChartComponent } from 'src/app/components/shared/helpers-chart';
-import { HistoryTableComponent } from 'src/app/components/shared/helpers-jump';
-import { DropZoneByOaci, DropZoneByYear, DropZonesPageData, Jump } from 'src/app/core/models';
-import { UtilitiesService } from 'src/app/core/services';
+import { MenuItems } from '@components/shared';
+import { BarsChartComponent, PieChartComponent } from '@components/shared/helpers-chart';
+import { HistoryTableComponent } from '@components/shared/helpers-jump';
+import { DropZoneByOaci, DropZoneByYear, DropZonesPageData, Jump } from '@models';
+import { UtilitiesService } from '@services';
 
 @Component({
     selector: 'app-dropzones',
diff --git a/src/app/components/herowars-guildraid/herowars-guildraid.component.ts b/src/app/components/herowars-guildraid/herowars-guildraid.component.ts
index 6534dca..d1b2dfe 100644
--- a/src/app/components/herowars-guildraid/herowars-guildraid.component.ts
+++ b/src/app/components/herowars-guildraid/herowars-guildraid.component.ts
@@ -12,9 +12,9 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatStepperIntl, MatStepperModule } from '@angular/material/stepper';
 
-import { ListErrorsComponent } from 'src/app/components/shared';
-import { Errors } from 'src/app/core/models';
-import { HWGuildRaid, HWGuildRaidAttacker, HWGuildRaidAttackers, HWGuildRaidStage, HWMember } from 'src/app/core/models/herowars';
+import { ListErrorsComponent } from '@components/shared';
+import { Errors } from '@models';
+import { HWGuildRaid, HWGuildRaidAttacker, HWGuildRaidAttackers, HWGuildRaidStage, HWMember } from '@models/herowars';
 
 import guildRaids from 'src/files-data/hw-guild-raids.json'; // page Asgard -> Guild Raid -> Log
 
diff --git a/src/app/components/herowars-guildwar/herowars-guildwar.component.html b/src/app/components/herowars-guildwar/herowars-guildwar.component.html
index e188710..7716eb6 100644
--- a/src/app/components/herowars-guildwar/herowars-guildwar.component.html
+++ b/src/app/components/herowars-guildwar/herowars-guildwar.component.html
@@ -15,193 +15,199 @@
     </div>
     <mat-divider class="mt-2 mb-3"></mat-divider>
 
-    <mat-tab-group [selectedIndex]="0" color="warn">
-        <mat-tab label="Clan">
+    <mat-tab-group [selectedIndex]="0" color="primary">
+        <mat-tab label="Guild">
             <div class="row g-0">
                 <div class="col-12 pe-md-2 border-1 border-top">
                     <!--<app-guildwar-attack [members]="getMembers()"></app-guildwar-attack>-->
-                    <div class="d-flex mt-3">
-                        <div class="flex-fill">
-                            <h2>
-                                @if (clanLoaded) {
-                                <span class="border-1 border-bottom">{{ getClan().title }} <span class="fs-4"> – Server {{ getClan().serverId }}</span></span>
-                                }
-                            </h2>
-                        </div>
-                        <span class="flex-spacer"></span>
-                        <div class="align-self-center me-2 text-end">
-                            <span class="fs-4">Members: {{ getClan().membersCount }}/30</span>
-                        </div>
-                    </div>
-                    <div class="row g-0 my-3">
-                        <div class="col-2">
-                            <div class="d-flex align-items-start flex-column me-1" role="group" aria-label="Vertical button group">
-                                @if (clanLoaded) {
-                                    <button mat-stroked-button color="warn" (click)="syncClan()" class="mb-1">Sync clan</button>
-                                }
-                                @else {
-                                    <button mat-stroked-button color="megna" (click)="loadClan()" class="mb-1">Load clan</button>
-                                }
-                                @if (membersLoaded) {
-                                    <button mat-stroked-button color="warn" (click)="syncMembers()" class="mb-1">Sync members</button>
-                                }
-                                @else {
-                                    <button mat-stroked-button color="megna" (click)="loadMembers()" [disabled]="!clanLoaded" class="mb-1">Load members</button>
-                                }
+                    @if (clanLoaded) {
+                        <app-card-container [colors]="getColors('raspberry')" [title]="getClanViewModel().getTitle()" subtitle="Members: {{ getClanViewModel().getMembersCount() }}/{{ maxClanMembers }}">
+                            <!--<app-guildwar-defence [members]="getMembers()" type="heroes"></app-guildwar-defence>-->
+                            <div class="d-flex mt-3">
+                                <div class="flex-fill">
+                                    <h2>
+                                        <span class="border-1 border-bottom">{{ getClanViewModel().getTitle() }} <span class="fs-4"> – Server {{ getClanViewModel().getServer() }}</span></span>
+                                    </h2>
+                                </div>
+                                <span class="flex-spacer"></span>
+                                <div class="align-self-center me-2 text-end">
+                                    <span class="fs-4">Members: {{ getClanViewModel().getMembersCount() }}/{{ maxClanMembers }}</span>
+                                </div>
                             </div>
+                            <div class="row g-0 my-3">
+                                <div class="col-2">
+                                    <div class="d-flex align-items-start flex-column me-1" role="group" aria-label="Vertical button group">
+                                        <button mat-stroked-button color="warn" (click)="syncClan()" [disabled]="!clanLoaded" class="mb-1">Sync clan</button>
+                                        <button mat-stroked-button color="warn" (click)="syncMembers()" [disabled]="!membersLoaded" class="mb-1">Sync members</button>
+                                    </div>
+                                </div>
+                                <div class="col-5">
+                                    <dl class="dl-horizontal m-0">
+                                        <dt>country</dt>
+                                        <dd>{{ getClanViewModel().getCountry() }}</dd>
+                                        <dt>serverId</dt>
+                                        <dd>{{ getClanViewModel().getServer() }}</dd>
+                                        <dt>description</dt>
+                                        <dd>{{ getClanViewModel().getDescription() }}</dd>
+                                        <dt>level</dt>
+                                        <dd>{{ getClanViewModel().getLevel() }}</dd>
+                                        <dt>minLevel</dt>
+                                        <dd>{{ getClanViewModel().getMinLevel() }}</dd>
+                                    </dl>
+                                </div>
+                                <div class="col-5">
+                                    <dl class="dl-horizontal m-0">
+                                        <dt>topActivity</dt>
+                                        <dd>{{ getClanViewModel().getTopActivity() | number : '1.0' }}</dd>
+                                        <dt>topDungeon</dt>
+                                        <dd>{{ getClanViewModel().getTopDungeon() | number : '1.0' }}</dd>
+                                        <dt>disbanding</dt>
+                                        <dd>{{ getClanViewModel().getDisbanding() }}</dd>
+                                        <dt>frameId</dt>
+                                        <dd>{{ getClanViewModel().getFrameId() }}</dd>
+                                        <dt>ownerId</dt>
+                                        <dd>{{ getClanViewModel().getOwnerId() | number : '1.0' }}</dd>
+                                    </dl>
+                                </div>
+                            </div>
+                        </app-card-container>
+                    }
+                    @else {
+                        <div class="d-flex mt-3">
+                            <button mat-stroked-button color="warn" (click)="loadData()" class="mb-1">Load Data</button>
                         </div>
-                        <div class="col-5">
-                            <dl class="dl-horizontal m-0">
-                                <dt>country</dt>
-                                <dd>{{ getClan().country }}</dd>
-                                <dt>serverId</dt>
-                                <dd>{{ getClan().serverId }}</dd>
-                                <dt>description</dt>
-                                <dd>{{ getClan().description }}</dd>
-                                <dt>level</dt>
-                                <dd>{{ getClan().level }}</dd>
-                                <dt>minLevel</dt>
-                                <dd>{{ getClan().minLevel }}</dd>
-                            </dl>
-                        </div>
-                        <div class="col-5">
-                            <dl class="dl-horizontal m-0">
-                                <dt>topActivity</dt>
-                                <dd>{{ getClan().topActivity | number : '1.0' }}</dd>
-                                <dt>topDungeon</dt>
-                                <dd>{{ getClan().topDungeon | number : '1.0' }}</dd>
-                                <dt>disbanding</dt>
-                                <dd>{{ getClan().disbanding }}</dd>
-                                <dt>frameId</dt>
-                                <dd>{{ getClan().frameId }}</dd>
-                                <dt>ownerId</dt>
-                                <dd>{{ getClan().ownerId }}</dd>
-                            </dl>
-                        </div>
-                    </div>
-                    <div class="table-responsive p-0">
-                        <table class="table table-striped table-condensed border-top border-light">
-                            <thead>
-                                <tr role="row" class="text-bg-raspberry bg-opacity-60">
-                                    <th scope="col" class="align-middle w-auto ps-4">
-                                        <div class="text-start">
-                                            #
-                                        </div>
-                                    </th>
-                                    <th scope="col" class="align-middle w-auto">
-                                        <div class="text-start">
-                                            ID
-                                        </div>
-                                    </th>
-                                    <th scope="col" class="align-middle w-auto">
-                                        <div class="text-start">
-                                            Name
-                                        </div>
-                                    </th>
-                                    <th scope="col" class="align-middle w-auto">
-                                        <div class="text-start">
-                                            Clan
-                                        </div>
-                                    </th>
-                                    <th scope="col" class="align-middle w-auto">
-                                        <div class="text-start">
-                                            Server
-                                        </div>
-                                    </th>
-                                    <th scope="col" class="align-middle w-auto">
-                                        <div class="text-start">
-                                            Last Login
-                                        </div>
-                                    </th>
-                                    <th scope="col" class="align-middle w-auto">
-                                        <div class="text-start">
-                                            Level
-                                        </div>
-                                    </th>
-                                    <th scope="col" class="align-middle w-auto">
-                                        <div class="text-end">
-                                            Heroes
-                                        </div>
-                                    </th>
-                                    <th scope="col" class="align-middle w-auto pe-4">
-                                        <div class="text-end">
-                                            Titans
-                                        </div>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                @for (member of getMembers(); track member; let index = $index) {
-                                    <tr role="row" class="align-middle">
-                                        <td class="cell text-start ps-4">
-                                            {{ (index+1) }}
-                                        </td>
-                                        <td class="cell font-monospace text-start">
-                                            <span class="me-3">{{ member.id }}</span>
-                                        </td>
-                                        <td class="cell text-start">
-                                            {{ member.name }}
-                                        </td>
-                                        <td class="cell text-start">
-                                            {{ member.clanTitle }}
-                                        </td>
-                                        <td class="cell text-start">
-                                            {{ member.serverId }}
-                                        </td>
-                                        <td class="cell font-monospace text-start">
-                                            <span class="me-3">{{ member.lastLoginTime + '000' | date: 'dd/MM HH:mm' }}</span>
-                                        </td>
-                                        <td class="cell font-monospace text-start">
-                                            {{ member.level }}
-                                        </td>
-                                        <td class="cell font-monospace text-end">
-                                            {{ member.heroes.power | number : '1.0' }}
-                                        </td>
-                                        <td class="cell font-monospace text-end pe-4">
-                                            {{ member.titans.power | number : '1.0' }}
-                                        </td>
-                                    </tr>
-                                }
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-        </mat-tab>
-        <mat-tab label="Attack">
-            <div class="row g-0">
-                <div class="col col-md-6 pe-md-2">
-                    <!--<app-guildwar-defence [members]="getMembers()" type="heroes"></app-guildwar-defence>-->
-                </div>
-                <div class="col col-md-6 ps-md-2">
-                    <!--<app-guildwar-defence [members]="getMembers()" type="titans"></app-guildwar-defence>-->
+                    }
+                    @if (membersLoaded) {
+                        <app-card-container [colors]="getColors('raspberry')" title="Members" subtitle="List of guild members">
+                            <div class="table-responsive p-0">
+                                <table class="table table-striped table-condensed border-top border-light">
+                                    <thead>
+                                        <tr role="row" class="text-bg-raspberry bg-opacity-60">
+                                            <th scope="col" class="align-middle w-auto ps-4">
+                                                <div class="text-start">
+                                                    #
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="d-flex align-items-center text-start">
+                                                    Name
+                                                    <mat-icon fontIcon="arrow_upward" class="ms-1 icon-xsmall"></mat-icon>
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="text-start">
+                                                    ID
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="text-start">
+                                                    Last Login
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="text-start">
+                                                    Dismissal Delay
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="text-start">
+                                                    Clan
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="text-start">
+                                                    Server
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="text-end">
+                                                    Heroes
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto pe-4">
+                                                <div class="text-end">
+                                                    Titans
+                                                </div>
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        @for (memberVM of getMembersViewModel().getMembers(); track memberVM.getId(); let index = $index) {
+                                            <tr role="row" class="align-middle">
+                                                <td class="cell text-start ps-4">
+                                                    {{ (index+1) }}
+                                                </td>
+                                                <td class="cell text-start">
+                                                    <div class="d-flex">
+                                                        <mat-icon [fontIcon]="memberVM.isChampion() ? 'gpp_good' : 'gpp_bad'" class="me-2 icon-small {{ memberVM.isChampion() ? 'text-green' : 'text-muted' }}"></mat-icon>
+                                                        <span [class]="memberVM.isChampion() ? 'text-green' : ''">{{ memberVM.getName() }}</span>
+                                                    </div>
+                                                </td>
+                                                <td class="cell font-monospace text-start">
+                                                    <span class="me-2">{{ memberVM.getId() }}</span> <small class="me-3">[{{ memberVM.getLevel() }}]</small> 
+                                                </td>
+                                                <td class="cell font-monospace text-start">
+                                                    <span class="me-3">{{ memberVM.getLastLoginTime() + '000' | date: 'dd/MM HH:mm' }}</span>
+                                                </td>
+                                                <td class="cell font-monospace text-start">
+                                                    <span [class]="memberVM.getInactivity().daysLeft < daysToWarn ? 'text-red' : ''">{{ memberVM.getInactivity().dropDelay }}</span>
+                                                </td>
+                                                <td class="cell text-start">
+                                                    {{ memberVM.getClanTitle() }}
+                                                </td>
+                                                <td class="cell text-start">
+                                                    {{ memberVM.getServerId() }}
+                                                </td>
+                                                <td class="cell font-monospace text-end">
+                                                    {{ memberVM.getMemberHeroes().power | number : '1.0' }}
+                                                </td>
+                                                <td class="cell font-monospace text-end pe-4">
+                                                    {{ memberVM.getMemberTitans().power | number : '1.0' }}
+                                                </td>
+                                            </tr>
+                                        }
+                                    </tbody>
+                                </table>
+                            </div>
+                        </app-card-container>
+                    }
                 </div>
             </div>
         </mat-tab>
         <mat-tab label="Defense">
             <div class="row g-0">
-                <div class="col">
-                    <mat-card class="my-3">
-                        <mat-card-header class="d-flex rounded-top text-bg-raspberry py-2 px-3">
-                            <div class="flex-fill">
-                                <mat-card-title>
-                                    {{ title }}
-                                </mat-card-title>
-                            </div>
-                            <span class="flex-spacer"></span>
-                            <div class="align-self-center text-end">
-                                <span class="fs-5 font-light">{{ subtitle }}</span>
-                            </div>
-                        </mat-card-header>
-                        <mat-card-content class="table-responsive p-0">
-                        </mat-card-content>
-                    </mat-card>
+                <div class="col col-md-6 pe-md-2">
+                    <app-card-container [colors]="getColors('accent')" title="Heroes Fortifications" subtitle="Defense overview">
+                        <!--<app-guildwar-defence [members]="getMembers()" type="heroes"></app-guildwar-defence>-->
+                    </app-card-container>
+                </div>
+                <div class="col col-md-6 ps-md-2">
+                    <app-card-container [colors]="getColors('accent')" title="Titans Fortifications" subtitle="Defense overview">
+                        <!--<app-guildwar-defence [members]="getMembers()" type="titans"></app-guildwar-defence>-->
+                    </app-card-container>
                 </div>
             </div>
         </mat-tab>
-        <mat-tab label="Info">
+        <mat-tab label="Attack">
+            <div class="row g-0">
+                <div class="col col-md-6 ps-md-2">
+                    <app-card-container [colors]="getColors('accent')" title="Heroes Fortifications" subtitle="Attack overview">
+                        <!--<app-guildwar-attack [members]="getMembers()" type="heroes"></app-guildwar-attack>-->
+                    </app-card-container>
+                </div>
+                <div class="col col-md-6 ps-md-2">
+                    <app-card-container [colors]="getColors('accent')" title="Titans Fortifications" subtitle="Attack overview">
+                        <!--<app-guildwar-attack [members]="getMembers()" type="titans"></app-guildwar-attack>-->
+                    </app-card-container>
+                </div>
+            </div>
+        </mat-tab>
+        <mat-tab label="Raids">
             <div class="row g-0">
                 <div class="col">
+                    <app-card-container [colors]="getColors('megna')" title="Guild Raids" subtitle="Statistics">
+                        <!---->
+                    </app-card-container>
                 </div>
             </div>
         </mat-tab>
diff --git a/src/app/components/herowars-guildwar/herowars-guildwar.component.ts b/src/app/components/herowars-guildwar/herowars-guildwar.component.ts
index 78ae9ef..313be5b 100644
--- a/src/app/components/herowars-guildwar/herowars-guildwar.component.ts
+++ b/src/app/components/herowars-guildwar/herowars-guildwar.component.ts
@@ -11,18 +11,20 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatTabsModule } from '@angular/material/tabs';
 
-import { ListErrorsComponent, GuildwarAttackComponent, GuildwarDefenceComponent } from 'src/app/components/shared';
-import { Errors, HWActivityStat, HWGuildClan, HWMember, HWMemberStat, HWWeekStat } from 'src/app/core/models';
-import { UtilitiesService } from 'src/app/core/services';
+import { CardContainerComponent, ListErrorsComponent, GuildwarAttackComponent, GuildwarDefenceComponent } from '@components/shared';
+import { CardColors, Errors, HWActivityStat, HWGuildClan, HWMember } from '@models';
+import { ClanViewModel, MembersViewModel } from '@viewmodels/herowars';
+import { HWClanService, HWMemberService, UtilitiesService } from '@services';
+import { MAX_CLAN_MEMBERS } from '@constants';
 
-import guildData from 'src/files-data/hw-guild-data.json';             // page Membres
-import guildStatistics from 'src/files-data/hw-guild-statistics.json'; // page Overview -> Statistics
+import guildData from '@data/hw-guild-data.json'; // page Membres
+import guildStatistics from '@data/hw-guild-statistics.json'; // page Overview -> Statistics
 
 @Component({
     selector: 'app-herowars-guildwar',
     standalone: true,
     imports: [
-        DatePipe, DecimalPipe, FormsModule, ListErrorsComponent,
+        DatePipe, DecimalPipe, FormsModule, CardContainerComponent, ListErrorsComponent,
         MatButtonModule, MatCardModule, MatDividerModule, MatFormFieldModule,
         MatIconModule, MatInputModule, MatTabsModule,
         GuildwarAttackComponent, GuildwarDefenceComponent
@@ -44,151 +46,76 @@ import guildStatistics from 'src/files-data/hw-guild-statistics.json'; // page O
     ]
 })
 export class HerowarsGuildwarComponent implements OnInit {
+    public destroyRef = inject(DestroyRef);
     public title = 'Guild War';
     public subtitle = 'Log';
     public description = 'Tools in working progress.';
+    public colors: CardColors = { background: 'bg-raspberry', text: 'text-bg-primary' };
     public errors: Errors = { errors: {} };
-    public destroyRef = inject(DestroyRef);
     public now = new Date();
     public daysToWarn = 1;
+    public maxClanMembers = MAX_CLAN_MEMBERS;
     public clanLoaded = false;
     public membersLoaded = false;
+    public clanViewModel: ClanViewModel = {} as ClanViewModel;
+    public membersViewModel: MembersViewModel = {} as MembersViewModel;
     private _guildClan: HWGuildClan = {} as HWGuildClan;
     private _guildMembers: HWMember[] = [];
     private _guildInfo: HWActivityStat = {} as HWActivityStat;
 
     constructor(
         private _titleService: Title,
-        private _utilitiesService: UtilitiesService
+        private _utilitiesService: UtilitiesService,
+        private _clanService: HWClanService,
+        private _memberService: HWMemberService
     ) { }
 
     ngOnInit() {
         this._titleService.setTitle(this.title);
     }
 
-    private _resetActivity(): HWActivityStat {
-        const activity: HWActivityStat = { activity: 0, prestige: 0, titanite: 0, war: 0, adventure: 0, gifts: 0, score: 0, scoreGifts: 0, warGifts: 0, rewards: 0 };
-        return activity;
+    getClanViewModel(): ClanViewModel {
+        return this.clanViewModel;
     }
 
-    private _importMembers() {
-        try {
-            const oneDayInSec = (24 * 60 * 60);
-            const daysToKick = parseInt(guildData.clan.daysToKick);
-            this.daysToWarn = (parseInt(guildData.clan.daysToKick) / 2);
-            for (const data of Object.entries(guildData.clan.members)) {
-                const member: HWMember = {} as HWMember;
-                Object.assign(member, data[1]);
-                if (guildData.clan.warriors.indexOf(parseInt(member.id)) !== -1) {
-                    member.champion = true;
-                } else {
-                    member.champion = false;
-                }
-                member.heroes = { power: 0, teams: []};
-                member.titans = { power: 0, teams: []};
-                this._guildMembers.push(member);
-            }
-            this._guildMembers.map((data) => {
-                const last = new Date((parseInt(data.lastLoginTime) * 1000));
-                const exp = new Date(last.getTime() + ((daysToKick * oneDayInSec) * 1000));
-                const diff = Math.floor(((exp.getTime() - this.now.getTime()) / 1000));
-                const daysLeft = Math.floor((diff / oneDayInSec));
-                let timeLeft = diff;
-                if (daysLeft >= 1) {
-                    timeLeft = (diff - (daysLeft * oneDayInSec));
-                }
-                data.inactivity = {
-                    daysLeft: daysLeft,
-                    timeLeft: timeLeft,
-                    dropDelay: `${daysLeft}d, ${this._utilitiesService.secondsToDuration(timeLeft)}`,
-                    dropDate: Math.floor((exp.getTime() / 1000))
-                };
-                data.raids = [];
-                data.raidsInfo = {
-                    variationAvg: 0,
-                    variationSum: 0
-                };
-                data.stat = {} as HWMemberStat;
-                let index = guildData.membersStat.findIndex(stat => stat.userId === data.id);
-                if (index !== -1) {
-                    delete (guildData.membersStat[index] as {userId?: string}).userId;
-                    Object.assign(data.stat, guildData.membersStat[index]);
-                    //data.stat = guildData.membersStat[index];
-                }
-                index = guildStatistics.stat.findIndex(stat => stat.id === data.id);
-                if (index !== -1) {
-                    delete (guildStatistics.stat[index] as {id?: string}).id;
-                    const stat: HWWeekStat = {} as HWWeekStat;
-                    Object.assign(stat, guildStatistics.stat[index]);
-                    data.weekStat = stat;
-                    data.adventureSum = guildStatistics.stat[index].adventureStat.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
-                    data.clanGiftsSum = guildStatistics.stat[index].clanGifts.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
-                    data.clanWarSum = guildStatistics.stat[index].clanWarStat.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
-                    this._guildClan.sumTotal.adventure += data.adventureSum;
-                    this._guildClan.sumTotal.gifts += data.clanGiftsSum;
-                    this._guildClan.sumTotal.war += data.clanWarSum;
-                }
+    getMembersViewModel(): MembersViewModel {
+        return this.membersViewModel;
+    }
 
-                data.score = (data.stat.dungeonActivitySum + data.stat.activitySum + data.stat.prestigeSum);
-                data.warGifts = (((this._guildClan.giftsCount / 2) * ((data.clanWarSum * 10) / 100)) / 20);
-
-                this._guildClan.todayTotal.activity += data.stat.todayActivity;
-                this._guildClan.todayTotal.prestige += data.stat.todayPrestige;
-                this._guildClan.todayTotal.titanite += data.stat.todayDungeonActivity;
-                this._guildClan.todayTotal.score += (data.stat.todayDungeonActivity + data.stat.todayActivity + data.stat.todayPrestige);
-                this._guildClan.sumTotal.activity += data.stat.activitySum;
-                this._guildClan.sumTotal.prestige += data.stat.prestigeSum;
-                this._guildClan.sumTotal.titanite += data.stat.dungeonActivitySum;
-                this._guildClan.sumTotal.score += data.score;
-                this._guildClan.sumTotal.warGifts += data.warGifts;
-                
-                data.scoreGifts = 0;
-                data.rewards = 0;
-                return data;
-            });
-            this._guildClan.sumTotal.scoreGifts = (this._guildClan.giftsCount - Math.floor(this._guildClan.sumTotal.warGifts));
-            this._guildClan.todayAverages.activity = (this._guildClan.todayTotal.activity / this._guildMembers.length);
-            this._guildClan.todayAverages.prestige = (this._guildClan.todayTotal.prestige / this._guildMembers.length);
-            this._guildClan.todayAverages.titanite = (this._guildClan.todayTotal.titanite / this._guildMembers.length);
-            this._guildClan.todayAverages.score = (this._guildClan.todayTotal.score / this._guildMembers.length);
-            this._guildClan.sumAverages.activity = (this._guildClan.sumTotal.activity / this._guildMembers.length);
-            this._guildClan.sumAverages.prestige = (this._guildClan.sumTotal.prestige / this._guildMembers.length);
-            this._guildClan.sumAverages.titanite = (this._guildClan.sumTotal.titanite / this._guildMembers.length);
-            this._guildClan.sumAverages.war = (this._guildClan.sumTotal.war / 20);
-            this._guildClan.sumAverages.adventure = (this._guildClan.sumTotal.adventure / this._guildMembers.length);
-            this._guildClan.sumAverages.gifts = (this._guildClan.sumTotal.gifts / this._guildMembers.length);
-            this._guildClan.sumAverages.score = (this._guildClan.sumTotal.score / this._guildMembers.length);
-            
-            this._guildMembers.map((data) => {
-                data.scoreGifts = ((data.score / this._guildClan.sumTotal.score) * this._guildClan.sumTotal.scoreGifts);
-                data.rewards = Math.floor((data.scoreGifts + data.warGifts));
-                this._guildClan.sumTotal.rewards += data.rewards;
-                return data;
-            });
-            this._guildClan.sumAverages.rewards = (this._guildClan.sumTotal.rewards / this._guildMembers.length);
-
-            console.log(this._guildClan);
-            console.log(this._guildMembers);
-        } catch (error) {
-            console.error(error);
+    getColors(color = 'megna'): CardColors {
+        if (color === 'accent') {
+            this.colors = { background: 'bg-accent', text: 'text-navy' };
+        } else if (color === 'raspberry') {
+            this.colors = { background: 'bg-raspberry', text: 'text-bg-primary' };
+        } else {
+            this.colors = { background: 'bg-megna', text: 'text-bg-primary' };
         }
-    }
-
-    getClan(): HWGuildClan {
-        return this._guildClan;
+        return this.colors;
     }
 
     loadClan(): void {
-        Object.assign(this._guildClan, guildData.clan);
-        this._guildClan.sumAverages = this._resetActivity();
-        this._guildClan.sumTotal = this._resetActivity();
-        this._guildClan.todayAverages = this._resetActivity();
-        this._guildClan.todayTotal = this._resetActivity();
+        this._guildClan = this._clanService.loadClan();
+        this.clanViewModel = new ClanViewModel(this._guildClan);
         this.clanLoaded = true;
     }
 
+    loadData(): void {
+        this._guildClan = this._clanService.loadClan();
+        this._guildMembers = this._memberService.loadMembers(this._guildClan);
+        this._guildClan = this._clanService.loadClanStats(this._guildClan, this._guildMembers);
+        this.daysToWarn = (parseInt(this._guildClan.daysToKick) / 2);
+        this.clanViewModel = new ClanViewModel(this._guildClan);
+        this.clanLoaded = true;
+        this.membersViewModel = new MembersViewModel(this._guildMembers);
+        this.membersLoaded = true;
+        console.log(this._guildClan);
+        console.log(this._guildMembers);
+    }
+
     loadMembers(): void {
-        this._importMembers();
+        this._guildMembers = this._memberService.loadMembers(this._guildClan);
+        this.membersViewModel = new MembersViewModel(this._guildMembers);
+        this._guildClan = this._clanService.loadClanStats(this._guildClan, this._guildMembers);
         this.membersLoaded = true;
     }
 
@@ -198,10 +125,12 @@ export class HerowarsGuildwarComponent implements OnInit {
 
     syncClan(): void {
         console.log(this._guildClan);
+        console.log(guildData);
     }
 
     syncMembers(): void {
         console.log(this._guildMembers);
+        console.log(guildStatistics);
     }
 
 }
diff --git a/src/app/components/herowars/herowars.component.ts b/src/app/components/herowars/herowars.component.ts
index e182e3f..193d159 100644
--- a/src/app/components/herowars/herowars.component.ts
+++ b/src/app/components/herowars/herowars.component.ts
@@ -12,8 +12,8 @@ import {
     ListErrorsComponent,
     GuildCardComponent, GuildraidsLogComponent, GuildwarChampionsComponent,
     GuildwarAttackComponent, GuildwarDefenceComponent, GuildwarTeamsComponent, MembersStatisticsComponent
-} from 'src/app/components/shared';
-import { Errors, HWMember } from 'src/app/core/models';
+} from '@components/shared';
+import { Errors, HWMember } from '@models';
 import guildData from 'src/files-data/hw-guild-data.json'; // page Membres
 //import guildWarData from 'src/files-data/hw-guild-war.json';           // page Overview -> Statistics | page Guild War -> Guild War
 //import guildStatistics from 'src/files-data/hw-guild-statistics.json'; // page Overview -> Statistics
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index 748b29e..01adc29 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -6,10 +6,10 @@ 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 { Errors } from 'src/app/core/models';
-//import { UtilitiesService } from 'src/app/core/services';
-//import { UserService } from 'src/app/core/services';
+import { ListErrorsComponent } from '@components/shared';
+import { Errors } from '@models';
+//import { UtilitiesService } from '@services';
+//import { UserService } from '@services';
 @Component({
     selector: 'app-home',
     standalone: true,
diff --git a/src/app/components/jump/jump.component.ts b/src/app/components/jump/jump.component.ts
index 5ef29bf..ea3f811 100644
--- a/src/app/components/jump/jump.component.ts
+++ b/src/app/components/jump/jump.component.ts
@@ -9,8 +9,8 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { Observable, Subscription } from 'rxjs';
 
-import { ListErrorsComponent, MenuItems } from 'src/app/components/shared';
-import { Errors, Jump, JumpPageData } from 'src/app/core/models';
+import { ListErrorsComponent, MenuItems } from '@components/shared';
+import { Errors, Jump, JumpPageData } from '@models';
 
 @Component({
     selector: 'app-jump',
diff --git a/src/app/components/jumps/jumps.component.ts b/src/app/components/jumps/jumps.component.ts
index 0cfe22c..9259472 100644
--- a/src/app/components/jumps/jumps.component.ts
+++ b/src/app/components/jumps/jumps.component.ts
@@ -12,10 +12,10 @@ import { MatMenuModule } from '@angular/material/menu';
 
 import { Observable, Subscription } from 'rxjs';
 
-import { MenuItems } from 'src/app/components/shared';
-import { BarsChartComponent, CircleChartComponent, LineChartComponent, LineAreaChartComponent } from 'src/app/components/shared/helpers-chart';
-import { UtilitiesService } from 'src/app/core/services';
-import { Jump, JumpByCategorie, JumpByDate, JumpByDateByModule, JumpByModule, JumpsPageData, JumpYears } from 'src/app/core/models';
+import { MenuItems } from '@components/shared';
+import { BarsChartComponent, CircleChartComponent, LineChartComponent, LineAreaChartComponent } from '@components/shared/helpers-chart';
+import { UtilitiesService } from '@services';
+import { Jump, JumpByCategorie, JumpByDate, JumpByDateByModule, JumpByModule, JumpsPageData, JumpYears } from '@models';
 
 @Component({
     selector: 'app-jumps',
diff --git a/src/app/components/logbook/dialogs/jump-add.dialog.ts b/src/app/components/logbook/dialogs/jump-add.dialog.ts
index de80997..62c5afe 100644
--- a/src/app/components/logbook/dialogs/jump-add.dialog.ts
+++ b/src/app/components/logbook/dialogs/jump-add.dialog.ts
@@ -14,8 +14,8 @@ import { MatSelectModule } from '@angular/material/select';
 import { Observable, Subscription } from 'rxjs';
 import { map, startWith, take } from 'rxjs/operators';
 
-import { AeronefByImat, CanopyModelBySize, DropZoneByOaci, Errors, Jump, JumpAddParams, JumpByModule, JumpFile, JumpFileType } from 'src/app/core/models';
-import { AeronefsService, CanopiesService, DropZonesService, JumpsService } from 'src/app/core/services';
+import { AeronefByImat, CanopyModelBySize, DropZoneByOaci, Errors, Jump, JumpAddParams, JumpByModule, JumpFile, JumpFileType } from '@models';
+import { AeronefsService, CanopiesService, DropZonesService, JumpsService } from '@services';
 
 @Component({
     selector: 'app-jump-add-dialog',
diff --git a/src/app/components/logbook/dialogs/jump-delete.dialog.ts b/src/app/components/logbook/dialogs/jump-delete.dialog.ts
index 17c48f7..fcc0b30 100644
--- a/src/app/components/logbook/dialogs/jump-delete.dialog.ts
+++ b/src/app/components/logbook/dialogs/jump-delete.dialog.ts
@@ -4,7 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 
-import { Jump } from 'src/app/core/models';
+import { Jump } from '@models';
 
 @Component({
     selector: 'app-jump-delete-dialog',
diff --git a/src/app/components/logbook/dialogs/jump-edit.dialog.ts b/src/app/components/logbook/dialogs/jump-edit.dialog.ts
index 26738c1..fefb7ea 100644
--- a/src/app/components/logbook/dialogs/jump-edit.dialog.ts
+++ b/src/app/components/logbook/dialogs/jump-edit.dialog.ts
@@ -14,8 +14,8 @@ import { MatSelectModule } from '@angular/material/select';
 import { Observable, Subscription } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 
-import { AeronefByImat, CanopyModelBySize, DropZoneByOaci, Jump, JumpByModule } from 'src/app/core/models';
-import { AeronefsService, CanopiesService, DropZonesService, JumpsService } from 'src/app/core/services';
+import { AeronefByImat, CanopyModelBySize, DropZoneByOaci, Jump, JumpByModule } from '@models';
+import { AeronefsService, CanopiesService, DropZonesService, JumpsService } from '@services';
 
 @Component({
     selector: 'app-jump-edit-dialog',
diff --git a/src/app/components/logbook/dialogs/jump-view.dialog.ts b/src/app/components/logbook/dialogs/jump-view.dialog.ts
index cc59ab8..8d9d1f6 100644
--- a/src/app/components/logbook/dialogs/jump-view.dialog.ts
+++ b/src/app/components/logbook/dialogs/jump-view.dialog.ts
@@ -5,7 +5,7 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/materia
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 
-import { Jump } from 'src/app/core/models';
+import { Jump } from '@models';
 
 @Component({
     selector: 'app-jump-view-dialog',
diff --git a/src/app/components/logbook/logbook.component.ts b/src/app/components/logbook/logbook.component.ts
index 7ceb8f3..a989bc0 100644
--- a/src/app/components/logbook/logbook.component.ts
+++ b/src/app/components/logbook/logbook.component.ts
@@ -16,10 +16,10 @@ import { MatSnackBar, MatSnackBarConfig, MatSnackBarHorizontalPosition, MatSnack
 import { Observable, Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 
-import { JumpAddDialogComponent } from 'src/app/components/logbook/dialogs';
-import { MenuItems, JumpTableComponent } from 'src/app/components/shared';
-import { Errors, Jump, JumpFile, JumpFileType, JumpListConfig, Range, User, X2Data } from 'src/app/core/models';
-import { JumpsService, JumpTableService, UserService } from 'src/app/core/services';
+import { JumpAddDialogComponent } from '@components/logbook/dialogs';
+import { MenuItems, JumpTableComponent } from '@components/shared';
+import { Errors, Jump, JumpFile, JumpFileType, JumpListConfig, Range, User, X2Data } from '@models';
+import { JumpsService, JumpTableService, UserService } from '@services';
 import data from 'src/jumps.json';
 //import data from 'src/jumps_02.json';
 
diff --git a/src/app/components/page/page.component.ts b/src/app/components/page/page.component.ts
index dd5b5bc..7351729 100644
--- a/src/app/components/page/page.component.ts
+++ b/src/app/components/page/page.component.ts
@@ -9,8 +9,8 @@ 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, Article, ArticlePageData } from 'src/app/core/models';
+import { ListErrorsComponent, } from '@components/shared';
+import { Errors, Article, ArticlePageData } from '@models';
 
 @Component({
     selector: 'app-page',
diff --git a/src/app/components/product/product.component.ts b/src/app/components/product/product.component.ts
index e75f9fc..062bf65 100644
--- a/src/app/components/product/product.component.ts
+++ b/src/app/components/product/product.component.ts
@@ -9,8 +9,8 @@ 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';
+import { ListErrorsComponent, } from '@components/shared';
+import { Errors, Product, ProductPageData } from '@models';
 
 @Component({
     selector: 'app-product',
diff --git a/src/app/components/products/products.component.ts b/src/app/components/products/products.component.ts
index 3aa5269..c897305 100644
--- a/src/app/components/products/products.component.ts
+++ b/src/app/components/products/products.component.ts
@@ -10,8 +10,8 @@ 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';
+import { ListErrorsComponent, } from '@components/shared';
+import { Errors, Product, ProductsPageData } from '@models';
 
 @Component({
     selector: 'app-products',
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index 6251b09..7f87ff0 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -8,9 +8,9 @@ import { MatIconModule } from '@angular/material/icon';
 
 import { Subscription } from 'rxjs';
 
-import { Errors, User } from 'src/app/core/models';
-import { UserService } from 'src/app/core/services';
-import { ListErrorsComponent } from 'src/app/components/shared';
+import { Errors, User } from '@models';
+import { UserService } from '@services';
+import { ListErrorsComponent } from '@components/shared';
 
 @Component({
     standalone: true,
diff --git a/src/app/components/qcm/qcm.component.ts b/src/app/components/qcm/qcm.component.ts
index ff68741..c096253 100644
--- a/src/app/components/qcm/qcm.component.ts
+++ b/src/app/components/qcm/qcm.component.ts
@@ -14,10 +14,10 @@ import { MatSelectModule } from '@angular/material/select';
 import { interval, Observable, Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 
-import { MenuItems } from 'src/app/components/shared';
-import { ListErrorsComponent } from 'src/app/components/shared';
-import { Errors, Qcm, QcmCategory, QcmQuestion, QcmQuestionState, User } from 'src/app/core/models';
-import { QcmService, UserService } from 'src/app/core/services';
+import { MenuItems } from '@components/shared';
+import { ListErrorsComponent } from '@components/shared';
+import { Errors, Qcm, QcmCategory, QcmQuestion, QcmQuestionState, User } from '@models';
+import { QcmService, UserService } from '@services';
 import data from 'src/qcm-bpa.json';
 
 @Component({
diff --git a/src/app/components/settings/credentials/credentials.component.ts b/src/app/components/settings/credentials/credentials.component.ts
index b5ef2fa..a1a7dd9 100644
--- a/src/app/components/settings/credentials/credentials.component.ts
+++ b/src/app/components/settings/credentials/credentials.component.ts
@@ -11,9 +11,9 @@ import { MatInputModule } from '@angular/material/input';
 
 import { Observable, Subscription } from 'rxjs';
 
-import { Errors, User } from 'src/app/core/models';
-import { UserService } from 'src/app/core/services';
-import { ListErrorsComponent } from 'src/app/components/shared';
+import { Errors, User } from '@models';
+import { UserService } from '@services';
+import { ListErrorsComponent } from '@components/shared';
 
 @Component({
     selector: 'app-credentials',
diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts
index 6ada870..dd472ab 100644
--- a/src/app/components/settings/settings.component.ts
+++ b/src/app/components/settings/settings.component.ts
@@ -12,9 +12,9 @@ import { MatSelectModule } from '@angular/material/select';
 
 import { Observable, Subscription } from 'rxjs';
 
-import { Errors, User } from 'src/app/core/models';
-import { UserService } from 'src/app/core/services';
-import { ListErrorsComponent } from 'src/app/components/shared';
+import { Errors, User } from '@models';
+import { UserService } from '@services';
+import { ListErrorsComponent } from '@components/shared';
 
 @Component({
     selector: 'app-settings-page',
diff --git a/src/app/components/shared/card-container/card-container.component.html b/src/app/components/shared/card-container/card-container.component.html
new file mode 100644
index 0000000..3091544
--- /dev/null
+++ b/src/app/components/shared/card-container/card-container.component.html
@@ -0,0 +1,16 @@
+<mat-card class="my-3">
+    <mat-card-header class="{{ colors.background }} {{ colors.text }} d-flex rounded-top py-2 px-3">
+        <div class="flex-fill">
+            <mat-card-title>
+                {{ title }}
+            </mat-card-title>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center text-end">
+            <span class="fs-5 font-light">{{ subtitle }}</span>
+        </div>
+    </mat-card-header>
+    <mat-card-content class="table-responsive p-0">
+        <ng-content></ng-content>
+    </mat-card-content>
+</mat-card>
\ No newline at end of file
diff --git a/src/app/components/shared/card-container/card-container.component.ts b/src/app/components/shared/card-container/card-container.component.ts
new file mode 100644
index 0000000..37f33d3
--- /dev/null
+++ b/src/app/components/shared/card-container/card-container.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { NgForOf, NgIf } from "@angular/common";
+import { MatCardModule } from '@angular/material/card';
+
+import { CardColors } from 'src/app/core';
+
+@Component({
+    selector: 'app-card-container',
+    templateUrl: './card-container.component.html',
+    standalone: true,
+    imports: [NgIf, NgForOf, MatCardModule]
+})
+export class CardContainerComponent {
+    errorList: string[] = [];
+    @Input() colors: CardColors = { background: 'bg-megna', text: 'text-bg-primary' };
+    @Input() title: string = 'Title';
+    @Input() subtitle: string = 'Subtitle';
+}
\ No newline at end of file
diff --git a/src/app/components/shared/dashboard-components/aeronefs-bar/aeronefs-bar.component.ts b/src/app/components/shared/dashboard-components/aeronefs-bar/aeronefs-bar.component.ts
index 705fc91..adc8d60 100755
--- a/src/app/components/shared/dashboard-components/aeronefs-bar/aeronefs-bar.component.ts
+++ b/src/app/components/shared/dashboard-components/aeronefs-bar/aeronefs-bar.component.ts
@@ -8,11 +8,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { Observable, Subscription } from 'rxjs';
 
-import { MenuItems } from 'src/app/components/shared';
-import { BarHorizontalChartComponent } from 'src/app/components/shared/helpers-chart';
-import { HistoryTableComponent } from 'src/app/components/shared/helpers-jump';
-import { UtilitiesService, AeronefsService } from 'src/app/core/services';
-import { AeronefByImat, AeronefByYear } from 'src/app/core/models';
+import { MenuItems } from '@components/shared';
+import { BarHorizontalChartComponent } from '@components/shared/helpers-chart';
+import { HistoryTableComponent } from '@components/shared/helpers-jump';
+import { UtilitiesService, AeronefsService } from '@services';
+import { AeronefByImat, AeronefByYear } from '@models';
 
 @Component({
     selector: 'app-aeronefs-bar',
diff --git a/src/app/components/shared/dashboard-components/aeronefs-pie/aeronefs-pie.component.ts b/src/app/components/shared/dashboard-components/aeronefs-pie/aeronefs-pie.component.ts
index 2ffa147..6aae2d3 100755
--- a/src/app/components/shared/dashboard-components/aeronefs-pie/aeronefs-pie.component.ts
+++ b/src/app/components/shared/dashboard-components/aeronefs-pie/aeronefs-pie.component.ts
@@ -9,11 +9,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { Observable, Subscription } from 'rxjs';
 
-import { MenuItems } from 'src/app/components/shared';
-import { HistoryTableComponent } from 'src/app/components/shared/helpers-jump';
-import { PieChartComponent } from 'src/app/components/shared/helpers-chart';
-import { UtilitiesService, AeronefsService } from 'src/app/core/services';
-import { AeronefByImat, AeronefByYear } from 'src/app/core/models';
+import { MenuItems } from '@components/shared';
+import { HistoryTableComponent } from '@components/shared/helpers-jump';
+import { PieChartComponent } from '@components/shared/helpers-chart';
+import { UtilitiesService, AeronefsService } from '@services';
+import { AeronefByImat, AeronefByYear } from '@models';
 
 @Component({
     selector: 'app-aeronefs-pie',
diff --git a/src/app/components/shared/dashboard-components/canopies-models/canopies-models.component.ts b/src/app/components/shared/dashboard-components/canopies-models/canopies-models.component.ts
index d7bf972..0dc7da6 100755
--- a/src/app/components/shared/dashboard-components/canopies-models/canopies-models.component.ts
+++ b/src/app/components/shared/dashboard-components/canopies-models/canopies-models.component.ts
@@ -8,11 +8,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { Observable, Subscription } from 'rxjs';
 
-import { MenuItems } from 'src/app/components/shared';
-import { PieChartComponent } from 'src/app/components/shared/helpers-chart';
-import { HistoryTableComponent } from 'src/app/components/shared/helpers-jump';
-import { UtilitiesService, CanopiesService } from 'src/app/core/services';
-import { CanopyModelBySize, CanopyModelByYear } from 'src/app/core/models';
+import { MenuItems } from '@components/shared';
+import { PieChartComponent } from '@components/shared/helpers-chart';
+import { HistoryTableComponent } from '@components/shared/helpers-jump';
+import { UtilitiesService, CanopiesService } from '@services';
+import { CanopyModelBySize, CanopyModelByYear } from '@models';
 
 @Component({
     selector: 'app-canopies-models',
diff --git a/src/app/components/shared/dashboard-components/canopies-sizes/canopies-sizes.component.ts b/src/app/components/shared/dashboard-components/canopies-sizes/canopies-sizes.component.ts
index a0fe65c..7aefa95 100755
--- a/src/app/components/shared/dashboard-components/canopies-sizes/canopies-sizes.component.ts
+++ b/src/app/components/shared/dashboard-components/canopies-sizes/canopies-sizes.component.ts
@@ -9,11 +9,11 @@ import { MatMenuModule } from '@angular/material/menu';
 
 import { Observable, Subscription } from 'rxjs';
 
-import { MenuItems } from 'src/app/components/shared';
-import { PieChartComponent } from 'src/app/components/shared/helpers-chart';
-import { HistoryTableComponent } from 'src/app/components/shared/helpers-jump';
-import { UtilitiesService, CanopiesService } from 'src/app/core/services';
-import { CanopyBySize, CanopyByYear } from 'src/app/core/models';
+import { MenuItems } from '@components/shared';
+import { PieChartComponent } from '@components/shared/helpers-chart';
+import { HistoryTableComponent } from '@components/shared/helpers-jump';
+import { UtilitiesService, CanopiesService } from '@services';
+import { CanopyBySize, CanopyByYear } from '@models';
 
 @Component({
     selector: 'app-canopies-sizes',
diff --git a/src/app/components/shared/dashboard-components/dropzones-bar/dropzones-bar.component.ts b/src/app/components/shared/dashboard-components/dropzones-bar/dropzones-bar.component.ts
index 4273847..09466c8 100755
--- a/src/app/components/shared/dashboard-components/dropzones-bar/dropzones-bar.component.ts
+++ b/src/app/components/shared/dashboard-components/dropzones-bar/dropzones-bar.component.ts
@@ -11,10 +11,10 @@ import { ChartistModule, Configuration } from 'ng-chartist';
 import { AxisOptions, Label } from 'chartist';
 import { Observable, Subscription } from 'rxjs';
 
-import { MenuItems } from 'src/app/components/shared';
-import { HistoryTableComponent } from 'src/app/components/shared/helpers-jump';
-import { UtilitiesService, DropZonesService } from 'src/app/core/services';
-import { DropZoneByOaci, DropZoneByYear } from 'src/app/core/models';
+import { MenuItems } from '@components/shared';
+import { HistoryTableComponent } from '@components/shared/helpers-jump';
+import { UtilitiesService, DropZonesService } from '@services';
+import { DropZoneByOaci, DropZoneByYear } from '@models';
 
 @Component({
     selector: 'app-dropzones-bar',
diff --git a/src/app/components/shared/dashboard-components/dropzones-pie/dropzones-pie.component.ts b/src/app/components/shared/dashboard-components/dropzones-pie/dropzones-pie.component.ts
index 25ece95..930d55d 100755
--- a/src/app/components/shared/dashboard-components/dropzones-pie/dropzones-pie.component.ts
+++ b/src/app/components/shared/dashboard-components/dropzones-pie/dropzones-pie.component.ts
@@ -9,11 +9,11 @@ import { MatMenuModule } from '@angular/material/menu';
 //import { ChartConfiguration } from 'chart.js';
 import { Observable, Subscription } from 'rxjs';
 
-import { MenuItems } from 'src/app/components/shared';
-import { PieChartComponent } from 'src/app/components/shared/helpers-chart';
-import { HistoryTableComponent } from 'src/app/components/shared/helpers-jump';
-import { UtilitiesService, DropZonesService } from 'src/app/core/services';
-import { DropZoneByOaci, DropZoneByYear } from 'src/app/core/models';
+import { MenuItems } from '@components/shared';
+import { PieChartComponent } from '@components/shared/helpers-chart';
+import { HistoryTableComponent } from '@components/shared/helpers-jump';
+import { UtilitiesService, DropZonesService } from '@services';
+import { DropZoneByOaci, DropZoneByYear } from '@models';
 
 @Component({
     selector: 'app-dropzones-pie',
diff --git a/src/app/components/shared/dashboard-components/jumps-by-month/jumps-by-month.component.ts b/src/app/components/shared/dashboard-components/jumps-by-month/jumps-by-month.component.ts
index 1210d7e..3152b74 100755
--- a/src/app/components/shared/dashboard-components/jumps-by-month/jumps-by-month.component.ts
+++ b/src/app/components/shared/dashboard-components/jumps-by-month/jumps-by-month.component.ts
@@ -12,9 +12,9 @@ import { AxisOptions, Label } from 'chartist';
 
 import { Observable, Subscription } from 'rxjs';
 
-import { MenuItems } from 'src/app/components/shared';
-import { UtilitiesService, JumpsService } from 'src/app/core/services';
-import { JumpByDate } from 'src/app/core/models';
+import { MenuItems } from '@components/shared';
+import { UtilitiesService, JumpsService } from '@services';
+import { JumpByDate } from '@models';
 
 @Component({
     selector: 'app-jumps-by-month',
diff --git a/src/app/components/shared/helpers-chart/bar-chart.component.ts b/src/app/components/shared/helpers-chart/bar-chart.component.ts
index 0a5d727..a8ea754 100755
--- a/src/app/components/shared/helpers-chart/bar-chart.component.ts
+++ b/src/app/components/shared/helpers-chart/bar-chart.component.ts
@@ -2,8 +2,8 @@ import { Component, Input, OnChanges } from '@angular/core';
 import { ChartDataset } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 
-import { UtilitiesService } from 'src/app/core/services';
-import { BarConfig } from 'src/app/core/models';
+import { UtilitiesService } from '@services';
+import { BarConfig } from '@models';
 
 @Component({
     selector: 'app-bar-chart',
diff --git a/src/app/components/shared/helpers-chart/bar-horizontal-chart.component.ts b/src/app/components/shared/helpers-chart/bar-horizontal-chart.component.ts
index 73760f6..ec70776 100755
--- a/src/app/components/shared/helpers-chart/bar-horizontal-chart.component.ts
+++ b/src/app/components/shared/helpers-chart/bar-horizontal-chart.component.ts
@@ -2,8 +2,8 @@ import { Component, Input, OnChanges } from '@angular/core';
 import { ChartDataset } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 
-import { UtilitiesService } from 'src/app/core/services';
-import { BarConfig } from 'src/app/core/models';
+import { UtilitiesService } from '@services';
+import { BarConfig } from '@models';
 
 @Component({
     selector: 'app-bar-horizontal-chart',
diff --git a/src/app/components/shared/helpers-chart/bars-chart.component.ts b/src/app/components/shared/helpers-chart/bars-chart.component.ts
index 599a890..37a22d6 100755
--- a/src/app/components/shared/helpers-chart/bars-chart.component.ts
+++ b/src/app/components/shared/helpers-chart/bars-chart.component.ts
@@ -2,8 +2,8 @@ import { Component, Input, OnChanges, AfterContentChecked } from '@angular/core'
 import { ChartDataset } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 
-import { UtilitiesService } from 'src/app/core/services';
-import { BarConfig } from 'src/app/core/models';
+import { UtilitiesService } from '@services';
+import { BarConfig } from '@models';
 
 @Component({
     selector: 'app-bars-chart',
diff --git a/src/app/components/shared/helpers-chart/circle-chart.component.ts b/src/app/components/shared/helpers-chart/circle-chart.component.ts
index 161a0b8..a14cb2a 100755
--- a/src/app/components/shared/helpers-chart/circle-chart.component.ts
+++ b/src/app/components/shared/helpers-chart/circle-chart.component.ts
@@ -2,8 +2,8 @@ import { Component, Input, OnChanges } from '@angular/core';
 //import { ChartDataset } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 
-import { UtilitiesService } from 'src/app/core/services';
-import { CircleConfig } from 'src/app/core/models';
+import { UtilitiesService } from '@services';
+import { CircleConfig } from '@models';
 
 @Component({
     selector: 'app-circle-chart',
diff --git a/src/app/components/shared/helpers-chart/line-chart.component.ts b/src/app/components/shared/helpers-chart/line-chart.component.ts
index 72a7ec4..bb7a020 100755
--- a/src/app/components/shared/helpers-chart/line-chart.component.ts
+++ b/src/app/components/shared/helpers-chart/line-chart.component.ts
@@ -2,8 +2,8 @@ import { Component, Input, OnChanges } from '@angular/core';
 import { ChartDataset, Point } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 
-import { UtilitiesService } from 'src/app/core/services';
-import { LineConfig } from 'src/app/core/models';
+import { UtilitiesService } from '@services';
+import { LineConfig } from '@models';
 
 @Component({
     selector: 'app-line-chart',
diff --git a/src/app/components/shared/helpers-chart/linearea-chart.component.ts b/src/app/components/shared/helpers-chart/linearea-chart.component.ts
index b0ca60c..e2bdbd6 100755
--- a/src/app/components/shared/helpers-chart/linearea-chart.component.ts
+++ b/src/app/components/shared/helpers-chart/linearea-chart.component.ts
@@ -2,8 +2,8 @@ import { Component, Input, OnChanges } from '@angular/core';
 import { ChartDataset } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 
-import { UtilitiesService } from 'src/app/core/services';
-import { LineConfig } from 'src/app/core/models';
+import { UtilitiesService } from '@services';
+import { LineConfig } from '@models';
 
 @Component({
     selector: 'app-linearea-chart',
diff --git a/src/app/components/shared/helpers-chart/pie-chart.component.ts b/src/app/components/shared/helpers-chart/pie-chart.component.ts
index 96fb49a..e43d68b 100755
--- a/src/app/components/shared/helpers-chart/pie-chart.component.ts
+++ b/src/app/components/shared/helpers-chart/pie-chart.component.ts
@@ -2,8 +2,8 @@ import { Component, Input, OnChanges } from '@angular/core';
 //import { ChartDataset } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 
-import { UtilitiesService } from 'src/app/core/services';
-import { DoughnutConfig } from 'src/app/core/models';
+import { UtilitiesService } from '@services';
+import { DoughnutConfig } from '@models';
 
 @Component({
     selector: 'app-pie-chart',
diff --git a/src/app/components/shared/helpers-jump/jump-list.component.ts b/src/app/components/shared/helpers-jump/jump-list.component.ts
index 1f087c2..e9cc21c 100644
--- a/src/app/components/shared/helpers-jump/jump-list.component.ts
+++ b/src/app/components/shared/helpers-jump/jump-list.component.ts
@@ -6,8 +6,8 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Observable, Subscription } from 'rxjs';
 
-import { Errors, Jump, JumpList, JumpListConfig } from 'src/app/core/models';
-import { JumpsService } from 'src/app/core/services';
+import { Errors, Jump, JumpList, JumpListConfig } from '@models';
+import { JumpsService } from '@services';
 import { JumpPreviewComponent } from './jump-preview.component';
 
 @Component({
diff --git a/src/app/components/shared/helpers-jump/jump-meta.component.ts b/src/app/components/shared/helpers-jump/jump-meta.component.ts
index 5498a1c..b057c2a 100644
--- a/src/app/components/shared/helpers-jump/jump-meta.component.ts
+++ b/src/app/components/shared/helpers-jump/jump-meta.component.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import { RouterLink } from '@angular/router';
 
-import { Jump } from 'src/app/core/models';
+import { Jump } from '@models';
 
 @Component({
     selector: 'app-jump-meta',
diff --git a/src/app/components/shared/helpers-jump/jump-preview.component.ts b/src/app/components/shared/helpers-jump/jump-preview.component.ts
index 04133e8..cbf6433 100644
--- a/src/app/components/shared/helpers-jump/jump-preview.component.ts
+++ b/src/app/components/shared/helpers-jump/jump-preview.component.ts
@@ -7,8 +7,8 @@ import { MatDividerModule } from '@angular/material/divider';
 import { Observable, Subscription } from 'rxjs';
 
 import { JumpMetaComponent } from './jump-meta.component';
-import { Jump } from 'src/app/core/models';
-import { JumpsService } from 'src/app/core/services';
+import { Jump } from '@models';
+import { JumpsService } from '@services';
 
 @Component({
     selector: 'app-jump-preview',
diff --git a/src/app/components/shared/helpers-jump/jump-table.component.ts b/src/app/components/shared/helpers-jump/jump-table.component.ts
index 546852c..961e909 100644
--- a/src/app/components/shared/helpers-jump/jump-table.component.ts
+++ b/src/app/components/shared/helpers-jump/jump-table.component.ts
@@ -20,10 +20,10 @@ import { Observable, Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { FrenchPaginator } from 'src/app/components/shared/french-paginator.component';
-import { ColumnDefinition, Errors, Jump, JumpByDay, JumpFile, JumpFileType, JumpList, JumpListConfig, jumpColumns } from 'src/app/core/models';
-import { JumpsService, JumpTableService } from 'src/app/core/services';
-import { JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent, JumpViewDialogComponent } from 'src/app/components/logbook/dialogs'
+import { FrenchPaginator } from '@components/shared/french-paginator.component';
+import { ColumnDefinition, Errors, Jump, JumpByDay, JumpFile, JumpFileType, JumpList, JumpListConfig, jumpColumns } from '@models';
+import { JumpsService, JumpTableService } from '@services';
+import { JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent, JumpViewDialogComponent } from '@components/logbook/dialogs'
 
 @Component({
     standalone: true,
diff --git a/src/app/components/shared/herowars-components/fortification-card-content/fortification-card-content.component.ts b/src/app/components/shared/herowars-components/fortification-card-content/fortification-card-content.component.ts
index 611ef06..6e02849 100644
--- a/src/app/components/shared/herowars-components/fortification-card-content/fortification-card-content.component.ts
+++ b/src/app/components/shared/herowars-components/fortification-card-content/fortification-card-content.component.ts
@@ -4,9 +4,9 @@ import { MatCardModule } from '@angular/material/card';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
 
-//import { Errors } from 'src/app/core/models';
-//import { HWMember, HWGuildWarFortification, HWGuildWarHeroTeam, HWGuildWarTitanTeam } from 'src/app/core/models';
-import { HWGuildWarFortification, HWMember } from 'src/app/core/models';
+//import { Errors } from '@models';
+//import { HWMember, HWGuildWarFortification, HWGuildWarHeroTeam, HWGuildWarTitanTeam } from '@models';
+import { HWGuildWarFortification, HWMember } from '@models';
 
 @Component({
     selector: 'app-fortification-card-content',
diff --git a/src/app/components/shared/herowars-components/guild-card/guild-card.component.ts b/src/app/components/shared/herowars-components/guild-card/guild-card.component.ts
index 3fc1d47..4eba034 100644
--- a/src/app/components/shared/herowars-components/guild-card/guild-card.component.ts
+++ b/src/app/components/shared/herowars-components/guild-card/guild-card.component.ts
@@ -4,7 +4,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 
-import { HWGuildData, HWGuildClan, HWGuildStat } from 'src/app/core/models';
+import { HWGuildData, HWGuildClan, HWGuildStat } from '@models';
 
 import guildData from 'src/files-data/hw-guild-data.json'; // page Membres
 
diff --git a/src/app/components/shared/herowars-components/guildraids-log/guildraids-log.component.ts b/src/app/components/shared/herowars-components/guildraids-log/guildraids-log.component.ts
index 6237edf..af4efde 100644
--- a/src/app/components/shared/herowars-components/guildraids-log/guildraids-log.component.ts
+++ b/src/app/components/shared/herowars-components/guildraids-log/guildraids-log.component.ts
@@ -12,7 +12,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatStepperIntl, MatStepperModule } from '@angular/material/stepper';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
-import { HWGuildRaid, HWGuildRaidAttacker, HWGuildRaidAttackers, HWGuildRaidStage, HWMember } from 'src/app/core/models';
+import { HWGuildRaid, HWGuildRaidAttacker, HWGuildRaidAttackers, HWGuildRaidStage, HWMember } from '@models';
 
 import guildRaids from 'src/files-data/hw-guild-raids.json'; // page Asgard -> Guild Raid -> Log
 
diff --git a/src/app/components/shared/herowars-components/guildwar-attack/guildwar-attack.component.ts b/src/app/components/shared/herowars-components/guildwar-attack/guildwar-attack.component.ts
index e99ed01..0ae65d2 100644
--- a/src/app/components/shared/herowars-components/guildwar-attack/guildwar-attack.component.ts
+++ b/src/app/components/shared/herowars-components/guildwar-attack/guildwar-attack.component.ts
@@ -4,11 +4,11 @@ import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 
-import { FortificationCardContentComponent } from 'src/app/components/shared';
+import { FortificationCardContentComponent } from '@components/shared';
 import {
     HWGuildWarEnemySlot, HWGuildWarEnemyTeam, HWGuildWarFortification,
     HWGuildWarHeroTeam, HWGuildWarTitanTeam, HWGuildWarSlots, HWMember
-} from 'src/app/core/models';
+} from '@models';
 
 /* JSON data */
 import guildWarData from 'src/files-data/hw-guild-war.json';        // page Overview -> Statistics | page Guild War -> Guild War
diff --git a/src/app/components/shared/herowars-components/guildwar-champions/guildwar-champions.component.ts b/src/app/components/shared/herowars-components/guildwar-champions/guildwar-champions.component.ts
index 3726c47..dca0da4 100644
--- a/src/app/components/shared/herowars-components/guildwar-champions/guildwar-champions.component.ts
+++ b/src/app/components/shared/herowars-components/guildwar-champions/guildwar-champions.component.ts
@@ -4,8 +4,8 @@ import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 
-import { HWMember } from 'src/app/core/models';
-//import { HWGuildWarFortification, HWMember } from 'src/app/core/models';
+import { HWMember } from '@models';
+//import { HWGuildWarFortification, HWMember } from '@models';
 
 @Component({
     selector: 'app-guildwar-champions',
diff --git a/src/app/components/shared/herowars-components/guildwar-defence/guildwar-defence.component.ts b/src/app/components/shared/herowars-components/guildwar-defence/guildwar-defence.component.ts
index 5f016ce..65a7021 100644
--- a/src/app/components/shared/herowars-components/guildwar-defence/guildwar-defence.component.ts
+++ b/src/app/components/shared/herowars-components/guildwar-defence/guildwar-defence.component.ts
@@ -4,9 +4,9 @@ import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 
-import { FortificationCardContentComponent } from 'src/app/components/shared';
-//import { HWMember } from 'src/app/core/models';
-import { HWGuildWarFortification, HWGuildWarHeroTeam, HWGuildWarSlots, HWGuildWarTitanTeam, HWMember } from 'src/app/core/models';
+import { FortificationCardContentComponent } from '@components/shared';
+//import { HWMember } from '@models';
+import { HWGuildWarFortification, HWGuildWarHeroTeam, HWGuildWarSlots, HWGuildWarTitanTeam, HWMember } from '@models';
 
 /* JSON data */
 import guildWarData from 'src/files-data/hw-guild-war.json';        // page Overview -> Statistics | page Guild War -> Guild War
@@ -170,17 +170,17 @@ export class GuildwarDefenceComponent implements OnInit {
     }
 
     getGatesOfNature(): HWGuildWarFortification {
-        const indexes: number[] = [4, 9, 14, 19];
+        const indexes: number[] = [5, 10, 15, 16];
         return this._getFortification(indexes, 'titans', 'Gates Of Nature');
     }
 
     getBastionOfFire(): HWGuildWarFortification {
-        const indexes: number[] = [5, 10, 15, 16];
+        const indexes: number[] = [6, 11, 12, 17];
         return this._getFortification(indexes, 'titans', 'Bastion Of Fire');
     }
 
     getBastionOfIce(): HWGuildWarFortification {
-        const indexes: number[] = [6, 11, 12, 17];
+        const indexes: number[] = [4, 9, 14, 19];
         return this._getFortification(indexes, 'titans', 'Bastion Of Ice');
     }
 
diff --git a/src/app/components/shared/herowars-components/guildwar-teams/guildwar-teams.component.ts b/src/app/components/shared/herowars-components/guildwar-teams/guildwar-teams.component.ts
index beb4085..564d0c8 100644
--- a/src/app/components/shared/herowars-components/guildwar-teams/guildwar-teams.component.ts
+++ b/src/app/components/shared/herowars-components/guildwar-teams/guildwar-teams.component.ts
@@ -4,7 +4,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 
-import { HWGuildWarHeroTeam, HWGuildWarTitanTeam, HWMember } from 'src/app/core/models';
+import { HWGuildWarHeroTeam, HWGuildWarTitanTeam, HWMember } from '@models';
 
 import guildWarData from 'src/files-data/hw-guild-war.json'; // page Overview -> Statistics | page Guild War -> Guild War
 
diff --git a/src/app/components/shared/herowars-components/members-statistics/members-statistics.component.ts b/src/app/components/shared/herowars-components/members-statistics/members-statistics.component.ts
index 1fd2afc..2157951 100644
--- a/src/app/components/shared/herowars-components/members-statistics/members-statistics.component.ts
+++ b/src/app/components/shared/herowars-components/members-statistics/members-statistics.component.ts
@@ -4,8 +4,8 @@ import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 
-import { HWActivityStat, HWGuildClan, HWGuildData, HWMember, HWMemberStat, HWWeekStat } from 'src/app/core/models/herowars';
-import { UtilitiesService } from 'src/app/core/services';
+import { HWActivityStat, HWGuildClan, HWGuildData, HWMember, HWMemberStat, HWWeekStat } from '@models/herowars';
+import { UtilitiesService } from '@services';
 
 import guildData from 'src/files-data/hw-guild-data.json';             // page Membres
 import guildStatistics from 'src/files-data/hw-guild-statistics.json'; // page Overview -> Statistics
diff --git a/src/app/components/shared/index.ts b/src/app/components/shared/index.ts
index cc26686..2cce6d4 100644
--- a/src/app/components/shared/index.ts
+++ b/src/app/components/shared/index.ts
@@ -1,4 +1,5 @@
 export * from './accordion';
+export * from './card-container/card-container.component';
 export * from './dashboard-components';
 export * from './helpers-chart';
 export * from './helpers-jump';
diff --git a/src/app/components/shared/layout/full.component.ts b/src/app/components/shared/layout/full.component.ts
index b5ed0bb..11fec9f 100755
--- a/src/app/components/shared/layout/full.component.ts
+++ b/src/app/components/shared/layout/full.component.ts
@@ -11,12 +11,12 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatMenuModule } from '@angular/material/menu';
 import { Observable, Subscription } from 'rxjs';
 
-import { Menu, User } from 'src/app/core/models';
-import { UserService } from 'src/app/core/services';
-import { MenuItems, ShowAuthedDirective, AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective } from 'src/app/components/shared';
-//import { SpinnerComponent } from 'src/app/components/shared';
-//import { HeaderComponent, FooterComponent } from 'src/app/components/shared/layout';
-import { FooterComponent } from 'src/app/components/shared/layout';
+import { Menu, User } from '@models';
+import { UserService } from '@services';
+import { MenuItems, ShowAuthedDirective, AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective } from '@components/shared';
+//import { SpinnerComponent } from '@components/shared';
+//import { HeaderComponent, FooterComponent } from '@components/shared/layout';
+import { FooterComponent } from '@components/shared/layout';
 
 
 /** @title Responsive sidenav */
diff --git a/src/app/components/shared/layout/header.component.ts b/src/app/components/shared/layout/header.component.ts
index 39c80ff..b7510d8 100644
--- a/src/app/components/shared/layout/header.component.ts
+++ b/src/app/components/shared/layout/header.component.ts
@@ -9,8 +9,8 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Observable, Subscription } from 'rxjs';
 
-import { User } from 'src/app/core/models';
-import { UserService } from 'src/app/core/services';
+import { User } from '@models';
+import { UserService } from '@services';
 
 @Component({
     selector: 'app-layout-header',
diff --git a/src/app/components/shared/menu-items.ts b/src/app/components/shared/menu-items.ts
index a64085d..ca9495e 100755
--- a/src/app/components/shared/menu-items.ts
+++ b/src/app/components/shared/menu-items.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { Menu } from 'src/app/core/models/menu.model';
+import { Menu } from '@models/menu.model';
 
 const MENUAUTH: Menu[] = [
     { state: 'home', type: 'link', name: 'Accueil', icon: 'home', icontype: 'mat', desc: '' },
diff --git a/src/app/components/shared/show-authed.directive.ts b/src/app/components/shared/show-authed.directive.ts
index 277311d..346f151 100644
--- a/src/app/components/shared/show-authed.directive.ts
+++ b/src/app/components/shared/show-authed.directive.ts
@@ -1,7 +1,7 @@
 import { Directive, Input, OnInit, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 
-import { UserService } from 'src/app/core/services';
+import { UserService } from '@services';
 
 @Directive({
     selector: '[appShowAuthed]',
diff --git a/src/app/core/constants/app.constants.ts b/src/app/core/constants/app.constants.ts
new file mode 100644
index 0000000..d4b0f3d
--- /dev/null
+++ b/src/app/core/constants/app.constants.ts
@@ -0,0 +1,10 @@
+/**
+ * Application-wide constants
+ */
+
+// Guild/Clan constants
+export const MAX_CLAN_MEMBERS = 30;
+
+// Default values
+export const DEFAULT_PAGE_SIZE = 10;
+export const DEFAULT_TIMEOUT = 30000; // ms
diff --git a/src/app/core/constants/index.ts b/src/app/core/constants/index.ts
new file mode 100644
index 0000000..cd95e50
--- /dev/null
+++ b/src/app/core/constants/index.ts
@@ -0,0 +1 @@
+export * from './app.constants';
diff --git a/src/app/core/guards/admin.guard.ts b/src/app/core/guards/admin.guard.ts
index bf3cf4d..fba2066 100644
--- a/src/app/core/guards/admin.guard.ts
+++ b/src/app/core/guards/admin.guard.ts
@@ -2,7 +2,7 @@ import { inject } from '@angular/core';
 import { CanActivateFn, Router } from '@angular/router';
 import { map, take } from 'rxjs/operators';
 
-import { UserService } from 'src/app/core/services';
+import { UserService } from '@services';
 
 export const adminGuard: CanActivateFn = () => {
     const router = inject(Router);
diff --git a/src/app/core/guards/auth.guard.ts b/src/app/core/guards/auth.guard.ts
index f21497a..25fb017 100644
--- a/src/app/core/guards/auth.guard.ts
+++ b/src/app/core/guards/auth.guard.ts
@@ -2,7 +2,7 @@ import { inject } from '@angular/core';
 import { CanActivateFn, Router } from '@angular/router';
 import { map, take } from 'rxjs/operators';
 
-import { UserService } from 'src/app/core/services';
+import { UserService } from '@services';
 
 export const authGuard: CanActivateFn = () => {
     const router = inject(Router);
diff --git a/src/app/core/guards/noauth.guard.ts b/src/app/core/guards/noauth.guard.ts
index 1d422b2..5b158e7 100644
--- a/src/app/core/guards/noauth.guard.ts
+++ b/src/app/core/guards/noauth.guard.ts
@@ -3,7 +3,7 @@ import { CanActivateFn } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 
-import { UserService } from 'src/app/core/services';
+import { UserService } from '@services';
 
 export const noauthGuard: CanActivateFn = (): Observable<boolean> => {
     /*
diff --git a/src/app/core/index.ts b/src/app/core/index.ts
index 72b2c7e..84be153 100644
--- a/src/app/core/index.ts
+++ b/src/app/core/index.ts
@@ -4,3 +4,4 @@ export * from './interceptors';
 export * from './models';
 export * from './resolvers';
 export * from './services';
+export * from './viewmodels';
diff --git a/src/app/core/interceptors/api.interceptor.ts b/src/app/core/interceptors/api.interceptor.ts
index c876dc9..a62f551 100644
--- a/src/app/core/interceptors/api.interceptor.ts
+++ b/src/app/core/interceptors/api.interceptor.ts
@@ -1,6 +1,6 @@
 import { HttpInterceptorFn } from "@angular/common/http";
 
-import { environment } from 'src/environments/environment';
+import { environment } from '@environments/environment';
 
 export const apiInterceptor: HttpInterceptorFn = (req, next) => {
     const apiReq = req.clone({
diff --git a/src/app/core/interceptors/token.interceptor.ts b/src/app/core/interceptors/token.interceptor.ts
index 2eae6d9..06e25fc 100644
--- a/src/app/core/interceptors/token.interceptor.ts
+++ b/src/app/core/interceptors/token.interceptor.ts
@@ -1,6 +1,6 @@
 import { inject } from "@angular/core";
 import { HttpInterceptorFn } from "@angular/common/http";
-import { JwtService } from "src/app/core/services/jwt.service";
+import { JwtService } from "@services/jwt.service";
 
 export const tokenInterceptor: HttpInterceptorFn = (req, next) => {
     const token = inject(JwtService).getToken();
diff --git a/src/app/core/models/card-colors.model.ts b/src/app/core/models/card-colors.model.ts
new file mode 100644
index 0000000..41dfd42
--- /dev/null
+++ b/src/app/core/models/card-colors.model.ts
@@ -0,0 +1,4 @@
+export interface CardColors {
+    background: string;
+    text: string;
+}
\ No newline at end of file
diff --git a/src/app/core/models/herowars/clan-page-data.model.ts b/src/app/core/models/herowars/clan-page-data.model.ts
new file mode 100644
index 0000000..a792f6f
--- /dev/null
+++ b/src/app/core/models/herowars/clan-page-data.model.ts
@@ -0,0 +1,8 @@
+import { HWClan } from './clan.model';
+import { PageLinks, PageMeta } from '../shared.model';
+
+export interface HWClanPageData {
+    clan: HWClan;
+    _links: PageLinks;
+    _meta: PageMeta;
+}
diff --git a/src/app/core/models/herowars/clan.model.ts b/src/app/core/models/herowars/clan.model.ts
index a0664fd..be3efb0 100644
--- a/src/app/core/models/herowars/clan.model.ts
+++ b/src/app/core/models/herowars/clan.model.ts
@@ -1,6 +1,5 @@
 import { HWMember } from './member.model';
-import { HWActivityStat, HWGuildStat, HWMemberStat } from './stat.model';
-import { PageLinks, PageMeta } from '../shared.model';
+import { HWActivityStat, HWClanIcon, HWGuildStat, HWMemberStat } from './stat.model';
 
 export interface HWGuildClan {
     id: string;
@@ -8,13 +7,7 @@ export interface HWGuildClan {
     level: string;
     title: string;
     description: string;
-    icon: {
-        flagColor1: number;
-        flagColor2: number;
-        flagShape: number;
-        iconColor: number;
-        iconShape: number;
-    };
+    icon: HWClanIcon;
     country: string;
     minLevel: string;
     serverId: string;
@@ -58,13 +51,7 @@ export interface HWClan {
     description: string;
     disbanding: boolean;
     frameId: number;
-    icon: {
-        flagColor1: number;
-        flagColor2: number;
-        flagShape: number;
-        iconColor: number;
-        iconShape: number;
-    };
+    icon: HWClanIcon;
     level: string;
     members: {[key: string]: HWMember};
     membersCount: string;
@@ -76,9 +63,3 @@ export interface HWClan {
     topActivity: string;
     topDungeon: string;
 }
-
-export interface HWClanPageData {
-    clan: HWClan;
-    _links: PageLinks;
-    _meta: PageMeta;
-}
diff --git a/src/app/core/models/herowars/index.ts b/src/app/core/models/herowars/index.ts
index 44ae6f8..14aee78 100644
--- a/src/app/core/models/herowars/index.ts
+++ b/src/app/core/models/herowars/index.ts
@@ -1,9 +1,13 @@
+export * from './clan.model';
 export * from './clan-list-config.model';
 export * from './clan-list.model';
-export * from './clan.model';
+export * from './clan-page-data.model';
 export * from './fortification.model';
 export * from './guildwar.model';
 //export * from './hw.model';
 export * from './member.model';
+export * from './member-list-config.model';
+export * from './member-list.model';
+export * from './member-page-data.model';
 export * from './raid.model';
 export * from './stat.model';
diff --git a/src/app/core/models/herowars/member-list-config.model.ts b/src/app/core/models/herowars/member-list-config.model.ts
new file mode 100644
index 0000000..e1992f2
--- /dev/null
+++ b/src/app/core/models/herowars/member-list-config.model.ts
@@ -0,0 +1,16 @@
+export interface HWMemberListConfig {
+    type: string;
+    filters: HWMemberListFilters;
+}
+
+export interface HWMemberListFilters {
+    id?: string;
+    name?: string;
+    clanId?: string;
+    clanTitle?: string;
+    serverId?: string;
+    level?: string;
+    commander?: boolean;
+    champion?: boolean;
+    leagueId?: number;
+}
diff --git a/src/app/core/models/herowars/member-list.model.ts b/src/app/core/models/herowars/member-list.model.ts
new file mode 100644
index 0000000..e67c110
--- /dev/null
+++ b/src/app/core/models/herowars/member-list.model.ts
@@ -0,0 +1,6 @@
+import { HWMember } from './member.model';
+
+export interface HWMemberList {
+    members: Array<HWMember>;
+    membersCount: number;
+}
diff --git a/src/app/core/models/herowars/member-page-data.model.ts b/src/app/core/models/herowars/member-page-data.model.ts
new file mode 100644
index 0000000..224f13f
--- /dev/null
+++ b/src/app/core/models/herowars/member-page-data.model.ts
@@ -0,0 +1,8 @@
+import { HWMember } from './member.model';
+import { PageLinks, PageMeta } from '../shared.model';
+
+export interface HWMemberPageData {
+    member: HWMember;
+    _links: PageLinks;
+    _meta: PageMeta;
+}
diff --git a/src/app/core/models/herowars/member.model.ts b/src/app/core/models/herowars/member.model.ts
index ceaa7e8..93aede3 100644
--- a/src/app/core/models/herowars/member.model.ts
+++ b/src/app/core/models/herowars/member.model.ts
@@ -1,18 +1,14 @@
 import { HWGuildRaid } from './raid.model';
-import { HWMemberStat, HWWeekStat } from './stat.model';
-import { HWGuildWarHeroTeam, HWGuildWarTitanTeam } from './guildwar.model';
+import {
+    HWMemberStat, HWWeekStat, HWClanIcon, HWInactivity,
+    HWRaidsInfo, HWMemberHeroes, HWMemberTitans
+} from './stat.model';
 
 export interface HWMember {
     id: string;
     allowPm: string;
     avatarId: string;
-    clanIcon: {
-        flagColor1: number;
-        flagColor2: number;
-        flagShape: number;
-        iconColor: number;
-        iconShape: number;
-    };
+    clanIcon: HWClanIcon;
     clanId: string;
     clanRole: string;
     clanTitle: string;
@@ -26,21 +22,10 @@ export interface HWMember {
     serverId: string;
     showProfile: boolean;
     champion: boolean;
-    heroes: {
-        power: number;
-        teams: HWGuildWarHeroTeam[];
-    };
-    titans: {
-        power: number;
-        teams: HWGuildWarTitanTeam[];
-    };
+    heroes: HWMemberHeroes;
+    titans: HWMemberTitans;
     stat: HWMemberStat;
-    inactivity: {
-        daysLeft: number,
-        timeLeft: number,
-        dropDate: number;
-        dropDelay: string;
-    }
+    inactivity: HWInactivity;
     adventureSum: number;
     clanGiftsSum: number;
     clanWarSum: number;
@@ -50,8 +35,5 @@ export interface HWMember {
     warGifts: number;
     rewards: number;
     raids: HWGuildRaid[];
-    raidsInfo: {
-        variationAvg: number;
-        variationSum: number;
-    }
+    raidsInfo: HWRaidsInfo;
 }
\ No newline at end of file
diff --git a/src/app/core/models/herowars/stat.model.ts b/src/app/core/models/herowars/stat.model.ts
index 0edce2a..644e74a 100644
--- a/src/app/core/models/herowars/stat.model.ts
+++ b/src/app/core/models/herowars/stat.model.ts
@@ -1,4 +1,6 @@
 
+import { HWGuildWarHeroTeam, HWGuildWarTitanTeam } from './guildwar.model';
+
 export interface HWGuildStat {
     todayActivity: number;
     activitySum: number;
@@ -39,4 +41,34 @@ export interface HWMemberStat {
     wasChampion: boolean;
     todayPrestige: number;
     prestigeSum: number;
+}
+
+export interface HWClanIcon {
+    flagColor1: number;
+    flagColor2: number;
+    flagShape: number;
+    iconColor: number;
+    iconShape: number;
+}
+
+export interface HWInactivity {
+    daysLeft: number;
+    timeLeft: number;
+    dropDate: number;
+    dropDelay: string;
+}
+
+export interface HWRaidsInfo {
+    variationAvg: number;
+    variationSum: number;
+}
+
+export interface HWMemberHeroes {
+    power: number;
+    teams: HWGuildWarHeroTeam[];
+}
+
+export interface HWMemberTitans {
+    power: number;
+    teams: HWGuildWarTitanTeam[];
 }
\ No newline at end of file
diff --git a/src/app/core/models/index.ts b/src/app/core/models/index.ts
index f8b7a3a..dafc194 100644
--- a/src/app/core/models/index.ts
+++ b/src/app/core/models/index.ts
@@ -9,6 +9,7 @@ export * from './application-list-config.model';
 export * from './brand.model';
 export * from './calculator.model';
 export * from './canopy.model';
+export * from './card-colors.model';
 export * from './category.model';
 export * from './chart.model';
 export * from './dropzone.model';
diff --git a/src/app/core/resolvers/aeronefs-page-resolver.service.ts b/src/app/core/resolvers/aeronefs-page-resolver.service.ts
index 13d0b18..f887fad 100644
--- a/src/app/core/resolvers/aeronefs-page-resolver.service.ts
+++ b/src/app/core/resolvers/aeronefs-page-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { AeronefsPageData } from 'src/app/core/models';
-import { PagesService } from 'src/app/core/services';
+import { AeronefsPageData } from '@models';
+import { PagesService } from '@services';
 
 export const aeronefsPageResolver: ResolveFn<AeronefsPageData> = () => {
     return inject(PagesService).getAeronefsPage().pipe(take(1));
diff --git a/src/app/core/resolvers/article-resolver.service.ts b/src/app/core/resolvers/article-resolver.service.ts
index 4441872..09f4a12 100644
--- a/src/app/core/resolvers/article-resolver.service.ts
+++ b/src/app/core/resolvers/article-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { ArticlePageData } from 'src/app/core/models';
-import { ArticlesService } from 'src/app/core/services';
+import { ArticlePageData } from '@models';
+import { ArticlesService } from '@services';
 
 export const articleResolver: ResolveFn<ArticlePageData> = (
     route: ActivatedRouteSnapshot
diff --git a/src/app/core/resolvers/articles-resolver.service.ts b/src/app/core/resolvers/articles-resolver.service.ts
index a47bc5a..726156a 100644
--- a/src/app/core/resolvers/articles-resolver.service.ts
+++ b/src/app/core/resolvers/articles-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { Article } from 'src/app/core/models';
-import { ArticlesService } from 'src/app/core/services';
+import { Article } from '@models';
+import { ArticlesService } from '@services';
 
 export const articlesResolver: ResolveFn<Array<Article>> = () => {
     return inject(ArticlesService).getAll().pipe(take(1));
diff --git a/src/app/core/resolvers/auth-resolver.service.ts b/src/app/core/resolvers/auth-resolver.service.ts
index 455901b..0ed2d13 100644
--- a/src/app/core/resolvers/auth-resolver.service.ts
+++ b/src/app/core/resolvers/auth-resolver.service.ts
@@ -2,7 +2,7 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { UserService } from 'src/app/core/services';
+import { UserService } from '@services';
 
 export const authResolver: ResolveFn<boolean> = () => {
     return inject(UserService).isAuthenticated.pipe(take(1));
diff --git a/src/app/core/resolvers/canopies-page-resolver.service.ts b/src/app/core/resolvers/canopies-page-resolver.service.ts
index 862501b..11b90e6 100644
--- a/src/app/core/resolvers/canopies-page-resolver.service.ts
+++ b/src/app/core/resolvers/canopies-page-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { CanopiesPageData } from 'src/app/core/models';
-import { PagesService } from 'src/app/core/services';
+import { CanopiesPageData } from '@models';
+import { PagesService } from '@services';
 
 export const canopiesPageResolver: ResolveFn<CanopiesPageData> = () => {
     return inject(PagesService).getCanopiesPage().pipe(take(1));
diff --git a/src/app/core/resolvers/dropzones-page-resolver.service.ts b/src/app/core/resolvers/dropzones-page-resolver.service.ts
index 0bb16f6..3a3a8f0 100644
--- a/src/app/core/resolvers/dropzones-page-resolver.service.ts
+++ b/src/app/core/resolvers/dropzones-page-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { DropZonesPageData } from 'src/app/core/models';
-import { PagesService } from 'src/app/core/services';
+import { DropZonesPageData } from '@models';
+import { PagesService } from '@services';
 
 export const dropZonesPageResolver: ResolveFn<DropZonesPageData> = () => {
     return inject(PagesService).getDropZonesPage().pipe(take(1));
diff --git a/src/app/core/resolvers/jump-resolver.service.ts b/src/app/core/resolvers/jump-resolver.service.ts
index 7cca36d..81fcd95 100644
--- a/src/app/core/resolvers/jump-resolver.service.ts
+++ b/src/app/core/resolvers/jump-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { JumpPageData } from 'src/app/core/models';
-import { JumpsService } from 'src/app/core/services';
+import { JumpPageData } from '@models';
+import { JumpsService } from '@services';
 
 export const jumpResolver: ResolveFn<JumpPageData> = (
     route: ActivatedRouteSnapshot
diff --git a/src/app/core/resolvers/jumps-page-resolver.service.ts b/src/app/core/resolvers/jumps-page-resolver.service.ts
index 6bf09ec..1949f4e 100644
--- a/src/app/core/resolvers/jumps-page-resolver.service.ts
+++ b/src/app/core/resolvers/jumps-page-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { JumpsPageData } from 'src/app/core/models';
-import { PagesService } from 'src/app/core/services';
+import { JumpsPageData } from '@models';
+import { PagesService } from '@services';
 
 export const jumpsPageResolver: ResolveFn<JumpsPageData> = () => {
     return inject(PagesService).getJumpsPage().pipe(take(1));
diff --git a/src/app/core/resolvers/jumps-resolver.service.ts b/src/app/core/resolvers/jumps-resolver.service.ts
index 1cec37c..1151879 100644
--- a/src/app/core/resolvers/jumps-resolver.service.ts
+++ b/src/app/core/resolvers/jumps-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { Jump } from 'src/app/core/models';
-import { JumpsService } from 'src/app/core/services';
+import { Jump } from '@models';
+import { JumpsService } from '@services';
 
 export const jumpsResolver: ResolveFn<Array<Jump>> = () => {
     return inject(JumpsService).getAll().pipe(take(1));
diff --git a/src/app/core/resolvers/lastjump-resolver.service.ts b/src/app/core/resolvers/lastjump-resolver.service.ts
index d222b0d..a118963 100644
--- a/src/app/core/resolvers/lastjump-resolver.service.ts
+++ b/src/app/core/resolvers/lastjump-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { Jump } from 'src/app/core/models';
-import { JumpsService } from 'src/app/core/services';
+import { Jump } from '@models';
+import { JumpsService } from '@services';
 
 export const lastjumpResolver: ResolveFn<Jump> = () => {
     return inject(JumpsService).getLastJump().pipe(take(1));
diff --git a/src/app/core/resolvers/product-resolver.service.ts b/src/app/core/resolvers/product-resolver.service.ts
index d981e63..8fd1aea 100644
--- a/src/app/core/resolvers/product-resolver.service.ts
+++ b/src/app/core/resolvers/product-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { ProductPageData } from 'src/app/core/models';
-import { ProductsService } from 'src/app/core/services';
+import { ProductPageData } from '@models';
+import { ProductsService } from '@services';
 
 export const productResolver: ResolveFn<ProductPageData> = (
     route: ActivatedRouteSnapshot
diff --git a/src/app/core/resolvers/products-resolver.service.ts b/src/app/core/resolvers/products-resolver.service.ts
index 657c506..986ce79 100644
--- a/src/app/core/resolvers/products-resolver.service.ts
+++ b/src/app/core/resolvers/products-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { ProductsPageData } from 'src/app/core/models';
-import { ProductsService } from 'src/app/core/services';
+import { ProductsPageData } from '@models';
+import { ProductsService } from '@services';
 
 export const productsResolver: ResolveFn<ProductsPageData> = (
     route: ActivatedRouteSnapshot
diff --git a/src/app/core/resolvers/profile-resolver.service.ts b/src/app/core/resolvers/profile-resolver.service.ts
index 73dc546..773a588 100644
--- a/src/app/core/resolvers/profile-resolver.service.ts
+++ b/src/app/core/resolvers/profile-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { Profile } from 'src/app/core/models';
-import { ProfilesService } from 'src/app/core/services';
+import { Profile } from '@models';
+import { ProfilesService } from '@services';
 
 export const profileResolver: ResolveFn<Profile> = (
     route: ActivatedRouteSnapshot
diff --git a/src/app/core/resolvers/qcm-resolver.service.ts b/src/app/core/resolvers/qcm-resolver.service.ts
index 5fb50af..72a001a 100644
--- a/src/app/core/resolvers/qcm-resolver.service.ts
+++ b/src/app/core/resolvers/qcm-resolver.service.ts
@@ -2,8 +2,8 @@ import { inject } from '@angular/core';
 import { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
 import { take } from 'rxjs/operators';
 
-import { Qcm } from 'src/app/core/models';
-import { QcmService } from 'src/app/core/services';
+import { Qcm } from '@models';
+import { QcmService } from '@services';
 
 export const qcmResolver: ResolveFn<Qcm> = (
     route: ActivatedRouteSnapshot
diff --git a/src/app/core/services/api.service.ts b/src/app/core/services/api.service.ts
index 3db27da..c6a634e 100644
--- a/src/app/core/services/api.service.ts
+++ b/src/app/core/services/api.service.ts
@@ -1,9 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
-//import { environment } from 'src/environments/environment';
-
 @Injectable({ providedIn: 'root' })
 export class ApiService {
     constructor(
diff --git a/src/app/core/services/applications.service.ts b/src/app/core/services/applications.service.ts
index 1a363cd..1afee00 100644
--- a/src/app/core/services/applications.service.ts
+++ b/src/app/core/services/applications.service.ts
@@ -3,11 +3,12 @@ import { HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
 import { ApiService } from './api.service';
-import { Application, ApplicationList, ApplicationListConfig, ApplicationListFilters } from 'src/app/core/models';
+import { Application, ApplicationList, ApplicationListConfig, ApplicationListFilters } from '@models';
 import { map } from 'rxjs/operators';
 
 @Injectable({ providedIn: 'root' })
 export class ApplicationsService {
+    private _apiVersion = '/v1';
     constructor(
         private apiService: ApiService
     ) { }
@@ -22,7 +23,7 @@ export class ApplicationsService {
         };
         return this.apiService
             .get(
-                '/applications' + ((config.type === 'feed') ? '/feed' : ''),
+                `${this._apiVersion}/applications` + ((config.type === 'feed') ? '/feed' : ''),
                 new HttpParams({ fromObject: <{
                     [param: string]: string | number | boolean | readonly (string | number | boolean)[];
                 }>params })
@@ -30,22 +31,22 @@ export class ApplicationsService {
     }
 
     get(slug: string): Observable<Application> {
-        return this.apiService.get(`/applications/${slug}`)
+        return this.apiService.get(`${this._apiVersion}/applications/${slug}`)
             .pipe(map(data => data.application));
     }
 
     destroy(slug: string): Observable<boolean> {
-        return this.apiService.delete(`/applications/${slug}`).pipe(map(data => data.deleted));
+        return this.apiService.delete(`${this._apiVersion}/applications/${slug}`).pipe(map(data => data.deleted));
     }
 
     save(application: Application): Observable<Application> {
         if (application.slug) {
             // If we're updating an existing application
-            return this.apiService.put(`/applications/${application.slug}`, { application: application })
+            return this.apiService.put(`${this._apiVersion}/applications/${application.slug}`, { application: application })
                 .pipe(map(data => data.application));
         } else {
             // Otherwise, create a new application
-            return this.apiService.post('/applications/', { application: application })
+            return this.apiService.post(`${this._apiVersion}/applications/`, { application: application })
                 .pipe(map(data => data.application));
         }
     }
diff --git a/src/app/core/services/articles.service.ts b/src/app/core/services/articles.service.ts
index 4209166..424aa3c 100755
--- a/src/app/core/services/articles.service.ts
+++ b/src/app/core/services/articles.service.ts
@@ -4,10 +4,11 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { ApiService } from './api.service';
-import { Article, ArticleList, ArticleListConfig, ArticleListFilters, ArticlePageData } from 'src/app/core/models';
+import { Article, ArticleList, ArticleListConfig, ArticleListFilters, ArticlePageData } from '@models';
 
 @Injectable({ providedIn: 'root' })
 export class ArticlesService {
+    private _apiVersion = '/v2';
     constructor(
         private apiService: ApiService
     ) { }
@@ -18,7 +19,7 @@ export class ArticlesService {
         Object.assign(params, config.filters);
         return this.apiService
             .get(
-                '/articles' + ((config.type === 'feed') ? '/feed' : ''),
+                `${this._apiVersion}/articles` + ((config.type === 'feed') ? '/feed' : ''),
                 new HttpParams({ fromObject: <{
                     [param: string]: string | number | boolean | readonly (string | number | boolean)[];
                 }>params })
@@ -26,49 +27,49 @@ export class ArticlesService {
     }
 
     get(slug: string): Observable<ArticlePageData> {
-        /*return this.apiService.get('/articles/' + slug).pipe(map(data => {
+        /*return this.apiService.get(`${this._apiVersion}/articles/${slug}`).pipe(map(data => {
             data.article.tagList = data.article.tagNameTagTagLists;
             delete data.article.tagNameTagTagLists;
             return data;
         }));*/
-        return this.apiService.get(`/articles/${slug}`);
+        return this.apiService.get(`${this._apiVersion}/articles/${slug}`);
     }
     
     getAll(): Observable<Array<Article>> {
-        return this.apiService.get('/articles').pipe(map(data => data.articles));
+        return this.apiService.get(`${this._apiVersion}/articles`).pipe(map(data => data.articles));
     }
     
     create(article: Article): Observable<Article> {
-        return this.apiService.post('/articles/', { article: article }).pipe(map(data => data.article));
+        return this.apiService.post(`${this._apiVersion}/articles/`, { article: article }).pipe(map(data => data.article));
     }
 
     update(article: Article): Observable<Article> {
-        return this.apiService.put(`/articles/${article.slug}`, { article: article }).pipe(map(data => data.article));
+        return this.apiService.put(`${this._apiVersion}/articles/${article.slug}`, { article: article }).pipe(map(data => data.article));
     }
 
     destroy(slug: string): Observable<boolean> {
-        return this.apiService.delete(`/products/${slug}`).pipe(map(data => data.deleted));
+        return this.apiService.delete(`${this._apiVersion}/articles/${slug}`).pipe(map(data => data.deleted));
     }
 
     save(article: Article): Observable<Article> {
         // If we're updating an existing article
         if (article.slug) {
-            return this.apiService.put('/articles/' + article.slug, { article: article })
+            return this.apiService.put(`${this._apiVersion}/articles/${article.slug}`, { article: article })
                 .pipe(map(data => data.article));
 
             // Otherwise, create a new article
         } else {
-            return this.apiService.post('/articles/', { article: article })
+            return this.apiService.post(`${this._apiVersion}/articles/`, { article: article })
                 .pipe(map(data => data.article));
         }
     }
 
     favorite(slug: string): Observable<Article> {
-        return this.apiService.post('/articles/' + slug + '/favorite');
+        return this.apiService.post(`${this._apiVersion}/articles/${slug}/favorite`);
     }
 
     unfavorite(slug: string): Observable<Article> {
-        return this.apiService.delete('/articles/' + slug + '/favorite');
+        return this.apiService.delete(`${this._apiVersion}/articles/${slug}/favorite`);
     }
 
 }
diff --git a/src/app/core/services/herowars/hwclan.service.ts b/src/app/core/services/herowars/hwclan.service.ts
new file mode 100644
index 0000000..6c79602
--- /dev/null
+++ b/src/app/core/services/herowars/hwclan.service.ts
@@ -0,0 +1,127 @@
+import { Injectable } from '@angular/core';
+import { HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { ApiService } from '../api.service';
+import {
+    HWActivityStat, HWClan, HWClanList, HWClanListConfig,
+    HWClanListFilters, HWClanPageData, HWGuildClan,
+    HWMember
+} from '@models';
+
+import guildData from 'src/files-data/hw-guild-data.json'; // page Membres
+
+@Injectable({ providedIn: 'root' })
+export class HWClanService {
+    private apiVersion = '/v3';
+    constructor(
+        private apiService: ApiService
+    ) { }
+
+    private _resetActivity(): HWActivityStat {
+        const activity: HWActivityStat = { activity: 0, prestige: 0, titanite: 0, war: 0, adventure: 0, gifts: 0, score: 0, scoreGifts: 0, warGifts: 0, rewards: 0 };
+        return activity;
+    }
+
+    query(config: HWClanListConfig): Observable<HWClanList> {
+        // Convert any filters over to Angular's URLSearchParams
+        const params: HWClanListFilters = {} as HWClanListFilters;
+        Object.assign(params, config.filters);
+        return this.apiService
+            .get(
+                `${this.apiVersion}/clans`,
+                new HttpParams({ fromObject: <{
+                    [param: string]: string | number | boolean | readonly (string | number | boolean)[];
+                }>params })
+            );
+    }
+
+    get(id: string): Observable<HWClanPageData> {
+        return this.apiService.get(`${this.apiVersion}/clans/${id}`);
+    }
+
+    getAll(): Observable<Array<HWClan>> {
+        return this.apiService.get(`${this.apiVersion}/clans`).pipe(map(data => data.clans));
+    }
+
+    create(clan: HWClan): Observable<HWClan> {
+        return this.apiService.post(`${this.apiVersion}/clans/`, { clan: clan }).pipe(map(data => data.clan));
+    }
+
+    update(clan: HWClan): Observable<HWClan> {
+        return this.apiService.put(`${this.apiVersion}/clans/${clan.id}`, { clan: clan }).pipe(map(data => data.clan));
+    }
+
+    destroy(id: string): Observable<boolean> {
+        return this.apiService.delete(`${this.apiVersion}/clans/${id}`).pipe(map(data => data.deleted));
+    }
+
+    save(clan: HWClan): Observable<HWClan> {
+        // If we're updating an existing clan
+        if (clan.id) {
+            return this.apiService.put(`${this.apiVersion}/clans/${clan.id}`, { clan: clan }).pipe(map(data => data.clan));
+            // Otherwise, create a new clan
+        } else {
+            return this.apiService.post(`${this.apiVersion}/clans/`, { clan: clan }).pipe(map(data => data.clan));
+        }
+    }
+    
+    loadClan(): HWGuildClan {
+        const guildClan: HWGuildClan = {} as HWGuildClan;
+        Object.assign(guildClan, guildData.clan);
+        guildClan.sumAverages = this._resetActivity();
+        guildClan.sumTotal = this._resetActivity();
+        guildClan.todayAverages = this._resetActivity();
+        guildClan.todayTotal = this._resetActivity();
+
+        return guildClan;
+    }
+    
+    loadClanStats(clan: HWGuildClan, members: HWMember[]): HWGuildClan {
+        members.map((member: HWMember) => {
+            clan.sumTotal.adventure += member.adventureSum;
+            clan.sumTotal.gifts += member.clanGiftsSum;
+            clan.sumTotal.war += member.clanWarSum;
+            clan.todayTotal.activity += member.stat.todayActivity;
+            clan.todayTotal.prestige += member.stat.todayPrestige;
+            clan.todayTotal.titanite += member.stat.todayDungeonActivity;
+            clan.todayTotal.score += (member.stat.todayDungeonActivity + member.stat.todayActivity + member.stat.todayPrestige);
+            clan.sumTotal.activity += member.stat.activitySum;
+            clan.sumTotal.prestige += member.stat.prestigeSum;
+            clan.sumTotal.titanite += member.stat.dungeonActivitySum;
+            clan.sumTotal.score += member.score;
+            clan.sumTotal.warGifts += member.warGifts;
+        });
+        clan.sumTotal.scoreGifts = (clan.giftsCount - Math.floor(clan.sumTotal.warGifts));
+        clan.todayAverages.activity = (clan.todayTotal.activity / members.length);
+        clan.todayAverages.prestige = (clan.todayTotal.prestige / members.length);
+        clan.todayAverages.titanite = (clan.todayTotal.titanite / members.length);
+        clan.todayAverages.score = (clan.todayTotal.score / members.length);
+        clan.sumAverages.activity = (clan.sumTotal.activity / members.length);
+        clan.sumAverages.prestige = (clan.sumTotal.prestige / members.length);
+        clan.sumAverages.titanite = (clan.sumTotal.titanite / members.length);
+        if (clan.league === '3') {
+            clan.sumAverages.war = (clan.sumTotal.war / 10);
+        } else if (clan.league === '2') {
+            clan.sumAverages.war = (clan.sumTotal.war / 15);
+        } else if (clan.league === '1') {
+            clan.sumAverages.war = (clan.sumTotal.war / 20);
+        }
+        clan.sumAverages.adventure = (clan.sumTotal.adventure / members.length);
+        clan.sumAverages.gifts = (clan.sumTotal.gifts / members.length);
+        clan.sumAverages.score = (clan.sumTotal.score / members.length);
+        clan.sumAverages.scoreGifts = (clan.sumTotal.scoreGifts / members.length);
+        clan.sumAverages.warGifts = (clan.sumTotal.warGifts / members.length);
+        members.map((data) => {
+            data.scoreGifts = ((data.score / clan.sumTotal.score) * clan.sumTotal.scoreGifts);
+            data.rewards = Math.floor((data.scoreGifts + data.warGifts));
+            clan.sumTotal.rewards += data.rewards;
+            return data;
+        });
+        clan.sumAverages.rewards = (clan.sumTotal.rewards / members.length);
+
+        return clan;
+    }
+
+}
diff --git a/src/app/core/services/herowars/hwmember.service.ts b/src/app/core/services/herowars/hwmember.service.ts
new file mode 100644
index 0000000..9ab52a7
--- /dev/null
+++ b/src/app/core/services/herowars/hwmember.service.ts
@@ -0,0 +1,137 @@
+import { Injectable } from '@angular/core';
+import { HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { ApiService, UtilitiesService } from '@services';
+import {
+    HWGuildClan, HWWeekStat,
+    HWMember, HWMemberList, HWMemberListConfig,
+    HWMemberListFilters, HWMemberPageData, HWMemberStat
+} from '@models';
+
+import guildData from 'src/files-data/hw-guild-data.json'; // page Membres
+import guildStatistics from 'src/files-data/hw-guild-statistics.json'; // page Overview -> Statistics
+@Injectable({ providedIn: 'root' })
+export class HWMemberService {
+    private apiVersion = '/v3';
+    constructor(
+        private _apiService: ApiService,
+        private _utilitiesService: UtilitiesService
+    ) { }
+
+    query(config: HWMemberListConfig): Observable<HWMemberList> {
+        // Convert any filters over to Angular's URLSearchParams
+        const params: HWMemberListFilters = {} as HWMemberListFilters;
+        Object.assign(params, config.filters);
+        return this._apiService
+            .get(
+                `${this.apiVersion}/members`,
+                new HttpParams({ fromObject: <{
+                    [param: string]: string | number | boolean | readonly (string | number | boolean)[];
+                }>params })
+            );
+    }
+
+    get(id: string): Observable<HWMemberPageData> {
+        return this._apiService.get(`${this.apiVersion}/members/${id}`);
+    }
+
+    getAll(): Observable<Array<HWMember>> {
+        return this._apiService.get(`${this.apiVersion}/members`).pipe(map(data => data.members));
+    }
+
+    create(member: HWMember): Observable<HWMember> {
+        return this._apiService.post(`${this.apiVersion}/members/`, { member: member }).pipe(map(data => data.member));
+    }
+
+    update(member: HWMember): Observable<HWMember> {
+        return this._apiService.put(`${this.apiVersion}/members/${member.id}`, { member: member }).pipe(map(data => data.member));
+    }
+
+    destroy(id: string): Observable<boolean> {
+        return this._apiService.delete(`${this.apiVersion}/members/${id}`).pipe(map(data => data.deleted));
+    }
+
+    save(member: HWMember): Observable<HWMember> {
+        // If we're updating an existing member
+        if (member.id) {
+            return this._apiService.put(`${this.apiVersion}/members/${member.id}`, { member: member }).pipe(map(data => data.member));
+            // Otherwise, create a new member
+        } else {
+            return this._apiService.post(`${this.apiVersion}/members/`, { member: member }).pipe(map(data => data.member));
+        }
+    }
+    
+    loadMembers(clan: HWGuildClan): HWMember[] {
+        const guildMembers: HWMember[] = [];
+        const now = new Date();
+        const oneDayInSec = (24 * 60 * 60);
+        const daysToKick = parseInt(guildData.clan.daysToKick);
+        for (const data of Object.entries(guildData.clan.members)) {
+            const member: HWMember = {} as HWMember;
+            Object.assign(member, data[1]);
+            if (guildData.clan.warriors.indexOf(parseInt(member.id)) !== -1) {
+                member.champion = true;
+            } else {
+                member.champion = false;
+            }
+            member.heroes = { power: 0, teams: []};
+            member.titans = { power: 0, teams: []};
+            guildMembers.push(member);
+        }
+        guildMembers.map((data: HWMember) => {
+            const last = new Date((parseInt(data.lastLoginTime) * 1000));
+            const exp = new Date(last.getTime() + ((daysToKick * oneDayInSec) * 1000));
+            const diff = Math.floor(((exp.getTime() - now.getTime()) / 1000));
+            const daysLeft = Math.floor((diff / oneDayInSec));
+            let timeLeft = diff;
+            if (daysLeft >= 1) {
+                timeLeft = (diff - (daysLeft * oneDayInSec));
+            }
+            data.inactivity = {
+                daysLeft: daysLeft,
+                timeLeft: timeLeft,
+                dropDelay: `${daysLeft}d, ${this._utilitiesService.secondsToDuration(timeLeft)}`,
+                dropDate: Math.floor((exp.getTime() / 1000))
+            };
+            data.raids = [];
+            data.raidsInfo = {
+                variationAvg: 0,
+                variationSum: 0
+            };
+            data.stat = {} as HWMemberStat;
+            let index = guildData.membersStat.findIndex(stat => stat.userId === data.id);
+            if (index !== -1) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+                const { userId, ...memberStatWithoutUserId } = guildData.membersStat[index] as any;
+                Object.assign(data.stat, memberStatWithoutUserId);
+            }
+            index = guildStatistics.stat.findIndex(stat => stat.id === data.id);
+            if (index !== -1) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+                const { id, ...weekStatSource } = guildStatistics.stat[index] as any;
+                const stat: HWWeekStat = {} as HWWeekStat;
+                Object.assign(stat, weekStatSource);
+                data.weekStat = stat;
+                data.adventureSum = guildStatistics.stat[index].adventureStat.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+                data.clanGiftsSum = guildStatistics.stat[index].clanGifts.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+                data.clanWarSum = guildStatistics.stat[index].clanWarStat.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+            } else {
+                data.weekStat = {} as HWWeekStat;
+                data.adventureSum = 0;
+                data.clanGiftsSum = 0;
+                data.clanWarSum = 0;
+            }
+
+            data.score = (data.stat.dungeonActivitySum + data.stat.activitySum + data.stat.prestigeSum);
+            data.warGifts = (((clan.giftsCount / 2) * ((data.clanWarSum * 10) / 100)) / 20);
+            data.scoreGifts = 0;
+            data.rewards = 0;
+            return data;
+        });
+
+        return guildMembers;
+    }
+
+}
diff --git a/src/app/core/services/herowars/index.ts b/src/app/core/services/herowars/index.ts
new file mode 100644
index 0000000..b4a2ebe
--- /dev/null
+++ b/src/app/core/services/herowars/index.ts
@@ -0,0 +1,3 @@
+
+export * from './hwclan.service';
+export * from './hwmember.service';
\ No newline at end of file
diff --git a/src/app/core/services/hwclan.service.ts b/src/app/core/services/hwclan.service.ts
deleted file mode 100644
index be47305..0000000
--- a/src/app/core/services/hwclan.service.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { ApiService } from './api.service';
-import {
-    HWClan, HWClanList, HWClanListConfig, HWClanListFilters, HWClanPageData
-} from 'src/app/core/models';
-
-@Injectable({ providedIn: 'root' })
-export class HWClanService {
-    constructor(
-        private apiService: ApiService
-    ) { }
-
-    query(config: HWClanListConfig): Observable<HWClanList> {
-        // Convert any filters over to Angular's URLSearchParams
-        const params: HWClanListFilters = {} as HWClanListFilters;
-        Object.assign(params, config.filters);
-        return this.apiService
-            .get(
-                '/clans',
-                new HttpParams({ fromObject: <{
-                    [param: string]: string | number | boolean | readonly (string | number | boolean)[];
-                }>params })
-            );
-    }
-
-    get(id: string): Observable<HWClanPageData> {
-        return this.apiService.get(`/clans/${id}`);
-    }
-
-    getAll(): Observable<Array<HWClan>> {
-        return this.apiService.get('/clans').pipe(map(data => data.clans));
-    }
-
-    create(clan: HWClan): Observable<HWClan> {
-        return this.apiService.post('/clans/', { clan: clan }).pipe(map(data => data.clan));
-    }
-
-    update(clan: HWClan): Observable<HWClan> {
-        return this.apiService.put(`/clans/${clan.id}`, { clan: clan }).pipe(map(data => data.clan));
-    }
-
-    destroy(id: string): Observable<boolean> {
-        return this.apiService.delete(`/clans/${id}`).pipe(map(data => data.deleted));
-    }
-
-    save(clan: HWClan): Observable<HWClan> {
-        // If we're updating an existing clan
-        if (clan.id) {
-            return this.apiService.put(`/clans/${clan.id}`, { clan: clan }).pipe(map(data => data.clan));
-            // Otherwise, create a new clan
-        } else {
-            return this.apiService.post('/clans/', { clan: clan }).pipe(map(data => data.clan));
-        }
-    }
-
-}
diff --git a/src/app/core/services/hwmember.service.ts b/src/app/core/services/hwmember.service.ts
deleted file mode 100644
index be47305..0000000
--- a/src/app/core/services/hwmember.service.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { ApiService } from './api.service';
-import {
-    HWClan, HWClanList, HWClanListConfig, HWClanListFilters, HWClanPageData
-} from 'src/app/core/models';
-
-@Injectable({ providedIn: 'root' })
-export class HWClanService {
-    constructor(
-        private apiService: ApiService
-    ) { }
-
-    query(config: HWClanListConfig): Observable<HWClanList> {
-        // Convert any filters over to Angular's URLSearchParams
-        const params: HWClanListFilters = {} as HWClanListFilters;
-        Object.assign(params, config.filters);
-        return this.apiService
-            .get(
-                '/clans',
-                new HttpParams({ fromObject: <{
-                    [param: string]: string | number | boolean | readonly (string | number | boolean)[];
-                }>params })
-            );
-    }
-
-    get(id: string): Observable<HWClanPageData> {
-        return this.apiService.get(`/clans/${id}`);
-    }
-
-    getAll(): Observable<Array<HWClan>> {
-        return this.apiService.get('/clans').pipe(map(data => data.clans));
-    }
-
-    create(clan: HWClan): Observable<HWClan> {
-        return this.apiService.post('/clans/', { clan: clan }).pipe(map(data => data.clan));
-    }
-
-    update(clan: HWClan): Observable<HWClan> {
-        return this.apiService.put(`/clans/${clan.id}`, { clan: clan }).pipe(map(data => data.clan));
-    }
-
-    destroy(id: string): Observable<boolean> {
-        return this.apiService.delete(`/clans/${id}`).pipe(map(data => data.deleted));
-    }
-
-    save(clan: HWClan): Observable<HWClan> {
-        // If we're updating an existing clan
-        if (clan.id) {
-            return this.apiService.put(`/clans/${clan.id}`, { clan: clan }).pipe(map(data => data.clan));
-            // Otherwise, create a new clan
-        } else {
-            return this.apiService.post('/clans/', { clan: clan }).pipe(map(data => data.clan));
-        }
-    }
-
-}
diff --git a/src/app/core/services/index.ts b/src/app/core/services/index.ts
index fb7e92b..e32c527 100644
--- a/src/app/core/services/index.ts
+++ b/src/app/core/services/index.ts
@@ -1,16 +1,12 @@
-export * from './aeronefs.service';
 export * from './api.service';
 export * from './applications.service';
 export * from './articles.service';
-export * from './calculator.service';
-export * from './canopies.service';
-export * from './dropzones.service';
-export * from './jumps.service';
-export * from './jump-table.service';
 export * from './jwt.service';
 export * from './pages.service';
 export * from './products.service';
 export * from './profiles.service';
-export * from './qcm.service';
 export * from './user.service';
 export * from './utilities.service';
+
+export * from './skydive/';
+export * from './herowars/';
\ No newline at end of file
diff --git a/src/app/core/services/pages.service.ts b/src/app/core/services/pages.service.ts
index 951908c..ed2f26f 100644
--- a/src/app/core/services/pages.service.ts
+++ b/src/app/core/services/pages.service.ts
@@ -3,28 +3,29 @@ import { Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { ApiService } from './api.service';
-import { AeronefsPageData, CanopiesPageData, DropZonesPageData, JumpsPageData } from 'src/app/core/models';
+import { AeronefsPageData, CanopiesPageData, DropZonesPageData, JumpsPageData } from '@models';
 
 @Injectable({ providedIn: 'root' })
 export class PagesService {
+    private apiVersion = '/v1';
     constructor(
         private apiService: ApiService
     ) { }
 
     getAeronefsPage(): Observable<AeronefsPageData> {
-        return this.apiService.get(`/pages/aeronefs`).pipe(take(1));
+        return this.apiService.get(`${this.apiVersion}/pages/aeronefs`).pipe(take(1));
     }
 
     getCanopiesPage(): Observable<CanopiesPageData> {
-        return this.apiService.get(`/pages/canopies`).pipe(take(1));
+        return this.apiService.get(`${this.apiVersion}/pages/canopies`).pipe(take(1));
     }
 
     getDropZonesPage(): Observable<DropZonesPageData> {
-        return this.apiService.get(`/pages/dropzones`).pipe(take(1));
+        return this.apiService.get(`${this.apiVersion}/pages/dropzones`).pipe(take(1));
     }
 
     getJumpsPage(): Observable<JumpsPageData> {
-        return this.apiService.get(`/pages/jumps`).pipe(take(1));
+        return this.apiService.get(`${this.apiVersion}/pages/jumps`).pipe(take(1));
     }
 
 }
diff --git a/src/app/core/services/products.service.ts b/src/app/core/services/products.service.ts
index 8ca2fc9..0b80049 100644
--- a/src/app/core/services/products.service.ts
+++ b/src/app/core/services/products.service.ts
@@ -4,10 +4,11 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { ApiService } from './api.service';
-import { Product, ProductList, ProductListConfig, ProductListFilters, ProductPageData, ProductsPageData } from 'src/app/core/models';
+import { Product, ProductList, ProductListConfig, ProductListFilters, ProductPageData, ProductsPageData } from '@models';
 
 @Injectable({ providedIn: 'root' })
 export class ProductsService {
+    private apiVersion = '/v2';
     constructor(
         private apiService: ApiService
     ) { }
@@ -18,7 +19,7 @@ export class ProductsService {
         Object.assign(params, config.filters);
         return this.apiService
             .get(
-                '/products' + ((config.type === 'feed') ? '/feed' : ''),
+                `${this.apiVersion}/products` + ((config.type === 'feed') ? '/feed' : ''),
                 new HttpParams({ fromObject: <{
                     [param: string]: string | number | boolean | readonly (string | number | boolean)[];
                 }>params })
@@ -26,41 +27,41 @@ export class ProductsService {
     }
 
     get(slug: string): Observable<ProductsPageData> {
-        return this.apiService.get(`/product/${slug}`);
+        return this.apiService.get(`${this.apiVersion}/product/${slug}`);
     }
 
     getProductBySlug(slug: string): Observable<ProductPageData> {
-        return this.apiService.get(`/product/${slug}`);
+        return this.apiService.get(`${this.apiVersion}/product/${slug}`);
     }
 
     getAll(): Observable<Array<Product>> {
-        return this.apiService.get('/products').pipe(map(data => data.products));
+        return this.apiService.get(`${this.apiVersion}/products`).pipe(map(data => data.products));
     }
 
     getAllByCategory(category: string): Observable<ProductsPageData> {
-        return this.apiService.get(`/products/${category}`); //.pipe(map(data => data.products));
+        return this.apiService.get(`${this.apiVersion}/products/${category}`); //.pipe(map(data => data.products));
     }
 
     create(product: Product): Observable<Product> {
-        return this.apiService.post('/products/', { product: product }).pipe(map(data => data.product));
+        return this.apiService.post(`${this.apiVersion}/products/`, { product: product }).pipe(map(data => data.product));
     }
 
     update(product: Product): Observable<Product> {
-        return this.apiService.put(`/products/${product.slug}`, { product: product }).pipe(map(data => data.product));
+        return this.apiService.put(`${this.apiVersion}/products/${product.slug}`, { product: product }).pipe(map(data => data.product));
     }
 
     destroy(slug: string): Observable<boolean> {
-        return this.apiService.delete(`/products/${slug}`).pipe(map(data => data.deleted));
+        return this.apiService.delete(`${this.apiVersion}/products/${slug}`).pipe(map(data => data.deleted));
     }
 
     save(product: Product): Observable<Product> {
         // If we're updating an existing product
         if (product.slug) {
-            return this.apiService.put(`/products/${product.slug}`, { product: product }).pipe(map(data => data.product));
+            return this.apiService.put(`${this.apiVersion}/products/${product.slug}`, { product: product }).pipe(map(data => data.product));
 
             // Otherwise, create a new product
         } else {
-            return this.apiService.post('/products/', { product: product }).pipe(map(data => data.product));
+            return this.apiService.post(`${this.apiVersion}/products/`, { product: product }).pipe(map(data => data.product));
         }
     }
 
diff --git a/src/app/core/services/profiles.service.ts b/src/app/core/services/profiles.service.ts
index e1cd652..a09712c 100644
--- a/src/app/core/services/profiles.service.ts
+++ b/src/app/core/services/profiles.service.ts
@@ -1,27 +1,28 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
-import { ApiService } from 'src/app/core/services';
-import { Profile } from 'src/app/core/models';
+import { ApiService } from '@services';
+import { Profile } from '@models';
 import { map } from 'rxjs/operators';
 
 @Injectable({ providedIn: 'root' })
 export class ProfilesService {
+    private _apiVersion = '/v2';
     constructor(
         private apiService: ApiService
     ) { }
 
     get(username: string): Observable<Profile> {
-        return this.apiService.get('/profiles/' + username)
+        return this.apiService.get(`${this._apiVersion}/profiles/${username}`)
             .pipe(map((data: { profile: Profile }) => data.profile));
     }
 
     follow(username: string): Observable<Profile> {
-        return this.apiService.post('/profiles/' + username + '/follow');
+        return this.apiService.post(`${this._apiVersion}/profiles/${username}/follow`);
     }
 
     unfollow(username: string): Observable<Profile> {
-        return this.apiService.delete('/profiles/' + username + '/follow');
+        return this.apiService.delete(`${this._apiVersion}/profiles/${username}/follow`);
     }
 
 }
diff --git a/src/app/core/services/aeronefs.service.ts b/src/app/core/services/skydive/aeronefs.service.ts
similarity index 61%
rename from src/app/core/services/aeronefs.service.ts
rename to src/app/core/services/skydive/aeronefs.service.ts
index 368e203..682cccd 100644
--- a/src/app/core/services/aeronefs.service.ts
+++ b/src/app/core/services/skydive/aeronefs.service.ts
@@ -2,22 +2,23 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { ApiService } from './api.service';
-import { AeronefByImat, AeronefByYear } from 'src/app/core/models';
+import { ApiService } from '../api.service';
+import { AeronefByImat, AeronefByYear } from '@models';
 
 @Injectable({ providedIn: 'root' })
 export class AeronefsService {
+    private _apiVersion = '/v1';
     constructor(
         private apiService: ApiService
     ) { }
 
     getAllByImat(): Observable<Array<AeronefByImat>> {
-        return this.apiService.get('/aeronefs/allByImat')
+        return this.apiService.get(`${this._apiVersion}/aeronefs/allByImat`)
             .pipe(map(data => data.aeronefs));
     }
 
     getAllByImatByYear(): Observable<Array<AeronefByYear>> {
-        return this.apiService.get('/aeronefs/allByImatByYear')
+        return this.apiService.get(`${this._apiVersion}/aeronefs/allByImatByYear`)
             .pipe(map(data => data.aeronefs));
     }
 
diff --git a/src/app/core/services/calculator.service.ts b/src/app/core/services/skydive/calculator.service.ts
similarity index 97%
rename from src/app/core/services/calculator.service.ts
rename to src/app/core/services/skydive/calculator.service.ts
index 8429748..b5ff60b 100644
--- a/src/app/core/services/calculator.service.ts
+++ b/src/app/core/services/skydive/calculator.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 
-import { CalculatorResult, WeightSizeRange, weightSizes } from 'src/app/core/models';
-import { UtilitiesService } from 'src/app/core/services';
+import { CalculatorResult, WeightSizeRange, weightSizes } from '@models';
+import { UtilitiesService } from '@services';
 
 @Injectable({ providedIn: 'root' })
 export class CalculatorService {
diff --git a/src/app/core/services/canopies.service.ts b/src/app/core/services/skydive/canopies.service.ts
similarity index 64%
rename from src/app/core/services/canopies.service.ts
rename to src/app/core/services/skydive/canopies.service.ts
index cb1855f..8e5c950 100644
--- a/src/app/core/services/canopies.service.ts
+++ b/src/app/core/services/skydive/canopies.service.ts
@@ -2,32 +2,33 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { ApiService } from './api.service';
-import { CanopyBySize, CanopyByYear, CanopyModelBySize, CanopyModelByYear } from 'src/app/core/models';
+import { ApiService } from '../api.service';
+import { CanopyBySize, CanopyByYear, CanopyModelBySize, CanopyModelByYear } from '@models';
 
 @Injectable({ providedIn: 'root' })
 export class CanopiesService {
+    private _apiVersion = '/v1';
     constructor(
         private apiService: ApiService
     ) { }
 
     getAllBySize(): Observable<Array<CanopyBySize>> {
-        return this.apiService.get('/canopies/allBySize')
+        return this.apiService.get(`${this._apiVersion}/canopies/allBySize`)
             .pipe(map(data => data.canopies));
     }
 
     getAllBySizeByYear(): Observable<Array<CanopyByYear>> {
-        return this.apiService.get('/canopies/allBySizeByYear')
+        return this.apiService.get(`${this._apiVersion}/canopies/allBySizeByYear`)
             .pipe(map(data => data.canopies));
     }
 
     getAllBySizeByModel(): Observable<Array<CanopyModelBySize>> {
-        return this.apiService.get('/canopies/allBySizeByModel')
+        return this.apiService.get(`${this._apiVersion}/canopies/allBySizeByModel`)
             .pipe(map(data => data.canopies));
     }
 
     getAllBySizeByModelByYear(): Observable<Array<CanopyModelByYear>> {
-        return this.apiService.get('/canopies/allBySizeByModelByYear')
+        return this.apiService.get(`${this._apiVersion}/canopies/allBySizeByModelByYear`)
             .pipe(map(data => data.canopies));
     }
 
diff --git a/src/app/core/services/dropzones.service.ts b/src/app/core/services/skydive/dropzones.service.ts
similarity index 61%
rename from src/app/core/services/dropzones.service.ts
rename to src/app/core/services/skydive/dropzones.service.ts
index eb833b1..87df723 100644
--- a/src/app/core/services/dropzones.service.ts
+++ b/src/app/core/services/skydive/dropzones.service.ts
@@ -2,22 +2,23 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { ApiService } from './api.service';
-import { DropZoneByOaci, DropZoneByYear } from 'src/app/core/models';
+import { ApiService } from '../api.service';
+import { DropZoneByOaci, DropZoneByYear } from '@models';
 
 @Injectable({ providedIn: 'root' })
 export class DropZonesService {
+    private _apiVersion = '/v1';
     constructor(
         private apiService: ApiService
     ) { }
 
     getAllByOaci(): Observable<Array<DropZoneByOaci>> {
-        return this.apiService.get('/dropzones/allByOaci')
+        return this.apiService.get(`${this._apiVersion}/dropzones/allByOaci`)
             .pipe(map(data => data.dropzones));
     }
 
     getAllByOaciByYear(): Observable<Array<DropZoneByYear>> {
-        return this.apiService.get('/dropzones/allByOaciByYear')
+        return this.apiService.get(`${this._apiVersion}/dropzones/allByOaciByYear`)
             .pipe(map(data => data.dropzones));
     }
 
diff --git a/src/app/core/services/skydive/index.ts b/src/app/core/services/skydive/index.ts
new file mode 100644
index 0000000..d23625b
--- /dev/null
+++ b/src/app/core/services/skydive/index.ts
@@ -0,0 +1,7 @@
+export * from './aeronefs.service';
+export * from './calculator.service';
+export * from './canopies.service';
+export * from './dropzones.service';
+export * from './jumps.service';
+export * from './jump-table.service';
+export * from './qcm.service';
\ No newline at end of file
diff --git a/src/app/core/services/jump-table.service.ts b/src/app/core/services/skydive/jump-table.service.ts
similarity index 100%
rename from src/app/core/services/jump-table.service.ts
rename to src/app/core/services/skydive/jump-table.service.ts
diff --git a/src/app/core/services/jumps.service.ts b/src/app/core/services/skydive/jumps.service.ts
similarity index 71%
rename from src/app/core/services/jumps.service.ts
rename to src/app/core/services/skydive/jumps.service.ts
index 8375b5c..c1f594c 100644
--- a/src/app/core/services/jumps.service.ts
+++ b/src/app/core/services/skydive/jumps.service.ts
@@ -3,15 +3,16 @@ import { HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { ApiService } from './api.service';
+import { ApiService } from '../api.service';
 import {
     Jump, JumpByCategorie, JumpByDate, JumpByDay, JumpByModule, JumpFile,
     JumpList, JumpListConfig, JumpListFilters, JumpPageData,
     X2Data, SkydiverIdJumps
-} from 'src/app/core/models';
+} from '@models';
 
 @Injectable({ providedIn: 'root' })
 export class JumpsService {
+    private _apiVersion = '/v1';
     constructor(
         private apiService: ApiService
     ) { }
@@ -50,7 +51,7 @@ export class JumpsService {
         Object.assign(params, config.filters);
         return this.apiService
             .get(
-                '/jumps' + ((config.type === 'feed') ? '/feed' : ''),
+                `${this._apiVersion}/jumps` + ((config.type === 'feed') ? '/feed' : ''),
                 new HttpParams({ fromObject: <{
                     [param: string]: string | number | boolean | readonly (string | number | boolean)[];
                 }>params })
@@ -62,82 +63,82 @@ export class JumpsService {
             .pipe(map(data => {
                 return { jump: data.jump, prevJump: data.prevJump, nextJump: data.nextJump };
             })); */
-        return this.apiService.get(`/jumps/${slug}`);
+        return this.apiService.get(`${this._apiVersion}/jumps/${slug}`);
     }
 
     getAll(): Observable<Array<Jump>> {
-        return this.apiService.get('/jumps').pipe(map(data => data.jumps));
+        return this.apiService.get(`${this._apiVersion}/jumps`).pipe(map(data => data.jumps));
     }
 
     getAllByDate(): Observable<Array<JumpByDate>> {
-        return this.apiService.get('/jumps/allByDate').pipe(map(data => data.jumps));
+        return this.apiService.get(`${this._apiVersion}/jumps/allByDate`).pipe(map(data => data.jumps));
     }
 
     getAllByCategorie(): Observable<Array<JumpByCategorie>> {
-        return this.apiService.get('/jumps/allByCategorie').pipe(map(data => data.jumps));
+        return this.apiService.get(`${this._apiVersion}/jumps/allByCategorie`).pipe(map(data => data.jumps));
     }
 
     getAllByDay(config: JumpListConfig): Observable<Array<JumpByDay>> {
         const params: JumpListFilters = {} as JumpListFilters;
         Object.assign(params, config.filters);
-        return this.apiService.get('/jumps/allByDay', new HttpParams({ fromObject: <{
+        return this.apiService.get(`${this._apiVersion}/jumps/allByDay`, new HttpParams({ fromObject: <{
             [param: string]: string | number | boolean | readonly (string | number | boolean)[];
         }>params }))
             .pipe(map(data => data.days));
     }
 
     getAllByModule(): Observable<Array<JumpByModule>> {
-        return this.apiService.get('/jumps/allByModule').pipe(map(data => data.jumps));
+        return this.apiService.get(`${this._apiVersion}/jumps/allByModule`).pipe(map(data => data.jumps));
     }
 
     getAllFromSkydiverIdApi(config: JumpListConfig): Observable<SkydiverIdJumps> {
         const params: JumpListFilters = {} as JumpListFilters;
         Object.assign(params, config.filters);
-        return this.apiService.get('/jumps/allFromSkydiverIdApi', new HttpParams({ fromObject: <{
+        return this.apiService.get(`${this._apiVersion}/jumps/allFromSkydiverIdApi`, new HttpParams({ fromObject: <{
             [param: string]: string | number | boolean | readonly (string | number | boolean)[];
         }>params }))
             .pipe(map(data => data.jumps));
     }
 
     getLastJump(): Observable<Jump> {
-        return this.apiService.get('/jumps/last').pipe(map(data => data.jump));
+        return this.apiService.get(`${this._apiVersion}/jumps/last`).pipe(map(data => data.jump));
     }
 
     create(jump: Jump): Observable<Jump> {
-        return this.apiService.post('/jumps/', { jump: jump }).pipe(map(data => data.jump));
+        return this.apiService.post(`${this._apiVersion}/jumps/`, { jump: jump }).pipe(map(data => data.jump));
     }
 
     update(jump: Jump): Observable<Jump> {
-        return this.apiService.put(`/jumps/${jump.slug}`, { jump: jump }).pipe(map(data => data.jump));
+        return this.apiService.put(`${this._apiVersion}/jumps/${jump.slug}`, { jump: jump }).pipe(map(data => data.jump));
     }
 
     destroy(slug: string): Observable<boolean> {
-        return this.apiService.delete(`/jumps/${slug}`).pipe(map(data => data.deleted));
+        return this.apiService.delete(`${this._apiVersion}/jumps/${slug}`).pipe(map(data => data.deleted));
     }
 
     save(jump: Jump): Observable<Jump> {
         // If we're updating an existing jump
         if (jump.slug) {
-            return this.apiService.put(`/jumps/${jump.slug}`, { jump: jump }).pipe(map(data => data.jump));
+            return this.apiService.put(`${this._apiVersion}/jumps/${jump.slug}`, { jump: jump }).pipe(map(data => data.jump));
 
             // Otherwise, create a new jump
         } else {
-            return this.apiService.post('/jumps/', { jump: jump }).pipe(map(data => data.jump));
+            return this.apiService.post(`${this._apiVersion}/jumps/`, { jump: jump }).pipe(map(data => data.jump));
         }
     }
 
     saveX2Data(slug: string, file: JumpFile, data: X2Data): Observable<Jump> {
-        return this.apiService.post(`/jumps/data/${slug}`, { file: file, data: data })
+        return this.apiService.post(`${this._apiVersion}/jumps/data/${slug}`, { file: file, data: data })
             .pipe(map(data => data.jump));
     }
 
     saveFile(slug: string, file: JumpFile): Observable<JumpFile> {
-        return this.apiService.post(`/jumps/file/${slug}`, { file: file })
+        return this.apiService.post(`${this._apiVersion}/jumps/file/${slug}`, { file: file })
             .pipe(map(data => data.file));
     }
 
     saveKml(slug: string, file: JumpFile): Observable<JumpFile> {
-        return this.apiService.post(`/jumps/kml/${slug}`, { file: file })
+        return this.apiService.post(`${this._apiVersion}/jumps/kml/${slug}`, { file: file })
             .pipe(map(data => data.file));
     }
 
diff --git a/src/app/core/services/qcm.service.ts b/src/app/core/services/skydive/qcm.service.ts
similarity index 55%
rename from src/app/core/services/qcm.service.ts
rename to src/app/core/services/skydive/qcm.service.ts
index ca52822..8a6bf17 100644
--- a/src/app/core/services/qcm.service.ts
+++ b/src/app/core/services/skydive/qcm.service.ts
@@ -2,27 +2,27 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { ApiService } from './api.service';
-import { Qcm, QcmCategory, QcmQuestion } from 'src/app/core/models';
+import { ApiService } from '../api.service';
+import { Qcm, QcmCategory, QcmQuestion } from '@models';
 
 @Injectable({ providedIn: 'root' })
 export class QcmService {
-
+    private _apiVersion = '/v1';
     constructor(
         private apiService: ApiService
     ) { }
 
     get(type: string): Observable<Qcm> {
-        return this.apiService.get(`/qcm/type/${type}`).pipe(map(data => data.qcm));
+        return this.apiService.get(`${this._apiVersion}/qcm/type/${type}`).pipe(map(data => data.qcm));
     }
 
     saveChoices(question: object): Observable<QcmQuestion> {
-        return this.apiService.post('/qcm/choices', { question: question })
+        return this.apiService.post(`${this._apiVersion}/qcm/choices`, { question: question })
             .pipe(map(data => data.question));
     }
 
     saveQuestions(category: object): Observable<QcmCategory> {
-        return this.apiService.post('/qcm/questions', { category: category })
+        return this.apiService.post(`${this._apiVersion}/qcm/questions`, { category: category })
             .pipe(map(data => data.category));
     }
 }
diff --git a/src/app/core/services/user.service.ts b/src/app/core/services/user.service.ts
index b07b6b2..58ae44e 100644
--- a/src/app/core/services/user.service.ts
+++ b/src/app/core/services/user.service.ts
@@ -3,8 +3,8 @@ import { HttpClient } from "@angular/common/http";
 import { Observable, BehaviorSubject, ReplaySubject, Subscription } from 'rxjs';
 import { distinctUntilChanged, take, tap } from 'rxjs/operators';
 
-import { User } from 'src/app/core/models';
-import { JwtService } from 'src/app/core/services';
+import { User } from '@models';
+import { JwtService } from '@services';
 
 @Injectable({ providedIn: 'root' })
 export class UserService implements OnDestroy {
@@ -17,6 +17,7 @@ export class UserService implements OnDestroy {
     public isAuthenticated = this.isAuthenticatedSubject.asObservable();
 
 
+    private apiVersion = '/v2';
     constructor(
         private readonly http: HttpClient,
         private readonly jwtService: JwtService
@@ -31,7 +32,7 @@ export class UserService implements OnDestroy {
     populate() {
         // If JWT detected, attempt to get & store user's info
         if (this.jwtService.getToken()) {
-            const user$: Observable<{ user: User }> = this.http.get<{ user: User }>('/user').pipe(take(1));
+            const user$: Observable<{ user: User }> = this.http.get<{ user: User }>(`${this.apiVersion}/user`).pipe(take(1));
             this._user = user$.subscribe({
                 next: (data) => this.setAuth(data.user),
                 error: () => this.purgeAuth()
@@ -63,7 +64,7 @@ export class UserService implements OnDestroy {
 
     attemptAuth(type: string, credentials?: { email: string; password: string; }): Observable<{ user: User }> {
         const route = (type === 'login') ? '/login' : '';
-        const user$: Observable<{ user: User }> = this.http.post<{ user: User }>(`/user${route}`, { user: credentials });
+        const user$: Observable<{ user: User }> = this.http.post<{ user: User }>(`${this.apiVersion}/user${route}`, { user: credentials });
         /*return user$.pipe(map(
             (data: any) => {
                 this.setAuth(data.user);
@@ -83,7 +84,7 @@ export class UserService implements OnDestroy {
 
     // Update the user on the server (email, pass, etc)
     update(user: Partial<User>): Observable<{ user: User }> {
-        return this.http.put<{ user: User }>("/user", { user }).pipe(
+        return this.http.put<{ user: User }>(`${this.apiVersion}/user`, { user }).pipe(
             tap(({ user }) => {
                 this.currentUserSubject.next(user);
             }),
diff --git a/src/app/core/services/utilities.service.ts b/src/app/core/services/utilities.service.ts
index 9166fe0..da53100 100644
--- a/src/app/core/services/utilities.service.ts
+++ b/src/app/core/services/utilities.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Chart } from 'chart.js';
 import { Configuration } from 'ng-chartist';
 
-import { BarConfig, CircleConfig, DoughnutConfig, LineConfig } from 'src/app/core/models';
+import { BarConfig, CircleConfig, DoughnutConfig, LineConfig } from '@models';
 
 @Injectable({ providedIn: 'root' })
 export class UtilitiesService {
diff --git a/src/app/core/viewmodels/herowars/clan.viewmodel.ts b/src/app/core/viewmodels/herowars/clan.viewmodel.ts
new file mode 100644
index 0000000..0aaa8bd
--- /dev/null
+++ b/src/app/core/viewmodels/herowars/clan.viewmodel.ts
@@ -0,0 +1,131 @@
+import { HWGuildClan } from '@models';
+
+export class ClanViewModel {
+    clan: HWGuildClan;
+
+    constructor(clan: HWGuildClan) {
+        this.clan = clan;
+    }
+
+    getTitle(): string {
+        return this.clan.title;
+    }
+
+    getServer(): string {
+        return this.clan.serverId;
+    }
+
+    getMembersCount(): string {
+        return this.clan.membersCount;
+    }
+
+    getCountry(): string {
+        return this.clan.country;
+    }
+
+    getDescription(): string {
+        return this.clan.description;
+    }
+
+    getLevel(): string {
+        return this.clan.level;
+    }
+
+    getMinLevel(): string {
+        return this.clan.minLevel;
+    }
+
+    getTopActivity(): number {
+        return +this.clan.topActivity;
+    }
+
+    getTopDungeon(): number {
+        return +this.clan.topDungeon;
+    }
+
+    getDisbanding(): boolean {
+        return this.clan.disbanding;
+    }
+
+    getFrameId(): number {
+        return this.clan.frameId;
+    }
+
+    getOwnerId(): string {
+        return this.clan.ownerId;
+    }
+}
+
+export class ClansViewModel {
+    clans: ClanViewModel[];
+
+    constructor(clans: HWGuildClan[]) {
+        this.clans = clans.map(clan => new ClanViewModel(clan));
+    }
+
+    getClans(): ClanViewModel[] {
+        return this.clans;
+    }
+
+    getClanCount(): number {
+        return this.clans.length;
+    }
+
+    getClanByTitle(title: string): ClanViewModel | undefined {
+        return this.clans.find(clan => clan.getTitle() === title);
+    }
+
+    getClansByCountry(country: string): ClanViewModel[] {
+        return this.clans.filter(clan => clan.getCountry() === country);
+    }
+
+    getClansByServer(server: string): ClanViewModel[] {
+        return this.clans.filter(clan => clan.getServer() === server);
+    }
+
+    getClansByLevel(level: string): ClanViewModel[] {
+        return this.clans.filter(clan => clan.getLevel() === level);
+    }
+
+    getDisbandingClans(): ClanViewModel[] {
+        return this.clans.filter(clan => clan.getDisbanding());
+    }
+
+    getActiveDisbands(): ClanViewModel[] {
+        return this.clans.filter(clan => !clan.getDisbanding());
+    }
+
+    getClansByOwnerId(ownerId: string): ClanViewModel[] {
+        return this.clans.filter(clan => clan.getOwnerId() === ownerId);
+    }
+
+    getClansByMinLevel(minLevel: string): ClanViewModel[] {
+        return this.clans.filter(clan => clan.getMinLevel() === minLevel);
+    }
+
+    getAverageTopActivity(): number {
+        if (this.clans.length === 0) {
+            return 0;
+        }
+        const totalActivity = this.clans.reduce((sum, clan) => {
+            const activity = clan.getTopActivity() || 0;
+            return sum + activity;
+        }, 0);
+        return totalActivity / this.clans.length;
+    }
+
+    getAverageTopDungeon(): number {
+        if (this.clans.length === 0) {
+            return 0;
+        }
+        const totalDungeon = this.clans.reduce((sum, clan) => {
+            const dungeon = clan.getTopDungeon() || 0;
+            return sum + dungeon;
+        }, 0);
+        return totalDungeon / this.clans.length;
+    }
+
+    getClansByCountryAndServer(country: string, server: string): ClanViewModel[] {
+        return this.clans.filter(clan => clan.getCountry() === country && clan.getServer() === server);
+    }
+}
diff --git a/src/app/core/viewmodels/herowars/index.ts b/src/app/core/viewmodels/herowars/index.ts
new file mode 100644
index 0000000..57818a3
--- /dev/null
+++ b/src/app/core/viewmodels/herowars/index.ts
@@ -0,0 +1,2 @@
+export * from './clan.viewmodel';
+export * from './members.viewmodel';
diff --git a/src/app/core/viewmodels/herowars/members.viewmodel.ts b/src/app/core/viewmodels/herowars/members.viewmodel.ts
new file mode 100644
index 0000000..e66443a
--- /dev/null
+++ b/src/app/core/viewmodels/herowars/members.viewmodel.ts
@@ -0,0 +1,209 @@
+import {
+    HWMember, HWMemberStat, HWWeekStat,
+    HWGuildRaid, HWMemberHeroes, HWMemberTitans
+} from '@models';
+
+export class MemberViewModel {
+    member: HWMember;
+
+    constructor(member: HWMember) {
+        this.member = member;
+    }
+
+    getId(): string {
+        return this.member.id;
+    }
+
+    getName(): string {
+        return this.member.name;
+    }
+
+    getClanTitle(): string {
+        return this.member.clanTitle;
+    }
+
+    getServerId(): string {
+        return this.member.serverId;
+    }
+
+    getLastLoginTime(): string {
+        return this.member.lastLoginTime;
+    }
+
+    getLevel(): string {
+        return this.member.level;
+    }
+
+    getAllowPm(): string {
+        return this.member.allowPm;
+    }
+
+    getAvatarId(): string {
+        return this.member.avatarId;
+    }
+
+    getClanIcon() {
+        return this.member.clanIcon;
+    }
+
+    getClanId(): string {
+        return this.member.clanId;
+    }
+
+    getClanRole(): string {
+        return this.member.clanRole;
+    }
+
+    isCommander(): boolean {
+        return this.member.commander;
+    }
+
+    getFrameId(): number {
+        return this.member.frameId;
+    }
+
+    isChatModerator(): boolean {
+        return this.member.isChatModerator;
+    }
+
+    getLeagueId(): number {
+        return this.member.leagueId;
+    }
+
+    canShowProfile(): boolean {
+        return this.member.showProfile;
+    }
+
+    isChampion(): boolean {
+        return this.member.champion;
+    }
+
+    getMemberHeroes(): HWMemberHeroes {
+        return this.member.heroes;
+    }
+
+    getMemberTitans(): HWMemberTitans {
+        return this.member.titans;
+    }
+
+    getStat(): HWMemberStat {
+        return this.member.stat;
+    }
+
+    getInactivity() {
+        return this.member.inactivity;
+    }
+
+    getAdventureSum(): number {
+        return this.member.adventureSum;
+    }
+
+    getClanGiftsSum(): number {
+        return this.member.clanGiftsSum;
+    }
+
+    getClanWarSum(): number {
+        return this.member.clanWarSum;
+    }
+
+    getWeekStat(): HWWeekStat {
+        return this.member.weekStat;
+    }
+
+    getScore(): number {
+        return this.member.score;
+    }
+
+    getScoreGifts(): number {
+        return this.member.scoreGifts;
+    }
+
+    getWarGifts(): number {
+        return this.member.warGifts;
+    }
+
+    getRewards(): number {
+        return this.member.rewards;
+    }
+
+    getRaids(): HWGuildRaid[] {
+        return this.member.raids;
+    }
+
+    getRaidsInfo() {
+        return this.member.raidsInfo;
+    }
+}
+
+export class MembersViewModel {
+    members: MemberViewModel[];
+
+    constructor(members: HWMember[]) {
+        this.members = members.map(member => new MemberViewModel(member));
+    }
+
+    getMembers(): MemberViewModel[] {
+        return this.members;
+    }
+
+    getMemberCount(): number {
+        return this.members.length;
+    }
+
+    getMemberById(id: string): MemberViewModel | undefined {
+        return this.members.find(member => member.getId() === id);
+    }
+
+    getMemberByName(name: string): MemberViewModel | undefined {
+        return this.members.find(member => member.getName() === name);
+    }
+
+    getMembersByClanRole(clanRole: string): MemberViewModel[] {
+        return this.members.filter(member => member.getClanRole() === clanRole);
+    }
+
+    getCommandeurs(): MemberViewModel[] {
+        return this.members.filter(member => member.isCommander());
+    }
+
+    getChampions(): MemberViewModel[] {
+        return this.members.filter(member => member.isChampion());
+    }
+
+    getMembersByLevel(level: string): MemberViewModel[] {
+        return this.members.filter(member => member.getLevel() === level);
+    }
+
+    getMembersWithLowestScore(): MemberViewModel[] {
+        if (this.members.length === 0) return [];
+        const minScore = Math.min(...this.members.map(m => m.getScore()));
+        return this.members.filter(member => member.getScore() === minScore);
+    }
+
+    getMembersWithHighestScore(): MemberViewModel[] {
+        if (this.members.length === 0) return [];
+        const maxScore = Math.max(...this.members.map(m => m.getScore()));
+        return this.members.filter(member => member.getScore() === maxScore);
+    }
+
+    getTotalScore(): number {
+        return this.members.reduce((sum, member) => sum + member.getScore(), 0);
+    }
+
+    getAverageScore(): number {
+        if (this.members.length === 0) return 0;
+        return this.getTotalScore() / this.members.length;
+    }
+
+    getTotalAdventureSum(): number {
+        return this.members.reduce((sum, member) => sum + member.getAdventureSum(), 0);
+    }
+
+    getTotalClanWarSum(): number {
+        return this.members.reduce((sum, member) => sum + member.getClanWarSum(), 0);
+    }
+
+    getTotalClanGiftsSum(): number {
+        return this.members.reduce((sum, member) => sum + member.getClanGiftsSum(), 0);
+    }
+}
diff --git a/src/app/core/viewmodels/index.ts b/src/app/core/viewmodels/index.ts
new file mode 100644
index 0000000..1b87bda
--- /dev/null
+++ b/src/app/core/viewmodels/index.ts
@@ -0,0 +1 @@
+export * from './herowars/';
diff --git a/src/app/routes/auth.routes.ts b/src/app/routes/auth.routes.ts
index 6a074a6..9e47635 100644
--- a/src/app/routes/auth.routes.ts
+++ b/src/app/routes/auth.routes.ts
@@ -5,12 +5,12 @@ import {
     HerowarsComponent, HerowarsGuildraidComponent, HerowarsGuildwarComponent,
     DashboardComponent, DemoComponent, DropzonesComponent, JumpComponent, JumpsComponent,
     LogbookComponent, PageComponent, PagesComponent, ProductComponent, ProductsComponent, ProfileComponent, QcmComponent, SettingsComponent
-} from 'src/app/components';
-import { authGuard, adminGuard } from 'src/app/core/guards';
+} from '@components';
+import { authGuard, adminGuard } from '@guards';
 import {
     aeronefsPageResolver, articleResolver, articlesResolver, authResolver, canopiesPageResolver, dropZonesPageResolver,
     jumpResolver, jumpsPageResolver, lastjumpResolver, productResolver, productsResolver, profileResolver, qcmResolver
-} from 'src/app/core/resolvers';
+} from '@resolvers';
 
 export const AUTH_ROUTES: Routes = [
     {
diff --git a/src/app/routes/noauth.routes.ts b/src/app/routes/noauth.routes.ts
index 667f70f..f4e7e89 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, ProductComponent } from 'src/app/components';
-import { noauthGuard } from 'src/app/core/guards';
-import { articleResolver, articlesResolver, productResolver } from 'src/app/core/resolvers';
+import { AuthComponent, HomeComponent, PageComponent, PagesComponent, ProductComponent } from '@components';
+import { noauthGuard } from '@guards';
+import { articleResolver, articlesResolver, productResolver } from '@resolvers';
 
 export const NOAUTH_ROUTES: Routes = [
     {
diff --git a/src/files-data/.gitignore b/src/files-data/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/src/files-data/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/tsconfig.json b/tsconfig.json
index f110b91..85521cf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,32 @@
   "compilerOptions": {
     "baseUrl": "./",
     "rootDir": "./",
+    "paths": {
+      "@app/*": ["src/app/*"],
+      "@components/*": ["src/app/components/*"],
+      "@components": ["src/app/components"],
+      "@core/*": ["src/app/core/*"],
+      "@models": ["src/app/core/models"],
+      "@models/*": ["src/app/core/models/*"],
+      "@services": ["src/app/core/services"],
+      "@services/*": ["src/app/core/services/*"],
+      "@guards": ["src/app/core/guards"],
+      "@guards/*": ["src/app/core/guards/*"],
+      "@interceptors": ["src/app/core/interceptors"],
+      "@interceptors/*": ["src/app/core/interceptors/*"],
+      "@resolvers": ["src/app/core/resolvers"],
+      "@resolvers/*": ["src/app/core/resolvers/*"],
+      "@viewmodels": ["src/app/core/viewmodels"],
+      "@viewmodels/*": ["src/app/core/viewmodels/*"],
+      "@interfaces": ["src/app/core/interfaces"],
+      "@interfaces/*": ["src/app/core/interfaces/*"],
+      "@constants": ["src/app/core/constants"],
+      "@constants/*": ["src/app/core/constants/*"],
+      "@environments/*": ["src/environments/*"],
+      "@data/*": ["src/files-data/*"],
+      "@assets/*": ["src/assets/*"],
+      "@styles/*": ["src/styles/*"]
+    },
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,