diff --git a/src/app/app.css b/src/app/app.css
index 73a1c7e..bd6e329 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -3,11 +3,27 @@
 }
 
 .app-layout {
-  height: 100vh;
+  height: 150vh;
+    width: 100%;
+}
+
+.main-title {
+    color:#eabf63;
 }
 
 .top-nav {
   line-height: 64px;
+  background-color: #2c2c2c;
+}
+
+.top-nav a {
+    display: block;
+    background-color: #4c4c4c;
+}
+
+.nav-item {
+    color: #eabf63;
+    font-size: 18px;
 }
 
 .logo {
@@ -15,22 +31,21 @@
   height: 64px;
   padding-right: 24px;
   line-height: 64px;
-  background: #001529;
+  background: #1c1c1c;
 }
 
 .logo img {
   display: inline-block;
-  height: 32px;
-  width: 32px;
-  vertical-align: middle;
+  height: 70px;
+  width: 130px;
 }
 
 .logo h1 {
   display: inline-block;
-  margin: 0 0 0 15px;
-  color: #fff;
+  margin: 0 0 0 10px;
+  color: #eabf63;
   font-weight: 600;
-  font-size: 20px;
+  font-size: 22px;
   font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
   vertical-align: middle;
 }
diff --git a/src/app/app.html b/src/app/app.html
index 2c7dce2..09a862f 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -2,15 +2,15 @@
   <nz-header>
     <div class="logo">
       <a>
-        <img src="../logo.svg" alt="logo">
-        <h1>Pyrofêtes P4</h1>
+        <img src="../logo-navbar.svg" alt="logo">
+        <h1>Gestion des relations</h1>
       </a>
     </div>
     <ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
-      <li nz-menu-item routerLinkActive="ant-menu-item-selected" routerLink="/customers">Clients</li>
-      <li nz-menu-item routerLinkActive="ant-menu-item-selected" routerLink="/providers">Prestataires</li>
-      <li nz-menu-item routerLinkActive="ant-menu-item-selected" routerLink="/staff">Artificiers</li>
-        <li nz-menu-item routerLinkActive="ant-menu-item-selected" routerLink="/opportunities">Opportunités</li>
+      <li nz-menu-item class="nav-item" routerLinkActive="ant-menu-item-selected" routerLink="/customers"><nz-icon nzType="shop" nzTheme="outline" /> Clients</li>
+      <li nz-menu-item class="nav-item" routerLinkActive="ant-menu-item-selected" routerLink="/providers"><nz-icon nzType="solution" nzTheme="outline" /> Prestataires</li>
+      <li nz-menu-item class="nav-item" routerLinkActive="ant-menu-item-selected" routerLink="/staff"><nz-icon nzType="fire" nzTheme="fill" /> Artificiers</li>
+      <li nz-menu-item class="nav-item" routerLinkActive="ant-menu-item-selected" routerLink="/opportunities"><nz-icon nzType="stock" nzTheme="outline" /> Opportunités</li>
     </ul>
   </nz-header>
   <nz-content>
diff --git a/src/app/app.ts b/src/app/app.ts
index 16a99a4..e04f8f4 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -2,10 +2,11 @@ import { Component } from '@angular/core';
 import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
 import { NzMenuModule } from 'ng-zorro-antd/menu';
+import {NzIconDirective} from "ng-zorro-antd/icon";
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, NzLayoutModule, NzMenuModule, RouterLinkActive, RouterLink],
+    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, RouterLinkActive, RouterLink, NzIconDirective],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })
diff --git a/src/app/pages/providers/providers.html b/src/app/pages/providers/providers.html
index 5d1a3a1..66d56d1 100644
--- a/src/app/pages/providers/providers.html
+++ b/src/app/pages/providers/providers.html
@@ -1 +1 @@
-<p>providers works!</p>
+<app-providers-card-form></app-providers-card-form>
diff --git a/src/app/pages/providers/providers.ts b/src/app/pages/providers/providers.ts
index de4acdb..fe238ff 100644
--- a/src/app/pages/providers/providers.ts
+++ b/src/app/pages/providers/providers.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import {ProvidersCardForm} from "./providers-card-form/providers-card-form";
 
 @Component({
   selector: 'app-providers',
-  imports: [],
+    imports: [
+        ProvidersCardForm
+    ],
   templateUrl: './providers.html',
   styleUrl: './providers.css',
 })
diff --git a/src/index.html b/src/index.html
index 319da74..34b7420 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,7 @@
   <title>Pyrofètes Frontend</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="./public/logo-navbar.svg">
 </head>
 <body>
   <app-root></app-root>
diff --git a/src/theme.less b/src/theme.less
index ecf2541..80e21da 100644
--- a/src/theme.less
+++ b/src/theme.less
@@ -6,4 +6,4 @@
 // Override less variables to here
 // View all variables: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less
 
-// @primary-color: #1890ff;
+@primary-color: #1c1c1c;