diff --git a/app/assets/javascripts/custom.js b/app/assets/javascripts/custom.js
index 33316a31..f975ad07 100644
--- a/app/assets/javascripts/custom.js
+++ b/app/assets/javascripts/custom.js
@@ -101,6 +101,16 @@ $(document).ready(function() {
     railBorderRadius: '0',
     touchScrollStep : 50
   });
+
+  $('#make-reservation-slimscroll').slimScroll({
+    height: height-$('#make-reservation-slimscroll').attr('data-height'),
+    size: '5px',
+    color: 'rgba(0,0,0,0.5)',
+    alwaysVisible: false,
+    borderRadius: '0',
+    railBorderRadius: '0',
+    touchScrollStep : 50
+  });
   // $('.delete').click(function(){
   //   var method    = $(this).attr('data-method');
   //   var url       = $(this).attr('data-ref');
diff --git a/app/assets/javascripts/reservation.js b/app/assets/javascripts/reservation.js
index 255f3253..fa3f3ddd 100644
--- a/app/assets/javascripts/reservation.js
+++ b/app/assets/javascripts/reservation.js
@@ -1,3 +1,31 @@
+//= require custom.js
+
 $(function(){
+  /*new customer UI func:*/
+  //Initialize tooltips
+  $('.nav-tabs > li a[title]').tooltip();
   
+  //Wizard
+  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
+
+      var $target = $(e.target);
+  
+      if ($target.parent().hasClass('disabled')) {
+          return false;
+      }
+  });
+
+  $(".next-step").click(function (e) {
+      var $active = $('.wizard .nav-tabs li a.active');
+      $active.parent().next().removeClass('disabled');
+      nextTab($active);
+      $('.wizard .nav-tabs li.active .connecting-line').css({"border-bottom-left-radius": 0, "border-top-left-radius": 0});
+  });
+  $(".prev-step").click(function (e) {
+
+      var $active = $('.wizard .nav-tabs li a.active');
+      prevTab($active);
+
+  });
+  /*new customer UI func:*/
 });
\ No newline at end of file
diff --git a/app/assets/stylesheets/reservation.scss b/app/assets/stylesheets/reservation.scss
index e69de29b..6cc72696 100644
--- a/app/assets/stylesheets/reservation.scss
+++ b/app/assets/stylesheets/reservation.scss
@@ -0,0 +1,110 @@
+/*customer modal UI */
+  .wizard {
+      background: #f1f1f1;
+      padding: 10px;
+  }
+  .wizard .nav-tabs {
+      position: relative;
+      border: 0px;
+  }
+  .wizard > div.wizard-inner {
+      position: relative;
+      margin: 0 0 0 80px !important;
+  }
+  .connecting-line{
+      height:12px;
+      background: #e0e0e0;
+      position: absolute;
+      width: 115%;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      top:38%;
+      z-index: 1;
+      border-radius: 15px;
+  }
+  .active-line{
+      height:12px;
+      background: #e0e0e0;
+      position: absolute;
+      width: 5%;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      top:61%;
+      z-index: 1;
+      border-radius: 15px !important;
+  }
+  .connecting-line a.active{
+      background-color: #2ED4E0;
+  }
+  .border-right{
+      border-radius: 15px 0 0 15px;
+  }
+  .border-left{
+      border-radius: 0;
+  }
+  .wizard .nav-tabs > li {
+    margin-bottom: -20px;
+  }
+  .wizard .nav-tabs > li > a.active > a, .wizard .nav-tabs > li > a.active > a:hover, .wizard .nav-tabs > li > a.active > a:focus {
+      cursor: default;
+      border: 0;
+      color:#2ED4E0;
+      border-bottom-color: transparent;
+  }
+  .nav-tabs li p{
+      padding-top:40px;
+      font-size: 14px;
+      text-align: center;
+  }
+  .list-inline{
+      text-align: center;
+  }
+  span.round-tab {
+      width: 28px;
+      height: 28px;
+      line-height: 28px;
+      display: inline-block;
+      border-radius: 100px;
+      background:#DFE3E4;
+      border: 2px solid #fff;
+      z-index:1;
+      position:absolute;
+      text-align: center;
+      font-size: 16px;
+  }
+  .wizard li > a.active span.round-tab{
+      background:#2196F3;
+      color:white;
+      border: 1px solid #fff;
+  }
+  span.round-tab:hover{
+      color: white;
+      border: 1px solid #fff;
+      background-color:#2196F3; 
+  }
+  .wizard .nav-tabs > li {
+      width: 25%;
+  }
+  .wizard .nav-tabs > li a{
+      width: 28px;
+      height: 28px;
+      margin: 18px auto;
+      border-radius: 100%;
+      padding: 0;
+      color: #777;
+  }
+  .wizard .tab-pane {
+      position: relative;
+      padding-top: 5px;
+      border-top: 1px solid #fff;
+      margin-top: 20px;
+  }
+  .next-step:hover, .next-step, .prev-step:hover, .prev-step{
+      position: relative;
+      background-color: #2196F3;
+      font-size: 14px;
+      color: #FFFFFF;
+  }
+/*customer modal UI */
\ No newline at end of file
diff --git a/app/assets/stylesheets/reset.css b/app/assets/stylesheets/reset.css
index 14a803e3..35b88ab8 100644
--- a/app/assets/stylesheets/reset.css
+++ b/app/assets/stylesheets/reset.css
@@ -286,13 +286,13 @@ section.content {
 
 /* shop name margin */
 .shop-name-margin {
-  margin-left : 15%;
+  margin-left : 10%;
 }
 /* shop name margin */
 
 /* online order margin */
 .online-order-margin {
-  margin-left : 13%;
+  margin-left : 10%;
   margin-bottom : 9.9999px;
 }
 /* online order margin */
diff --git a/app/views/origami/payments/show.html.erb b/app/views/origami/payments/show.html.erb
index 49c45e39..8f3190f2 100755
--- a/app/views/origami/payments/show.html.erb
+++ b/app/views/origami/payments/show.html.erb
@@ -737,7 +737,7 @@ var trans_flag = <%= @trans_flag %>;
       customer_display_view(null,"reload");
       var sale_id = $('#sale_id').text();
       var flag = localStorage.getItem("trans_flag");
-      if(flag != "true"){
+      if((flag!=null) && (flag != "true")){
         window.location.href = '/transactions/sales/'+sale_id;
       }else{
         if (cashier_type=="cashier") {
@@ -1151,7 +1151,7 @@ var trans_flag = <%= @trans_flag %>;
 
             if (pdf_view ==1) {
               var flag = localStorage.getItem("trans_flag");
-              if(flag != "true"){
+              if((flag!=null) && (flag != "true")){
                 window.location.href = "/transactions/sales/"+sale_id;
               }else{
                 if (cashier_type=="cashier") {
@@ -1185,19 +1185,24 @@ var trans_flag = <%= @trans_flag %>;
           closeOnCancel: false,
           allowOutsideClick: false
          }, function () {
-          if (cashier_type=="cashier") {
-            window.location.href = '/origami';
+          var flag = localStorage.getItem("trans_flag");
+          if((flag!=null) && (flag != "true")){
+            window.location.href = '/transactions/sales/'+sale_id;
           }else{
-            window.location.href = '/origami/quick_service';
-            customer_display_view(null,"reload");
-          }   
+            if (cashier_type=="cashier") {
+              window.location.href = '/origami';
+            }else{
+              window.location.href = '/origami/quick_service';
+              customer_display_view(null,"reload");
+            } 
+          }
        });
   }
   
 
   $(".btn_pdf_close").on('click',function(){
     var flag = localStorage.getItem("trans_flag");
-    if(flag != "true"){
+    if((flag!=null) && (flag != "true")){
       var sale_id   = $('#sale_id').text();
       window.location.href = "/transactions/sales/"+sale_id;
     }else{
@@ -1430,16 +1435,21 @@ var trans_flag = <%= @trans_flag %>;
                title: "Information!",
                text: 'Thank You !',
              }, function () {
-                        // For Server Print - from jade
-                        if ($("#server_mode").val() == "cloud") {
-                          code2lab.printFile(result.filepath.substr(6), result.printer_url);
-                        }
-                        if (cashier_type=="cashier") {
-                         window.location.href = '/origami';
-                       }else{
-                         window.location.href = '/origami/quick_service';
-                       } 
-                     });
+                // For Server Print - from jade
+                if ($("#server_mode").val() == "cloud") {
+                  code2lab.printFile(result.filepath.substr(6), result.printer_url);
+                }
+                var flag = localStorage.getItem("trans_flag");
+                if((flag!=null) && (flag != "true")){
+                  window.location.href = '/transactions/sales/'+sale_id;
+                }else{
+                  if (cashier_type=="cashier") {
+                    window.location.href = '/origami';
+                  }else{
+                    window.location.href = '/origami/quick_service';
+                  } 
+                }
+             });
             }
           }
         });
@@ -1472,11 +1482,16 @@ var trans_flag = <%= @trans_flag %>;
                 if ($("#server_mode").val() == "cloud") {
                   code2lab.printFile(result.filepath.substr(6), result.printer_url);
                 }
-                if (cashier_type=="cashier") {
-                 window.location.href = '/origami';
-               }else{
-                 window.location.href = '/origami/quick_service';
-               } 
+                var flag = localStorage.getItem("trans_flag");
+                if((flag!=null) && (flag != "true")){
+                  window.location.href = '/transactions/sales/'+sale_id;
+                }else{
+                  if (cashier_type=="cashier") {
+                    window.location.href = '/origami';
+                  }else{
+                    window.location.href = '/origami/quick_service';
+                  } 
+                }
              }
            })
       }
@@ -1503,18 +1518,23 @@ var trans_flag = <%= @trans_flag %>;
           data: "remark="+ remark + "&sale_id=" + sale_id+ "&access_code=" + access_code,
           success: function (result) {
             // console.log(result)
-                   // For Server Print - from jade
-                   if ($("#server_mode").val() == "cloud") {
-                    code2lab.printFile(result.filepath.substr(6), result.printer_url);
-                  }
-                  if (cashier_type=="cashier") {
-                    window.location.href = '/origami';
-                  }else{
-                    window.location.href = '/origami/quick_service';
-                    customer_display_view(null,"reload");
-                  } 
-                }
-              });
+             // For Server Print - from jade
+             if ($("#server_mode").val() == "cloud") {
+              code2lab.printFile(result.filepath.substr(6), result.printer_url);
+            }
+            var flag = localStorage.getItem("trans_flag");
+            if((flag!=null) && (flag != "true")){
+              window.location.href = '/transactions/sales/'+sale_id;
+            }else{
+              if (cashier_type=="cashier") {
+                window.location.href = '/origami';
+              }else{
+                window.location.href = '/origami/quick_service';
+                customer_display_view(null,"reload");
+              } 
+            }
+          }
+        });
       }
     }); 
   }
diff --git a/app/views/origami/reservation/index.html.erb b/app/views/origami/reservation/index.html.erb
index ff2186c2..1c3b4060 100644
--- a/app/views/origami/reservation/index.html.erb
+++ b/app/views/origami/reservation/index.html.erb
@@ -2,8 +2,102 @@
 <%= javascript_include_tag 'reservation', 'data-turbolinks-track': 'reload' %> 
 <div class="container-fluid">
   <div class="row">
-    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-      
+    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
+      <div class="card" id="make-reservation-slimscroll" data-height="-50">
+        <div class="card-header">
+          <h5 class="card-title text-center"><%= t :make_reservation %></h5>
+        </div>
+        <div class="card-body">
+          <div class="wizard">
+            <div class="wizard-inner">
+                <div class="active-line"></div>
+                <ul class="nav nav-tabs" role="tablist">
+                    <li role="presentation" class="nav-item">
+                      <div class="connecting-line border-right"></div>
+                      <a href="#step1" class="nav-link active" data-toggle="tab" aria-controls="reservation" role="tab" title="Reservation">
+                        <span class="round-tab">
+                          1s
+                        </span>
+                      </a>
+                    </li>
+                    <li role="presentation" class="nav-item disabled">
+                      <div class="connecting-line"></div>
+                      <a href="#complete" class="nav-link disable" data-toggle="tab" aria-controls="personal_detail" role="tab" title="Personal Detail">
+                        <span class="round-tab">
+                          2
+                        </span>
+                      </a>
+                    </li>
+                </ul>
+            </div> <!-- .end.wizard-inner -->
+            <div class="tab-content">
+              <div class="tab-pane active" role="tabpanel" id="reservation">
+                <div class="form-row">
+                  <div class="col-sm-12 col-md-12 col-lg-12">
+                    <label class="font-12 radio-inline">
+                      <input type="radio" name="type" checked class="radio-col-indigo" value="0"><%= t("views.right_panel.detail.dine_in") %>
+                    </label>&nbsp;
+                    <label class="font-12 radio-inline">
+                      <input type="radio" name="type" class="radio-col-indigo" value="1"><%= t :room %>
+                    </label>
+                  </div>
+                </div>
+                <div class="form-row clearfix">
+                  <div class="form-group col-sm-6 col-md-6 col-lg-6">
+                    <input class="form-control check_in_date" name="from" id="from" type="text" placeholder="Check In Date">
+                  </div>
+                  <div class="form-group col-sm-6 col-md-6 col-lg-6">
+                    <input class="form-control check_out_date" name="from" id="from" type="text" placeholder="Check Out Date">
+                  </div>
+                </div>
+                <div class="form-row clearfix">
+                  <div class="form-group col-sm-6 col-md-6 col-lg-6">
+                    <input class="form-control check_in_time" name="from" id="from" type="text" placeholder="Check In Time">
+                  </div>
+                  <div class="form-group col-sm-6 col-md-6 col-lg-6">
+                    <input class="form-control check_out_time" name="from" id="from" type="text" placeholder="Check Out Time">
+                  </div>
+                </div>
+                <div class="form-row clearfix">
+                  <div class="form-group col-sm-12 col-md-12 col-lg-12">
+                    <label for="room_count" class="control-label">ROOMS</label>
+                    <input type="number" class="form-control" name="room_count">
+                  </div>
+                </div>
+                <div class="form-row clearfix">
+                  <div class="form-group col-sm-6 col-md-6 col-lg-6">
+                    <label for="adult_count" class="control-label">ADULT</label>
+                    <input type="number" class="form-control" name="adult_count">
+                  </div>
+                  <div class="form-group col-sm-6 col-md-6 col-lg-6">
+                    <label for="child_count" class="control-label">CHILD</label>
+                    <input type="number" class="form-control" name="child_count">
+                  </div>
+                </div>
+                <div class="row text-center">
+                  <div class="form-group col-sm-12 col-md-12 col-lg-12">
+                    <button class="btn bg-blue btn-lg waves-effect">CHECK AVAILABLE</button>
+                  </div>
+                </div>
+              </div><!-- .end.tab-content .reservation -->
+            
+              <div class="tab-pane" role="tabpanel" id="personal_detail">
+
+              </div>
+            </div><!-- .end.tab-content .personal_detail -->
+          </div> <!-- .end.wizard -->
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
+      <div class="card font-13">
+
+      </div>
+    </div>
+    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
+      <div class="card font-13">
+
+      </div>
     </div>
   </div>
 </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 4775df7c..2c30cb50 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -87,6 +87,7 @@ en:
   track: "Track"
   debit: "Debit"
   reservation: "Reservation"
+  make_reservation: "Make Reservation"
   
   views:
     btn:
diff --git a/config/locales/mm.yml b/config/locales/mm.yml
index 03c5b1b0..7360c35f 100644
--- a/config/locales/mm.yml
+++ b/config/locales/mm.yml
@@ -82,6 +82,7 @@ mm:
   track: "Track"
   debit: "Debit"
   reservation: "Reservation"
+  make_reservation: "Make Reservation"
   
   views:
     btn: