diff --git a/app/assets/javascripts/addorder.js b/app/assets/javascripts/addorder.js
index 158246d4..095ae4e0 100644
--- a/app/assets/javascripts/addorder.js
+++ b/app/assets/javascripts/addorder.js
@@ -64,8 +64,8 @@ $(function(){
               data_target = 'sx_item_detailModal'
             }
 
-            row = '<div class="card">'
-            +'<div class="card-head" style="line-height:14px;">'
+            row = '<div class="card custom-card">'
+            +'<div class="custom-card-head 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='"
@@ -87,12 +87,12 @@ $(function(){
               +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'>"
+            +"<div class='card-block custom-card-block'>"
             +"<img id='logo' src='/image/logo.png'>"
 
             +"</div>"
 
-            +'<div class="card-footer">'
+            +'<div class="card-footer custom-card-footer">'
             +'<small>'+ price +'</small>'
             +'</div>'
             +'</div>'; 
@@ -124,20 +124,21 @@ $(function(){
             success:function(result){
 
                 row = '<div class="col-md-4 " >'
-                        +"<div class='card instance_box' data-name='"+result["name"]
+                        +"<div class='card custom-card instance_box' data-name='"+result["name"]
                             +"' data-code='"+result["code"]
                             +"' data-price='"+result["price"]
                             +"' data-option='"+JSON.stringify(result["options"])
                             +"'>"
-                          +'<div class="card-head" style="line-height:14px;">'
+                          +'<div class="custom-card-head card-head" style="line-height:14px;">'
                              +'<small class="">'+result["name"]+'</small>'
                           +'</div>'
-                          +'<div class="card-block">'
+                          +'<div class="card-block custom-card-block">'
                             +'<img id="" src="/image/logo.png" height="40px">'
+                            +' <small style="float:" id="instance_option"></small>'
                           +'</div>'
-                          +'<div class="card-footer">'
+                          +'<div class="card-footer custom-card-footer">'
                              +' <small>'+result["price"]+'</small>'
-                             +' <small style="float:right" id="instance_option"></small>'
+                             // +' <small style="float:right" id="instance_option"></small>'
                           +'</div>'
                         +'</div>'
                       +' </div>'
@@ -368,8 +369,9 @@ $(function(){
       instance    = $(".selected-instance");
       $(instance).each(function(i){
         if ($(instance[i]).attr('data-code')==code){
-          $(instance[i]).attr('data-options',value);
-          $(instance[i]).children().children('#instance_option').text(value);
+          option_arr    = get_selected_attributes('selected-option');
+          $(instance[i]).attr('data-options',JSON.stringify(option_arr));
+          $(instance[i]).children().children('#instance_option').text(option_arr);
         }
       });
     }
@@ -591,7 +593,7 @@ $(function(){
     });
   }
 
-  /* Get discount Item rows */
+  /* Get Item rows */
   function get_order_item_rows(){
     var order_items = [];  
     var item_row    = $('.summary-items tbody tr');
@@ -606,7 +608,7 @@ $(function(){
     }); 
     return order_items;
   }
-
+  // Get Selected Class
   function get_selected_attributes(selected_class) {
     var item_row      = $('.'+selected_class);
     var attribute_arr = [];
diff --git a/app/assets/stylesheets/addorder.scss b/app/assets/stylesheets/addorder.scss
index b819b47d..39dce3c4 100644
--- a/app/assets/stylesheets/addorder.scss
+++ b/app/assets/stylesheets/addorder.scss
@@ -4,20 +4,26 @@
 @import "jquery-ui";
 @import "bootstrap-datepicker3";
 
-.card-head{
+.custom-card-head{
     height: 40px;
     background-color: #54A5AF;
     padding:5px;
     color :#fff;
-  }
-  .instance_box{
-  margin-bottom:10px;
-  }
-  .card-block {
+}
+
+.custom-card {
+    border: 2px solid rgba(0, 0, 0, 0.125) !important;
+}
+.custom-card-footer{
+   padding:0.35rem 1.25rem !important;
+}
+  
+.custom-card-block {
     padding: 0.3rem !important;
-  }
+}
+  
   @media (min-width: 34em) {
-    .card-columns {
+    .custom-card-columns {
       -webkit-column-count: 2;
       -moz-column-count: 2;
       column-count: 2;
@@ -25,7 +31,7 @@
   }
 
   @media (min-width: 48em) {
-    .card-columns {
+    .custom-card-columns {
       -webkit-column-count: 3;
       -moz-column-count: 3;
       column-count: 3;
@@ -33,7 +39,7 @@
   }
 
   @media (min-width: 62em) {
-    .card-columns {
+    .custom-card-columns {
       -webkit-column-count: 4;
       -moz-column-count: 4;
       column-count: 4;
@@ -41,7 +47,7 @@
   }
 
   @media (min-width: 75em) {
-    .card-columns {
+    .custom-card-columns {
       -webkit-column-count: 4;
       -moz-column-count: 4;
       column-count: 4;
@@ -67,7 +73,7 @@
     border-color: #fff #fff #fff #54A5AF;
 }
 
-.modal-dialog {
+.custom-modal-dialog {
     left:auto;
     right: auto;
     width: 100%;
@@ -76,9 +82,7 @@
 element.style {
     padding-top: 0px !important;
 }
-.item-modal{
 
-}
 .selected-attribute {
   color: #fff !important;
   background-color: green !important;
@@ -87,25 +91,19 @@ element.style {
   color: #fff !important;
   background-color: green !important;
 }
-.card {
- border: 2px solid rgba(0, 0, 0, 0.125) !important;
-  }
+
 .selected-instance {
   border: 2px solid #7a62d3 !important;
 }
 
 .attribute_btn {
   white-space: normal !important;
-  
-  /*width: 80px;*/
   margin-bottom: 5px;
   margin-right: 5px;
 }
 
 .option_btn {
   white-space: normal !important;
-  
-  /*width: 80px;*/
   margin-bottom: 5px;
   margin-right: 5px;
 } 
@@ -123,9 +121,8 @@ element.style {
     border: 1px solid #54A5AF;
     padding: 10px;
 }
-
-.card-footer{
-  padding:0.35rem 1.25rem !important;
+.instance_box{
+  margin-bottom:10px;
 }
 
 /*Loading gif for payment*/
diff --git a/app/views/origami/addorders/detail.html.erb b/app/views/origami/addorders/detail.html.erb
index a1bd22dc..67c5c134 100644
--- a/app/views/origami/addorders/detail.html.erb
+++ b/app/views/origami/addorders/detail.html.erb
@@ -13,7 +13,7 @@
         </ul>
     </div>
     <div class="col-md-7 col-lg-7 col-sm-7">
-      <div class="card-columns menu_items_list" style="column-gap: 10px;">
+      <div class="card-columns custom-card-columns menu_items_list" style="column-gap: 10px;">
          <!-- append data -->
       </div>
     </div>
@@ -43,7 +43,7 @@
                  </tbody>
                </table>
             </div>
-            <div class="card-footer">
+            <div class="card-footer custom-card-footer">
                <table class="table" id="order-charges-table" border="0">
                  <tr>
                    <td class="charges-name"><strong>Sub Total:</strong></td>
@@ -57,7 +57,7 @@
 
     <!-- Modal -->
     <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-dialog custom-modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@@ -96,7 +96,7 @@
     <!-- Menu Item modal -->
 
     <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-dialog custom-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>
@@ -144,7 +144,7 @@
 
      <!-- 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-dialog custom-modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header" style="background-color: #54A5AF;">
             <h4 class="modal-title" style="color:#fff;" id="set_name"></h4>