diff --git a/resources/js/components/pages/welcome/Features.vue b/resources/js/components/pages/welcome/Features.vue
index cc584dd7..ae357c60 100644
--- a/resources/js/components/pages/welcome/Features.vue
+++ b/resources/js/components/pages/welcome/Features.vue
@@ -84,7 +84,10 @@
       </div>
       <div class="w-full md:w-1/2 lg:w-7/12 flex items-center justify-center relative w-full"
            :class="{'md:pr-8':index%2==1, 'md:pl-8':index%2==0}">
-        <img loading="lazy" class="block rounded-2xl w-full"
+        <img loading="lazy" class="
+        ease-in-out delay-300 rounded shadow-lg shadow-blue-600/50 hover:skew-y-3 hover:border-blue-600
+        transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300
+        block rounded-2xl w-full"
              :src="asset(step.img)" alt="cover-product">
       </div>
     </div>
diff --git a/resources/js/pages/welcome.vue b/resources/js/pages/welcome.vue
index 4a10c916..7a27be08 100644
--- a/resources/js/pages/welcome.vue
+++ b/resources/js/pages/welcome.vue
@@ -46,7 +46,10 @@
               </div>
             </div>
           </div>
-          <div class="w-full mt-8 relative px-6 mx-auto max-w-4xl sm:px-10 lg:px-0 z-10 flex items-center justify-center">
+          <div class="
+          ease-in-out delay-300 rounded shadow-lg shadow-blue-600/50 hover:skew-z-3 hover:border-blue-600
+          transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300
+          w-full mt-8 relative px-6 mx-auto max-w-4xl sm:px-10 lg:px-0 z-10 flex items-center justify-center">
             <img loading="lazy" class="w-full shadow-2xl rounded-xl block max-w-2xl lg:max-w-5xl"
                  :src="asset('img/pages/welcome/product-cover.jpg')" alt="cover-product">
           </div>