diff --git a/app/assets/stylesheets/orgiami.scss b/app/assets/stylesheets/orgiami.scss
index 70e1fe8b..327c5897 100644
--- a/app/assets/stylesheets/orgiami.scss
+++ b/app/assets/stylesheets/orgiami.scss
@@ -25,3 +25,7 @@
 .long{
 	width:100%
 }
+
+.purple {
+	background-color:#7a62d3;
+}
diff --git a/app/controllers/origami/card_payments_controller.rb b/app/controllers/origami/card_payments_controller.rb
new file mode 100644
index 00000000..2df4b266
--- /dev/null
+++ b/app/controllers/origami/card_payments_controller.rb
@@ -0,0 +1,10 @@
+class Origami::CardPaymentsController < BaseOrigamiController
+
+
+  def index
+  end
+
+  def create
+  end
+
+end
diff --git a/app/controllers/origami/credit_payments_controller.rb b/app/controllers/origami/credit_payments_controller.rb
new file mode 100644
index 00000000..a348951e
--- /dev/null
+++ b/app/controllers/origami/credit_payments_controller.rb
@@ -0,0 +1,10 @@
+class Origami::CreditPaymentsController < BaseOrigamiController
+
+
+  def index
+  end
+
+  def create
+  end
+
+end
diff --git a/app/controllers/origami/payments_controller.rb b/app/controllers/origami/payments_controller.rb
index a09b81fe..f64e27e3 100644
--- a/app/controllers/origami/payments_controller.rb
+++ b/app/controllers/origami/payments_controller.rb
@@ -2,13 +2,16 @@ class Origami::PaymentsController < BaseOrigamiController
 
 
   def index
-
   end
 
   def create
+    #payment type
+    #sale status
+    #point - get  [ food amount ]
   end
 
   def show
 
   end
+
 end
diff --git a/app/views/origami/card_payments/index.html.erb b/app/views/origami/card_payments/index.html.erb
new file mode 100644
index 00000000..86ef10b0
--- /dev/null
+++ b/app/views/origami/card_payments/index.html.erb
@@ -0,0 +1 @@
+Hello Card Payment
diff --git a/app/views/origami/credit_payments/index.html.erb b/app/views/origami/credit_payments/index.html.erb
new file mode 100644
index 00000000..e4f97119
--- /dev/null
+++ b/app/views/origami/credit_payments/index.html.erb
@@ -0,0 +1 @@
+hello Credit
diff --git a/app/views/origami/home/index.html.erb b/app/views/origami/home/index.html.erb
index 78f59422..4897407d 100644
--- a/app/views/origami/home/index.html.erb
+++ b/app/views/origami/home/index.html.erb
@@ -312,14 +312,15 @@ $( document ).ready(function() {
       window.location.href = '/origami/request_bills/'+ table_or_order_id
       return false;
   });
+
+  $('#pay').click(function() {
+     window.location.href = '/origami/sale/'+ pay_sale_id  + "/payment"
+     return false;
+ });
+
 });
 
-$( document ).ready(function() {
-   $('#pay').click(function() {
-      window.location.href = '/origami/sale/'+ pay_sale_id  + "/payment"
-      return false;
-  });
-});
+
 
 </script>
 <style type="text/css">
diff --git a/app/views/origami/request_bills/show.html.erb b/app/views/origami/request_bills/show.html.erb
index a4dc6931..573a63f4 100644
--- a/app/views/origami/request_bills/show.html.erb
+++ b/app/views/origami/request_bills/show.html.erb
@@ -4,9 +4,12 @@
     <div class="card"  >
       <div class="card-header">
         <div id="order-title">
+
+
         	<span><strong>Receipt No : <%=@sale_data.receipt_no rescue ' '%></strong></span>
           <span style="margin-left: 40%"><strong>Receipt Date : <%=@sale_data.receipt_date rescue '-'%></strong></span>
         	<span><strong>Table No</strong> <% if @sale_data%>- <%=@sale_data.receipt_no%><% end %></span>
+          <span><strong>Sale Id</strong> </span><span id="sale_id"><% if @sale_data %><%=@sale_data.sale_id %><% end %></span>
         </div>
       </div>
       <div class="card-block">
@@ -61,38 +64,38 @@
               </tr>
             </tfooter>
           </table>
-        </div> 
+        </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'/>
+          <!-- <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>
       </div>
     </div>
   </div>
   <div class="col-lg-5 col-md-5 col-sm-3">
     <div class="row">
-      <div class="col-md-8">AMOUNT DUE</div>
-      <div class="col-md-4"><%= @sale_data.grand_total %></div>
+      <div class="col-md-8"><strong>AMOUNT DUE</strong></div>
+      <div class="col-md-4"><strong><span id="amount_due"><%= @sale_data.grand_total %></span></strong></div>
     </div>
     <hr>
     <div class="row">
       <div class="col-md-8">CASH</div>
-      <div class="col-md-4">0.0</div>
+      <div class="col-md-4" id="cash" >0.0</div>
     </div>
     <hr>
-    <div class="row">
+    <div class="row" id="credit_payment">
       <div class="col-md-8">CREDIT</div>
       <div class="col-md-4">0.0</div>
     </div>
       <hr>
-    <div class="row">
+    <div class="row" id="card_payment">
       <div class="col-md-8">CARD</div>
       <div class="col-md-4">0.0</div>
     </div>
       <hr>
     <div class="row">
       <div class="col-md-8">BALANCE</div>
-      <div class="col-md-4">0.0</div>
+      <div class="col-md-4"><span id='balance'><%= @sale_data.grand_total %></span></div>
     </div>
       <hr>
     <div class="row">
@@ -100,49 +103,49 @@
          <div class="row">
            <div class="col-md-7">
               <div class="row">
-                 <div class="col-md-3 cashier_number" data-value="1">1</div>
-                 <div class="col-md-3 cashier_number">2</div>
-                 <div class="col-md-3 cashier_number">3</div>
+                 <div class="col-md-3 cashier_number" data-value="1" data-type="num">1</div>
+                 <div class="col-md-3 cashier_number" data-value="2" data-type="num">2</div>
+                 <div class="col-md-3 cashier_number" data-value="3" data-type="num">3</div>
               </div>
             </div>
            <div class="col-md-5">
-              <div class="col-md-12 cashier_number long">1000</div>
+              <div class="col-md-12 cashier_number long" data-value="1000" data-type="add">1000</div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-7">
              <div class="row">
-                <div class="col-md-3 cashier_number">4</div>
-                <div class="col-md-3 cashier_number">5</div>
-                <div class="col-md-3 cashier_number">6</div>
+                <div class="col-md-3 cashier_number" data-value="4" data-type="num">4</div>
+                <div class="col-md-3 cashier_number" data-value="5" data-type="num">5</div>
+                <div class="col-md-3 cashier_number" data-value="6" data-type="num">6</div>
              </div>
            </div>
            <div class="col-md-5">
-             <div class="col-md-12 cashier_number long">5000</div>
+             <div class="col-md-12 cashier_number long" data-value="5000" data-type="add">5000</div>
            </div>
          </div>
          <div class="row">
             <div class="col-md-7">
               <div class="row">
-                 <div class="col-md-3 cashier_number">7</div>
-                 <div class="col-md-3 cashier_number">8</div>
-                 <div class="col-md-3 cashier_number">9</div>
+                 <div class="col-md-3 cashier_number" data-value="7" data-type="num">7</div>
+                 <div class="col-md-3 cashier_number" data-value="8" data-type="num">8</div>
+                 <div class="col-md-3 cashier_number" data-value="9" data-type="num">9</div>
               </div>
             </div>
             <div class="col-md-5">
-                <div class="col-md-12 cashier_number long">10000</div>
+                <div class="col-md-12 cashier_number long" data-value="10000" data-type="add">10000</div>
             </div>
           </div>
           <div class="row">
              <div class="col-md-7">
                <div class="row">
-                  <div class="col-md-3 cashier_number">0</div>
-                  <div class="col-md-3 cashier_number">.</div>
-                  <div class="col-md-3 cashier_number">00</div>
+                  <div class="col-md-3 cashier_number" data-value="0" data-type="num">0</div>
+                  <div class="col-md-3 cashier_number" data-value="." data-type="num">.</div>
+                  <div class="col-md-3 cashier_number" data-value="00" data-type="num">00</div>
                </div>
              </div>
              <div class="col-md-5">
-                <div class="col-md-12 cashier_number long">50000</div>
+                <div class="col-md-12 cashier_number long" data-value="50000" data-type="add">50000</div>
              </div>
           </div>
           <div class="row">
@@ -154,7 +157,7 @@
                </div>
              </div>
              <div class="col-md-5">
-                <div class="col-md-12 cashier_number long">ENTER</div>
+                <div class="col-md-12 cashier_number long purple " id="pay">PAY</div>
              </div>
            </div>
       </div>
@@ -167,13 +170,67 @@ $(document).on('click', '.cashier_number', function(event){
         event.stopPropagation();
         event.preventDefault();
         if(event.handled !== true) {
-            var input_value = $(this).attr("data-value");
-            switch (input_value) {
+            var original_value;
+            original_value = $('#cash').text();
 
-            }
-            event.handled = true;
+            var input_type = $(this).attr("data-type");
+            switch (input_type) {
+              case 'num':
+              var input_value = $(this).attr("data-value");
+              if (original_value == "0.0"){
+                $('#cash').text(input_value);
+                update_balance();
+              }else{
+                $('#cash').append(input_value);
+                update_balance();
+              }
+              break;
+
+              case 'add':
+                var input_value = $(this).attr("data-value");
+                amount = parseInt(input_value) + parseInt(original_value);
+                $('#cash').text(amount);
+                update_balance();
+              break;
+
+          }
+          event.handled = true;
         } else {
             return false;
         }
 });
+
+$( document ).ready(function() {
+  $('#credit_payment').click(function() {
+    var sale_id = $('#sale_id').text();
+     window.location.href = '/origami/sale/'+ sale_id  + "/payment/credit_payment"
+     return false;
+ });
+
+ $('#card_payment').click(function() {
+   var sale_id = $('#sale_id').text();
+    window.location.href = '/origami/sale/'+ sale_id  + "/payment/card_payment"
+    return false;
+ });
+
+ $('#pay').click(function() {
+   console.log("pay")
+   if($('#amount_due').text() > 0){
+     console.log("greater")
+   }else{
+     console.log("less")
+   }
+ });
+
+});
+
+function update_balance(){
+  var cash = $('#cash').text();
+  var credit = $('#credit').text();
+  var card = $('#card').text();
+  var amount_due = $('#amount_due').text();
+  var total = cash + credit + card
+  var result = amount_due - total
+  $('#balance').text(result);
+}
 </script>
diff --git a/config/routes.rb b/config/routes.rb
index df652e6b..64b5feeb 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -72,8 +72,10 @@ Rails.application.routes.draw do
       resources :discounts, only: [:index,:new, :create ] #add discount type
       resources :customers, only: [:index,:new, :create ] #add customer type
     end
-    resources :request_bills, only: [:show]
+    # resources :request_bills, only: [:show]
     get 'sale/:sale_id/payment' => 'request_bills#show'
+    get 'sale/:sale_id/payment/credit_payment' => "credit_payments#index"
+    get 'sale/:sale_id/payment/card_payment' => "card_payments#index"
   end
 
   #--------- Waiter/Ordering Station ------------#