diff --git a/src/components/map/layers/EventPopup.js b/src/components/map/layers/EventPopup.js
index c74069b33..1e48cf6d6 100644
--- a/src/components/map/layers/EventPopup.js
+++ b/src/components/map/layers/EventPopup.js
@@ -5,6 +5,7 @@ import React, { useEffect } from 'react'
 import { EVENT_ID_FIELD } from '../../../util/geojson.js'
 import { formatTime, formatCoordinate } from '../../../util/helpers.js'
 import Popup from '../Popup.js'
+import classes from './styles/EventPopup.module.css'
 
 // Returns true if value is not undefined or null;
 const hasValue = (value) => value !== undefined || value !== null
@@ -87,7 +88,7 @@ const EventPopup = ({
         <Popup
             coordinates={coordinates}
             onClose={onClose}
-            className="dhis2-map-popup-event"
+            className={classes.eventPopup}
         >
             {error && <span>{i18n.t('Could not retrieve event data')}</span>}
             {!error && (
diff --git a/src/components/map/layers/styles/EventPopup.module.css b/src/components/map/layers/styles/EventPopup.module.css
new file mode 100644
index 000000000..2b0976f80
--- /dev/null
+++ b/src/components/map/layers/styles/EventPopup.module.css
@@ -0,0 +1,20 @@
+.eventPopup {
+    max-height: 300px;
+    overflow: auto;
+    line-height: 14px;
+    max-width: 400px;
+}
+
+.eventPopup th, .eventPopup td {
+    text-align: left;
+    vertical-align: top;
+}
+
+.eventPopup tr th {
+    font-weight: 500;
+    padding-right: var(--spacers-dp4);
+}
+
+.eventPopup tr td {
+    min-width: 120px;
+}
diff --git a/src/components/map/styles/Popup.css b/src/components/map/styles/Popup.css
index 854912430..d2e1ee13f 100644
--- a/src/components/map/styles/Popup.css
+++ b/src/components/map/styles/Popup.css
@@ -7,10 +7,6 @@
     min-width: 150px;
 }
 
-.dhis2-map-popup-event {
-    overflow-x: auto;
-}
-
-.dhis2-map-popup-event th {
-    text-align: left;
+.maplibregl-popup-close-button:focus {
+    outline: none;
 }