diff --git a/components/Gestion/CategoryForm.vue b/components/Gestion/CategoryForm.vue
index 7f8927a..2cd915d 100644
--- a/components/Gestion/CategoryForm.vue
+++ b/components/Gestion/CategoryForm.vue
@@ -3,18 +3,15 @@
     <h1>{{title}}</h1>
 
     <ValidationObserver ref="observer" tag="form" @submit.prevent="validateBeforeSubmit">
-      <ValidationProvider tag="label"
-                          name="catégorie"
-                          rules="required|min:3|max:100"
-                          v-slot="{ errors }">
+      <TextInput tag="label"
+                 name="catégorie"
+                 v-model="form.title"
+                 placeholder="Entrez le nom de la catégorie"
+                 rules="required|min:3|max:100">
             <span class="label__name">
               Nom *
             </span>
-        <input id="Title" placeholder="Entrez le nom de la catégorie" name="title" v-model="form.title"
-               class="input--grey" type="text">
-        <span class="error-message">{{errors[0]}}</span>
-      </ValidationProvider>
-
+      </TextInput>
     </ValidationObserver>
 
     <p class="disclaimer">* champs obligatoires</p>
@@ -31,15 +28,16 @@
 <script lang="ts">
 
   import {Component, Vue, Ref, Prop} from "vue-property-decorator";
-  import {ValidationProvider, ValidationObserver} from 'vee-validate';
+  import {ValidationObserver} from 'vee-validate';
   import {AxiosError} from "axios";
   import {
     Category
   } from "~/types";
   import Icon from "~/components/Symbols/Icon.vue";
+  import TextInput from "~/components/Input/TextInput.vue";
 
   @Component({
-    components: {ValidationObserver, ValidationProvider, Icon}
+    components: {TextInput, ValidationObserver, Icon}
   })
   export default class ExerciseForm extends Vue {
 
diff --git a/components/Gestion/ExerciseForm.vue b/components/Gestion/ExerciseForm.vue
index 9145616..9f3ba22 100644
--- a/components/Gestion/ExerciseForm.vue
+++ b/components/Gestion/ExerciseForm.vue
@@ -7,38 +7,44 @@
 
     <div v-if="exercise" class="status">
       <template v-if="exercise.state === 'VALIDATED'">
-        Valide <Icon type="check" theme="theme--green"/>
+        Valide
+        <Icon type="check" theme="theme--green"/>
       </template>
 
       <template v-else-if="exercise.state === 'NOT_VALIDATED'">
-        Non valide <Icon type="close" theme="theme--red-light"/>
+        Non valide
+        <Icon type="close" theme="theme--red-light"/>
       </template>
 
       <template v-else-if="exercise.state === 'PENDING'">
-        En attente <Icon type="send" theme="theme--yellow"/>
+        En attente
+        <Icon type="send" theme="theme--yellow"/>
       </template>
 
       <template v-else-if="exercise.state === 'DRAFT'">
-        Brouillon <Icon title="Créé" type="paper" theme="theme--primary-color-light"/>
+        Brouillon
+        <Icon title="Créé" type="paper" theme="theme--primary-color-light"/>
       </template>
 
       <template v-else-if="exercise.state === 'ARCHIVED'">
-        Archivé <Icon type="archive" theme="theme--red-light"/>
+        Archivé
+        <Icon type="archive" theme="theme--red-light"/>
       </template>
     </div>
 
     <ValidationObserver ref="observer1" tag="form" @submit.prevent="validateBeforeSubmit()">
-      <ValidationProvider tag="label"
-                          name="titre"
-                          rules="required|min:3|max:200"
-                          v-slot="{ errors }">
-            <span class="label__name">
+      <TextInput
+        tag="label"
+        name="titre"
+        v-model="form.title"
+        :value="form.title"
+        @input="debounceInput"
+        placeholder="Entrez le nom de votre exercice"
+        rules="required|min:3|max:200">
+        <span class="label__name">
               Titre *
-            </span>
-        <input id="Title" placeholder="Entrez le nom de votre exercice" name="title" v-model="form.title"
-               v-on:input="debounceInput" class="input--grey" type="text">
-        <span class="error-message">{{errors[0]}}</span>
-      </ValidationProvider>
+        </span>
+      </TextInput>
 
     </ValidationObserver>
 
@@ -101,15 +107,13 @@
           <span class="error-message">{{errors[0]}}</span>
         </ValidationProvider>
 
-        <ValidationProvider tag="label"
-                            name="tag"
-                            rules="required|min:3|max:100"
-                            v-slot="{ errors }">
-          <input id="NewTagName" name="selectedNewTag.text" placeholder="Entrez votre nouveau tag"
-                 v-model="selectedNewTag.text"
-                 class="input--grey" type="text">
-          <span class="error-message">{{errors[0]}}</span>
-        </ValidationProvider>
+        <TextInput
+          tag="label"
+          name="tag"
+          rules="required|min:3|max:100"
+          v-model="selectedNewTag.text"
+          placeholder="Entrez votre nouveau tag">
+        </TextInput>
 
         <button :class="{'button--ternary-color-reverse': valid, 'button--ternary-color': !valid}" type="submit">
           Ajouter ce tag
@@ -119,39 +123,36 @@
 
     <ValidationObserver ref="observer2" tag="form"
                         @submit.prevent="validateBeforeSubmit">
-      <ValidationProvider tag="div"
-                          name="archive zip"
-                          rules="mimes:application/zip,application/x-zip,application/x-zip-compressed,application/octet-stream"
-                          ref="fileObserver"
-                          v-slot="{ errors, validate }">
-            <span class="label__name">
+      <FileInput
+        name="archive zip"
+        rules="mimes:application/zip,application/x-zip,application/x-zip-compressed,application/octet-stream"
+        :default-filename="filename"
+        @input="updateFile"
+        ref="fileObserver">
+
+        <span class="label__name">
               Uploadez votre archive (zip)
-            </span>
-        <input id="Archive" name="archive" ref="inputFile" @change="selectedFile" class="input--secondary-color"
-               type="file">
-        <label for="Archive">
-          <Icon type="archive" theme="theme--white"/>
-          {{labelFileText}}</label>
-        <span class="error-message">{{errors[0]}}</span>
+        </span>
+
+        <template v-slot:footer>
         <span v-if="exercise && exercise.file && filename" @click="downloadFile"
-           class="message message--primary-color"
-           style="text-decoration: underline; cursor: pointer;">Télécharger le fichier</span>
-        <span class="message message--red" v-if="filename"
-              style="text-decoration: underline; cursor: pointer;"
-              @click="deleteFile">Supprimer le fichier</span>
-      </ValidationProvider>
-
-      <ValidationProvider tag="label"
-                          name="url"
-                          rules="url"
-                          v-slot="{ errors }">
-            <span class="label__name">
+              class="message message--primary-color"
+              style="text-decoration: underline; cursor: pointer;">Télécharger le fichier</span>
+
+        </template>
+      </FileInput>
+
+      <TextInput
+        tag="label"
+        name="url"
+        type="url"
+        v-model="form.url"
+        placeholder="Entrez l'url absolue vers votre exercice"
+        rules="url">
+        <span class="label__name">
               Url vers l'exercice
-            </span>
-        <input id="Url" type="url" placeholder="Entrez l'url absolue vers votre exercice" name="url" v-model="form.url"
-               class="input--grey">
-        <span class="error-message">{{errors[0]}}</span>
-      </ValidationProvider>
+        </span>
+      </TextInput>
     </ValidationObserver>
 
 
@@ -207,13 +208,17 @@
   import jsonFormData from 'json-form-data';
   import ExerciseFormMixins from "~/components/Mixins/ExerciseFormMixins";
   import TagColorLegend from "~/components/Tag/TagColorLegend.vue";
-
-  const debounce = require('lodash.debounce');
+  import TextInput from "~/components/Input/TextInput.vue";
+  import FileInput from "~/components/Input/FileInput.vue";
 
   const download = require('downloadjs');
 
   @Component({
-    components: {TagColorLegend, CustomSelect, ValidationObserver, ValidationProvider, RichTextEditor, Tag, Icon}
+    components: {
+      FileInput,
+      TextInput,
+      TagColorLegend, CustomSelect, ValidationObserver, ValidationProvider, RichTextEditor, Tag, Icon
+    }
   })
   export default class ExerciseForm extends Mixins(FilterPanelMixins, ExerciseFormMixins) {
     @Prop({type: Object, default: undefined}) exercise!: Exercise | undefined;
@@ -265,7 +270,7 @@
             exerciseBuild.url = this.form.url;
           }
 
-          const file: File | null = this.file();
+          const file: File | null = this.file;
 
           if (file !== null) {
 
@@ -341,18 +346,18 @@
         } catch (e) {
           const error = e as AxiosError;
 
-          if(error.response) {
+          if (error.response) {
             const status: number = error.response.status;
 
-            if(status === 400) {
+            if (status === 400) {
               this.$displayError(`Vous ne respectez pas les conditions pour publier la catégorie.`);
-            } else if(status === 401) {
+            } else if (status === 401) {
               this.$displayError("Vous devez vous connecter pour effectuer cette action.")
-            } else if(status === 403) {
+            } else if (status === 403) {
               this.$displayError(`Vous n'êtes pas autorisé à effectuer cette action !`);
-            } else if(status === 409) {
+            } else if (status === 409) {
               this.$displayError(`Un conflit a été détecté. Vérifiez vos données.`);
-            } else if(status === 500) {
+            } else if (status === 500) {
               this.$displayError(`Une erreur est survenue depuis nos serveurs, veuillez-nous en excuser.`);
             }
           } else {
@@ -370,10 +375,10 @@
     }
 
     async downloadFile() {
-      if(this.exercise) {
+      if (this.exercise) {
         try {
 
-          const result:Blob = await this.$axios.$get(`/files/${this.exercise.file}`, {responseType: 'blob'});
+          const result: Blob = await this.$axios.$get(`/files/${this.exercise.file}`, {responseType: 'blob'});
 
           download(result, "archive.zip", result.type);
 
diff --git a/components/Gestion/FavoriteForm.vue b/components/Gestion/FavoriteForm.vue
index 69c8962..4d48535 100644
--- a/components/Gestion/FavoriteForm.vue
+++ b/components/Gestion/FavoriteForm.vue
@@ -2,30 +2,29 @@
   <section class="content">
     <h1>{{title}}</h1>
 
-    <ValidationObserver ref="observer1" tag="form" @submit.prevent="validateBeforeSubmit()">
-      <ValidationProvider tag="label"
-                          name="favori"
-                          rules="required|max:200"
-                          v-slot="{ errors }">
-            <span class="label__name">
-              Nom du favori *
-            </span>
-        <input id="Name" placeholder="Entrez le nom de votre favori" name="name" v-model="form.name"
-               class="input--grey" type="text">
-        <span class="error-message">{{errors[0]}}</span>
-      </ValidationProvider>
-
-      <ValidationProvider tag="label"
-                          name="titre"
-                          rules="max:100"
-                          v-slot="{ errors }">
-            <span class="label__name">
+    <ValidationObserver ref="observer1" tag="form" @submit.prevent="validateBeforeSubmit">
+      <TextInput
+        tag="label"
+        name="favori"
+        v-model="form.name"
+        placeholder="Entrez le nom de votre favori"
+        rules="required|max:200">
+        <span class="label__name">
+          Nom du favori *
+        </span>
+      </TextInput>
+
+      <TextInput
+        tag="label"
+        name="titre"
+        v-model="form.title"
+        @input="debounceInput"
+        placeholder="Entrez le titre de votre recherche"
+        rules="max:100">
+        <span class="label__name">
               Titre de recherche
-            </span>
-        <input id="Title" placeholder="Entrez le titre de votre recherche" name="title" v-model="form.title"
-               v-on:input="debounceInput" class="input--grey" type="text">
-        <span class="error-message">{{errors[0]}}</span>
-      </ValidationProvider>
+        </span>
+      </TextInput>
 
     </ValidationObserver>
 
@@ -62,13 +61,14 @@
   import FilterPanelMixins from "~/components/Mixins/FilterPanelMixins.vue";
   import FavoriteFormMixins from "~/components/Mixins/FavoriteFormMixins";
   import {Configuration, CreateConfigurationRequest, SelectedTag, UpdateConfigurationRequest} from "../../types";
-  import {ValidationObserver, ValidationProvider} from "vee-validate";
+  import {ValidationObserver} from "vee-validate";
   import Tag from "../Tag/Tag.vue";
   import TagColorLegend from "~/components/Tag/TagColorLegend.vue";
   import {AxiosError} from "axios";
+  import TextInput from "~/components/Input/TextInput.vue";
 
   @Component({
-    components: {TagColorLegend, Tag, ValidationProvider, ValidationObserver}
+    components: {TextInput, TagColorLegend, Tag, ValidationObserver}
   })
   export default class FavoriteForm extends Mixins(FilterPanelMixins, FavoriteFormMixins) {
 
@@ -120,18 +120,18 @@
         } catch (e) {
           const error = e as AxiosError;
 
-          if(error.response) {
+          if (error.response) {
             const status: number = error.response.status;
 
-            if(status === 400) {
+            if (status === 400) {
               this.$displayError(`Vous ne respectez pas les conditions pour publier ce favori.`);
-            } else if(status === 401) {
+            } else if (status === 401) {
               this.$displayError("Vous devez vous connecter pour effectuer cette action.")
-            } else if(status === 403) {
+            } else if (status === 403) {
               this.$displayError(`Vous n'êtes pas autorisé à effectuer cette action !`);
-            } else if(status === 409) {
+            } else if (status === 409) {
               this.$displayError(`Cette catégorie existe déjà.`);
-            } else if(status === 500) {
+            } else if (status === 500) {
               this.$displayError(`Une erreur est survenue depuis nos serveurs, veuillez-nous en excuser.`);
             }
           } else {
diff --git a/components/Gestion/TagForm.vue b/components/Gestion/TagForm.vue
index 4718cf6..325e6c9 100644
--- a/components/Gestion/TagForm.vue
+++ b/components/Gestion/TagForm.vue
@@ -3,17 +3,16 @@
     <h1>{{title}}</h1>
 
     <ValidationObserver ref="observer" tag="form" @submit.prevent="validateBeforeSubmit">
-      <ValidationProvider tag="label"
-                          name="titre"
-                          rules="required|min:1|max:200"
-                          v-slot="{ errors }">
-            <span class="label__name">
-              Titre *
-            </span>
-        <input id="Title" placeholder="Entrez le nom du tag" name="title" v-model="form.title"
-               class="input--grey" type="text">
-        <span class="error-message">{{errors[0]}}</span>
-      </ValidationProvider>
+      <TextInput tag="label"
+                 name="titre"
+                 placeholder="Entrez le nom du tag"
+                 v-model="form.title"
+                 rules="required|min:1|max:200">
+
+        <span class="label__name">
+          Titre *
+        </span>
+      </TextInput>
 
       <ValidationProvider tag="label"
                           name="catégorie"
@@ -65,9 +64,10 @@
   import Icon from "~/components/Symbols/Icon.vue";
   import Tag from "~/components/Tag/Tag.vue";
   import CustomSelect from "~/components/Input/CustomSelect.vue";
+  import TextInput from "~/components/Input/TextInput.vue";
 
   @Component({
-    components: {CustomSelect, ValidationObserver, ValidationProvider, Tag, Icon}
+    components: {TextInput, CustomSelect, ValidationObserver, ValidationProvider, Tag, Icon}
   })
   export default class ExerciseForm extends Vue {
 
@@ -178,18 +178,18 @@
         } catch (e) {
           const error = e as AxiosError;
 
-          if(error.response) {
+          if (error.response) {
             const status: number = error.response.status;
 
-            if(status === 400) {
+            if (status === 400) {
               this.$displayError(`Vous ne respectez pas les conditions pour publier le tag.`);
-            } else if(status === 401) {
+            } else if (status === 401) {
               this.$displayError("Vous devez vous connecter pour effectuer cette action.")
-            } else if(status === 403) {
+            } else if (status === 403) {
               this.$displayError(`Vous n'êtes pas autorisé à effectuer cette action !`);
-            } else if(status === 409) {
+            } else if (status === 409) {
               this.$displayError(`Ce tag existe déjà !`);
-            } else if(status === 500) {
+            } else if (status === 500) {
               this.$displayError(`Une erreur est survenue depuis nos serveurs, veuillez-nous en excuser.`);
             }
           } else {
diff --git a/components/Input/FileInput.vue b/components/Input/FileInput.vue
index d773750..38c56a3 100644
--- a/components/Input/FileInput.vue
+++ b/components/Input/FileInput.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts">
   import {ValidationProvider} from 'vee-validate';
-  import {Component, Emit, Prop, Ref, Vue} from "vue-property-decorator";
+  import {Component, Emit, Prop, Ref, Vue, Watch} from "vue-property-decorator";
   import Icon from "~/components/Symbols/Icon.vue";
 
   @Component({
@@ -42,6 +42,11 @@
      */
     @Ref() fileObserver!: InstanceType<typeof ValidationProvider>;
 
+    @Watch("defaultFilename")
+    onDefaultFilenameChange(val:string) {
+      this.filename = val;
+    }
+
     /**
      * The name of the uploaded file
      * Default is null
diff --git a/components/Input/TextInput.vue b/components/Input/TextInput.vue
index 31c970b..f5c2f32 100644
--- a/components/Input/TextInput.vue
+++ b/components/Input/TextInput.vue
@@ -18,11 +18,11 @@
   export default class TextInput extends Vue {
 
     @Prop({type: [String, Object], default: ''}) rules!: string | object;
+    @Prop({type: String, default: ''}) value!: string;
     @Prop({type: String, default: ''}) name!: string;
     @Prop({type: String, default: undefined}) vid!: string | undefined;
     @Prop({type: String, default: 'text'}) type!: string;
     @Prop({type: String, default: 'div'}) tag!: string;
-    @Prop({type:String, default: ''}) defaultValue!:string;
     @Prop({type:String, default: ''}) placeholder!:string;
 
     currentValue: string = '';
@@ -32,14 +32,15 @@
       this.input(val);
     }
 
+    @Watch('value')
+    OnValueChange(val: string) {
+      if(this.currentValue !==  val) this.currentValue = val;
+    }
+
     @Emit()
     input(value: string) {
       return value;
     }
 
-    mounted() {
-      this.currentValue = this.defaultValue;
-    }
-
   }
 </script>
diff --git a/components/Mixins/ExerciseFormMixins.ts b/components/Mixins/ExerciseFormMixins.ts
index dafed64..51570bd 100644
--- a/components/Mixins/ExerciseFormMixins.ts
+++ b/components/Mixins/ExerciseFormMixins.ts
@@ -1,5 +1,5 @@
 import {Component, Ref, Vue} from "vue-property-decorator";
-import {ValidationObserver, ValidationProvider} from 'vee-validate';
+import {ValidationObserver} from 'vee-validate';
 import {
   Category,
   PostExerciseRequest,
@@ -12,6 +12,7 @@ import {
 import RichTextEditor from "~/components/Editor/RichTextEditor.vue"
 import {BusEvent} from "~/components/Event/BusEvent";
 import CustomSelect from "~/components/Input/CustomSelect.vue";
+import FileInput from "~/components/Input/FileInput.vue";
 
 const debounce = require('lodash.debounce');
 
@@ -28,7 +29,7 @@ export default class ExerciseFormMixins extends Vue {
   /**
    * Validation Observer for the zip archive and the url
    */
-  @Ref() fileObserver!: InstanceType<typeof ValidationProvider>;
+  @Ref() fileObserver!: FileInput;
   /**
    * ValidationObserver for the Tag section
    */
@@ -41,10 +42,6 @@ export default class ExerciseFormMixins extends Vue {
    * The component containing the description with the editor
    */
   @Ref() richTextEditor!: RichTextEditor;
-  /**
-   * Observer for the input file element
-   */
-  @Ref() inputFile!: HTMLInputElement;
 
   /**
    * A new tag proposal
@@ -82,6 +79,11 @@ export default class ExerciseFormMixins extends Vue {
    */
   filename: string | null = null;
 
+  /**
+   * The file uploaded (in zip)
+   */
+  file: File | null = null;
+
   /**
    * Returns true if either the tags selected in the tags panel is empty or the array of new tags added
    */
@@ -110,66 +112,22 @@ export default class ExerciseFormMixins extends Vue {
     return this.$accessor.tags.selectedTags
   }
 
-  /**
-   * Returns the name of the uploaded file or a default message instead
-   */
-  protected get labelFileText() {
-    if (this.filename !== null) {
-      if (this.filename.length > 18) {
-        return this.filename.slice(0, 18) + '...'
-      }
-
-      return this.filename
-    }
-
-    return 'Choisir un fichier...'
-  }
-
-  /**
-   * Get the zip archive from the input file element
-   */
-  file(): File | null {
-
-    const inputFile: any = this.fileObserver.value;
-
-    if (!inputFile) {
-      return null;
-    }
-
-    return inputFile
-  }
 
   /**
    * Event for the title input to search after similar exercises
    */
-  debounceInput = debounce((e: any) => {
-    const value = e.target.value;
+  debounceInput = debounce((value: string) => {
     this.$accessor.exercises.fetch({data: {title: value}});
   }, 300);
 
 
-  /**
-   * Delete file from input and reset the filename
-   */
-  deleteFile() {
-    this.filename = null;
-    this.inputFile.files = null;
-    this.fileObserver.reset();
-  }
-
-  /**
-   * Event for the changed state of the input file (archive)
-   */
-  async selectedFile(event: Event) {
-    const inputElement: HTMLInputElement | null = event.target as HTMLInputElement | null;
-
-    if (inputElement !== null) {
-      const files = inputElement.files;
-      if (files !== null) {
-        const file: File | null = files.item(0);
-        this.filename = file !== null ? file.name : null;
-        await this.fileObserver.validate(file);
-      }
+  updateFile(file: File | null) {
+    if (file !== null) {
+      this.filename = file.name;
+      this.file = file;
+    } else {
+      this.file = null;
+      this.filename = null;
     }
   }
 
@@ -261,6 +219,11 @@ export default class ExerciseFormMixins extends Vue {
 
     this.newTags = [];
 
+    if(this.file !== null) {
+      // @ts-ignore
+      this.fileObserver.deleteFile();
+    }
+
     this.$accessor.exercises.RESET_SEARCH_CRITERION();
     this.$accessor.exercises.RESET();
     this.$accessor.tags.CLEAR();
diff --git a/components/Mixins/FavoriteFormMixins.ts b/components/Mixins/FavoriteFormMixins.ts
index e32effd..df722e2 100644
--- a/components/Mixins/FavoriteFormMixins.ts
+++ b/components/Mixins/FavoriteFormMixins.ts
@@ -32,8 +32,7 @@ export default class extends Vue {
   /**
    * Event for the title input to search after similar exercises
    */
-  debounceInput = debounce((e: any) => {
-    const value = e.target.value;
+  debounceInput = debounce((value: string) => {
     this.$accessor.exercises.fetch({data: {title: value}});
   }, 300);
 }