diff --git a/src/app/pages/login-form/login-form.component.css b/src/app/pages/login-form/login-form.component.css
index 2638a0f..4fa4b3e 100644
--- a/src/app/pages/login-form/login-form.component.css
+++ b/src/app/pages/login-form/login-form.component.css
@@ -1,3 +1,85 @@
-ion-card{
+.bg {
+    --background: linear-gradient(180deg, #e6dede, #e58a8a);
+}
+
+.container {
+    text-align: center;
+    padding-top: 60px;
+}
+
+.logo-box {
+    width: 90px;
+    height: 90px;
+    margin: 0 auto 10px;
+    border-radius: 20px;
+    background: #f2eaea;
+    display: flex;
+    align-items: center;
     justify-content: center;
+
+    box-shadow: 8px 8px 15px #d1bcbc,
+    -8px -8px 15px #ffffff;
+
+    img {
+        width: 50px;
+    }
+}
+
+h1 {
+    color: #b86b6b;
+    margin-bottom: 30px;
+}
+
+.card {
+    width: 85%;
+    max-width: 320px;
+    margin: auto;
+    padding: 25px;
+    border-radius: 20px;
+    background: #f2eaea;
+
+    box-shadow: 10px 10px 20px #cfaeae,
+    -10px -10px 20px #ffffff;
+
+    h3 {
+        color: #c27a7a;
+        margin-bottom: 20px;
+        font-weight: normal;
+    }
+}
+
+.input {
+    margin: 10px 0;
+    border-radius: 20px;
+
+    --background: #f2eaea;
+    --padding-start: 15px;
+
+    box-shadow: inset 5px 5px 10px #d1bcbc,
+    inset -5px -5px 10px #ffffff;
+
+    ion-input {
+        color: #a35c5c;
+    }
+}
+
+.btn {
+    margin-top: 15px;
+    --background: #b86b6b;
+    --border-radius: 20px;
+
+    box-shadow: 5px 5px 10px #a45f5f,
+    -5px -5px 10px #ff9c9c;
+}
+
+.signup {
+    margin-top: 20px;
+    color: white;
+    font-size: 14px;
+
+    a {
+        color: white;
+        font-weight: bold;
+        text-decoration: underline;
+    }
 }
\ No newline at end of file
diff --git a/src/app/pages/login-form/login-form.component.html b/src/app/pages/login-form/login-form.component.html
index d1b8241..39bcccf 100644
--- a/src/app/pages/login-form/login-form.component.html
+++ b/src/app/pages/login-form/login-form.component.html
@@ -1,17 +1,36 @@
-<ion-card>
-    <ion-card-header>
-        <ion-card-title>Connectez-vous à Knots !</ion-card-title><br><br>
-    </ion-card-header>
+<ion-content [fullscreen]="true" class="bg">
 
-    <ion-card-content>
-        Login
-        <br>
-        <input type="text">
-        <br>
-        Mot de Passe
-        <br>
-        <input type="password">
-    </ion-card-content><br>
+    <div class="container">
 
-    <ion-button fill="clear">Se connecter</ion-button>
-</ion-card>
\ No newline at end of file
+        <div class="logo-box">
+            <img src="assets/icon/logo.png" alt="logo">
+        </div>
+
+        <h1>Knots</h1>
+
+        <div class="card">
+
+            <h3>Connectez-vous à Knots !</h3>
+
+            <ion-item lines="none" class="input">
+                <ion-input placeholder="Login..."></ion-input>
+            </ion-item>
+
+            <ion-item lines="none" class="input">
+                <ion-input type="password" placeholder="Password..."></ion-input>
+            </ion-item>
+
+            <ion-button expand="block" class="btn">
+                Se connecter
+            </ion-button>
+
+        </div>
+
+        <div class="signup">
+            Vous êtes nouveau ?<br>
+            <a href="#">Créez vous un compte ici</a>
+        </div>
+
+    </div>
+
+</ion-content>
\ No newline at end of file
diff --git a/src/app/pages/login-form/login-form.component.ts b/src/app/pages/login-form/login-form.component.ts
index 4275d03..9399107 100644
--- a/src/app/pages/login-form/login-form.component.ts
+++ b/src/app/pages/login-form/login-form.component.ts
@@ -4,7 +4,7 @@ import {
   IonCard,
   IonCardContent,
   IonCardHeader,
-  IonCardTitle,
+  IonCardTitle, IonContent, IonInput, IonItem, NavController,
 } from '@ionic/angular/standalone';
 import {CommonModule} from "@angular/common";
 import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
@@ -15,13 +15,14 @@ import {LoginService} from "../../login.service";
   selector: 'login-form',
   templateUrl: 'login-form.component.html',
   styleUrls: ['login-form.component.css'],
-  imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, CommonModule, ReactiveFormsModule,],
+  imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, CommonModule, ReactiveFormsModule, IonItem, IonInput, IonContent,],
 })
 export class LoginFormComponent {
 
   private fb = inject(FormBuilder);
   private loginService = inject(LoginService);
   private router = inject(Router);
+  private navCtrl = inject(NavController);
 
   isLoading = false;
 
@@ -30,8 +31,11 @@ export class LoginFormComponent {
     password: ['', [Validators.required]]
   });
 
-  submitForm(): void {
+  async submitForm(): Promise<void> {
     if (this.loginForm.valid) {
+
+      await this.navCtrl.navigateRoot(['main/messages']);
+
       this.isLoading = true;
 
       const request = {