diff --git a/package.json b/package.json
index aa1ed42..703287e 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "register-service-worker": "^1.7.1",
-    "tiptap-vuetify": "^2.23.0",
+    "tiptap-vuetify": "2.24.0",
     "vue": "^2.6.11",
     "vue-apitator": "0.0.17",
     "vue-class-component": "^7.2.3",
diff --git a/public/img/favicon.png b/public/img/icons/favicon-16x16.png
similarity index 100%
rename from public/img/favicon.png
rename to public/img/icons/favicon-16x16.png
diff --git a/public/img/icons/favicon-32x32.png b/public/img/icons/favicon-32x32.png
new file mode 100644
index 0000000..3f77dc2
Binary files /dev/null and b/public/img/icons/favicon-32x32.png differ
diff --git a/public/index.html b/public/index.html
index 43fe267..b73cb44 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,13 +9,12 @@ Github: https://github.com/lefuturiste
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" type="image/png" href="/img/favicon.png" />
 
     <title>Forum virtuel des associations</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"/>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
-    
+    <link rel="icon" href="/img/favicon.png" />
   </head>
   <body>
     <noscript>
diff --git a/src/components/AvatarEditor.vue b/src/components/AvatarEditor.vue
index a8619f0..b8bd8b2 100644
--- a/src/components/AvatarEditor.vue
+++ b/src/components/AvatarEditor.vue
@@ -17,6 +17,7 @@
             :height="height"
             accept="image/jpeg,image/png"
             prevent-white-space
+            :initial-image="imageUrl"
             :placeholder-font-size="22"
             @file-size-exceed="handleFileSizeExceed"
             @file-type-mismatch="handleFileTypeMismatch"
@@ -95,6 +96,10 @@ export default {
       type: Number,
       default: 500
     },
+    imageUrl: {
+      type: String,
+      default: ''
+    },
     loading: {
       type: Boolean,
       default: false
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index c93b9d2..3d70f0e 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -43,6 +43,7 @@
         </v-tabs> -->
         <div class="frame-container">
           <iframe
+            v-if="enabled"
             class="frame"
             :src="frameUrl">
           </iframe>
@@ -77,15 +78,24 @@ export default {
     }
   },
   data: () => ({
-    tab: 0
+    tab: 0,
+    additional: ''
   }),
   computed: {
     frameUrl () {
+      let path = ''
       if (this.tab === 1) {
-        return process.env.VUE_APP_BASE_URL + '/association/' + this.slug + '?version=' + this.version
+        path = '/association/' + this.slug + '?version=' + this.version
       } else {
-        return process.env.VUE_APP_BASE_URL + '?only=' + this.id
+        path = '?only=' + this.id
       }
+      return process.env.VUE_APP_BASE_URL + path + '&hash=' + this.additional
+    }
+  },
+  methods: {
+    reload () {
+      // add random data to force the frame to reload
+      this.additional = Date.now().toString()
     }
   }
 }
diff --git a/src/layouts/Delegate.vue b/src/layouts/Delegate.vue
index dfa23aa..47cb270 100644
--- a/src/layouts/Delegate.vue
+++ b/src/layouts/Delegate.vue
@@ -6,7 +6,7 @@
         dark
         flat
       >
-        <v-toolbar-title>{{ $store.state.delegate.adminName }}</v-toolbar-title>
+        <v-toolbar-title>{{ $store.state.data.name }}</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn
           outlined
@@ -233,6 +233,7 @@ export default {
     }
   },
   mounted () {
+    this.$store.commit('SET_TITLE', "Modification de l'association")
     this.selectRoute(this.$route)
     /**
      * this is very ugly I kown
@@ -375,6 +376,7 @@ export default {
       this.$store.commit('VALIDATE_MAIN', isValid => {
         if (isValid) {
           this.publishModal = true
+          this.save()
         } else {
           this.$store.commit('ADD_ALERT', {
             color: 'error',
diff --git a/src/store/index.ts b/src/store/index.ts
index 73839a8..654a04e 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -31,7 +31,8 @@ export default new Vuex.Store({
         address: '',
         person: '',
         email: '',
-        phone: ''
+        phone: '',
+        peoples: []
       }
     },
     delegate: {
@@ -42,7 +43,7 @@ export default new Vuex.Store({
     },
     debug: false,
     validateMain: false,
-    validateMainCallback: (d: boolean) => false
+    validateMainCallback: (d = false) => d
   },
   mutations: {
     SET_DEBUG (state, payload) {
diff --git a/src/views/Admin/OrganizationList.vue b/src/views/Admin/OrganizationList.vue
index 09f2ce7..ea7c850 100644
--- a/src/views/Admin/OrganizationList.vue
+++ b/src/views/Admin/OrganizationList.vue
@@ -284,6 +284,7 @@
       </v-card>
     </v-dialog>
     <Preview
+      ref="preview"
       :enabled="approveModal"
       :id="toApproveItem._id"
       :slug="toApproveItem.slugs[0]"
@@ -524,7 +525,8 @@ export default {
     },
 
     openExternal (item) {
-      window.open(process.env.VUE_APP_BASE_URL + '/association/' + item.slugs[item.slug.length - 1] + '?version=proposed', '_blank').focus()
+      // '?version=proposed'
+      window.open(process.env.VUE_APP_BASE_URL + '/association/' + item.slugs[item.slugs.length - 1], '_blank').focus()
     },
 
     openPanel (item) {
@@ -533,6 +535,7 @@ export default {
     },
 
     openApproveModal (item) {
+      this.$refs.preview.reload()
       this.approveModal = true
       this.toApproveItem = item
       this.approved = false
diff --git a/src/views/Delegate/Contact.vue b/src/views/Delegate/Contact.vue
index d29e885..350c5c8 100644
--- a/src/views/Delegate/Contact.vue
+++ b/src/views/Delegate/Contact.vue
@@ -42,6 +42,41 @@
       outlined
       v-model="$store.state.data.contacts.instagram"
       :rules="rules.instagram" />
+    <p>Contacts additionels</p>
+    <v-btn @click="addContact()">Ajouter un contact additionel</v-btn>
+    <v-row
+      v-for="(contact, index) in $store.state.data.contacts.peoples"
+      :key="index">
+      <v-col cols="12" sm="4" class="py-0">
+        <v-text-field
+          prepend-icon="person"
+          label="Nom du contact"
+          outlined
+          v-model="contact.name"
+          :rules="rules.person" />
+      </v-col>
+      <v-col cols="12" sm="4" class="py-0">
+        <v-text-field
+          label="Rôle"
+          outlined
+          v-model="contact.role"
+          :rules="rules.role" />
+      </v-col>
+      <v-col cols="12" sm="4" class="py-0">
+        <v-text-field
+          label="Email"
+          outlined
+          v-model="contact.email"
+          :rules="rules.email" />
+      </v-col>
+      <v-col cols="12" sm="4" class="py-0">
+        <v-text-field
+          label="N° de téléphone"
+          outlined
+          v-model="contact.phone"
+          :rules="rules.phone" />
+      </v-col>
+    </v-row>
   </div>
 </template>
 
@@ -66,6 +101,15 @@ export default {
       ]
     }
   }),
-  methods: {}
+  methods: {
+    addContact () {
+      this.$store.state.contacts.peoples.push({
+        name: '',
+        email: '',
+        role: '',
+        phone: ''
+      })
+    }
+  }
 }
 </script>
diff --git a/src/views/Delegate/Description.vue b/src/views/Delegate/Description.vue
index 9afa4d7..4c366df 100644
--- a/src/views/Delegate/Description.vue
+++ b/src/views/Delegate/Description.vue
@@ -1,12 +1,29 @@
 <template>
   <div>
-    <v-btn small @click="fill()" class="mb-2">Préremplir</v-btn>
+    <!-- <v-btn small @click="fill()" class="mb-2">Préremplir</v-btn> -->
+    <div class="d-flex justify-center mb-3">
+      <v-btn v-if="advanced" small @click="advanced = false">
+        Mode simple
+      </v-btn>
+      <v-btn v-else small @click="advanced = true">
+        Mode avancé
+      </v-btn>
+    </div>
     <tiptap-vuetify
+      v-if="!advanced"
       v-model="$store.state.data.descriptionLong"
       :extensions="tiptapExtensions"
       placeholder="Décrivez ici votre association plus en détail (section présentation)"
       min-height="15em"
     />
+    <div v-else id="description-advanced-mode">
+      <v-textarea
+        outlined
+        auto-grow
+        label="Code html"
+        v-model="$store.state.data.descriptionLong">
+      </v-textarea>
+    </div>
   </div>
 </template>
 
@@ -33,6 +50,7 @@ export default {
   components: { TiptapVuetify },
 
   data: () => ({
+    advanced: false,
     tiptapExtensions: [
       History,
       Blockquote,
@@ -72,3 +90,9 @@ export default {
   }
 }
 </script>
+
+<style>
+#description-advanced-mode .v-text-field__details {
+  display: none;
+}
+</style>
diff --git a/src/views/Delegate/Gallery.vue b/src/views/Delegate/Gallery.vue
index 1be770e..a861307 100644
--- a/src/views/Delegate/Gallery.vue
+++ b/src/views/Delegate/Gallery.vue
@@ -1,34 +1,24 @@
 <template>
   <div>
     <!-- COVER START -->
-    <div v-if="false" class="mb-3">
+    <div v-if="$store.state.data.cover !== undefined && $store.state.data.cover !== null" class="mb-3">
       <div
         class="cover-common cover-container"
         :style="coverStyle">
       </div>
       <div class="cover-common cover-upper">
         <div>
-          <v-btn
+          <!-- <v-btn
             @click="$refs.avatarEditor.toggle()"
+            color="white">Changer la couverture</v-btn> -->
+          <v-btn
+            class="ml-3"
+            @click="clearCover()"
             color="white"
-          >Changer la couverture</v-btn>
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on, attrs }">
-              <v-btn
-                v-if="$store.state.data.cover !== null"
-                class="ml-3"
-                @click="clearCover()"
-                color="white"
-                v-bind="attrs"
-                v-on="on"
-                icon
-                outlined
-              >
-                <v-icon>clear</v-icon>
-              </v-btn>
-            </template>
-            <span>Supprimer la couverture</span>
-          </v-tooltip>
+            outlined
+          >
+            <v-icon left>clear</v-icon> Supprimer la couverture
+          </v-btn>
         </div>
       </div>
     </div>
@@ -39,6 +29,7 @@
       :width="960"
       :height="300"
       :modal-size="1000"
+      :imageUrl="coverImage"
       @submitted="handleAvatarEditorSubmitted"
     />
     <!-- COVER END -->
@@ -137,7 +128,7 @@
                   small
                   v-bind="attrs"
                   v-on="on"
-                  @click="shiftRightMedia(media)"
+                  @click="chooseAsCover(media)"
                 >
                   <v-icon small>stars</v-icon>
                 </v-btn>
@@ -204,6 +195,7 @@
           <v-btn color="primary" text @click="deleteMediaModal = false">
             Fermer
           </v-btn>
+          <v-spacer />
           <v-btn color="error" text @click="deleteMedia()">
             Supprimer
           </v-btn>
@@ -226,7 +218,8 @@ export default {
     files: [],
     deleteMediaModal: false,
     mediaToDelete: {},
-    uploadProgress: 0
+    uploadProgress: 0,
+    coverImage: ''
   }),
 
   computed: {
@@ -358,11 +351,15 @@ export default {
     },
     clearCover () {
       this.$store.commit('SET_DATA', {
-        cover: null
+        cover: undefined
       })
     },
     openMedia (item) {
       window.open(item.location, '_blank').focus()
+    },
+    chooseAsCover (item) {
+      this.coverImage = item.location
+      this.$refs.avatarEditor.toggle()
     }
   }
 }
diff --git a/src/views/Delegate/Pricing.vue b/src/views/Delegate/Pricing.vue
index 3ca965f..0eebbf3 100644
--- a/src/views/Delegate/Pricing.vue
+++ b/src/views/Delegate/Pricing.vue
@@ -10,25 +10,20 @@
       v-if="$store.state.data.pricing.length === 0"
       class="mb-8 mt-8">
       <v-alert
-        border="left"
-        color="grey darken-2"
-        outlined
-        type="info"
+        border="left" color="grey darken-2" outlined type="info"
       >
         Aucun tarifs ajoutée pour le moment
       </v-alert>
     </div>
-    <v-row v-else class="justify-content: center">
+    <v-row v-else class="justify-center">
       <v-col
         v-for="pricing in $store.state.data.pricing"
         :key="pricing._id"
-        cols="12"
-        sm="12"
-        md="6"
-        lg="4"
+        cols="12" sm="12" md="6" lg="4"
       >
         <v-card
-          class="mx-auto"
+          class="mx-auto pricing-card"
+          :class="removeExampleData ? 'disabled' : ''"
           max-width="400"
         >
           <v-card-text>
@@ -43,18 +38,16 @@
           <v-card-actions>
             <v-spacer />
             <v-btn
+              icon outlined color="error"
+              :disabled="removeExampleData"
               @click="openDeleteModal(pricing)"
-              icon
-              outlined
-              color="error"
             >
               <v-icon small>delete</v-icon>
             </v-btn>
             <v-btn
+              icon outlined color="info"
+              :disabled="removeExampleData"
               @click="openEditModal(pricing)"
-              icon
-              outlined
-              color="info"
             >
               <v-icon small>edit</v-icon>
             </v-btn>
@@ -83,9 +76,9 @@
             label="Description/Sous Titre du tarif"
             hint="Optionel"
           />
-          <div class="d-flex justify-center">
+          <!-- <div class="d-flex justify-center">
             <v-btn small @click="loadDummy()">Préremplir</v-btn>
-          </div>
+          </div> -->
         </v-card-text>
         <v-card-actions>
           <v-btn @click="itemModal = false" text color="primary">
@@ -132,11 +125,38 @@ export default {
     item: {},
     toDelete: {},
     deleteModal: false,
-    oldEdit: {}
+    oldEdit: {},
+    removeExampleData: false,
+    exampleData: [
+      {
+        priceLabel: '12 €',
+        name: "Tarif d'exemple",
+        description: 'Dans cet onglet, vous pouvez spécifier différents tarifs ou réductions'
+      }
+    ]
   }),
+
   computed: {
     itemModalTitle () { return this.mode === 'add' ? 'Ajouter' : 'Editer' }
   },
+
+  created () {
+    if (this.$store.state.data.pricing.length === 0) {
+      this.removeExampleData = true
+      this.$store.commit('SET_DATA', {
+        pricing: this.exampleData
+      })
+    }
+  },
+
+  destroyed () {
+    if (this.removeExampleData) {
+      this.$store.commit('SET_DATA', {
+        pricing: []
+      })
+    }
+  },
+
   methods: {
     loadDummy () {
       this.item = JSON.parse('{"priceLabel":"3.14159 €","name":"Hippie","description":"Vomissures que ce juillets haleurs haleurs dont, roulant"}')
@@ -148,6 +168,10 @@ export default {
     },
     save () {
       let pricing = this.$store.state.data.pricing
+      if (this.removeExampleData) {
+        pricing = []
+        this.removeExampleData = false
+      }
       if (this.mode === 'add') {
         this.item._id = Date.now().toString()
         pricing.push(this.item)
@@ -177,3 +201,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.pricing-card.disabled {
+  opacity: .8;
+}
+</style>
diff --git a/src/views/Delegate/Schedule.vue b/src/views/Delegate/Schedule.vue
index a438970..f50dcdb 100644
--- a/src/views/Delegate/Schedule.vue
+++ b/src/views/Delegate/Schedule.vue
@@ -21,8 +21,9 @@
     <div v-else>
       <div
         class="schedule-item"
-        v-for="item in $store.state.data.schedule"
-        :key="item.name"
+        v-for="(category, index) in $store.state.data.schedule"
+        :key="index"
+        :class="removeExampleData ? 'disabled' : ''"
       >
         <!--
         cols="12"
@@ -34,52 +35,94 @@
           <div class="schedule-content">
             <v-card-title class="flex-column justify-space-between">
               <div class="schedule-title-container">
-                <div class="subheading font-weight-bold">{{ item.name }}</div>
-                <div class="text-body-1">{{ item.description }}</div>
+                <div class="subheading font-weight-bold"><span class="font-weight-light">N°{{ index + 1 }} - </span> {{ category.name }}</div>
+                <div class="text-body-2 mt-3">{{ category.description }}</div>
               </div>
-              <div class="mt-5 schedule-actions">
-                <div class="mr-3">
-                  <v-btn outlined icon small color="info" class="mr-2" @click="openEditCategoryModal(item)">
+              <div class="mt-5 schedule-actions px-4">
+                <div class="d-flex justify-space-between" style="width: 100%">
+                  <v-btn
+                    outlined icon small color="info" class="mr-1"
+                    :disabled="removeExampleData"
+                    @click="openEditCategoryModal(category)">
                     <v-icon small>edit</v-icon>
                   </v-btn>
-                  <v-btn outlined icon small color="error" @click="openDeleteCategoryModal(item)">
+                  <v-btn
+                    outlined icon small color="error" class="mr-1"
+                    :disabled="removeExampleData"
+                    @click="openDeleteCategoryModal(category)">
                     <v-icon small>delete</v-icon>
                   </v-btn>
+                  <v-tooltip bottom>
+                    <template v-slot:activator="{ on, attrs }">
+                      <v-btn
+                        outlined icon small color="gray" class="mr-1"
+                        v-bind="attrs"
+                        v-on="on"
+                        :disabled="index === 0 || removeExampleData"
+                        @click="shiftCategoryUp(category)">
+                        <v-icon small>keyboard_arrow_up</v-icon>
+                      </v-btn>
+                    </template>
+                    <span>Décaler vers le haut</span>
+                  </v-tooltip>
+                  <v-tooltip bottom>
+                    <template v-slot:activator="{ on, attrs }">
+                      <v-btn
+                        outlined icon small color="gray" class="mr-1"
+                        v-bind="attrs"
+                        v-on="on"
+                        :disabled="index === $store.state.data.schedule.length - 1 || removeExampleData"
+                        @click="shiftCategoryDown(category)">
+                        <v-icon small>keyboard_arrow_down</v-icon>
+                      </v-btn>
+                    </template>
+                    <span>Décaler vers le bas</span>
+                  </v-tooltip>
+                  <v-tooltip bottom>
+                    <template v-slot:activator="{ on, attrs }">
+                      <v-btn
+                        outlined icon small color="success"
+                        v-bind="attrs"
+                        v-on="on"
+                        :disabled="removeExampleData"
+                        @click="openAddWhenModal(category)">
+                        <v-icon small>add</v-icon>
+                      </v-btn>
+                    </template>
+                    <span>Ajouter un crénau horaire</span>
+                  </v-tooltip>
                 </div>
-                <v-btn
-                  @click="openAddWhenModal(item)"
-                  outlined
-                  small
-                  color="success">
-                  Ajouter un horaire
-                </v-btn>
               </div>
             </v-card-title>
 
             <div class="d-flex align-center schedule-days">
               <v-list
-                v-if="Array.isArray(item.when) && item.when.length > 0"
+                v-if="Array.isArray(category.when) && category.when.length > 0"
                 dense
                 class="schedule-list">
                 <v-divider />
-                <div
-                  v-for="when in item.when"
-                  :key="when.day">
+                <div v-for="(when, index) in category.when" :key="index">
                   <v-list-item>
                     <v-list-item-content>
                       <div class="d-flex justify-space-between">
                         <div>{{ when.day }}</div>
-                        <div>{{ when.from }} - {{ when.to }}</div>
+                        <div class="teal--text lighten-2">{{ when.from }} <span class="grey--text lighten-2">-</span> {{ when.to }}</div>
                       </div>
                     </v-list-item-content>
                     <v-list-item-action>
                       <div class="d-flex justify-space-between">
-                        <v-btn icon color="info" @click="openEditWhenModal(when)">
+                        <v-btn
+                          icon color="info"
+                          :disabled="removeExampleData"
+                          @click="openEditWhenModal(when, category)">
                           <v-icon small>
                             edit
                           </v-icon>
                         </v-btn>
-                        <v-btn icon color="error" @click="openDeleteWhenModal(when)">
+                        <v-btn
+                          icon color="error"
+                          :disabled="removeExampleData"
+                          @click="openDeleteWhenModal(when, category)">
                           <v-icon small>delete</v-icon>
                         </v-btn>
                       </div>
@@ -88,8 +131,8 @@
                   <v-divider />
                 </div>
               </v-list>
-              <div v-else class="grey--text text--darken-1">
-                Pas d'intervalles horaires pour cette catégorie pour l'instant
+              <div v-else class="grey--text text--darken-1 px-4 py-4 text-center">
+                Pas de crénaux horaires pour cette catégorie pour l'instant
               </div>
             </div>
           </div>
@@ -148,10 +191,10 @@
       </v-card>
     </v-dialog>
     <v-dialog
-      max-width="500px"
+      max-width="700px"
       v-model="whenModal">
       <v-card>
-        <v-card-title v-text="modalTitle + ' un intervalle horaire'" />
+        <v-card-title v-text="modalTitle + ' un crénau horaire'" />
         <v-card-text>
           <v-select
             prepend-icon="event"
@@ -159,7 +202,31 @@
             :items="days"
             label="Sélectionnez un jour"
           ></v-select>
-          <v-menu
+          <v-row>
+            <v-col cols="12" sm="6" class="py-0">
+              <v-text-field
+                v-model="when.from"
+                label="Heure de début"
+                prepend-icon="schedule"
+              ></v-text-field>
+              <v-time-picker
+                v-model="formattedFrom"
+                format="24hr"
+                :max="formattedTo" />
+            </v-col>
+            <v-col cols="12" sm="6" class="py-0">
+              <v-text-field
+                v-model="when.to"
+                label="Heure de fin"
+                prepend-icon="schedule"
+              ></v-text-field>
+              <v-time-picker
+                v-model="formattedTo"
+                format="24hr"
+                :min="formattedFrom" />
+            </v-col>
+          </v-row>
+          <!-- <v-menu
             ref="fromMenu"
             v-model="fromMenu"
             :close-on-content-click="false"
@@ -183,8 +250,8 @@
               <v-spacer></v-spacer>
               <v-btn text color="primary" @click="$refs.fromMenu.save(when.from)">OK</v-btn>
             </v-time-picker>
-          </v-menu>
-          <v-menu
+          </v-menu> -->
+          <!-- <v-menu
             ref="toMenu"
             v-model="toMenu"
             :close-on-content-click="false"
@@ -203,18 +270,10 @@
                 v-on="on"
               ></v-text-field>
             </template>
-            <v-time-picker v-model="when.to" format="24hr">
-              <v-btn text color="primary" @click="toMenu = false">Fermer</v-btn>
-              <v-spacer></v-spacer>
-              <v-btn
-                text
-                color="primary"
-                @click="$refs.toMenu.save(when.to)">OK</v-btn>
-            </v-time-picker>
-          </v-menu>
+          </v-menu> -->
         </v-card-text>
         <v-card-actions>
-          <v-btn @click="categoryModal = false" text color="primary">
+          <v-btn @click="whenModal = false" text color="primary">
             Fermer
           </v-btn>
           <v-spacer />
@@ -222,7 +281,7 @@
             @click="saveWhen()"
             text
             color="success"
-            :disabled="when.day.length < 4 || when.to.length !== 5 || when.from.length !== 5">
+            :disabled="when.day.length < 4 || when.to === null || when.from === null || when.to.length !== 5 || when.from.length !== 5">
             Valider
           </v-btn>
         </v-card-actions>
@@ -233,7 +292,7 @@
       v-model="deleteWhenModal">
       <v-card>
         <v-card-title>
-          Voulez vous vraiment supprimer cette intervalle horaire ?
+          Voulez vous vraiment supprimer ce crénau horaire ?
         </v-card-title>
         <v-card-actions>
           <v-btn @click="deleteWhenModal = false" text color="primary">
@@ -252,105 +311,76 @@
 <script>
 export default {
   data: () => ({
-    scheduleData: [
+    removeExampleData: false,
+    exampleData: [
       {
-        name: 'Création de robot super cool',
-        description: 'Clita duo sanctus sed rebum elitr dolores et lorem stet',
+        name: "Catégorie d'horaire d'exemple",
+        description: `
+          Dans cet onglet vous pouvez renseigner les différents crénaux horaires que votre association propose.
+          Chaque crénau horaire est rangé dans une "catégorie horaire".
+          Une catégorie horaire peut par exemple regrouper les différents crénaux proposés pour une tranche d'age spécifique.
+        `,
         when: [
-          {
-            day: 'Lundi',
-            from: '13:45',
-            to: '14:25'
-          },
-          {
-            day: 'Mardi',
-            from: '10:30',
-            to: '11:00'
-          },
-          {
-            day: 'Mecredi',
-            from: '09:00',
-            to: '10:00'
-          }
-        ]
-      },
-      {
-        name: 'Introduction à la programmation',
-        description: 'Clita duo sanctus sed rebum elitr dolores et lorem stetEt ipsum sit et invidunt invidunt tempor lorem consetetur amet, takimata elitr sanctus nonumy at amet ut ut. Justo et stet sanctus no at at, sit ut sit vero rebum ipsum aliquyam vero. Ea at diam vero vero magna kasd ipsum. Diam ipsum amet consetetur sadipscing amet, sed lorem dolor.',
-        when: [
-          {
-            day: 'Lundi',
-            from: '13:45',
-            to: '14:25'
-          },
-          {
-            day: 'Mardi',
-            from: '10:30',
-            to: '11:00'
-          },
-          {
-            day: 'Mecredi',
-            from: '09:00',
-            to: '10:00'
-          }
-        ]
-      },
-      {
-        name: 'Ldsldsllds',
-        description: 'Clita duo sanctus sed rebum elitr dolores et lorem stetEt ipsum sit et invidunt invidunt tempor lorem consetetur amet, takimata elitr sanctus nonumy at amet ut ut. Justo et stet sanctus no at at, sit ut sit vero rebum ipsum aliquyam vero. Ea at diam vero vero magna kasd ipsum. Diam ipsum amet consetetur sadipscing amet, sed lorem dolor.',
-        when: [
-          {
-            day: 'Lundi',
-            from: '13:45',
-            to: '14:25'
-          },
-          {
-            day: 'Mardi',
-            from: '10:30',
-            to: '11:00'
-          },
-          {
-            day: 'Mecredi',
-            from: '09:00',
-            to: '10:00'
-          }
+          { day: 'Lundi', from: '13:45', to: '14:25' },
+          { day: 'Mardi', from: '10:30', to: '11:00' },
+          { day: 'Mecredi', from: '09:00', to: '10:00' }
         ]
       }
     ],
     mode: '',
     categoryModal: false,
-    category: {
-      name: '',
-      description: ''
-    },
+    category: { name: '', description: '' },
     deleteCategoryModal: false,
     toDeleteCategory: {},
     oldEditCategory: {},
     whenModal: false,
-    when: {
-      day: '',
-      from: '',
-      to: ''
-    },
+    when: { day: '', from: '', to: '' },
     deleteWhenModal: false,
     toDeleteWhen: {},
     oldEditWhen: {},
     fromMenu: false,
     toMenu: false,
-    days: [
-      'Lundi',
-      'Mardi',
-      'Mercredi',
-      'Jeudi',
-      'Vendredi',
-      'Samedi'
-    ]
+    days: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'],
+    formattedFrom: null,
+    formattedTo: null
   }),
 
+  created () {
+    if (this.$store.state.data.schedule.length === 0) {
+      this.removeExampleData = true
+      this.$store.commit('SET_DATA', {
+        schedule: this.exampleData
+      })
+    }
+  },
+
+  destroyed () {
+    if (this.removeExampleData) {
+      this.$store.commit('SET_DATA', {
+        schedule: []
+      })
+    }
+  },
+
   computed: {
     modalTitle () { return this.mode === 'add' ? 'Ajouter' : 'Editer' }
   },
 
+  watch: {
+    'when.from' () { this.formattedFrom = /^[0-9]{1,2}:[0-9]{1,2}$/gm.test(this.when.from) ? this.when.from : null },
+    'when.to' () { this.formattedTo = /^[0-9]{1,2}:[0-9]{1,2}$/gm.test(this.when.to) ? this.when.to : null },
+    'formattedTo' (val) {
+      if (val !== this.when.to) {
+        this.when.to = val
+      }
+    },
+    'formattedFrom' (val) {
+      if (val !== this.when.from) {
+        this.when.from = val
+      }
+    }
+  },
+
   methods: {
     openAddCategoryModal () {
       this.mode = 'add'
@@ -368,6 +398,10 @@ export default {
     },
     saveCategory () {
       let schedule = this.$store.state.data.schedule
+      if (this.removeExampleData) {
+        schedule = []
+        this.removeExampleData = false
+      }
       if (this.mode === 'add') {
         this.category._id = Date.now().toString()
         schedule.push(this.category)
@@ -388,21 +422,51 @@ export default {
       this.$store.commit('SET_DATA', { schedule })
       this.deleteCategoryModal = false
     },
-
+    shiftCategoryUp (item) {
+      const original = this.$store.state.data.schedule
+      const index = original.indexOf(item)
+      if (index === 0) { return }
+      this.$store.commit('SET_DATA', {
+        schedule: original.map((m, i) => {
+          if (i === index - 1) { return original[index] }
+          if (i === index) { return original[index - 1] }
+          return m
+        })
+      })
+    },
+    shiftCategoryDown (item) {
+      const original = this.$store.state.data.schedule
+      const index = original.indexOf(item)
+      if (index === original.length - 1) { return }
+      this.$store.commit('SET_DATA', {
+        schedule: original.map((m, i) => {
+          if (i === index + 1) { return original[index] }
+          if (i === index) { return original[index + 1] }
+          return m
+        })
+      })
+    },
     openAddWhenModal (parent) {
       this.mode = 'add'
       this.whenParent = parent
       this.whenModal = true
+      this.when = {
+        day: '',
+        from: '',
+        to: ''
+      }
     },
-    openEditWhenModal (item) {
+    openEditWhenModal (item, parent) {
       this.when = item
       this.oldEditWhen = item
       this.mode = 'edit'
       this.whenModal = true
+      this.whenParent = parent
     },
-    openDeleteWhenModal (item) {
+    openDeleteWhenModal (item, parent) {
       this.deleteWhenModal = true
       this.toDeleteWhen = item
+      this.whenParent = parent
     },
     saveWhen () {
       let schedule = this.$store.state.data.schedule
@@ -415,6 +479,8 @@ export default {
             }
             i.when.push(this.when)
           }
+          // sort all days
+          i.when = i.when.sort((a, b) => this.days.indexOf(a.day) >= this.days.indexOf(b.day) ? 1 : -1)
           return i
         })
       } else {
@@ -422,6 +488,8 @@ export default {
           if (this.whenParent._id === i._id) {
             i.when = i.when.map(w => w._id === this.when._id ? this.when : w)
           }
+          // sort all days
+          i.when = i.when.sort((a, b) => this.days.indexOf(a.day) >= this.days.indexOf(b.day) ? 1 : -1)
           return i
         })
       }
@@ -464,6 +532,9 @@ export default {
     display: flex;
     align-items: center;
   }
+  .schedule-item.disabled {
+    opacity: .8;
+  }
   @media (max-width: 900px) {
     .schedule-content {
       grid-template-columns: 1fr;
diff --git a/yarn.lock b/yarn.lock
index 1384a54..edb29e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8627,10 +8627,10 @@ tiptap-utils@^1.10.1:
     prosemirror-tables "^1.1.0"
     prosemirror-utils "^0.9.6"
 
-tiptap-vuetify@^2.23.0:
-  version "2.23.0"
-  resolved "https://registry.yarnpkg.com/tiptap-vuetify/-/tiptap-vuetify-2.23.0.tgz#dc6ad26bd029a6392ae86cc5eb9d4b173a211ac6"
-  integrity sha512-Yr6ra2XYAxmF2wM+EALaAyTpiqtql3TPa651+aVAGKlkP3Vr3Ydm6+rtTA/GAlspX3IPq/x61DG4NDrKdMnZMQ==
+tiptap-vuetify@2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/tiptap-vuetify/-/tiptap-vuetify-2.24.0.tgz#0bfff0d5ffd13f1dfb5c42c2e70fe17b2812913b"
+  integrity sha512-9GDXYr/wux8i2vVCOpigmDZDaBfjqO9OCxctWlH6zwNKr4enN0jfIySd6CDHN7E5eY7Vn61etkfQ4sRVGvH80g==
   dependencies:
     popper.js "^1.16.1"
     tiptap "^1.16.2"
