diff --git a/front-end/src/components/ButtonCustom.vue b/front-end/src/components/ButtonCustom.vue
index 3f2172a..301c3b2 100644
--- a/front-end/src/components/ButtonCustom.vue
+++ b/front-end/src/components/ButtonCustom.vue
@@ -19,7 +19,7 @@ defineProps({
   letter-spacing: 1px;
   padding: 13px 20px 13px;
   outline: 0;
-  border: 1px solid #F1F5F5;
+  border: 1px solid #2D4570;
   cursor: pointer;
   position: relative;
   background-color: rgba(0, 0, 0, 0);
@@ -30,7 +30,7 @@ defineProps({
 
 .button-52:after {
   content: "";
-  background-color: #ffe54c;
+  background-color: #F0CF61;
   width: 100%;
   z-index: -1;
   position: absolute;
diff --git a/front-end/src/components/Entry.vue b/front-end/src/components/Entry.vue
index 0ff3ad3..186c410 100644
--- a/front-end/src/components/Entry.vue
+++ b/front-end/src/components/Entry.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="form__group field">
-        <input class="form__field" :type="type" :placeholder="placeholder" :style="{height: height + 'vh', width: width + 'vw'} " name="name" id="name" :required="required" />
-        <label for="name" class="form__label">{{placeholder}}</label>
+        <input class="form__field" :type="type" :placeholder="placeholder" :style="{height: height + 'vh', width: width + 'vw'} " :name="'name' + placeholder" id="name" :required="required" />
+        <label :for="'name' + placeholder" class="form__label">{{placeholder}}</label>
     </div>
 </template>
 
@@ -29,10 +29,10 @@ defineProps({
   font-family: inherit;
   width: 100%;
   border: 0;
-  border-bottom: 2px solid #F1F5F5;
+  border-bottom: 2px solid #2D4570;
   outline: 0;
   font-size: 1.3rem;
-  color: #F1F5F5;
+  color: #2D4570;
   padding: 7px 0;
   background: transparent;
   transition: border-color 0.2s;
@@ -54,7 +54,7 @@ defineProps({
   display: block;
   transition: 0.2s;
   font-size: 1rem;
-  color: #F1F5F5;
+  color: #2D4570;
 }
 
 .form__field:focus {
@@ -64,13 +64,13 @@ defineProps({
     display: block;
     transition: 0.2s;
     font-size: 1rem;
-    color: #F1F5F5;
+    color: #2D4570;
     font-weight:700;    
   }
   padding-bottom: 6px;  
   font-weight: 700;
   border-width: 3px;
-  border-image: linear-gradient(to right, #F1F5F5,#F1F5F5);
+  border-image: linear-gradient(to right, #2D4570,#2D4570);
   border-image-slice: 1;
 }
 /* reset input */
diff --git a/front-end/src/components/NavBar.vue b/front-end/src/components/NavBar.vue
index 1c5142d..dbd41c3 100644
--- a/front-end/src/components/NavBar.vue
+++ b/front-end/src/components/NavBar.vue
@@ -26,12 +26,12 @@
         <transition name="slide">
         <ul v-show="showClient" class="ul-nav submenu">
             <li>
-              <span class="nav-left">
               <RouterLink class="li-solo" to="/addclient">
+              <span class="nav-left">              
               <span class="material-icons">person_add</span>
               <span>Nouveau</span>
-              </RouterLink>
               </span>
+              </RouterLink>
             </li>
             <li>
               <span class="nav-left">
@@ -55,12 +55,12 @@
         <ul v-show="showTicket" class="ul-nav submenu">
         
           <li>
-            <span class="nav-left">
             <RouterLink class="li-solo" to="/ticket">
+            <span class="nav-left">
               <span class="material-icons">add</span>
-              <span>Nouveau</span>
-              </RouterLink>
+              <span>Nouveau</span>              
               </span>
+              </RouterLink>
             </li>  
             <li>
               <span class="nav-left">
diff --git a/front-end/src/components/checkbox.vue b/front-end/src/components/checkbox.vue
index f9d535b..91e2de4 100644
--- a/front-end/src/components/checkbox.vue
+++ b/front-end/src/components/checkbox.vue
@@ -41,12 +41,12 @@ defineProps({
   .checkbox-wrapper-43 .check:before {
     content: "";
     position: absolute;
-    top: -15px;
-    left: -15px;
-    width: 48px;
-    height: 48px;
+    top: -7px;
+    left: -7px;
+    width: 32px;
+    height: 32px;
     border-radius: 50%;
-    background: rgba(34,50,84,0.03);
+    background: #2d447034;
     opacity: 0;
     transition: opacity 0.2s ease;
   }
@@ -56,7 +56,7 @@ defineProps({
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;
-    stroke: #F1F5F5;
+    stroke: #2D4570;
     stroke-width: 1.5;
     transform: translate3d(0, 0, 0);
     transition: all 0.2s ease;
@@ -73,10 +73,10 @@ defineProps({
     opacity: 1;
   }
   .checkbox-wrapper-43 .check:hover svg {
-    stroke: #F0CF61;
+    stroke: #2D4570;
   }
   .checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg {
-    stroke: #F0CF61;
+    stroke: #2D4570;
   }
   .checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg path {
     stroke-dashoffset: 60;
@@ -90,7 +90,7 @@ defineProps({
   .checkbox-text{
     margin-left:10px;
     font-size:16px;
-    color:#F1F5F5;
+    color:#2D4570;
   }
 </style>
 
diff --git a/front-end/src/vue/AddClient.vue b/front-end/src/vue/AddClient.vue
index 0eac1a2..f277048 100644
--- a/front-end/src/vue/AddClient.vue
+++ b/front-end/src/vue/AddClient.vue
@@ -11,11 +11,14 @@
                             <Entry height="3" width="15" type="email" placeholder="Adresse mail" required="true"></Entry>
                         </div>
                         <div class="container-form-add-client-entry">
-                            <Entry height="3" width="15" type="text" placeholder="téléphone" required="true"></Entry>
+                            <Entry height="3" width="15" type="text" placeholder="Téléphone" required="true"></Entry>
                         </div>
                         <div class="container-form-add-client-entry">
                             <Checkbox text="Client VIP" id="vip"></Checkbox>
                         </div>
+                    </div>
+                    <div class="sperator-form-add-client">
+
                     </div>
                     <div class="right-form-client">
                         <div class="container-form-add-client-entry">
@@ -47,6 +50,9 @@ import Checkbox from '@/components/checkbox.vue';
 </script>
 
 <style>
+.sperator-form-add-client{
+    border-right: 2px solid #2D4570;
+}
 .container-add-client {
     display: flex;
     justify-content: center;
@@ -58,8 +64,8 @@ import Checkbox from '@/components/checkbox.vue';
     height: 80%;
     width: 60%;
     z-index: 0;
-    background-color: #2D4570;
-    border: 2px solid #2D4570;
+    background-color: #FFFFFF;
+    border: 2px solid #FFFFFF;
     border-radius: 10px;
     -webkit-box-shadow: -3px 10px 11px -4px rgba(0,0,0,0.42); 
     box-shadow: -3px 10px 11px -4px rgba(0,0,0,0.42);