diff --git a/app/assets/javascripts/addorder.js b/app/assets/javascripts/addorder.js
index e26374c0..2a042828 100755
--- a/app/assets/javascripts/addorder.js
+++ b/app/assets/javascripts/addorder.js
@@ -1619,7 +1619,7 @@ $(function() {
                   }
                   row = '<div class="col-md-6 col-sm-6 col-lg-3 m-t-2">'
                             + oos_item + oos_header
-                                      +'<div class="custom-card-head card-head row" style="margin:0px; height: auto; font-size: 0.9em;" >'
+                                      +'<div class="custom-card-head card-head row" style="margin:0px; height: auto; font-size: 0.9em; opacity: '+opacity+'" >'
                                         +'<div class="col-md-10 " style="padding:0px !important;">'+ menu_items[field].name +'</div>'
 
                                        +'</div>'
@@ -1639,7 +1639,7 @@ $(function() {
                                                     +" data-target='."+data_target+"' "
                                                     +" data-item-sets = '"+JSON.stringify(menu_items[field].item_sets)+""
                                                     +" 'data-instances = '"+JSON.stringify(menu_items[field].instances)+"'>"
-                                          + '<img src = "../../'+image_path+'" class="img-fluid" />'
+                                          + '<img src = "../../'+image_path+'" class="img-fluid" style="opacity: '+opacity+'"/>'
                                         +'</div>'
                                         +'<div class="card-footer custom-card-footer custom-flex-footer">'
                                           +'<span style="font-weight:900;flex-grow:1;">'+ price +'</span>'
@@ -1666,13 +1666,15 @@ $(function() {
                                 // oos_item = out_of_stock_item
                                 oos_item = '<div class="card custom-card testimonial-card fadeInRight" id="'+ code +'" style="height:100%; pointer-events: none;">'
                                 oos_header = '<div class="head'+code+'" style="position: absolute;z-index: 5;bottom: 0;left: 0;right: 0;text-align: center;background: #fb483a;margin: auto;color: #fff;padding: 8px;font-weight: bolder;">OUT OF STOCK</div>'
+                                opacity = 0.5
                               }else{
                                 oos_item = '<div class="card custom-card testimonial-card fadeInRight" id="'+ code +'" style="height:100%;">'
                                 oos_header = ''
+                                opacity = ''
                               }
                                   row = '<div class="col-md-6 col-sm-6 col-lg-3 m-t-2">'
                                           + oos_item + oos_header
-                                              +'<div class="custom-card-no-img-head card-head h-100 '+add_icon+' " id="oos'+ code +'" style="margin:0px;display:flex;!important "'
+                                              +'<div class="custom-card-no-img-head card-head h-100 '+add_icon+' " id="oos'+ code +'" style="margin:0px;display:flex; opacity: '+opacity+';"'
                                                     +" data-item-code='"+ menu_items[field].code +"' "
                                                     +" data-name='" + menu_items[field].name +"' "
                                                     +" data-qty = '"+ qty +"' "
diff --git a/app/views/foodcourt/addorders/detail.html.erb b/app/views/foodcourt/addorders/detail.html.erb
index f94bd073..ddd1ee9d 100644
--- a/app/views/foodcourt/addorders/detail.html.erb
+++ b/app/views/foodcourt/addorders/detail.html.erb
@@ -176,8 +176,15 @@
               </div>
 
               <div class="card-block d-flex flex-column h-100">
-                <div class="table-responsive">
-                  <table class="table" id="append-table">
+                <!-- <div class="table-responsive">
+                  <table class="table m-b-0" id="append-table">
+                    <thead>
+                      
+                    </thead>
+                  </table>
+                </div> -->
+                <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>
@@ -186,10 +193,6 @@
                         <th class="text-nowrap text-right">Price</th>
                       </tr>
                     </thead>
-                  </table>
-                </div>
-                <div class="card-text h-100" id="foodcourt-order-slimscroll">
-                  <table class="table table-striped summary-items fixed-header" id="order-items-table" >
                     <tbody class="font-13" >
 
                     </tbody>