diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 89a0ef4..881cf51 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
+import { FormsModule } from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NavBarComponent } from './header/components/nav-bar/nav-bar.component';
@@ -11,7 +11,7 @@ import { FooterComponent } from './footer/footer.component';
 import { HomePageComponent } from './pages/home-page/home-page.component';
 import { HttpClientModule } from '@angular/common/http';
 import { ListCategoriesComponent } from './pages/list-categories/list-categories.component';
-
+import { SigninComponent } from './pages/signin/signin.component';
 import { RestoPageComponent } from './pages/resto-page/resto-page.component';
 import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
 import { FiltersPageComponent } from './pages/filters-page/filters-page.component';
@@ -32,12 +32,14 @@ import { IconComponent } from './filters/icon/icon.component';
     PageNotFoundComponent,
     FiltersPageComponent,
     AvisBarComponent,
-    IconComponent
+    IconComponent,
+    SigninComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/pages/models/user.ts b/src/app/pages/models/user.ts
new file mode 100644
index 0000000..cfedcad
--- /dev/null
+++ b/src/app/pages/models/user.ts
@@ -0,0 +1,7 @@
+export interface User {
+    id?:number;
+    firstName: string;
+    lastName: string;
+    email: string;
+    password?: string;
+}
diff --git a/src/app/pages/signin/signin.component.html b/src/app/pages/signin/signin.component.html
index 2fb1852..ab233b4 100644
--- a/src/app/pages/signin/signin.component.html
+++ b/src/app/pages/signin/signin.component.html
@@ -1,13 +1,19 @@
 <div class="signin-form text-center">
   <main class="form-signin">
-    <img src="../../../assets/images-header/logo.png"><br>
-      <br><h5>Le bon plan pour manger</h5>
+      <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
+      <h5>Merci de vous connecter</h5>
+      <img src="../../../assets/images-header/logo.png"><br>
+      <br>Le bon plan pour manger<br>
           <div class="form-floating">
               <input type="email"
                       class="form-control"
                       id="floatingInput"
                       placeholder=""
-                      name="email">
+                      name="email"
+                      ngModel
+                      required
+                      [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' ,
+                                  'is-invalid': signinForm.form.touched && signinForm.form.value['email'] == ''}">
               <label for="floatingInput">Adresse email</label>
           </div>
           <div class="form-floating">
@@ -15,13 +21,27 @@
                       class="form-control"
                       id="floatingPassword"
                       placeholder=""
-                      name="password">
+                      name="password"
+                      ngModel
+                      required
+                      [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' ,
+                                  'is-invalid': signinForm.form.touched && signinForm.form.value['password'] == ''}">
               <label for="floatingPassword">Mot de passe</label>
           </div>
 
-          <button type="submit">Connexion</button>
-
+          <button class="w-100 btn btn-lg btn-danger"
+                  type="submit"
+                  [disabled]="signinForm.invalid">Je me connecte !</button>
+                  <p>
+                      Form is dirty : {{ signinForm.form.dirty }}
+                  </p>
+                  <p>
+                      Form is touched : {{ signinForm.form.touched }}
+                  </p>
+      </form>
 
+      <div *ngIf="errorForm">
+          <p class="text-danger">Il manque des informations dans le formulaire...</p>
+      </div>
   </main>
 </div>
-
diff --git a/src/app/pages/signin/signin.component.scss b/src/app/pages/signin/signin.component.scss
index 28499b4..990fcc1 100644
--- a/src/app/pages/signin/signin.component.scss
+++ b/src/app/pages/signin/signin.component.scss
@@ -1,42 +1,37 @@
 .signin-form {
-  height: 50vh;
-  width: 80vh;
+  height: 100vh;
   padding-top: 40px;
-  margin-bottom: 40px;
   background-image: url(../../../assets/fond_signin.png);
-
+  background-position: center;
 }
 
 .form-signin {
-  width: 60%;
+  width: 500px;
   //max-width: 330px;
   padding: 15px;
   margin: auto;
   background-color: #f0f0f0;
   border-radius: 15px;
-
-
-
-  input[type="email"] {
-      //margin-top: 10px;
-      //border-bottom-right-radius: 0;
-      //border-bottom-left-radius: 0;
-      border-radius: 10px;
-      margin-bottom: 10px;
-      border-color: red;
-  }
-
-  input[type="password"] {
-      margin-bottom: 10px;
-      //border-top-left-radius: 0;
-      //border-top-right-radius: 0;
-      margin-top: 10px;
-      border-radius: 10px;
-      border-color: red;
-  }
-
-  button{
-    color: white;
-    background-color: red;
-  }
+  box-shadow: 10px 10px 10px grey;
+  margin-top: 25vh;
 }
+
+.form-floating:focus-within {
+  z-index: 2;
+}
+
+input[type="email"] {
+  margin-top: 10px;
+  margin-bottom: 5px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-color: red;
+}
+
+input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-color: red;
+}
+
diff --git a/src/app/pages/signin/signin.component.ts b/src/app/pages/signin/signin.component.ts
index d0789c3..e233553 100644
--- a/src/app/pages/signin/signin.component.ts
+++ b/src/app/pages/signin/signin.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-signin',
@@ -6,10 +7,27 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./signin.component.scss']
 })
 export class SigninComponent implements OnInit {
-
-  constructor() { }
+  public errorForm: boolean;
+  constructor(private authService: AuthService) {
+    this.errorForm = false;
+   }
 
   ngOnInit(): void {
   }
 
+  public onSubmit(submittedForm: any): void {
+    console.log(submittedForm.form.value);
+    const email = submittedForm.form.value['email'];
+    const password = submittedForm.form.value['password'];
+    if(email !== '' && password !== '') {
+      this.authService.signin(email, password).subscribe(
+        resp => console.log('Component Page Signin: ', resp)
+      )
+    } else {
+      // afficher une erreur à l'utilisateur
+      this.errorForm = true;
+    }
+  }
+
 }
+
diff --git a/src/app/services/auth.service.spec.ts b/src/app/services/auth.service.spec.ts
new file mode 100644
index 0000000..f1251ca
--- /dev/null
+++ b/src/app/services/auth.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
new file mode 100644
index 0000000..c1f66ff
--- /dev/null
+++ b/src/app/services/auth.service.ts
@@ -0,0 +1,67 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { map, Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { User } from 'src/app/pages/models/user';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private apiUrl: string;
+  private tokenKey: string;
+
+  constructor(private http: HttpClient) {
+    // On se sert des variables d'environnement de notre application
+    this.apiUrl = environment.apiUrl;
+    this.tokenKey = environment.tokenKey;
+   }
+
+   signup(newUser: User): Observable<any> {
+    //  const body = {
+    //     firstName: firstName,
+    //     lastName: lastName,
+    //     email: email,
+    //     password: password
+    //  };
+
+     console.log("Mon nouvel utilisateur : ", newUser);
+
+     return this.http.post(`${this.apiUrl}/register`, newUser);
+   }
+
+   signin(email: string, password: string): Observable<any> {
+     const body = {
+       email: email,
+       password: password
+     };
+
+     console.log("Mon body : ", body);
+
+     // Modifier cette partie ci-dessous :
+     // - pour pouvoir stocker dans le localstorage notre accesstoken
+     // - Sous la clé "TOKEN-LBP"
+
+     return this.http.post(`${this.apiUrl}/login`, body).pipe(
+       map((x: any) => {
+         console.log('Service : ', x.accessToken);
+         // Modification à faire ici
+         localStorage.setItem(this.tokenKey, x.accessToken);
+         return x; // permet de renvoyer la réponse à l'initiateur (page Signin) après le traitement du map
+        })
+     );
+   }
+
+   forgotPassword(email: string, password: string): Observable<any> {
+     const body = {
+       email: email,
+       password: password
+     };
+
+     console.log("Mon body : ", body);
+
+     return this.http.post(`${this.apiUrl}/forgot-psw`, body);
+   }
+
+}
diff --git a/src/assets/fond_signin.png b/src/assets/fond_signin.png
index 570b0dc..3fb3599 100644
Binary files a/src/assets/fond_signin.png and b/src/assets/fond_signin.png differ
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 0e46b37..238baf0 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,4 +1,5 @@
 export const environment = {
   production: true,
-  apiUrl: ""
+  apiUrl: "",
+  tokenKey: ""
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index a0c2872..2d9b681 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -5,6 +5,7 @@
 export const environment = {
   production: false,
   apiUrl: "http://localhost:8080",
+  tokenKey: "TOKEN-SIMPLEAT"
 };
 
 /*