diff --git a/app/assets/javascripts/origami.js b/app/assets/javascripts/origami.js
index 2f9fcee4..c799c0be 100755
--- a/app/assets/javascripts/origami.js
+++ b/app/assets/javascripts/origami.js
@@ -4,6 +4,7 @@
 //= require bootstrap/js/bootstrap-material-design.min
 //= require jquery_ujs
 //= require turbolinks
+//= require cable
 //= require jquery-slimscroll/jquery.slimscroll.js
 //= require node-waves/waves.js
 //= require sweetalert/sweetalert.min.js
diff --git a/app/assets/stylesheets/origami.scss b/app/assets/stylesheets/origami.scss
index 9c2dcbb1..6e06b1e5 100755
--- a/app/assets/stylesheets/origami.scss
+++ b/app/assets/stylesheets/origami.scss
@@ -97,15 +97,15 @@ select.form-control {
 }
 
 .cash-color{
-	background-color:#80CBC4;
+	background-color:#2196F3;
 }
 
 .credit-color{
-	background-color:#FFCCBC;
+	background-color:#FF5722;
 }
 
 .other-payment-color{
-	background-color:#E1BEE7;
+	background-color:#795548;
 }
 
 .cashier_number:hover{
@@ -201,7 +201,7 @@ select.form-control {
 }
 
 .red {
-	background-color:#ff0000;
+	background-color:#F44336;
 }
 
 .green{
diff --git a/app/views/origami/addorders/detail.html.erb b/app/views/origami/addorders/detail.html.erb
index 1056d477..be16da51 100755
--- a/app/views/origami/addorders/detail.html.erb
+++ b/app/views/origami/addorders/detail.html.erb
@@ -1,5 +1,8 @@
 <%= stylesheet_link_tag    'addorder', media: 'all', 'data-turbolinks-track': 'reload' %>
 <%= javascript_include_tag 'addorder', 'data-turbolinks-track': 'reload' %> 
+<div id="loading_wrapper" style="display:none;">
+    <div id="loading"></div>
+  </div>
 <div class="row">
     <div class="col-lg-2 col-md-2 col-sm-2">
         <ul class="nav nav-tabs flex-column" role="tablist" >
diff --git a/app/views/origami/credit_payments/index.html.erb b/app/views/origami/credit_payments/index.html.erb
index d8f5a263..2d246ce4 100755
--- a/app/views/origami/credit_payments/index.html.erb
+++ b/app/views/origami/credit_payments/index.html.erb
@@ -90,11 +90,11 @@
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
      <div class="row bottom">
-       <div class="cashier_number long left" data-value="1000" data-type="add">1000</div>
+       <div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
        <div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
      </div>
      <div class="row bottom">
-       <div class="cashier_number long left" data-value="5000" data-type="add">5000</div>
+       <div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
        <div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
      </div>
      <div class="row bottom">
@@ -106,7 +106,7 @@
 </div>
 
 <div class="col-lg-1 col-md-1 col-sm-1">
-  <button type="button" class="btn bg-blue btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment';"> Back </button>
+  <button type="button" class="btn bg-default m-l-10 btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment';"> Back </button>
 </div>
 </div>
 </div>
diff --git a/app/views/origami/discounts/index.html.erb b/app/views/origami/discounts/index.html.erb
index ada238bb..4fbaff3f 100755
--- a/app/views/origami/discounts/index.html.erb
+++ b/app/views/origami/discounts/index.html.erb
@@ -1,4 +1,7 @@
  <div class="container-fluid">
+ <div id="loading_wrapper" style="display:none;">
+    <div id="loading"></div>
+ </div>
  	<div class="row">
  		<!-- Column One -->
  		<div class="col-lg-6 col-md-6 col-sm-6">
@@ -366,6 +369,7 @@
 	// Pay Discount for Payment
 	$("#pay-discount").on('click', function(e){
 		e.preventDefault();
+		$("#loading_wrapper").show();
 		var sale_id = $('#sale-id').text();
 		var discount_items = JSON.stringify(get_discount_item_rows());
 		var overall_discount = $("#order-discount").text();
@@ -379,6 +383,7 @@
 			url: ajax_url,
 			data: params,
 			success:function(result){	
+				$("#loading_wrapper").hide(); 
 				swal({
 			        title: "Infomation!",
 			        text: result.status,
diff --git a/app/views/origami/jcb/index.html.erb b/app/views/origami/jcb/index.html.erb
index e1ec43d4..c27013d2 100755
--- a/app/views/origami/jcb/index.html.erb
+++ b/app/views/origami/jcb/index.html.erb
@@ -76,11 +76,11 @@
 			</div>
 			<div class="col-lg-6 col-md-6 col-sm-6">
 				<div class="row bottom">
-					<div class="cashier_number long left" data-value="1000" data-type="add">1000</div>
+					<div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
 					<div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
 				</div>
 				<div class="row bottom">
-					<div class="cashier_number long left" data-value="5000" data-type="add">5000</div>
+					<div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
 					<div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
 				</div>
 				<div class="row bottom">
@@ -92,7 +92,7 @@
 	</div>
 
 	<div class="col-lg-1 col-md-1 col-sm-1">
-		<button type="button" class="btn btn-primary btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
+		<button type="button" class="btn btn-primary m-l-10 btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
 	</div>
 </div>
 
diff --git a/app/views/origami/master/index.html.erb b/app/views/origami/master/index.html.erb
index bdbbf6d4..b817effd 100755
--- a/app/views/origami/master/index.html.erb
+++ b/app/views/origami/master/index.html.erb
@@ -76,11 +76,11 @@
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
      <div class="row bottom">
-       <div class="cashier_number long left" data-value="1000" data-type="add">1000</div>
+       <div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
        <div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
      </div>
      <div class="row bottom">
-       <div class="cashier_number long left" data-value="5000" data-type="add">5000</div>
+       <div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
        <div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
      </div>
      <div class="row bottom">
@@ -92,7 +92,7 @@
 </div>
 
 <div class="col-lg-1 col-md-1 col-sm-1">
- <button type="button" class="btn btn-primary  btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
+ <button type="button" class="btn btn-default m-l-3 btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
 </div>
 </div>
 
diff --git a/app/views/origami/mpu/index.html.erb b/app/views/origami/mpu/index.html.erb
index ce2947fd..92a87dd2 100755
--- a/app/views/origami/mpu/index.html.erb
+++ b/app/views/origami/mpu/index.html.erb
@@ -79,11 +79,11 @@
 				</div>
 				<div class="col-lg-6 col-md-6 col-sm-6">
 					<div class="row bottom">
-						<div class="cashier_number long left" data-value="1000" data-type="add">1000</div>
+						<div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
 						<div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
 					</div>
 					<div class="row bottom">
-						<div class="cashier_number long left" data-value="5000" data-type="add">5000</div>
+						<div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
 						<div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
 					</div>
 					<div class="row bottom">
@@ -95,7 +95,7 @@
 		</div>
 
 		<div class="col-lg-1 col-md-1 col-sm-1">
-			<button type="button" class="btn btn-primary  btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
+			<button type="button" class="btn btn-primary m-l-10 btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
 		</div>
 	</div>
 </div>
diff --git a/app/views/origami/payments/show.html.erb b/app/views/origami/payments/show.html.erb
index af8cde00..0cd18f0f 100755
--- a/app/views/origami/payments/show.html.erb
+++ b/app/views/origami/payments/show.html.erb
@@ -265,7 +265,7 @@
   <!-- Waiter Buttons -->
 
   <button type="button" class="btn bg-default btn-block" onclick="localStorage.removeItem('cash');window.location.href = '/origami';"> Back </button>
-  <button type="button" class="btn bg-warning btn-block" id="foc"> FOC </button>
+  <button type="button" class="btn bg-deep-purple btn-block" id="foc"> FOC </button>
   <button type="button" class="btn bg-red btn-block" id="void"> Void </button>
 </div>
 
diff --git a/app/views/origami/sales/show.html.erb b/app/views/origami/sales/show.html.erb
index 2152deb1..904d5896 100755
--- a/app/views/origami/sales/show.html.erb
+++ b/app/views/origami/sales/show.html.erb
@@ -25,7 +25,7 @@
      <div class="tab-pane active" id="completed" role="tabpanel" style="max-height:600px; overflow:auto">
        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
          <% @complete.each do |sale| %>
-         <div class="card sales red text-white" data-id = "<%= sale.sale_id %>">
+         <div class="card sales bg-red text-white" data-id = "<%= sale.sale_id %>">
            <div class="card-block">
               <%= sale.receipt_no %><span style="font-size:12px;float:right;line-height:inherit;"><%= sale.sale_status %></span>
            </div>
@@ -39,7 +39,7 @@
        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
          <% @tables.each do |table| %>
          <% if table.status == 'occupied' %>
-         <div class="card tables red text-white" data-id="<%= table.id %>">
+         <div class="card tables bg-red text-white" data-id="<%= table.id %>">
            <div class="card-block">
               <%= table.name %>
               <% if table.get_booking.nil? %>
@@ -50,7 +50,7 @@
            </div>
          </div>
          <% else %>
-         <div class="card tables green text-white" data-id="<%= table.id %>">
+         <div class="card tables bg-green text-white" data-id="<%= table.id %>">
            <div class="card-block">
               <%= table.name %>
            </div>
@@ -65,7 +65,7 @@
        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
          <% @rooms.each do |room| %>
          <% if room.status == 'occupied' %>
-         <div class="card rooms red text-white" data-id="<%= room.id %>">
+         <div class="card rooms bg-red text-white" data-id="<%= room.id %>">
            <div class="card-block">
               <%= room.name %>
               <% if room.get_booking.nil? %>
@@ -76,7 +76,7 @@
            </div>
          </div>
          <% else %>
-         <div class="card rooms green text-white" data-id="<%= room.id %>">
+         <div class="card rooms bg-green text-white" data-id="<%= room.id %>">
            <div class="card-block">
               <%= room.name %>
            </div>
@@ -90,7 +90,7 @@
      <div class="tab-pane" id="orders" role="tabpanel" style="max-height:600px; overflow:auto">
        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
          <% @orders.each do |order| %>
-         <div class="card orders red text-white" data-id = "<%= order.order_id %>">
+         <div class="card orders bg-red text-white" data-id = "<%= order.order_id %>">
            <div class="card-block">
               <%= order.order_id %>
            </div>
@@ -198,9 +198,9 @@
  <div class="col-lg-1 col-md-1 col-sm-1">
    <button type="button" class="btn btn-default btn-block" id='back'>Back</button>
    <% if @sale.sale_status != 'void' %>
-       <button type="button" id="void" class="btn btn-blue btn-block">VOID</button>
+       <button type="button" id="void" class="btn bg-danger btn-block">VOID</button>
    <% end %>
-   <button type="button" id="re-print" class="btn btn-blue btn-block">Re.Print</button>
+   <button type="button" id="re-print" class="btn bg-blue btn-block">Re.Print</button>
  </div>
 </div>
 </div>
diff --git a/app/views/origami/visa/index.html.erb b/app/views/origami/visa/index.html.erb
index 53cf8dcf..53589c89 100755
--- a/app/views/origami/visa/index.html.erb
+++ b/app/views/origami/visa/index.html.erb
@@ -76,11 +76,11 @@
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
      <div class="row bottom">
-       <div class="cashier_number long left" data-value="1000" data-type="add">1000</div>
+       <div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
        <div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
      </div>
      <div class="row bottom">
-       <div class="cashier_number long left" data-value="5000" data-type="add">5000</div>
+       <div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
        <div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
      </div>
      <div class="row bottom">
@@ -92,7 +92,7 @@
 </div>
 
 <div class="col-lg-1 col-md-1 col-sm-1">
- <button type="button" class="btn bg-default btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
+ <button type="button" class="btn bg-default m-l-10 btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
 </div>
 </div>
 </div>