diff --git a/angular.json b/angular.json
index 707344a..a7943c1 100644
--- a/angular.json
+++ b/angular.json
@@ -25,7 +25,7 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -89,7 +89,7 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           }
@@ -122,5 +122,10 @@
       }
     }
   },
+  "schematics": {
+    "@schematics/angular:component": {
+      "styleext": "scss"
+    }
+  },
   "defaultProject": "EPAClient"
 }
\ No newline at end of file
diff --git a/src/app/app.component.css b/src/app/app.component.scss
similarity index 100%
rename from src/app/app.component.css
rename to src/app/app.component.scss
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 1329634..236d2fd 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -8,7 +8,7 @@ import { cles } from "@shared/utils/cles"
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 
 export class AppComponent implements OnInit {
diff --git a/src/app/demandes-formation/new-demande-formation/new-demande-formation.component.css b/src/app/demandes-formation/new-demande-formation/new-demande-formation.component.scss
similarity index 100%
rename from src/app/demandes-formation/new-demande-formation/new-demande-formation.component.css
rename to src/app/demandes-formation/new-demande-formation/new-demande-formation.component.scss
diff --git a/src/app/demandes-formation/new-demande-formation/new-demande-formation.component.ts b/src/app/demandes-formation/new-demande-formation/new-demande-formation.component.ts
index 4cc4292..ea133db 100644
--- a/src/app/demandes-formation/new-demande-formation/new-demande-formation.component.ts
+++ b/src/app/demandes-formation/new-demande-formation/new-demande-formation.component.ts
@@ -13,7 +13,7 @@ import { DemandesFormationService } from "@shared/api-swagger/api/api";
 @Component({
   selector: 'app-new-demande-formation',
   templateUrl: './new-demande-formation.component.html',
-  styleUrls: ['./new-demande-formation.component.css']
+  styleUrls: ['./new-demande-formation.component.scss']
 })
 export class NewDemandeFormationComponent implements OnInit {
 
diff --git a/src/app/ep/details-ep/details-ep.component.css b/src/app/ep/details-ep/details-ep.component.scss
similarity index 100%
rename from src/app/ep/details-ep/details-ep.component.css
rename to src/app/ep/details-ep/details-ep.component.scss
diff --git a/src/app/ep/details-ep/details-ep.component.ts b/src/app/ep/details-ep/details-ep.component.ts
index 2616b10..d4b77aa 100644
--- a/src/app/ep/details-ep/details-ep.component.ts
+++ b/src/app/ep/details-ep/details-ep.component.ts
@@ -12,7 +12,7 @@ import { Subscription } from "rxjs";
 @Component({
     selector : "details-ep",
     templateUrl: "./details-ep.component.html",
-    styleUrls: ["./details-ep.component.css"]
+    styleUrls: ["./details-ep.component.scss"]
 })
 export class DetailsEPComponent implements OnInit {
 
diff --git a/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.css b/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.scss
similarity index 100%
rename from src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.css
rename to src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.scss
diff --git a/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts b/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts
index d1cb153..503c472 100644
--- a/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts
+++ b/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts
@@ -7,7 +7,7 @@ import { RDVEntretienDTO } from '@shared/api-swagger';
 @Component({
   selector: 'ep-choix-date',
   templateUrl: './ep-choix-date.component.html',
-  styleUrls: ["ep-choix-date.component.css"]
+  styleUrls: ["ep-choix-date.component.scss"]
 })
 export class EpChoixDateComponent  {
   @Input() rdvsEntretien : Array<RDVEntretienDTO>;
diff --git a/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.css b/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.scss
similarity index 100%
rename from src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.css
rename to src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.scss
diff --git a/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.ts b/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.ts
index 2de838f..fa5c748 100644
--- a/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.ts
+++ b/src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.ts
@@ -5,7 +5,7 @@ import { afficherStatutObjectif, EpDTO, StatutObjectif } from "@shared/api-swagg
 @Component({
     selector : "ep-objectifs",
     templateUrl: "ep-objectifs.component.html",
-    styleUrls: ["ep-objectifs.component.css"]
+    styleUrls: ["ep-objectifs.component.scss"]
 })
 export class EpObjectifsComponent {
     
diff --git a/src/app/formations/edit-formation/edit-formation.component.css b/src/app/formations/edit-formation/edit-formation.component.scss
similarity index 100%
rename from src/app/formations/edit-formation/edit-formation.component.css
rename to src/app/formations/edit-formation/edit-formation.component.scss
diff --git a/src/app/formations/edit-formation/edit-formation.component.ts b/src/app/formations/edit-formation/edit-formation.component.ts
index 8a3dbbb..164f241 100644
--- a/src/app/formations/edit-formation/edit-formation.component.ts
+++ b/src/app/formations/edit-formation/edit-formation.component.ts
@@ -19,7 +19,7 @@ import { FormationsService } from '@shared/api-swagger/api/api';
 @Component({
   selector: 'app-edit-formation',
   templateUrl: './edit-formation.component.html',
-  styleUrls: ["edit-formation.component.css"]
+  styleUrls: ["edit-formation.component.scss"]
 })
 export class EditFormationComponent implements OnInit {
   /**
diff --git a/src/app/formations/new-formation/new-formation.component.css b/src/app/formations/new-formation/new-formation.component.scss
similarity index 100%
rename from src/app/formations/new-formation/new-formation.component.css
rename to src/app/formations/new-formation/new-formation.component.scss
diff --git a/src/app/formations/new-formation/new-formation.component.ts b/src/app/formations/new-formation/new-formation.component.ts
index 3ec98a9..a7d188d 100644
--- a/src/app/formations/new-formation/new-formation.component.ts
+++ b/src/app/formations/new-formation/new-formation.component.ts
@@ -13,7 +13,7 @@ import { FormationsService } from "@shared/api-swagger/api/api";
 @Component({
   selector: 'app-new-formation',
   templateUrl: './new-formation.component.html',
-  styleUrls: ['./new-formation.component.css']
+  styleUrls: ['./new-formation.component.scss']
 })
 export class NewFormationComponent implements OnInit {
   /**
diff --git a/src/app/home/home-assistante/home-assistante.component.css b/src/app/home/home-assistante/home-assistante.component.scss
similarity index 100%
rename from src/app/home/home-assistante/home-assistante.component.css
rename to src/app/home/home-assistante/home-assistante.component.scss
diff --git a/src/app/home/home-assistante/home-assistante.component.ts b/src/app/home/home-assistante/home-assistante.component.ts
index 11f61aa..1d2b8d8 100644
--- a/src/app/home/home-assistante/home-assistante.component.ts
+++ b/src/app/home/home-assistante/home-assistante.component.ts
@@ -14,7 +14,7 @@ import { epTypeRecherche } from '@shared/utils/cles';
 @Component({
   selector : 'home-assistante',
   templateUrl : 'home-assistante.component.html',
-  styleUrls : [ "./home-assistante.component.css"]
+  styleUrls : [ "./home-assistante.component.scss"]
 })
 export class HomeAssistanteComponent {
   displayedColumns: string[] = ["agence", "collaborateur", "referent", "datearrivee", "statutep", "typeep", "dateentretien", "datedisponibilite", "consultation"];
diff --git a/src/app/shared/filter/checkbox-filter/checkbox-filter.css b/src/app/shared/filter/checkbox-filter/checkbox-filter.scss
similarity index 100%
rename from src/app/shared/filter/checkbox-filter/checkbox-filter.css
rename to src/app/shared/filter/checkbox-filter/checkbox-filter.scss
diff --git a/src/app/shared/filter/checkbox-filter/checkbox-filter.ts b/src/app/shared/filter/checkbox-filter/checkbox-filter.ts
index e6ff222..11aac3c 100644
--- a/src/app/shared/filter/checkbox-filter/checkbox-filter.ts
+++ b/src/app/shared/filter/checkbox-filter/checkbox-filter.ts
@@ -8,7 +8,7 @@ import { SelectedElement } from "@shared/filter/selected-element";
 @Component({
     selector: "checkbox-filter",
     templateUrl: "./checkbox-filter.html",
-    styleUrls: ["./checkbox-filter.css"]
+    styleUrls: ["./checkbox-filter.scss"]
 })
 export class CheckboxFilterComponent<T> implements OnInit, OnChanges  {
    
diff --git a/src/app/shared/filter/select-filter/select-filter.css b/src/app/shared/filter/select-filter/select-filter.scss
similarity index 100%
rename from src/app/shared/filter/select-filter/select-filter.css
rename to src/app/shared/filter/select-filter/select-filter.scss
diff --git a/src/app/shared/filter/select-filter/select-filter.ts b/src/app/shared/filter/select-filter/select-filter.ts
index 6b1d985..deb6837 100644
--- a/src/app/shared/filter/select-filter/select-filter.ts
+++ b/src/app/shared/filter/select-filter/select-filter.ts
@@ -4,7 +4,7 @@ import { SelectedElement } from "@shared/filter/selected-element";
 @Component({
     selector: "select-filter",
     templateUrl: "./select-filter.html",
-    styleUrls: ["./select-filter.css"]
+    styleUrls: ["./select-filter.scss"]
 })
 export class SelectFilterComponent<T> implements OnInit, OnChanges   {
    
diff --git a/src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.css b/src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.scss
similarity index 100%
rename from src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.css
rename to src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.scss
diff --git a/src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.ts b/src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.ts
index 90eb719..54b3ffd 100644
--- a/src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.ts
+++ b/src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.ts
@@ -12,7 +12,7 @@ import { cles, collaborateurTypeRecherche } from "@shared/utils/cles";
 @Component({
     selector: "collaborateurs-table",
     templateUrl: "./collaborateurs.table.html",
-    styleUrls: ["./collaborateurs.table.css"]
+    styleUrls: ["./collaborateurs.table.scss"]
 })
 export class CollaborateursTableComponent implements OnInit {
 
diff --git a/src/app/shared/mat-tables/demandes-formation-table/demandes-formation.table.css b/src/app/shared/mat-tables/demandes-formation-table/demandes-formation.table.scss
similarity index 100%
rename from src/app/shared/mat-tables/demandes-formation-table/demandes-formation.table.css
rename to src/app/shared/mat-tables/demandes-formation-table/demandes-formation.table.scss
diff --git a/src/app/shared/mat-tables/engagements-table/engagements-table.css b/src/app/shared/mat-tables/engagements-table/engagements-table.scss
similarity index 100%
rename from src/app/shared/mat-tables/engagements-table/engagements-table.css
rename to src/app/shared/mat-tables/engagements-table/engagements-table.scss
diff --git a/src/app/shared/mat-tables/ep-table/ep-table.css b/src/app/shared/mat-tables/ep-table/ep-table.scss
similarity index 100%
rename from src/app/shared/mat-tables/ep-table/ep-table.css
rename to src/app/shared/mat-tables/ep-table/ep-table.scss
diff --git a/src/app/shared/mat-tables/formations-table/formations.table.css b/src/app/shared/mat-tables/formations-table/formations.table.scss
similarity index 100%
rename from src/app/shared/mat-tables/formations-table/formations.table.css
rename to src/app/shared/mat-tables/formations-table/formations.table.scss
diff --git a/src/app/shared/mat-tables/formations-table/formations.table.ts b/src/app/shared/mat-tables/formations-table/formations.table.ts
index bf46cd8..732bb9c 100644
--- a/src/app/shared/mat-tables/formations-table/formations.table.ts
+++ b/src/app/shared/mat-tables/formations-table/formations.table.ts
@@ -12,7 +12,7 @@ import { cles } from "@shared/utils/cles";
 @Component({
     selector: "formations-table",
     templateUrl: "./formations.table.html",
-    styleUrls: ["./formations.table.css"]
+    styleUrls: ["./formations.table.scss"]
 })
 export class FormationsTableComponent implements OnInit {
 
diff --git a/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.css b/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.scss
similarity index 100%
rename from src/app/shared/mat-tables/participations-formation-table/participations-formation.table.css
rename to src/app/shared/mat-tables/participations-formation-table/participations-formation.table.scss
diff --git a/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.ts b/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.ts
index 9ceb635..9e90f76 100644
--- a/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.ts
+++ b/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.ts
@@ -11,7 +11,7 @@ import { DatePipe } from "@angular/common";
 @Component({
     selector: "participations-formation-table",
     templateUrl: "./participations-formation.table.html",
-    styleUrls: ["./participations-formation.table.css"]
+    styleUrls: ["./participations-formation.table.scss"]
 })
 export class ParticipationsFormationTableComponent implements OnInit, OnChanges, AfterViewInit  {
 
diff --git a/src/styles.css b/src/styles.scss
similarity index 100%
rename from src/styles.css
rename to src/styles.scss