diff --git a/components/Venue/venue.js b/components/Venue/venue.js
index ff0b8b10..0e48f115 100644
--- a/components/Venue/venue.js
+++ b/components/Venue/venue.js
@@ -9,7 +9,7 @@ function Venue({ className, city }) {
 		<Link href={`/venue/${city.name}`}>
 			<div className={`w-[500px] cursor-pointer sm:w-auto ${className}`}>
 				<div className='w-[450px] sm:w-auto sm:h-[320px] card-bg flex items-center justify-center p-10'>
-					<img src={city.img} className='sm:w-[350px] h-[250px] rounded-lg' />
+					<img src={city.img} className='sm:w-[350px] h-[250px] rounded-lg hoverEffect' />
 				</div>
 
 				<div className='mt-[24px] w-[450px] sm:w-full'>
diff --git a/styles/globals.css b/styles/globals.css
index 852620cf..ca9d86e4 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -265,3 +265,11 @@ mix-blend-mode: lighten;
     0% {transform: translateX(0)}
     100% {transform: translateX(200%)}
 }
+
+.hoverEffect{
+  transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
+}
+
+.hoverEffect:hover {
+  transform: scale(1.1); /* Scale the image by 10% on hover */
+}
\ No newline at end of file