diff --git a/app/assets/javascripts/addorder.js b/app/assets/javascripts/addorder.js
index 75de7392..f6768182 100755
--- a/app/assets/javascripts/addorder.js
+++ b/app/assets/javascripts/addorder.js
@@ -562,51 +562,9 @@ $(function() {
   // click plus icon for add
   $(document).on('click', '.add_icon', function(event){
 
-    if($(this).hasClass('product_item')) {
-      $('.sx_item_detailModal').modal('hide');
-
-      var item_data = $(this);
-      code = $(this).data('instance-code');
-
-      if ($('#server_mode').val() != "cloud" && second_display_lookup == 2) {
-        item = get_item(item_data,"add_icon");
-        customer_display_view(item,"add");
-      }
-      show_item_detail(item_data,"add_icon");
-      calculate_sub_total();
-      autoScrollToItem(code)
-
-      return
-    }
-
-    if ($(this).data('instances').length == 1) {
-
-      $('.sx_item_detailModal').modal('hide');
-
-      if ($(this).data('instances')[0].out_of_stock == false ) {
-        var item_data = $(this);
-        code = $(this).data('instance-code');
-
-        if ($('#server_mode').val() != "cloud" && second_display_lookup == 2) {
-          item = get_item(item_data,"add_icon");
-          customer_display_view(item,"add");
-        }
-        show_item_detail(item_data,"add_icon");
-        calculate_sub_total();
-        autoScrollToItem(code)
-
-      }
-      return
-
-    } else {
-      count = 0
-      for (var i in $(this).data('instances')) {
-        if(!$(this).data('instances')[i].out_of_stock) {
-          count += 1;
-        }
-      }
-
-      if (count === 1) {
+    if (window.location.pathname.includes('out_of_stock') == false) {
+      
+      if($(this).hasClass('product_item')) {
         $('.sx_item_detailModal').modal('hide');
 
         var item_data = $(this);
@@ -619,16 +577,61 @@ $(function() {
         show_item_detail(item_data,"add_icon");
         calculate_sub_total();
         autoScrollToItem(code)
+
         return
       }
 
-      attributes         = $(this).data('id');
-      selected_item      = $(this).data('attributes');
-      instances          = $(this).data('instances');
-      item_options       = $(this).data('options');
-      data               = $(this)
+      if ($(this).data('instances').length == 1) {
 
-      show_attribute_selection_modal(attributes, selected_item, instances, item_options, data)
+        $('.sx_item_detailModal').modal('hide');
+
+        if ($(this).data('instances')[0].out_of_stock == false ) {
+          var item_data = $(this);
+          code = $(this).data('instance-code');
+
+          if ($('#server_mode').val() != "cloud" && second_display_lookup == 2) {
+            item = get_item(item_data,"add_icon");
+            customer_display_view(item,"add");
+          }
+          show_item_detail(item_data,"add_icon");
+          calculate_sub_total();
+          autoScrollToItem(code)
+
+        }
+        return
+
+      } else {
+        count = 0
+        for (var i in $(this).data('instances')) {
+          if(!$(this).data('instances')[i].out_of_stock) {
+            count += 1;
+          }
+        }
+
+        if (count === 1) {
+          $('.sx_item_detailModal').modal('hide');
+
+          var item_data = $(this);
+          code = $(this).data('instance-code');
+
+          if ($('#server_mode').val() != "cloud" && second_display_lookup == 2) {
+            item = get_item(item_data,"add_icon");
+            customer_display_view(item,"add");
+          }
+          show_item_detail(item_data,"add_icon");
+          calculate_sub_total();
+          autoScrollToItem(code)
+          return
+        }
+
+        attributes         = $(this).data('id');
+        selected_item      = $(this).data('attributes');
+        instances          = $(this).data('instances');
+        item_options       = $(this).data('options');
+        data               = $(this)
+
+        show_attribute_selection_modal(attributes, selected_item, instances, item_options, data)
+      }
     }
   }); //End Add Icon Click
 
@@ -1082,9 +1085,45 @@ $(function() {
 
   // Create Order
   $("#create_order").on('click', function(e){
-
-    $(this).attr('disabled', 'disabled');
     e.preventDefault();
+    name_list = ''
+    count = 0;
+    $('.summary-items').find(`tr[data-oos='true']`).each(function() {
+      count += 1;
+      name = $(this).data('name')
+      name += $(this).data('instance').replace(/['"]+/g, '')
+      if ((count + 1) == $('.summary-items').find(`tr[data-oos='true']`).length) {
+        name += ' and '
+      } else if(count != $('.summary-items').find(`tr[data-oos='true']`).length){
+        name += ', '
+      }
+      name_list += name
+    });
+    wanring_text = name_list + 'are out of stock.'
+    if (name_list) {
+
+      swal({
+        title: "Out Of Stock Warning!",
+        text: wanring_text,
+        type: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "Confrim",
+        closeOnConfirm: false
+        }, function (isConfirm) {
+          if (isConfirm) {
+            create_order($(this))
+          }
+      });
+
+
+    } else {
+      create_order($(this))
+    }
+  });
+
+  function create_order(data) {
+    data.attr('disabled', 'disabled');
     $("#oqs_loading_wrapper").show();
     var cashier_type = $("#link_type").val();
     localStorage.setItem('cashier_type',cashier_type);
@@ -1121,36 +1160,29 @@ $(function() {
                   'order_items': order_items,'create_type' : "create_only" };
     }
 
-      // if (table_id.length>0 || role == 'waiter') {
-        $.ajax({
-          type: "POST",
-          url: ajax_url,
-          data: params,
-          dataType: "json",
-           success:function(result){
-              if (type == "quick_service" || type=="food_court") {
-                module_name = window.location.href.includes('foodcourt') ? 'foodcourt' : 'origami'
-                window.location.href = "/"+module_name+"/"+type;
-              }else{
-                if(table_type == "Table"){
-                   window.location.href = "/origami/table/" + table_id;
-                }
-                else {
-                   window.location.href = "/origami/room/" + table_id;
-                }
-              }
-              if ($('#server_mode').val() != "cloud" && second_display_lookup == 2){
-                customer_display_view(null,"reload");
-              }
-           }
-        });
-      // }else{
-      //   $(this).removeAttr('disabled', '');
-      //   $("#oqs_loading_wrapper").hide();
-
-      //   swal("Opps","Please Select Table or Room","warning");
-      // }
-  });
+    $.ajax({
+      type: "POST",
+      url: ajax_url,
+      data: params,
+      dataType: "json",
+       success:function(result){
+          if (type == "quick_service" || type=="food_court") {
+            module_name = window.location.href.includes('foodcourt') ? 'foodcourt' : 'origami'
+            window.location.href = "/"+module_name+"/"+type;
+          }else{
+            if(table_type == "Table"){
+               window.location.href = "/origami/table/" + table_id;
+            }
+            else {
+               window.location.href = "/origami/room/" + table_id;
+            }
+          }
+          if ($('#server_mode').val() != "cloud" && second_display_lookup == 2){
+            customer_display_view(null,"reload");
+          }
+       }
+    });
+  }
 
 
   // Pay Discount for Payment
@@ -1685,7 +1717,12 @@ $(function() {
                   data_target = 'sx_item_set_detailModal';
                   data_modal = 'modal'
                   add_icon = "set_item_box"
-                     code            =  menu_items[field].code;
+                  code = ''
+                    menu_items[field].instances.forEach(ins => function (){
+                      if (ins.out_of_stock == false) {
+                        code =  ins.code;
+                      }
+                    })
                      name            =  menu_items[field].name;
                      instances       =  menu_items[field].instances;
                       $(instances).each(function(i){
@@ -1709,8 +1746,18 @@ $(function() {
                   add_icon = "add_icon"
                   menu_instances = [];
 
+                  code = '';
+                  name = '';
+                  price = '';
+                  is_available = '';
+                  is_on_promotion = '';
+                  item_attributes = '';
+                  promotion_price = '';
+                  out_of_stock = '';
+                  menu_insta = '';
+
                   $(instances).each(function(i){
-                    if (instances[i].is_default === true && !instances[i].out_of_stock) {
+                    if (!instances[i].out_of_stock) { //instances[i].is_default === true && 
                      code            = instances[i].code;
                      name            = instances[i].name;
                      price           = parseFloat(instances[i].price).toFixed(2);
@@ -1718,13 +1765,10 @@ $(function() {
                      is_on_promotion = instances[i].is_on_promotion;
                      item_attributes = instances[i].values;
                      promotion_price = instances[i].promotion_price;
-                     code            = instances[i].code;
                      out_of_stock    = instances[i].out_of_stock;
                      menu_insta      = [code,name,item_attributes];
-                   }
-                   if(instances[i].out_of_stock === false){
                      menu_instances.push(menu_insta);
-                   }
+                    }
                   });
                 }
 
@@ -1745,9 +1789,9 @@ $(function() {
                 })
 
                 if (status) {
-                  price_tag = '<span class="text-danger" style="font-weight:900;flex-grow:1;">'+status+'</span>'
+                  price_tag = '<span class="text-danger price_tag" style="font-weight:900;flex-grow:1;">'+status+'</span>'
                 } else {
-                  price_tag ='<span style="font-weight:900;flex-grow:1;">'+price+'</span>'
+                  price_tag ='<span class="price_tag" style="font-weight:900;flex-grow:1;">'+price+'</span>'
                 }
 
                 image_path = '';
diff --git a/app/assets/javascripts/channels/out_of_stock.js b/app/assets/javascripts/channels/out_of_stock.js
index 54ff24af..bc02d24b 100644
--- a/app/assets/javascripts/channels/out_of_stock.js
+++ b/app/assets/javascripts/channels/out_of_stock.js
@@ -5,13 +5,10 @@ App.checkin = App.cable.subscriptions.create('OutOfStockChannel', {
   disconnected: function() {},
 
   received: function(data) {
-    if (data && data.item_instance_code) {
-      console.log("out of stock channel!!!!");
-      item_code = data.item_instance_code;
-      item_code_id = '#' + data.item_instance_code;
-      oos_id = '#oos' + data.item_instance_code;
-      head_oos = 'head' + data.item_instance_code;
-      rm_oos = '.' + head_oos;
+    if (data && data.item_code) {
+      item_code = data.item_code
+      item_instance_code = data.item_instance_code;
+      item_instance_code_id = '#' + item_instance_code;
       menus = localStorage.getItem('menus');
 
       if (menus) {
@@ -20,23 +17,119 @@ App.checkin = App.cable.subscriptions.create('OutOfStockChannel', {
           m.categories.forEach(c => {
             c.items.forEach(i => {
               i.instances.forEach(instance => {
-                if (instance.code == item_code) {
-                  if (data.status == true) {
-                    instance.out_of_stock = true;
-                    oos_header = '<div class="'+head_oos+'" style="position: absolute;z-index: 5;top: 0;left: 0;right: 0;text-align: center;background: #fb483a;margin: auto;color: #fff;padding: 8px;font-weight: bolder;">OUT OF STOCK</div>';
-                    $(item_code_id).css({"height": "100%", "pointer-events": "none", "opacity": "0.4"});
-                    $(oos_header).insertBefore($(oos_id));
+
+                if (instance.code == item_instance_code) {
+                  
+                  card_header = $('.menu_items_list').find(`[data-item-code='${item_code}']`).first();
+                  card_footer = $(card_header).parent('.card').find('.card-footer');
+                  price_tag = $(card_footer).find('.price_tag')
+                  item_box  = $(card_footer).find('.menu_item_box')
+
+                  instance_list = $('.menu_items_list').find(`[data-item-code='${item_code}']`).data('instances')
+                  
+                  if (instance_list.length == 1) {
+
+                    if (data.status == true) {
+                      instance.out_of_stock = true;
+
+                      $(card_header).css({"pointer-events": "none", "opacity": "0.4"});
+                      $(item_box).css({"pointer-events": "none", "opacity": "0.4"});
+
+                      $(price_tag).empty().addClass('text-danger').text('out of stock')
+
+                    } else {
+                      instance.out_of_stock = false;
+
+                      $(card_header).css({"pointer-events": "auto", "opacity": ""});
+                      $(item_box).css({"pointer-events": "auto", "opacity": ""});
+
+                      price = $(card_header).data('price')
+                      $(price_tag).removeClass('text-danger').empty().text(price)
+                      
+                    }
                   } else {
-                    instance.out_of_stock = false;
-                    $(item_code_id).css({"height": "", "pointer-events": "", "opacity": ""});
-                    $(rm_oos).remove();
+                    if (data.status == true) {
+                      instance.out_of_stock = true;
+
+                      oos_count = 0
+                      data_instance_code = $(card_header).data('instance-code')
+                      instance_list.forEach(i => {
+                        if (i.code == item_instance_code) {
+                          i.out_of_stock = true
+                          name = $('.menu_items_list').find(`[data-item-code='${item_code}']`).data('name')
+                          $('.summary-items').find(`tr[data-instance-code='${item_instance_code}']`).attr({'data-oos': true, 'data-name': name});
+                        }
+                        if (i.out_of_stock == true) {
+                          oos_count += 1
+                        }
+                        if (data_instance_code == item_instance_code) {
+                          console.log('Equal');
+                          if (i.out_of_stock == false) {
+                            code = i.code
+                            price = parseFloat(i.price).toFixed(2);
+                            name = i.name
+                            item_attributes = i.values
+                            promotion_price = i.promotion_price
+                            $(card_header).removeAttr('data-price', 'data-instance-code', 'data-promotion-price', 'data-attributes', 'data-instance')
+                            $(card_header).attr({'data-price': price, 
+                                                'data-instance-code': code,
+                                                'data-promotion-price': promotion_price,
+                                                'data-attributes': JSON.stringify(item_attributes),
+                                                'data-instance': name
+                                              })
+
+                            $(card_footer).find('.menu_item_box').removeAttr('data-item').attr('data-item', JSON.stringify(item_attributes))
+                            $(price_tag).removeClass('text-danger').empty().text(price)
+                          }
+                        }
+                      });
+
+                      if (oos_count == instance_list.length) {
+                        $(card_header).css({"pointer-events": "none", "opacity": "0.4"});
+                        $(item_box).css({"pointer-events": "none", "opacity": "0.4"});
+                        $(price_tag).empty().addClass('text-danger').text('out of stock')
+                      }
+
+                    } else { // status == false
+                      instance.out_of_stock = false;
+
+                      instance_list.forEach(i => {
+                        if (i.code == item_instance_code) {
+                          i.out_of_stock = false
+                          code = i.code
+                          price = parseFloat(i.price).toFixed(2);
+                          name = i.name
+                          item_attributes = i.values
+                          promotion_price = i.promotion_price
+                        }
+                      })
+                      
+                      $(card_header).removeAttr('data-price', 'data-instance-code', 'data-promotion-price', 'data-attributes', 'data-instance')
+                      $(card_header).attr({'data-price': price, 
+                                          'data-instance-code': code,
+                                          'data-promotion-price': promotion_price,
+                                          'data-attributes': JSON.stringify(item_attributes),
+                                          'data-instance': name
+                                        })
+
+                      $(card_footer).find('.menu_item_box').removeAttr('data-item').attr('data-item', JSON.stringify(item_attributes))
+
+                      $(card_header).css({"pointer-events": "auto", "opacity": ""});
+                      $(item_box).css({"pointer-events": "auto", "opacity": ""});
+
+                      $(price_tag).removeClass('text-danger').empty().text(price)
+
+                    }
+
+                    // update data-attribute
+                    $(card_header).removeData('instances').attr('data-instances', JSON.stringify(instance_list));
+                    $(card_footer).find('.menu_item_box').removeData('instance').attr('data-instance', JSON.stringify(instance_list));
                   }
                 }
               })
             })
           })
         });
-
         localStorage.setItem('menus', JSON.stringify(menus));
       }
     }
diff --git a/app/controllers/settings/out_of_stock_controller.rb b/app/controllers/settings/out_of_stock_controller.rb
index 2f76bb97..867d5ba0 100644
--- a/app/controllers/settings/out_of_stock_controller.rb
+++ b/app/controllers/settings/out_of_stock_controller.rb
@@ -26,8 +26,9 @@ class Settings::OutOfStockController < ApplicationController
       if !item_instance.first.is_out_of_stock?
         item_instance.update(is_out_of_stock: true)
         items_arr.each do |i|
+          item_code = MenuItemInstance.find_by(item_instance_code: i).menu_item.item_code
           # OutOfStock.create_out_of_stock(date,i)
-          ActionCable.server.broadcast "out_of_stock_channel", item_instance_code: i, status: true
+          ActionCable.server.broadcast "out_of_stock_channel", item_code: item_code, item_instance_code: i, status: true
         end
       elsif item_instance.first.is_out_of_stock?
         item_instance.update(is_out_of_stock: false)
@@ -42,8 +43,9 @@ class Settings::OutOfStockController < ApplicationController
     item_instance = MenuItemInstance.find_by_id(params[:id])
     unless item_instance.nil?
       item_instance.update(is_out_of_stock: false)
-      ActionCable.server.broadcast "out_of_stock_channel", item_instance_code: item_instance.item_instance_code, status: false
-      # OutOfStock.where(item_instance_code: item_instance.item_instance_code, created_at: Time.zone.now.beginning_of_day..Time.zone.now.end_of_day).destroy_all
+      
+      item_code = item_instance.menu_item.item_code
+      ActionCable.server.broadcast "out_of_stock_channel", item_code: item_code, item_instance_code: item_instance.item_instance_code, status: false
       flash[:message] = 'Out of stock was successfully destroyed.'
       render :json => {:status=> "Success", :url => settings_out_of_stock_index_url }.to_json
     end
@@ -54,8 +56,8 @@ class Settings::OutOfStockController < ApplicationController
     unless item_instance.nil?
       item_instance.update(is_out_of_stock: false)
       item_instance.each do |i|
-        ActionCable.server.broadcast "out_of_stock_channel", item_instance_code: i.item_instance_code, status: false
-        # OutOfStock.where(item_instance_code: i.item_instance_code, created_at: Time.zone.now.beginning_of_day..Time.zone.now.end_of_day).destroy_all
+        item_code = i.menu_item.item_code
+        ActionCable.server.broadcast "out_of_stock_channel", item_code: item_code, item_instance_code: i.item_instance_code, status: false
       end
       flash[:message] = 'Out of stock was successfully destroyed.'
       render :json => {:status=> "Success", :url => settings_out_of_stock_index_url }.to_json
diff --git a/app/views/foodcourt/addorders/detail.html.erb b/app/views/foodcourt/addorders/detail.html.erb
index d0e084af..346029e1 100644
--- a/app/views/foodcourt/addorders/detail.html.erb
+++ b/app/views/foodcourt/addorders/detail.html.erb
@@ -108,7 +108,7 @@
  </div>
 
 
- <div class="col-md-7 col-lg-7 col-sm-7 m-t-10 d-flex flex-column h-100" style="margin-left: -10px;
+ <div class="col-md-7 col-lg-7 col-sm-7 m-t-10 d-flex flex-column h-100" id="menu-item-list" style="margin-left: -10px;
     margin-right: -10px;">
   <div class="card h-100" style="margin-bottom: 10px;">
     <div class="card-block d-flex flex-column h-100" style="">
diff --git a/app/views/settings/out_of_stock/_form.html.erb b/app/views/settings/out_of_stock/_form.html.erb
index d1fe37af..fbfa9d71 100644
--- a/app/views/settings/out_of_stock/_form.html.erb
+++ b/app/views/settings/out_of_stock/_form.html.erb
@@ -1,11 +1,11 @@
 <%= stylesheet_link_tag    'addorder', media: 'all', 'data-turbolinks-track': 'reload' %>
 <%= javascript_include_tag 'addorder', 'data-turbolinks-track': 'reload' %>
-  <div class="container-fluid " style="padding:0px 3px 0px 3px;">
+  <div class="container-fluid h-100" style="padding:0px 3px 0px 3px;">
     <div id="oqs_loading_wrapper" style="display:none;">
       <div id="oqs_loading"></div>
     </div>
-    <div class="row m-t--20">
-      <div class="col-lg-2 col-md-2 col-sm-2 hidden" id="menu_data">
+    <div class="row m-t--25 h-100">
+      <div class="col-lg-2 col-md-2 col-sm-2 hidden d-flex flex-column h-100" id="menu_data">
         <li class="list-menu">
           <a href="javascript:void(0);" class="menu-toggle dropdown-toggle toggled my-toggle " style="">
 
@@ -23,7 +23,7 @@
            <%end%>
          </ul>
         </li>
-        <div id="menu1-slimscroll" data-height="0">
+        <div id="menu1-slimscroll" class="flex-grow-1" data-height="0">
           <ul class="nav nav-tabs flex-column category_list" role="tablist" id="ul-navbar">
             <li class="nav-item product" data-ref="<%= origami_get_all_product_path %>">
               <a class="nav-link" data-toggle="tab" href="" role="tab">Products</a>
@@ -46,26 +46,30 @@
           </ul>
         </div>
       </div>
-      <div class="col-lg-2 col-md-2 col-sm-2 hidden" id="menu_cache">
-        <li class="list-menu">
-          <a href="javascript:void(0);" class="menu-toggle dropdown-toggle toggled my-toggle " style="">
-            <span class="main_menu menu_cache_name" id="main_menu menu_cache_name"></span>
-          </a>
-          <ul class="ml-menu menu_list aria-hidden menu_cache_list" style="border-top: 1px solid #fff">
-          </ul>
-        </li>
-        <div id="menu-slimscroll" data-height="0">
-          <ul class="nav nav-tabs flex-column category_list category_cache_list" role="tablist" id="ul-navbar">
-            <li class="nav-item product" data-ref="<%= origami_get_all_product_path %>">
-             <a class="nav-link" data-toggle="tab" href="" role="tab">Products</a>
+      <div class="col-lg-2 col-md-2 col-sm-2 h-100  d-flex flex-column hidden" id="menu_cache">
+        <div class="card h-100" style="margin-bottom: 10px;">
+          <div class="card-header">
+            <li class="list-menu" style="background-color: #fff;">
+              <a href="javascript:void(0);" class="menu-toggle dropdown-toggle toggled my-toggle " style="">
+                <span class="main_menu menu_cache_name" id="main_menu menu_cache_name"></span>
+              </a>
+              <ul class="ml-menu menu_list aria-hidden menu_cache_list" style="border-top: 1px solid #fff">
+              </ul>
             </li>
-          </ul>
+          </div>
+          <div class="card-block d-flex flex-column h-100">
+            <div id="foodcourt-slimscroll" class="h-100">
+              <ul class="nav nav-tabs flex-column category_list category_cache_list" role="tablist" id="ul-navbar">
+                
+              </ul>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="col-md-7 col-lg-7 col-sm-7 m-t-10" >
-        <div class="card">
-          <div class="card-block" style="">
-            <div class="card-text" id="custom-slimscroll">
+      <div class="col-md-7 col-lg-7 col-sm-7 h-100 d-flex flex-column">
+        <div class="card h-100" style="margin-bottom: 10px;">
+          <div class="card-block flex-column d-flex h-100" style="">
+            <div class="card-text h-100" id="foodcourt-menu-slimscroll">
               <div class="row menu_items_list" style="margin:0px 1px 0px 1px ;">
              <!-- append data -->
               </div>
@@ -73,38 +77,40 @@
           </div>
         </div>
       </div>
-      <div class="col-lg-3 col-md-3 col-sm-3 item-wrapper" >
-        <button type="button" class="btn btn-lg btn-block btn-default waves-effect m-t-5" id='back' style="width: 75%;">
-          <i class="material-icons">reply</i>Back
-        </button>
-        <button type="button" class="btn btn-xs btn-danger waves-effect" id='clear_all' style="width: 23%; padding: 10px; margin-top: 5px;">Clear</button>
+      <div class="col-lg-3 col-md-3 col-sm-3 h-100 d-flex flex-column item-wrapper" >
+        <div class="card h-100" style="margin-bottom: 10px;">
+          <div class="card-header">
+            <button type="button" class="btn btn-lg btn-block btn-default waves-effect m-t-5" id='back' style="width: 75%;">
+              <i class="material-icons">reply</i>Back
+            </button>
+            <button type="button" class="btn btn-xs btn-danger waves-effect" id='clear_all' style="width: 23%; padding: 10px; margin-top: 5px;">  Clear</button>
+          </div>
 
-        <div class="card-block">
-          <div class="card-text" id="order-detail-slimscroll" data-height="140">
-           <table class="table table-striped summary-items" id="order-items-table" >
-              <thead>
-               <tr>
-                 <th>#</th>
-                 <th class="item-name">Items</th>
-                 <!-- <th class="item-qty">Min Qty</th>
-                 <th class="item-attr">Max Qty</th> -->
-                 <th></th>
-               </tr>
-              </thead>
-              <tbody class="font-13" >
+          <div class="card-block d-flex flex-column h-100">
+            <div class="card-text h-100" id="foodcourt-order-slimscroll">
+             <table class="table table-striped summary-items" id="order-items-table" >
+                <thead>
+                 <tr>
+                   <th>#</th>
+                   <th class="item-name">Items</th>
+                   <th class="item-qty">Action</th>
+                 </tr>
+                </thead>
+                <tbody class="font-13" >
 
-              </tbody>
-            </table>
+                </tbody>
+              </table>
+            </div>
+            <div class="card-footer" style="padding: 0.2rem 1rem 0 1rem !important;">
+              <button type="button" class="btn btn-lg btn-block btn-primary waves-effect m-t-5" id='add_out_of_stock' disabled="disabled">
+                Add Out Of Stock
+              </button>
+            </div>
           </div>
         </div>
-        <div class="card-footer">
-          <button type="button" class="btn btn-lg btn-block btn-primary waves-effect m-t-5" id='add_out_of_stock' disabled="disabled">
-            Add Out Of Stock
-          </button>
-        </div>
-     </div>
       </div>
     </div>
+  </div>
 
     <div class="item-modal modal sx_item_detailModal" id="sx_item_detailModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
       <div class="modal-dialog custom-modal-dialog modal-lg">
@@ -140,7 +146,7 @@
               <div class="col-md-4">
                 <button type="button" class="btn btn-default " data-dismiss="modal" id="close">Close</button>
               </div>
-              <div class="col-md-6">
+              <div class="col-md-6 m-l-5">
                 <button type="button" class="btn btn-primary submit " data-dismiss="modal" id="submit">Submit</button>
               </div>
             </div>
@@ -148,6 +154,7 @@
         </div>
       </div>
     </div>
+
 <style type="text/css">
   .fadeInRight{
   -webkit-animation-duration: 350ms !important;
@@ -475,7 +482,6 @@
                   }
 
                   if (out_of_stock === true) {
-                    // oos_item = out_of_stock_item
                     oos_item = '<div class="card custom-card testimonial-card fadeInRight card-box"'
                        +'data-toggle="modal" data-target=".'+data_target+'" '
                        +'style="height:100%;background-image:url(../../'+image_path+');background-repeat: no-repeat; pointer-events: none;opacity: 0.4;">'
@@ -527,11 +533,59 @@
           }
        }
 
-      $(document).on('click', '.menu_item_box, .add_icon', function(event){
-        if($(this).hasClass('add_icon')) {
-          var item_data = $(this);
-          console.log(item_data);
-          // show_item_detail(item_data,"add_to_order");
+      $(document).on('click', '.menu_item_box, .add_icon, .set_item_box', function(event){
+        if($(this).hasClass('product_item')) {
+          $('.sx_item_detailModal').modal('hide');
+
+          instance_code = $(this).data('instance-code')
+          instance_name = $(this).data('instance')
+          data = [{id: instance_code, text: instance_name}]
+
+          attribute_arr = get_selected_attributes('selected-attribute');
+          option_arr    = get_selected_attributes('selected-option');
+
+          $(this).attr('data-item-code',$('#item_code').text());
+          $(this).attr('data-instance-arr',JSON.stringify(data));
+          $(this).attr('data-name',$(this).data('name'));
+          $(this).attr('data-attributes',JSON.stringify(attribute_arr));
+          $(this).attr('data-options',JSON.stringify(option_arr));
+          $(this).attr('data-opt',JSON.stringify(option_arr));
+
+          show_item_detail($(this));
+          // autoScrollToItem(instance_code)
+
+          return
+        }
+        if($(this).hasClass('add_icon') || $(this).hasClass('set_item_box')) {
+
+          if ($(this).data('instances').length == 1) {
+            $('.sx_item_detailModal').modal('hide')
+
+            attribute_arr = get_selected_attributes('selected-attribute');
+            option_arr    = get_selected_attributes('selected-option');
+
+            instance_code = $(this).data('instance-code')
+            instance_name = $(this).data('instance')
+            data = [{id: instance_code, text: instance_name}]
+
+            $(this).attr('data-item-code',$('#item_code').text());
+            $(this).attr('data-instance-arr',JSON.stringify(data));
+            $(this).attr('data-name',$(this).data('name'));
+            $(this).attr('data-attributes',JSON.stringify(attribute_arr));
+            $(this).attr('data-options',JSON.stringify(option_arr));
+            $(this).attr('data-opt',JSON.stringify(option_arr));
+
+            code = $(this).data('instance-code');
+
+            show_item_detail($(this))
+            autoScrollToItem(code)
+
+            return
+
+          } else {
+            var item_data = $(this);
+            console.log(item_data);  
+          }
         }
         var instances  = $(this).data('menu-instances');
         var item_row = $('.summary-items tbody tr');
@@ -729,6 +783,8 @@
         option_arr    = get_selected_attributes('selected-option');
 
         data = $("#instance_select").select2('data');
+        console.log('data');
+        console.log(data);
         if (data != null){
           instance_code = data[0].id;
           instance_name = data[0].text;
@@ -743,10 +799,10 @@
         $('.submit').attr('data-opt',JSON.stringify(option_arr));
         var item_data = $(this);
         console.log(item_data);
-        show_item_detail(item_data,"add_to_order");
+        show_item_detail(item_data);
       });
 
-      function show_item_detail(data,click_type){
+      function show_item_detail(data){
         testqty = parseInt($('.item_box').children('data_qty').text());
         qty           = parseInt(data.attr('data-qty'));
         append        = 0;
diff --git a/app/views/settings/out_of_stock/index.html.erb b/app/views/settings/out_of_stock/index.html.erb
index 4caf28de..ab51a4c4 100644
--- a/app/views/settings/out_of_stock/index.html.erb
+++ b/app/views/settings/out_of_stock/index.html.erb
@@ -1,33 +1,39 @@
-<% breadcrumb_add t('out_of_stock'), "", dashboard_path %>
+<div class="container-fluid d-flex flex-column h-100" style="padding:0px 3px 0px 3px;">
+  <% breadcrumb_add t('out_of_stock'), "", dashboard_path %>
+  <div class="row flex-grow-1">
+    <div class="col-sm-12 col-xs-12 d-flex flex-column h-100">
+      <div class="card h-100">
+        <div class="card-header">
+          <div class="row ">
+            <div class="col-lg-4 col-md-4 col-sm-4" style="padding-left: 17px;">
+              <%= form_tag inventory_path, :id => "filter_form", :method => :get do %>
+              <input type="text" class="form-control" name="filter" id="Product" type="text" placeholder="Product" style="height: 32px;">
+            </div>
 
-<div class="row ">
-  <div class="col-lg-4 col-md-4 col-sm-4" style="padding-left: 17px;">
-    <%= form_tag inventory_path, :id => "filter_form", :method => :get do %>
-    <input type="text" class="form-control" name="filter" id="Product" type="text" placeholder="Product" style="height: 32px;">
-  </div>
+            <div class="col-lg-2 col-md-2 col-sm-2 text-">
+              <input type="submit" value="Filter" class='btn btn-primary'>
+            </div>
+              <% end %>
 
-  <div class="col-lg-2 col-md-2 col-sm-2 text-">
-    <input type="submit" value="Filter" class='btn btn-primary'>
-  </div>
-    <% end %>
+            <div class="col-lg-6 col-md-6 col-sm-6" style="padding-right: 15px;">
+              <button type="button" id="reset_all" class="delete btn btn-danger btn-sm float-right waves-effect" style='margin-left:5px;' data-ref="<%= settings_reset_all_path %>" data-method="delete">
+                <%= t("views.btn.reset_all") %>
+              </button>
+              <button id='new_out_of_stock' class='btn btn-primary float-right waves-effect' style='margin-left:5px;'><%= (t :new_out_of_stock) +"  " %> <%= t("views.right_panel.detail.item") %></button>
+            </div>
+          </div>
+        </div>
 
-  <div class="col-lg-6 col-md-6 col-sm-6" style="padding-right: 15px;">
-    <button type="button" id="reset_all" class="delete btn btn-danger btn-sm float-right waves-effect" style='margin-left:5px;' data-ref="<%= settings_reset_all_path %>" data-method="delete">
-      <%= t("views.btn.reset_all") %>
-    </button>
-    <button id='new_out_of_stock' class='btn btn-primary float-right waves-effect' style='margin-left:5px;'><%= (t :new_out_of_stock) +"  " %> <%= t("views.right_panel.detail.item") %></button>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-    <div class="card">
-      <%= render 'out_of_stock_list' %>
+        <div class="card-block d-flex flex-column h-100">
+          <div class="card-text h-100" id="foodcourt-slimscroll">
+            <%= render 'out_of_stock_list' %> 
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
 
-
 <script>
 
   $(document).ready(function (){