diff --git a/src/app.css b/src/app.css
index 9f34fa1..a985451 100644
--- a/src/app.css
+++ b/src/app.css
@@ -226,8 +226,10 @@ h2 {
     100% { transform: rotateY(0); }
 }
 
-.flip-box:hover .flip-box-front{
-    animation: rotate-and-back 0.3s ease-in-out;
+@media (min-width: 448px) { /* Apply hover effect only on screens wider than md*/
+	.flip-box:hover .flip-box-front {
+		animation: rotate-and-back 0.3s ease-in-out;
+	}
 }
 
 .flip-box-front,
diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte
index 9af1c24..9e1adda 100644
--- a/src/components/event/EventBlock.svelte
+++ b/src/components/event/EventBlock.svelte
@@ -61,13 +61,13 @@
 <div
 	class="
 	flip-box
-	group relative flex flex-col overflow-hidden rounded-2xl  transition-all duration-300 hover:-translate-y-3 "
+	group relative flex flex-col rounded-2xl  transition-all duration-300 hover:-translate-y-3"
 	>
 	<!--Flip Card container-->
-	<div class="flip-box-inner rounded-2xl " class:show-back={showDescription}>
+	<div class="flip-box-inner rounded-2xl  " class:show-back={showDescription}>
 		<!--Front Side-->
 		<!--Opacity thing is to fix the visual bug on ios-->
-		<div class="flip-box-front bg-ecsess-950 shadow-ecsess-950/50 rounded-2xl transition-opacity duration-500 {showDescription ? 'opacity-0 pointer-events-none' : 'opacity-100'}">
+		<div class="flip-box-front bg-ecsess-950 shadow-xl shadow-ecsess-950/60 rounded-2xl transition-opacity duration-500 {showDescription ? 'opacity-0 pointer-events-none' : 'opacity-100'}">
 			<!--Flip button-->
 			<div
 				class="
@@ -239,7 +239,7 @@
 			</div>
 			</div>
 		<!-- Back Side -->
-		<div class=" flip-box-back bg-ecsess-950 shadow-ecsess-950/50 rounded-2xl">
+		<div class=" flip-box-back bg-ecsess-950 shadow-xl shadow-ecsess-950/60 rounded-2xl">
 			<!--Flip button-->
 			<div
 				class="