diff --git a/src/app/pages/uikit/listdemo.ts b/src/app/pages/uikit/listdemo.ts
index 7492c01..8f4cc9c 100644
--- a/src/app/pages/uikit/listdemo.ts
+++ b/src/app/pages/uikit/listdemo.ts
@@ -1,12 +1,12 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { DataViewModule } from 'primeng/dataview';
-import { CommonModule } from '@angular/common';
-import { SelectButtonModule } from 'primeng/selectbutton';
-import { PickListModule } from 'primeng/picklist';
-import { OrderListModule } from 'primeng/orderlist';
-import { TagModule } from 'primeng/tag';
 import { ButtonModule } from 'primeng/button';
+import { DataViewModule } from 'primeng/dataview';
+import { OrderListModule } from 'primeng/orderlist';
+import { PickListModule } from 'primeng/picklist';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import { TagModule } from 'primeng/tag';
 import { Product, ProductService } from '../service/product.service';
 
 @Component({
@@ -33,7 +33,9 @@ import { Product, ProductService } from '../service/product.service';
                             <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" [ngClass]="{ 'border-t border-surface': i !== 0 }">
                                 <div class="md:w-40 relative">
                                     <img class="block xl:block mx-auto rounded w-full" src="https://primefaces.org/cdn/primevue/images/product/{{ item.image }}" [alt]="item.name" />
-                                    <p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)" class="absolute dark:!bg-surface-900" [style]="{ left: '4px', top: '4px' }"></p-tag>
+                                    <div class="absolute bg-black/70 rounded-border" [style]="{ left: '4px', top: '4px' }">
+                                        <p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)"></p-tag>
+                                    </div>
                                 </div>
                                 <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                     <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -76,7 +78,9 @@ import { Product, ProductService } from '../service/product.service';
                                 <div class="bg-surface-50 flex justify-center rounded p-6">
                                     <div class="relative mx-auto">
                                         <img class="rounded w-full" src="https://primefaces.org/cdn/primevue/images/product/{{ item.image }}" [alt]="item.name" style="max-width: 300px" />
-                                        <p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)" class="absolute dark:!bg-surface-900" [style]="{ left: '4px', top: '4px' }"></p-tag>
+                                        <div class="absolute bg-black/70 rounded-border" [style]="{ left: '4px', top: '4px' }">
+                                            <p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)"></p-tag>
+                                        </div>
                                     </div>
                                 </div>
                                 <div class="pt-12">
diff --git a/src/app/pages/uikit/mediademo.ts b/src/app/pages/uikit/mediademo.ts
index f268d49..e702a85 100644
--- a/src/app/pages/uikit/mediademo.ts
+++ b/src/app/pages/uikit/mediademo.ts
@@ -5,8 +5,8 @@ import { CarouselModule } from 'primeng/carousel';
 import { GalleriaModule } from 'primeng/galleria';
 import { ImageModule } from 'primeng/image';
 import { TagModule } from 'primeng/tag';
-import { Product, ProductService } from '../service/product.service';
 import { PhotoService } from '../service/photo.service';
+import { Product, ProductService } from '../service/product.service';
 
 @Component({
     selector: 'app-media-demo',
@@ -20,7 +20,9 @@ import { PhotoService } from '../service/photo.service';
                         <div class="mb-4">
                             <div class="relative mx-auto">
                                 <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-full rounded-border" />
-                                <p-tag [value]="product.inventoryStatus" styleClass="dark:!bg-surface-900 " [severity]="getSeverity(product.inventoryStatus)" class="absolute" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
+                                <div class="absolute bg-black/70 rounded-border" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }">
+                                    <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" />
+                                </div>
                             </div>
                         </div>
                         <div class="mb-4 font-medium">{{ product.name }}</div>