diff --git a/app/assets/javascripts/addorder.js b/app/assets/javascripts/addorder.js
index a2d77325..c8bb6be3 100755
--- a/app/assets/javascripts/addorder.js
+++ b/app/assets/javascripts/addorder.js
@@ -37,8 +37,8 @@ $(function(){
             }
 
             row = '<div class="card custom-card testimonial-card animated fadeInRight" style="">'
-                     +'<div class="custom-card-head card-head" style="line-height:14px;">'
-                      +'<small class="col-md-9">'+ product[field].name +'</small>'
+                     +'<div class="custom-card-head card-head row" style="line-height:14px;margin:0px;">'
+                      +'<div class="col-md-9">'+ product[field].name +'</div>'
                       +"<div class='col-md-3 add_icon' data-item-code='"
                         + product[field].item_code +"' data-name='"
                         + product[field].name +"' data-qty = '"+ qty +"' data-price = '"
@@ -46,9 +46,8 @@ $(function(){
                         + product[field].name +"' data-promotion-price = '"+ 1 +"' data-attributes = '"
                         + JSON.stringify(item_attributes) +"' data-options = '"
                         + options +"' data-image='"+image_path+"'>"
-                      +"<i class='fa fa-plus '"
-                      + 'style="margin-top:4px;">'
-                      +'</i>'
+                      +"<i class='fa fa-plus material-icons'>"
+                      +'add</i>'
                       +'</div>'
                      +'</div>'
 
@@ -65,7 +64,7 @@ $(function(){
                     +"</div>"
 
                     +'<div class="card-footer custom-card-footer">'
-                      +'<small>'+ product[field].unit_price +'</small>'
+                      +'<span>'+ product[field].unit_price +'</span>'
                     +'</div>'
                   +'</div>'; 
             $('.menu_items_list').append(row);
@@ -109,6 +108,7 @@ $(function(){
 
             if (JSON.stringify(menu_items[field].item_sets)!='[]') {
               fa_plus = '';
+              add = '';
               menu_item_box = 'set_item_box';
               data_target = 'sx_item_set_detailModal';
 
@@ -120,7 +120,8 @@ $(function(){
                  item_attributes = menu_items[field].attributes;
                  promotion_price =  menu_items[field].promotion_price;
             }else{
-              fa_plus = 'fa-plus';
+              fa_plus = 'material-icons';
+              add = 'add'
               menu_item_box = 'menu_item_box';
               data_target = 'sx_item_detailModal';
 
@@ -146,8 +147,8 @@ $(function(){
             }
 
             row = '<div class="card custom-card testimonial-card animated fadeInRight" style="">'
-                     +'<div class="custom-card-head card-head" style="line-height:14px;">'
-                      +'<small class="col-md-9">'+ menu_items[field].name +'</small>'
+                     +'<div class="custom-card-head card-head row" style="line-height:14px;margin:0px;">'
+                      +'<div class="col-md-9">'+ menu_items[field].name +'</div>'
                       +"<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 = '"
@@ -155,9 +156,8 @@ $(function(){
                         + name +"' data-promotion-price = '"+ promotion_price +"' data-attributes = '"
                         + JSON.stringify(item_attributes) +"' data-options = '"
                         + options +"' data-image='"+image_path+"'>"
-                      +"<i class='fa "+fa_plus+" '"
-                      + 'style="margin-top:4px;">'
-                      +'</i>'
+                      +"<i class='fa "+fa_plus+" '>"
+                      +add+ '</i>'
                       +'</div>'
                      +'</div>'
 
@@ -174,7 +174,7 @@ $(function(){
                     +"</div>"
 
                     +'<div class="card-footer custom-card-footer">'
-                      +'<small>'+ price +'</small>'
+                      +'<span>'+ price +'</span>'
                     +'</div>'
                   +'</div>'; 
             $('.menu_items_list').append(row);
@@ -216,14 +216,14 @@ $(function(){
                             +"' data-max-qty='"+item_sets[field]["max_selectable_qty"]
                             +"'>"
                           +'<div class="custom-card-head card-head" style="line-height:14px;">'
-                             +'<small class="">'+result["name"]+'</small>'
+                             +'<span class="">'+result["name"]+'</span>'
                           +'</div>'
                           +'<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 custom-card-footer">'
-                             +' <small>'+result["price"]+'</small>'
+                             +' <span>'+result["price"]+'</span>'
                              // +' <small style="float:right" id="instance_option"></small>'
                           +'</div>'
                         +'</div>'
@@ -433,8 +433,8 @@ $(function(){
           disabled = "disabled";
         }
         row +="<button id='selected-attribute' data-instances='"+JSON.stringify(instances)+"' data-type='"
-        +type+"' data-value='"+value[i]+"' class='btn btn-default attribute_btn "
-        + status +" "+ type +" "+ disabled +" '>"
+        +type+"' data-value='"+value[i]+"' class='btn btn- waves-effect attribute_btn "
+        + status +" "+ type +" '"+ disabled +" >"
         +value[i]
         +"</button>";   
       });
@@ -446,7 +446,7 @@ $(function(){
       type  = item_options[field]["type"];
       row = "<h4>"+type+"</h4>"
       $(value).each(function(i){
-        row +="<button class='btn btn-default option_btn "+ type +"' data-type='"
+        row +="<button class='btn btn- waves-effect option_btn "+ type +"' data-type='"
         +type+"' data-value='"+value[i]+"' data-group='simple_menu'>"+value[i]+"</button>";   
       });
       $(".options-list").append(row); 
diff --git a/app/assets/stylesheets/addorder.scss b/app/assets/stylesheets/addorder.scss
index 7d3add13..91976f41 100755
--- a/app/assets/stylesheets/addorder.scss
+++ b/app/assets/stylesheets/addorder.scss
@@ -1,3 +1,6 @@
+section .content{
+  padding:50px 15px 0 225px !important;
+}
 .custom-card-head{
     height: 40px;
     background-color: #54A5AF;
@@ -78,11 +81,9 @@ element.style {
 }
 
 .selected-attribute {
-  color: #fff !important;
   background-color: green !important;
 }
 .selected-option {
-  color: #fff !important;
   background-color: green !important;
 }
 
@@ -94,12 +95,14 @@ element.style {
   white-space: normal !important;
   margin-bottom: 5px;
   margin-right: 5px;
+  color:#111 !important;
 }
 
 .option_btn {
   white-space: normal !important;
   margin-bottom: 5px;
   margin-right: 5px;
+  color:#111 !important;
 } 
 #logo{
     margin: auto;
diff --git a/app/views/origami/addorders/detail.html.erb b/app/views/origami/addorders/detail.html.erb
index 078d10f4..1056d477 100755
--- a/app/views/origami/addorders/detail.html.erb
+++ b/app/views/origami/addorders/detail.html.erb
@@ -23,8 +23,7 @@
     </div>
 
     <div class="col-md-3 col-lg-3 col-sm-3">
-
-        <button type="button" class="btn btn-primary btn-md pull-right" id="back"><i class="fa fa-arrow-left"></i> BACK </button> <br><br>
+        <button type="button" class="btn btn-primary btn-md float-right" id="back"><i class="fa fa-arrow-left"></i> BACK </button> <br>
         <div class="card-header">
           <div>
              <strong id="order-title">ORDER DETAILS </strong> |  Table <%=@table.name%>
@@ -121,13 +120,14 @@
                         <div class="input-group">
                           <span class="input-group-btn">
                               <button type="button" class="btn btn-danger btn-number"  value="-" id="minus">
-                                <span class="glyphicon glyphicon-minus"></span>
+                               <i class="material-icons">remove</i>
+                                
                               </button>
                           </span>
                           <input type="text" value="1" id="count" class="change_qty form-control col-md-12 ">
                           <span class="input-group-btn">
                               <button type="button" class="btn btn-success btn-number" value="+" id="plus">
-                                  <span class="glyphicon glyphicon-plus"></span>
+                                 <i class="material-icons">add</i>
                               </button>
                           </span>
                       </div>
@@ -154,8 +154,8 @@
                 <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>
+                <button type="button" class="btn btn-primary m-r-20" data-dismiss="modal" id="close">Close</button>
+                <button type="button" class="btn btn-success add_to_order m-r-10" data-dismiss="modal" id="add_to_order">Add to Order</button>
             </div>
         </div>
       </div>
@@ -183,13 +183,13 @@
                       <div class="input-group">
                           <span class="input-group-btn">
                               <button type="button" class="btn btn-danger btn-number"  value="-" id="set_minus">
-                                <span class="glyphicon glyphicon-minus"></span>
+                                <i class="material-icons">remove</i>
                               </button>
                           </span>
                           <input type="text" value="1" id="set_count" class="set_change_qty form-control col-md-12 ">
                           <span class="input-group-btn">
                               <button type="button" class="btn btn-success btn-number" value="+" id="set_plus">
-                                  <span class="glyphicon glyphicon-plus"></span>
+                                  <i class="material-icons">add</i>
                               </button>
                           </span>
                       </div>
@@ -207,7 +207,7 @@
 
                   </div>
                   <div class="col-md-8">       
-                     <div class="instance-list"></div>
+                     <div class="instance-list row"></div>
                   </div>
                 </div>
             </div>