diff --git a/app/assets/javascripts/channels/order_reservation.js b/app/assets/javascripts/channels/order_reservation.js
index fb42bf82..8acf8997 100644
--- a/app/assets/javascripts/channels/order_reservation.js
+++ b/app/assets/javascripts/channels/order_reservation.js
@@ -11,6 +11,10 @@ App.checkin = App.cable.subscriptions.create('OrderReservationChannel', {
       $('.order_reserve_cable tbody').html("");
       $(".nav-item.red > a > p.num").text(order.length);
       $.each(order, function(key,value){
+        var active_class = "";
+        if(key==0){
+          active_class = "tr-active";
+        }
         var rowCount = key+1;
         var date = new Date(value.created_at); 
         // var deliveries = value["delivery"];
@@ -30,7 +34,7 @@ App.checkin = App.cable.subscriptions.create('OrderReservationChannel', {
           delivery_type = "DIRECT DELIVERY";
         }
 
-        row = '<tr class="custom-tr first-'+rowCount+'" style="" data-id="'+value.order_reservation_id+'" data-sr-no="'+rowCount+'">'
+        row = '<tr class="custom-tr first-'+rowCount+' '+active_class+'" style="" data-id="'+value.order_reservation_id+'" data-sr-no="'+rowCount+'">'
               +'<td width ="5%" class="align-left">'+rowCount
               +'</td>'
               +'<td width ="20%" class="align-center">'+created_at
@@ -42,7 +46,7 @@ App.checkin = App.cable.subscriptions.create('OrderReservationChannel', {
               +'<td width ="30%" class="align-center">'
                 +'<span class="font-10 col-blue">'+ delivery_type +'</span>'
               +'</td>'
-            +' </tr>'
+            +' </tr>';
         
         $('.order_reserve_cable tbody').append(row);
       });