diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index f7c698e8..baf62ca4 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -13,7 +13,6 @@
 //= require jquery
 //= require jquery_nested_form
 //= require tether
-//= require bootstrap/js/bootstrap.js
 //= require bootstrap/js/popper.min
 //= require bootstrap/js/bootstrap-material-design.min
 //= require jquery_ujs
@@ -37,6 +36,7 @@
 //= require BSBMaterial/admin.js
 //= require BSBMaterial/pages/index.js
 //= require BSBMaterial/demo.js
+//= require BSBMaterial/pages/forms/basic-form-elements
 
 
 
diff --git a/app/controllers/inventory/inventory_controller.rb b/app/controllers/inventory/inventory_controller.rb
index 673cf943..3bf3c84c 100644
--- a/app/controllers/inventory/inventory_controller.rb
+++ b/app/controllers/inventory/inventory_controller.rb
@@ -1,4 +1,4 @@
-class Inventory::InventoryController < BaseInventoryController
+class Inventory::InventoryController < ApplicationController#BaseInventoryController
 
    def index
      @products = InventoryDefinition.all.active.order('created_at desc') 
diff --git a/app/controllers/inventory/inventory_definitions_controller.rb b/app/controllers/inventory/inventory_definitions_controller.rb
index 33b7dd75..cc9eecd8 100644
--- a/app/controllers/inventory/inventory_definitions_controller.rb
+++ b/app/controllers/inventory/inventory_definitions_controller.rb
@@ -1,4 +1,4 @@
-class Inventory::InventoryDefinitionsController < BaseInventoryController
+class Inventory::InventoryDefinitionsController < ApplicationController#BaseInventoryController
   before_action :set_inventory_definition, only: [:show, :edit, :update, :destroy]
 
   # GET /inventory_definitions
diff --git a/app/controllers/inventory/stock_check_items_controller.rb b/app/controllers/inventory/stock_check_items_controller.rb
index 18980f29..43782767 100644
--- a/app/controllers/inventory/stock_check_items_controller.rb
+++ b/app/controllers/inventory/stock_check_items_controller.rb
@@ -1,4 +1,4 @@
-class Inventory::StockCheckItemsController < BaseInventoryController
+class Inventory::StockCheckItemsController < ApplicationController#BaseInventoryController
   before_action :set_stock_check_item, only: [:show, :edit, :update, :destroy]
 
   # GET /stock_check_items
diff --git a/app/controllers/inventory/stock_checks_controller.rb b/app/controllers/inventory/stock_checks_controller.rb
index 52d183de..f7a9e7fe 100644
--- a/app/controllers/inventory/stock_checks_controller.rb
+++ b/app/controllers/inventory/stock_checks_controller.rb
@@ -1,4 +1,4 @@
-class Inventory::StockChecksController < BaseInventoryController
+class Inventory::StockChecksController < ApplicationController#BaseInventoryController
   def index
     @check = StockCheck.new
     @inventory_definitions = InventoryDefinition.active.all
diff --git a/app/controllers/origami/card_payments_controller.rb b/app/controllers/origami/card_payments_controller.rb
index 1d18e401..e72c5139 100644
--- a/app/controllers/origami/card_payments_controller.rb
+++ b/app/controllers/origami/card_payments_controller.rb
@@ -1,4 +1,4 @@
-class Origami::CardPaymentsController < BaseOrigamiController
+class Origami::CardPaymentsController < ApplicationController#BaseOrigamiController
 
 
   def index
diff --git a/app/controllers/origami/cash_ins_controller.rb b/app/controllers/origami/cash_ins_controller.rb
index 085f68b8..0155c223 100644
--- a/app/controllers/origami/cash_ins_controller.rb
+++ b/app/controllers/origami/cash_ins_controller.rb
@@ -1,4 +1,4 @@
-class Origami::CashInsController < BaseOrigamiController
+class Origami::CashInsController < ApplicationController#BaseOrigamiController
 
   def new
   end
diff --git a/app/controllers/origami/cash_outs_controller.rb b/app/controllers/origami/cash_outs_controller.rb
index 95ab97a2..26f2edb1 100644
--- a/app/controllers/origami/cash_outs_controller.rb
+++ b/app/controllers/origami/cash_outs_controller.rb
@@ -1,4 +1,4 @@
-class Origami::CashOutsController < BaseOrigamiController
+class Origami::CashOutsController < ApplicationController#BaseOrigamiController
 
   def new
   end
diff --git a/app/controllers/origami/credit_payments_controller.rb b/app/controllers/origami/credit_payments_controller.rb
index ff9ae413..bf59f5da 100644
--- a/app/controllers/origami/credit_payments_controller.rb
+++ b/app/controllers/origami/credit_payments_controller.rb
@@ -1,4 +1,4 @@
-class Origami::CreditPaymentsController < BaseOrigamiController
+class Origami::CreditPaymentsController < ApplicationController#BaseOrigamiController
 
 
   def index
diff --git a/app/controllers/origami/discounts_controller.rb b/app/controllers/origami/discounts_controller.rb
index 8fddfa0f..bf0d7c5a 100644
--- a/app/controllers/origami/discounts_controller.rb
+++ b/app/controllers/origami/discounts_controller.rb
@@ -1,4 +1,4 @@
-class Origami::DiscountsController < BaseOrigamiController
+class Origami::DiscountsController < ApplicationController#BaseOrigamiController
   authorize_resource :class => false
 
   #discount page show from origami index with selected order
diff --git a/app/controllers/origami/in_duties_controller.rb b/app/controllers/origami/in_duties_controller.rb
index eaf23c5a..56119e58 100644
--- a/app/controllers/origami/in_duties_controller.rb
+++ b/app/controllers/origami/in_duties_controller.rb
@@ -1,4 +1,4 @@
-class Origami::InDutiesController < BaseOrigamiController
+class Origami::InDutiesController < ApplicationController#BaseOrigamiController
   before_action :set_in_duty, only: %i[show edit update edit_in_duty update_for_in_duty destroy destroy_in_duty]
 
   # GET /in_duties
diff --git a/app/controllers/origami/jcb_controller.rb b/app/controllers/origami/jcb_controller.rb
index a8b77861..90639b80 100644
--- a/app/controllers/origami/jcb_controller.rb
+++ b/app/controllers/origami/jcb_controller.rb
@@ -1,4 +1,4 @@
-class Origami::JcbController < BaseOrigamiController
+class Origami::JcbController < ApplicationController#BaseOrigamiController
 
   def index
     @sale_id = params[:sale_id]
diff --git a/app/controllers/origami/master_controller.rb b/app/controllers/origami/master_controller.rb
index ba97cad9..b5619f12 100644
--- a/app/controllers/origami/master_controller.rb
+++ b/app/controllers/origami/master_controller.rb
@@ -1,4 +1,4 @@
-class Origami::MasterController < BaseOrigamiController
+class Origami::MasterController < ApplicationController#BaseOrigamiController
 
   def index
     @sale_id = params[:sale_id]
diff --git a/app/controllers/origami/moveroom_controller.rb b/app/controllers/origami/moveroom_controller.rb
index ef1c286a..c4e1b91d 100644
--- a/app/controllers/origami/moveroom_controller.rb
+++ b/app/controllers/origami/moveroom_controller.rb
@@ -1,4 +1,4 @@
-class Origami::MoveroomController < BaseOrigamiController
+class Origami::MoveroomController < ApplicationController#BaseOrigamiController
   
   authorize_resource :class => false
   
diff --git a/app/controllers/origami/movetable_controller.rb b/app/controllers/origami/movetable_controller.rb
index 6062216f..baced1ab 100644
--- a/app/controllers/origami/movetable_controller.rb
+++ b/app/controllers/origami/movetable_controller.rb
@@ -1,4 +1,4 @@
-class Origami::MovetableController < BaseOrigamiController
+class Origami::MovetableController < ApplicationController#BaseOrigamiController
   
   authorize_resource :class => false
 
diff --git a/app/controllers/origami/mpu_controller.rb b/app/controllers/origami/mpu_controller.rb
index c9f707e3..7b66b79a 100644
--- a/app/controllers/origami/mpu_controller.rb
+++ b/app/controllers/origami/mpu_controller.rb
@@ -1,4 +1,4 @@
-class Origami::MpuController < BaseOrigamiController
+class Origami::MpuController < ApplicationController#BaseOrigamiController
 
   def index
     @sale_id = params[:sale_id]
diff --git a/app/controllers/origami/other_charges_controller.rb b/app/controllers/origami/other_charges_controller.rb
index b0e6472c..fe1cc18a 100644
--- a/app/controllers/origami/other_charges_controller.rb
+++ b/app/controllers/origami/other_charges_controller.rb
@@ -1,4 +1,4 @@
-class Origami::OtherChargesController < BaseOrigamiController
+class Origami::OtherChargesController < ApplicationController#BaseOrigamiController
 	authorize_resource :class => false
 
 	def index
diff --git a/app/controllers/origami/others_payments_controller.rb b/app/controllers/origami/others_payments_controller.rb
index 2a24e2ac..b4c8a7c7 100644
--- a/app/controllers/origami/others_payments_controller.rb
+++ b/app/controllers/origami/others_payments_controller.rb
@@ -1,4 +1,4 @@
-class Origami::OthersPaymentsController < BaseOrigamiController
+class Origami::OthersPaymentsController < ApplicationController#BaseOrigamiController
 
 
   def index
diff --git a/app/controllers/origami/payments_controller.rb b/app/controllers/origami/payments_controller.rb
index 2a9fe5d9..c00a9178 100644
--- a/app/controllers/origami/payments_controller.rb
+++ b/app/controllers/origami/payments_controller.rb
@@ -1,4 +1,4 @@
-class Origami::PaymentsController < BaseOrigamiController
+class Origami::PaymentsController < ApplicationController#BaseOrigamiController
 
   authorize_resource :class => false
   def index
diff --git a/app/controllers/origami/paypar_payments_controller.rb b/app/controllers/origami/paypar_payments_controller.rb
index 0c3ea11f..8f9cb59d 100644
--- a/app/controllers/origami/paypar_payments_controller.rb
+++ b/app/controllers/origami/paypar_payments_controller.rb
@@ -1,4 +1,4 @@
-class Origami::PayparPaymentsController < BaseOrigamiController
+class Origami::PayparPaymentsController < ApplicationController#BaseOrigamiController
 	def create
 		sale_id = params[:sale_id]
 		redeem_amount = params[:redeem_amount]
diff --git a/app/controllers/origami/product_commissions_controller.rb b/app/controllers/origami/product_commissions_controller.rb
index 74dd8095..4e64c9c6 100644
--- a/app/controllers/origami/product_commissions_controller.rb
+++ b/app/controllers/origami/product_commissions_controller.rb
@@ -1,4 +1,4 @@
-class Origami::ProductCommissionsController < BaseOrigamiController
+class Origami::ProductCommissionsController < ApplicationController#BaseOrigamiController
   before_action :set_product_commission, only: [:show, :edit, :update, :destroy]
 
   # GET /product_commissions
diff --git a/app/controllers/origami/redeem_payments_controller.rb b/app/controllers/origami/redeem_payments_controller.rb
index 802ba51b..30eceb11 100644
--- a/app/controllers/origami/redeem_payments_controller.rb
+++ b/app/controllers/origami/redeem_payments_controller.rb
@@ -1,4 +1,4 @@
-class Origami::RedeemPaymentsController < BaseOrigamiController
+class Origami::RedeemPaymentsController < ApplicationController#BaseOrigamiController
  	def index
  		@sale_id = params[:sale_id]
  		payment_method = params[:payment_method]
diff --git a/app/controllers/origami/room_invoices_controller.rb b/app/controllers/origami/room_invoices_controller.rb
index 8d805771..e884b433 100644
--- a/app/controllers/origami/room_invoices_controller.rb
+++ b/app/controllers/origami/room_invoices_controller.rb
@@ -1,4 +1,4 @@
-class Origami::RoomInvoicesController < BaseOrigamiController
+class Origami::RoomInvoicesController < ApplicationController#BaseOrigamiController
  	def index
     @room = DiningFacility.find(params[:room_id])
     puts "room bookig lenght"
diff --git a/app/controllers/origami/sales_controller.rb b/app/controllers/origami/sales_controller.rb
index 56e41a2a..ce13aa8a 100644
--- a/app/controllers/origami/sales_controller.rb
+++ b/app/controllers/origami/sales_controller.rb
@@ -1,4 +1,4 @@
-class Origami::SalesController < BaseOrigamiController
+class Origami::SalesController < ApplicationController#BaseOrigamiController
 
   def show
     @tables = Table.all.active.order('status desc')
diff --git a/app/controllers/origami/shifts_controller.rb b/app/controllers/origami/shifts_controller.rb
index 31c68edf..084a11d8 100644
--- a/app/controllers/origami/shifts_controller.rb
+++ b/app/controllers/origami/shifts_controller.rb
@@ -1,4 +1,4 @@
-class Origami::ShiftsController < BaseOrigamiController
+class Origami::ShiftsController < ApplicationController#BaseOrigamiController
 
   def index
   end
diff --git a/app/controllers/origami/table_invoices_controller.rb b/app/controllers/origami/table_invoices_controller.rb
index 4571ba87..331d2843 100644
--- a/app/controllers/origami/table_invoices_controller.rb
+++ b/app/controllers/origami/table_invoices_controller.rb
@@ -1,4 +1,4 @@
-class Origami::TableInvoicesController < BaseOrigamiController
+class Origami::TableInvoicesController < ApplicationController#BaseOrigamiController
  	def index
     @table = DiningFacility.find(params[:table_id])
     puts "table bookig lenght"
diff --git a/app/controllers/origami/visa_controller.rb b/app/controllers/origami/visa_controller.rb
index 552d960b..b1e1890f 100644
--- a/app/controllers/origami/visa_controller.rb
+++ b/app/controllers/origami/visa_controller.rb
@@ -1,4 +1,4 @@
-class Origami::VisaController < BaseOrigamiController
+class Origami::VisaController < ApplicationController#BaseOrigamiController
 
   def index
     @sale_id = params[:sale_id]
diff --git a/app/controllers/origami/voucher_controller.rb b/app/controllers/origami/voucher_controller.rb
index e65abc85..45c4d0d2 100644
--- a/app/controllers/origami/voucher_controller.rb
+++ b/app/controllers/origami/voucher_controller.rb
@@ -1,4 +1,4 @@
-class Origami::VoucherController < BaseOrigamiController
+class Origami::VoucherController < ApplicationController#BaseOrigamiController
 
   def index
     @sale_id = params[:sale_id]
diff --git a/app/views/crm/customers/index.html.erb b/app/views/crm/customers/index.html.erb
index ec71066c..ac9277e8 100644
--- a/app/views/crm/customers/index.html.erb
+++ b/app/views/crm/customers/index.html.erb
@@ -43,7 +43,7 @@
                   </div>
                 </div>
                 <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
-                  <button type="submit" class="btn bg-blue waves-effect waves-effect">Search</button>
+                  <button type="submit" class="btn bg-blue waves-effect">Search</button>
                 </div>
                 <!-- <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" id="member_acc_no"> -->
                   <button type="button" id="member_acc_no" class="btn bg-green btn-sm waves-effect" style="height: 30%;margin-right: 10px;">Member Card</button>
diff --git a/app/views/inventory/inventory/_inventory_list.html.erb b/app/views/inventory/inventory/_inventory_list.html.erb
index 7869bc10..91a4ac94 100644
--- a/app/views/inventory/inventory/_inventory_list.html.erb
+++ b/app/views/inventory/inventory/_inventory_list.html.erb
@@ -1,7 +1,7 @@
 
 <div class="row">
   <div class="col-md-8"><h2> Inventoy Product Lists</h2></div>
-  <div class="col-md-4"><button id='new_inventory_product' class='btn btn-primary' style='margin-top:15px;'>New Inventory Product</button></div>
+  <div class="col-md-4"><button id='new_inventory_product' class='btn bg-blue waves-effect' style='margin-top:15px;'>New Inventory Product</button></div>
 </div>
 
 <div class="row">
diff --git a/app/views/inventory/inventory/index.html.erb b/app/views/inventory/inventory/index.html.erb
index 07d6f253..6149198b 100644
--- a/app/views/inventory/inventory/index.html.erb
+++ b/app/views/inventory/inventory/index.html.erb
@@ -1,27 +1,28 @@
-<div class="row">
-  <div class="col-lg-10 col-md-10 col-sm-10">
-    <%= render 'inventory_list' %>
-  </div>
-  <div class="col-lg-2 col-md-2 col-sm-2">
-    <% if current_login_employee.role == "administrator" || current_login_employee.role == 'manager' %>
-        <button id="back" type="button" class="btn btn-block btn-primary"> Back</button>
-    <% end %>
-    <button id="stock_taking" type="button" class="btn btn-block btn-primary"> New Stock Taking</button>
-    <button id="stock_check_report" type="button" class="btn btn-block btn-primary"> Stock Check Report</button>
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-lg-10 col-md-10 col-sm-10">
+      <%= render 'inventory_list' %>
+    </div>
+    <div class="col-lg-2 col-md-2 col-sm-2">
+      <% if current_login_employee.role == "administrator" || current_login_employee.role == 'manager' %>
+      <button id="back" type="button" class="btn bg-default waves-effect"> Back</button>
+      <% end %>
+      <button id="stock_taking" type="button" class="btn bg-blue waves-effect"> New Stock Taking</button>
+      <button id="stock_check_report" type="button" class="btn bg-blue waves-effect"> Stock Check Report</button>
+    </div>
   </div>
 </div>
-
 <script>
-    $('#stock_taking').on('click', function () {
-        window.location.href = '<%= inventory_stock_checks_path %>';
-    });
+  $('#stock_taking').on('click', function () {
+    window.location.href = '<%= inventory_stock_checks_path %>';
+  });
 
-    $('#stock_check_report').on('click', function () {
-        window.location.href = '<%= reports_stock_check_index_path %>';
-    });
+  $('#stock_check_report').on('click', function () {
+    window.location.href = '<%= reports_stock_check_index_path %>';
+  });
 
-    $('#back').on('click', function () {
-        window.location.href = '<%= dashboard_path %>';
-    });
+  $('#back').on('click', function () {
+    window.location.href = '<%= dashboard_path %>';
+  });
 
 </script>
diff --git a/app/views/inventory/inventory_definitions/_form.html.erb b/app/views/inventory/inventory_definitions/_form.html.erb
index 31a1a9a2..f5149fee 100644
--- a/app/views/inventory/inventory_definitions/_form.html.erb
+++ b/app/views/inventory/inventory_definitions/_form.html.erb
@@ -45,8 +45,8 @@
     </div>
 
     <div class="form-actions">
-      <%= link_to 'Back', inventory_path, class: 'btn btn-success' %>
-      <%= f.button :submit, class: 'btn btn-primary' %>
+      <%= link_to 'Back', inventory_path, class: 'btn bg-default waves-effect' %>
+      <%= f.button :submit, class: 'btn bg-blue wave' %>
     </div>
 
 <% end %>
diff --git a/app/views/inventory/inventory_definitions/index.html.erb b/app/views/inventory/inventory_definitions/index.html.erb
index 9a2612b2..6b27f54a 100644
--- a/app/views/inventory/inventory_definitions/index.html.erb
+++ b/app/views/inventory/inventory_definitions/index.html.erb
@@ -1,3 +1,4 @@
+<div class="container-fluid">
 <p id="notice"><%= notice %></p>
 
 <h1>Inventory Definitions</h1>
@@ -23,3 +24,4 @@
 <br>
 
 <%= link_to 'New Inventory Definition', new_inventory_definition_path %>
+</div>
\ No newline at end of file
diff --git a/app/views/inventory/inventory_definitions/new.html.erb b/app/views/inventory/inventory_definitions/new.html.erb
index ce290607..ecc47d79 100644
--- a/app/views/inventory/inventory_definitions/new.html.erb
+++ b/app/views/inventory/inventory_definitions/new.html.erb
@@ -1,5 +1,5 @@
-
-<div class="span12">
+<div class="container-fluid">
+<div class="col">
 		<div class="page-header">
 		 <ul class="breadcrumb">
 		   	<li><a href="<%= root_path %>">Home</a></li>
@@ -9,3 +9,4 @@
 		</div>
     <%= render 'form', inventory: @inventory_definition %>
 </div>
+</div>
\ No newline at end of file
diff --git a/app/views/origami/cash_ins/new.html.erb b/app/views/origami/cash_ins/new.html.erb
index b2922f63..405286d3 100644
--- a/app/views/origami/cash_ins/new.html.erb
+++ b/app/views/origami/cash_ins/new.html.erb
@@ -1,77 +1,89 @@
-
-<div class='row'>
-    <div class="col-lg-11 col-md-11 col-sm-11">
+<div class="container-fluid">
+  <div class='row'>
+    <div class="col-lg-10 col-md-10 col-sm-10">
       <h2> Cash In </h2>
       <br>
       <table class='table table-striped'>
         <tr>
           <td> Payment Reference
           </td>
-          <td><input type='text' id='reference'/></td>
+          <td>
+              <input type="text" class="form-control" placeholder="Reference" id="reference">
+          </td>
         </tr>
         <tr>
           <td> Remark
           </td>
-          <td><input type="text" id='remark'/></td>
+          <td>
+              <input type="text" class="form-control" placeholder="Remark" id="remark">
+          </td>
         </tr>
         <tr>
           <td> Payment Method
           </td>
           <td>
-              <button class='btn btn-primary payment-type' data-id='cash' id='cash'>CASH</button>
-              <button class='btn btn-primary payment-type' data-id='mpu' id='mpu'>MPU</button>
-              <button class='btn btn-primary payment-type' data-id='visa' id='visa'>VISA</button>
-              <button class='btn btn-primary payment-type' data-id='jcb' id='jcb'>JCB</button>
+          <button class='btn bg-blue waves-effect payment-type' data-id='cash' id='cash'>CASH</button>
+          <button class='btn bg-blue waves-effect payment-type' data-id='mpu' id='mpu'>MPU</button>
+          <button class='btn bg-blue waves-effect payment-type' data-id='visa' id='visa'>VISA</button>
+          <button class='btn bg-blue waves-effect payment-type' data-id='jcb' id='jcb'>JCB</button>
           </td>
         </tr>
         <tr>
           <td> Reference Number
           </td>
-          <td><input type='text' id='payment_method_reference'/></td>
+          <td>
+             <input type="text" class="form-control" id="payment_method_reference">
+          </td>
         </tr>
         <tr>
           <td> Amount
           </td>
-          <td><input type='text' id='amount'/></td>
+          <td>
+                <input type="text" class="form-control" placeholder="Amount" id="amount">
+          </td>
         </tr>
       </table>
     </div>
-    <div class="col-lg-1 col-md-1 col-sm-1">
-      <button type="button" class="btn btn-primary btn-block" id='back'> Back </button>
-      <button type="button" class="btn btn-primary btn-block" id='cash_in'> Cash In </button>
+    <div class="col-lg-2 col-md-2 col-sm-2 ">
+      <div class="button-demo">
+         <button type="button" class="btn bg-default waves-effect btn-" id='back'> Back </button>
+      <button type="button" class="btn bg-blue waves-effect btn-" id='cash_in'> Cash In </button>
+      </div>
+     
     </div>
+  </div>
 </div>
 
 <script>
-var payment_method = "";
-$('.payment-type').on('click',function(){
-  $('.payment-type').css("background-color","#7a62d3")
-  $(this).css("background-color","green");
-  var type = $(this).attr('data-id')
-  if(type == 'cash'){
-    payment_method = 'cash';
-  }else if(type == 'mpu'){
-    payment_method = "mpu";
-  }else if(type == 'visa'){
-    payment_method = "visa";
-  }else if(type == 'jcb'){
-    payment_method = "jcb";
-  }
-})
-$('#cash_in').on('click',function(){
-  var reference = $('#reference').val();
-  var remark = $('#remark').val();
-  var amount = $('#amount').val();
-  var payment_method_reference = $('#payment_method_reference').val();
-  $.ajax({type: "POST",
-    url: "<%= origami_cash_ins_path %>",
-    data: "reference="+ reference + "&remark=" + remark + "&amount="+ amount + "&payment_method="+payment_method + "&payment_method_reference="+ payment_method_reference,
-    success:function(result){
-      window.location.href = '/origami';
+  var payment_method = "";
+  $('.payment-type').on('click',function(){
+    $('.payment-type').css("background-color","#7a62d3")
+    $(this).css("background-color","green");
+    var type = $(this).attr('data-id')
+    if(type == 'cash'){
+      payment_method = 'cash';
+    }else if(type == 'mpu'){
+      payment_method = "mpu";
+    }else if(type == 'visa'){
+      payment_method = "visa";
+    }else if(type == 'jcb'){
+      payment_method = "jcb";
     }
-  });
-})
-$('#back').on('click',function(){
+  })
+  $('#cash_in').on('click',function(){
+    var reference = $('#reference').val();
+    var remark = $('#remark').val();
+    var amount = $('#amount').val();
+    var payment_method_reference = $('#payment_method_reference').val();
+    $.ajax({type: "POST",
+      url: "<%= origami_cash_ins_path %>",
+      data: "reference="+ reference + "&remark=" + remark + "&amount="+ amount + "&payment_method="+payment_method + "&payment_method_reference="+ payment_method_reference,
+      success:function(result){
+        window.location.href = '/origami';
+      }
+    });
+  })
+  $('#back').on('click',function(){
    window.location.href = '/origami';
-})
+ })
 </script>
diff --git a/app/views/origami/cash_outs/new.html.erb b/app/views/origami/cash_outs/new.html.erb
index e4d42b89..c503f4dc 100644
--- a/app/views/origami/cash_outs/new.html.erb
+++ b/app/views/origami/cash_outs/new.html.erb
@@ -1,49 +1,45 @@
-
-
-<div class='row'>
-  <div class="col-lg-11 col-md-11 col-sm-11">
-    <h2>Cash Out</h2>
+<div class="container-fluid">
+  <div class='row'>
+    <div class="col-lg-10 col-md-10 col-sm-10">
+      <h2>Cash Out</h2>
       <table class='table table-striped'>
         <tr>
-          <td> Payment Reference
-          </td>
-          <td><input id='reference' type='text' value=''/></td>
+          <td> Payment Reference</td>
+          <td><input type="text" class="form-control" placeholder="Reference" id="reference"></td>
         </tr>
         <tr>
-          <td> Remark
-          </td>
-          <td><input id='remark' type="text" value=''/></td>
+          <td> Remark</td>
+          <td><input type="text" class="form-control" placeholder="Remark" id="remark"></td>
         </tr>
         <tr>
-          <td> Amount
-          </td>
-          <td><input id='amount' type="text" value=''/></td>
+          <td> Amount </td>
+          <td><input type="text" class="form-control" placeholder="Amount" id="amount"></td>
         </tr>
       </table>
-
     </div>
-    <div class="col-lg-1 col-md-1 col-sm-1">
-      <button type="button" class="btn btn-primary btn-block" id='back'> Back </button>
-      <button type="button" class="btn btn-primary btn-block" id='cash_out'> Cash Out </button>
+    <div class="col-lg-2 col-md-2 col-sm-2">
+      <br><br>
+      <button type="button" class="btn bg-default btn-block" id='back'> Back </button>
+      <button type="button" class="btn bg-blue btn-block" id='cash_out'> Cash Out </button>
     </div>
+  </div>
 </div>
-
 <script>
 
-$('#cash_out').on('click',function(){
-  var reference = $('#reference').val();
-  var remark = $('#remark').val();
-  var amount = $('#amount').val();
-  $.ajax({type: "POST",
-    url: "<%= origami_cash_outs_path %>",
-    data: "reference="+ reference + "&remark=" + remark + "&amount="+ amount,
-    success:function(result){
-      window.location.href = '/origami';
-    }
-  });
-})
+  $('#cash_out').on('click',function(){
+    var reference = $('#reference').val();
+    var remark = $('#remark').val();
+    var amount = $('#amount').val();
+    $.ajax({type: "POST",
+      url: "<%= origami_cash_outs_path %>",
+      data: "reference="+ reference + "&remark=" + remark + "&amount="+ amount,
+      success:function(result){
+        window.location.href = '/origami';
+      }
+    });
+  })
 
-$('#back').on('click',function(){
+  $('#back').on('click',function(){
     window.location.href = '/origami';
-})
+  })
 </script>
diff --git a/app/views/origami/credit_payments/index.html.erb b/app/views/origami/credit_payments/index.html.erb
index dc2b5b85..d7fed3de 100644
--- a/app/views/origami/credit_payments/index.html.erb
+++ b/app/views/origami/credit_payments/index.html.erb
@@ -1,166 +1,180 @@
-
-<div class="row">
-
-	<div class="col-lg-5 col-md-5 col-sm-3">
-		<div class="row">
-			<div class="col-md-6">
-				<h2>CREDIT PAYMENT</h2>
-			</div>
-		</div>
-			<div class="card" style="margin-top:10px;padding-top:20px;">
-				<div class="rebate-form">
-					<div class="row">
-						<div class="form-group col-lg-12 col-md-12 col-sm-12">
-								<label class="col-lg-4 col-md-4 col-sm-4">You can pay up to </label>
-									<input type="text" name="validamount" id="validamount" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@can_credit %>" data-member-value="">
-						</div>
-						<hr>
-					</div>
-					<% if @creditcount != 0 %>
-					<div class="row">
-						<div class="form-group col-lg-12 col-md-12 col-sm-12">
-								<label class="col-lg-4 col-md-4 col-sm-4">Recent Credit Amount </label>
-									<input type="text" name="" id="" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@creditcount %>" data-member-value="">
-						</div>
-						<hr>
-					</div>
-					<% end %>
-		    		<div class="row">
-			    		<div class="form-group col-lg-12 col-md-12 col-sm-12">
-			      			<label class="col-lg-4 col-md-4 col-sm-4">Recent Credit Amount</label>
-						      	<input type="text" name="valid_amount" id="valid_amount" class="form-control col-lg-7 col-md-7 col-sm-7" value="" data-value="<%=@sale_id %>" data-member-value="">
-			    		</div>
-			    		<hr>
-			    	</div>
-			    	<div class="row">
-			    		<div class="form-group col-lg-12 col-md-12 col-sm-12">
-			      			<label class="col-lg-4 col-md-4 col-sm-4">Amount</label>
-			      			<div id="amount" class="form-control col-lg-7 col-md-7 col-sm-7">0.0</div>
-			    		</div>
-			    		<hr>
-			    	</div>
-		    	</div>
-			</div>
-	</div>
-
-    <div class="col-lg-6 col-md-6 col-sm-6" style="margin-top:75px;">
-
-    	<div class="row">
-         <div class="col-lg-6 col-md-1 col-sm-1">
-           <div class="row bottom">
-             <div class=" cashier_number " data-value="1" data-type="num">1</div>
-             <div class=" cashier_number left" data-value="2" data-type="num">2</div>
-             <div class=" cashier_number left" data-value="3" data-type="num">3</div>
-           </div>
-           <div class="row bottom">
-             <div class=" cashier_number " data-value="4" data-type="num">4</div>
-             <div class=" cashier_number left" data-value="5" data-type="num">5</div>
-             <div class=" cashier_number left" data-value="6" data-type="num">6</div>
-           </div>
-           <div class="row bottom">
-             <div class=" cashier_number " data-value="7" data-type="num">7</div>
-             <div class=" cashier_number left" data-value="8" data-type="num">8</div>
-             <div class=" cashier_number left" data-value="9" data-type="num">9</div>
-           </div>
-           <div class="row bottom">
-             <div class=" cashier_number " data-value="0" data-type="num">0</div>
-             <div class=" cashier_number left" data-value="." data-type="num">.</div>
-             <div class=" cashier_number left" data-value="00" data-type="num">00</div>
-           </div>
-           <div class="row bottom">
-             <div class=" cashier_number green" data-type="nett" >Nett</div>
-             <div class=" cashier_number red left" data-type="del">Del</div>
-             <div class=" cashier_number orange left" data-type="clr">Clr</div>
-           </div>
-         </div>
-         <div class="col-lg-6 col-md-1 col-sm-1">
-           <div class="row bottom">
-             <div class="cashier_number long" 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" 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">
-             <div class="pay purple" id="credit_pay">Pay</div>
-           </div>
-         </div>
+<div class="container-fluid">
+  <div class="row">
+   <div class="col-lg-5 col-md-5 col-sm-3">
+    <div class="row">
+      <div class="col-md-6">
+        <h2>CREDIT PAYMENT</h2>
       </div>
-
     </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';"> Back </button>
-		</div>
+    <div class="card" style="margin-top:10px;padding-top:20px;">
+      <div class="rebate-form">
+       <!-- <div class="row"> -->
+        <div class="row">
+          <div  class="col-lg-5 col-md-5 col-sm-5">
+          <label>You can pay up to </label>
+          </div>
+          <div class="col-lg-6 col-md-6 col-sm-6">
+          <input type="text" name="validamount" id="validamount" class="form-control"  readonly="" value="<%=@can_credit %>" data-member-value="">
+          </div>
+        </div>
+        <hr>
+      <!-- </div> -->
+      <% if @creditcount != 0 %>
+      <!-- <div class="row"> -->
+      <div class=" row">
+         <div  class="col-lg-5 col-md-5 col-sm-5">
+           <label>Recent Credit Amount </label>
+         </div>
+         <div class="col-lg-6 col-md-6 col-sm-6">
+            <input type="text" name="" class="form-control "  readonly="" value="<%=@creditcount %>" data-member-value="">
+         </div>
+         
+        </div>
+        <hr>
+      <!-- </div> -->
+      <% end %>
+      <!-- <div class="row"> -->
+       <div class="row">
+       <div class="col-lg-5 col-md-5 col-sm-5">
+         <label >Recent Credit Amount</label>
+       </div>
+        <div class="col-lg-6 col-md-6 col-sm-6">
+        <input type="text" name="valid_amount" id="valid_amount" class="form-control" value="" data-value="<%=@sale_id %>" data-member-value="">
+        </div>
+      </div>
+      <hr>
+    <!-- </div> -->
+    <div class="row">
+     <div class="col-lg-5 col-md-5 col-sm-5">
+      <label>Amount</label>
+     </div>
+     <div class="col-lg-7 col-md-7 col-sm-7">
+      <div id="amount" class="form-control">0.0</div>
+    </div>
+    <hr>
+  </div>
+</div>
+</div>
 </div>
 
+<div class="col-lg-6 col-md-6 col-sm-6" style="margin-top:75px;">
+
+ <div class="row">
+   <div class="col-lg-6 col-md-1 col-sm-1">
+     <div class="row bottom">
+       <div class=" cashier_number " data-value="1" data-type="num">1</div>
+       <div class=" cashier_number left" data-value="2" data-type="num">2</div>
+       <div class=" cashier_number left" data-value="3" data-type="num">3</div>
+     </div>
+     <div class="row bottom">
+       <div class=" cashier_number " data-value="4" data-type="num">4</div>
+       <div class=" cashier_number left" data-value="5" data-type="num">5</div>
+       <div class=" cashier_number left" data-value="6" data-type="num">6</div>
+     </div>
+     <div class="row bottom">
+       <div class=" cashier_number " data-value="7" data-type="num">7</div>
+       <div class=" cashier_number left" data-value="8" data-type="num">8</div>
+       <div class=" cashier_number left" data-value="9" data-type="num">9</div>
+     </div>
+     <div class="row bottom">
+       <div class=" cashier_number " data-value="0" data-type="num">0</div>
+       <div class=" cashier_number left" data-value="." data-type="num">.</div>
+       <div class=" cashier_number left" data-value="00" data-type="num">00</div>
+     </div>
+     <div class="row bottom">
+       <div class=" cashier_number green" data-type="nett" >Nett</div>
+       <div class=" cashier_number red left" data-type="del">Del</div>
+       <div class=" cashier_number orange left" data-type="clr">Clr</div>
+     </div>
+   </div>
+   <div class="col-lg-6 col-md-1 col-sm-1">
+     <div class="row bottom">
+       <div class="cashier_number long" 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" 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">
+       <div class="pay purple" id="credit_pay">Pay</div>
+     </div>
+   </div>
+ </div>
+
+</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>
+</div>
+</div>
+</div>
 <script>
-$(document).ready(function() {
-		if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
-	  else {
-	    $('#validamount').attr("value",parseFloat("<%= @can_credit %>") - parseFloat(localStorage.getItem("cash")));
-	  }
-});
-$(document).on('click', '.cashier_number', function(event){
-        event.stopPropagation();
-        event.preventDefault();
-        if(event.handled !== true) {
-            var original_value;
-            original_value = $('#amount').text();
+  $(document).ready(function() {
+    if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
+     else {
+       $('#validamount').attr("value",parseFloat("<%= @can_credit %>") - parseFloat(localStorage.getItem("cash")));
+     }
+   });
+  $(document).on('click', '.cashier_number', function(event){
+    event.stopPropagation();
+    event.preventDefault();
+    if(event.handled !== true) {
+      var original_value;
+      original_value = $('#amount').text();
 
-            var input_value = $(this).attr("data-value");
+      var input_value = $(this).attr("data-value");
 
-            var input_type = $(this).attr("data-type");
-            	switch (input_type) {
-              		case 'num':
-		              	if (original_value == "0.0"){
-			                $('#amount').text(input_value);
-			            }else{
-			                $('#amount').append(input_value);
-			            }
-              		break;
+      var input_type = $(this).attr("data-type");
+      switch (input_type) {
+        case 'num':
+        if (original_value == "0.0"){
+         $('#amount').text(input_value);
+       }else{
+         $('#amount').append(input_value);
+       }
+       break;
 
-              		case 'add':
-	                	var input_value = $(this).attr("data-value");
-	                	amount = parseInt(input_value) + parseInt(original_value);
-	                	$('#amount').html(amount);
+       case 'add':
+       var input_value = $(this).attr("data-value");
+       amount = parseInt(input_value) + parseInt(original_value);
+       $('#amount').html(amount);
 
-             		break;
-             		case 'clr':
-             			$('#amount').html("0.0");
-             		break;
-             		case 'del' :
-			          var cash=$('#amount').text();
-			          $('#amount').text(cash.substr(0,cash.length-1));
-								break;
-								case 'nett':
-								var remain_amount = $('#validamount').val();
-								$('#amount').text(remain_amount);
-			        break;
+       break;
+       case 'clr':
+       $('#amount').html("0.0");
+       break;
+       case 'del' :
+       var cash=$('#amount').text();
+       $('#amount').text(cash.substr(0,cash.length-1));
+       break;
+       case 'nett':
+       var remain_amount = $('#validamount').val();
+       $('#amount').text(remain_amount);
+       break;
 
-          		}
-          	event.handled = true;
-        } else {
-            return false;
-        }
+     }
+     event.handled = true;
+   } else {
+    return false;
+  }
 });
   $('#credit_pay').on('click',function(){
     var amount = $('#amount').text();
     var sale_id = "<%= @sale_id %>";
-		if(parseFloat(amount) <= parseFloat($("#validamount").attr("value"))){
-    $.ajax({type: "POST",
-      url: "<%= origami_payment_credit_path  %>",
-      data: "amount="+ amount + "&sale_id="+ sale_id,
-      success:function(result){
-        if(result){
-          alert("Payment success")
-          window.location.href = '/origami/sale/'+ sale_id  + "/payment";
-       }
-      }
-    });
-	}else{
-		alert("Paid Amount is over!");
-	}
+    if(parseFloat(amount) <= parseFloat($("#validamount").attr("value"))){
+      $.ajax({type: "POST",
+        url: "<%= origami_payment_credit_path  %>",
+        data: "amount="+ amount + "&sale_id="+ sale_id,
+        success:function(result){
+          if(result){
+            alert("Payment success")
+            window.location.href = '/origami/sale/'+ sale_id  + "/payment";
+          }
+        }
+      });
+    }else{
+      alert("Paid Amount is over!");
+    }
   })
 </script>
diff --git a/app/views/origami/discounts/index.html.erb b/app/views/origami/discounts/index.html.erb
index 2c3d970a..89913c8b 100644
--- a/app/views/origami/discounts/index.html.erb
+++ b/app/views/origami/discounts/index.html.erb
@@ -1,63 +1,64 @@
- <div class="row">
-  <!-- Column One -->
-  <div class="col-lg-6 col-md-6 col-sm-6">
-    <!-- Order Details -->
-    <div class="card"  >
+ <div class="container-fluid">
+ 	<div class="row">
+ 		<!-- Column One -->
+ 		<div class="col-lg-6 col-md-6 col-sm-6">
+ 			<!-- Order Details -->
+ 			<div class="card"  >
         <!-- <div class="card-header">
           <div><strong id="order-title">ORDER DETAILS</strong></div>
-        </div> -->
-        <div class="card-block">
-          <div class="card-title row">
-            <div class="col-lg-6 col-md-6 col-sm-6">
-              <p id="sale-id" class="hidden"><%=@sale_data.sale_id %></p>
-              <p>Receipt No: <span id="receipt_no"><%=@sale_data.receipt_no rescue ' '%></span></p>
-              <!-- <p>Cashier:  <span id="cashier"><%=@sale_data.cashier_name rescue ' '%></span></p> -->
-            </div>
-            <div class="col-lg-6 col-md-6 col-sm-6 text-right">
-              <p>Date:  <span id="receipt_date"> <%=@sale_data.receipt_date.strftime("%d/%m/%Y - %I:%M %p") rescue '-'%></span></p>
-            </div>
-          </div>
-          <div class="card-text dining">
-            <table class="table table-default" id="order-items-table">
-              <thead>
-                <tr>
-                  <th class="item-name">Items</th>
-                  <th class="item-attr">QTY</td>
-                  <th class="item-attr">Price</td>
-                </tr>
-              </thead>
-              <tbody>
-                <% sub_total = 0 %>
-	            <% @sale_data.sale_items.each do |sale_item| %>
-	          		<% 
-		          		sub_total += sale_item.qty*sale_item.unit_price 
-		          		if sale_item.price != 0 && sale_item.remark != "void"
-	          		%>
-	            	<tr class="item-row" id=<%= sale_item.sale_item_id %> >
-	                    <td style="width:60%; text-align:left">
-	                       <span id="item-account-type" class="hidden"><%=sale_item.account_id%></span>
-	                       <span id="item-name-price"><%=sale_item.product_name%>@<%=sale_item.unit_price%></span>
-	                    </td>
-	                    <td style="width:20%; text-align:right">
-	                      <span id="item-qty"><%=sale_item.qty%></span>
-	                    </td>
-	                    <td style="width:20%; text-align:right">
-	                       <span id="item-total-price"><%=(sale_item.qty*sale_item.unit_price)%></span>
-	                    </td>
-	                  </tr>
-	            <%
-	            	   	end
-	            	end 
-	            %>
-              </tbody>
-            </table>
-          </div>
-          <div class="card-footer">
-            <table class="table" id="order-charges-table" border="0">
-              <tr>
-                <td class="charges-name"><strong>Sub Total:</strong></td>
-                <td class="item-attr"><strong id="order-sub-total"><%=sub_total%></strong></td>
-              </tr>
+      </div> -->
+      <div class="card-block">
+      	<div class="card-title row">
+      		<div class="col-lg-6 col-md-6 col-sm-6">
+      			<p id="sale-id" class="hidden"><%=@sale_data.sale_id %></p>
+      			<p>Receipt No: <span id="receipt_no"><%=@sale_data.receipt_no rescue ' '%></span></p>
+      			<!-- <p>Cashier:  <span id="cashier"><%=@sale_data.cashier_name rescue ' '%></span></p> -->
+      		</div>
+      		<div class="col-lg-6 col-md-6 col-sm-6 text-right">
+      			<p>Date:  <span id="receipt_date"> <%=@sale_data.receipt_date.strftime("%d/%m/%Y - %I:%M %p") rescue '-'%></span></p>
+      		</div>
+      	</div>
+      	<div class="card-text dining">
+      		<table class="table table-default" id="order-items-table">
+      			<thead>
+      				<tr>
+      					<th class="item-name">Items</th>
+      					<th class="item-attr">QTY</td>
+      						<th class="item-attr">Price</td>
+      						</tr>
+      					</thead>
+      					<tbody>
+      						<% sub_total = 0 %>
+      						<% @sale_data.sale_items.each do |sale_item| %>
+      						<% 
+      						sub_total += sale_item.qty*sale_item.unit_price 
+      						if sale_item.price != 0 && sale_item.remark != "void"
+      							%>
+      							<tr class="item-row" id=<%= sale_item.sale_item_id %> >
+      								<td style="width:60%; text-align:left">
+      									<span id="item-account-type" class="hidden"><%=sale_item.account_id%></span>
+      									<span id="item-name-price"><%=sale_item.product_name%>@<%=sale_item.unit_price%></span>
+      								</td>
+      								<td style="width:20%; text-align:right">
+      									<span id="item-qty"><%=sale_item.qty%></span>
+      								</td>
+      								<td style="width:20%; text-align:right">
+      									<span id="item-total-price"><%=(sale_item.qty*sale_item.unit_price)%></span>
+      								</td>
+      							</tr>
+      							<%
+      						end
+      					end 
+      					%>
+      				</tbody>
+      			</table>
+      		</div>
+      		<div class="card-footer">
+      			<table class="table" id="order-charges-table" border="0">
+      				<tr>
+      					<td class="charges-name"><strong>Sub Total:</strong></td>
+      					<td class="item-attr"><strong id="order-sub-total"><%=sub_total%></strong></td>
+      				</tr>
               <!-- <tr>
                 <td class="charges-name"><strong>Food:</strong></td>
                 <td class="item-attr"><strong id="order-food"></strong></td>
@@ -65,39 +66,39 @@
               <tr>
                 <td class="charges-name"><strong>Beverage:</strong></td>
                 <td class="item-attr"><strong id="order-beverage"></strong></td>
-              </tr> -->
-              <tr>
-               <%if @sale_data.discount_type == 'member_discount'%>
-               	<td class="charges-name"><strong>Member Discount:</strong></td>
-               <%else%>
-               	<td class="charges-name"><strong>Discount:</strong></td>
-               <%end%>
-                
-                <td class="item-attr">(<strong id="order-discount"><%=@sale_data.total_discount rescue 0%></strong>)</td>
-              </tr>
-              <tr class="hidden">
-                <td class="charges-name"><strong>Tax:</strong></td>
-                <td class="item-attr"><strong id="order-Tax"><%=@sale_data.total_tax rescue 0%></strong></td>
-              </tr>
-              <tr class="hidden">
-                <td class="charges-name"><strong>Grand Total:</strong></td>
-                <td class="item-attr"><strong id="order-grand-total"><%=@sale_data.grand_total rescue 0%></strong></td>
-              </tr>
-            </table>
-          </div>
-        </div>
-    </div>
-  </div>
-  <!-- Column One -->
+            </tr> -->
+            <tr>
+            	<%if @sale_data.discount_type == 'member_discount'%>
+            	<td class="charges-name"><strong>Member Discount:</strong></td>
+            	<%else%>
+            	<td class="charges-name"><strong>Discount:</strong></td>
+            	<%end%>
 
-  <!-- Column Two -->
-  <div class="col-lg-5 col-md-5 col-sm-5">
+            	<td class="item-attr">(<strong id="order-discount"><%=@sale_data.total_discount rescue 0%></strong>)</td>
+            </tr>
+            <tr class="hidden">
+            	<td class="charges-name"><strong>Tax:</strong></td>
+            	<td class="item-attr"><strong id="order-Tax"><%=@sale_data.total_tax rescue 0%></strong></td>
+            </tr>
+            <tr class="hidden">
+            	<td class="charges-name"><strong>Grand Total:</strong></td>
+            	<td class="item-attr"><strong id="order-grand-total"><%=@sale_data.grand_total rescue 0%></strong></td>
+            </tr>
+        </table>
+    </div>
+</div>
+</div>
+</div>
+<!-- Column One -->
+
+<!-- Column Two -->
+<div class="col-lg-5 col-md-5 col-sm-5">
 	<!-- Discount Amount -->
-    <div class="card">
-        <div class="card-header">
-          <div><strong id="order-title">Discount Control</strong></div>
-        </div>
-        <div class="card-block">
+	<div class="card">
+		<div class="card-header">
+			<div><strong id="order-title">Discount Control</strong></div>
+		</div>
+		<div class="card-block">
 			<div class="card-title">
 				<div class="form-horizontal">
 					<div class="col-md-12">	
@@ -106,115 +107,126 @@
 						</div>
 						<div class="form-group">			
 							<%
-								@accounts.each do |acc|								
-							%>
-							<button id="account-<%= acc.id %>" class="accounts-type btn btn-default"><%= acc.title %></button>
-							<% end %>
-						</div>
-					</div>					
+							@accounts.each do |acc|								
+								%>
+								<button id="account-<%= acc.id %>" class="accounts-type btn bg-default"><%= acc.title %></button>
+								<% end %>
+							</div>
+						</div>					
+					</div>
 				</div>
+
+				<hr />
+
+				<div class="row">
+					<div class="col-md-9">
+						<div class="row bottom">
+							<div class="col-md-3">
+								<div class="fluid cashier_number" data-value="5" data-type="add">5%</div>
+							</div>
+							<div class="col-md-9">
+								<div class="row">
+									<div class="col-md-3 cashier_number" data-value="1" data-type="num">1</div>
+									<div class="col-md-3 left cashier_number" data-value="2" data-type="num">2</div>
+									<div class="col-md-3 left cashier_number" data-value="3" data-type="num">3</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="row bottom clearfix">
+							<div class="col-md-3">
+								<div class="fluid cashier_number" data-value="10" data-type="add">10%</div>
+							</div>
+							<div class="col-md-9">
+								<div class="row">
+									<div class="col-md-3 cashier_number" data-value="4" data-type="num">4</div>
+									<div class="col-md-3 left cashier_number" data-value="5" data-type="num">5</div>
+									<div class="col-md-3 left cashier_number" data-value="6" data-type="num">6</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="row bottom">
+							<div class="col-md-3">
+								<div class="fluid cashier_number" data-value="15" data-type="add">15%</div>
+							</div>
+							<div class="col-md-9">
+								<div class="row">
+									<div class="col-md-3 cashier_number" data-value="7" data-type="num">7</div>
+									<div class="col-md-3 left cashier_number" data-value="8" data-type="num">8</div>
+									<div class="col-md-3 left cashier_number" data-value="9" data-type="num">9</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="row bottom">
+							<div class="col-md-3">
+								<div class="fluid cashier_number" data-value="20" data-type="add">20%</div>
+							</div>
+							<div class="col-md-9">
+								<div class="row">
+									<div class="col-md-3 cashier_number" data-value="0" data-type="num">0</div>
+									<div class="col-md-3 left cashier_number" data-value="." data-type="num">.</div>
+									<div class="col-md-3 left cashier_number" data-value="00" data-type="num">00</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="row">
+							<div class="col-md-3">
+								<div class="fluid cashier_number" data-value="30" data-type="add">30%</div>
+							</div>
+							<div class="col-md-9">
+								<div class="row">
+									<div class="col-md-3 cashier_number"></div>
+									<div class="col-md-3 left cashier_number red" data-type="del">DEL</div>
+									<div class="col-md-3 left cashier_number green" data-type="clr">CLR</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="col-md-3">
+						<div class="form-group">
+							<button id="net" class="btn bg-info fluid action-btn">Nett</button>
+							<button id="percentage" class="btn bg-primary fluid action-btn">Percentage</button>	
+							<button id="remove-item" class="btn bg-default fluid action-btn">Clear Discount</button>
+						</div>
+					</div>
+				</div>	
 			</div>
+		</div>
+	</div>
 
-			<hr />
-
-	      	<div class="row">
-	      		<div class="col-md-9">
-		         <div class="row bottom">
-		           <div class="col-md-3">
-		              <div class="fluid cashier_number" data-value="5" data-type="add">5%</div>
-		           </div>
-		           <div class="col-md-9">
-		                 <div class="col-md-4 cashier_number" data-value="1" data-type="num">1</div>
-		                 <div class="col-md-4 left cashier_number" data-value="2" data-type="num">2</div>
-		                 <div class="col-md-4 left cashier_number" data-value="3" data-type="num">3</div>
-		            </div>
-		         </div>
-
-		         <div class="row bottom">
-		           <div class="col-md-3">
-		             <div class="fluid cashier_number" data-value="10" data-type="add">10%</div>
-		           </div>
-		           <div class="col-md-9">
-		                <div class="col-md-4 cashier_number" data-value="4" data-type="num">4</div>
-		                <div class="col-md-4 left cashier_number" data-value="5" data-type="num">5</div>
-		                <div class="col-md-4 left cashier_number" data-value="6" data-type="num">6</div>
-		           </div>
-		         </div>
-
-		         <div class="row bottom">
-		            <div class="col-md-3">
-		                <div class="fluid cashier_number" data-value="15" data-type="add">15%</div>
-		            </div>
-		            <div class="col-md-9">
-		                 <div class="col-md-4 cashier_number" data-value="7" data-type="num">7</div>
-		                 <div class="col-md-4 left cashier_number" data-value="8" data-type="num">8</div>
-		                 <div class="col-md-4 left cashier_number" data-value="9" data-type="num">9</div>
-		            </div>
-		         </div>
-
-		          <div class="row bottom">
-		          	 <div class="col-md-3">
-		                <div class="fluid cashier_number" data-value="20" data-type="add">20%</div>
-		             </div>
-		             <div class="col-md-9">
-		                  <div class="col-md-4 cashier_number" data-value="0" data-type="num">0</div>
-		                  <div class="col-md-4 left cashier_number" data-value="." data-type="num">.</div>
-		                  <div class="col-md-4 left cashier_number" data-value="00" data-type="num">00</div>
-		             </div>
-		          </div>
-
-		          <div class="row">
-		          	 <div class="col-md-3">
-		                <div class="fluid cashier_number" data-value="30" data-type="add">30%</div>
-		             </div>
-		             <div class="col-md-9">
-		                 <div class="col-md-4 cashier_number"></div>
-		                 <div class="col-md-4 left cashier_number red" data-type="del">DEL</div>
-		                 <div class="col-md-4 left cashier_number green" data-type="clr">CLR</div>
-		             </div>
-		          </div>
-		      	</div>
-
-		      	<div class="col-md-3">
-		      		<div class="form-group">
-						<button id="net" class="btn btn-info fluid action-btn">Nett</button>
-						<button id="percentage" class="btn btn-primary fluid action-btn">Percentage</button>	
-						<button id="remove-item" class="btn btn-default fluid action-btn">Clear Discount</button>
-		      		</div>
-	        	</div>
-	      	</div>	
-        </div>
-    </div>
-  </div>
-
-  <!-- Column Three -->
-  <div class="col-lg-1 col-md-1 col-sm-1">
-	<!-- Action Panel -->
-    <div>
-	    <button type="button" class="btn btn-primary btn-block" onclick="window.location.href = '/origami';"><i class="fa fa-arrow-left"></i> Back </button>
-	    <button id="remove-item-discount" class="btn btn-warning btn-block action-btn">RemoveItem Discount</button>
-	    <button id="remove-all" class="btn btn-warning btn-block action-btn">Remove All</button>
-		<button id="pay-discount" class="btn btn-danger btn-block action-btn">Enter</button>
-		<% if @member_discount%>
+	<!-- Column Three -->
+	<div class="col-lg-1 col-md-1 col-sm-1">
+		<!-- Action Panel -->
+		<div>
+			<button type="button" class="btn bg-default btn-block" onclick="window.location.href = '/origami';"><i class="fa fa-arrow-left"></i> Back </button>
+			<button id="remove-item-discount" class="btn btn-warning btn- action-btn">Remove Item Discount</button>
+			<button id="remove-all" class="btn bg-warning btn-block action-btn">Remove All</button>
+			<button id="pay-discount" class="btn bg-danger btn-block action-btn">Enter</button>
+			<% if @member_discount%>
 			<!-- <hr />		
 			<button id="member-discount" class="btn btn-success btn-block action-btn
 			<%= @sale_data.customer.membership_id ? " " : "disabled"%>">Member Discount</button> -->
-		<%end %>
-    </div>
-  </div>
+			<%end %>
+		</div>
+	</div>
+</div>
 </div>
 
 <script type="text/javascript">
-$(document).ready(function(){
-	$(".cashier_number").on('click', function(event){
-		if(event.handled !== true) {
-	      	var original_value=0;
-        	original_value = $('#discount-amount').val();
+	$(document).ready(function(){
+		$(".cashier_number").on('click', function(event){
+			if(event.handled !== true) {
+				var original_value=0;
+				original_value = $('#discount-amount').val();
 
-        	var input_type = $(this).attr("data-type");
+				var input_type = $(this).attr("data-type");
 
-	        switch (input_type) {
-	          case 'num':
+				switch (input_type) {
+					case 'num':
 					var input_value = $(this).attr("data-value");
 					if (original_value == "0.0"){
 						$('#discount-amount').val(input_value);						
@@ -224,26 +236,26 @@ $(document).ready(function(){
 					}
 					break;
 
-	          case 'add':
+					case 'add':
 					var input_value = $(this).attr("data-value");
 					amount = parseInt(input_value);
 					$('#discount-amount').val(amount);										
 					break;
 
-			  case 'del' :
-			  		var discount_text=$('#discount-amount').val();
-			  		$('#discount-amount').val(discount_text.substr(0,discount_text.length-1));		
+					case 'del' :
+					var discount_text=$('#discount-amount').val();
+					$('#discount-amount').val(discount_text.substr(0,discount_text.length-1));		
 					break;
 
-	          case 'clr':
-	             $('#discount-amount').val("0.0");	            
-	          break;
-		    }
-	      	event.handled = true;
-	    } else {
-	        return false;
-	    }
-	});
+					case 'clr':
+					$('#discount-amount').val("0.0");	            
+					break;
+				}
+				event.handled = true;
+			} else {
+				return false;
+			}
+		});
 
 	// Select Sale Item
 	$('.item-row').on('click',function(){
@@ -251,8 +263,8 @@ $(document).ready(function(){
 			$(this).removeClass('selected-item');
 		}
 		else {
-	    	$(this).addClass('selected-item');
-	    }
+			$(this).addClass('selected-item');
+		}
 	});
 
 	// Select discount-item
@@ -261,8 +273,8 @@ $(document).ready(function(){
 			$(this).removeClass('selected-item');
 		}
 		else {
-	    	$(this).addClass('selected-item');
-	    }
+			$(this).addClass('selected-item');
+		}
 	});
 
 	// Select for account types
@@ -272,19 +284,19 @@ $(document).ready(function(){
 		if($(this).hasClass('selected-account') == true){
 			$(this).removeClass('selected-account');
 			$(".item-row").each(function(i){
-	        	if($(this).children().find("#item-account-type").text() == account_id){
-	        		$(this).removeClass("selected-item");
-	        	}
-	        });
+				if($(this).children().find("#item-account-type").text() == account_id){
+					$(this).removeClass("selected-item");
+				}
+			});
 		}
 		else {
-	    	$(this).addClass('selected-account');
-	    	$(".item-row").each(function(i){
-	        	if($(this).children().find("#item-account-type").text() == account_id){
-	        		$(this).addClass("selected-item");
-	        	}
-	        });
-	    }        
+			$(this).addClass('selected-account');
+			$(".item-row").each(function(i){
+				if($(this).children().find("#item-account-type").text() == account_id){
+					$(this).addClass("selected-item");
+				}
+			});
+		}        
 	});
 
 	// Calculate Net Discount for Payment
@@ -362,28 +374,28 @@ $(document).ready(function(){
 
 		$.ajax({
 			type: "POST",
-		    url: ajax_url,
-		    data: params,
-		    success:function(result){			    		    			    
-		    	$.confirm({
-	              title: 'Infomation!',
-	              content: result.status,
-	              buttons: {
-	                confirm: {
-	                text: 'Ok',
-	                btnClass: 'btn-green',
-	                  action: function(){
-	                    if(result.table_type == "Table"){
-				    		window.location.href = "/origami/table/" + result.table_id
-				    	}
-				    	else {
-				    		window.location.href = "/origami/room/" + result.table_id
-				    	}
-	                  }
-	                }
-	              }
-	            });		    			    	
-		    }
+			url: ajax_url,
+			data: params,
+			success:function(result){			    		    			    
+				$.confirm({
+					title: 'Infomation!',
+					content: result.status,
+					buttons: {
+						confirm: {
+							text: 'Ok',
+							btnClass: 'btn-green',
+							action: function(){
+								if(result.table_type == "Table"){
+									window.location.href = "/origami/table/" + result.table_id
+								}
+								else {
+									window.location.href = "/origami/room/" + result.table_id
+								}
+							}
+						}
+					}
+				});		    			    	
+			}
 		});
 	});
 
@@ -397,18 +409,18 @@ $(document).ready(function(){
 		var sale_items = get_selected_sale_items();	
 		if(sale_items.length == 0){
 			$.confirm({
-              title: 'Infomation!',
-              content: "You have no selected item!",
-              buttons: {
-                confirm: {
-                text: 'Ok',
-                btnClass: 'btn-green',
-                  action: function(){
-                    return;
-                  }
-                }
-              }
-            });						
+				title: 'Infomation!',
+				content: "You have no selected item!",
+				buttons: {
+					confirm: {
+						text: 'Ok',
+						btnClass: 'btn-green',
+						action: function(){
+							return;
+						}
+					}
+				}
+			});						
 		}
 
 		for(var i=0;i < sale_items.length;i++){
@@ -417,18 +429,18 @@ $(document).ready(function(){
 			}
 			else {
 				$.confirm({
-	              title: 'Infomation!',
-	              content: "You have selected no discount item!!",
-	              buttons: {
-	                confirm: {
-	                text: 'Ok',
-	                btnClass: 'btn-green',
-	                  action: function(){
-	                    return;
-	                  }
-	                }
-	              }
-	            });									
+					title: 'Infomation!',
+					content: "You have selected no discount item!!",
+					buttons: {
+						confirm: {
+							text: 'Ok',
+							btnClass: 'btn-green',
+							action: function(){
+								return;
+							}
+						}
+					}
+				});									
 			}
 		}
 
@@ -439,23 +451,23 @@ $(document).ready(function(){
 			data: params,
 			success: function(result){
 				$.confirm({
-	              title: 'Infomation!',
-	              content: result.status,
-	              buttons: {
-	                confirm: {
-	                text: 'Ok',
-	                btnClass: 'btn-green',
-	                  action: function(){
-	                    if(result.table_type == "Table"){
-				    		window.location.href = "/origami/table/" + result.table_id
-				    	}
-				    	else {
-				    		window.location.href = "/origami/room/" + result.table_id
-				    	}
-	                  }
-	                }
-	              }
-	            });				
+					title: 'Infomation!',
+					content: result.status,
+					buttons: {
+						confirm: {
+							text: 'Ok',
+							btnClass: 'btn-green',
+							action: function(){
+								if(result.table_type == "Table"){
+									window.location.href = "/origami/table/" + result.table_id
+								}
+								else {
+									window.location.href = "/origami/room/" + result.table_id
+								}
+							}
+						}
+					}
+				});				
 			}
 		});
 	});
@@ -468,23 +480,23 @@ $(document).ready(function(){
 			url: "/origami/" + sale_id + "/remove_all_discount",
 			success: function(result){
 				$.confirm({
-	              title: 'Infomation!',
-	              content: result.status,
-	              buttons: {
-	                confirm: {
-	                text: 'Ok',
-	                btnClass: 'btn-green',
-	                  action: function(){
-	                    if(result.table_type == "Table"){
-				    		window.location.href = "/origami/table/" + result.table_id
-				    	}
-				    	else {
-				    		window.location.href = "/origami/room/" + result.table_id
-				    	}
-	                  }
-	                }
-	              }
-	            });				
+					title: 'Infomation!',
+					content: result.status,
+					buttons: {
+						confirm: {
+							text: 'Ok',
+							btnClass: 'btn-green',
+							action: function(){
+								if(result.table_type == "Table"){
+									window.location.href = "/origami/table/" + result.table_id
+								}
+								else {
+									window.location.href = "/origami/room/" + result.table_id
+								}
+							}
+						}
+					}
+				});				
 			}
 		});
 	});
@@ -507,41 +519,41 @@ $(document).ready(function(){
 
 		$.ajax({
 			type: "POST",
-		    url: ajax_url,
-		    data: params,
-		    success:function(result){
-console.log(result)
-		    	if (result.status == "Success") {
-		    		type   = 'green'
-		    		btn_color = 'btn-green'
-		    	}else{
-		    		type   = 'red'
-		    		btn_color = 'btn-red'
+			url: ajax_url,
+			data: params,
+			success:function(result){
+				console.log(result)
+				if (result.status == "Success") {
+					type   = 'green'
+					btn_color = 'btn-green'
+				}else{
+					type   = 'red'
+					btn_color = 'btn-red'
 
-		    	}
-		    	
-		        $.confirm({
-	              title: result.title,
-	              content: result.status,
-	              columnClass: 'small',
-	              type: type,
-	              buttons: {
-	                confirm: {
-	                text: 'Ok',
-	                btnClass: btn_color,
-	                  action: function(){
-	                    if(result.table_type == "Table"){
-				    		window.location.href = "/origami/table/" + result.table_id
-				    	}
-				    	else {
-				    		window.location.href = "/origami/room/" + result.table_id
-				    	}
-	                  }
-	                }
-	              }
-	            });	
-		    			    	
-		    }
+				}
+
+				$.confirm({
+					title: result.title,
+					content: result.status,
+					columnClass: 'small',
+					type: type,
+					buttons: {
+						confirm: {
+							text: 'Ok',
+							btnClass: btn_color,
+							action: function(){
+								if(result.table_type == "Table"){
+									window.location.href = "/origami/table/" + result.table_id
+								}
+								else {
+									window.location.href = "/origami/room/" + result.table_id
+								}
+							}
+						}
+					}
+				});	
+
+			}
 		});
 		// }
 		// else{
@@ -552,48 +564,48 @@ console.log(result)
   //   			typeAnimated: true,
   //   			btnClass: 'btn-danger',
 		// 	});
-			
+
 		// }
 		
 	});//end member discount
 });
 
-/* Remove Selection */
-function selection_remove(){
-	$(".item-row").removeClass("selected-item");
-	$(".discount_item_row").removeClass("selected-item");
-	$(".accounts-type").removeClass("selected-account");
-}
+ /* Remove Selection */
+ function selection_remove(){
+ 	$(".item-row").removeClass("selected-item");
+ 	$(".discount_item_row").removeClass("selected-item");
+ 	$(".accounts-type").removeClass("selected-account");
+ }
 
-/* Get Item rows but not discount*/
-function get_item_rows(){
-	var sale_items = [];	
-	$('.item-row').not('.discount-item-row').each(function(i){
-		var sale_item = {};
-		sale_item.id = $(this).attr('id').substr(0,16);
-		sale_item.name = $(this).find('#item-name-price').text().split('@')[0];
-		sale_item.account_id = $(this).find('#item-account-type').text();
-		sale_item.price = $(this).find('#item-total-price').text();
-		sale_items.push(sale_item);
-	});	
-	return sale_items;
-}
+ /* Get Item rows but not discount*/
+ function get_item_rows(){
+ 	var sale_items = [];	
+ 	$('.item-row').not('.discount-item-row').each(function(i){
+ 		var sale_item = {};
+ 		sale_item.id = $(this).attr('id').substr(0,16);
+ 		sale_item.name = $(this).find('#item-name-price').text().split('@')[0];
+ 		sale_item.account_id = $(this).find('#item-account-type').text();
+ 		sale_item.price = $(this).find('#item-total-price').text();
+ 		sale_items.push(sale_item);
+ 	});	
+ 	return sale_items;
+ }
 
-/* Get discount Item rows */
-function get_discount_item_rows(){
-	var sale_items = [];	
-	$('.discount-item-row').each(function(i){
-		var sale_item = {};
-		sale_item.id = $(this).attr('id');
-		sale_item.name = $(this).find('#item-name-price').text();
-		sale_item.account_id = $(this).find('#item_account_type').text();
-		sale_item.price = $(this).find('#item-total-price').text();
-		sale_items.push(sale_item);
-	});	
-	return sale_items;
-}
+ /* Get discount Item rows */
+ function get_discount_item_rows(){
+ 	var sale_items = [];	
+ 	$('.discount-item-row').each(function(i){
+ 		var sale_item = {};
+ 		sale_item.id = $(this).attr('id');
+ 		sale_item.name = $(this).find('#item-name-price').text();
+ 		sale_item.account_id = $(this).find('#item_account_type').text();
+ 		sale_item.price = $(this).find('#item-total-price').text();
+ 		sale_items.push(sale_item);
+ 	});	
+ 	return sale_items;
+ }
 
-/* Get discount Item rows */
+ /* Get discount Item rows */
 // function get_selected_discount_items(){
 // 	var sale_items = [];	
 // 	$('.discount-item-row').hasClass('.selected-item').each(function(i){
@@ -650,18 +662,18 @@ function calculate_overall_discount(type, amount){
 	if(type == 1){
 		if(amount > 100 ){
 			$.confirm({
-              title: 'Infomation!',
-              content: "Percentage Value over 100!",
-              buttons: {
-                confirm: {
-                text: 'Ok',
-                btnClass: 'btn-green',
-                  action: function(){
-                    return;
-                  }
-                }
-              }
-            });	
+				title: 'Infomation!',
+				content: "Percentage Value over 100!",
+				buttons: {
+					confirm: {
+						text: 'Ok',
+						btnClass: 'btn-green',
+						action: function(){
+							return;
+						}
+					}
+				}
+			});	
 		}
 		else{
 			total_discount = (origin_sub_total * amount)/100;
@@ -693,9 +705,9 @@ function calculate_item_discount(type, amount, sale_items, account_types){
 				// 	}
 				// }
 				// else {
-				var discount_item_row = item_row_template(type,sale_items[i], dis_amount, amount);
-				$("#order-items-table tbody").append(discount_item_row);
-				total_discount = total_discount + amount;
+					var discount_item_row = item_row_template(type,sale_items[i], dis_amount, amount);
+					$("#order-items-table tbody").append(discount_item_row);
+					total_discount = total_discount + amount;
 				// }
 			}
 		}
@@ -727,18 +739,18 @@ function calculate_item_discount(type, amount, sale_items, account_types){
 	if(type == 1){
 		if(amount > 100 ){
 			$.confirm({
-              title: 'Infomation!',
-              content: "Percentage Value over 100!",
-              buttons: {
-                confirm: {
-                text: 'Ok',
-                btnClass: 'btn-green',
-                  action: function(){
-                    return;
-                  }
-                }
-              }
-            });						
+				title: 'Infomation!',
+				content: "Percentage Value over 100!",
+				buttons: {
+					confirm: {
+						text: 'Ok',
+						btnClass: 'btn-green',
+						action: function(){
+							return;
+						}
+					}
+				}
+			});						
 		}
 		else{
 			// Check sale items exists
@@ -798,23 +810,23 @@ function item_row_template(type, item, discount_amount, amount){
 		dis_str = dis_str + "(" + amount + "%)"
 	}
 	var discount_item_row = "<tr class='discount-item-row' id='" + item.id + "'>" +
-        						"<td style='width: 60%; text-align: left;'>" + 
-        						"<span id='item_account_type' class='hidden'>" + 
-        							item.account_id +
-        						"</span>" + 
-        						"<span id='item-name-price'>" + 
-        							item.name + dis_str +
-        						"</span>" + 
-        						"</td>" +
-        						"<td style='width: 20%; text-align: right;'>" + 
-        						"<span id='item-qty'>1</span>" +
-        						"</td>" +
-        						"<td style='width: 20%; text-align: right;'>" + 
-        						"<span id='item-total-price'>" + 
-        							discount_amount +
-        						"</span>" + 
-        						"</td>" +
-    					   		"</tr>";
+	"<td style='width: 60%; text-align: left;'>" + 
+	"<span id='item_account_type' class='hidden'>" + 
+	item.account_id +
+	"</span>" + 
+	"<span id='item-name-price'>" + 
+	item.name + dis_str +
+	"</span>" + 
+	"</td>" +
+	"<td style='width: 20%; text-align: right;'>" + 
+	"<span id='item-qty'>1</span>" +
+	"</td>" +
+	"<td style='width: 20%; text-align: right;'>" + 
+	"<span id='item-total-price'>" + 
+	discount_amount +
+	"</span>" + 
+	"</td>" +
+	"</tr>";
 	return  discount_item_row; 					   		
 }
 
diff --git a/app/views/origami/in_duties/_form.html.erb b/app/views/origami/in_duties/_form.html.erb
index 3351dbd3..9e6ba0e4 100644
--- a/app/views/origami/in_duties/_form.html.erb
+++ b/app/views/origami/in_duties/_form.html.erb
@@ -16,12 +16,12 @@
     </div><br>
 
     <div class="form-group">
-      <% f.button :submit, "Create", :class => 'btn btn-primary ', :id => 'create' %>
-      <% f.button :submit, "Update", :class => 'btn btn-primary ', :disabled => '', :id => 'update' %>
-      <% f.button :button, "Reset", :class => 'btn btn-danger ', :id => 'reset' %>
+      <% f.button :submit, "Create", :class => 'btn bg-blue ', :id => 'create' %>
+      <% f.button :submit, "Update", :class => 'btn bg-blue ', :disabled => '', :id => 'update' %>
+      <% f.button :button, "Reset", :class => 'btn bg-danger ', :id => 'reset' %>
     </div>
     <div class="form-actions">
-      <%= f.button :submit, :class => 'btn btn-primary' %>
+      <%= f.button :submit, :class => 'btn bg-blue' %>
     </div>
 
 <% end %>
diff --git a/app/views/origami/in_duties/assign_in_duty.html.erb b/app/views/origami/in_duties/assign_in_duty.html.erb
index 31e95a50..16e32dc7 100644
--- a/app/views/origami/in_duties/assign_in_duty.html.erb
+++ b/app/views/origami/in_duties/assign_in_duty.html.erb
@@ -22,10 +22,10 @@
 		  <div class="form-actions">
 		  <div class='row'>
 		    <div class="col-md-2">
-		    <%= link_to 'Back', origami_index_in_duty_path(@table.id), class: 'btn btn-success' %>
+		    <%= link_to 'Back', origami_index_in_duty_path(@table.id), class: 'btn bg-default' %>
 		    </div>
 		    <div class="col-md-10">
-		    <button type="button" class="btn btn-primary btn-block" id='in_duty'>Create In Duty</button>
+		    <button type="button" class="btn bg-blue btn-block" id='in_duty'>Create In Duty</button>
 		    </div>
 		  </div>
 		  </div>
diff --git a/app/views/origami/in_duties/index.html.erb b/app/views/origami/in_duties/index.html.erb
index 355a7afb..abefb1ea 100644
--- a/app/views/origami/in_duties/index.html.erb
+++ b/app/views/origami/in_duties/index.html.erb
@@ -1,3 +1,4 @@
+<div class="conatiner-fluid">
 <div class="row">
 
   <div class="col-md-8">
@@ -34,14 +35,14 @@
     <%= render 'form', in_duty: @in_duty, table: @table %>
   </div>
   <span style="float: right">
-    <%= link_to t('.new', :default => t("helpers.links.new")), new_origami_in_duty_path, :class => 'btn btn-primary btn-sm' %>
+    <%= link_to t('.new', :default => t("helpers.links.new")), new_origami_in_duty_path, :class => 'btn bg-blue' %>
   </span>
 </div>
 
 <div class="col-md-1">
   <button type="button" class="btn btn-primary btn-block" id='back'>Back</button>
 </div>
-
+</div>
 <script type="text/javascript">
     $(document).on('click', ".induty_tr", function () {
 
diff --git a/app/views/origami/other_charges/index.html.erb b/app/views/origami/other_charges/index.html.erb
index d629cb1c..174e4140 100644
--- a/app/views/origami/other_charges/index.html.erb
+++ b/app/views/origami/other_charges/index.html.erb
@@ -1,227 +1,238 @@
- <div class="row">
-  <!-- Column One -->
-  <div class="col-lg-6 col-md-6 col-sm-6">
-    <!-- Order Details -->
-    <div class="card"  >
+<div class="container-fluid">
+	<div class="row">
+		<!-- Column One -->
+		<div class="col-lg-6 col-md-6 col-sm-6">
+			<!-- Order Details -->
+			<div class="card"  >
         <!-- <div class="card-header">
           <div><strong id="order-title">ORDER DETAILS</strong></div>
-        </div> -->
-        <div class="card-block">
-          <div class="card-title row">
-            <div class="col-lg-6 col-md-6 col-sm-6">
-              <p id="sale-id" class="hidden"><%=@sale_data.sale_id %></p>
-              <p>Receipt No: <span id="receipt_no"><%=@sale_data.receipt_no rescue ' '%></span></p>
-              <!-- <p>Cashier:  <span id="cashier"><%=@sale_data.cashier_name rescue ' '%></span></p> -->
-            </div>
-            <div class="col-lg-6 col-md-6 col-sm-6 text-right">
-              <p>Date:  <span id="receipt_date"> <%=@sale_data.receipt_date.strftime("%d/%m/%Y - %I:%M %p") rescue '-'%></span></p>
-            </div>
-          </div>
-          <div class="card-text dining">
-            <table class="table table-default" id="order-items-table">
-              <thead>
-                <tr>
-                  <th class="item-name">Items</th>
-                  <th class="item-attr">QTY</td>
-                  <th class="item-attr">Price</td>
-                </tr>
-              </thead>
-              <tbody>
-                <% sub_total = 0 %>
-	            <% @sale_data.sale_items.each do |sale_item| %>
-	          		<% 
-		          		sub_total += sale_item.qty*sale_item.unit_price 
-		          		unless sale_item.price == 0
-	          		%>
-	            	<tr class="item-row" id=<%= sale_item.sale_item_id %> >
-	                    <td style="width:60%; text-align:left">
-	                       <span id="item-account-type" class="hidden"><%=sale_item.account_id%></span>
-	                       <span id="item-name-price"><%=sale_item.product_name%>@<%=sale_item.unit_price%></span>
-	                    </td>
-	                    <td style="width:20%; text-align:right">
-	                      <span id="item-qty"><%=sale_item.qty%></span>
-	                    </td>
-	                    <td style="width:20%; text-align:right">
-	                       <span id="item-total-price"><%=(sale_item.qty*sale_item.unit_price)%></span>
-	                    </td>
-	                  </tr>
-	            <%
-	            	   	end
-	            	end 
-	            %>
-              </tbody>
-            </table>
-          </div>
-          <div class="card-footer">
-            <table class="table" id="order-charges-table" border="0">
-              <tr>
-                <td class="charges-name"><strong>Sub Total:</strong></td>
-                <td class="item-attr"><strong id="order-sub-total"><%=sub_total%></strong></td>
-              </tr>             
-              <tr>
-                <%if @sale_data.discount_type == 'member_discount'%>
-                <td class="charges-name"><strong>Member Discount:</strong></td>
-               <%else%>
-                <td class="charges-name"><strong>Discount:</strong></td>
-               <%end%>
-                <td class="item-attr">(<strong id="order-discount"><%=@sale_data.total_discount rescue 0%></strong>)</td>
-              </tr>
-              <tr class="hidden">
-                <td class="charges-name"><strong>Tax:</strong></td>
-                <td class="item-attr"><strong id="order-Tax"><%=@sale_data.total_tax rescue 0%></strong></td>
-              </tr>
-              <tr class="hidden">
-                <td class="charges-name"><strong>Grand Total:</strong></td>
-                <td class="item-attr"><strong id="order-grand-total"><%=@sale_data.grand_total rescue 0%></strong></td>
-              </tr>
-            </table>
-          </div>
-        </div>
-    </div>
+      </div> -->
+      <div class="card-block">
+      	<div class="card-title row">
+      		<div class="col-lg-6 col-md-6 col-sm-6">
+      			<p id="sale-id" class="hidden"><%=@sale_data.sale_id %></p>
+      			<p>Receipt No: <span id="receipt_no"><%=@sale_data.receipt_no rescue ' '%></span></p>
+      			<!-- <p>Cashier:  <span id="cashier"><%=@sale_data.cashier_name rescue ' '%></span></p> -->
+      		</div>
+      		<div class="col-lg-6 col-md-6 col-sm-6 text-right">
+      			<p>Date:  <span id="receipt_date"> <%=@sale_data.receipt_date.strftime("%d/%m/%Y - %I:%M %p") rescue '-'%></span></p>
+      		</div>
+      	</div>
+      	<div class="card-text dining">
+      		<table class="table table-default" id="order-items-table">
+      			<thead>
+      				<tr>
+      					<th class="item-name">Items</th>
+      					<th class="item-attr">QTY</td>
+      						<th class="item-attr">Price</td>
+      						</tr>
+      					</thead>
+      					<tbody>
+      						<% sub_total = 0 %>
+      						<% @sale_data.sale_items.each do |sale_item| %>
+      						<% 
+      						sub_total += sale_item.qty*sale_item.unit_price 
+      						unless sale_item.price == 0
+      							%>
+      							<tr class="item-row" id=<%= sale_item.sale_item_id %> >
+      								<td style="width:60%; text-align:left">
+      									<span id="item-account-type" class="hidden"><%=sale_item.account_id%></span>
+      									<span id="item-name-price"><%=sale_item.product_name%>@<%=sale_item.unit_price%></span>
+      								</td>
+      								<td style="width:20%; text-align:right">
+      									<span id="item-qty"><%=sale_item.qty%></span>
+      								</td>
+      								<td style="width:20%; text-align:right">
+      									<span id="item-total-price"><%=(sale_item.qty*sale_item.unit_price)%></span>
+      								</td>
+      							</tr>
+      							<%
+      						end
+      					end 
+      					%>
+      				</tbody>
+      			</table>
+      		</div>
+      		<div class="card-footer">
+      			<table class="table" id="order-charges-table" border="0">
+      				<tr>
+      					<td class="charges-name"><strong>Sub Total:</strong></td>
+      					<td class="item-attr"><strong id="order-sub-total"><%=sub_total%></strong></td>
+      				</tr>             
+      				<tr>
+      					<%if @sale_data.discount_type == 'member_discount'%>
+      					<td class="charges-name"><strong>Member Discount:</strong></td>
+      					<%else%>
+      					<td class="charges-name"><strong>Discount:</strong></td>
+      					<%end%>
+      					<td class="item-attr">(<strong id="order-discount"><%=@sale_data.total_discount rescue 0%></strong>)</td>
+      				</tr>
+      				<tr class="hidden">
+      					<td class="charges-name"><strong>Tax:</strong></td>
+      					<td class="item-attr"><strong id="order-Tax"><%=@sale_data.total_tax rescue 0%></strong></td>
+      				</tr>
+      				<tr class="hidden">
+      					<td class="charges-name"><strong>Grand Total:</strong></td>
+      					<td class="item-attr"><strong id="order-grand-total"><%=@sale_data.grand_total rescue 0%></strong></td>
+      				</tr>
+      			</table>
+      		</div>
+      	</div>
+      </div>
   </div>
   <!-- Column One -->
 
   <!-- Column Two -->
   <div class="col-lg-5 col-md-5 col-sm-5">
-	<!-- Discount Amount -->
-    <div class="card">
-        <div class="card-header">
-          <div><strong id="order-title">Other Charges Control</strong></div>
-        </div>
-        <div class="card-block">
-			<div class="card-title">
-				<div class="form-horizontal">
-					<div class="col-md-12">	
-						<div class="form-group">										
-							<input type="text" id="other-charges-amount" name="other-charges-amount" class="form-control" placeholder="Amount" />							
-						</div>						
-						<div class="form-group">
-							<textarea id="reasons" name="reasons" rows="2" class="form-control" placeholder="Reasons"></textarea>
-						</div>	
-					</div>					
-				</div>
-			</div>
+  	<!-- Discount Amount -->
+  	<div class="card">
+  		<div class="card-header">
+  			<div><strong id="order-title">Other Charges Control</strong></div>
+  		</div>
+  		<div class="card-block">
+  			<div class="card-title">
+  				<div class="form-horizontal">
+  					<div class="col-md-12">	
+  					<div class="-group">										
+  							<input type="text" id="other-charges-amount" name="other-charges-amount" class="form-control" placeholder="Amount" />							
+  						</div>						
+  						<div class="-group">
+  							<textarea id="reasons" name="reasons" rows="2" class="form-control" placeholder="Reasons"></textarea>
+  						</div>	
+  					</div>					
+  				</div>
+  			</div>
 
-			<hr />
+  			<hr />
 
-	      	<div class="row">
-	      		<div class="col-md-9">
-		         <div class="row bottom">
-		           <div class="col-md-3">
-		              <div class="fluid cashier_number" data-value="3000" data-type="add">3000</div>
-		           </div>
-		           <div class="col-md-9">
-		                 <div class="col-md-4 cashier_number" data-value="1" data-type="num">1</div>
-		                 <div class="col-md-4 left cashier_number" data-value="2" data-type="num">2</div>
-		                 <div class="col-md-4 left cashier_number" data-value="3" data-type="num">3</div>
-		            </div>
-		         </div>
+  			<div class="row">
+  				<div class="col-md-9">
+  					<div class="row bottom">
+  						<div class="col-md-3">
+  							<div class="fluid cashier_number" data-value="3000" data-type="add">3000</div>
+  						</div>
+  						<div class="col-md-9">
+  							<div class="row">
+  								<div class="col-md-3 cashier_number" data-value="1" data-type="num">1</div>
+	  							<div class="col-md-3 left cashier_number" data-value="2" data-type="num">2</div>
+	  							<div class="col-md-3 left cashier_number" data-value="3" data-type="num">3</div>
+  							</div>
+  						</div>
+  					</div>
 
-		         <div class="row bottom">
-		           <div class="col-md-3">
-		             <div class="fluid cashier_number" data-value="5000" data-type="add">5000</div>
-		           </div>
-		           <div class="col-md-9">
-		                <div class="col-md-4 cashier_number" data-value="4" data-type="num">4</div>
-		                <div class="col-md-4 left cashier_number" data-value="5" data-type="num">5</div>
-		                <div class="col-md-4 left cashier_number" data-value="6" data-type="num">6</div>
-		           </div>
-		         </div>
+  					<div class="row bottom">
+  						<div class="col-md-3">
+  							<div class="fluid cashier_number" data-value="5000" data-type="add">5000</div>
+  						</div>
+  						<div class="col-md-9">
+  							<div class="row">
+  								<div class="col-md-3 cashier_number" data-value="4" data-type="num">4</div>
+  							<div class="col-md-3 left cashier_number" data-value="5" data-type="num">5</div>
+  							<div class="col-md-3 left cashier_number" data-value="6" data-type="num">6</div>
+  							</div>
+  						</div>
+  					</div>
 
-		         <div class="row bottom">
-		            <div class="col-md-3">
-		                <div class="fluid cashier_number" data-value="10000" data-type="add">10000</div>
-		            </div>
-		            <div class="col-md-9">
-		                 <div class="col-md-4 cashier_number" data-value="7" data-type="num">7</div>
-		                 <div class="col-md-4 left cashier_number" data-value="8" data-type="num">8</div>
-		                 <div class="col-md-4 left cashier_number" data-value="9" data-type="num">9</div>
-		            </div>
-		         </div>
+  					<div class="row bottom">
+  						<div class="col-md-3">
+  							<div class="fluid cashier_number" data-value="10000" data-type="add">10000</div>
+  						</div>
+  						<div class="col-md-9">
+  							<div class="row">
+  								<div class="col-md-3 cashier_number" data-value="7" data-type="num">7</div>
+  							<div class="col-md-3 left cashier_number" data-value="8" data-type="num">8</div>
+  							<div class="col-md-3 left cashier_number" data-value="9" data-type="num">9</div>
+  							</div>
+  						</div>
+  					</div>
 
-		          <div class="row bottom">
-		          	 <div class="col-md-3">
-		                <div class="fluid cashier_number" data-value="15000" data-type="add">15000</div>
-		             </div>
-		             <div class="col-md-9">
-		                  <div class="col-md-4 cashier_number" data-value="0" data-type="num">0</div>
-		                  <div class="col-md-4 left cashier_number" data-value="." data-type="num">.</div>
-		                  <div class="col-md-4 left cashier_number" data-value="00" data-type="num">00</div>
-		             </div>
-		          </div>
+  					<div class="row bottom">
+  						<div class="col-md-3">
+  							<div class="fluid cashier_number" data-value="15000" data-type="add">15000</div>
+  						</div>
+  						<div class="col-md-9">
+  							<div class="row">
+  								<div class="col-md-3 cashier_number" data-value="0" data-type="num">0</div>
+  							<div class="col-md-3 left cashier_number" data-value="." data-type="num">.</div>
+  							<div class="col-md-3 left cashier_number" data-value="00" data-type="num">00</div>
+  							</div>
+  						</div>
+  					</div>
 
-		          <div class="row">
-		          	 <div class="col-md-3">
-		                <div class="fluid cashier_number" data-value="20000" data-type="add">20000</div>
-		             </div>
-		             <div class="col-md-9">
-		                 <div class="col-md-4 cashier_number"></div>
-		                 <div class="col-md-4 left cashier_number red" data-type="del">DEL</div>
-		                 <div class="col-md-4 left cashier_number green" data-type="clr">CLR</div>
-		             </div>
-		          </div>		          
-		      	</div>
+  					<div class="row">
+  						<div class="col-md-3">
+  							<div class="fluid cashier_number" data-value="20000" data-type="add">20000</div>
+  						</div>
+  						<div class="col-md-9">
+  							<div class="row">
+  								<div class="col-md-3 cashier_number"></div>
+  							<div class="col-md-3 left cashier_number red" data-type="del">DEL</div>
+  							<div class="col-md-3 left cashier_number green" data-type="clr">CLR</div>
+  							</div>
+  						</div>
+  					</div>		          
+  				</div>
 
-		      	<div class="col-md-3">
-		      		<div class="form-group">
-						<button id="add_charges" class="btn btn-info fluid action-btn">Add</button>						
-						<button id="remove-item" class="btn btn-default fluid action-btn">Remove</button>
-		      		</div>
-	        	  </div>
-	      	</div>	
-        </div>
-    </div>
+  				<div class="col-md-3">
+  					<div class="form-group">
+  						<button id="add_charges" class="btn bg-info fluid action-btn">Add</button>						
+  						<button id="remove-item" class="btn bg-danger fluid action-btn">Remove</button>
+  					</div>
+  				</div>
+  			</div>	
+  		</div>
+  	</div>
   </div>
 
   <!-- Column Three -->
   <div class="col-lg-1 col-md-1 col-sm-1">
-	<!-- Action Panel -->
-    <div>
-	    <button type="button" class="btn btn-primary btn-block" onclick="window.location.href = '/origami';"><i class="fa fa-arrow-left"></i> Back </button>
-		<button id="charge_other" class="btn btn-danger btn-block action-btn">Enter</button>
-    </div>
+  	<!-- Action Panel -->
+  	<div>
+  		<button type="button" class="btn bg-default btn-block" onclick="window.location.href = '/origami';"><i class="fa fa-arrow-left"></i> Back </button>
+  		<button id="charge_other" class="btn bg-success btn-block action-btn">Enter</button>
+  	</div>
   </div>
 </div>
-
+</div>
 <script type="text/javascript">
 	$(document).ready(function(){
 		$(".cashier_number").on('click', function(event){
 			if(event.handled !== true) {
-		      	var original_value=0;
-	        	original_value = $('#other-charges-amount').val();
+				var original_value=0;
+				original_value = $('#other-charges-amount').val();
 
-	        	var input_type = $(this).attr("data-type");
+				var input_type = $(this).attr("data-type");
 
-		        switch (input_type) {
-		          case 'num':
-						var input_value = $(this).attr("data-value");
-						if (original_value == "0.0"){
-							$('#other-charges-amount').val(input_value);						
-						}
-						else{
-							$('#other-charges-amount').val(original_value + '' + input_value);						
-						}
-						break;
+				switch (input_type) {
+					case 'num':
+					var input_value = $(this).attr("data-value");
+					if (original_value == "0.0"){
+						$('#other-charges-amount').val(input_value);						
+					}
+					else{
+						$('#other-charges-amount').val(original_value + '' + input_value);						
+					}
+					break;
 
-		          case 'add':
-						var input_value = $(this).attr("data-value");
-						amount = parseInt(input_value);
-						$('#other-charges-amount').val(amount);										
-						break;
+					case 'add':
+					var input_value = $(this).attr("data-value");
+					amount = parseInt(input_value);
+					$('#other-charges-amount').val(amount);										
+					break;
 
-				  case 'del' :
-				  		var discount_text=$('#other-charges-amount').val();
-				  		$('#other-charges-amount').val(discount_text.substr(0,discount_text.length-1));		
-						break;
+					case 'del' :
+					var discount_text=$('#other-charges-amount').val();
+					$('#other-charges-amount').val(discount_text.substr(0,discount_text.length-1));		
+					break;
 
-		          case 'clr':
-		             $('#other-charges-amount').val("0.0");	            
-		          break;
-			    }
-		      	event.handled = true;
-		    } else {
-		        return false;
-		    }
+					case 'clr':
+					$('#other-charges-amount').val("0.0");	            
+					break;
+				}
+				event.handled = true;
+			} else {
+				return false;
+			}
 		});
 
 		// Select discount-item
@@ -230,8 +241,8 @@
 				$(this).removeClass('selected-item');
 			}
 			else {
-		    	$(this).addClass('selected-item');
-		    }
+				$(this).addClass('selected-item');
+			}
 		});
 
 		// Remove selected discount items
@@ -275,61 +286,61 @@
 
 			$.ajax({
 				type: "POST",
-			    url: ajax_url,
-			    data: params,
-			    success:function(result){			    		    			    
-			    	alert("Success!");
-			    	if(result.table_type == "Table"){
-			    		window.location.href = "/origami/table/" + result.table_id
-			    	}
-			    	else {
-			    		window.location.href = "/origami/room/" + result.table_id
-			    	}		    	
-			    }
+				url: ajax_url,
+				data: params,
+				success:function(result){			    		    			    
+					alert("Success!");
+					if(result.table_type == "Table"){
+						window.location.href = "/origami/table/" + result.table_id
+					}
+					else {
+						window.location.href = "/origami/room/" + result.table_id
+					}		    	
+				}
 			});
 		});
 	});
 
-/* Remove Selection */
-function selection_remove(){
-	$(".item-row").removeClass("selected-item");
-	$(".discount_item_row").removeClass("selected-item");
-	$(".accounts-type").removeClass("selected-account");
-}	
+	/* Remove Selection */
+	function selection_remove(){
+		$(".item-row").removeClass("selected-item");
+		$(".discount_item_row").removeClass("selected-item");
+		$(".accounts-type").removeClass("selected-account");
+	}	
 
-/* Get discount Item rows */
-function get_other_item_rows(){
-	var sale_items = [];	
-	$('.other-item-row').each(function(i){
-		var sale_item = {};
-		sale_item.id = $(this).attr('id');
-		sale_item.name = $(this).find('#item-name-price').text();
-		sale_item.price = $(this).find('#item-total-price').text();
-		sale_items.push(sale_item);
-	});	
-	return sale_items;
-}	
+	/* Get discount Item rows */
+	function get_other_item_rows(){
+		var sale_items = [];	
+		$('.other-item-row').each(function(i){
+			var sale_item = {};
+			sale_item.id = $(this).attr('id');
+			sale_item.name = $(this).find('#item-name-price').text();
+			sale_item.price = $(this).find('#item-total-price').text();
+			sale_items.push(sale_item);
+		});	
+		return sale_items;
+	}	
 
-function item_row_template(sale_id, charge_amount, reasons){
-	var item_row = "<tr class='other-item-row' id='SLI-000000000000'>" +
-        						"<td style='width: 60%; text-align: left;'>" + 
-        						"<span id='item_account_type' class='hidden'>" + 
-        							0 +
-        						"</span>" + 
-        						"<span id='item-name-price'>" + 
-        							reasons + 
-        						"</span>" + 
-        						"</td>" +
-        						"<td style='width: 20%; text-align: right;'>" + 
-        						"<span id='item-qty'>1</span>" +
-        						"</td>" +
-        						"<td style='width: 20%; text-align: right;'>" + 
-        						"<span id='item-total-price'>" + 
-        							charge_amount +
-        						"</span>" + 
-        						"</td>" +
-    					   		"</tr>";
-	return  item_row; 					   		
-}
+	function item_row_template(sale_id, charge_amount, reasons){
+		var item_row = "<tr class='other-item-row' id='SLI-000000000000'>" +
+		"<td style='width: 60%; text-align: left;'>" + 
+		"<span id='item_account_type' class='hidden'>" + 
+		0 +
+		"</span>" + 
+		"<span id='item-name-price'>" + 
+		reasons + 
+		"</span>" + 
+		"</td>" +
+		"<td style='width: 20%; text-align: right;'>" + 
+		"<span id='item-qty'>1</span>" +
+		"</td>" +
+		"<td style='width: 20%; text-align: right;'>" + 
+		"<span id='item-total-price'>" + 
+		charge_amount +
+		"</span>" + 
+		"</td>" +
+		"</tr>";
+		return  item_row; 					   		
+	}
 
 </script>
diff --git a/app/views/origami/others_payments/index.html.erb b/app/views/origami/others_payments/index.html.erb
index b547fcda..3a715b12 100644
--- a/app/views/origami/others_payments/index.html.erb
+++ b/app/views/origami/others_payments/index.html.erb
@@ -1,27 +1,28 @@
-<div class="row">
-<div class="col-lg-11col-md-11 col-sm-11">
-	<div >
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-lg-11col-md-11 col-sm-11">
 			<div >
-				<% @payment_method_setting.where("is_active = true").each do |payment_method|%>
+				<div >
+					<% @payment_method_setting.where("is_active = true").each do |payment_method|%>
 					<div class="purple others-payment bottom left" data-type="<%= payment_method.payment_method %>" id="<%= payment_method.payment_method %>" data-url="<%=payment_method.gateway_url%>" data-sale-id="<%= @sale_id%>"><%= payment_method.payment_method %></div>
-				<% end %>
+					<% end %>
+				</div>
 			</div>
+		</div>
+		<div class="col-lg-1 col-md-1 col-sm-1">
+			<button type="button" class="btn btn-primary btn-block" id='back'>Back</button>
+		</div>
 	</div>
 </div>
-<div class="col-lg-1 col-md-1 col-sm-1">
-	<button type="button" class="btn btn-primary btn-block" id='back'>Back</button>
-</div>
-</div>
-
 <script type="text/javascript">
 
-$('.others-payment').on('click',function(){
-	var input_type = $(this).attr("data-type");
-	var sale_id = $(this).attr("data-sale-id");
-	window.location.href = '/origami/sale/'+ sale_id  + "/payment/others_payment/" + input_type;
-})
+	$('.others-payment').on('click',function(){
+		var input_type = $(this).attr("data-type");
+		var sale_id = $(this).attr("data-sale-id");
+		window.location.href = '/origami/sale/'+ sale_id  + "/payment/others_payment/" + input_type;
+	})
 
-$('#back').on('click',function(){
-	window.location.href = '/origami/sale/<%= @sale_id %>/payment/';
-})
+	$('#back').on('click',function(){
+		window.location.href = '/origami/sale/<%= @sale_id %>/payment/';
+	})
 </script>
diff --git a/app/views/origami/payments/show.html.erb b/app/views/origami/payments/show.html.erb
index f0298e73..621a0d71 100644
--- a/app/views/origami/payments/show.html.erb
+++ b/app/views/origami/payments/show.html.erb
@@ -1,107 +1,109 @@
-<div id="loading_wrapper" style="display:none;">
-  <div id="loading"></div>
-</div>
-<div class="row">
-  <div class="col-lg-6 col-md-6 col-sm-3">
-    <div class="card"  >
-      <div class="card-header">
-        <div id="order-title">
-          <table>
-            <tr>
-              <td style="width:50%;"><strong>Receipt No : <%=@sale_data.receipt_no rescue ' '%></strong></td>
-              <td style="width:50%;"><strong>Receipt Date : <%=@sale_data.receipt_date.utc.getlocal.strftime("%d/%m/%Y - %I:%M %p") rescue '-'%></strong></td>
-            </tr>
-            <tr>
-              <td><strong>Table No</strong> - <%=@table_no%></td>
-              <td><strong>Sale Id</strong> <span id="sale_id"><% if @sale_data %><%=@sale_data.sale_id %><% end %></span></td>
-            </tr>
-            <tr>
-              <td style="width:50%;"><strong>Customer :</strong> <%= @sale_data.customer.name%></td>
-              <span class="hidden" id="membership_id"><%= @sale_data.customer.membership_id%></span>
-              <span class="hidden" id="member_discount"><%= @member_discount%></span>
-              <td style="width:50%;"><strong>Customer ID :</strong> <%= @sale_data.customer.customer_id%></td>
-            </tr>
-          </table>
-        </div>
-      </div>
-      <div class="card-block">
-        <div class="card-title">
-          <table >
-            <!-- <thead> -->
-            <tr>
-              <th style="width:5%">#</th>
-              <th style="width:76%;">Items</th>
-              <th style="width:20%;">QTY</td>
-                <th style="width:20%;">Price</td>
-                </tr>
-                <!-- </thead> -->
-              </table>
-            </div>
-            <div id="table-details" class="card-text" style="min-height:400px; max-height:400px; overflow-x:scroll">
-              <table class="table" id="append-table">
-                <tbody>
-                  <% sub_total = 0
-                  count = 0
-                  %>
-                  <% @sale_data.sale_items.each do |sale_item|
-                    count += 1
-                    %>
+<div class="container-fluid">
+  <div id="loading_wrapper" style="display:none;">
+    <div id="loading"></div>
+  </div>
 
-                    <% sub_total += sale_item.price%>
-                    <tr>
-                      <td><%= count %></td>
-                      <td style="width:60%; text-align:left">
-                       <span id="item-name-price"><%=sale_item.product_name%>@<%=sale_item.unit_price%></span>
-                     </td>
-                     <td style="width:20%; text-align:right">
-                      <span id="item-qty"><%=sale_item.qty%></span>
-                    </td>
-                    <td style="width:20%; text-align:right">
-                     <span id="item-total-price"><%=(sale_item.price)%></span>
-                   </td>
-                 </tr>
-                 <%end %>
-               </tbody>
-             </table>
-           </div>
-           <div class="card-footer">
-            <table class="table" style="margin-bottom:0px">
-              <tfooter>
-                <tr>
-                  <td style="width:80%; text-align:left; border-top:none"><strong>Sub Total</strong></td>
-                  <td style="width:20%; text-align:right; border-top:none"><strong><span id="sub-total"><%=sub_total%></span></strong></td>
-                </tr>
-                <tr>
-                  <%if @sale_data.discount_type == 'member_discount'%>
-                  <td style="width:80%; text-align:left; border-top:none"><strong>Member Discount:</strong></td>
-                  <%else%>
-                  <td style="width:80%; text-align:left; border-top:none"><strong>(Discount)</strong></td>
-                  <%end%>
-
-                  <td style="width:20%; text-align:right; border-top:none"><strong><span>(<%=@sale_data.total_discount rescue 0%>)</span></strong></td>
-                </tr>
-                <tr>
-                  <td style="width:80%; text-align:left; border-top:none"><strong>Tax</strong></td>
-                  <td style="width:20%; text-align:right; border-top:none"><strong><span><%=@sale_data.total_tax rescue 0%></span></strong></td>
-                </tr>
-                <tr>
-                  <td style="width:80%; text-align:left; border-top:none"><strong>Rounding Adj:</strong></td>
-                  <td style="width:20%; text-align:right; border-top:none"><strong><span><%=@sale_data.rounding_adjustment rescue 0%></span></strong></td>
-                </tr>
-                <tr>
-                  <td style="width:80%; text-align:left; border-top:none"><strong>Grand Total</strong></td>
-                  <td style="width:20%; text-align:right; border-top:none"><strong><span><%=@sale_data.grand_total rescue 0%></span></strong></td>
-                </tr>
-                <%if @balance > 0%>
-                <tr>
-                  <td style="width:80%; text-align:left; border-top:none"><strong><%= @accountable_type %></strong></td>
-                  <td style="width:20%; text-align:right; border-top:none"><strong><span><%=@balance%></span></strong></td>
-                </tr>
-                <% end %>
-              </tfooter>
+  <div class="row">
+    <div class="col-lg-6 col-md-6 col-sm-3">
+      <div class="card"  >
+        <div class="card-header">
+          <div id="order-title">
+            <table>
+              <tr>
+                <td style="width:50%;"><strong>Receipt No : <%=@sale_data.receipt_no rescue ' '%></strong></td>
+                <td style="width:50%;"><strong>Receipt Date : <%=@sale_data.receipt_date.utc.getlocal.strftime("%d/%m/%Y - %I:%M %p") rescue '-'%></strong></td>
+              </tr>
+              <tr>
+                <td><strong>Table No</strong> - <%=@table_no%></td>
+                <td><strong>Sale Id</strong> <span id="sale_id"><% if @sale_data %><%=@sale_data.sale_id %><% end %></span></td>
+              </tr>
+              <tr>
+                <td style="width:50%;"><strong>Customer :</strong> <%= @sale_data.customer.name%></td>
+                <span class="hidden" id="membership_id"><%= @sale_data.customer.membership_id%></span>
+                <span class="hidden" id="member_discount"><%= @member_discount%></span>
+                <td style="width:50%;"><strong>Customer ID :</strong> <%= @sale_data.customer.customer_id%></td>
+              </tr>
             </table>
           </div>
-          <div style='text-align:center;margin-top:20px'>
+        </div>
+        <div class="card-block">
+          <div class="card-title">
+            <table >
+              <!-- <thead> -->
+              <tr>
+                <th style="width:5%">#</th>
+                <th style="width:76%;">Items</th>
+                <th style="width:20%;">QTY</td>
+                  <th style="width:20%;">Price</td>
+                  </tr>
+                  <!-- </thead> -->
+                </table>
+              </div>
+              <div id="table-details" class="card-text" style="min-height:400px; max-height:400px; overflow-x:scroll">
+                <table class="table" id="append-table">
+                  <tbody>
+                    <% sub_total = 0
+                    count = 0
+                    %>
+                    <% @sale_data.sale_items.each do |sale_item|
+                      count += 1
+                      %>
+
+                      <% sub_total += sale_item.price%>
+                      <tr>
+                        <td><%= count %></td>
+                        <td style="width:60%; text-align:left">
+                         <span id="item-name-price"><%=sale_item.product_name%>@<%=sale_item.unit_price%></span>
+                       </td>
+                       <td style="width:20%; text-align:right">
+                        <span id="item-qty"><%=sale_item.qty%></span>
+                      </td>
+                      <td style="width:20%; text-align:right">
+                       <span id="item-total-price"><%=(sale_item.price)%></span>
+                     </td>
+                   </tr>
+                   <%end %>
+                 </tbody>
+               </table>
+             </div>
+             <div class="card-footer">
+              <table class="table" style="margin-bottom:0px">
+                <tfooter>
+                  <tr>
+                    <td style="width:80%; text-align:left; border-top:none"><strong>Sub Total</strong></td>
+                    <td style="width:20%; text-align:right; border-top:none"><strong><span id="sub-total"><%=sub_total%></span></strong></td>
+                  </tr>
+                  <tr>
+                    <%if @sale_data.discount_type == 'member_discount'%>
+                    <td style="width:80%; text-align:left; border-top:none"><strong>Member Discount:</strong></td>
+                    <%else%>
+                    <td style="width:80%; text-align:left; border-top:none"><strong>(Discount)</strong></td>
+                    <%end%>
+
+                    <td style="width:20%; text-align:right; border-top:none"><strong><span>(<%=@sale_data.total_discount rescue 0%>)</span></strong></td>
+                  </tr>
+                  <tr>
+                    <td style="width:80%; text-align:left; border-top:none"><strong>Tax</strong></td>
+                    <td style="width:20%; text-align:right; border-top:none"><strong><span><%=@sale_data.total_tax rescue 0%></span></strong></td>
+                  </tr>
+                  <tr>
+                    <td style="width:80%; text-align:left; border-top:none"><strong>Rounding Adj:</strong></td>
+                    <td style="width:20%; text-align:right; border-top:none"><strong><span><%=@sale_data.rounding_adjustment rescue 0%></span></strong></td>
+                  </tr>
+                  <tr>
+                    <td style="width:80%; text-align:left; border-top:none"><strong>Grand Total</strong></td>
+                    <td style="width:20%; text-align:right; border-top:none"><strong><span><%=@sale_data.grand_total rescue 0%></span></strong></td>
+                  </tr>
+                  <%if @balance > 0%>
+                  <tr>
+                    <td style="width:80%; text-align:left; border-top:none"><strong><%= @accountable_type %></strong></td>
+                    <td style="width:20%; text-align:right; border-top:none"><strong><span><%=@balance%></span></strong></td>
+                  </tr>
+                  <% end %>
+                </tfooter>
+              </table>
+            </div>
+            <div style='text-align:center;margin-top:20px'>
           <!-- <INPUT TYPE="Button" class='btn btn-primary' VALUE="Reprint" onClick="" style='width:120px'/>
           <INPUT TYPE="Submit" class='btn btn-primary' VALUE="CANCEL" action="origami/index" style='width:120px'/> -->
         </div>
@@ -242,15 +244,15 @@
      </div>
      <div class="col-lg-6 col-md-1 col-sm-1">
        <div class="row bottom">
-         <div class="cashier_number long" data-value="1000" data-type="add">1000</div>
+         <div class="cashier_number long 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" data-value="5000" data-type="add">5000</div>
+         <div class="cashier_number long 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">
-         <div class="pay purple" id="pay">Pay</div>
+         <div class="pay purple left" id="pay">Pay</div>
        </div>
      </div>
    </div>
@@ -259,12 +261,12 @@
  <div class="col-lg-1 col-md-1 col-sm-1">
   <!-- Waiter Buttons -->
 
-  <button type="button" class="btn btn-primary btn-block" onclick="localStorage.removeItem('cash');window.location.href = '/origami';"> Back </button>
-  <button type="button" class="btn btn-primary btn-block" id="foc"> FOC </button>
-  <button type="button" class="btn btn-primary btn-block" id="void"> Void </button>
+  <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-red btn-block" id="void"> Void </button>
 </div>
 
-
+</div>
 </div>
 
 <script>
@@ -484,7 +486,7 @@
             
           }
         });
-  });
+      });
   
   function calculate_member_discount(sale_id) {
    var sub_total = $('#sub-total').text();
diff --git a/app/views/origami/product_commissions/load_commissioners.html.erb b/app/views/origami/product_commissions/load_commissioners.html.erb
index 51653529..c4c94909 100644
--- a/app/views/origami/product_commissions/load_commissioners.html.erb
+++ b/app/views/origami/product_commissions/load_commissioners.html.erb
@@ -1,74 +1,75 @@
-<div class="row">
-  <!-- Column One -->
-  <div class="col-lg-5 col-md-5 col-sm-5" style="height: 100%">
-    <div class="card">
-      <div class="card-header">
-        <div><strong id="order-title">COMMISSIONERS </strong></div>
-      </div>
-      <div class="card-block">
-        <div class="card-columns" id="commissioners" style="float: left; padding-top:10px; column-gap: 1.2rem; min-height:600px; max-height:600px; overflow-x:scroll;">
-          <div style="color: gray"><i>* Select One Item</i></div>
-          <% @commissioners.each do |commissioner| %>
-              <div class="card tables green text-white commissioner" data-commissioner-id="<%= commissioner.id %>" data-commissioner-name="<%= commissioner.name %>">
-                <div class="card-block">
-                  <%= commissioner.name %>
-                </div>
+<div class="container-fludi">
+  <div class="row">
+    <!-- Column One -->
+    <div class="col-lg-5 col-md-5 col-sm-5" style="height: 100%">
+      <div class="card">
+        <div class="card-header">
+          <div><strong id="order-title">COMMISSIONERS </strong></div>
+        </div>
+        <div class="card-block">
+          <div class="card-columns" id="commissioners" style="float: left; padding-top:10px; column-gap: 1.2rem; min-height:600px; max-height:600px; overflow-x:scroll;">
+            <div style="color: gray"><i>* Select One Item</i></div>
+            <% @commissioners.each do |commissioner| %>
+            <div class="card tables green text-white commissioner" data-commissioner-id="<%= commissioner.id %>" data-commissioner-name="<%= commissioner.name %>">
+              <div class="card-block">
+                <%= commissioner.name %>
               </div>
-          <% end %>
+            </div>
+            <% end %>
+          </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <!-- Column Two -->
-  <div class="col-lg-6 col-md-6 col-sm-6">
-    <div class="card">
-      <div class="card-header">
-        <div><strong id="order-title">INVOICE DETAILS </strong></div>
-      </div>
-      <div class="card-block">
-        <div class="card-title row">
-          <div class="col-lg-6 col-md-6 col-sm-6">
-            <p> Receipt No: <span id="receipt_no">
+    <!-- Column Two -->
+    <div class="col-lg-6 col-md-6 col-sm-6">
+      <div class="card">
+        <div class="card-header">
+          <div><strong id="order-title">INVOICE DETAILS </strong></div>
+        </div>
+        <div class="card-block">
+          <div class="card-title row">
+            <div class="col-lg-6 col-md-6 col-sm-6">
+              <p> Receipt No: <span id="receipt_no">
                 <%= @saleobj.receipt_no rescue '' %>
-             </span></p>
-          </div>
-          <div class="col-lg-6 col-md-6 col-sm-6 text-right">
-            <p>Date:
-              <span id="receipt_date"><%= @saleobj.created_at.utc.getlocal.strftime("%d/%m/%Y - %I:%M %p") rescue '-' %></span>
-            </p>
-          </div>
-        </div>
-        <div class="card-title row customer_detail hide">
-          <div class="col-lg-6 col-md-6 col-sm-6">
-            <p>Customer : <span id="customer_name"></span></p>
+              </span></p>
+            </div>
+            <div class="col-lg-6 col-md-6 col-sm-6 text-right">
+              <p>Date:
+                <span id="receipt_date"><%= @saleobj.created_at.utc.getlocal.strftime("%d/%m/%Y - %I:%M %p") rescue '-' %></span>
+              </p>
+            </div>
           </div>
+          <div class="card-title row customer_detail hide">
+            <div class="col-lg-6 col-md-6 col-sm-6">
+              <p>Customer : <span id="customer_name"></span></p>
+            </div>
 
-        </div>
-        <div class="card-text" style="min-height:500px; max-height:500px; overflow-x:scroll">
-          <table class="table " id="order-items-table">
-            <thead>
-            <tr>
-              <th width="4%">#</th>
-              <th class="" width="40%">Items</th>
-              <th style="" width="20%">QTY</th>
-              <th class="" width="20%">Price</th>
-              <th class="" width="20%">Commissioner</th>
-            </tr>
-            </thead>
-            <tbody>
-            <%
-              count = 0
-              sub_total = 0
-              @saleobj.sale_items.each do |sale_item|
-                count += 1
-                sub_total = sub_total + sale_item.price
-            %>
-                <input type="hidden" id="sale_id" class="sale_id" value="<%= @saleobj.sale_id %>">
+          </div>
+          <div class="card-text" style="min-height:500px; max-height:500px; overflow-x:scroll">
+            <table class="table " id="order-items-table">
+              <thead>
+                <tr>
+                  <th width="4%">#</th>
+                  <th class="" width="40%">Items</th>
+                  <th style="" width="20%">QTY</th>
+                  <th class="" width="20%">Price</th>
+                  <th class="" width="20%">Commissioner</th>
+                </tr>
+              </thead>
+              <tbody>
                 <%
+                count = 0
+                sub_total = 0
+                @saleobj.sale_items.each do |sale_item|
+                  count += 1
+                  sub_total = sub_total + sale_item.price
+                  %>
+                  <input type="hidden" id="sale_id" class="sale_id" value="<%= @saleobj.sale_id %>">
+                  <%
                   # Can't check for discount
                   unless sale_item.price == 0
-                %>
+                    %>
                     <tr id="sale_item" class="sale_item" data-sale-item="<%= sale_item.sale_item_id %>">
                       <td width="4%"><%= count %></td>
                       <td class='product_name' width="40%">
@@ -85,99 +86,100 @@
                         <%= product_commission.commissioner.name rescue '-' %>
                       </td>
                     </tr>
-                <%
-                  end
+                    <%
                   end
+                end
                 %>
-            </tbody>
-          </table>
-        </div>
-        <div class="card-footer">
-          <table class="table" id="order-charges-table" border="0">
-            <tr>
-              <td class="charges-name"><strong>Sub Total:</strong></td>
-              <td class="item-attr"><strong id="order-sub-total"><%= sub_total %></strong></td>
-            </tr>
-            <tr class="rebate_amount"></tr>
-          </table>
+              </tbody>
+            </table>
+          </div>
+          <div class="card-footer">
+            <table class="table" id="order-charges-table" border="0">
+              <tr>
+                <td class="charges-name"><strong>Sub Total:</strong></td>
+                <td class="item-attr"><strong id="order-sub-total"><%= sub_total %></strong></td>
+              </tr>
+              <tr class="rebate_amount"></tr>
+            </table>
+          </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <!-- Column Three -->
-  <div class="col-lg-1 col-md-1 col-sm-1">
-    <!-- Waiter Buttons -->
-    <button type="button" class="btn btn-primary btn-block" id='back'>Back</button>
-    <!--<button type="button" class="btn btn-primary btn-block" id='apply'>Apply</button>-->
+    <!-- Column Three -->
+    <div class="col-lg-1 col-md-1 col-sm-1">
+      <!-- Waiter Buttons -->
+      <button type="button" class="btn btn-primary btn-block" id='back'>Back</button>
+      <!--<button type="button" class="btn btn-primary btn-block" id='apply'>Apply</button>-->
+    </div>
   </div>
 </div>
 <script>
-    $(document).ready(function () {
-        var selected_sale_item = 0;
+  $(document).ready(function () {
+    var selected_sale_item = 0;
 
-        $('.sale_item').on('click', function () {
-            $('#order-items-table tr').siblings().css( "background-color", "white" );
-            this.style.backgroundColor = 'lightgray';
-            var sale_item_id = this.getAttribute('data-sale-item');
-            var ajax_url = "/origami/select_sale_item";
-            selected_sale_item = sale_item_id;
-            localStorage.setItem("selected_sale_item", selected_sale_item);
-            $.ajax({
-                type: "POST",
-                url: ajax_url,
-                data: 'sale_item_id=' + sale_item_id,
-                success: function (result) {
-                    if (result != null){
-                        $('#commissioners').empty();
-                        result.commissioner.forEach(function (c) {
-                            if (result.selected_commissioner != null){
-                                if (c.id == result.selected_commissioner.id){
-                                    sale_item = "<div class=\"card tables blue text-white commissioner\" onclick=\"click_commissioner(this)\" data-commissioner-id=" + c.id + " data-commissioner-name=\"" + c.name + "\">" + "<div class=\"card-block\">" + c.name + "</div>" + "</div>"
-                                }else {
-                                    sale_item = "<div class=\"card tables green text-white commissioner\" onclick=\"click_commissioner(this)\" data-commissioner-id=" + c.id + " data-commissioner-name=\"" + c.name + "\">" + "<div class=\"card-block\">" + c.name + "</div>" + "</div>"
-                                }
-                            }else {
-                                sale_item = "<div class=\"card tables green text-white commissioner\" onclick=\"click_commissioner(this)\" data-commissioner-id=" + c.id + " data-commissioner-name=\"" + c.name + "\">" + "<div class=\"card-block\">" + c.name + "</div>" + "</div>"
-                            }
-                            $('#commissioners').append(sale_item);
-                        })
-                    }
+    $('.sale_item').on('click', function () {
+      $('#order-items-table tr').siblings().css( "background-color", "white" );
+      this.style.backgroundColor = 'lightgray';
+      var sale_item_id = this.getAttribute('data-sale-item');
+      var ajax_url = "/origami/select_sale_item";
+      selected_sale_item = sale_item_id;
+      localStorage.setItem("selected_sale_item", selected_sale_item);
+      $.ajax({
+        type: "POST",
+        url: ajax_url,
+        data: 'sale_item_id=' + sale_item_id,
+        success: function (result) {
+          if (result != null){
+            $('#commissioners').empty();
+            result.commissioner.forEach(function (c) {
+              if (result.selected_commissioner != null){
+                if (c.id == result.selected_commissioner.id){
+                  sale_item = "<div class=\"card tables blue text-white commissioner\" onclick=\"click_commissioner(this)\" data-commissioner-id=" + c.id + " data-commissioner-name=\"" + c.name + "\">" + "<div class=\"card-block\">" + c.name + "</div>" + "</div>"
+                }else {
+                  sale_item = "<div class=\"card tables green text-white commissioner\" onclick=\"click_commissioner(this)\" data-commissioner-id=" + c.id + " data-commissioner-name=\"" + c.name + "\">" + "<div class=\"card-block\">" + c.name + "</div>" + "</div>"
                 }
-            });
-        });
-
-        $('#back').on('click', function () {
-            var table_id = '<%= @table_id %>';
-            window.location.href = '/origami/table/' + table_id;
-        });
-
+              }else {
+                sale_item = "<div class=\"card tables green text-white commissioner\" onclick=\"click_commissioner(this)\" data-commissioner-id=" + c.id + " data-commissioner-name=\"" + c.name + "\">" + "<div class=\"card-block\">" + c.name + "</div>" + "</div>"
+              }
+              $('#commissioners').append(sale_item);
+            })
+          }
+        }
+      });
     });
 
-    $('.commissioner').on('click', function () {
-        alert('click');
+    $('#back').on('click', function () {
+      var table_id = '<%= @table_id %>';
+      window.location.href = '/origami/table/' + table_id;
     });
 
-    function click_commissioner(commissioner) {
-        var commissioner_id = commissioner.getAttribute('data-commissioner-id');
-        var selected_sale_item = localStorage.getItem("selected_sale_item");
-        $(commissioner).removeClass("green").addClass("blue");
-        $(commissioner).siblings().removeClass("blue").addClass("green");
-        $("tr[data-sale-item=" + selected_sale_item + "] td.commissioner").text(commissioner.getAttribute('data-commissioner-name'));
-        var ajax_url = "/origami/select_commissioner";
-        var param_data = 'sale_item_id=' + selected_sale_item + '&commissioner_id=' + commissioner_id;
-        $.ajax({
-            type: "POST",
-            url: ajax_url,
-            data: param_data,
-            success: function (result) {
-                console.log(selected_sale_item + "," +commissioner_id);
-                if(result.deselect == true){
-                    $(commissioner).removeClass("blue").addClass("green");
-                    $("tr[data-sale-item=" + selected_sale_item + "] td.commissioner").text('-');
-                }
-            }
-        });
-    };
+  });
+
+  $('.commissioner').on('click', function () {
+    alert('click');
+  });
+
+  function click_commissioner(commissioner) {
+    var commissioner_id = commissioner.getAttribute('data-commissioner-id');
+    var selected_sale_item = localStorage.getItem("selected_sale_item");
+    $(commissioner).removeClass("green").addClass("blue");
+    $(commissioner).siblings().removeClass("blue").addClass("green");
+    $("tr[data-sale-item=" + selected_sale_item + "] td.commissioner").text(commissioner.getAttribute('data-commissioner-name'));
+    var ajax_url = "/origami/select_commissioner";
+    var param_data = 'sale_item_id=' + selected_sale_item + '&commissioner_id=' + commissioner_id;
+    $.ajax({
+      type: "POST",
+      url: ajax_url,
+      data: param_data,
+      success: function (result) {
+        console.log(selected_sale_item + "," +commissioner_id);
+        if(result.deselect == true){
+          $(commissioner).removeClass("blue").addClass("green");
+          $("tr[data-sale-item=" + selected_sale_item + "] td.commissioner").text('-');
+        }
+      }
+    });
+  };
 
 </script>
diff --git a/app/views/origami/redeem_payments/index.html.erb b/app/views/origami/redeem_payments/index.html.erb
index df4e7cf9..bae9878c 100644
--- a/app/views/origami/redeem_payments/index.html.erb
+++ b/app/views/origami/redeem_payments/index.html.erb
@@ -91,7 +91,7 @@
 
     </div>
 		<div class="col-lg-1 col-md-1 col-sm-1">
-		 <button type="button" class="btn btn-primary btn-lg btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
+		 <button type="button" class="btn bg-default btn-lg btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
 	 </div>
 </div>
 <div class="row">
diff --git a/app/views/origami/shifts/new.html.erb b/app/views/origami/shifts/new.html.erb
index a8ded240..7e905f15 100644
--- a/app/views/origami/shifts/new.html.erb
+++ b/app/views/origami/shifts/new.html.erb
@@ -1,23 +1,24 @@
-<h1>Open Cashier</h1>
-<br>
-
-<div class="row">
-  <div class="col-md-4">
+<div class="container-fluid">
+  <h1>Open Cashier</h1>
+  <br>
+  <div class="row">
+    <div class="col-md-4">
       <table class='table table-striped'>
         <tr>
           <th>Cashier Terminal</th>
           <th>
-            <select class='form-control' id='cashier_terminal'>
-              <% @terminal.each do |ter| %>
-                <option value="<%= ter.id %>"><%= ter.name %></option>
+        <select class="form-control show-tick"  id='cashier_terminal'>
+            <% @terminal.each do |ter| %>
+              <option value="<%= ter.id %>" ><%= ter.name %></option>
               <% end %>
-            </select>
+          </select>
+           
           </th>
         </tr>
         <% @float.each do |float| %>
         <tr>
           <th><%= float.name %></th>
-          <th><input class='float-value' type='text' data-value ="<%= float.value %>" value='0' id='<%= float.value %>'></input></th>
+          <th><input class='float-value form-control' type='text' data-value ="<%= float.value %>" value='0' id='<%= float.value %>'></input></th>
         </tr>
         <% end %>
         <tr>
@@ -26,99 +27,99 @@
         </tr>
       </table>
 
-  </div>
+    </div>
     <div class='col-md-8'>
       <div class="row">
-         <div class="col-lg-6 col-md-1 col-sm-1">
-           <div class="row bottom">
-             <div class=" cashier_number " data-value="1" data-type="num">1</div>
-             <div class=" cashier_number left" data-value="2" data-type="num">2</div>
-             <div class=" cashier_number left" data-value="3" data-type="num">3</div>
-           </div>
-           <div class="row bottom">
-             <div class=" cashier_number " data-value="4" data-type="num">4</div>
-             <div class=" cashier_number left" data-value="5" data-type="num">5</div>
-             <div class=" cashier_number left" data-value="6" data-type="num">6</div>
-           </div>
-           <div class="row bottom">
-             <div class=" cashier_number " data-value="7" data-type="num">7</div>
-             <div class=" cashier_number left" data-value="8" data-type="num">8</div>
-             <div class=" cashier_number left" data-value="9" data-type="num">9</div>
-           </div>
-           <div class="row bottom">
-             <div class=" cashier_number " data-value="0" data-type="num">0</div>
-             <div class=" cashier_number left" data-value="." data-type="num">.</div>
-             <div class=" cashier_number left" data-value="00" data-type="num">00</div>
-           </div>
-           <div class="row bottom">
-             <div class=" cashier_number orange " data-type="clr">Clr</div>
-             <div class=" cashier_number left" data-type='ent' >Calculate</div>
-             <div class=" cashier_number purple left" id="open_cashier">Open Cashier</div>
-           </div>
+       <div class="col-lg-6 col-md-1 col-sm-1">
+         <div class="row bottom">
+           <div class=" cashier_number " data-value="1" data-type="num">1</div>
+           <div class=" cashier_number left" data-value="2" data-type="num">2</div>
+           <div class=" cashier_number left" data-value="3" data-type="num">3</div>
          </div>
+         <div class="row bottom">
+           <div class=" cashier_number " data-value="4" data-type="num">4</div>
+           <div class=" cashier_number left" data-value="5" data-type="num">5</div>
+           <div class=" cashier_number left" data-value="6" data-type="num">6</div>
+         </div>
+         <div class="row bottom">
+           <div class=" cashier_number " data-value="7" data-type="num">7</div>
+           <div class=" cashier_number left" data-value="8" data-type="num">8</div>
+           <div class=" cashier_number left" data-value="9" data-type="num">9</div>
+         </div>
+         <div class="row bottom">
+           <div class=" cashier_number " data-value="0" data-type="num">0</div>
+           <div class=" cashier_number left" data-value="." data-type="num">.</div>
+           <div class=" cashier_number left" data-value="00" data-type="num">00</div>
+         </div>
+         <div class="row bottom">
+           <div class=" cashier_number orange " data-type="clr">Clr</div>
+           <div class=" cashier_number left" data-type='ent' >Calculate</div>
+           <div class=" cashier_number purple left" id="open_cashier">Open Cashier</div>
+         </div>
+       </div>
 
-      </div>
-  </div>
+     </div>
+   </div>
+ </div>
 </div>
-
 <script>
 
-var float_value = ""
-var total = 0
+  var float_value = ""
+  var total = 0
 
-$(document).on('focusout', '.float-value', function(event){
- float_value = $(this).attr("data-value");
- $(document).on('click', '.cashier_number', function(event){
-   if(event.handled !== true) {
+  $(document).on('focusout', '.float-value', function(event){
+   float_value = $(this).attr("data-value");
+   $(document).on('click', '.cashier_number', function(event){
+     if(event.handled !== true) {
        var input_type = $(this).attr("data-type");
        switch (input_type) {
          case 'num':
          var input_value = $(this).attr("data-value");
-           var original = $('#'+float_value).val();
-           if (original == "0"){
-               $('#'+float_value).val(input_value);
-           }else{
-               $('#'+float_value).val(original + input_value);
-           }
+         var original = $('#'+float_value).val();
+         if (original == "0"){
+           $('#'+float_value).val(input_value);
+         }else{
+           $('#'+float_value).val(original + input_value);
+         }
          break;
          case 'clr':
-            $('#'+float_value).val("0");
+         $('#'+float_value).val("0");
          break;
          case 'ent':
-            var sum = 0
-            <%
-              sum = 0
-              @float.each do |float|
-                %>
-                  var float = "<%= float.value %>"
-                  console.log(float)
-                  var cal = $('#'+ float).val() * float
-                  sum += cal;
-                <%
-              end
-            %>
-            total = sum
-            $('#total').text(total)
-         break;
-     }
-       event.handled = true;
-     } else {
-         return false;
-     }
+         var sum = 0
+         <%
+         sum = 0
+         @float.each do |float|
+          %>
+          var float = "<%= float.value %>"
+          console.log(float)
+          var cal = $('#'+ float).val() * float
+          sum += cal;
+          <%
+        end
+        %>
+        total = sum
+        $('#total').text(total)
+        break;
+      }
+      event.handled = true;
+    } else {
+     return false;
+   }
  });
-})
+ })
 
-$('#open_cashier').on('click',function(){
-  var cashier_terminal = $('#cashier_terminal').val();
-  var amount = $('#total').text()||0;
-  $.ajax({type: "POST",
-    url: "<%= origami_shifts_path  %>",
-    data: "opening_balance=" + amount + "&cashier_terminal="+ cashier_terminal,
-    success:function(result){
-      if(result){
-        window.location.href = '/origami';
-     }
-    }
-  });
-})
+  $('#open_cashier').on('click',function(){
+    var cashier_terminal = $('#cashier_terminal').val();
+    var amount = $('#total').text()||0;
+    $.ajax({type: "POST",
+      url: "<%= origami_shifts_path  %>",
+      data: "opening_balance=" + amount + "&cashier_terminal="+ cashier_terminal,
+      success:function(result){
+        if(result){
+          window.location.href = '/origami';
+        }
+      }
+    });
+  })
 </script>
diff --git a/app/views/origami/shifts/show.html.erb b/app/views/origami/shifts/show.html.erb
index 225b0036..be924d4c 100644
--- a/app/views/origami/shifts/show.html.erb
+++ b/app/views/origami/shifts/show.html.erb
@@ -1,48 +1,49 @@
+<div class="container-fluid">
+  <div class='row clearfix'>
+    <div class='col-md-10'>
+      <h1>Close Cashier</h1>
+      <br>
+      <table class='table table-striped'>
+        <tr>
+          <td>Shift Started At</td>
+          <td><%= @shift.shift_started_at.utc.getlocal.strftime("%d/%m/%Y - %I:%M %p") rescue '-' %></td>
+        </tr>
+        <tr>
+          <td>Cashier Name</td>
+          <td><%= @shift.employee.name rescue ''%></td>
+        </tr>
 
-<div class='row'>
-  <div class='col-md-10'>
-    <h1>Close Cashier</h1>
-    <br>
-    <table class='table table-striped'>
-      <tr>
-        <td>Shift Started At</td>
-        <td><%= @shift.shift_started_at.utc.getlocal.strftime("%d/%m/%Y - %I:%M %p") rescue '-' %></td>
-      </tr>
-      <tr>
-        <td>Cashier Name</td>
-        <td><%= @shift.employee.name rescue ''%></td>
-      </tr>
-
-    </table>
-    <hr>
-    <div class='row'>
-      <div class='col-md-5'>
-        <span style='font-size:20px;'><b>Closing Balance</b></span>
-      </div>
-      <div class='col-md-6'>
-        <span style='font-size:20px;'><b><input type='text' id='closing_balance_amount' value=''></b></span>
+      </table>
+      <hr>
+      <div class='row clearfix '>
+        <div class='col-md-5'>
+          <span style='font-size:20px;'><b>Closing Balance</b></span>
+        </div>
+        <div class='col-md-6'>
+          <span style='font-size:20px;'><b><input type='text' class="form-control" id='closing_balance_amount' value=''></b></span>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="col-lg-2 col-md-2 col-sm-2">
-    <button type="button" class="btn btn-primary btn-block" id='back'> Back </button>
-    <button type="button" class="btn btn-primary btn-block green" id='close_cashier'> Close Cashier </button>
+    <div class="col-lg-2 col-md-2 col-sm-2">
+    <button type="button" class="btn bg-default btn-block" id='back'> Back </button>
+    <button type="button" class="btn bg-blue btn-block green" id='close_cashier'> Close Cashier </button>
+    </div>
   </div>
 </div>
 <script>
-$('#close_cashier').on('click',function(){
-  var amount = $('#closing_balance_amount').val();
-  var shift_id = "<%= @shift.id rescue ""%>"
-  $.ajax({type: "POST",
-    url: "<%= origami_close_shift_path %>",
-    data: "closing_balance="+ amount + "&shift_id="+ shift_id,
-    success:function(result){
-      console.log(result)
-      window.location.href = '/';
-    }
-  });
-})
-$('#back').on('click',function(){
-  window.location.href = '/origami';
-})
+  $('#close_cashier').on('click',function(){
+    var amount = $('#closing_balance_amount').val();
+    var shift_id = "<%= @shift.id rescue ""%>"
+    $.ajax({type: "POST",
+      url: "<%= origami_close_shift_path %>",
+      data: "closing_balance="+ amount + "&shift_id="+ shift_id,
+      success:function(result){
+        console.log(result)
+        window.location.href = '/';
+      }
+    });
+  })
+  $('#back').on('click',function(){
+    window.location.href = '/origami';
+  })
 </script>
diff --git a/app/views/origami/visa/index.html.erb b/app/views/origami/visa/index.html.erb
index 073b7e60..54f207b8 100644
--- a/app/views/origami/visa/index.html.erb
+++ b/app/views/origami/visa/index.html.erb
@@ -1,47 +1,46 @@
-
-<div class="row">
-
-	<div class="col-lg-5 col-md-5 col-sm-3">
-		<div class="row">
-			<div class="col-md-6">
-				<h2>VISA</h2>
-			</div>
-		</div>
-    <span class="hidden" id="membership_id"><%= @membership_id%></span>
-    <span class="hidden" id="member_discount"><%= @member_discount%></span>
-    <span class="hidden" id="sub-total"><%= @sub_total%></span>
-    <div class="card" style="margin-top:10px;padding-top:20px;">
-      <div class="rebate-form">
-       <div class="row">
-        <div class="form-group col-lg-12 col-md-12 col-sm-12">
-          <label class="col-lg-4 col-md-4 col-sm-4">You can pay up to </label>
-          <input type="text" name="validamount" id="validamount" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@can_visa %>" data-member-value="">
-        </div>
-        <hr>
-      </div>
-      <% if @visacount != 0 %>
-      <div class="row">
-        <div class="form-group col-lg-12 col-md-12 col-sm-12">
-          <label class="col-lg-4 col-md-4 col-sm-4">Recent Visa paid amount </label>
-          <input type="text" name="" id="" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@visacount %>" data-member-value="">
-        </div>
-        <hr>
-      </div>
-      <% end %>
-      <div class="row">
-       <div class="form-group col-lg-12 col-md-12 col-sm-12">
-        <label class="col-lg-4 col-md-4 col-sm-4">Reference Number</label>
-        <input type="text" name="valid_amount" id="valid_amount" class="form-control col-lg-7 col-md-7 col-sm-7" value="" data-value="<%=@sale_id %>" data-member-value="">
+<div class="container-fluid">
+  <div class="row">
+   <div class="col-lg-5 col-md-5 col-sm-3">
+    <div class="row">
+     <div class="col-md-6">
+      <h2>VISA</h2>
+    </div>
+  </div>
+  <span class="hidden" id="membership_id"><%= @membership_id%></span>
+  <span class="hidden" id="member_discount"><%= @member_discount%></span>
+  <span class="hidden" id="sub-total"><%= @sub_total%></span>
+  <div class="card" style="margin-top:10px;padding-top:20px;">
+    <div class="rebate-form">
+     <div class="row">
+      <div class="form-group col-lg-12 col-md-12 col-sm-12">
+        <label class="col-lg-4 col-md-4 col-sm-4">You can pay up to </label>
+        <input type="text" name="validamount" id="validamount" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@can_visa %>" data-member-value="">
       </div>
       <hr>
     </div>
+    <% if @visacount != 0 %>
+    <div class="row">
+      <div class="form-group col-lg-12 col-md-12 col-sm-12">
+        <label class="col-lg-4 col-md-4 col-sm-4">Recent Visa paid amount </label>
+        <input type="text" name="" id="" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@visacount %>" data-member-value="">
+      </div>
+      <hr>
+    </div>
+    <% end %>
     <div class="row">
      <div class="form-group col-lg-12 col-md-12 col-sm-12">
-      <label class="col-lg-4 col-md-4 col-sm-4">Amount</label>
-      <div id="amount" class="form-control col-lg-7 col-md-7 col-sm-7">0.0</div>
+      <label class="col-lg-4 col-md-4 col-sm-4">Reference Number</label>
+      <input type="text" name="valid_amount" id="valid_amount" class="form-control col-lg-7 col-md-7 col-sm-7" value="" data-value="<%=@sale_id %>" data-member-value="">
     </div>
     <hr>
   </div>
+  <div class="row">
+   <div class="form-group col-lg-12 col-md-12 col-sm-12">
+    <label class="col-lg-4 col-md-4 col-sm-4">Amount</label>
+    <div id="amount" class="form-control col-lg-7 col-md-7 col-sm-7">0.0</div>
+  </div>
+  <hr>
+</div>
 </div>
 </div>
 </div>
@@ -94,10 +93,10 @@
 </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 bg-default btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
+</div>
 </div>
 </div>
-
 <script>
   $(document).ready(function() {
     if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
@@ -163,7 +162,7 @@
           data: {'sale_id':sale_id, 'sub_total':sub_total,'is_card':false },
                 // success:function(result){           
                 // }
-        });
+              });
       }
       //end member discount
       $.ajax({type: "POST",
@@ -172,18 +171,18 @@
         success:function(result){
           if(result){
             $.confirm({
-                  title: 'Infomation!',
-                  content: 'Payment Successfully',
-                  buttons: {
-                    confirm: {
-                    text: 'Ok',
-                    btnClass: 'btn-green',
-                      action: function(){
-                        window.location.href = '/origami/sale/'+ sale_id  + "/payment";
-                      }
-                    }
+              title: 'Infomation!',
+              content: 'Payment Successfully',
+              buttons: {
+                confirm: {
+                  text: 'Ok',
+                  btnClass: 'btn-green',
+                  action: function(){
+                    window.location.href = '/origami/sale/'+ sale_id  + "/payment";
                   }
-                });
+                }
+              }
+            });
           }
         }
       });