diff --git a/app/assets/javascripts/custom.js b/app/assets/javascripts/custom.js
index 818807c2..2460031d 100644
--- a/app/assets/javascripts/custom.js
+++ b/app/assets/javascripts/custom.js
@@ -2,6 +2,8 @@ $(document).ready(function() {
   $('body').bootstrapMaterialDesign();
 
   var height = ($(window).height() - ($('.legal').outerHeight() + $('.user-info').outerHeight() + $('.navbar').innerHeight()));
+console.log(height);
+console.log($('#order-detail-slimscroll').attr('data-height'))
 
   $('#custom-slimscroll').slimScroll({
     height: height,
@@ -13,7 +15,7 @@ $(document).ready(function() {
   });
 
   $('#order-detail-slimscroll').slimScroll({
-    height: height-180,
+    height: height-$('#order-detail-slimscroll').attr('data-height'),
     size: '5px',
     color: 'rgba(0,0,0,0.5)',
     alwaysVisible: false,
diff --git a/app/assets/stylesheets/origami.scss b/app/assets/stylesheets/origami.scss
index de838a1e..b5176c2e 100755
--- a/app/assets/stylesheets/origami.scss
+++ b/app/assets/stylesheets/origami.scss
@@ -56,7 +56,7 @@ select.form-control {
 /* End Reset */
 
 #back {
-	padding: 0px 0px 7px 0px;
+	padding: 7px 0px 7px 0px;
 }
 
 .order-info {
@@ -80,8 +80,8 @@ select.form-control {
 
 .cashier_number{
 	width: 33%;
-	height:70px;
-	line-height:70px;
+	height:58px;
+	line-height:58px;
 	text-align:center;
 	background:#54A5AF;
 	// float:left;
@@ -97,16 +97,16 @@ select.form-control {
 
 .pay{
 	width: 86%;
-  	height:211px;
-	line-height:211px;
+  	height:174px;
+	line-height:174px;
 	text-align:center;
 	font-size:20px;
 	color:white;
 }
 
 .payment{
-	height:70px;
-	line-height:70px;
+	height:50px;
+	line-height:50px;
 	align:center;
 	color:white;
 	font-size:16px;
@@ -158,7 +158,7 @@ select.form-control {
 }
 
 .long{
-	width:49%;
+	width:43%;
 }
 
 .sold {
@@ -244,7 +244,7 @@ select.form-control {
 }
 
 .bottom{
-	margin-bottom: 1px;
+	margin-bottom:1px;
 }
 
 /*  Discount */
diff --git a/app/views/origami/jcb/index.html.erb b/app/views/origami/jcb/index.html.erb
index ae77fa15..b65686c4 100755
--- a/app/views/origami/jcb/index.html.erb
+++ b/app/views/origami/jcb/index.html.erb
@@ -1,101 +1,107 @@
-<div class="row">
-	<div class="col-md-6">
-		<h2>JCB</h2>
+<div class="container-fluid">
+	<div class="page-header">
+		<ol class="breadcrumb">
+			<li class="breadcrumb-item"><a href="<%=origami_root_path %>"><%= t :home %></a></li>
+			<li class="breadcrumb-item"><a href="/origami/sale/<%=@sale_id %>/payment"><%= t("views.btn.payment") %></a></li>
+			<li class="breadcrumb-item active"><%= t("views.btn.jcb") %></li>
+			<span class="float-right">
+				<%= link_to t('.back',:default => t("views.btn.back")),'/origami/sale/'+@sale_id+'/payment/others_payment'%>
+			</span>
+		</ol>
 	</div>
-</div>
-<div class="row">
-	<div class="col-lg-5 col-md-5 col-sm-3">	
-		<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="padding:0px 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_jcb %>" data-member-value="">
+	<div class="row">
+		<div class="col-lg-5 col-md-5 col-sm-3">	
+			<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 m-l-10 m-t-10" style="padding:0px 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_jcb %>" data-member-value="">
+						</div>
+						<hr>
 					</div>
-					<hr>
-				</div>
-				<% if @jcbcount != 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 JCB paid amount </label>
-						<input type="text" name="" id="" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@jcbcount %>" data-member-value="">
+					<% if @jcbcount != 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 JCB paid amount </label>
+							<input type="text" name="" id="" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@jcbcount %>" data-member-value="">
+						</div>
+						<hr>
 					</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="">
+					<% 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>
+						<hr>
 					</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 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>
-					<hr>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div class="col-lg-6 col-md-6 col-sm-6">
-
-		<div class="row">
-			<div class="col-lg-6 col-md-6 col-sm-6">
-				<div class="row bottom">
-					<div class="col-md-4 cashier_number border-left" data-value="1" data-type="num">1</div>
-					<div class="col-md-4 cashier_number border-left" data-value="2" data-type="num">2</div>
-					<div class="col-md-4 cashier_number border-left" data-value="3" data-type="num">3</div>
-				</div>
-				<div class="row bottom">
-					<div class="col-md-4 cashier_number border-left" data-value="4" data-type="num">4</div>
-					<div class="col-md-4 cashier_number border-left" data-value="5" data-type="num">5</div>
-					<div class="col-md-4 cashier_number border-left" data-value="6" data-type="num">6</div>
-				</div>
-				<div class="row bottom">
-					<div class="col-md-4 cashier_number border-left" data-value="7" data-type="num">7</div>
-					<div class="col-md-4 cashier_number border-left" data-value="8" data-type="num">8</div>
-					<div class="col-md-4 cashier_number border-left" data-value="9" data-type="num">9</div>
-				</div>
-				<div class="row bottom">
-					<div class="col-md-4 cashier_number border-left" data-value="0" data-type="num">0</div>
-					<div class="col-md-4 cashier_number border-left" data-value="." data-type="num">.</div>
-					<div class="col-md-4 cashier_number border-left" data-value="00" data-type="num">00</div>
-				</div>
-				<div class="row bottom">
-					<div class="col-md-4 cashier_number green border-left" data-type="nett" >Nett</div>
-					<div class="col-md-4 cashier_number red border-left" data-type="del">Del</div>
-					<div class="col-md-4 cashier_number orange border-left" data-type="clr">Clr</div>
-				</div>
-			</div>
-			<div class="col-lg-6 col-md-6 col-sm-6">
-				<div class="row bottom">
-					<div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
-					<div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
-				</div>
-				<div class="row bottom">
-					<div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
-					<div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
-				</div>
-				<div class="row bottom">
-					<div class="pay purple left" id="jcb_pay">Pay</div>
 				</div>
 			</div>
 		</div>
 
-	</div>
+		<div class="col-lg-6 col-md-6 col-sm-6">
+			<div class="m-t-10 p-l-20">
+				<div class="row">
+					<div class="col-lg-6 col-md-6 col-sm-6">
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left" data-value="1" data-type="num">1</div>
+							<div class="col-md-4 cashier_number border-left" data-value="2" data-type="num">2</div>
+							<div class="col-md-4 cashier_number border-left" data-value="3" data-type="num">3</div>
+						</div>
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left" data-value="4" data-type="num">4</div>
+							<div class="col-md-4 cashier_number border-left" data-value="5" data-type="num">5</div>
+							<div class="col-md-4 cashier_number border-left" data-value="6" data-type="num">6</div>
+						</div>
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left" data-value="7" data-type="num">7</div>
+							<div class="col-md-4 cashier_number border-left" data-value="8" data-type="num">8</div>
+							<div class="col-md-4 cashier_number border-left" data-value="9" data-type="num">9</div>
+						</div>
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left" data-value="0" data-type="num">0</div>
+							<div class="col-md-4 cashier_number border-left" data-value="." data-type="num">.</div>
+							<div class="col-md-4 cashier_number border-left" data-value="00" data-type="num">00</div>
+						</div>
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number green border-left" data-type="nett" >Nett</div>
+							<div class="col-md-4 cashier_number red border-left" data-type="del">Del</div>
+							<div class="col-md-4 cashier_number orange border-left" data-type="clr">Clr</div>
+						</div>
+					</div>
+					<div class="col-lg-6 col-md-6 col-sm-6">
+						<div class="row bottom m-l-5">
+							<div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
+							<div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
+						</div>
+						<div class="row bottom m-l-5">
+							<div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
+							<div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
+						</div>
+						<div class="row bottom m-l-5">
+							<div class="pay purple left" id="jcb_pay">Pay</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
 
-	<div class="col-lg-1 col-md-1 col-sm-1">
+	<!-- <div class="col-lg-1 col-md-1 col-sm-1">
 		<button type="button" class="btn btn-default m-l-10 btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
-	</div>
+	</div> -->
+</div>
 </div>
-
 <script>
 	$(document).ready(function() {
 		if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
@@ -173,11 +179,11 @@ $('#jcb_pay').on('click',function(){
 	    	success:function(result){
 	    		if(result){
 	    			swal({
-		                title: "Infomation!",
-		                text: "Payment Successfully",
-		              },function () {
-		                window.location.href = '/origami/sale/'+ sale_id  + "/payment";
-		            });
+	    				title: "Infomation!",
+	    				text: "Payment Successfully",
+	    			},function () {
+	    				window.location.href = '/origami/sale/'+ sale_id  + "/payment";
+	    			});
 	    		}
 	    	}
 	    });
diff --git a/app/views/origami/master/index.html.erb b/app/views/origami/master/index.html.erb
index b817effd..d42576bd 100755
--- a/app/views/origami/master/index.html.erb
+++ b/app/views/origami/master/index.html.erb
@@ -1,14 +1,20 @@
-<div class="row">
-      <div class="col-md-6">
-        <h2>Master</h2>
-      </div>
-    </div>
-<div class="row">
-	<div class="col-lg-5 col-md-5 col-sm-3">
+<div class="container-fluid">
+  <div class="page-header">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="<%=origami_root_path %>"><%= t :home %></a></li>
+      <li class="breadcrumb-item"><a href="/origami/sale/<%=@sale_id %>/payment"><%= t("views.btn.payment") %></a></li>
+      <li class="breadcrumb-item active"><%= t("views.btn.jcb") %></li>
+      <span class="float-right">
+        <%= link_to t('.back',:default => t("views.btn.back")),'/origami/sale/'+@sale_id+'/payment/others_payment'%>
+      </span>
+    </ol>
+  </div>
+  <div class="row">
+   <div class="col-lg-5 col-md-5 col-sm-3">
     <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="padding:0px 20px;">
+    <div class="card m-l-10 m-t-10" style="padding:0px 20px;">
       <div class="rebate-form">
        <div class="row">
         <div class="form-group col-lg-12 col-md-12 col-sm-12">
@@ -45,57 +51,57 @@
 </div>
 
 <div class="col-lg-6 col-md-6 col-sm-6" style="margin-top:;">
-
- <div class="row">
-   <div class="col-lg-6 col-md-6 col-sm-6">
-     <div class="row bottom">
-       <div class=" cashier_number border-left" data-value="1" data-type="num">1</div>
-       <div class=" cashier_number border-left" data-value="2" data-type="num">2</div>
-       <div class=" cashier_number border-left" data-value="3" data-type="num">3</div>
+  <div class="m-t-10 p-l-20">
+   <div class="row">
+     <div class="col-lg-6 col-md-6 col-sm-6">
+       <div class="row bottom">
+         <div class=" cashier_number border-left" data-value="1" data-type="num">1</div>
+         <div class=" cashier_number border-left" data-value="2" data-type="num">2</div>
+         <div class=" cashier_number border-left" data-value="3" data-type="num">3</div>
+       </div>
+       <div class="row bottom">
+         <div class=" cashier_number border-left" data-value="4" data-type="num">4</div>
+         <div class=" cashier_number border-left" data-value="5" data-type="num">5</div>
+         <div class=" cashier_number border-left" data-value="6" data-type="num">6</div>
+       </div>
+       <div class="row bottom">
+         <div class=" cashier_number border-left" data-value="7" data-type="num">7</div>
+         <div class=" cashier_number border-left" data-value="8" data-type="num">8</div>
+         <div class=" cashier_number border-left" data-value="9" data-type="num">9</div>
+       </div>
+       <div class="row bottom">
+         <div class=" cashier_number border-left" data-value="0" data-type="num">0</div>
+         <div class=" cashier_number border-left" data-value="." data-type="num">.</div>
+         <div class=" cashier_number border-left" data-value="00" data-type="num">00</div>
+       </div>
+       <div class="row bottom">
+         <div class=" cashier_number green border-left" data-type="nett" >Nett</div>
+         <div class=" cashier_number red border-left" data-type="del">Del</div>
+         <div class=" cashier_number orange border-left" data-type="clr">Clr</div>
+       </div>
      </div>
-     <div class="row bottom">
-       <div class=" cashier_number border-left" data-value="4" data-type="num">4</div>
-       <div class=" cashier_number border-left" data-value="5" data-type="num">5</div>
-       <div class=" cashier_number border-left" data-value="6" data-type="num">6</div>
-     </div>
-     <div class="row bottom">
-       <div class=" cashier_number border-left" data-value="7" data-type="num">7</div>
-       <div class=" cashier_number border-left" data-value="8" data-type="num">8</div>
-       <div class=" cashier_number border-left" data-value="9" data-type="num">9</div>
-     </div>
-     <div class="row bottom">
-       <div class=" cashier_number border-left" data-value="0" data-type="num">0</div>
-       <div class=" cashier_number border-left" data-value="." data-type="num">.</div>
-       <div class=" cashier_number border-left" data-value="00" data-type="num">00</div>
-     </div>
-     <div class="row bottom">
-       <div class=" cashier_number green border-left" data-type="nett" >Nett</div>
-       <div class=" cashier_number red border-left" data-type="del">Del</div>
-       <div class=" cashier_number orange border-left" data-type="clr">Clr</div>
-     </div>
-   </div>
-   <div class="col-lg-6 col-md-6 col-sm-6">
-     <div class="row bottom">
-       <div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
-       <div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
-     </div>
-     <div class="row bottom">
-       <div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
-       <div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
-     </div>
-     <div class="row bottom">
-       <div class="pay purple left" id="master_pay">Pay</div>
+     <div class="col-lg-6 col-md-6 col-sm-6">
+       <div class="row bottom m-l-5">
+         <div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
+         <div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
+       </div>
+       <div class="row bottom m-l-5">
+         <div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
+         <div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
+       </div>
+       <div class="row bottom m-l-5">
+         <div class="pay purple left" id="master_pay">Pay</div>
+       </div>
      </div>
    </div>
  </div>
-
 </div>
 
-<div class="col-lg-1 col-md-1 col-sm-1">
+<!-- <div class="col-lg-1 col-md-1 col-sm-1">
  <button type="button" class="btn btn-default m-l-3 btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
+</div> -->
 </div>
 </div>
-
 <script>
   $(document).ready(function() {
     if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
diff --git a/app/views/origami/mpu/index.html.erb b/app/views/origami/mpu/index.html.erb
index b912de68..9d4ecf41 100755
--- a/app/views/origami/mpu/index.html.erb
+++ b/app/views/origami/mpu/index.html.erb
@@ -1,11 +1,16 @@
 <div class="container-fluid">
-	<div class="row">
-		<div class="col-md-6">
-			<h2>MPU</h2>
-		</div>
+	<div class="page-header">
+		<ol class="breadcrumb">
+			<li class="breadcrumb-item"><a href="<%=origami_root_path %>"><%= t :home %></a></li>
+			<li class="breadcrumb-item"><a href="/origami/sale/<%=@sale_id %>/payment"><%= t("views.btn.payment") %></a></li>
+			<li class="breadcrumb-item active"><%= t("views.btn.mpu") %></li>
+			<span class="float-right">
+				<%= link_to t('.back',:default => t("views.btn.back")),'/origami/sale/'+@sale_id+'/payment/others_payment'%>
+			</span>
+		</ol>
 	</div>
 	<div class="row">
-		<div class="col-lg-5 col-md-5 col-sm-3">
+		<div class="col-lg-5 col-md-5 col-sm-5">
 			<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>
@@ -48,55 +53,53 @@
 		</div>
 
 		<div class="col-lg-6 col-md-6 col-sm-6" style="margin-top:;">
-
-			<div class="row">
-				<div class="col-lg-6 col-md-6 col-sm-6">
-					<div class="row bottom">
-					<div class="col-md-4 cashier_number border-left" data-value="1" data-type="num">1</div>
-					<div class="col-md-4 cashier_number border-left" data-value="2" data-type="num">2</div>
-					<div class="col-md-4 cashier_number border-left" data-value="3" data-type="num">3</div>
+			<div class=" m-t-10 p-l-20">
+				<div class="row">
+					<div class="col-lg-6 col-md-6 col-sm-6">
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left" data-value="1" data-type="num">1</div>
+							<div class="col-md-4 cashier_number border-left" data-value="2" data-type="num">2</div>
+							<div class="col-md-4 cashier_number border-left" data-value="3" data-type="num">3</div>
+						</div>
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left" data-value="4" data-type="num">4</div>
+							<div class="col-md-4 cashier_number border-left" data-value="5" data-type="num">5</div>
+							<div class="col-md-4 cashier_number border-left" data-value="6" data-type="num">6</div>
+						</div>
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left" data-value="7" data-type="num">7</div>
+							<div class="col-md-4 cashier_number border-left" data-value="8" data-type="num">8</div>
+							<div class="col-md-4 cashier_number border-left" data-value="9" data-type="num">9</div>
+						</div>
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left" data-value="0" data-type="num">0</div>
+							<div class="col-md-4 cashier_number border-left" data-value="." data-type="num">.</div>
+							<div class="col-md-4 cashier_number border-left" data-value="00" data-type="num">00</div>
+						</div>
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left green" data-type="nett" >Nett</div>
+							<div class="col-md-4 cashier_number red border-left" data-type="del">Del</div>
+							<div class="col-md-4 cashier_number orange border-left" data-type="clr">Clr</div>
+						</div>
 					</div>
-					<div class="row bottom">
-					<div class="col-md-4 cashier_number border-left" data-value="4" data-type="num">4</div>
-					<div class="col-md-4 cashier_number border-left" data-value="5" data-type="num">5</div>
-					<div class="col-md-4 cashier_number border-left" data-value="6" data-type="num">6</div>
-					</div>
-					<div class="row bottom">
-					<div class="col-md-4 cashier_number border-left" data-value="7" data-type="num">7</div>
-					<div class="col-md-4 cashier_number border-left" data-value="8" data-type="num">8</div>
-					<div class="col-md-4 cashier_number border-left" data-value="9" data-type="num">9</div>
-					</div>
-					<div class="row bottom">
-					<div class="col-md-4 cashier_number border-left" data-value="0" data-type="num">0</div>
-					<div class="col-md-4 cashier_number border-left" data-value="." data-type="num">.</div>
-					<div class="col-md-4 cashier_number border-left" data-value="00" data-type="num">00</div>
-					</div>
-					<div class="row bottom">
-					<div class="col-md-4 cashier_number border-left green" data-type="nett" >Nett</div>
-					<div class="col-md-4 cashier_number red border-left" data-type="del">Del</div>
-					<div class="col-md-4 cashier_number orange border-left" data-type="clr">Clr</div>
-					</div>
-				</div>
-				<div class="col-lg-6 col-md-6 col-sm-6">
-					<div class="row bottom">
-						<div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
-						<div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
-					</div>
-					<div class="row bottom">
-						<div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
-						<div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
-					</div>
-					<div class="row bottom">
-						<div class="pay purple left" id="mpu_pay">Pay</div>
+					<div class="col-lg-6 col-md-6 col-sm-6">
+						<div class="row bottom m-l-5">
+							<div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
+							<div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
+						</div>
+						<div class="row bottom m-l-5">
+							<div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
+							<div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
+						</div>
+						<div class="row bottom m-l-5">
+							<div class="pay purple left" id="mpu_pay">Pay</div>
+						</div>
 					</div>
 				</div>
 			</div>
-
 		</div>
 
-		<div class="col-lg-1 col-md-1 col-sm-1">
-			<button type="button" class="btn btn-default m-l-10 btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
-		</div>
+		
 	</div>
 </div>
 <script>
@@ -174,11 +177,11 @@
 	         	success:function(result){
 	         		if(result){
 	         			swal({
-					        title: "Infomation!",
-					        text: "Payment Successfully",
-					    }, function () {
-					    	window.location.href = '/origami/sale/'+ sale_id  + "/payment";
-					    });
+	         				title: "Infomation!",
+	         				text: "Payment Successfully",
+	         			}, function () {
+	         				window.location.href = '/origami/sale/'+ sale_id  + "/payment";
+	         			});
 	         		}
 	         	}
 	         });
diff --git a/app/views/origami/others_payments/index.html.erb b/app/views/origami/others_payments/index.html.erb
index b84ac87b..2a528b81 100755
--- a/app/views/origami/others_payments/index.html.erb
+++ b/app/views/origami/others_payments/index.html.erb
@@ -1,17 +1,25 @@
 <div class="container-fluid">
+	<div class="page-header">
+		<ol class="breadcrumb">
+			<li class="breadcrumb-item"><a href="<%=origami_root_path %>"><%= t :home %></a></li>
+			<li class="breadcrumb-item active"><%= t("views.btn.other_payment") %></li>
+
+			<span class="float-right">
+				<%= link_to t('.back',:default => t("views.btn.back")),'/origami/sale/'+@sale_id+'/payment'%>
+			</span>
+		</ol>
+	</div>
+
 	<div class="row">
 		<div class="col-lg-11col-md-11 col-sm-11">
 			<div >
 				<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>
+					<div class="purple others-payment bottom left m-l-30" 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 %>
 				</div>
 			</div>
 		</div>
-		<div class="col-lg-1 col-md-1 col-sm-1">
-			<button type="button" class="btn btn-default btn-block" id='back'>Back</button>
-		</div>
 	</div>
 </div>
 <script type="text/javascript">
diff --git a/app/views/origami/payments/show.html.erb b/app/views/origami/payments/show.html.erb
index ec129d07..33b00e72 100755
--- a/app/views/origami/payments/show.html.erb
+++ b/app/views/origami/payments/show.html.erb
@@ -25,7 +25,7 @@
           </div>
         </div>
 
-        <div class="card-block m-l-5 m-r-5">
+        <div class="card-block m-l-5 m-r-5 m-t--10">
           <div class="card-title">
             <div id="table-details" class="card-text" >
               <table class="table" id="append-table">
@@ -40,9 +40,9 @@
               </table>
             </div>
           </div>
-          <div id="order-detail-slimscroll">
+          <div id="order-detail-slimscroll" data-height="300">
             <!-- <div id="table-details" class="card-text" style="min-height:400px; max-height:400px; overflow-x:scroll"> -->
-            <div id="table-details" class="card-text" >
+            <div id="table-details" class="card-text m-t--10" >
               <table class="table" id="append-table">
                 <tbody>
                   <% sub_total = 0
@@ -65,8 +65,8 @@
            </div>
          </div>
        </div>
-       <div class="card-footer">
-         <table class="table">
+       <div class="card-footer ">
+         <table class="table m-t--10 ">
           <tfooter>
             <tr>
               <td class="charges-name"><strong>Sub Total</strong></td>
@@ -115,7 +115,7 @@
         <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>
-      <br>
+     
       <div class="row payment cash-color p-l-5 p-r-5">
         <div class="col-md-8">Cash</div>
         <div class="col-md-4" id="cash" ><%= @cash %></div>
@@ -208,12 +208,12 @@
           <div class="col-md-4" id="mastercount">0.0</div>
         </div>
         <% end %>
-        <br>
+        <!-- <br> -->
         <div class="row m-l-5 m-r-5">
           <div class="col-md-8"><strong>Balance</strong></div>
           <div class="col-md-4"><strong><span id='balance'><%= @sale_data.grand_total %></span></strong></div>
         </div>
-        <br>
+        <!-- <br> -->
       </div>
     </div>
 
@@ -221,42 +221,42 @@
       <div class="row m-l-5 m-r-5">
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="row bottom">
-           <div class="col-md-4 cashier_number border-top border-right border-left" data-value="1" data-type="num">1</div>
-           <div class="col-md-4 cashier_number border-top border-right border-left" data-value="2" data-type="num">2</div>
-           <div class="col-md-4 cashier_number border-top border-right border-left" data-value="3" data-type="num">3</div>
+           <div class="col-md-4 cashier_number border-top border- border-left" data-value="1" data-type="num">1</div>
+           <div class="col-md-4 cashier_number border-top border- border-left" data-value="2" data-type="num">2</div>
+           <div class="col-md-4 cashier_number border-top border- border-left" data-value="3" data-type="num">3</div>
          </div>
          <div class="row bottom">
-           <div class="col-md-4 cashier_number border-top border-right border-left" data-value="4" data-type="num">4</div>
-           <div class="col-md-4 cashier_number border-top border-right border-left" data-value="5" data-type="num">5</div>
-           <div class="col-md-4 cashier_number border-top border-right border-left" data-value="6" data-type="num">6</div>
+           <div class="col-md-4 cashier_number border-top border- border-left" data-value="4" data-type="num">4</div>
+           <div class="col-md-4 cashier_number border-top border- border-left" data-value="5" data-type="num">5</div>
+           <div class="col-md-4 cashier_number border-top border- border-left" data-value="6" data-type="num">6</div>
          </div>
          <div class="row bottom">
-           <div class="col-md-4 cashier_number border-top border-right border-left" data-value="7" data-type="num">7</div>
-           <div class="col-md-4 cashier_number border-top border-right border-left" data-value="8" data-type="num">8</div>
-           <div class="col-md-4 cashier_number border-top border-right border-left" data-value="9" data-type="num">9</div>
+           <div class="col-md-4 cashier_number border-top border- border-left" data-value="7" data-type="num">7</div>
+           <div class="col-md-4 cashier_number border-top border- border-left" data-value="8" data-type="num">8</div>
+           <div class="col-md-4 cashier_number border-top border- border-left" data-value="9" data-type="num">9</div>
          </div>
          <div class="row bottom">
-           <div class="col-md-4 cashier_number border-top border-right border-left" data-value="0" data-type="num">0</div>
-           <div class="col-md-4 cashier_number border-top border-right border-left" data-value="." data-type="num">.</div>
-           <div class="col-md-4 cashier_number border-top border-right border-left" data-value="00" data-type="num">00</div>
+           <div class="col-md-4 cashier_number border-top border- border-left" data-value="0" data-type="num">0</div>
+           <div class="col-md-4 cashier_number border-top border- border-left" data-value="." data-type="num">.</div>
+           <div class="col-md-4 cashier_number border-top border- border-left" data-value="00" data-type="num">00</div>
          </div>
          <div class="row bottom">
-           <div class="col-md-4 cashier_number border-top border-right border-left green" data-type="nett">Nett</div>
-           <div class="col-md-4 cashier_number border-top border-right border-left red" data-type="del">Del</div>
-           <div class="col-md-4 cashier_number border-top border-right border-left orange" data-type="clr">Clr</div>
+           <div class="col-md-4 cashier_number border-top border- border-left green" data-type="nett">Nett</div>
+           <div class="col-md-4 cashier_number border-top border- border-left red" data-type="del">Del</div>
+           <div class="col-md-4 cashier_number border-top border- border-left orange" data-type="clr">Clr</div>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="row bottom">
-           <div class="cashier_number border-top border-right border-left payment-long payment-left" data-value="1000" data-type="add">1000</div>
-           <div class="cashier_number border-top border-right border-left payment-long" data-value="3000" data-type="add">3000</div>
+           <div class="cashier_number border-top border- border-left payment-long payment-left" data-value="1000" data-type="add">1000</div>
+           <div class="cashier_number border-top border- border-left payment-long" data-value="3000" data-type="add">3000</div>
          </div>
          <div class="row bottom">
-           <div class="cashier_number border-top border-right border-left payment-long payment-left" data-value="5000" data-type="add">5000</div>
-           <div class="cashier_number border-top border-right border-left payment-long" data-value="10000" data-type="add">10000</div>
+           <div class="cashier_number border-top border- border-left payment-long payment-left" data-value="5000" data-type="add">5000</div>
+           <div class="cashier_number border-top border- border-left payment-long" data-value="10000" data-type="add">10000</div>
          </div>
           <div class="row bottom">
-           <div class="pay border-top border-right border-left purple payment-left" id="pay">Pay</div>
+           <div class="pay border-top border- border-left purple payment-left" id="pay">Pay</div>
           </div>
        </div>
      </div>
diff --git a/app/views/origami/redeem_payments/index.html.erb b/app/views/origami/redeem_payments/index.html.erb
index ac881ef4..ee8619c0 100755
--- a/app/views/origami/redeem_payments/index.html.erb
+++ b/app/views/origami/redeem_payments/index.html.erb
@@ -1,184 +1,193 @@
-<div class="row">
-	<div class="col-lg-5 col-md-5 col-sm-3">
-			<div class="card" style="padding:0px 20px;">
+<div class="container-fluid">
+	<div class="page-header">
+		<ol class="breadcrumb">
+			<li class="breadcrumb-item"><a href="<%=origami_root_path %>"><%= t :home %></a></li>
+			<li class="breadcrumb-item"><a href="/origami/sale/<%=@sale_id %>/payment"><%= t("views.btn.payment") %></a></li>
+			<li class="breadcrumb-item active"><%= t("views.right_panel.details.redeem") %></li>
+			<span class="float-right">
+				<%= link_to t('.back',:default => t("views.btn.back")),'/origami/sale/'+@sale_id+'/payment/others_payment'%>
+			</span>
+		</ol>
+	</div>
+	<div class="row">
+		<div class="col-lg-5 col-md-5 col-sm-5">
+			<div class="card  m-l-10 m-t-10" style="padding:0px 20px;">
 				<div class="rebate-form">
-		    		<div class="row">
-			    		<div class="form-group col-lg-12 col-md-12 col-sm-12">
-			      			<label class="">You can redeem up to </label>
-						      	<input type="text" name="" id="redeemamt" class="form-control col-lg-7 col-md-7 col-sm-7" readonly="" value="<%= @redeem_prices %>" data-value="<%=@sale_id %>" data-member-value="<%= @membership_id %>">
-			    		</div>
-			    		<hr>
+					<div class="row">
+						<div class="form-group col-lg-12 col-md-12 col-sm-12">
+							<label class="">You can redeem up to </label>
+							<input type="text" name="" id="redeemamt" class="form-control col-lg-7 col-md-7 col-sm-7" readonly="" value="<%= @redeem_prices %>" data-value="<%=@sale_id %>" data-member-value="<%= @membership_id %>">
 						</div>
-						<% if @payparcount > 0 %>
-			    		<div class="row">
-				    		<div class="form-group col-lg-12 col-md-12 col-sm-12">
-				      			<label class="">Recent Redeem Amount </label>
-							      	<input type="text" name="" id="" class="form-control col-lg-7 col-md-7 col-sm-7" readonly="" value="<%= @payparcount %>" data-value="<%=@sale_id %>" data-member-value="<%= @membership_id %>">
-				    		</div>
-				    		<hr>
-							</div>
-						<% end %>
-		    		<div class="row">
-			    		<div class="form-group col-lg-12 col-md-12 col-sm-12">
-			      			<label class=""> Rebate Balance </label>
-						      	<input type="text" name="valid_amount" id="valid_amount" class="form-control col-lg-7 col-md-7 col-sm-7" readonly="" value="<%=@membership_rebate_balance%>" data-value="<%=@sale_id %>" data-member-value="<%= @membership_id %>">
-			    		</div>
-			    		<hr>
-			    	</div>
-			    	<div class="row">
-			    		<div class="form-group col-lg-12 col-md-12 col-sm-12">
-			      			<label class="">Redeem Amount</label>
-			      			<div id="used_amount" class="form-control col-lg-7 col-md-7 col-sm-7">0.0</div>
-			    		</div>
-			    		<hr>
-			    	</div>
-		    	</div>
+						<hr>
+					</div>
+					<% if @payparcount > 0 %>
+					<div class="row">
+						<div class="form-group col-lg-12 col-md-12 col-sm-12">
+							<label class="">Recent Redeem Amount </label>
+							<input type="text" name="" id="" class="form-control col-lg-7 col-md-7 col-sm-7" readonly="" value="<%= @payparcount %>" data-value="<%=@sale_id %>" data-member-value="<%= @membership_id %>">
+						</div>
+						<hr>
+					</div>
+					<% end %>
+					<div class="row">
+						<div class="form-group col-lg-12 col-md-12 col-sm-12">
+							<label class=""> Rebate Balance </label>
+							<input type="text" name="valid_amount" id="valid_amount" class="form-control col-lg-7 col-md-7 col-sm-7" readonly="" value="<%=@membership_rebate_balance%>" data-value="<%=@sale_id %>" data-member-value="<%= @membership_id %>">
+						</div>
+						<hr>
+					</div>
+					<div class="row">
+						<div class="form-group col-lg-12 col-md-12 col-sm-12">
+							<label class="">Redeem Amount</label>
+							<div id="used_amount" class="form-control col-lg-7 col-md-7 col-sm-7">0.0</div>
+						</div>
+						<hr>
+					</div>
+				</div>
 			</div>
 			<!-- <% if @payparcount > 0 %>
 				<p class="">Last time rebate amount is <%= @payparcount %></p>
 			<% end %>
 			<p class="">You can rebate upto <span style="color:red;" id="food_prices"><%= @redeem_prices %></span></p> -->
-	</div>
+		</div>
 
-    <div class="col-lg-6 col-md-6 col-sm-6">
+		<div class="col-lg-6 col-md-6 col-sm-6">
+			<div class="m-t-10 p-l-20">
+				<div class="row">
+					<div class="col-lg-6 col-md-1 col-sm-1">
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left" data-value="1" data-type="num">1</div>
+							<div class="col-md-4 cashier_number border-left" data-value="2" data-type="num">2</div>
+							<div class="col-md-4 cashier_number border-left" data-value="3" data-type="num">3</div>
+						</div>
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left" data-value="4" data-type="num">4</div>
+							<div class="col-md-4 cashier_number border-left" data-value="5" data-type="num">5</div>
+							<div class="col-md-4 cashier_number border-left" data-value="6" data-type="num">6</div>
+						</div>
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left" data-value="7" data-type="num">7</div>
+							<div class="col-md-4 cashier_number border-left" data-value="8" data-type="num">8</div>
+							<div class="col-md-4 cashier_number border-left" data-value="9" data-type="num">9</div>
+						</div>
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number border-left" data-value="0" data-type="num">0</div>
+							<div class="col-md-4 cashier_number border-left" data-value="." data-type="num">.</div>
+							<div class="col-md-4 cashier_number border-left" data-value="00" data-type="num">00</div>
+						</div>
+						<div class="row bottom">
+							<div class="col-md-4 cashier_number green border-left" data-type="nett">Nett</div>
+							<div class="col-md-4 cashier_number red border-left" data-type="del">Del</div>
+							<div class="col-md-4 cashier_number orange border-left" data-type="clr">Clr</div>
+						</div>
+					</div>
+					<div class="col-lg-6 col-md-6 col-sm-6">
+						<div class="row bottom m-l-5">
+							<div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
+							<div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
+						</div>
+						<div class="row bottom m-l-5">
+							<div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
+							<div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
+						</div>
+						<div class="row bottom m-l-5">
+							<div class="pay purple left" id="redeem">Pay</div>
+						</div>
+					</div>
 
-    	<div class="row">
-         <div class="col-lg-6 col-md-1 col-sm-1">
-           <div class="row bottom">
-             <div class="col-md-4 cashier_number border-left" data-value="1" data-type="num">1</div>
-             <div class="col-md-4 cashier_number border-left" data-value="2" data-type="num">2</div>
-             <div class="col-md-4 cashier_number border-left" data-value="3" data-type="num">3</div>
-           </div>
-           <div class="row bottom">
-             <div class="col-md-4 cashier_number border-left" data-value="4" data-type="num">4</div>
-             <div class="col-md-4 cashier_number border-left" data-value="5" data-type="num">5</div>
-             <div class="col-md-4 cashier_number border-left" data-value="6" data-type="num">6</div>
-           </div>
-           <div class="row bottom">
-             <div class="col-md-4 cashier_number border-left" data-value="7" data-type="num">7</div>
-             <div class="col-md-4 cashier_number border-left" data-value="8" data-type="num">8</div>
-             <div class="col-md-4 cashier_number border-left" data-value="9" data-type="num">9</div>
-           </div>
-           <div class="row bottom">
-             <div class="col-md-4 cashier_number border-left" data-value="0" data-type="num">0</div>
-             <div class="col-md-4 cashier_number border-left" data-value="." data-type="num">.</div>
-             <div class="col-md-4 cashier_number border-left" data-value="00" data-type="num">00</div>
-           </div>
-           <div class="row bottom">
-             <div class="col-md-4 cashier_number green border-left" data-type="nett">Nett</div>
-             <div class="col-md-4 cashier_number red border-left" data-type="del">Del</div>
-             <div class="col-md-4 cashier_number orange border-left" data-type="clr">Clr</div>
-           </div>
-         </div>
-         <div class="col-lg-6 col-md-6 col-sm-6">
-           <div class="row bottom">
-             <div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
-             <div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
-           </div>
-           <div class="row bottom">
-             <div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
-             <div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
-           </div>
-           <div class="row bottom">
-             <div class="pay purple left" id="redeem">Pay</div>
-           </div>
-         </div>
-
-      </div>
+				</div>
+			</div>
 
 
-
-    </div>
-		<div class="col-lg-1 col-md-1 col-sm-1">
+		</div>
+		<!-- <div class="col-lg-1 col-md-1 col-sm-1">
 		 <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">
-
+		</div> -->
+	</div>
 </div>
 <script type="text/javascript">
-$(document).ready(function() {
+	$(document).ready(function() {
 		if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
-	  else {
-	    $('#redeemamt').attr("value",parseFloat("<%= @redeem_prices %>") - parseFloat(localStorage.getItem("cash")));
-	  }
-});
-$(document).on('click', '.cashier_number', function(event){
-        event.stopPropagation();
-        event.preventDefault();
-        if(event.handled !== true) {
-            var original_value;
-            original_value = $('#used_amount').text();
+			else {
+				$('#redeemamt').attr("value",parseFloat("<%= @redeem_prices %>") - parseFloat(localStorage.getItem("cash")));
+			}
+		});
+	$(document).on('click', '.cashier_number', function(event){
+		event.stopPropagation();
+		event.preventDefault();
+		if(event.handled !== true) {
+			var original_value;
+			original_value = $('#used_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"){
-			                $('#used_amount').text(input_value);
-			            }else{
-			                $('#used_amount').append(input_value);
-			            }
-              		break;
-
-              		case 'add':
-	                	var input_value = $(this).attr("data-value");
-	                	amount = parseInt(input_value) + parseInt(original_value);
-	                	$('#used_amount').html(amount);
-
-             		break;
-             		case 'clr':
-             			$('#used_amount').html("0.0");
-             		break;
-             		case 'del' :
-			          var cash=$('#used_amount').text();
-			          $('#used_amount').text(cash.substr(0,cash.length-1));
-								break;
-								case 'nett':
-								var remain_amount = $('#valid_amount').val();
-								$('#used_amount').text(remain_amount);
-			        break;
-
-          		}
-          	event.handled = true;
-        } else {
-            return false;
-        }
-});
-
-$("#redeem").click(function(){
-	valid_amount = $("#valid_amount").val();
-	sale_id = $("#valid_amount").attr('data-value');
-	membership_id = $("#valid_amount").attr('data-member-value');
-	redeem_amount = parseFloat($("#used_amount").text());
-	if(redeem_amount<=0 ){
-		swal ( "Oops" ,  "Please type valid amount!" ,  "warning" );
-	}else if(valid_amount< redeem_amount){
-		swal ( "Oops" ,  "Insufficient Amount!" ,  "warning" );
-	}else{
-		if(redeem_amount <= "<%= @redeem_prices %>"){
-			$.ajax({
-				type: "POST",
-				url:  "<%=origami_payment_paypar_path%>",
-				data: {redeem_amount:redeem_amount,membership_id:membership_id,sale_id:sale_id},
-				success: function(result){
-					if(result.status == true){
-						swal({
-					        title: "Infomation!",
-					        text: result.status,
-					    }, function () {
-					    	window.location.href = '/origami/sale/'+ sale_id  + "/payment"
-					    });
-						
-					}else{
-						swal ( "Information" , result.message);
-					}
+			var input_type = $(this).attr("data-type");
+			switch (input_type) {
+				case 'num':
+				if (original_value == "0.0"){
+					$('#used_amount').text(input_value);
+				}else{
+					$('#used_amount').append(input_value);
 				}
-			})
-		}else {
-			swal ( "Oops" ,  "Redeem Amount is over!" ,  "warning" );
+				break;
+
+				case 'add':
+				var input_value = $(this).attr("data-value");
+				amount = parseInt(input_value) + parseInt(original_value);
+				$('#used_amount').html(amount);
+
+				break;
+				case 'clr':
+				$('#used_amount').html("0.0");
+				break;
+				case 'del' :
+				var cash=$('#used_amount').text();
+				$('#used_amount').text(cash.substr(0,cash.length-1));
+				break;
+				case 'nett':
+				var remain_amount = $('#valid_amount').val();
+				$('#used_amount').text(remain_amount);
+				break;
+
+			}
+			event.handled = true;
+		} else {
+			return false;
 		}
-	}
-});
+	});
+
+	$("#redeem").click(function(){
+		valid_amount = $("#valid_amount").val();
+		sale_id = $("#valid_amount").attr('data-value');
+		membership_id = $("#valid_amount").attr('data-member-value');
+		redeem_amount = parseFloat($("#used_amount").text());
+		if(redeem_amount<=0 ){
+			swal ( "Oops" ,  "Please type valid amount!" ,  "warning" );
+		}else if(valid_amount< redeem_amount){
+			swal ( "Oops" ,  "Insufficient Amount!" ,  "warning" );
+		}else{
+			if(redeem_amount <= "<%= @redeem_prices %>"){
+				$.ajax({
+					type: "POST",
+					url:  "<%=origami_payment_paypar_path%>",
+					data: {redeem_amount:redeem_amount,membership_id:membership_id,sale_id:sale_id},
+					success: function(result){
+						if(result.status == true){
+							swal({
+								title: "Infomation!",
+								text: result.status,
+							}, function () {
+								window.location.href = '/origami/sale/'+ sale_id  + "/payment"
+							});
+
+						}else{
+							swal ( "Information" , result.message);
+						}
+					}
+				})
+			}else {
+				swal ( "Oops" ,  "Redeem Amount is over!" ,  "warning" );
+			}
+		}
+	});
 </script>
diff --git a/app/views/origami/visa/index.html.erb b/app/views/origami/visa/index.html.erb
index 53589c89..f8677d13 100755
--- a/app/views/origami/visa/index.html.erb
+++ b/app/views/origami/visa/index.html.erb
@@ -1,99 +1,105 @@
 <div class="container-fluid">
-  <div class="row">
-     <div class="col-md-6">
-       <h2>VISA</h2>
-     </div>
+  <div class="page-header">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="<%=origami_root_path %>"><%= t :home %></a></li>
+      <li class="breadcrumb-item"><a href="/origami/sale/<%=@sale_id %>/payment"><%= t("views.btn.payment") %></a></li>
+      <li class="breadcrumb-item active"><%= t("views.btn.visa") %></li>
+      <span class="float-right">
+        <%= link_to t('.back',:default => t("views.btn.back")),'/origami/sale/'+@sale_id+'/payment/others_payment'%>
+      </span>
+    </ol>
   </div>
-<div class="row">
- <div class="col-lg-5 col-md-5 col-sm-3">
-  <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="padding:0px 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 class="row">
+   <div class="col-lg-5 col-md-5 col-sm-5">
+    <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 m-l-10 m-t-10" style="padding:0px 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>
       <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="">
+      <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 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="">
- <div class="row">
-   <div class="col-lg-6 col-md-6 col-sm-6">
-     <div class="row bottom">
-       <div class="col-md-4 cashier_number " data-value="1" data-type="num">1</div>
-       <div class="col-md-4 cashier_number border-left" data-value="2" data-type="num">2</div>
-       <div class="col-md-4 cashier_number border-left" data-value="3" data-type="num">3</div>
+  <div class=" m-t-10 p-l-20">
+   <div class="row">
+     <div class="col-lg-6 col-md-6 col-sm-6">
+       <div class="row bottom">
+         <div class="col-md-4 cashier_number " data-value="1" data-type="num">1</div>
+         <div class="col-md-4 cashier_number border-left" data-value="2" data-type="num">2</div>
+         <div class="col-md-4 cashier_number border-left" data-value="3" data-type="num">3</div>
+       </div>
+       <div class="row bottom">
+         <div class="col-md-4 cashier_number  border-left" data-value="4" data-type="num">4</div>
+         <div class="col-md-4 cashier_number border-left" data-value="5" data-type="num">5</div>
+         <div class="col-md-4 cashier_number border-left" data-value="6" data-type="num">6</div>
+       </div>
+       <div class="row bottom">
+         <div class="col-md-4 cashier_number  border-left" data-value="7" data-type="num">7</div>
+         <div class="col-md-4 cashier_number border-left" data-value="8" data-type="num">8</div>
+         <div class="col-md-4 cashier_number border-left" data-value="9" data-type="num">9</div>
+       </div>
+       <div class="row bottom">
+         <div class="col-md-4 cashier_number  border-left" data-value="0" data-type="num">0</div>
+         <div class="col-md-4 cashier_number border-left" data-value="." data-type="num">.</div>
+         <div class="col-md-4 cashier_number border-left" data-value="00" data-type="num">00</div>
+       </div>
+       <div class="row bottom">
+         <div class="col-md-4 cashier_number green border-left" data-type="nett" >Nett</div>
+         <div class="col-md-4 cashier_number red border-left" data-type="del">Del</div>
+         <div class="col-md-4 cashier_number orange border-left" data-type="clr">Clr</div>
+       </div>
      </div>
-     <div class="row bottom">
-       <div class="col-md-4 cashier_number  border-left" data-value="4" data-type="num">4</div>
-       <div class="col-md-4 cashier_number border-left" data-value="5" data-type="num">5</div>
-       <div class="col-md-4 cashier_number border-left" data-value="6" data-type="num">6</div>
-     </div>
-     <div class="row bottom">
-       <div class="col-md-4 cashier_number  border-left" data-value="7" data-type="num">7</div>
-       <div class="col-md-4 cashier_number border-left" data-value="8" data-type="num">8</div>
-       <div class="col-md-4 cashier_number border-left" data-value="9" data-type="num">9</div>
-     </div>
-     <div class="row bottom">
-       <div class="col-md-4 cashier_number  border-left" data-value="0" data-type="num">0</div>
-       <div class="col-md-4 cashier_number border-left" data-value="." data-type="num">.</div>
-       <div class="col-md-4 cashier_number border-left" data-value="00" data-type="num">00</div>
-     </div>
-     <div class="row bottom">
-       <div class="col-md-4 cashier_number green border-left" data-type="nett" >Nett</div>
-       <div class="col-md-4 cashier_number red border-left" data-type="del">Del</div>
-       <div class="col-md-4 cashier_number orange border-left" data-type="clr">Clr</div>
-     </div>
-   </div>
-   <div class="col-lg-6 col-md-6 col-sm-6">
-     <div class="row bottom">
-       <div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
-       <div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
-     </div>
-     <div class="row bottom">
-       <div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
-       <div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
-     </div>
-     <div class="row bottom">
-       <div class="pay purple left" id="visa_pay">Pay</div>
+     <div class="col-lg-6 col-md-6 col-sm-6">
+       <div class="row bottom m-l-5">
+         <div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
+         <div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
+       </div>
+       <div class="row bottom m-l-5">
+         <div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
+         <div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
+       </div>
+       <div class="row bottom m-l-5">
+         <div class="pay purple left" id="visa_pay">Pay</div>
+       </div>
      </div>
    </div>
  </div>
-
 </div>
 
-<div class="col-lg-1 col-md-1 col-sm-1">
+<!-- <div class="col-lg-1 col-md-1 col-sm-1">
  <button type="button" class="btn bg-default m-l-10 btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
-</div>
+</div> -->
 </div>
 </div>
 <script>
@@ -170,11 +176,11 @@
         success:function(result){
           if(result){
             swal({
-                 title: "Infomation!",
-                 text: "Payment Successfully",
-              }, function () {
-                 window.location.href = '/origami/sale/'+ sale_id  + "/payment";
-            });
+             title: "Infomation!",
+             text: "Payment Successfully",
+           }, function () {
+             window.location.href = '/origami/sale/'+ sale_id  + "/payment";
+           });
           }
         }
       });