diff --git a/front-end/src/components/ButtonCustom.vue b/front-end/src/components/ButtonCustom.vue
new file mode 100644
index 0000000..3f2172a
--- /dev/null
+++ b/front-end/src/components/ButtonCustom.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="button-container">
+        <button class="button-52" role="button">{{text}}</button>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    text: String,
+})
+</script>
+<style>
+.button-52 {
+  user-select: none;
+  font-family: 'Fira Sans';
+  font-size: 16px;
+  font-weight: bold;
+  color: #2D4570;
+  letter-spacing: 1px;
+  padding: 13px 20px 13px;
+  outline: 0;
+  border: 1px solid #F1F5F5;
+  cursor: pointer;
+  position: relative;
+  background-color: rgba(0, 0, 0, 0);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+.button-52:after {
+  content: "";
+  background-color: #ffe54c;
+  width: 100%;
+  z-index: -1;
+  position: absolute;
+  height: 100%;
+  top: 7px;
+  left: 7px;
+  transition: 0.2s;
+}
+
+.button-52:hover:after {
+  top: 0px;
+  left: 0px;
+}
+
+@media (min-width: 768px) {
+  .button-52 {
+    padding: 13px 50px 13px;
+  }
+}
+</style>
+
+
diff --git a/front-end/src/components/Entry.vue b/front-end/src/components/Entry.vue
new file mode 100644
index 0000000..0ff3ad3
--- /dev/null
+++ b/front-end/src/components/Entry.vue
@@ -0,0 +1,80 @@
+<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>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    height: Number,
+    width: Number,
+    type: String,
+    placeholder: String,
+    required: Boolean,
+
+})
+</script>
+
+<style>
+
+.form__group {
+  position: relative;
+  padding: 15px 0 0;
+  margin-top: 10px;
+  width: 50%;
+}
+
+.form__field {
+  font-family: inherit;
+  width: 100%;
+  border: 0;
+  border-bottom: 2px solid #F1F5F5;
+  outline: 0;
+  font-size: 1.3rem;
+  color: #F1F5F5;
+  padding: 7px 0;
+  background: transparent;
+  transition: border-color 0.2s;
+
+  &::placeholder {
+    color: transparent;
+  }
+
+  &:placeholder-shown ~ .form__label {
+    font-size: 1.3rem;
+    cursor: text;
+    top: 20px;
+  }
+}
+
+.form__label {
+  position: absolute;
+  top: 0;
+  display: block;
+  transition: 0.2s;
+  font-size: 1rem;
+  color: #F1F5F5;
+}
+
+.form__field:focus {
+  ~ .form__label {
+    position: absolute;
+    top: 0;
+    display: block;
+    transition: 0.2s;
+    font-size: 1rem;
+    color: #F1F5F5;
+    font-weight:700;    
+  }
+  padding-bottom: 6px;  
+  font-weight: 700;
+  border-width: 3px;
+  border-image: linear-gradient(to right, #F1F5F5,#F1F5F5);
+  border-image-slice: 1;
+}
+/* reset input */
+.form__field{
+  &:required,&:invalid { box-shadow:none; }
+}
+</style>
\ No newline at end of file
diff --git a/front-end/src/components/NavBar.vue b/front-end/src/components/NavBar.vue
index 5232f7c..1c5142d 100644
--- a/front-end/src/components/NavBar.vue
+++ b/front-end/src/components/NavBar.vue
@@ -23,20 +23,24 @@
         </span>
         <span class="material-icons">arrow_drop_down</span>
       </li>
-      <ul v-show="showClient" class="ul-nav">
-          <li>
-            <span class="nav-left">
-            <span class="material-icons">person_add</span>
-            <span>Nouveau</span>
-            </span>
-          </li>
-          <li>
-            <span class="nav-left">
-            <span class="material-icons">list</span>
-            <span>Liste</span>
-            </span>
-          </li>
-        </ul>
+        <transition name="slide">
+        <ul v-show="showClient" class="ul-nav submenu">
+            <li>
+              <span class="nav-left">
+              <RouterLink class="li-solo" to="/addclient">
+              <span class="material-icons">person_add</span>
+              <span>Nouveau</span>
+              </RouterLink>
+              </span>
+            </li>
+            <li>
+              <span class="nav-left">
+              <span class="material-icons">list</span>
+              <span>Liste</span>
+              </span>
+            </li>
+          </ul>
+        </transition>
     </ul>
 
     <ul class="ul-nav">
@@ -47,23 +51,25 @@
         </span>
         <span class="material-icons">arrow_drop_down</span>
       </li>
-      <ul v-show="showTicket" class="ul-nav">
+        <transition name="slide">
+        <ul v-show="showTicket" class="ul-nav submenu">
         
-        <li>
-          <span class="nav-left">
-          <RouterLink class="li-solo" to="/ticket">
-            <span class="material-icons">add</span>
-            <span>Nouveau</span>
-            </RouterLink>
-            </span>
-          </li>  
           <li>
             <span class="nav-left">
-            <span class="material-icons">list</span>
-            <span>Liste</span>
-            </span>
-          </li>
-        </ul>
+            <RouterLink class="li-solo" to="/ticket">
+              <span class="material-icons">add</span>
+              <span>Nouveau</span>
+              </RouterLink>
+              </span>
+            </li>  
+            <li>
+              <span class="nav-left">
+              <span class="material-icons">list</span>
+              <span>Liste</span>
+              </span>
+            </li>
+          </ul>
+        </transition>
     </ul>
 
     <ul class="ul-nav">
@@ -74,20 +80,22 @@
        </span>
        <span class="material-icons">arrow_drop_down</span>
       </li>
-      <ul v-show="showIntervention" class="ul-nav ">
-          <li>
-            <span class="nav-left">
-            <span class="material-icons">calendar_month</span>
-            <span>Calendrier</span>
-            </span>
-          </li>
-          <li>
-            <span class="nav-left">
-            <span class="material-icons">list</span>
-            <span>Liste</span> 
-            </span>
-          </li>
-        </ul>
+        <transition name="slide">
+        <ul v-show="showIntervention" class="ul-nav submenu">
+            <li>
+              <span class="nav-left">
+              <span class="material-icons">calendar_month</span>
+              <span>Calendrier</span>
+              </span>
+            </li>
+            <li>
+              <span class="nav-left">
+              <span class="material-icons">list</span>
+              <span>Liste</span> 
+              </span>
+            </li>
+          </ul>
+        </transition>
     </ul>
   </div>
 </template>
@@ -166,7 +174,7 @@ const toggleCLient = () => {
 .nav-left::after{
   content:'';
   position:absolute;
-  left:0;right:0;bottom:0;
+  left:0;right:0;bottom:-4px;
   height:2px;
   background:#2D4570;
   transform-origin:0 50%;
@@ -177,6 +185,22 @@ const toggleCLient = () => {
 
 .ul-nav > li:visited { color: inherit }
 
+/* Submenu slide animation (v-show + <transition name="slide">) */
+.submenu{
+  overflow: hidden; /* required for max-height animation */
+}
+.slide-enter-from, .slide-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+.slide-enter-to, .slide-leave-from {
+  max-height: 400px; /* enough to contain submenu items */
+  opacity: 1;
+}
+.slide-enter-active, .slide-leave-active {
+  transition: max-height .28s ease, opacity .18s ease;
+}
+
 /* If you prefer the underline only on the link element (RouterLink),
    uncomment the following instead and comment the rule above:
 .li-solo:hover { border-bottom: 2px solid #2D4570; }
diff --git a/front-end/src/components/checkbox.vue b/front-end/src/components/checkbox.vue
new file mode 100644
index 0000000..f9d535b
--- /dev/null
+++ b/front-end/src/components/checkbox.vue
@@ -0,0 +1,97 @@
+<template>
+    <div class="checkbox-wrapper-43">
+    <input type="checkbox" :id="id">
+    <label :for="id" class="check">
+        <svg width="18px" height="18px" viewBox="0 0 18 18">
+        <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+        <polyline points="1 9 7 14 15 4"></polyline>
+        </svg>
+        
+    </label>
+    <label class="checkbox-text">{{text}}</label>
+</div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    text: String,
+    id: String,
+})
+</script>
+<style>
+
+  .checkbox-wrapper-43 input[type="checkbox"] {
+    display: none;
+    visibility: hidden;
+  }
+
+  .checkbox-wrapper-43 label {
+    display: inline-block;
+  }
+
+  .checkbox-wrapper-43 .check {
+    cursor: pointer;
+    position: relative;
+    margin: auto;
+    width: 18px;
+    height: 18px;
+    -webkit-tap-highlight-color: transparent;
+    transform: translate3d(0, 0, 0);
+  }
+  .checkbox-wrapper-43 .check:before {
+    content: "";
+    position: absolute;
+    top: -15px;
+    left: -15px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: rgba(34,50,84,0.03);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+  .checkbox-wrapper-43 .check svg {
+    position: relative;
+    z-index: 1;
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: #F1F5F5;
+    stroke-width: 1.5;
+    transform: translate3d(0, 0, 0);
+    transition: all 0.2s ease;
+  }
+  .checkbox-wrapper-43 .check svg path {
+    stroke-dasharray: 60;
+    stroke-dashoffset: 0;
+  }
+  .checkbox-wrapper-43 .check svg polyline {
+    stroke-dasharray: 22;
+    stroke-dashoffset: 66;
+  }
+  .checkbox-wrapper-43 .check:hover:before {
+    opacity: 1;
+  }
+  .checkbox-wrapper-43 .check:hover svg {
+    stroke: #F0CF61;
+  }
+  .checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg {
+    stroke: #F0CF61;
+  }
+  .checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg path {
+    stroke-dashoffset: 60;
+    transition: all 0.3s linear;
+  }
+  .checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg polyline {
+    stroke-dashoffset: 42;
+    transition: all 0.2s linear;
+    transition-delay: 0.15s;
+  }
+  .checkbox-text{
+    margin-left:10px;
+    font-size:16px;
+    color:#F1F5F5;
+  }
+</style>
+
+
diff --git a/front-end/src/routes.ts b/front-end/src/routes.ts
index e5fe035..e09476b 100644
--- a/front-end/src/routes.ts
+++ b/front-end/src/routes.ts
@@ -1,7 +1,12 @@
+import AddClient from './vue/AddClient.vue'
 import Dashboard from './vue/Dashboard.vue'
 import Ticket from './vue/ticket.vue'
+import Page404 from './vue/Page404.vue'
 
 export const routes = [
     {path: '/', component: Dashboard},
     {path: '/ticket', component: Ticket},
+    {path: '/ticket/:id', component: Ticket},
+    {path: '/addclient', component: AddClient},
+    {path: '/:pathMatch(.*)*', component: Page404}
 ]
\ No newline at end of file
diff --git a/front-end/src/vue/AddClient.vue b/front-end/src/vue/AddClient.vue
new file mode 100644
index 0000000..0eac1a2
--- /dev/null
+++ b/front-end/src/vue/AddClient.vue
@@ -0,0 +1,87 @@
+<template>
+    <div class="container-add-client">
+        <div class="container-form-add-client">
+            <form action="" method="">
+                <div class="container-form-input">
+                    <div class="left-form-client">
+                        <div class="container-form-add-client-entry">
+                            <Entry height="3" width="15" type="text" placeholder="Nom du client" required="true"></Entry>
+                        </div>
+                        <div class="container-form-add-client-entry">
+                            <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>
+                        </div>
+                        <div class="container-form-add-client-entry">
+                            <Checkbox text="Client VIP" id="vip"></Checkbox>
+                        </div>
+                    </div>
+                    <div class="right-form-client">
+                        <div class="container-form-add-client-entry">
+                            <Entry height="3" width="15" type="text" placeholder="Adresse" required="true"></Entry>
+                        </div>
+                        <div class="container-form-add-client-entry">
+                            <Entry height="3" width="15" type="text" placeholder="Ville" required="true"></Entry>
+                        </div>
+                        <div class="container-form-add-client-entry">
+                            <Entry height="3" width="15" type="text" placeholder="Code postal" required="true"></Entry>
+                        </div>
+                        <div class="container-form-add-client-entry">
+                            <Checkbox text="Prospect" id="prospect"></Checkbox>
+                        </div>
+                    </div>
+                </div>
+                <ButtonCustom class="btn" text="AJOUTER"/>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Entry from '@/components/Entry.vue';
+import ButtonCustom from '@/components/ButtonCustom.vue';
+import Checkbox from '@/components/checkbox.vue';
+
+    
+</script>
+
+<style>
+.container-add-client {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+.container-form-add-client {
+    height: 80%;
+    width: 60%;
+    z-index: 0;
+    background-color: #2D4570;
+    border: 2px solid #2D4570;
+    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);
+}
+.container-form-input {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 5vh;
+}
+.container-form-add-client-entry{
+    margin-bottom: 5vh;
+}
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    height: 100%;
+    width: 100%;
+}
+form > .btn {
+    display: flex;
+    justify-content: center;
+    margin-top: 10vh;
+}
+</style>
\ No newline at end of file
diff --git a/front-end/src/vue/Page404.vue b/front-end/src/vue/Page404.vue
new file mode 100644
index 0000000..cbce682
--- /dev/null
+++ b/front-end/src/vue/Page404.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="container-404">
+        404 not found
+    </div>
+</template>
+
+<script setup lang="ts">
+    
+</script>
+
+<style>
+
+</style>
\ No newline at end of file