diff --git a/kairos-web/src/app/app-routing.module.ts b/kairos-web/src/app/app-routing.module.ts
index fc68cfd..d82fbfd 100644
--- a/kairos-web/src/app/app-routing.module.ts
+++ b/kairos-web/src/app/app-routing.module.ts
@@ -9,6 +9,7 @@ import { ErrorComponent } from './components/error/error.component';
 import { EventEditComponent } from './components/event-edit/event-edit.component';
 import {ProfileComponent} from "./components/profile/profile.component";
 import {EventCalendarComponent} from "./components/event-calendar/event-calendar.component";
+import { CompanionComponent } from './components/companion/companion.component';
 
 const routes: Routes = [
   {
@@ -44,9 +45,13 @@ const routes: Routes = [
         ]
       },
       {
-        path:'profile',
+        path: 'profile',
         component: ProfileComponent
       },
+      {
+        path: 'companion',
+        component: CompanionComponent
+      }
     ]
   },
   {
diff --git a/kairos-web/src/app/app.module.ts b/kairos-web/src/app/app.module.ts
index 4f2056a..1a79277 100644
--- a/kairos-web/src/app/app.module.ts
+++ b/kairos-web/src/app/app.module.ts
@@ -25,6 +25,7 @@ import {ErrorComponent} from "./components/error/error.component";
 import {EventCalendarComponent} from './components/event-calendar/event-calendar.component';
 import {ModalDialogComponent} from './components/dialog/modal-dialog/modal-dialog.component';
 import { AlertDialogComponent } from './components/dialog/alert-dialog/alert-dialog.component';
+import { CompanionComponent } from './components/companion/companion.component';
 
 @NgModule({
   declarations: [
@@ -45,6 +46,7 @@ import { AlertDialogComponent } from './components/dialog/alert-dialog/alert-dia
     EventCalendarComponent,
     ModalDialogComponent,
     AlertDialogComponent,
+    CompanionComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/kairos-web/src/app/components/companion/companion.component.html b/kairos-web/src/app/components/companion/companion.component.html
new file mode 100644
index 0000000..6c0aacc
--- /dev/null
+++ b/kairos-web/src/app/components/companion/companion.component.html
@@ -0,0 +1,6 @@
+<fa-icon class="smiley-icon" [icon]="faPersonDigging"></fa-icon>
+<div class="text-container">
+    <h1>Page du compagnon</h1>
+    <h2>Actuellement en construction ! Il vous rejoindra bientôt</h2>
+</div>
+<div class="companion-background"></div>
\ No newline at end of file
diff --git a/kairos-web/src/app/components/companion/companion.component.scss b/kairos-web/src/app/components/companion/companion.component.scss
new file mode 100644
index 0000000..5b1850d
--- /dev/null
+++ b/kairos-web/src/app/components/companion/companion.component.scss
@@ -0,0 +1,29 @@
+@use '/src/styles/variables.scss' as vars;
+
+:host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    gap: 15px;
+    color: vars.$first-color;
+    .smiley-icon {
+        font-size: 120px;
+    }
+    .text-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: left;
+    }
+    .companion-background {
+        width: 100%;
+        height: 100%;
+        background-color: darken(vars.$fourth-color, 7%);
+        opacity: 75%;
+        position: fixed;
+        z-index: -1;
+    }
+}
\ No newline at end of file
diff --git a/kairos-web/src/app/components/companion/companion.component.spec.ts b/kairos-web/src/app/components/companion/companion.component.spec.ts
new file mode 100644
index 0000000..2adaf52
--- /dev/null
+++ b/kairos-web/src/app/components/companion/companion.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompanionComponent } from './companion.component';
+
+describe('CompanionComponent', () => {
+  let component: CompanionComponent;
+  let fixture: ComponentFixture<CompanionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CompanionComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CompanionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/kairos-web/src/app/components/companion/companion.component.ts b/kairos-web/src/app/components/companion/companion.component.ts
new file mode 100644
index 0000000..53edc42
--- /dev/null
+++ b/kairos-web/src/app/components/companion/companion.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { faPersonDigging } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  selector: 'app-companion',
+  templateUrl: './companion.component.html',
+  styleUrls: ['./companion.component.scss']
+})
+export class CompanionComponent {
+  faPersonDigging = faPersonDigging;
+}
diff --git a/kairos-web/src/app/components/error/error.component.scss b/kairos-web/src/app/components/error/error.component.scss
index 1edd8c8..fb64608 100644
--- a/kairos-web/src/app/components/error/error.component.scss
+++ b/kairos-web/src/app/components/error/error.component.scss
@@ -1,4 +1,5 @@
 @use '/src/styles/variables.scss' as vars;
+
 .error-container {
     display: flex;
     justify-content: center;