diff --git a/app/assets/stylesheets/addorder.scss b/app/assets/stylesheets/addorder.scss
index e319a724..368f21c9 100755
--- a/app/assets/stylesheets/addorder.scss
+++ b/app/assets/stylesheets/addorder.scss
@@ -178,4 +178,32 @@ section.content{
 i.logout_icon{
   position: relative;
   top: 5px;
-}
\ No newline at end of file
+}
+
+.text-white{
+  color: #fff;
+}
+/* Colors */
+.purple {
+  background-color:#7a62d3;
+}
+
+.orange{
+   background-color:#FF7F50;
+}
+
+.red {
+  background-color:#F44336;
+}
+
+.green{
+  background-color: #009900;
+}
+
+.orange{
+  background-color: #FF8C00;
+}
+
+.blue{
+  background-color: blue;
+}
diff --git a/app/views/origami/addorders/detail.html.erb b/app/views/origami/addorders/detail.html.erb
index 0dbfe61c..34c78b04 100755
--- a/app/views/origami/addorders/detail.html.erb
+++ b/app/views/origami/addorders/detail.html.erb
@@ -328,33 +328,87 @@
         <div class="modal-content">
           <div class="modal-header">
             <h4 class="modal-title" id="TableModalLabel">Select Table</h4>
-             <button type="button" class="close" id="close" data-dismiss="modal" aria-hidden="true" style="font-size: 20px;color:#fff;">&times;</button>
+             <button type="button" class="close" id="close" data-dismiss="modal" aria-hidden="true" style="font-size: 20px;">&times;</button>
           </div>
           <div class="modal-body">
-           <h5>Table</h5>
-            <div class="card-columns">
-                  <% @tables.each do |table| %>
-                      <div class="card tables  text-white" data-id="<%= table.name %>">
-                        <div class="card-block">
-                          <%= table.name %>
-                          <span class="float-right font-12"><%= table.name %></span>
-                        </div>
+            <h5>Table</h5>
+            <div class="card-columns" style="column-count: 7">
+              <% @tables.each do |table| %>       
+                <% if table.status == 'occupied' %>
+                  <% if table.get_booking.nil? %>
+                    <% if table.get_checkout_booking.nil? %>
+                      <div class="card tables red text-white table_<%= table.id %>" data-id="<%= table.id %>">
+                    <% else %>                            
+                      <div class="card tables orange text-white table_<%= table.id %>" data-id="<%= table.id %>">
+                    <% end %>                         
+                      <div class="card-block">
+                        <%= table.name %>
+                          <!-- <span class="float-right font-12 new_text_<%= table.id %>"> billed</span>
+                          <div style="font-size:12px;"></div> -->
                       </div>
+                      </div>
+                  <% else %>         
+                    <% if table.get_checkout_booking.nil? %>
+                       <div class="card tables blue text-white table_<%= table.id %>" data-id="<%= table.id %>">
+                    <% else %>                       
+                      <div class="card tables orange text-white table_<%= table.id %>" data-id="<%= table.id %>">
+                    <% end %>                   
+                      <div class="card-block">
+                        <%= table.name %>
+                        <span class="float-right font-12 new_text_<%= table.id %>"> new</span>
+                      </div>
+                    </div>
                   <% end %>
-                </div>
+                  <% else %>
+                      <div class="card tables green text-white table_<%= table.id %>" data-id="<%= table.id %>">
+                      <div class="card-block">
+                        <%= table.name %>
+                        <span class="float-right font-12 new_text_<%= table.id %> hide"> new</span>
+                      </div>
+                    </div>
+                   <% end %>
+                  <% end %>
+              </div>
                 <hr>
                 <h5>Room</h5>
-            <div class="card-columns">
-                  <% @rooms.each do |room| %>
-                      <div class="card tables  text-white" data-id="<%= room.name %>">
-                        <div class="card-block">
-                          <%= room.name %>
-                          <span class="float-right font-12"><%= room.name %></span>
+                <div class="card-columns" style="column-count: 7">
+                  <% @rooms.each do |table| %>       
+                    <% if table.status == 'occupied' %>
+                      <% if table.get_booking.nil? %>
+                        <% if table.get_checkout_booking.nil? %>
+                          <div class="card tables red text-white table_<%= table.id %>" data-id="<%= table.id %>">
+                        <% else %>                            
+                          <div class="card tables orange text-white table_<%= table.id %>" data-id="<%= table.id %>">
+                        <% end %>                         
+                          <div class="card-block">
+                            <%= table.name %>
+                              <!-- <span class="float-right font-12 new_text_<%= table.id %>"> billed</span>
+                              <div style="font-size:12px;"></div> -->
+                          </div>
+                          </div>
+                      <% else %>         
+                        <% if table.get_checkout_booking.nil? %>
+                           <div class="card tables blue text-white table_<%= table.id %>" data-id="<%= table.id %>">
+                        <% else %>                       
+                          <div class="card tables orange text-white table_<%= table.id %>" data-id="<%= table.id %>">
+                        <% end %>                   
+                          <div class="card-block">
+                            <%= table.name %>
+                            <span class="float-right font-12 new_text_<%= table.id %>"> new</span>
+                          </div>
                         </div>
-                      </div>
-                  <% end %>
-                </div>
-          </div>
+                      <% end %>
+                      <% else %>
+                          <div class="card tables green text-white table_<%= table.id %>" data-id="<%= table.id %>">
+                          <div class="card-block">
+                            <%= table.name %>
+                            <span class="float-right font-12 new_text_<%= table.id %> hide"> new</span>
+                          </div>
+                        </div>
+                       <% end %>
+                      <% end %>
+                  </div>
+              </div>
           <div class="modal-footer  p-r-30">
             <button type="button" class="btn btn-link btn-danger waves-effect" data-dismiss="modal">CLOSE</button>
             &nbsp;  &nbsp;