diff --git a/src/app/components/opCommercial/scanner-carte/scanner-carte.component.html b/src/app/components/opCommercial/scanner-carte/scanner-carte.component.html
index eac351a..b1c041d 100644
--- a/src/app/components/opCommercial/scanner-carte/scanner-carte.component.html
+++ b/src/app/components/opCommercial/scanner-carte/scanner-carte.component.html
@@ -7,109 +7,148 @@
 </ul>-->
 
 <app-nav-commercant></app-nav-commercant>
-<div class="container" style="padding-top:10%">
-<div class="card">
-  <div class="card-block">
-    <p class="h5 text-center mb-4">Scanner Carte</p>
-    <!--<p class="text-center mb-4" style="padding-top: 2%;">Choisissez quelle type de fieulle voulez-vous scanner la carte</p>
-    <form class="form-inline flex-center">
-      <div class="md-form" style="padding-left: 2%;">
-        <input name="group2" type="radio" class="with-gap" id="Newfilleul" value="Newfilleul"  (click)="initFilSelect()" [(ngModel)]="radioFilleul">
-        <label for="Newfilleul">Nouveau Filleul</label>
-      </div>
-      <div class="md-form" style="padding-left: 2%;">
-        <input name="group2" type="radio" class="with-gap" id="FilleulExist" value ="FilleulExist" (click)="initFilSelect()" [(ngModel)]="radioFilleul">
-        <label for="FilleulExist">Filleul Existant</label>
-      </div>
-    </form>
-     Si cest un nouveau filleul
-    <div *ngIf="radioFilleul === 'Newfilleul'">
-      <div class="md-form">
-        <i class="fa fa-address-card prefix grey-text"></i>
-        <input type="text" id="orangeForm-Familyname" [(ngModel)]="filleul.idCard" placeholder="ID carte">
-      </div>
-      <div class="md-form">
-        <i class="fa fa-user prefix grey-text"></i>
-        <input type="text" id="orangeForm-Familyname" [(ngModel)]="filleul.familyname" placeholder="Family name">
-      </div>
-      <div class="md-form">
-        <i class="fa fa-user prefix grey-text"></i>
-        <input type="text" id="orangeForm-Firstname" [(ngModel)]="filleul.firstname" placeholder="Firstname">
-      </div>
-      <form class="form-inline">
-        <div class="md-form">
-          <i class="fa fa-venus-mars prefix grey-text"></i>
-          <input name="group3" type="radio" class="with-gap" id="homme" value="Homme" [(ngModel)]="filleul.sex">
-          <label for="homme">Homme</label>
-        </div>
-        <div class="md-form" style="padding-left: 2%;">
-          <input name="group3" type="radio" class="with-gap" id="femme" value="Femme" [(ngModel)]="filleul.sex">
-          <label for="femme">Femme</label>
-        </div>
-      </form>
-      <div class="md-form">
-        <i class="fa fa-birthday-cake prefix grey-text"></i>
-        <input type="date" id="orangeForm-Birthday" [(ngModel)]="filleul.birthday" placeholder="Birthday">
-      </div>
-      <div class="md-form">
-        <i class="fa fa-envelope prefix grey-text"></i>
-        <input type="email" id="orangeForm-email" [(ngModel)]="filleul.email" placeholder="Email" name="email" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #email="ngModel">
-        <div *ngIf="email.errors && email.errors.pattern && (email.dirty || email.touched)"  class="alert alert-danger">
-          Email is required and format should be <strong><i>john@filleul.fr</i></strong>.
-        </div>
-      </div>
-      <label>
-        En cliquant sur Créer un compte, vous acceptez nos Conditions
-        et indiquez que vous aves lu notre Politique d'utilisation des
-        données, y compris notre Utilisation des cookies.
-      </label>
-      <div class="text-center" style="margin-top:5%">
-        <button class="btn btn-light-green waves-light" [disabled]="email.errors" (click)="registerNewFilleul()">Creer nouveau filleul & scanner carte</button>
-        <button class="btn btn-cyan" (click)="goToOpComm()">Back</button>
-      </div>
-    </div>-->
-    <!-- Fin Si cest un nouveau filleul -->
-
-    <!-- Si cest un filleul existant -->
-    <div *ngIf="true">
-
-      <p>{{filleulSelect}}</p>
-      <div class="md-form">
-        <i class="fa fa-user prefix grey-text"></i>
-        <input
-          #queryF
-          (keyup)="filter(queryF.value)"
-          type="text" class="form-control" placeholder="Cherchez Filleul Existants...">
-        <div *ngFor="let filleul of filteredFilleulsTest">
-          <a (click)="getIdFilleul(filleul.uid)">{{filleul.firstname}} {{filleul.familyname}}</a>
-          <p>
-            Carte ID:
-            {{filleul?.idCard}}
-          </p>
+<div class="container">
+  <div class="col-md-12" id="scanPart1">
+    <div class="card">
+      <div class="card-block">
+        <p class="h5 text-center mb-4">Scanner Carte</p>
+        <!--<p class="text-center mb-4" style="padding-top: 2%;">Choisissez quelle type de fieulle voulez-vous scanner la carte</p>
+        <form class="form-inline flex-center">
+          <div class="md-form" style="padding-left: 2%;">
+            <input name="group2" type="radio" class="with-gap" id="Newfilleul" value="Newfilleul"  (click)="initFilSelect()" [(ngModel)]="radioFilleul">
+            <label for="Newfilleul">Nouveau Filleul</label>
+          </div>
+          <div class="md-form" style="padding-left: 2%;">
+            <input name="group2" type="radio" class="with-gap" id="FilleulExist" value ="FilleulExist" (click)="initFilSelect()" [(ngModel)]="radioFilleul">
+            <label for="FilleulExist">Filleul Existant</label>
+          </div>
+        </form>
+         Si cest un nouveau filleul
+        <div *ngIf="radioFilleul === 'Newfilleul'">
+          <div class="md-form">
+            <i class="fa fa-address-card prefix grey-text"></i>
+            <input type="text" id="orangeForm-Familyname" [(ngModel)]="filleul.idCard" placeholder="ID carte">
+          </div>
+          <div class="md-form">
+            <i class="fa fa-user prefix grey-text"></i>
+            <input type="text" id="orangeForm-Familyname" [(ngModel)]="filleul.familyname" placeholder="Family name">
+          </div>
+          <div class="md-form">
+            <i class="fa fa-user prefix grey-text"></i>
+            <input type="text" id="orangeForm-Firstname" [(ngModel)]="filleul.firstname" placeholder="Firstname">
+          </div>
+          <form class="form-inline">
+            <div class="md-form">
+              <i class="fa fa-venus-mars prefix grey-text"></i>
+              <input name="group3" type="radio" class="with-gap" id="homme" value="Homme" [(ngModel)]="filleul.sex">
+              <label for="homme">Homme</label>
+            </div>
+            <div class="md-form" style="padding-left: 2%;">
+              <input name="group3" type="radio" class="with-gap" id="femme" value="Femme" [(ngModel)]="filleul.sex">
+              <label for="femme">Femme</label>
+            </div>
+          </form>
+          <div class="md-form">
+            <i class="fa fa-birthday-cake prefix grey-text"></i>
+            <input type="date" id="orangeForm-Birthday" [(ngModel)]="filleul.birthday" placeholder="Birthday">
+          </div>
+          <div class="md-form">
+            <i class="fa fa-envelope prefix grey-text"></i>
+            <input type="email" id="orangeForm-email" [(ngModel)]="filleul.email" placeholder="Email" name="email" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #email="ngModel">
+            <div *ngIf="email.errors && email.errors.pattern && (email.dirty || email.touched)"  class="alert alert-danger">
+              Email is required and format should be <strong><i>john@filleul.fr</i></strong>.
+            </div>
+          </div>
+          <label>
+            En cliquant sur Créer un compte, vous acceptez nos Conditions
+            et indiquez que vous aves lu notre Politique d'utilisation des
+            données, y compris notre Utilisation des cookies.
+          </label>
+          <div class="text-center" style="margin-top:5%">
+            <button class="btn btn-light-green waves-light" [disabled]="email.errors" (click)="registerNewFilleul()">Creer nouveau filleul & scanner carte</button>
+            <button class="btn btn-cyan" (click)="goToOpComm()">Back</button>
+          </div>
+        </div>-->
+        <!-- Fin Si cest un nouveau filleul -->
+
+        <!-- Si cest un filleul existant -->
+        <div *ngIf="true">
+
+          <p>{{filleulSelect}}</p>
+          <div class="md-form">
+            <i class="fa fa-user prefix grey-text"></i>
+            <input
+              #queryF
+              (keyup)="filter(queryF.value)"
+              type="text" class="form-control" placeholder="Cherchez Filleul Existants...">
+            <div *ngFor="let filleul of filteredFilleulsTest">
+              <a (click)="getIdFilleul(filleul.uid)">{{filleul.firstname}} {{filleul.familyname}}</a>
+              <p>
+                Carte ID:
+                {{filleul?.idCard}}
+              </p>
+            </div>
+          </div>
+
+          <div class="md-form">
+            <i class="fa fa-address-card prefix grey-text"></i>
+            <input
+              #query
+              (keyup)="filterCarte(query.value)"
+              type="text" class="form-control" placeholder="ID carte">
+            <!--<input type="text" id="orangeForm-Familyname" placeholder="ID carte" [(ngModel)]="carteIDTemp">[(ngModel)]="filleul.idCard"-->
+          </div>
+
+          <label>
+            En cliquant sur Créer un compte, vous acceptez nos Conditions
+            et indiquez que vous aves lu notre Politique d'utilisation des
+            données, y compris notre Utilisation des cookies.
+          </label>
+          <div class="text-center" style="margin-top:5%">
+            <button class="btn btn-light-green waves-light" [disabled]="filleulSelect === ''" (click)="scanCarteFil()">Scanner Carte du filleul</button>
+            <button class="btn btn-cyan" (click)="goToOpComm()">Back</button>
+          </div>
         </div>
+        <!-- Fin Si cest un filleul existant -->
       </div>
+    </div>
+  </div>
 
-      <div class="md-form">
-        <i class="fa fa-address-card prefix grey-text"></i>
-        <input
-          #query
-          (keyup)="filterCarte(query.value)"
-          type="text" class="form-control" placeholder="ID carte">
-        <!--<input type="text" id="orangeForm-Familyname" placeholder="ID carte" [(ngModel)]="carteIDTemp">[(ngModel)]="filleul.idCard"-->
-      </div>
+  <hr>
+
+  <div class="card col-md-12" id="scanPart2">
+    <h4 class="h5 text-center mb-4">Liste de vos scans</h4>
+    <div class="row">
+      <!--Grid column-->
+      <!--*ngFor="let scan of scanList | async"-->
+      <div class="col-lg-4 col-md-6">
+
+        <!--Card-->
+        <div class="card card-cascade wider">
+
+          <!--Card image-->
+          <div class="view gradient-card-header blue-gradient">
+            <h2 class="h3-responsive mb-2">Title of the news</h2>
+            <p class=""><i class="fa fa-calendar"></i> 26.07.2017</p>
+
+          </div>
+          <!--/Card image-->
+
+          <!--Card content-->
+          <div class="card-body text-center">
+
+            <p class="card-text mr-2 ml-2">espace text 1</p>
+            <p class="card-text mr-2 ml-2">espace text 2</p>
+            <p class="card-text mr-2 ml-2">espace text 2</p>
+
+          </div>
+          <!--/.Card content-->
+
+        </div>
+        <!--/.Card-->
 
-      <label>
-        En cliquant sur Créer un compte, vous acceptez nos Conditions
-        et indiquez que vous aves lu notre Politique d'utilisation des
-        données, y compris notre Utilisation des cookies.
-      </label>
-      <div class="text-center" style="margin-top:5%">
-        <button class="btn btn-light-green waves-light" [disabled]="filleulSelect === ''" (click)="scanCarteFil()">Scanner Carte du filleul</button>
-        <button class="btn btn-cyan" (click)="goToOpComm()">Back</button>
       </div>
     </div>
-    <!-- Fin Si cest un filleul existant -->
-  </div>
 
-</div>
+  </div>
 </div>
diff --git a/src/app/components/opCommercial/scanner-carte/scanner-carte.component.scss b/src/app/components/opCommercial/scanner-carte/scanner-carte.component.scss
index aacf573..f70de70 100644
--- a/src/app/components/opCommercial/scanner-carte/scanner-carte.component.scss
+++ b/src/app/components/opCommercial/scanner-carte/scanner-carte.component.scss
@@ -1,3 +1,16 @@
+.container {
+  padding-top: 10%;
+}
 .card {
   padding: 5%;
 }
+
+#scanPart1 {
+  padding-bottom: 5%;
+  height: 50%;
+}
+
+#scanPart2 {
+  margin-top: 5%;
+  height: 50%;
+}