diff --git a/apps/showcase/components/landing/HeroSection.vue b/apps/showcase/components/landing/HeroSection.vue
index ab560eef0..41d4ad9df 100644
--- a/apps/showcase/components/landing/HeroSection.vue
+++ b/apps/showcase/components/landing/HeroSection.vue
@@ -8,11 +8,11 @@
             <div class="flex items-center gap-4">
                 <PrimeVueNuxtLink to="/setup" class="linkbox linkbox-primary">
                     <span>Get Started </span>
-                    <i class="pi pi-arrow-right ml-4"></i>
+                    <i class="pi pi-arrow-right ms-4"></i>
                 </PrimeVueNuxtLink>
                 <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox">
                     <span>Give a Star</span>
-                    <i class="pi pi-star-fill ml-4 text-yellow-500"></i>
+                    <i class="pi pi-star-fill ms-4 text-yellow-500"></i>
                 </a>
             </div>
         </div>
diff --git a/apps/showcase/components/landing/TemplateSection.vue b/apps/showcase/components/landing/TemplateSection.vue
index aa85bdadd..6b8d72b89 100644
--- a/apps/showcase/components/landing/TemplateSection.vue
+++ b/apps/showcase/components/landing/TemplateSection.vue
@@ -5,7 +5,7 @@
         <div class="flex justify-center mt-6 relative z-30">
             <a href="https://www.primefaces.org/store" class="linkbox linkbox-primary">
                 <span>Explore All</span>
-                <i class="pi pi-arrow-right ml-2"></i>
+                <i class="pi pi-arrow-right ms-2"></i>
             </a>
         </div>
         <section :class="['templates flex justify-center items-center flex-col mt-7', { 'templates-animation': setAnimation }]">