diff --git a/Gemfile b/Gemfile
index aea82425d..e6d77a9ab 100644
--- a/Gemfile
+++ b/Gemfile
@@ -16,7 +16,7 @@ gem 'therubyracer', platforms: :ruby
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
 # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
-gem 'turbolinks', '~> 2.5'
+gem 'turbolinks', '~> 5.0'
 # bundle exec rake doc:rails generates the API under doc/api.
 gem 'sdoc', '~> 0.4.0', group: :doc
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 3eb20b63b..40665e46f 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -95,7 +95,7 @@ GEM
     bootstrap-wysihtml5-rails (0.3.3.8)
       railties (>= 3.0)
     browser (2.3.0)
-    builder (3.2.2)
+    builder (3.2.3)
     byebug (9.0.6)
     capybara (2.11.0)
       addressable
@@ -120,8 +120,8 @@ GEM
     coffee-script (2.4.1)
       coffee-script-source
       execjs
-    coffee-script-source (1.11.1)
-    concurrent-ruby (1.0.2)
+    coffee-script-source (1.12.2)
+    concurrent-ruby (1.0.5)
     connection_pool (2.2.1)
     crack (0.4.3)
       safe_yaml (~> 1.0.0)
@@ -331,7 +331,7 @@ GEM
       domain_name (~> 0.5)
     http_parser.rb (0.6.0)
     httpclient (2.8.3)
-    i18n (0.7.0)
+    i18n (0.8.1)
     inflecto (0.0.2)
     ipaddress (0.8.3)
     jquery-rails (4.2.1)
@@ -452,9 +452,9 @@ GEM
       actionpack (~> 5.x)
       actionview (~> 5.x)
       activesupport (~> 5.x)
-    rails-dom-testing (2.0.1)
+    rails-dom-testing (2.0.2)
       activesupport (>= 4.2.0, < 6.0)
-      nokogiri (~> 1.6.0)
+      nokogiri (~> 1.6)
     rails-html-sanitizer (1.0.3)
       loofah (~> 2.0)
     railties (5.0.0.1)
@@ -585,13 +585,14 @@ GEM
       libv8 (~> 3.16.14.0)
       ref
     thor (0.19.4)
-    thread_safe (0.3.5)
+    thread_safe (0.3.6)
     tilt (2.0.5)
     timecop (0.8.1)
     trollop (2.1.2)
-    turbolinks (2.5.3)
-      coffee-rails
-    tzinfo (1.2.2)
+    turbolinks (5.0.1)
+      turbolinks-source (~> 5)
+    turbolinks-source (5.0.0)
+    tzinfo (1.2.3)
       thread_safe (~> 0.1)
     uglifier (3.0.4)
       execjs (>= 0.3.0, < 3)
@@ -707,7 +708,7 @@ DEPENDENCIES
   sqlite3
   therubyracer
   timecop
-  turbolinks (~> 2.5)
+  turbolinks (~> 5.0)
   uglifier (>= 1.3.0)
   unicode_utils
   unicorn
diff --git a/app/assets/javascripts/action_btn_rules.js b/app/assets/javascripts/action_btn_rules.js
index 7202d53b6..7ade4a9f9 100644
--- a/app/assets/javascripts/action_btn_rules.js
+++ b/app/assets/javascripts/action_btn_rules.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', init_action_btn_rules);
-$(document).ready(init_action_btn_rules);
+$(document).on('turbolinks:load', init_action_btn_rules);
 
 function init_action_btn_rules() {
   $('.btn-send').click(function () {
diff --git a/app/assets/javascripts/admin.js b/app/assets/javascripts/admin.js
index 967633a7b..8d6abc079 100644
--- a/app/assets/javascripts/admin.js
+++ b/app/assets/javascripts/admin.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', init_admin);
-$(document).ready(init_admin);
+$(document).on('turbolinks:load', init_admin);
 
 function init_admin(){
     destroy_action();
diff --git a/app/assets/javascripts/admin_procedures_modal.js b/app/assets/javascripts/admin_procedures_modal.js
index 38112328c..3ca435a23 100644
--- a/app/assets/javascripts/admin_procedures_modal.js
+++ b/app/assets/javascripts/admin_procedures_modal.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', init_path_modal);
-$(document).ready(init_path_modal);
+$(document).on('turbolinks:load', init_path_modal);
 
 function init_path_modal() {
     path_modal_action();
@@ -95,4 +94,4 @@ function transfer_errors_message(show) {
     else {
         $("#not_found_admin").slideUp(100)
     }
-}
\ No newline at end of file
+}
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index a7827dfc8..41257fc29 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -33,8 +33,7 @@
 //= require typeahead.bundle
 //= require select2
 
-$(document).on('page:load', application_init);
-$(document).ready(application_init);
+$(document).on('turbolinks:load', application_init);
 
 
 function application_init(){
@@ -55,4 +54,3 @@ function scroll_to() {
         return false;
     });
 }
-
diff --git a/app/assets/javascripts/archive.js b/app/assets/javascripts/archive.js
index 7497960e5..f44b3158f 100644
--- a/app/assets/javascripts/archive.js
+++ b/app/assets/javascripts/archive.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', buttons_archived);
-$(document).ready(buttons_archived);
+$(document).on('turbolinks:load', buttons_archived);
 
 function buttons_archived(){
     $("button#archive").on('click', function(){
@@ -11,4 +10,4 @@ function buttons_archived(){
         $("button#archive").show();
         $("#confirm").hide();
     });
-}
\ No newline at end of file
+}
diff --git a/app/assets/javascripts/bootstrap_wysihtml5.js b/app/assets/javascripts/bootstrap_wysihtml5.js
index b0606ce8a..fa99d2a92 100644
--- a/app/assets/javascripts/bootstrap_wysihtml5.js
+++ b/app/assets/javascripts/bootstrap_wysihtml5.js
@@ -1,5 +1,4 @@
-$(document).ready(wysihtml5_active);
-$(document).on('page:load', wysihtml5_active);
+$(document).on('turbolinks:load', wysihtml5_active);
 
 function wysihtml5_active (){
     $('.wysihtml5').each(function(i, elem) {
diff --git a/app/assets/javascripts/cgu.js b/app/assets/javascripts/cgu.js
index b0008d676..fe944fc04 100644
--- a/app/assets/javascripts/cgu.js
+++ b/app/assets/javascripts/cgu.js
@@ -1,9 +1,8 @@
-$(document).on('page:load', buttons_anchor);
-$(document).ready(buttons_anchor);
+$(document).on('turbolinks:load', buttons_anchor);
 
 function buttons_anchor(){
     $("#cgu_menu_block").on('click', 'a', function(){
         event.preventDefault();
         $('html,body').animate({scrollTop:$(this.hash).offset().top-80}, 500);
     });
-}
\ No newline at end of file
+}
diff --git a/app/assets/javascripts/default_data_block.js b/app/assets/javascripts/default_data_block.js
index 1ff875ddf..4e422f491 100644
--- a/app/assets/javascripts/default_data_block.js
+++ b/app/assets/javascripts/default_data_block.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', init_default_data_block);
-$(document).ready(init_default_data_block);
+$(document).on('turbolinks:load', init_default_data_block);
 
 function init_default_data_block() {
     $('.default_data_block #dossier .body').toggle();
diff --git a/app/assets/javascripts/description.js b/app/assets/javascripts/description.js
index 6df9f436d..0776c4710 100644
--- a/app/assets/javascripts/description.js
+++ b/app/assets/javascripts/description.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', action_type_de_champs);
-$(document).ready(action_type_de_champs);
+$(document).on('turbolinks:load', action_type_de_champs);
 
 
 function action_type_de_champs() {
diff --git a/app/assets/javascripts/dossier_commentaires_modal.js b/app/assets/javascripts/dossier_commentaires_modal.js
index ee6610c89..b0218aaef 100644
--- a/app/assets/javascripts/dossier_commentaires_modal.js
+++ b/app/assets/javascripts/dossier_commentaires_modal.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', init_modal_commentaire);
-$(document).ready(init_modal_commentaire);
+$(document).on('turbolinks:load', init_modal_commentaire);
 
 function init_modal_commentaire() {
     var modal = $("#modalCommentairesDossierParChamp");
diff --git a/app/assets/javascripts/dossiers.js b/app/assets/javascripts/dossiers.js
index c294b6c16..2902934e8 100644
--- a/app/assets/javascripts/dossiers.js
+++ b/app/assets/javascripts/dossiers.js
@@ -1,7 +1,5 @@
-$(document).on('page:load', the_terms);
-$(document).ready(the_terms);
-$(document).on('page:load', pannel_switch);
-$(document).ready(pannel_switch);
+$(document).on('turbolinks:load', the_terms);
+$(document).on('turbolinks:load', pannel_switch);
 
 function pannel_switch() {
   $('#switch-notifications').click(function () {
diff --git a/app/assets/javascripts/dossiers_list_filter.js b/app/assets/javascripts/dossiers_list_filter.js
index 389eb6199..1fbe470d1 100644
--- a/app/assets/javascripts/dossiers_list_filter.js
+++ b/app/assets/javascripts/dossiers_list_filter.js
@@ -1,14 +1,13 @@
-$(document).on('page:load', filters_init);
-$(document).ready(filters_init);
+$(document).on('turbolinks:load', filters_init);
 
 function filters_init() {
-    $('html').click(function(event) { 
+    $('html').click(function(event) {
         var visible_filter = $('.filter_framed:visible')
         if(visible_filter.length) {
           if (!$(event.target).closest('.filter_framed').is(":visible")) {
             visible_filter.hide();
           }
-        }        
+        }
     });
 
     $(".filter").on('click', function (event) {
diff --git a/app/assets/javascripts/dossiers_list_link.js b/app/assets/javascripts/dossiers_list_link.js
index 09fb31542..147e109a3 100644
--- a/app/assets/javascripts/dossiers_list_link.js
+++ b/app/assets/javascripts/dossiers_list_link.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', link_init);
-$(document).ready(link_init);
+$(document).on('turbolinks:load', link_init);
 
 function link_init() {
   $('#dossiers_list tr').on('click', function () {
diff --git a/app/assets/javascripts/franceconnect_kit.js b/app/assets/javascripts/franceconnect_kit.js
index 29b4b5f37..0432ecf74 100644
--- a/app/assets/javascripts/franceconnect_kit.js
+++ b/app/assets/javascripts/franceconnect_kit.js
@@ -1,7 +1,5 @@
-$(document).on('page:load', franceconnect_kit);
-$(document).ready(franceconnect_kit);
+$(document).on('turbolinks:load', franceconnect_kit);
 
 function franceconnect_kit() {
     franceConnectKit.init()
 }
-
diff --git a/app/assets/javascripts/gestionnaire_dossier_modal.js b/app/assets/javascripts/gestionnaire_dossier_modal.js
index 2632ab407..807eec9fd 100644
--- a/app/assets/javascripts/gestionnaire_dossier_modal.js
+++ b/app/assets/javascripts/gestionnaire_dossier_modal.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', modal_action);
-$(document).ready(modal_action);
+$(document).on('turbolinks:load', modal_action);
 
 function modal_action() {
     $('#PJmodal').on('show.bs.modal', function (event) {
diff --git a/app/assets/javascripts/pref_list_dossier.js b/app/assets/javascripts/pref_list_dossier.js
index 977778ff1..ffcd7b326 100644
--- a/app/assets/javascripts/pref_list_dossier.js
+++ b/app/assets/javascripts/pref_list_dossier.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', pref_list_dossier_actions);
-$(document).ready(pref_list_dossier_actions);
+$(document).on('turbolinks:load', pref_list_dossier_actions);
 
 function pref_list_dossier_actions() {
     pref_list_dossier_open_action();
diff --git a/app/assets/javascripts/procedure.js b/app/assets/javascripts/procedure.js
index b3fa21dd3..aec66d50e 100644
--- a/app/assets/javascripts/procedure.js
+++ b/app/assets/javascripts/procedure.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', button_edit_procedure_init);
-$(document).ready(button_edit_procedure_init);
+$(document).on('turbolinks:load', button_edit_procedure_init);
 
 function button_edit_procedure_init(){
     buttons_api_carto();
@@ -35,4 +34,4 @@ function button_individual () {
 
     if ($('#procedure_for_individual').is(':checked'))
         $("#individual_with_siret").show();
-}
\ No newline at end of file
+}
diff --git a/app/assets/javascripts/search.js b/app/assets/javascripts/search.js
index 689f65f37..a47c6993c 100644
--- a/app/assets/javascripts/search.js
+++ b/app/assets/javascripts/search.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', init_search_anim);
-$(document).ready(init_search_anim);
+$(document).on('turbolinks:load', init_search_anim);
 
 function init_search_anim(){
     $("#search_area").on('click', search_fadeIn);
diff --git a/app/assets/javascripts/user/description.js b/app/assets/javascripts/user/description.js
index cdae9a4c1..c1ac0aabf 100644
--- a/app/assets/javascripts/user/description.js
+++ b/app/assets/javascripts/user/description.js
@@ -1,5 +1,4 @@
-$(document).on('page:load', activeSelect2);
-$(document).ready(activeSelect2);
+$(document).on('turbolinks:load', activeSelect2);
 
 function activeSelect2() {
   $('select.select2').select2({ theme: "bootstrap", width: '100%' });
diff --git a/app/assets/stylesheets/_turbolinks.scss b/app/assets/stylesheets/_turbolinks.scss
new file mode 100644
index 000000000..3a6401063
--- /dev/null
+++ b/app/assets/stylesheets/_turbolinks.scss
@@ -0,0 +1,5 @@
+@import "variables";
+
+.turbolinks-progress-bar {
+  background-color: $light-blue;
+}
diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index daf479d2c..701b59ca1 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -1 +1,5 @@
-$font-size-base: 16px;
\ No newline at end of file
+// colors
+$light-blue: #F2F6FA;
+
+// Bootstrap variables
+$font-size-base: 16px;
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 6d4168935..dd10a3f2b 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -27,7 +27,7 @@
 @import "bootstrap";
 
 body {
-  background-color: #F2F6FA;
+  background-color: $light-blue;
 }
 
 html, body {
@@ -63,7 +63,7 @@ form {
 }
 
 #footer {
-  background-color: #F2F6FA;
+  background-color: $light-blue;
   text-align: center;
   padding: 0;
   a, p {
diff --git a/app/assets/stylesheets/default_data_block.scss b/app/assets/stylesheets/default_data_block.scss
index 9de8963fe..9590ce8ff 100644
--- a/app/assets/stylesheets/default_data_block.scss
+++ b/app/assets/stylesheets/default_data_block.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 .default_data_block {
   font-family: Arial;
 
@@ -53,7 +55,7 @@
       color: #FFFFFF;
     }
     .action:hover {
-      color: #F2F6FA;
+      color: $light-blue;
     }
     .count {
       font-size: 16px;
diff --git a/app/assets/stylesheets/navbar.scss b/app/assets/stylesheets/navbar.scss
index bf35549e1..1ed38032d 100644
--- a/app/assets/stylesheets/navbar.scss
+++ b/app/assets/stylesheets/navbar.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 #header {
   top: 0;
   left: 0;
@@ -185,7 +187,7 @@
   }
 }
 .button-navbar-action:hover {
-  color: #F2F6FA;
+  color: $light-blue;
 }
 
 .button_navbar:hover, .button-navbar-action:hover {
diff --git a/app/assets/stylesheets/users.scss b/app/assets/stylesheets/users.scss
index 8b734bee7..bdf586ad3 100644
--- a/app/assets/stylesheets/users.scss
+++ b/app/assets/stylesheets/users.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 #users_index, #admins_index{
   margin-left: 2rem;
   margin-right: 2rem;
@@ -48,7 +50,7 @@
     padding: 10px;
   }
   .action:hover {
-    color: #F2F6FA;
+    color: $light-blue;
   }
   .padding-left-30 {
     padding-left: 30px;
diff --git a/app/views/users/carte/_init_carto.html.haml b/app/views/users/carte/_init_carto.html.haml
index fdb2f12cc..8516fe270 100644
--- a/app/views/users/carte/_init_carto.html.haml
+++ b/app/views/users/carte/_init_carto.html.haml
@@ -1,4 +1,3 @@
 %script{type: 'text/javascript'}
   ="var dossier_id =#{dossier.id}"
-  $(document).on('page:load', initCarto);
-  $(document).ready(initCarto);
\ No newline at end of file
+  $(document).on('turbolinks:load', initCarto);