diff --git a/src/app/components/admin/demande-op-commercial/demande-op-commercial.component.html b/src/app/components/admin/demande-op-commercial/demande-op-commercial.component.html
index c4cfadf..d11793d 100644
--- a/src/app/components/admin/demande-op-commercial/demande-op-commercial.component.html
+++ b/src/app/components/admin/demande-op-commercial/demande-op-commercial.component.html
@@ -21,8 +21,8 @@
             </div>
           </div>
           <div class="col-md-6 card subCard2">
-            <div class="card-block row no-margin">
-              <div class="col-md-8" id="subCard2Part1">
+            <div class="card-block no-margin">
+              <div class="col-md-12 col-sm-12" id="subCard2Part1">
                 <div class="md-form">
                   <input mdbActive type="number" id="form1" class="form-control" step="any" [(ngModel)]="tarifXJCParr" name="tarifXJCPar" #tarifXJCPar="ngModel">
                   <label for="form1" class="">Tarif XJC</label>
@@ -36,7 +36,7 @@
                   <label>Avantage filleul: {{op.avantageFilleul === ''? '0' : op.avantageFilleul}} €</label>
                 </div>
               </div>
-              <div class="col-md-2" id="subCard2Part2">
+              <div class="btn-block d-flex flex-lg-row flex-md-column flex-sm-row" id="subCard2Part2">
                 <button type="button" class="btn btn-success btn-rounded waves-light" mdbRippleRadius [disabled]="tarifXJCParr < 0" (click)="valider(op)">Valider</button>
                 <button type="button" class="btn btn-danger btn-rounded waves-light" mdbRippleRadius (click)="rejeter(op)">Rejeter</button>
               </div>
@@ -86,8 +86,8 @@
             </div>
           </div>
           <div class="col-md-6 card subCard2">
-            <div class="card-block row no-margin">
-              <div class="col-md-8" id="subCard2Part1">
+            <div class="card-block no-margin">
+              <div class="col-md-12 col-sm-12" id="subCard2Part1">
                 <div class="md-form">
                   <input mdbActive type="number" id="form1" class="form-control" step="any" [(ngModel)]="tarifXJCParr" name="tarifXJCPar" #tarifXJCPar="ngModel">
                   <label for="form1" class="">Tarif XJC</label>
@@ -105,7 +105,7 @@
                   <label>Carte(s) débitée(s): {{op.nbDebiter=== ''? '0' : op.nbDebiter}}</label>
                 </div>
               </div>
-              <div class="col-md-2" id="subCard2Part2">
+              <div class="btn-block d-flex flex-lg-row flex-md-column flex-sm-row" id="subCard2Part2">
                 <button class="btn btn-success btn-rounded waves-light" [disabled]="tarifXJCParr <= 0" (click)="valider(op)">Valider</button>
               </div>
             </div>
diff --git a/src/app/components/admin/list-carte-envoyer/list-carte-envoyer.component.html b/src/app/components/admin/list-carte-envoyer/list-carte-envoyer.component.html
index 8b035f3..e31f1be 100644
--- a/src/app/components/admin/list-carte-envoyer/list-carte-envoyer.component.html
+++ b/src/app/components/admin/list-carte-envoyer/list-carte-envoyer.component.html
@@ -20,7 +20,7 @@
           </div>
         </div>
         <div class="col-md-6 card subCard2">
-          <div class="card-block row no-margin">
+          <div class="card-block no-margin">
             <div class="col-md-12" id="subCard2Part1">
               <div id="opTitle">
                 <label>Operation Commerciale: {{opComm?.name}}</label>
@@ -84,12 +84,12 @@
           </div>-->
           <div class="col-md-6 card subCard2issu">
             <div class="row">
-              <div class="col-md-7">
+              <div class="col-md-12 col-sm-12">
                 <label>ID de la carte: {{crt.uid}}</label>
                 <label>Avantage Cumule: {{crt.avantageCumule === ''? '0' : crt.avantageCumule}} €</label>
                 <label>Avantage Recuperer: {{crt.avantageRecuperer === ''? '0' : crt.avantageRecuperer}} €</label>
               </div>
-              <div class="col-md-2">
+              <div class="btn-block d-flex flex-row">
                 <button class="btn btn-outline-primary btn-rounded" (click)="hideme[i] = !hideme[i]">{{show ? 'Cacher Détails' : 'Détails'}}</button>
               </div>
             </div>
diff --git a/src/app/components/admin/liste-op-commercial/liste-op-commercial.component.html b/src/app/components/admin/liste-op-commercial/liste-op-commercial.component.html
index 1e7d221..e53ff88 100644
--- a/src/app/components/admin/liste-op-commercial/liste-op-commercial.component.html
+++ b/src/app/components/admin/liste-op-commercial/liste-op-commercial.component.html
@@ -38,8 +38,8 @@
             </div>
           </div>
           <div class="col-md-6 card subCard2">
-            <div class="card-block row no-margin">
-              <div class="col-md-8" id="subCard2Part1">
+            <div class="card-block no-margin">
+              <div class="col-md-12 col-sm-12" id="subCard2Part1">
                 <div id="opTitle">
                   <label>Tarif XJC: {{op.tarifXJCParrain=== ''? '0' : op.tarifXJCParrain}} €</label>
                   <label>Operation Commerciale: {{op.name}}</label>
@@ -55,7 +55,7 @@
                   <label>Carte(s) débitée(s): {{op.nbDebiter}}</label>
                 </div>
               </div>
-              <div class="col-md-2" id="subCard2Part2">
+              <div class="btn-block d-flex flex-lg-row flex-md-column flex-sm-row" id="subCard2Part2">
                 <button class="btn btn-outline-default btn-rounded" (click)="bloquer(op.uid)">Bloquer</button>
                 <button class="btn btn-outline-info btn-rounded" (click)="goToCarteEnvoyer(op.uid)">Cartes</button>
                 <button class="btn btn-outline-info btn-rounded" (click)="goToScanEffectuer(op.uid)">Scans</button>
@@ -114,8 +114,8 @@
             </div>
           </div>
           <div class="col-md-6 card subCard2">
-            <div class="card-block row no-margin">
-              <div class="col-md-8" id="subCard2Part1">
+            <div class="card-block no-margin">
+              <div class="col-md-12" id="subCard2Part1">
                 <div id="opTitle">
                   <label>Operation Commerciale: {{op.name}}</label>
                   <label>Commercant: {{op.commercantOpCom.commercialName}}</label>
@@ -130,7 +130,7 @@
                   <label>Carte(s) débitée(s): {{op.nbDebiter}}</label>
                 </div>
               </div>
-              <div class="col-md-2" id="subCard2Part2">
+              <div class="btn-block d-flex flex-lg-row flex-md-column flex-sm-row" id="subCard2Part2">
                 <button class="btn btn-outline-primary btn-rounded" (click)="debloquer(op)">Débloquer</button>
               </div>
             </div>
diff --git a/src/app/components/carteParrainage/carte-envoyer/carte-envoyer.component.html b/src/app/components/carteParrainage/carte-envoyer/carte-envoyer.component.html
index 921dd24..0a1fa45 100644
--- a/src/app/components/carteParrainage/carte-envoyer/carte-envoyer.component.html
+++ b/src/app/components/carteParrainage/carte-envoyer/carte-envoyer.component.html
@@ -28,7 +28,7 @@
             </div>-->
             <div class="col-md-6 card subCard2">
               <div class="card-block row no-margin">
-                <div class="col-md-8" id="subCard2Part1">
+                <div class="col-md-12" id="subCard2Part1">
                   <div id="opTitle">
                     <label>Operation Commerciale: {{crt.operationCommercialCarte.name}}</label>
                     <label>Parrain: {{crt.parrainCarte.familyname}} {{crt.parrainCarte.firstname}}</label>
@@ -39,7 +39,7 @@
                     <label>Avantage récupérer: {{crt.avantageRecuperer=== ''? '0' : crt.avantageRecuperer}} €</label>
                   </div>
                 </div>
-                <div class="col-md-2" id="subCard2Part2">
+                <div class="btn-block d-flex flex-lg-row flex-md-column flex-sm-row" id="subCard2Part2">
                   <button class="btn btn-outline-primary btn-rounded" (click)="hideme[i] = !hideme[i]">{{show ? 'Cacher Détails' : 'Détails'}}</button>
                   <!--<button class="btn btn-outline-info btn-rounded" (click)="sectionToImage(op.carteTemplate.downloadURL, commercant.image.downloadURL)">screenShot</button>-->
                 </div>
diff --git a/src/app/components/carteParrainage/carte-parrainage/carte-parrainage.component.html b/src/app/components/carteParrainage/carte-parrainage/carte-parrainage.component.html
index 2022740..414dc2f 100644
--- a/src/app/components/carteParrainage/carte-parrainage/carte-parrainage.component.html
+++ b/src/app/components/carteParrainage/carte-parrainage/carte-parrainage.component.html
@@ -17,13 +17,13 @@
       </div>
     </div>
   </div>
-  <div *ngIf="(carteParrData | async)?.length == 0"  class="alert alert-danger">
+  <div *ngIf="(carteParrData | async)?.length == 0"  class="alert alert-info">
     Cher,<strong><i> {{parrain.firstname}} </i></strong>
     <p>Le principe est simple :</p>
     <ul>
-      <li>- Reçoit tes cartes de parrainage ici</li>
-      <li>- Partage-les à tes amis via Facebook, Whatsapp, ect.</li>
-      <li>- Gagne de l'argent chaque fois qu'un de tes amis présente ta carte lors de ses achats</li>
+      <li> Reçoit tes cartes de parrainage ici</li>
+      <li> Partage-les à tes amis via Facebook, Whatsapp, ect.</li>
+      <li> Gagne de l'argent chaque fois qu'un de tes amis présente ta carte lors de ses achats</li>
     </ul>
     <p>N'attends plus, et rends toi vite chez un des commerçcant affiliés de ton choix pour obtenir ta </p>
     <p>carte de parrainage !</p>
@@ -50,7 +50,7 @@
               </div>
             </div>
           </div>-->
-          <div class="col-md-6 card subCard2">
+          <div class="col-md-12 card subCard2">
             <label>ID de la carte: {{crt.uid}}</label>
             <label>Avantage cumule: {{crt.avantageCumule === ''? '0' : crt.avantageCumule}} €</label>
             <label>Avantage recuperer: {{crt.avantageRecuperer  === ''? '0' : crt.avantageRecuperer}} €</label>
diff --git a/src/app/components/opCommercial/op-commercial/op-commercial.component.html b/src/app/components/opCommercial/op-commercial/op-commercial.component.html
index dc35096..23d346f 100644
--- a/src/app/components/opCommercial/op-commercial/op-commercial.component.html
+++ b/src/app/components/opCommercial/op-commercial/op-commercial.component.html
@@ -35,13 +35,13 @@
     </div>
   </div>
 
-  <div *ngIf="(opCommData | async)?.length == 0"  class="alert alert-danger">
+  <div *ngIf="(opCommData | async)?.length == 0"  class="alert alert-info">
     Cher,<strong><i> {{commercant.commercialName}} </i></strong>
     <p>Le principe est simple :</p>
     <ul>
-      <li>- Crées tes opérations commerciales ici</li>
-      <li>- Envoie-les à tes clients, ils deviendront tes parrains affiliés</li>
-      <li>- Gagne des clients à chaque fois qu'un de tes parrains envoie sa carte à ses amis</li>
+      <li> Crées tes opérations commerciales ici</li>
+      <li> Envoie-les à tes clients, ils deviendront tes parrains affiliés</li>
+      <li> Gagne des clients à chaque fois qu'un de tes parrains envoie sa carte à ses amis</li>
     </ul>
     <p>N'attends plus, crées tes opérations commerciale et envoie les aux futurs parrains affiliés de ton choix !</p>
   </div>
@@ -63,8 +63,8 @@
             </div>
           </div>
           <div class="col-md-6 card subCard2">
-            <div class="card-block row no-margin">
-              <div class="col-md-8 col-sm-6" id="subCard2Part1">
+            <div class="card-block no-margin">
+              <div class="col-md-12 col-sm-12" id="subCard2Part1">
                 <div id="opTitle">
                   <label>Operation Commerciale : {{op.name}}</label>
                 </div>
@@ -79,7 +79,7 @@
                   <label>Carte(s) débitée(s): {{op.nbDebiter === ''? '0' : op.nbDebiter}}</label>
                 </div>
               </div>
-              <div class="col-md-2" id="subCard2Part2">
+              <div class="btn-block d-flex flex-lg-row flex-md-column flex-sm-row" id="subCard2Part2">
                 <button class="btn btn-outline-primary btn-rounded" [disabled]="(op.validationXJC === 'En Cours') || (op.validationXJC === 'Rejeté') || (op.status === 'Bloqué') || (op.status === 'Inactive')" (click)="goToEnCart(op.uid)">Envoyer</button>
                 <button class="btn btn-outline-default btn-rounded" [disabled]="(op.validationXJC === 'En Cours') || (op.validationXJC === 'Rejeté') || (op.status === 'Bloqué') || (op.status === 'Inactive')" (click)="goToScanCart(op.uid)">Scanner</button>
                 <button class="btn btn-outline-info btn-rounded" [disabled]="(op.validationXJC === 'En Cours') || (op.validationXJC === 'Rejeté')" (click)="goToDebiterCart(op.uid)">Débiter</button>