diff --git a/app/assets/javascripts/addorder.js b/app/assets/javascripts/addorder.js
index b9219c52..54b1c7b6 100644
--- a/app/assets/javascripts/addorder.js
+++ b/app/assets/javascripts/addorder.js
@@ -30,61 +30,132 @@ $(function(){
         menu_items = data.menu_items;
 
         for(var field in menu_items) {  
-          instances = menu_items[field].instances ;
-          $(instances).each(function(i){
-            if (instances[i].is_default === true) {
-             code            = instances[i].code;
-             name            = instances[i].name;
-             price           = parseFloat(instances[i].price).toFixed(2);
-             is_available    = instances[i].is_available ;
-             is_on_promotion = instances[i].is_on_promotion;
-             item_attributes = instances[i].values;
-             promotion_price = instances[i].promotion_price;
-             code            = instances[i].code;
-           }
-         }); 
+          if (menu_items[field].is_sub_item == false) {
+            instances = menu_items[field].instances ;
+            $(instances).each(function(i){
+              if (instances[i].is_default === true) {
+               code            = instances[i].code;
+               name            = instances[i].name;
+               price           = parseFloat(instances[i].price).toFixed(2);
+               is_available    = instances[i].is_available ;
+               is_on_promotion = instances[i].is_on_promotion;
+               item_attributes = instances[i].values;
+               promotion_price = instances[i].promotion_price;
+               code            = instances[i].code;
+             }
+            }); 
+            
+            qty = 1;
+            options = [];
 
-          qty = 1;
-          options = [];
+            if (JSON.stringify(menu_items[field].item_sets)!='[]') {
+              fa_plus = '';
+              menu_item_box = 'set_item_box';
+              data_target = 'sx_item_set_detailModal';
+            }else{
+              fa_plus = 'fa-plus';
+              menu_item_box = 'menu_item_box';
+              data_target = 'sx_item_detailModal'
+            }
 
-          row = '<div class="card">'
-          +'<div class="card-head" style="line-height:14px;">'
-          +'<small class="col-md-9">'+ menu_items[field].name +'</small>'
-          +"<div class='col-md-3 add_icon' data-item-code='"+ menu_items[field].code +"' data-name='"
-          + menu_items[field].name +"' data-qty = '"+ qty +"' data-price = '"
-          + price +"' data-instance-code = '"+ code +"' data-instance = '"
-          + name +"' data-promotion-price = '"+ promotion_price +"' data-attributes = '"
-          + JSON.stringify(item_attributes) +"' data-options = '"
-          + options +"'>"
-          +'<i class="fa fa-plus "'
-          + 'style="margin-top:4px;">'
-          +'</i></div>'
-          +'</div>'
+            row = '<div class="card">'
+            +'<div class="card-head" style="line-height:14px;">'
+            +'<small class="col-md-9">'+ menu_items[field].name +'</small>'
+            +"<div class='col-md-3 add_icon' data-item-code='"
+              + menu_items[field].code +"' data-name='"
+              + menu_items[field].name +"' data-qty = '"+ qty +"' data-price = '"
+              + price +"' data-instance-code = '"+ code +"' data-instance = '"
+              + name +"' data-promotion-price = '"+ promotion_price +"' data-attributes = '"
+              + JSON.stringify(item_attributes) +"' data-options = '"
+              + options +"'>"
+            +"<i class='fa "+fa_plus+" '"
+            + 'style="margin-top:4px;">'
+            +'</i></div>'
+            +'</div>'
 
-          +"<div class='menu_item_box' data-item-code='"
-          + menu_items[field].code +"' data-instance = '"
-          +JSON.stringify(menu_items[field].instances)+"' data-id = '"
-          +JSON.stringify(menu_items[field].attributes)+"' data-item = '"
-          +JSON.stringify(item_attributes)+"' data-option = '"
-          +JSON.stringify(menu_items[field].options)+"' data-toggle='modal' data-target='.sx_item_detailModal'>"
+            +"<div class='"+menu_item_box+"'  data-item-code='"
+              + menu_items[field].code +"' data-instance = '"
+              +JSON.stringify(menu_items[field].instances)+"' data-id = '"
+              +JSON.stringify(menu_items[field].attributes)+"' data-item = '"
+              +JSON.stringify(item_attributes)+"' data-option = '"
+              +JSON.stringify(menu_items[field].options)+"' data-item-sets = '"
+              +JSON.stringify(menu_items[field].item_sets)+"' data-toggle='modal' data-target='."+data_target+"'>"
 
-          +'<div class="card-block">'
-          +'<img id="logo" src="/image/logo.png">'
+            +"<div class='card-block'>"
+            +"<img id='logo' src='/image/logo.png'>"
 
-          +'</div>'
+            +"</div>"
 
-          +'<div class="card-footer">'
-          +'<small>'+ price +'</small>'
-          +'</div>'
-          +'</div>'; 
-          $('.menu_items_list').append(row);
+            +'<div class="card-footer">'
+            +'<small>'+ price +'</small>'
+            +'</div>'
+            +'</div>'; 
+            $('.menu_items_list').append(row);
+          }
         }
       }
     });
     //end Ajax 
   }
   //end show list function
+  //click item row for add order
+   $(document).on('click', '.set_item_box', function(event){ 
+     $(".instance-list").empty();
+    data =  $(this).parent().children().children('.add_icon');
 
+    item_options       = $(this).data('option');
+    for(var field in item_options) { 
+      value = item_options[field]["values"];
+      type  = item_options[field]["type"];
+      row = "<p style='font-size:15px'>"+type+"</p>"
+      $(value).each(function(i){
+        row +="<button class='btn btn-default option_btn "+ type +"' data-type='"+type+"' data-value='"
+            +value[i]+"'>"+value[i]+"</button>";   
+      });
+      $(".opt-list").append(row); 
+    }
+
+    instances          = $(this).data('instance');
+    item_sets          = $(this).data('item-sets');
+
+    for(var field in item_sets) { 
+      value = item_sets[field]["instances"];
+      $(value).each(function(i){
+        $.ajax({
+          type: "GET",
+            url: '../../settings/menu_item_instances/get_instance/'+value[i]["id"],
+            data: {id:value[i]},
+            success:function(result){    
+              // var image_path = ""
+            console.log(result)                       
+                row = '<div class="col-md-4 instance_box" >'
+                        +'<div class="card">'
+                          +'<div class="card-head" style="line-height:14px;">'
+                             +'<small class="">'+result["name"]+'</small>'
+                          +'</div>'
+                          +'<div class="card-block">'
+                            +'<img id="" src="/image/logo.png">'
+                          +'</div>'
+                          +'<div class="card-footer">'
+                             +' <small>'+result["price"]+'</small>'
+                          +'</div>'
+                        +'</div>'
+                      +' </div>'
+
+              $(".instance-list").append(row);             
+            }
+        });
+      });
+      
+    }
+
+    $('#change_qty').val(1);
+    $('#item_instances').text(instances);
+    $('#title_name').text(data.attr('data-name'));
+    $('#item_code').text(data.attr('data-item-code'));
+    $('#total_price').text(data.attr('data-price'));
+    $('#unit_price').text(data.attr('data-price'));
+  });
   //click item row for add order
   $(document).on('click', '.menu_item_box', function(event){ 
     $('.attributes-list').empty();
@@ -162,10 +233,19 @@ $(function(){
     value      = $(this).data('value');
     type       = $(this).data('type');
     instances  = $(this).data('instances');
-    if ($(".attribute_btn").attr("data-type")==type){
-      $('.'+type).removeClass("selected-attribute");
-    }
+    
+    attributes = $(".attribute_btn");
+    $(attributes).each(function(i){
+      if ($(attributes[i]).attr('data-type')==type){
+        $('.'+type).removeClass("selected-attribute");
+      }
+    });
     $(this).addClass('selected-attribute');
+
+    // if ($(".attribute_btn").attr("data-type")==type){
+    //   $('.'+type).removeClass("selected-attribute");
+    // }
+    // $(this).addClass('selected-attribute');
     
     var selected_attr = get_selected_attributes('selected-attribute');
 
@@ -191,9 +271,12 @@ $(function(){
   $(document).on('click', '.option_btn', function(event){ 
     value      = $(this).data('value');
     type       = $(this).data('type');
-    if ($(".option_btn").attr("data-type")==type){
-      $('.'+type).removeClass("selected-option");
-    }
+    options = $(".option_btn");
+    $(options).each(function(i){
+      if ($(options[i]).attr('data-type')==type){
+        $('.'+type).removeClass("selected-option");
+      }
+    });
     $(this).addClass('selected-option');
     
   }); //End selecct attribute buttom
@@ -228,7 +311,7 @@ $(function(){
     calculate_sub_total();
       
   }); //End Add Icon Click
-
+  
   // click plus icon for add 
   $(document).on('click', '.add_icon', function(event){ 
     var item_data = $(this);
diff --git a/app/assets/stylesheets/addorder.scss b/app/assets/stylesheets/addorder.scss
index 01e01e15..29ca7156 100644
--- a/app/assets/stylesheets/addorder.scss
+++ b/app/assets/stylesheets/addorder.scss
@@ -10,7 +10,10 @@
     padding:5px;
     color :#fff;
   }
-   .card-block {
+  .instance_box{
+  margin-bottom:10px;
+  }
+  .card-block {
     padding: 0.3rem !important;
   }
   @media (min-width: 34em) {
@@ -68,7 +71,12 @@
     left:auto;
     right: auto;
     width: 100%;
-    padding-top: 200px;
+
+}
+element.style {
+    padding-top: 0px !important;
+}
+.item-modal{
 
 }
 .selected-attribute {
@@ -93,10 +101,18 @@
   /*width: 80px;*/
   margin-bottom: 5px;
   margin-right: 5px;
-}
+} 
 #logo{
     margin: auto;
     width: 50%;
     border: 1px solid #54A5AF;
     padding: 10px;
+}
+
+#instance_img{
+    margin: auto;
+    width: 80px;
+    height: 80px;
+    border: 1px solid #54A5AF;
+    padding: 10px;
 }
\ No newline at end of file
diff --git a/app/controllers/settings/menu_item_instances_controller.rb b/app/controllers/settings/menu_item_instances_controller.rb
index fbe1b672..6b5f8652 100644
--- a/app/controllers/settings/menu_item_instances_controller.rb
+++ b/app/controllers/settings/menu_item_instances_controller.rb
@@ -24,6 +24,12 @@ class Settings::MenuItemInstancesController < ApplicationController
     @item_sets = ItemSet.all
   end
 
+  def get_instance
+    @id = MenuItemInstance.find(params[:id])
+    puts "iddddddddd"
+    puts @id.to_json
+  end
+
   # GET /settings/menu_item_instances/1/edit
   def edit
     id = MenuItemInstance.findParentCategory(@item)
diff --git a/app/views/origami/addorders/detail.html.erb b/app/views/origami/addorders/detail.html.erb
index a8534f94..b7f0cf1d 100644
--- a/app/views/origami/addorders/detail.html.erb
+++ b/app/views/origami/addorders/detail.html.erb
@@ -56,7 +56,7 @@
     </div>
 
     <!-- Modal -->
-    <div class="modal fade" id="sx_itemModal" tabindex="-1" role="dialog" aria-labelledby="sx_itemModalLabel" aria-hidden="true">
+    <div class=" modal" id="sx_itemModal" tabindex="-1" role="dialog" aria-labelledby="sx_itemModalLabel" aria-hidden="true" style="">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
@@ -93,9 +93,9 @@
       </div>
     </div>
 
-    <!-- Large modal -->
+    <!-- Menu Item modal -->
 
-    <div class="modal fade sx_item_detailModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+    <div class="item-modal modal sx_item_detailModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
       <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header" style="background-color: #54A5AF;">
@@ -104,7 +104,7 @@
                 
             </div>
             <div class="modal-body">
-                <div class="row">
+                <div class="row no-set-item">
                   <div class="col-md-5">
                       <p style="text-align: center;"> <%= image_tag "logo.png" ,width: '', height: '', :id => 'logo' %></p>
                       <br><br>
@@ -119,10 +119,7 @@
                         <p class="hidden" id="item_instances"></p>
                         <p class="hidden" id="item_code"></p>
                   </div>
-                  <div class="col-md-7 item-detail">   
-                    <!--  <div class="hide attr-alert alert-danger" role="alert">
-                        <strong>Oh !</strong>Have not attribute for this item Please select another attribute .
-                      </div>  -->     
+                  <div class="col-md-7 item-detail">      
                       <strong style="font-size: 18px;">Attributes</strong>           
                      <div class="attributes-list">
 
@@ -145,3 +142,47 @@
     </div>
 
 
+     <!-- Large modal -->
+    <div class=" modal sx_item_set_detailModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
+      <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header" style="background-color: #54A5AF;">
+            <h4 class="modal-title" style="color:#fff;" id="title_name"></h4>
+               <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 20px;color:#fff;">&times;</button>
+                
+            </div>
+            <div class="modal-body">
+                <div class="row set-item">
+                  <div class="col-md-5">
+                      <div class="form-group">
+                        <label class="col-md-6" style="margin-top:5px">Quantity</label>
+                        <input type="number" name="qty" class="form-control col-md-5 input-number change_qty" id="change_qty" value="" min="1" max="100">
+                      </div> 
+                        <p class="hidden" id="unit_price"></p>
+                        <p class="hidden" id="instance_code"></p>
+                        <p class="hidden" id="instance_name"></p>
+                        <p class="hidden" id="promotion_price"></p>
+                        <p class="hidden" id="item_instances"></p>
+                        <p class="hidden" id="item_code"></p>
+                        <p></p>
+                        <div class="opt-list">
+                          <h4>Options</h4>
+                        </div>
+                  </div>
+                  <div class="col-md-7">       
+                     <div class="instance-list"></div>
+                  </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <div class="mr-auto">
+                  <h4 class=" pull-left">Total : <span id="total_price"></span></h4>
+                </div>
+                <button type="button" class="btn btn-primary" data-dismiss="modal" id="close">Close</button>
+                <button type="button" class="btn btn-success add_to_order" data-dismiss="modal" id="add_to_order">Add to Order</button>
+            </div>
+        </div>
+      </div>
+    </div>
+
+
diff --git a/app/views/settings/menu_item_instances/get_instance.json.jbuilder b/app/views/settings/menu_item_instances/get_instance.json.jbuilder
new file mode 100644
index 00000000..136c1ff1
--- /dev/null
+++ b/app/views/settings/menu_item_instances/get_instance.json.jbuilder
@@ -0,0 +1,13 @@
+if(@id)
+  json.success true
+  json.id @id.id
+  json.name @id.item_instance_name
+  json.code @id.item_instance_code
+ 
+  json.item_id @id.menu_item_id
+  json.attributes @id.item_attributes
+  json.price @id.price
+  json.is_default @id.is_default
+else
+  json.success false
+end
diff --git a/config/routes.rb b/config/routes.rb
index 74874fd0..628ec753 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -304,6 +304,7 @@ Rails.application.routes.draw do
 
     get '/get_transactions_by_commissioner' => 'commissioners#get_transaction_by_commissioner', as:'get_transaction_by_commissioner'
 
+    get 'menu_item_instances/get_instance/:id' => 'menu_item_instances#get_instance',:as => "show_instance"
   end
 
   # commissions