diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index cb050880..62af91af 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -405,4 +405,26 @@ tr.discount-item-row:hover {
     -moz-opacity: 1; /* mozilla */
         
 }
-/***********************End Origami CSS ************************/
\ No newline at end of file
+/***********************End Origami CSS ************************/
+
+/*----- Order Processing Items -----*/
+.opi_ul {
+  display:block;
+  padding-left:0px;
+}
+.opi_ul li {
+  display:list-item;
+  list-style: none;
+  margin-top:2px;
+}
+
+.opi_selected {
+  background-color:#BEA2C2 !important;
+}
+.opi_default {
+  cursor: pointer;
+  background-color: #E8ECF9;
+  line-height: inherit;
+  padding:5px;
+}
+/*----- Order Processing Items -----*/
\ No newline at end of file
diff --git a/app/views/settings/processing_items/_form.html.erb b/app/views/settings/processing_items/_form.html.erb
index 38c4284d..8230e4e6 100644
--- a/app/views/settings/processing_items/_form.html.erb
+++ b/app/views/settings/processing_items/_form.html.erb
@@ -18,15 +18,18 @@
                 <div class="col-lg-3 col-md-3 col-sm-6">
                   <div class="card" style="padding-left:5px">
                     <div class="card-title">
-                        <h4><%= category.name %>
-                        <br/><br/>
+                    <div> <h4><%= category.name %></div>
+                       
 
-                        <button type="button" data-id="menu_items_category_<%= category.id %>" class="btn btn-primary processingitems_all" aria-label="Left Align">
-                          <i class="fa fa-list" aria-hidden="true"></i>
-                        </button>
-                        <button type="button" data-id="menu_items_category_<%= category.id %>" class="processingitems_clr btn btn-primary" aria-label="Left Align">
-                          <i class="fa fa-minus-circle" aria-hidden="true"></i>
+                       <div> <button type="button" data-id="menu_items_category_<%= category.id %>" class="btn btn-info waves-effect processingitems_all" aria-label="Left Align">
+                         <!--  <i class="fa fa-list" aria-hidden="true"></i> -->
+                         <i class="material-icons">list</i> 
                         </button>
+                        <button type="button" data-id="menu_items_category_<%= category.id %>" class="processingitems_clr btn btn-info waves-effect" aria-label="Left Align">
+                          <!-- <i class="fa fa-minus-circle" aria-hidden="true"></i> -->
+                          <i class="material-icons">remove_circle</i> 
+                        </button></div>
+                        
                     </div>
                   <ul class="opi_ul" id="menu_items_category_<%= category.id %>">
                     <% category.menu_items.each do |item| %>
@@ -70,5 +73,3 @@
   </div>
 </div>
 
-
- 
diff --git a/app/views/transactions/orders/index.html.erb b/app/views/transactions/orders/index.html.erb
index 180c9d5b..30152ae4 100644
--- a/app/views/transactions/orders/index.html.erb
+++ b/app/views/transactions/orders/index.html.erb
@@ -1,23 +1,23 @@
-<div class="row">
-  <div class="col-lg-12">
-    <ol class="breadcrumb">
-       <li><a href="<%= dashboard_path %>">Home</a></li>
-       <li class="active">
-           <a href="<%= transactions_orders_path %>">Order</a>
-       </li>
-       
-    </ol>
-  </div>
+
+<div class="page-header">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="<%= dashboard_path %>">Home</a></li>
+    <li class="breadcrumb-item active">Order</li>
+    <span class="float-right">
+      <%= link_to 'Back', dashboard_path %>
+    </span>
+  </ol>
 </div>
 <div class="row">
-  <div class="col-lg-12">
-      <div class="main-box-body clearfix">
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+      <div class="main-box-body clearfix ">
        <%= form_tag transactions_orders_path, :method => :get do %>
-            <div class="form-group col-md-3">
-                <label>Search Keyword</label>
+            <div class="row clearfix">
+              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
+                <label class="form-control-label">Search Keyword</label>
                  <input type="text" name="filter" placeholder="Order ID" class="form-control input-md">
             </div>
-            <div class="form-group col-md-2">
+            <!-- <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                 <label>Items Count</label>
                  <div id="slider">
                   <input class="bar" name="count" min="0" max="20" type="range" id="rangeinput" onchange="rangevalue.value=value"/>
@@ -25,20 +25,21 @@
                   <output id="rangevalue">0</output>
                 </div>
                
-            </div>
-            <div class="form-group col-md-2"> 
-                <label class="">From</label>
+            </div> -->
+            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
+                <label class="form-control-label">From</label>
              <input class="form-control datepicker" name="from" id="date" type="text" placeholder="From date">
             </div>
-            <div class="form-group col-md-2">
-              <label class="">To</label>
+            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
+              <label class="form-control-label">To</label>
               <input class="form-control datepicker" name="to" id="date" type="text" placeholder="To date">
             </div>
             
-            <div class="form-group col-md-1">
-              <label>&nbsp;</label>
+            <div class="form-group col-lg-1 col-md-1 col-sm-1 col-xs-1">
+              <label > &nbsp;</label>
               <input type="submit" value="Search" class='btn btn-primary btn-md'>
-            </div>              
+            </div> 
+            </div>             
       <% end %>
         <div class="table-responsive">
           <table class="table table-striped">
@@ -80,7 +81,7 @@
   </div>
 </div>
 
-<style type="text/css">
+<!-- <style type="text/css">
   
 
 #slider {
@@ -207,5 +208,5 @@ input[type="range"]:focus{
 </style>
 
 
-     
+      -->
 
diff --git a/app/views/transactions/orders/show.html.erb b/app/views/transactions/orders/show.html.erb
index f55cec28..95f39983 100644
--- a/app/views/transactions/orders/show.html.erb
+++ b/app/views/transactions/orders/show.html.erb
@@ -1,20 +1,12 @@
-<div class="row">
-  <div class="col-lg-12">
-    <ol class="breadcrumb">
-       <li><a href="<%= crm_root_path %>">Home</a></li>
-       <li class="active">
-           <a href="<%= transactions_orders_path %>">Order</a>
-       </li>
-       <li class="active">
-           <a href="<%= transactions_orders_path %>"><%= @order.order_id %></a>
-       </li>
-       <span style="float: right">
-             <a href="<%= transactions_orders_path%>" class="btn btn-primary btn-sm">
-        <i class="fa fa-arrow-left fa-xs"></i> Back
-       </a>
-      </span>
-    </ol>
-  </div>
+<div class="page-header">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="<%= dashboard_path %>">Home</a></li>
+    <li class="breadcrumb-item"><a href="<%= transactions_orders_path %>">Order</a></li>
+    <li class="breadcrumb-item active">Details</li>
+    <span class="float-right">
+      <%= link_to 'Back', transactions_orders_path %>
+    </span>
+  </ol>
 </div>
 <hr>
 
diff --git a/app/views/transactions/sales/index.html.erb b/app/views/transactions/sales/index.html.erb
index 440989cb..c4767553 100644
--- a/app/views/transactions/sales/index.html.erb
+++ b/app/views/transactions/sales/index.html.erb
@@ -1,15 +1,12 @@
-<div class="row">
-  <div class="col-lg-12">
-    <ol class="breadcrumb">
-       <li><a href="<%= crm_root_path %>">Home</a></li>
-       <li class="active">
-           <a href="<%= transactions_sales_path %>">Sale</a>
-       </li>
-       
-    </ol>
-  </div>
+<div class="page-header">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="<%= dashboard_path %>">Home</a></li>
+    <li class="breadcrumb-item active">Sale</li>
+    <span class="float-right">
+      <%= link_to 'Back', dashboard_path %>
+    </span>
+  </ol>
 </div>
-
 <div class="row">
   <div class="col-lg-12">
       <div class="main-box-body clearfix">
@@ -19,23 +16,25 @@
               <tr>
                  <td colspan="8">
                     <%= form_tag transactions_sales_path, :method => :get do %>
-                       <div class="form-group col-md-4">
+                    <div class="row clearfix">
+                       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                          <label>Enter Keywords</label>
                          <input type="text" name="receipt_no" class="form-control" placeholder="Receipt No/Cashier Name/Status" style="margin-right: 10px">
                        </div>
-                       <div class="form-group col-md-3"> 
+                       <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
                          <label class="">From</label>
                          <input class="form-control datepicker" name="from" id="date" type="text" placeholder="From date">
                       </div>
-                      <div class="form-group col-md-3">
+                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                         <label class="">To</label>
                         <input class="form-control datepicker" name="to" id="date" type="text" placeholder="To date">
                       </div>
                       
-                      <div class="form-group col-md-1">
+                      <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
                         <label></label>
                         <input type="submit" value="Search" class='btn btn-primary btn-md'>
                       </div>
+                      </div>
                     <% end %>
                  </td>
               </tr>