diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 712c4af..d8b9a5e 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -3,9 +3,11 @@ import { BookListComponent } from './components/book-list/book-list.component';
 import { BookFormComponent } from './components/book-form/book-form.component';
 import { BookDetailComponent } from './components/book-detail/book-detail.component';
 import { BookHomeComponent } from './components/book-home/book-home.component';
+import { LoginComponent } from './components/login/login.component';
+
 
 export const routes: Routes = [
-    { path: '', component: BookHomeComponent },
+    { path: '', component: LoginComponent },
     { path: 'books', component: BookListComponent },
     { path: 'book/add', component: BookFormComponent },    
     { path: 'book/:id', component: BookDetailComponent },
diff --git a/src/app/components/login/login.component.css b/src/app/components/login/login.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
new file mode 100644
index 0000000..62d3b3a
--- /dev/null
+++ b/src/app/components/login/login.component.html
@@ -0,0 +1,25 @@
+<section>
+    <h2>Identifiez vous !</h2>
+
+    <form [formGroup]="loginForm">
+        <div>
+            <mat-form-field class="full-width">
+                <mat-label>Login</mat-label>
+                <input matInput type="text" formControlName="login" />
+            </mat-form-field>
+        </div>
+        
+        <div>
+            <mat-form-field class="full-width">
+                <mat-label>Password</mat-label>
+                <input matInput type="text" formControlName="password" />
+            </mat-form-field>
+        </div>
+        
+        <div>
+            <button mat-flat-button color="primary" type="button" (click)="Connect()">Connexion</button>
+        </div>
+    </form>
+    
+</section>
+
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
new file mode 100644
index 0000000..16a24bf
--- /dev/null
+++ b/src/app/components/login/login.component.ts
@@ -0,0 +1,50 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { User } from '../../models/user.model';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [
+    MatFormFieldModule, 
+    MatInputModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css'
+})
+export class LoginComponent {
+  user: User = { login: '', password: '' }
+  loginForm: FormGroup = new FormGroup({
+    login: new FormControl(this.user.login, Validators.required),
+    password: new FormControl(this.user.password, Validators.required),
+  });
+
+  Connect() {  
+    // if (this.loginForm.invalid) {
+    //   console.log("ERREUR");
+    //   return;
+    // }
+    console.log(this.user.login)
+    console.log(this.user.password)
+
+    if(this.user.login != this.user.password){
+      console.log("ERREUR");
+      return;
+    }
+  }
+
+}