diff --git a/src/main/webapp/css/mapModal.css b/src/main/webapp/css/mapModal.css
index 161c578b24d60905e1992d2e42be772c7aec0201..40990f46c4d456ba5612050c98205438245b592d 100644
--- a/src/main/webapp/css/mapModal.css
+++ b/src/main/webapp/css/mapModal.css
@@ -2,19 +2,22 @@
     display: none;
     position: fixed;
     z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
+    left: 50%;
+    top: 50%;
+    width: 90%;
+    height: 90%;
     overflow: hidden;
     background-color: rgba(0, 0, 0, 0.9);
+    transform: translate(-50%, -50%);
+    border: 2px solid #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    border-radius: 15px;
 }
 
-.map-modal-content {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    background-color: #fefefe;
+.map-modal.show {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 #selected-point-info-panel {
@@ -72,4 +75,4 @@
 #new-point-form {
     z-index: 1200;
     position: absolute;
-}
\ No newline at end of file
+}
diff --git a/src/main/webapp/js/mapModal.js b/src/main/webapp/js/mapModal.js
index 33770f1f148cca2ee05790f2e39c774c3811e150..1a773e93d00f76be7ddef9bcfbfeae33490707c4 100644
--- a/src/main/webapp/js/mapModal.js
+++ b/src/main/webapp/js/mapModal.js
@@ -122,7 +122,7 @@ class MapModal {
     addMapContainer(parentDiv, id) {
         const mapContainer = document.createElement('div');
         mapContainer.id = id;
-        mapContainer.style.height = '100vh';
+        mapContainer.style.height = '100%';
         mapContainer.style.width = '100%';
         mapContainer.style.position = 'relative';
         parentDiv.appendChild(mapContainer);
@@ -438,7 +438,9 @@ class MapModal {
      * @param zoomLevel
      */
     openModal(selectedPointOfInterestId, latitude, longitude, zoomLevel) {
-        this.mapModalElement.style.display = 'block';
+        this.mapModalElement.style.display = 'flex';
+        this.mapModalElement.style.justifyContent = 'center';
+        this.mapModalElement.style.alignItems = 'center';
         this.initMap(latitude, longitude, zoomLevel);
         if (selectedPointOfInterestId) {
             this.selectPointById(selectedPointOfInterestId);
@@ -643,4 +645,4 @@ const LegendControl = Control.extend({
 });
 
 // Export the module
-export default MapModal;
\ No newline at end of file
+export default MapModal;