diff --git a/backoffice/src/App.vue b/backoffice/src/App.vue
index 17ae4b4931b701dd98289a7171ea9e7df585b658..7e46b282f3587d45eb52748f1bdc054f8f6a5331 100644
--- a/backoffice/src/App.vue
+++ b/backoffice/src/App.vue
@@ -201,6 +201,19 @@
     background-color : #384EAA;
     color: white;
   }
+  .main-button:hover:disabled {
+    border: 1px solid #384EAA;
+    background-color : #BDBADE;
+    color: black;
+  }
+  .main-button-primary {
+    background-color : #384EAA;
+    color: white;
+  }
+  .main-button-primary:hover {
+    background-color : #0D0850;
+    color: white;
+  }
   .loading-gif {
     padding-top: 8rem;
   }
diff --git a/backoffice/src/components/Accueil.vue b/backoffice/src/components/Accueil.vue
index b2aee149643ea6f5114a4de447cfdc1f216b1d2f..a98e4aa0f0757dc1e28e4459ab88828d289f55c2 100644
--- a/backoffice/src/components/Accueil.vue
+++ b/backoffice/src/components/Accueil.vue
@@ -12,29 +12,36 @@
           </div>
         </div>
         <div class="row mt-3">
-          <div class="col-md-4">
+          <div class="col-md-4 col-sm-12">
             <div id="chart-container">
               <ModificationChart  @on-receive="update" :values="modification_chart_datas.datasets" :labels="modification_chart_datas.labels"></ModificationChart>
             </div>
           </div>
-          <div class="col-md-8">
-            <div id="modification_list">
-              <div v-if="selected_rule">
-                <h5> Modification(s) de la règle {{ selected_rule }} ({{ Object.keys(selected_modification_list).length }}) </h5> 
-                <ul v-for="modification in selected_modification_list" :key="modification.id" class="dash">
-                  <li>
-                    <a :href="'referentiel#'+selected_rule+'.rules#modified'"> {{ modification.title }} </a>
-                  </li>
-                </ul>
-              </div>
-              <div v-else>
-                <h5> Toutes les modifications ({{ Object.keys(modification_list).length }})</h5>
-                <ul v-for="modification in modification_list" :key="modification.id" class="dash">
-                  <li> {{ modification.title }} </li>
-                </ul>
+          <div v-if="!isLoading">
+            <div class="col-md-8 col-sm-12">
+              <div id="modification_list">
+                <div v-if="selected_rule">
+                  <h5> Modification(s) de la règle en cours de validation {{ selected_rule }} ({{ Object.keys(selected_modification_list).length }}) </h5> 
+                  <ul v-for="modification in selected_modification_list" :key="modification.id" class="dash">
+                    <li>
+                      <a :href="'referentiel#'+selected_rule+'.rules#modified'"> {{ modification.title }} </a>
+                    </li>
+                  </ul>
+                </div>
+                <div v-else>
+                  <h5> Toutes les modifications en cours de validation ({{ Object.keys(modification_list).length }})</h5>
+                  <ul v-for="modification in modification_list" :key="modification.id" class="dash">
+                    <li>
+                      <a :href="'referentiel#'+modification.file.split('/').pop().split('.')[0]+'.rules#modified'"> {{ modification.title }} - ({{ modification.file.split('/').pop().split('.')[0] }})</a>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
           </div>
+          <div v-else class="text-center loading-gif">
+            <img src="./../assets/images/loading.gif" alt="loading...">
+          </div>
         </div>
       </div>
     </div>
@@ -54,6 +61,7 @@
         selected_modification_list: {},
         selected_rule: '',
         test:0,
+        isLoading: true,
       }
     },
     beforeMount: function() {
@@ -65,9 +73,11 @@
           .get('/source/modified')
           .then(response => {
             this.modification_list = response.body;
+            this.isLoading = false;
             return true;
           }, response => {
             if(response.status == 500) this.modification_list = {};
+            this.isLoading = false;
             return false;
           })
       },
diff --git a/backoffice/src/components/Financements.vue b/backoffice/src/components/Financements.vue
index ab0102a18e95afded0b3f88d85ce0b21336234d7..38050598b96b40aba11deae8b6138be928f384c8 100644
--- a/backoffice/src/components/Financements.vue
+++ b/backoffice/src/components/Financements.vue
@@ -13,7 +13,7 @@
               <div id="financement-create-financement" class="col-md-6 col-sm-12 col-xs-12 my-auto">
                 <div class="form-inline pull-right">
                   <div class="form-group mx-sm-3 mb-2">
-                    <input type="button" href="#" class="btn btn-outline-success form-control" value="Créer un financement"  disabled />
+                    <input type="button" href="#" class="btn main-button form-control" value="Créer un financement"  disabled />
                   </div>
                 </div>
               </div>
diff --git a/backoffice/src/components/Modification.vue b/backoffice/src/components/Modification.vue
index bde7c3fe671c830a3b00c5a85f5a2a943c93888b..be31d0add8e9d25f3e8fc5ad1dadcf127c269de7 100644
--- a/backoffice/src/components/Modification.vue
+++ b/backoffice/src/components/Modification.vue
@@ -53,7 +53,8 @@
             'tag-file-renamed': '<span class="d2h-tag d2h-moved d2h-moved-tag">RENOMMÉ</span>',
             'tag-file-added': '<span class="d2h-tag d2h-added d2h-added-tag">AJOUTÉ</span>',
             'file-summary-wrapper': '<div class="d2h-file-list-wrapper"><div class="d2h-file-list-header"><span class="d2h-file-list-title">Fichiers modifiés ({{filesNumber}})</span><a class="d2h-file-switch d2h-hide">cacher</a><a class="d2h-file-switch d2h-show">show</a></div><ol class="d2h-file-list">{{{files}}}</ol></div>',
-            'generic-wrapper': '<div class="d2h-wrapper">{{{content}}}</div>'
+            'generic-wrapper': '<div class="d2h-wrapper">{{{content}}}</div>',
+            'file-summary-line':'<li class="d2h-file-list-line"><span class="d2h-file-name-wrapper">{{>fileIcon}}<a href="#'+this.modification.file.split('/').pop()+'" class="d2h-file-name">{{fileName}}</a><span class="d2h-file-stats"><span class="d2h-lines-added">{{addedLines}}</span><span class="d2h-lines-deleted">{{deletedLines}}</span></span></span></li>'
           }
         });
       },
diff --git a/backoffice/src/components/Referentiel.vue b/backoffice/src/components/Referentiel.vue
index b57b561e7df799d80fce32af6c6803f839b7f6c8..688d79afdcf640cf51d529f3450bcbafab3bc2e5 100644
--- a/backoffice/src/components/Referentiel.vue
+++ b/backoffice/src/components/Referentiel.vue
@@ -78,14 +78,14 @@
       },
       printRulePath: function () {
         var path = "";
-        var printpath = "(";
+        var printpath = "";
         if(this.windowLocationHash.split('#').length -1 > 1) {
           for(var i=1; i <= this.windowLocationHash.split('#').length -1; i++) {
             if (this.windowLocationHash.split('#').pop() == 'modified') return "";
             path += "#"+ this.windowLocationHash.split('#')[i];
-            if (i == this.windowLocationHash.split('#').length - 1) printpath += "<a href='"+ path + "'>" + this.windowLocationHash.split('#')[i] + "</a>"
-            else printpath += "<a href='"+ path + "'>" + this.windowLocationHash.split('#')[i] + "</a> > ";
-          } return printpath+")";
+            if (i == this.windowLocationHash.split('#').length - 1) printpath += "<a class='btn main-button' href='"+ path + "'>" + this.windowLocationHash.split('#')[i] + "</a>"
+            else printpath += "<a class='btn main-button' href='"+ path + "'>" + this.windowLocationHash.split('#')[i] + "</a> <b>></b> ";
+          } return printpath;
         } else return "";
       },
       rulePath: function () {
diff --git a/backoffice/src/components/Rule.vue b/backoffice/src/components/Rule.vue
index 30d5bfcc3195041b6bc385d688b3d5cde35df998..3e0ff3345cc1b109ad1306905ef1c1bbd8b1423f 100644
--- a/backoffice/src/components/Rule.vue
+++ b/backoffice/src/components/Rule.vue
@@ -7,11 +7,16 @@
             <h5>
               <span style="vertical-align:-30%" >{{ displayedName }}</span>
             </h5>
-            <a :href="'#'+name+'#modified'" v-if="this.modification_count" @click="displayModification()" id="modification_link">({{ this.modification_count }} modification<span v-if="this.modification_count > 1">s</span> en cours)</a>
+            <div v-if="this.modifiedHashFlag">
+              <a :href="'#'+name" v-if="this.modification_count" @click="displayList()" id="modification_link">Retour à la liste</a>
+            </div>
+            <div v-else>
+              <a :href="'#'+name+'#modified'" v-if="this.modification_count" @click="displayModification()" id="modification_link">({{ this.modification_count }} modification<span v-if="this.modification_count > 1">s</span> en cours)</a>
+            </div>
           </div>
           <div class="col-md-6 col-sm-12 col-xs-12">
             <h4 v-if="isEditMode" class="pull-right"><em>Modification de la règle</em></h4>
-            <input v-else v-b-modal.auth-modal type="button" class="main-button btn pull-right" value="Soumettre une modification"/>
+            <input v-else v-b-modal.auth-modal type="button" class="main-button-primary btn pull-right" value="Soumettre une modification"/>
             <!-- TODO: show gitlab link of modification if exists -->
           </div>
         </div>
@@ -32,15 +37,15 @@
         </ul>
       </div>
       <div v-show="isEditMode">
-        <div class="row mb-3">
-          <div class="col-md-6 pl-0">
-            <input @click="closeEdit" type="button" class="btn btn-outline-danger pull-left" value="Annuler"/>
-          </div>
-          <div class="col-md-6 pr-0">
-            <button v-b-modal.mail-modal class="btn btn-outline-success pull-right">Enregistrer</button>
-          </div>
-        </div>
         <div class="container">
+          <div class="row mb-3">
+            <div class="col-md-6 pl-0">
+              <input @click="closeEdit" type="button" class="btn btn-outline-danger pull-left" value="Annuler"/>
+            </div>
+            <div class="col-md-6 pr-0">
+              <button v-b-modal.mail-modal class="btn main-button-primary pull-right">Enregistrer</button>
+            </div>
+          </div>
           <div class="row mb-3">
             <label for="content"><u>Contenu de la règle</u></label>
             <textarea-autosize id="content" v-model="content" class="rule-modification-text" :class="{editErrorClass: error_flags.notModified }"></textarea-autosize>
@@ -51,7 +56,7 @@
               <input @click="closeEdit" type="button" class="btn btn-outline-danger pull-left" value="Annuler"/>
             </div>
             <div class="col-md-6 pr-0">
-              <button v-b-modal.mail-modal class="btn btn-outline-success pull-right">Enregistrer</button>
+              <button v-b-modal.mail-modal class="btn main-button-primary pull-right">Enregistrer</button>
             </div>
           </div>
         </div>
@@ -65,7 +70,7 @@
           <span v-if="error_flags.noPass" class="text-danger font-weight-light">Ce champ est obligatoire<br></span>
           <span v-if="!error_flags.noUser && !error_flags.noPass" class="font-weight-light">* Champs obligatoires<br></span>
           <template v-slot:modal-footer>       
-            <input @click="auth_to_edit" type="button" class="btn btn-outline-success pull-right" value="Suivant"/>
+            <input @click="auth_to_edit" type="button" class="btn main-button-primary pull-right" value="Suivant"/>
           </template>
         </b-modal>
 
@@ -75,7 +80,7 @@
           <span v-if="error_flags.noResume" class="text-danger font-weight-light">Ce champ est obligatoire</span>
           <span v-if="!error_flags.noUser && !error_flags.noResume" class="font-weight-light">* Champ obligatoire</span>
           <template v-slot:modal-footer>       
-            <input @click="save" type="button" class="btn btn-outline-success pull-right" value="Enregistrer"/>
+            <input @click="save" type="button" class="btn main-button-primary pull-right" value="Enregistrer"/>
           </template>
         </b-modal>
 
@@ -105,6 +110,8 @@
     props: ['name', 'data', 'path', 'printRulePath', 'rulePath'],
     data: function(){
       return {
+        windowLocationHash: '',
+        modifiedHashFlag: decodeURI(window.location.hash).split('#').pop() == "modified",
         isLoading: true,
         ruleData: this.data,
         modification_list: [],
@@ -126,11 +133,13 @@
         },
       }
     },
-    beforeMount: function() {
+    created: function() {
       this.loadInProgressModification();
-      if (decodeURI(window.location.hash).split('#').pop() == "modified") { 
-        this.displayModification();
-      }
+      this.updateLayout();
+
+      window.addEventListener('popstate', () => {
+        this.updateLayout();             
+      })
     },
     computed: {
       displayedName: function () {
@@ -147,6 +156,17 @@
       },
     },
     methods: {
+      updateLayout: function() {
+        this.windowLocationHash = decodeURI(window.location.hash);
+        this.modifiedHashFlag = decodeURI(window.location.hash).split('#').pop() == "modified";
+        if (this.modifiedHashFlag) {
+          this.currentRuleName = decodeURI(window.location.hash).split('#')[1];
+          this.displayModification();
+        } else {
+          this.currentRuleName = decodeURI(window.location.hash).split('#').pop();
+          this.viewModification = false;
+        }  
+      },
       loadInProgressModification: function () {
         this.$http
           .get('/source/modified?branch='+encodeURIComponent(this.displayedName))
@@ -210,7 +230,6 @@
         };
       },
       save: function() {
-        console.log('test');
         this.ruleData = this.content
         if (this.comment == '') {
           this.error_flags.noResume = true;
@@ -302,7 +321,12 @@
         return root;
       },
       displayModification: function () {
-        this.viewModification = !this.viewModification;
+        this.viewModification = true;
+        this.$parent.collapsed = true;
+        this.isEditMode = false;
+      },
+      displayList: function () {
+        this.viewModification = false;
         this.$parent.collapsed = true;
         this.isEditMode = false;
       }
diff --git a/backoffice/vue.config.js b/backoffice/vue.config.js
index bc2029e92187d6126f94e8fbd3c094589f0aa599..c4c8647951f6b3455f32c330e2844156ffe19a9e 100644
--- a/backoffice/vue.config.js
+++ b/backoffice/vue.config.js
@@ -2,6 +2,6 @@ module.exports = {
     publicPath: "/0.7/explorer/",
     assetsDir: "src/assets/",
     devServer: {
-        proxy: 'https://trefle.beta.pole-emploi.fr/0.6/'
+        proxy: 'https://trefle.beta.pole-emploi.fr/0.7/'
     }
 }