diff --git a/doc/tag/TemplateDoc.vue b/doc/tag/TemplateDoc.vue
index b53665cbb..66d36e49b 100644
--- a/doc/tag/TemplateDoc.vue
+++ b/doc/tag/TemplateDoc.vue
@@ -3,11 +3,10 @@
         <p>Children of the component are passed as the content for templating.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))">
-            <div class="flex align-items-center gap-2">
+        <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
+            <div class="flex align-items-center gap-2 px-1">
                 <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
                 <span class="text-base">Italy</span>
-                <i class="pi pi-times text-xs"></i>
             </div>
         </Tag>
     </div>
@@ -20,22 +19,20 @@ export default {
         return {
             code: {
                 basic: `
-<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))">
-    <div class="flex align-items-center gap-2">
-        <img alt="Country" src="/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
-        <span class="text-base">Italia</span>
-        <i class="pi pi-times text-xs"></i>
+<Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
+    <div class="flex align-items-center gap-2 px-1">
+        <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
+        <span class="text-base">Italy</span>
     </div>
 </Tag>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))">
-            <div class="flex align-items-center gap-2">
+        <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
+            <div class="flex align-items-center gap-2 px-1">
                 <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
-                <span class="text-base">Italia</span>
-                <i class="pi pi-times text-xs"></i>
+                <span class="text-base">Italy</span>
             </div>
         </Tag>
     </div>    
@@ -47,11 +44,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))">
-            <div class="flex align-items-center gap-2">
+        <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
+            <div class="flex align-items-center gap-2 px-1">
                 <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
-                <span class="text-base">Italia</span>
-                <i class="pi pi-times text-xs"></i>
+                <span class="text-base">Italy</span>
             </div>
         </Tag>
     </div>