diff --git a/app/assets/stylesheets/origami.scss b/app/assets/stylesheets/origami.scss
index 3606dadc..8c478a1a 100644
--- a/app/assets/stylesheets/origami.scss
+++ b/app/assets/stylesheets/origami.scss
@@ -160,6 +160,10 @@
 	background-color: #FF8C00
 }
 
+.blue{
+	background-color: blue
+}
+
 .left{
 	margin-left:1px;
 }
diff --git a/app/views/origami/home/index.html.erb b/app/views/origami/home/index.html.erb
index e28717e3..5888bb3e 100644
--- a/app/views/origami/home/index.html.erb
+++ b/app/views/origami/home/index.html.erb
@@ -38,12 +38,21 @@
        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
          <% @tables.each do |table| %>
          <% if table.status == 'occupied' %>
-         <div class="card tables red text-white" data-id="<%= table.id %>">
-           <div class="card-block">
-              Zone <%= table.zone_id %> <br>
-              Table <%= table.name %>  ( <%= table.seater %> Seat )
-           </div>
-         </div>
+             <% if table.get_booking.nil? %>
+                 <div class="card tables red text-white" data-id="<%= table.id %>">
+                   <div class="card-block">
+                      Zone <%= table.zone_id %> <br>
+                      Table <%= table.name %>  ( <%= table.seater %> Seat )
+                   </div>
+                 </div>
+             <% else %>
+                 <div class="card tables blue text-white" data-id="<%= table.id %>">
+                   <div class="card-block">
+                      Zone <%= table.zone_id %> <br>
+                      Table <%= table.name %>  ( <%= table.seater %> Seat )
+                   </div>
+                 </div>
+             <% end %>
          <% else %>
          <div class="card tables green text-white" data-id="<%= table.id %>">
            <div class="card-block">
diff --git a/app/views/origami/home/show.html.erb b/app/views/origami/home/show.html.erb
index c25c1b2f..9eacac99 100644
--- a/app/views/origami/home/show.html.erb
+++ b/app/views/origami/home/show.html.erb
@@ -38,16 +38,22 @@
        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
          <% @tables.each do |table| %>
          <% if table.status == 'occupied' %>
-         <div class="card tables red text-white" data-id="<%= table.id %>">
-           <div class="card-block">
-              <%= table.name %>
-              <% if table.get_booking.nil? %>
-                <span style="font-size:12px;float:right;line-height:inherit;"> billed</span>
-              <% else %>
-                <span style="font-size:12px;float:right;line-height:inherit;"> new</span>
-              <% end %>
-           </div>
-         </div>
+           <% if table.get_booking.nil? %>
+               <div class="card tables red text-white" data-id="<%= table.id %>">
+                 <div class="card-block">
+                    <%= table.name %>
+                    <span style="font-size:12px;float:right;line-height:inherit;"> billed</span>
+                    <div  style="font-size:12px;"></div>
+                 </div>
+               </div>
+           <% else %>
+               <div class="card tables blue text-white" data-id="<%= table.id %>">
+                 <div class="card-block">
+                    <%= table.name %>
+                    <span style="font-size:12px;float:right;line-height:inherit;"> new</span>
+                 </div>
+               </div>
+           <% end %>
          <% else %>
          <div class="card tables green text-white" data-id="<%= table.id %>">
            <div class="card-block">
@@ -108,9 +114,9 @@
      <div class="card"  >
        <div class="card-header">
          <% if @status_order == 'order' && @status_sale != 'sale' %>
-            <div id="save_order_id" data-order="<%= @obj_order.order_id %>"><strong id="order-title">ORDER DETAILS </strong></div>
+            <div id="save_order_id" data-order="<%= @obj_order.order_id %>"><strong id="order-title">ORDER DETAILS </strong> |  Table <%= @dining.name rescue "" %></div>
          <% elsif @status_sale == 'sale' %>
-            <div><strong id="order-title">INVOICE DETAILS </strong></div>
+            <div><strong id="order-title">INVOICE DETAILS </strong> |  Table <%= @dining.name rescue "" %></div>
          <% end %>
        </div>
        <div class="card-block">
@@ -129,8 +135,8 @@
 
          <div class="card-title row">
            <div class="col-lg-6 col-md-6 col-sm-6">
-             <p class="hidden customer-id"><%= @customer.customer_id  %></p>
-             <p>Customer : <%= @customer.name %></p>
+             <p class="hidden customer-id"><%= @customer.customer_id rescue "" %></p>
+             <p>Customer : <%= @customer.name rescue "" %></p>
            </div>
 
          </div>
diff --git a/app/views/origami/room_invoices/show.html.erb b/app/views/origami/room_invoices/show.html.erb
index 46e9a892..7ea799ae 100644
--- a/app/views/origami/room_invoices/show.html.erb
+++ b/app/views/origami/room_invoices/show.html.erb
@@ -35,8 +35,8 @@
          <div class="card-title row customer_detail hide">
            <div class="col-lg-6 col-md-6 col-sm-6">
              <!-- <% if !@customer.nil? %> -->
-             <p class="hidden customer-id"><%= @customer.customer_id  %></p>
-             <p>Customer : <%= @customer.name %></p>
+             <p class="hidden customer-id"><%= @customer.customer_id rescue "" %></p>
+             <p>Customer : <%= @customer.name rescue "" %></p>
              <!-- <% end %> -->
            </div>
 
diff --git a/app/views/origami/rooms/show.html.erb b/app/views/origami/rooms/show.html.erb
index 381edb25..6fa61bd8 100644
--- a/app/views/origami/rooms/show.html.erb
+++ b/app/views/origami/rooms/show.html.erb
@@ -38,16 +38,21 @@
        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
          <% @tables.each do |table| %>
          <% if table.status == 'occupied' %>
-         <div class="card tables red text-white" data-id="<%= table.id %>">
-           <div class="card-block">
-              <%= table.name %>
-              <% if table.get_booking.nil? %>
-                <span style="font-size:12px;float:right;line-height:inherit;"> billed</span>
-              <% else %>
-                <span style="font-size:12px;float:right;line-height:inherit;"> new</span>
-              <% end %>
-           </div>
-         </div>
+            <% if table.get_booking.nil? %>
+                <div class="card tables red text-white" data-id="<%= table.id %>">
+                  <div class="card-block">
+                     <%= table.name %>
+                       <span style="font-size:12px;float:right;line-height:inherit;"> billed</span>
+                  </div>
+                </div>
+            <% else %>
+                <div class="card tables blue text-white" data-id="<%= table.id %>">
+                  <div class="card-block">
+                     <%= table.name %>
+                       <span style="font-size:12px;float:right;line-height:inherit;"> new</span>
+                  </div>
+                </div>
+            <% end %>
          <% else %>
          <div class="card tables green text-white" data-id="<%= table.id %>">
            <div class="card-block">
@@ -108,9 +113,9 @@
      <div class="card"  >
        <div class="card-header">
          <% if @status == 'order' %>
-            <div id="save_order_id" data-order="<%= @obj.order_id %>"><strong id="order-title">ORDER DETAILS </strong></div>
+            <div id="save_order_id" data-order="<%= @obj.order_id %>"><strong id="order-title">ORDER DETAILS </strong> |  Table <%= @room.name rescue "" %></div>
          <% elsif @status_sale == 'sale' %>
-            <div><strong id="order-title">INVOICE DETAILS </strong></div>
+            <div><strong id="order-title">INVOICE DETAILS </strong> |  Table <%= @room.name rescue "" %></div>
          <% end %>
 
        </div>
@@ -258,28 +263,28 @@ $(document).ready(function(){
   $(".tables").on('click', function(){
       var customer_id=$(".customer-id").text();
       show_customer_details(customer_id);
-      
+
       var dining_id = $(this).attr("data-id");
       window.location.href = '/origami/table/' + dining_id;
   })
   $(".sales").on('click',function(){
       var customer_id=$(".customer-id").text();
       show_customer_details(customer_id);
-      
+
     var sale_id = $(this).attr("data-id");
     window.location.href = '/origami/sale/' + sale_id;
   })
   $(".rooms").on('click', function(){
       var customer_id=$(".customer-id").text();
       show_customer_details(customer_id);
-      
+
       var dining_id = $(this).attr("data-id");
       window.location.href = '/origami/room/' + dining_id;
   })
   $(".orders").on('click',function(){
       var customer_id=$(".customer-id").text();
       show_customer_details(customer_id);
-      
+
     var order_id = $(this).attr("data-id");
     window.location.href = '/origami/order/' + order_id;
   })
diff --git a/app/views/origami/table_invoices/show.html.erb b/app/views/origami/table_invoices/show.html.erb
index 065c7f8d..ee66f9a3 100644
--- a/app/views/origami/table_invoices/show.html.erb
+++ b/app/views/origami/table_invoices/show.html.erb
@@ -35,8 +35,8 @@
          <div class="card-title row customer_detail hide">
            <div class="col-lg-6 col-md-6 col-sm-6">
              <!-- <% if !@customer.nil? %> -->
-             <p class="hidden customer-id"><%= @customer.customer_id  %></p>
-             <p>Customer : <%= @customer.name %></p>
+             <p class="hidden customer-id"><%= @customer.customer_id rescue "" %></p>
+             <p>Customer : <%= @customer.name rescue "" %></p>
              <!-- <% end %> -->
            </div>