diff --git a/app/assets/stylesheets/CRM.scss b/app/assets/stylesheets/CRM.scss
index 6f8d90f0..cf6782dd 100644
--- a/app/assets/stylesheets/CRM.scss
+++ b/app/assets/stylesheets/CRM.scss
@@ -13,7 +13,7 @@
 
 .selected-item {
     color: #fff !important;
-	background-color: #54A5AF !important;
+	background-color: #7a62d3 !important;
 }
 
 .assign {
@@ -23,6 +23,14 @@
 .assign .text-muted{
     color: #fff !important;
 }
+.normal{
+    color: #fff !important;
+    background-color: #54A5AF;
+}
+.cancel {
+    color: #fff !important;
+  background-color: #FF0000;
+}
 .red{
 	color: #fff !important;
 	background-color: red;
@@ -39,9 +47,9 @@
 }
 .card-columns {
   @include media-breakpoint-only(lg) {
-    column-count: 6;
+    column-count: 5;
   }
   @include media-breakpoint-only(xl) {
-    column-count: 6;
+    column-count: 5;
   }
 }
\ No newline at end of file
diff --git a/app/controllers/crm/dining_queues_controller.rb b/app/controllers/crm/dining_queues_controller.rb
index b4f902fc..9c5f8b73 100644
--- a/app/controllers/crm/dining_queues_controller.rb
+++ b/app/controllers/crm/dining_queues_controller.rb
@@ -96,6 +96,17 @@ class Crm::DiningQueuesController < BaseCrmController
     end 
   end
 
+  def cancel_queue
+    queue      = DiningQueue.find(params[:id])
+
+    status = queue.update_attributes(id: params[:id],status:"Cancel")
+   
+    if status == true
+      render json: JSON.generate({:status => true , notice: 'Dining queue was successfully canceled .'})
+    else
+      render json: JSON.generate({:status => false, :error_message => "Record not found"})
+    end 
+  end
 
   private
     # Use callbacks to share common setup or constraints between actions.
diff --git a/app/views/crm/dining_queues/index.html.erb b/app/views/crm/dining_queues/index.html.erb
index 4adbead9..4f39147f 100644
--- a/app/views/crm/dining_queues/index.html.erb
+++ b/app/views/crm/dining_queues/index.html.erb
@@ -18,19 +18,25 @@
     <div class="active" role="tabpanel">
        <div class="tab-pane" role="tabpanel">
            <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
-           <% @i =0 %> 
+           
              <% @dining_queues.each do |queue| %>
-              <div class="card select-queue <%= !queue.status.nil? ? "assign" : ""%>" data-id="<%= queue.id %>" style="width: 17.5rem;">
+             <% if queue.status == "Assign"
+                @bg_color = "assign"
+              elsif queue.status == "Cancel"
+                @bg_color = "cancel"
+              else
+                @bg_color = "normal"
+              end
+            %> 
+              <div class="card select-queue <%= @bg_color %>" data-id="<%= queue.id %>" style="width: 21.5rem;">
                  <div class="card-block">
                       <p class="hidden queue-id"><%= queue.id  %></p> 
                       <p class="hidden queue-status"><%= queue.status  %></p>
-                      <span class="card-title">
-                      <%= @i += 1 %>  . Queue No </span>
-                      <span class="card-title pull-right">Seater : <%= queue.seater %> </span>
-                      <p style="font-size: 30px ;text-align: center;">
-                      <strong><%= queue.queue_no %></strong>
-                      </p>
-                     
+                      <span class="card-title"><strong> Queue No : <%= queue.queue_no %></strong></span>
+                      <span class="card-title pull-right"><strong> Seater : <%= queue.seater %></strong></span><br>
+                      <span class="card-title"> Name : <%= queue.name %></span><br>
+                      <span class="card-title"> Contact No : <%= queue.contact_no %></span>
+                      <span class="card-title"> Remark : <%= queue.remark %></span>
                  </div>
                </div>
             
@@ -43,7 +49,7 @@
 </div>
   <div class="col-lg-1 col-md-1 col-sm-1">
     <button type="button" id="assign" class="btn btn-primary btn-lg btn-block" disabled>Assign</button>
-        
+    <button type="button" id="cancel" class="btn btn-warning btn-lg btn-block" disabled>Cancel</button>  
   </div>
 </div>
 <script type="text/javascript">
@@ -53,20 +59,61 @@ $(function(){
           $('.select-queue').removeClass('selected-item');
           $(this).addClass('selected-item');
           var status = $(this).find(".queue-status").text();
-          if(status != "Assign"){
+          if(status != "Assign" && status != "Cancel"){
             $("#assign").removeAttr("disabled");
+            $("#cancel").removeAttr("disabled");
           }else{
             $("#assign").attr("disabled","disabled");
+            $("#cancel").attr("disabled","disabled");
           }
           $("#assign").val($(this).find(".queue-id").text());
+          $("#cancel").val($(this).find(".queue-id").text());
       }); //End  Click
 
     
 });
 $('#assign').click(function() {
-        var id = $(this).val();
-        window.location.href = "dining_queues/"+id + "/assign"
+  var id = $(this).val();
+  window.location.href = "dining_queues/"+id + "/assign"
+});
 
-      });
+$('#cancel').click(function() {
+  var id = $(this).val();
+  url = '<%= crm_cancel_queue_path %>';
+  cancel_queue(id,url);
+});
+
+
+function cancel_queue(id,url) {
+      $.confirm({
+        title: 'Confirm!',
+        content: 'Are You Sure to cancel this Queue!',
+        buttons: {
+              cancel: function () { 
+              },
+              confirm: {
+              text: 'Confirm',
+              btnClass: 'btn-green',
+              keys: ['enter', 'shift'],
+              action: function(){
+                  $.ajax({      
+                        type: "POST",         
+                        url: url ,
+                        data: {id:id},
+                        dataType: "json",
+                        success: function(data) {
+                          if(data.status == true)
+                          { 
+                           location.reload();
+                          }
+                          
+                        }  
+                });
+               }
+              }
+              
+        }
+    });
+}
 
 </script>
\ No newline at end of file
diff --git a/config/routes.rb b/config/routes.rb
index 3a8e90bd..b18f957d 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -150,6 +150,7 @@ Rails.application.routes.draw do
 
       get "/dining_queues/:id/assign"    =>"dining_queues#assign", :as => "assign"
       post "/dining_queues/assign_table" =>"dining_queues#assign_table", :as => "assign_table"
+      post "/dining_queues/cancel_queue" =>"dining_queues#cancel_queue", :as => "cancel_queue"
 
   end