diff --git a/bookie/src/app/sales/products/products.component.html b/bookie/src/app/sales/products/products.component.html
index 7611119..edc2eb2 100644
--- a/bookie/src/app/sales/products/products.component.html
+++ b/bookie/src/app/sales/products/products.component.html
@@ -10,15 +10,18 @@
         <h3 class="item-name">Back</h3>
       </mat-card>
       <mat-card
-        class="face flex flex-col square-button mr-5, mb-5"
+        class="flex flex-col square-button mr-5, mb-5"
         matRipple
         *ngFor="let item of list"
         (click)="addProduct(item)"
         [class.yellow300]="item.hasHappyHour"
         [class.grey800]="item.isNotAvailable"
+        [class.face]="!item.hasHappyHour && !item.isNotAvailable"
       >
         <h3 class="item-name">{{ item.name }}</h3>
-        <mat-card-subtitle class="face center">{{ item.price | currency : 'INR' }}</mat-card-subtitle>
+        <mat-card-subtitle class="center" [class.face]="!item.hasHappyHour && !item.isNotAvailable">{{
+          item.price | currency : 'INR'
+        }}</mat-card-subtitle>
       </mat-card>
     </div>
   </mat-card-content>