diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index bd2479255..2fc6ad878 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -262,7 +262,7 @@ const Home = (props: any) => {
           </div>
           {/* Feature 4 section*/}
           <div className='w-5/6 lg:w-3/5 grid grid-cols-1 md:grid-cols-2 gap-6   my-[85px] mx-auto '>
-            <div className='w-full  shadow-3xl  rounded-[10px] p-[20px] dark:shadow-slate-700'>
+            <div className='w-full shadow-3xl rounded-[10px] p-[20px] dark:shadow-slate-700 transition-all duration-300 ease-in-out hover:scale-[1.03] hover:shadow-[0_10px_40px_rgba(0,44,196,0.15)] dark:hover:shadow-[0_10px_40px_rgba(84,104,255,0.2)]'>
               <h3 className='text-h5mobile md:text-h5 font-semibold mb-6 dark:text-slate-200'>
                 Streamline testing and validation
               </h3>
@@ -273,7 +273,7 @@ const Home = (props: any) => {
                 invalid data.
               </p>
             </div>
-            <div className='w-full  shadow-3xl  rounded-[10px] p-[20px] dark:shadow-slate-700'>
+            <div className='w-full shadow-3xl rounded-[10px] p-[20px] dark:shadow-slate-700 transition-all duration-300 ease-in-out hover:scale-[1.03] hover:shadow-[0_10px_40px_rgba(0,44,196,0.15)] dark:hover:shadow-[0_10px_40px_rgba(84,104,255,0.2)]'>
               <h3 className='text-h5mobile md:text-h5 font-semibold mb-6 dark:text-slate-200'>
                 Exchange data seamlessly
               </h3>
@@ -285,7 +285,7 @@ const Home = (props: any) => {
                 platforms.
               </p>
             </div>
-            <div className='w-full  shadow-3xl  rounded-[10px] p-[20px] dark:shadow-slate-700'>
+            <div className='w-full shadow-3xl rounded-[10px] p-[20px] dark:shadow-slate-700 transition-all duration-300 ease-in-out hover:scale-[1.03] hover:shadow-[0_10px_40px_rgba(0,44,196,0.15)] dark:hover:shadow-[0_10px_40px_rgba(84,104,255,0.2)]'>
               <h3 className='text-h5mobile md:text-h5 font-semibold mb-6 dark:text-slate-200 '>
                 Document your data
               </h3>
@@ -295,7 +295,7 @@ const Home = (props: any) => {
                 stakeholders, and collaborators.
               </p>
             </div>
-            <div className='w-full  shadow-3xl  rounded-[10px] p-[20px] dark:shadow-slate-700'>
+            <div className='w-full shadow-3xl rounded-[10px] p-[20px] dark:shadow-slate-700 transition-all duration-300 ease-in-out hover:scale-[1.03] hover:shadow-[0_10px_40px_rgba(0,44,196,0.15)] dark:hover:shadow-[0_10px_40px_rgba(84,104,255,0.2)]'>
               <h3 className='text-h5mobile md:text-h5 font-semibold mb-6 dark:text-slate-200'>
                 Vibrant tooling ecosystem
               </h3>