diff --git a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
index cc8b6e253e..0eca36957c 100644
--- a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
+++ b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
@@ -22,7 +22,7 @@ function RenderIcon({
   return (
     <img
       src={eventLocationType.iconUrl}
-      className={classNames(invertLogoOnDark(eventLocationType?.iconUrl), "me-[10px] h-4 w-4")}
+      className={classNames(invertLogoOnDark(eventLocationType?.iconUrl, true), "me-[10px] h-4 w-4")}
       alt={`${eventLocationType.label} icon`}
     />
   );
diff --git a/packages/lib/invertLogoOnDark.ts b/packages/lib/invertLogoOnDark.ts
index 13aa216a95..657751b7a2 100644
--- a/packages/lib/invertLogoOnDark.ts
+++ b/packages/lib/invertLogoOnDark.ts
@@ -1,6 +1,15 @@
 // we want to invert all logos that contain -dark in their name
 // we don't want to invert logos that are not coming from the app-store
 
-export default function invertLogoOnDark(url?: string) {
-  return (url?.includes("-dark") || !url?.startsWith("/app-store")) && "dark:invert";
+export default function invertLogoOnDark(
+  url?: string,
+  // The background color of the logo's display location is opposite of the general theme of the application.
+  // Ex. General App theme is black but the logo's background color is white.
+  opposite?: boolean
+) {
+  return url?.includes("-dark") || !url?.startsWith("/app-store")
+    ? opposite
+      ? "invert dark:invert-0"
+      : "dark:invert"
+    : "";
 }