diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue
index 731a7a8da..f56e1c87a 100644
--- a/doc/datatable/samples/ProductsDoc.vue
+++ b/doc/datatable/samples/ProductsDoc.vue
@@ -78,7 +78,7 @@
         <img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-3" />
         <div class="field">
             <label for="name">Name</label>
-            <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" />
+            <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
             <small v-if="submitted && !product.name" class="p-error">Name is required.</small>
         </div>
         <div class="field">
@@ -317,7 +317,7 @@ export default {
             <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-3" />
             <div class="field">
                 <label for="name">Name</label>
-                <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
+                <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
                 <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
             </div>
             <div class="field">
@@ -450,7 +450,7 @@ export default {
         saveProduct() {
             this.submitted = true;
 
-			if (this.product.name.trim()) {
+			if (this.product?.name?.trim()) {
                 if (this.product.id) {
                     this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value: this.product.inventoryStatus;
                     this.products[this.findIndexById(this.product.id)] = this.product;
@@ -608,7 +608,7 @@ export default {
             <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-3" />
             <div class="field">
                 <label for="name">Name</label>
-                <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
+                <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
                 <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
             </div>
             <div class="field">
@@ -740,7 +740,7 @@ const hideDialog = () => {
 const saveProduct = () => {
     submitted.value = true;
 
-    if (product.value.name.trim()) {
+    if (product?.value.name?.trim()) {
         if (product.value.id) {
             product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
             products.value[findIndexById(product.value.id)] = product.value;
@@ -864,7 +864,7 @@ const getStatusLabel = (status) => {
         saveProduct() {
             this.submitted = true;
 
-            if (this.product.name.trim()) {
+            if (this.product?.name?.trim()) {
                 if (this.product.id) {
                     this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value : this.product.inventoryStatus;
                     this.products[this.findIndexById(this.product.id)] = this.product;
diff --git a/doc/inputmask/InvalidDoc.vue b/doc/inputmask/InvalidDoc.vue
index 1e39fe558..6df8082f3 100644
--- a/doc/inputmask/InvalidDoc.vue
+++ b/doc/inputmask/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid" />
+        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: '',
             code: {
                 basic: `
-<InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>
+<InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>
+        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
     </div>
 </template>
 
@@ -33,12 +33,12 @@ export default {
     }
 }
 <\/script>
-        
+
 `,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>
+        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
     </div>
 </template>
 
diff --git a/doc/multiselect/InvalidDoc.vue b/doc/multiselect/InvalidDoc.vue
index efb8d4117..d93c0eb96 100644
--- a/doc/multiselect/InvalidDoc.vue
+++ b/doc/multiselect/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -23,13 +23,13 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
-    :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />
+    :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"  
-            :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+            :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
     </div>
 </template>
 
@@ -54,7 +54,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
-            :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />
+            :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
     </div>
 </template>
 
diff --git a/doc/selectbutton/InvalidDoc.vue b/doc/selectbutton/InvalidDoc.vue
index 7b699e803..ebd5cb186 100644
--- a/doc/selectbutton/InvalidDoc.vue
+++ b/doc/selectbutton/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,12 +16,12 @@ export default {
             options: ['One-Way', 'Return'],
             code: {
                 basic: `
-<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
+<SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
     </div>
 </template>
 
@@ -39,7 +39,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
     </div>
 </template>
 
diff --git a/pages/templates/index.vue b/pages/templates/index.vue
index a09256dd0..8f9aec0e8 100644
--- a/pages/templates/index.vue
+++ b/pages/templates/index.vue
@@ -126,51 +126,6 @@
                     </div>
                 </div>
             </div>
-            <div class="col-12 lg:col-6 xl:col-4">
-                <div class="card mb-0">
-                    <a href="https://sapphire.primevue.org" rel="noopener noreferrer" target="_blank">
-                        <img alt="Sapphire" src="https://primefaces.org/cdn/primevue/images/layouts/sapphire-vue.jpg" class="w-full" />
-                    </a>
-                    <div class="flex gap-3 mt-3">
-                        <a href="https://sapphire.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
-                        </a>
-                        <a href="https://www.primefaces.org/layouts/sapphire-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <div class="col-12 lg:col-6 xl:col-4">
-                <div class="card mb-0">
-                    <a href="https://serenity.primevue.org" rel="noopener noreferrer" target="_blank">
-                        <img alt="Serenity" src="https://primefaces.org/cdn/primevue/images/layouts/serenity-vue.jpg" class="w-full" />
-                    </a>
-                    <div class="flex gap-3 mt-3">
-                        <a href="https://serenity.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
-                        </a>
-                        <a href="https://www.primefaces.org/layouts/serenity-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <div class="col-12 lg:col-6 xl:col-4">
-                <div class="card mb-0">
-                    <a href="https://babylon.primevue.org" rel="noopener noreferrer" target="_blank">
-                        <img alt="Babylon" src="https://primefaces.org/cdn/primevue/images/layouts/babylon-vue.jpg" class="w-full" />
-                    </a>
-                    <div class="flex gap-3 mt-3">
-                        <a href="https://babylon.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
-                        </a>
-                        <a href="https://www.primefaces.org/layouts/babylon-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
-                    </div>
-                </div>
-            </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
                     <a href="https://avalon.primevue.org" rel="noopener noreferrer" target="_blank">
@@ -186,36 +141,6 @@
                     </div>
                 </div>
             </div>
-            <div class="col-12 lg:col-6 xl:col-4">
-                <div class="card mb-0">
-                    <a href="https://roma.primevue.org" rel="noopener noreferrer" target="_blank">
-                        <img alt="Roma" src="https://primefaces.org/cdn/primevue/images/layouts/roma-vue.jpg" class="w-full" />
-                    </a>
-                    <div class="flex gap-3 mt-3">
-                        <a href="https://roma.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
-                        </a>
-                        <a href="https://www.primefaces.org/layouts/roma-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <div class="col-12 lg:col-6 xl:col-4">
-                <div class="card mb-0">
-                    <a href="https://prestige.primevue.org" rel="noopener noreferrer" target="_blank">
-                        <img alt="Prestige" src="https://primefaces.org/cdn/primevue/images/layouts/prestige-vue.jpg" class="w-full" />
-                    </a>
-                    <div class="flex gap-3 mt-3">
-                        <a href="https://prestige.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Preview</span>
-                        </a>
-                        <a href="https://www.primefaces.org/layouts/prestige-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </template>
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 76b577f33..de32867d6 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 23202830b..1995f5408 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 4d8183b25..9ddf3d590 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index f8a01813e..68b160cdb 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/aura-dark-amber/theme.css b/public/themes/aura-dark-amber/theme.css
index c03e26fcb..359c996b9 100644
--- a/public/themes/aura-dark-amber/theme.css
+++ b/public/themes/aura-dark-amber/theme.css
@@ -6317,6 +6317,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/aura-dark-blue/theme.css b/public/themes/aura-dark-blue/theme.css
index 8d35e30c8..d5d89f7de 100644
--- a/public/themes/aura-dark-blue/theme.css
+++ b/public/themes/aura-dark-blue/theme.css
@@ -6317,6 +6317,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/aura-dark-cyan/theme.css b/public/themes/aura-dark-cyan/theme.css
index 08e4585e9..b2db0643a 100644
--- a/public/themes/aura-dark-cyan/theme.css
+++ b/public/themes/aura-dark-cyan/theme.css
@@ -6317,6 +6317,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/aura-dark-green/theme.css b/public/themes/aura-dark-green/theme.css
index 2d5081329..eb3ed1b14 100644
--- a/public/themes/aura-dark-green/theme.css
+++ b/public/themes/aura-dark-green/theme.css
@@ -6317,6 +6317,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/aura-dark-indigo/theme.css b/public/themes/aura-dark-indigo/theme.css
index 535eb1df4..758804d6e 100644
--- a/public/themes/aura-dark-indigo/theme.css
+++ b/public/themes/aura-dark-indigo/theme.css
@@ -6317,6 +6317,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/aura-dark-lime/theme.css b/public/themes/aura-dark-lime/theme.css
index b410f139d..c3ac2a05f 100644
--- a/public/themes/aura-dark-lime/theme.css
+++ b/public/themes/aura-dark-lime/theme.css
@@ -6317,6 +6317,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/aura-dark-noir/theme.css b/public/themes/aura-dark-noir/theme.css
index 8dac6e614..97f2fdfb3 100644
--- a/public/themes/aura-dark-noir/theme.css
+++ b/public/themes/aura-dark-noir/theme.css
@@ -6317,6 +6317,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/aura-dark-pink/theme.css b/public/themes/aura-dark-pink/theme.css
index bcccc674a..80605b0cf 100644
--- a/public/themes/aura-dark-pink/theme.css
+++ b/public/themes/aura-dark-pink/theme.css
@@ -6317,6 +6317,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/aura-dark-purple/theme.css b/public/themes/aura-dark-purple/theme.css
index 2784f8b84..6b0fca33c 100644
--- a/public/themes/aura-dark-purple/theme.css
+++ b/public/themes/aura-dark-purple/theme.css
@@ -6317,6 +6317,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/aura-dark-teal/theme.css b/public/themes/aura-dark-teal/theme.css
index 70e54bfb8..2dfbb5d5e 100644
--- a/public/themes/aura-dark-teal/theme.css
+++ b/public/themes/aura-dark-teal/theme.css
@@ -6317,6 +6317,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/aura-light-amber/theme.css b/public/themes/aura-light-amber/theme.css
index ffc1c264d..9dbfc2fc5 100644
--- a/public/themes/aura-light-amber/theme.css
+++ b/public/themes/aura-light-amber/theme.css
@@ -6319,6 +6319,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11807,7 +11808,12 @@
     border-radius: 6px;
   }
 
-  .p-stepper .p-stepper-header .p-stepper-number {
+  .p-stepper .p-stepper-header .p-stepper-number::after {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
     box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
   }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
diff --git a/public/themes/aura-light-blue/theme.css b/public/themes/aura-light-blue/theme.css
index 8c26a29c6..72edff2bd 100644
--- a/public/themes/aura-light-blue/theme.css
+++ b/public/themes/aura-light-blue/theme.css
@@ -6319,6 +6319,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11807,7 +11808,12 @@
     border-radius: 6px;
   }
 
-  .p-stepper .p-stepper-header .p-stepper-number {
+  .p-stepper .p-stepper-header .p-stepper-number::after {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
     box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
   }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
diff --git a/public/themes/aura-light-cyan/theme.css b/public/themes/aura-light-cyan/theme.css
index d16bc33fa..3d9f27cda 100644
--- a/public/themes/aura-light-cyan/theme.css
+++ b/public/themes/aura-light-cyan/theme.css
@@ -6319,6 +6319,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11807,7 +11808,12 @@
     border-radius: 6px;
   }
 
-  .p-stepper .p-stepper-header .p-stepper-number {
+  .p-stepper .p-stepper-header .p-stepper-number::after {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
     box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
   }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
diff --git a/public/themes/aura-light-green/theme.css b/public/themes/aura-light-green/theme.css
index c98e9e1a4..898e8f005 100644
--- a/public/themes/aura-light-green/theme.css
+++ b/public/themes/aura-light-green/theme.css
@@ -6319,6 +6319,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11807,7 +11808,12 @@
     border-radius: 6px;
   }
 
-  .p-stepper .p-stepper-header .p-stepper-number {
+  .p-stepper .p-stepper-header .p-stepper-number::after {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
     box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
   }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
diff --git a/public/themes/aura-light-indigo/theme.css b/public/themes/aura-light-indigo/theme.css
index 067d897d0..784166c9e 100644
--- a/public/themes/aura-light-indigo/theme.css
+++ b/public/themes/aura-light-indigo/theme.css
@@ -6319,6 +6319,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11807,7 +11808,12 @@
     border-radius: 6px;
   }
 
-  .p-stepper .p-stepper-header .p-stepper-number {
+  .p-stepper .p-stepper-header .p-stepper-number::after {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
     box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
   }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
diff --git a/public/themes/aura-light-lime/theme.css b/public/themes/aura-light-lime/theme.css
index 4d51d27e4..d188c5b7f 100644
--- a/public/themes/aura-light-lime/theme.css
+++ b/public/themes/aura-light-lime/theme.css
@@ -6319,6 +6319,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11807,7 +11808,12 @@
     border-radius: 6px;
   }
 
-  .p-stepper .p-stepper-header .p-stepper-number {
+  .p-stepper .p-stepper-header .p-stepper-number::after {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
     box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
   }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
diff --git a/public/themes/aura-light-noir/theme.css b/public/themes/aura-light-noir/theme.css
index ed780874a..572112af5 100644
--- a/public/themes/aura-light-noir/theme.css
+++ b/public/themes/aura-light-noir/theme.css
@@ -6327,6 +6327,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11815,7 +11816,12 @@
     border-radius: 6px;
   }
 
-  .p-stepper .p-stepper-header .p-stepper-number {
+  .p-stepper .p-stepper-header .p-stepper-number::after {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
     box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
   }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
diff --git a/public/themes/aura-light-pink/theme.css b/public/themes/aura-light-pink/theme.css
index 1d6b6c99c..a46051a74 100644
--- a/public/themes/aura-light-pink/theme.css
+++ b/public/themes/aura-light-pink/theme.css
@@ -6319,6 +6319,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11807,7 +11808,12 @@
     border-radius: 6px;
   }
 
-  .p-stepper .p-stepper-header .p-stepper-number {
+  .p-stepper .p-stepper-header .p-stepper-number::after {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
     box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
   }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
diff --git a/public/themes/aura-light-purple/theme.css b/public/themes/aura-light-purple/theme.css
index eb8c0e617..3a7184759 100644
--- a/public/themes/aura-light-purple/theme.css
+++ b/public/themes/aura-light-purple/theme.css
@@ -6319,6 +6319,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11807,7 +11808,12 @@
     border-radius: 6px;
   }
 
-  .p-stepper .p-stepper-header .p-stepper-number {
+  .p-stepper .p-stepper-header .p-stepper-number::after {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
     box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
   }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
diff --git a/public/themes/aura-light-teal/theme.css b/public/themes/aura-light-teal/theme.css
index 30bc0b537..2123de231 100644
--- a/public/themes/aura-light-teal/theme.css
+++ b/public/themes/aura-light-teal/theme.css
@@ -6319,6 +6319,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11807,7 +11808,12 @@
     border-radius: 6px;
   }
 
-  .p-stepper .p-stepper-header .p-stepper-number {
+  .p-stepper .p-stepper-header .p-stepper-number::after {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
     box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
   }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 359ba84d5..de5591d1d 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -6310,6 +6310,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 9fb26d7d4..ab5cc5d91 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -6310,6 +6310,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 9b9e4774d..00a17ad32 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -6310,6 +6310,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 4a5205f06..ea9c22fbe 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -6310,6 +6310,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index e97ec44af..d49e436c1 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -6224,6 +6224,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index c1d4d75c3..0d292549c 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 2903019e7..8e7046e46 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 0b7bf14e5..ebff0adb6 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 82f40bf1e..e21f6a812 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index e764835c2..fb2303982 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 32bebd7d7..521353608 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index a800d35b1..42a6792b7 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index d6d141aca..30f8dd082 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 1fea103c1..035677f4f 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index c4fe2fb58..15d97eb2a 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index 8521f8e41..ba317cd83 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index e0672e798..5c6690a4f 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 905b6b773..91b926a1a 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index 8c428f147..304349bfc 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 52fba8c61..f750ae558 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 73988f5a9..34232e721 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -6292,6 +6292,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 09911d295..c8c5d5030 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -6236,6 +6236,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 0e8183262..561776af6 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -6236,6 +6236,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 92bd5effa..55c1ef0c6 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -6236,6 +6236,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 6efad96a7..3115b7eec 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -6236,6 +6236,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 76e9128f2..d7ea93496 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -6323,6 +6323,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 72b9c7d83..80a360a82 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -6323,6 +6323,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 7dbf720ce..7b24e8c0d 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -6322,6 +6322,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index b398b4467..0ee921e11 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -6322,6 +6322,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 62e289182..df74d6631 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -6323,6 +6323,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 320374665..e73498543 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -6323,6 +6323,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 15f70cd60..3da9d0d47 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -6322,6 +6322,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 8eb7e3b18..09d57010c 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -6322,6 +6322,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index 95faef858..07a0d16f5 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -6277,6 +6277,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index d0c86cf4c..590c40f44 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 01d1fb518..c0e89417b 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -6224,6 +6224,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 37fcef789..fcc4c3701 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -6236,6 +6236,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index bea76a7c1..42f1988fe 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -6236,6 +6236,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 9dc286164..f90124329 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -6236,6 +6236,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index a1f24cf74..6f2e6296c 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -6224,6 +6224,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index ed2df5231..2b4c4c2cd 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 267adde70..8d7e71060 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index d14852a81..44e8de00c 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 0d71a6962..6b3537748 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index d2880a4ca..692eaee6f 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -6297,6 +6297,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index ae8e57467..17562efd8 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -6297,6 +6297,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index cac4c086f..74beb66f7 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -6284,6 +6284,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 51d169e26..cd6f019e6 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 1ae038d05..7e37afe33 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index df02ea0c9..431b35104 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 095ac2436..9b646709d 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -6249,6 +6249,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 7bd972b98..becde0607 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -6330,6 +6330,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 36d323aa7..b1ba7d073 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -6330,6 +6330,7 @@
   }
 
   .p-stepper-number {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;