diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
index 979ed40c6..9192cf52b 100644
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@@ -24,7 +24,7 @@
 
 @layer components {
   .mbz-card {
-    @apply block bg-white hover:bg-white text-black-title dark:text-white dark:hover:text-white rounded-lg dark:border-black-title shadow-md dark:bg-mbz-purple dark:hover:dark:bg-mbz-purple-800 dark:text-white dark:hover:text-white;
+    @apply block bg-white hover:bg-white text-black-title shadow-eventcard dark:text-white dark:hover:text-white dark:border-black-title  dark:bg-mbz-purple dark:hover:dark:bg-mbz-purple-800 dark:text-white dark:hover:text-white;
   }
 }
 
diff --git a/src/components/Event/EventCard.vue b/src/components/Event/EventCard.vue
index 28fb9980f..99228e74d 100644
--- a/src/components/Event/EventCard.vue
+++ b/src/components/Event/EventCard.vue
@@ -9,7 +9,7 @@
     :isInternal="isInternal"
   >
     <div
-      class="rounded-lg"
+      class=""
       :class="{ 'sm:w-full sm:max-w-[20rem]': mode === 'row' }"
     >
       <figure class="block relative pt-40">
@@ -69,13 +69,13 @@
           />
         </div>
         <span
-          class="text-gray-700 dark:text-white font-semibold hidden"
+          class="text-black dark:text-white font-semibold hidden"
           :class="{ 'sm:block': mode === 'row' }"
           >{{ formatDateTimeWithCurrentLocale }}</span
         >
         <div class="w-full flex flex-col justify-between h-full">
           <h2
-            class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white"
+            class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-black-title dark:text-white"
             dir="auto"
             :lang="event.language"
           >
@@ -83,7 +83,7 @@
           </h2>
           <div class="">
             <div
-              class="flex items-center text-violet-3 dark:text-white"
+              class="flex items-center text-black bg-fomo-card-1"
               dir="auto"
             >
               <figure class="" v-if="actorAvatarURL">
@@ -102,6 +102,7 @@
               </span>
             </div>
             <inline-address
+              class="bg-fomo-card-2 text-black"
               v-if="event.physicalAddress"
               :physical-address="event.physicalAddress"
             />
diff --git a/src/components/Image/LazyImage.vue b/src/components/Image/LazyImage.vue
index d21937567..48344e353 100644
--- a/src/components/Image/LazyImage.vue
+++ b/src/components/Image/LazyImage.vue
@@ -13,7 +13,7 @@
       <!-- Show the real image on the top and fade in after loading -->
       <img
         ref="image"
-        class="transition-opacity duration-500 rounded-lg object-cover h-full w-full"
+        class="transition-opacity duration-500 object-cover h-full w-full"
         :class="imageOpacity"
         alt=""
         src=""
diff --git a/src/components/Local/CloseContent.vue b/src/components/Local/CloseContent.vue
index dc3d45e57..dc68d6517 100644
--- a/src/components/Local/CloseContent.vue
+++ b/src/components/Local/CloseContent.vue
@@ -27,7 +27,7 @@
         <span class="">&lt;</span>
       </button>
     </div> -->
-    <div class="overflow-hidden">
+    <div class="">
       <div
         class="multi-card-event"
       >
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 096899d0c..154417da4 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -3,6 +3,9 @@ module.exports = {
   darkMode: "class",
   theme: {
     extend: {
+      boxShadow: {
+        "eventcard": "0 2px 13px -5px rgba(0, 0, 0, 1)",
+      },
       colors: {
         primary: "#1e7d97",
         secondary: "#ffd599",