diff --git a/src/components/experienceCard/ExperienceCard.scss b/src/components/experienceCard/ExperienceCard.scss
index 1d63c93039..fc1d019d55 100644
--- a/src/components/experienceCard/ExperienceCard.scss
+++ b/src/components/experienceCard/ExperienceCard.scss
@@ -1,23 +1,37 @@
 @import "../../_globalColor";
 
 .experience-card {
+  max-width: 500px;
+  margin: 2rem;
   position: relative;
   background-color: $lightBackground2;
   box-shadow: $lightBoxShadowDark 0px 10px 30px -15px;
   border-radius: 10px;
   border: 1px solid $lightBorder1;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .experience-card-dark {
+  max-width: 500px;
+  margin: 2rem;
   position: relative;
   background-color: $darkBackground;
   box-shadow: $lightBoxShadowDark 0px 10px 30px -15px;
   border-radius: 10px;
   border: 1px solid $lightBorder1;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .experience-card:hover {
-  box-shadow: $lightBoxShadowDark 0px 20px 30px -10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  transform: scale(1.05);
+}
+
+.experience-card-dark:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  transform: scale(1.05);
 }
 
 .experience-banner {