diff --git a/Gemfile.lock b/Gemfile.lock
index 07df75a5..4401ae9e 100755
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -42,10 +42,6 @@ GEM
     arel (8.0.0)
     bcrypt (3.1.11)
     bindex (0.5.0)
-    bootstrap-datepicker-rails (1.6.4.1)
-      railties (>= 3.0)
-    bootstrap-daterangepicker-rails (0.0.8)
-      railties (>= 3.1)
     builder (3.2.3)
     byebug (9.0.6)
     cancancan (1.17.0)
@@ -87,7 +83,6 @@ GEM
     jbuilder (2.7.0)
       activesupport (>= 4.2.0)
       multi_json (>= 1.2)
-    jquery-datetimepicker-rails (2.4.1.0)
     jquery-rails (4.3.1)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
@@ -199,8 +194,6 @@ GEM
       tilt (>= 1.1, < 3)
     schema_to_scaffold (0.8.0)
       activesupport (>= 3.2.1)
-    select2-rails (4.0.3)
-      thor (~> 0.14)
     shoulda-matchers (3.1.1)
       activesupport (>= 4.0.0)
     sidekiq (5.0.3)
@@ -257,8 +250,6 @@ PLATFORMS
 DEPENDENCIES
   aescrypt
   bcrypt (~> 3.1.7)
-  bootstrap-datepicker-rails
-  bootstrap-daterangepicker-rails
   byebug
   cancancan (~> 1.10)
   carrierwave (~> 1.0)
@@ -271,7 +262,6 @@ DEPENDENCIES
   font-awesome-rails (~> 4.7, >= 4.7.0.2)
   httparty (~> 0.15.5)
   jbuilder (~> 2.5)
-  jquery-datetimepicker-rails
   jquery-rails
   jquery-ui-rails
   kaminari (~> 1.0.1)
@@ -289,7 +279,6 @@ DEPENDENCIES
   rspec-rails (~> 3.5)
   sass-rails (~> 5.0)
   schema_to_scaffold
-  select2-rails
   shoulda-matchers (~> 3.1)
   sidekiq
   simple_form
diff --git a/app/views/layouts/login.html.erb b/app/views/layouts/login.html.erb
index e5836701..7320edf9 100755
--- a/app/views/layouts/login.html.erb
+++ b/app/views/layouts/login.html.erb
@@ -56,7 +56,7 @@
         </div>
     </div>
     <!-- #END# Page Loader -->
-
+        
     <div class="login-box">
         <div class="logo text-center">
             <img src="/image/SX-logo.png" width="150px" height="150px">
@@ -115,6 +115,7 @@
                     $("#login_form_password").val(old_value + value);
                 }
             });
+           
         });
     </script>
 </body>
diff --git a/app/views/layouts/login_dashboard.html.erb b/app/views/layouts/login_dashboard.html.erb
index 0b849663..37cf7b1f 100755
--- a/app/views/layouts/login_dashboard.html.erb
+++ b/app/views/layouts/login_dashboard.html.erb
@@ -38,6 +38,24 @@
             <p>Please wait...</p>
         </div>
     </div>
+     <% flash.each do |type, message| %>
+          <% puts type
+          puts message
+          puts "ssssssssssssss" 
+          if type == "notice" 
+               color = "alert-success"
+            elsif type == "error"
+                color = "alert-danger"
+            elsif type == "warning"
+                color = "alert-warning"
+            else
+                color = "bg-black"
+            end %>
+            
+            <p id="noti" class="hidden" data-placement-from="top" data-message="<%=message%>" data-placement-align="center"
+                data-animate-enter="" data-animate-exit="" data-color-name="<%=color%>" >
+            </p>
+   <% end %>  
     <!-- #END# Page Loader -->
     <div class="container">
     	<div class="row">
@@ -140,11 +158,27 @@
 
 <script>   
     $(document).on('turbolinks:load', function () {
+
+         // for Notificaiotn message
+
+         var placementFrom  = $("#noti").attr('data-placement-from');
+         var placementAlign = $("#noti").attr('data-placement-align');
+         var animateEnter   = $("#noti").attr('data-animate-enter');
+         var animateExit    = $("#noti").attr('data-animate-exit');
+         var colorName      = $("#noti").attr('data-color-name');
+         var text           = $("#noti").attr('data-message');
+         console.log(text);
+        console.log(colorName);
+         if (text != null || colorName != null){
+            showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit); 
+         }
+
         $(".empBtn").click(function (event) {
             event.preventDefault();
             var item = $(this).data("formid");
             $(item).submit();
         });
+
     });     
     function empID(){          
     	$('#emp_id').keyup(function(e) {
@@ -159,6 +193,41 @@
     	});
 
     }
+
+    function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
+    if (colorName === null || colorName === '') { colorName = 'bg-black'; }
+    if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
+    if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
+    var allowDismiss = true;
+    $.notify({
+        message: text
+    },
+        {
+            type: colorName,
+            allow_dismiss: allowDismiss,
+            newest_on_top: true,
+            timer: 1000,
+            placement: {
+                from: placementFrom,
+                align: placementAlign
+            },
+            animate: {
+                enter: animateEnter,
+                exit: animateExit
+            },
+            template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-30" : "") + '" role="alert">' +
+            '<button type="button" aria-hidden="true" class="close float-right m-l-20 m-t--5" data-notify="dismiss">×</button>' +
+            '<span data-notify="icon"></span> ' +
+            '<span data-notify="title">{1}</span> ' +
+            '<span data-notify="message">{2}</span>' +
+            '<div class="progress" data-notify="progressbar">' +
+            '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
+            '</div>' +
+            '<a href="{3}" target="{4}" data-notify="url"></a>' +
+            '</div>'
+        });
+   }
+  //end Notificaiotn message
 </script>
 
 
diff --git a/app/views/settings/cashier_terminals/_form.html.erb b/app/views/settings/cashier_terminals/_form.html.erb
index c573db20..5de2f98c 100755
--- a/app/views/settings/cashier_terminals/_form.html.erb
+++ b/app/views/settings/cashier_terminals/_form.html.erb
@@ -9,7 +9,7 @@
       <%= f.input :is_currently_login %>
       <%= f.input :auto_print_receipt %>
       <%= f.label "Select Zones", :class => 'control-label' %>
-      <%= f.collection_check_boxes :zone_ids , Zone.all, :id, :name , :class => 'checkbox'%>
+      <%= f.collection_check_boxes :zone_ids , Zone.all, :id, :name , :class => 'checkbox form-group'%>
       <%= f.input :printer_name %>
       <%= f.input :font %>
       <%= f.input :font_size %>
@@ -53,3 +53,9 @@
     </div>  
   </div>
 </div>
+
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
\ No newline at end of file
diff --git a/app/views/settings/commissioners/_form.html.erb b/app/views/settings/commissioners/_form.html.erb
index 35327573..c123e434 100755
--- a/app/views/settings/commissioners/_form.html.erb
+++ b/app/views/settings/commissioners/_form.html.erb
@@ -51,18 +51,9 @@
     </div>  
   </div>
 </div>
-<!-- <script type="text/javascript">
 
-    $(document).ready(function () {
-        $('#joined_date').datepicker({
-            format: 'yyyy-mm-dd',
-            autoclose: true
-        });
-
-        $('#resigned_date').datepicker({
-            format: 'yyyy-mm-dd',
-            autoclose: true
-        });
-    });
-
-</script> -->
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/commissions/_form.html.erb b/app/views/settings/commissions/_form.html.erb
index ff328ae5..15bdf52a 100755
--- a/app/views/settings/commissions/_form.html.erb
+++ b/app/views/settings/commissions/_form.html.erb
@@ -10,7 +10,7 @@
         <%= f.collection_select :product_code, @products, :id, :name, {prompt: 'Select a Product'}, {class: 'form-control'} %><br/>
         <%= f.input :commission_type, :collection => ['Percentage','Net Amount'], prompt: 'Select Commission Type', class: 'form-control' %>
         <%= f.input :amount %>
-        <label><%= f.check_box :is_active %> Active </label>
+       <%= f.input :is_active %> Active
 
       </div><br>
       <div class="form-actions">
@@ -44,3 +44,8 @@
 </div>
 </div>
 
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/commissions/show.html.erb b/app/views/settings/commissions/show.html.erb
index 1105b0e9..96fb8962 100755
--- a/app/views/settings/commissions/show.html.erb
+++ b/app/views/settings/commissions/show.html.erb
@@ -35,7 +35,7 @@
       <tr>
         <td colspan="2" align="right">
           <%= link_to t("views.btn.edit"), edit_settings_commission_path(@commission), class: 'btn btn-info btn-sm waves-effect' %>
-          <button class="delete btn btn-danger btn-sm waves-effect" data-ref="<%= settings_commissions_path(@commission)%>" data-method="delete">
+          <button class="delete btn btn-danger btn-sm waves-effect" data-ref="<%= settings_commission_path(@commission)%>" data-method="delete">
             <%= t("views.btn.delete") %>
           </button>
 
diff --git a/app/views/settings/dining_charges/_form.html.erb b/app/views/settings/dining_charges/_form.html.erb
index a4901215..ac8f92a1 100755
--- a/app/views/settings/dining_charges/_form.html.erb
+++ b/app/views/settings/dining_charges/_form.html.erb
@@ -52,7 +52,7 @@
         <%= f.input :time_rounding_block_price, :input_html => { :id => 'time_rounding_block_price',:class=>"col-md-8"} %>
       </div>
 
-      <div class="form-actions">
+      <div class="form-actions p-l-15">
         <%= f.submit "Create",:class => 'btn btn-primary btn-lg waves-effect' %>
       </div>
     <% end %>
@@ -127,5 +127,10 @@ $("input[name='dining_charge[charge_block]']").change(function() {
 $("input[name='dining_charge[charge_block]']").change(function() {
   price();
 });
-
+$(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
 </script>
+
+
+
diff --git a/app/views/settings/employees/_form.html.erb b/app/views/settings/employees/_form.html.erb
index e31d0a43..0d65e7ec 100755
--- a/app/views/settings/employees/_form.html.erb
+++ b/app/views/settings/employees/_form.html.erb
@@ -40,3 +40,8 @@
   </div>
 </div>
 
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/item_sets/_form.html.erb b/app/views/settings/item_sets/_form.html.erb
index 1eb6588c..c26e9b1d 100755
--- a/app/views/settings/item_sets/_form.html.erb
+++ b/app/views/settings/item_sets/_form.html.erb
@@ -40,3 +40,8 @@
     </div>  
   </div>
 </div>
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/lookups/_form.html.erb b/app/views/settings/lookups/_form.html.erb
index 18403960..4beb4ba4 100755
--- a/app/views/settings/lookups/_form.html.erb
+++ b/app/views/settings/lookups/_form.html.erb
@@ -28,3 +28,8 @@
   </div>
 </div>
 
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/membership_actions/_form.html.erb b/app/views/settings/membership_actions/_form.html.erb
index ce88a087..6938dcb4 100755
--- a/app/views/settings/membership_actions/_form.html.erb
+++ b/app/views/settings/membership_actions/_form.html.erb
@@ -30,3 +30,8 @@
     </div>  
   </div>
 </div>
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/membership_settings/_form.html.erb b/app/views/settings/membership_settings/_form.html.erb
index c89be6e4..d81025ea 100755
--- a/app/views/settings/membership_settings/_form.html.erb
+++ b/app/views/settings/membership_settings/_form.html.erb
@@ -10,10 +10,10 @@
       <%= f.input :gateway_communication_type %>
       <%= f.input :gateway_url %>
       <%= f.input :auth_token %>
-      <label><%= f.check_box :discount %>Discount</label><br/>
-      <label><%= f.check_box :rebate %>Rebate</label><br/>
-      <label><%= f.check_box :bonus %>Bonus</label><br/>
-      <label><%= f.check_box :point %>Points</label>
+      <%= f.input :discount %>
+      <%= f.input :rebate %>
+      <%= f.input :bonus %>
+      <%= f.input :point %>
     </div>
 
     <div class="form-actions p-l-15">
@@ -31,4 +31,9 @@
       </div>
     </div>  
   </div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/menu_categories/_form.html.erb b/app/views/settings/menu_categories/_form.html.erb
index 6b45d7ee..b40e2579 100755
--- a/app/views/settings/menu_categories/_form.html.erb
+++ b/app/views/settings/menu_categories/_form.html.erb
@@ -8,7 +8,7 @@
       <%= f.input :code, label: "Category Code" %>
       <%= f.input :name %>
       <%= f.input :alt_name %>
-      <%= f.input :is_available %>
+      <%= f.input :is_available %> 
       <%= f.input :order_by %>
       <%= f.association :parent %>
     </div>
@@ -44,3 +44,8 @@
   </div>
 </div>
 
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/menu_item_attributes/_form.html.erb b/app/views/settings/menu_item_attributes/_form.html.erb
index 1a952c77..a6eecce6 100755
--- a/app/views/settings/menu_item_attributes/_form.html.erb
+++ b/app/views/settings/menu_item_attributes/_form.html.erb
@@ -35,4 +35,9 @@
 			</div>
 		</div>  
 	</div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/menu_item_options/_form.html.erb b/app/views/settings/menu_item_options/_form.html.erb
index 5dce548e..f6ff0721 100755
--- a/app/views/settings/menu_item_options/_form.html.erb
+++ b/app/views/settings/menu_item_options/_form.html.erb
@@ -36,4 +36,9 @@
 			</div>
 		</div>  
 	</div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/menu_item_sets/_form.html.erb b/app/views/settings/menu_item_sets/_form.html.erb
index 5eabad0b..35178914 100755
--- a/app/views/settings/menu_item_sets/_form.html.erb
+++ b/app/views/settings/menu_item_sets/_form.html.erb
@@ -26,3 +26,8 @@
 		</div>  
 	</div>
 </div>
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/menus/_form.html.erb b/app/views/settings/menus/_form.html.erb
index f7ad95f3..458b4baf 100755
--- a/app/views/settings/menus/_form.html.erb
+++ b/app/views/settings/menus/_form.html.erb
@@ -3,15 +3,40 @@
     <%= simple_form_for([:settings,@settings_menu]) do |f| %>
     <%= f.error_notification %>
 
-    <div class="form-inputs p-l-15">
-      <%= f.input :name %>
-      <%= f.input :is_active %>
-      <%= f.input :valid_days %>
-      <%= f.input :valid_time_to %>
-      <%= f.input :valid_time_from %>
+    <div class="form-inputs p-l-25">
+      <%= f.input :name,:input_html=>{:class=>"col-md-9"} %>
+      <%= f.input :is_active,:input_html=>{:class=>"col-md-9"} %>
+      <%= f.input :valid_days,:input_html=>{:class=>"col-md-9"} %>
+      <div class="col-md-9 form-group">
+        <label>* Valid Time From</label>
+        <div class="input-group">
+          <span class="input-group-addon">
+            <i class="material-icons">date_range</i>
+          </span>
+          <% if !@settings_menu.valid_time_from.nil?%>
+          <input type="text" name="menu[valid_time_from]" value="<%= @settings_menu.valid_time_from.strftime('%H:%M') %>" class="timepicker form-control col-md-8" placeholder="Start Time...">
+          <% else %>
+              <input type="text" name="menu[valid_time_from]" class="timepicker form-control col-md-8" placeholder="Start Time...">
+          <% end %>
+        </div>
+      </div>
+      <div class="col-md-9 form-group">
+        <label>* Valid Time To</label>
+        <div class="input-group">
+          <span class="input-group-addon">
+            <i class="material-icons">date_range</i>
+          </span>
+          <% if !@settings_menu.valid_time_to.nil?%>
+          <input type="text" name="menu[valid_time_to]" value="<%= @settings_menu.valid_time_to.strftime('%H:%M') %>" class="timepicker form-control col-md-8" placeholder="Start Time...">
+          <% else %>
+              <input type="text" name="menu[valid_time_to]" class="timepicker form-control col-md-8" placeholder="End Time...">
+          <% end %>
+        </div>
+      </div>
+      
     </div>
 
-    <div class="form-actions p-l-15">
+    <div class="form-actions p-l-20">
       <%= f.submit "Submit",:class => 'btn btn-primary btn-lg waves-effect' %>
     </div>
     <% end %>
@@ -41,3 +66,8 @@
   </div>
 </div>
 
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/order_queue_stations/_form.html.erb b/app/views/settings/order_queue_stations/_form.html.erb
index dd9caa4b..3aca6ff0 100755
--- a/app/views/settings/order_queue_stations/_form.html.erb
+++ b/app/views/settings/order_queue_stations/_form.html.erb
@@ -59,4 +59,8 @@ div.form-inputs span{
   </div>
 </div>
 
-
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/payment_method_settings/_form.html.erb b/app/views/settings/payment_method_settings/_form.html.erb
index 4582167d..d5e9257e 100755
--- a/app/views/settings/payment_method_settings/_form.html.erb
+++ b/app/views/settings/payment_method_settings/_form.html.erb
@@ -44,4 +44,10 @@
       </div>
     </div>  
   </div>
-</div>
\ No newline at end of file
+</div>
+
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/processing_items/_form.html.erb b/app/views/settings/processing_items/_form.html.erb
index 88b7fd7f..3faa3dc4 100755
--- a/app/views/settings/processing_items/_form.html.erb
+++ b/app/views/settings/processing_items/_form.html.erb
@@ -84,3 +84,9 @@
   </div>
 </div>
 
+
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/products/_form.html.erb b/app/views/settings/products/_form.html.erb
index e39cf896..1bbd2c7f 100755
--- a/app/views/settings/products/_form.html.erb
+++ b/app/views/settings/products/_form.html.erb
@@ -62,5 +62,9 @@
     </div>  
   </div>
 </div>
-
- 
\ No newline at end of file
+ 
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/promotion_products/_form.html.erb b/app/views/settings/promotion_products/_form.html.erb
index b388b299..299c9631 100755
--- a/app/views/settings/promotion_products/_form.html.erb
+++ b/app/views/settings/promotion_products/_form.html.erb
@@ -44,4 +44,9 @@
       </div>
     </div>  
   </div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/promotions/_form.html.erb b/app/views/settings/promotions/_form.html.erb
index 252a2e5f..3730bc87 100755
--- a/app/views/settings/promotions/_form.html.erb
+++ b/app/views/settings/promotions/_form.html.erb
@@ -399,4 +399,10 @@ $(".selectDay").click(function() {
   }
 
 });
+
+$(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+
+
 </script>
diff --git a/app/views/settings/rooms/_form.html.erb b/app/views/settings/rooms/_form.html.erb
index bd173a45..7567e786 100755
--- a/app/views/settings/rooms/_form.html.erb
+++ b/app/views/settings/rooms/_form.html.erb
@@ -77,3 +77,8 @@
     </div>  
   </div>
 </div>
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/set_menu_items/_form.html.erb b/app/views/settings/set_menu_items/_form.html.erb
index a0f6ab39..24c4cf06 100755
--- a/app/views/settings/set_menu_items/_form.html.erb
+++ b/app/views/settings/set_menu_items/_form.html.erb
@@ -91,3 +91,8 @@
   </div>
 </div>
 
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/simple_menu_items/_form.html.erb b/app/views/settings/simple_menu_items/_form.html.erb
index cf111bf8..925372ee 100755
--- a/app/views/settings/simple_menu_items/_form.html.erb
+++ b/app/views/settings/simple_menu_items/_form.html.erb
@@ -81,3 +81,8 @@
   </div>
 </div>
 
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/tables/_form.html.erb b/app/views/settings/tables/_form.html.erb
index 9b160fa2..233a28b7 100755
--- a/app/views/settings/tables/_form.html.erb
+++ b/app/views/settings/tables/_form.html.erb
@@ -72,3 +72,8 @@
   </div>
 </div>
 
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
diff --git a/app/views/settings/tax_profiles/_form.html.erb b/app/views/settings/tax_profiles/_form.html.erb
index 79f27c9a..718d6811 100755
--- a/app/views/settings/tax_profiles/_form.html.erb
+++ b/app/views/settings/tax_profiles/_form.html.erb
@@ -41,4 +41,9 @@
   </div>
 </div>
 
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
 
diff --git a/app/views/settings/zones/_form.html.erb b/app/views/settings/zones/_form.html.erb
index 0c80e661..5fb16978 100755
--- a/app/views/settings/zones/_form.html.erb
+++ b/app/views/settings/zones/_form.html.erb
@@ -35,3 +35,9 @@
     </div>  
   </div>
 </div>
+
+<script type="text/javascript">
+  $(document).on('turbolinks:load', function() {
+  $('body').bootstrapMaterialDesign();
+});
+</script>
\ No newline at end of file