diff --git a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
index f11bbc8d..ed913457 100644
--- a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
+++ b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
@@ -21,8 +21,8 @@ const layer1: Layer = {
         display: PopupDisplayTypes.Tooltip,
         getContent: async (_, properties) => {
             await timeout(500);
-            const { key } = properties as { key: string };
-            return Promise.resolve(`<h4>${key}</h4>`);
+            const { key, description } = properties as Record<string, unknown>;
+            return Promise.resolve(`<b>${key}</b><div>${description}<div>`);
         },
         getLoadingContent: () => 'Loading...',
     },
@@ -42,7 +42,7 @@ const layer2: Layer = {
                 date: string;
                 description: string;
             };
-            return Promise.resolve(`<h4>${name}</h4><p>${description}<p/><small>${date}</small>`);
+            return Promise.resolve(`<b>${name}</b><p>${description}<p/><small>${date}</small>`);
         },
         getLoadingContent: () => 'Loading...',
     },
diff --git a/packages/visualizations-react/stories/Poi/sources.ts b/packages/visualizations-react/stories/Poi/sources.ts
index 5b2b723b..265c0191 100644
--- a/packages/visualizations-react/stories/Poi/sources.ts
+++ b/packages/visualizations-react/stories/Poi/sources.ts
@@ -15,7 +15,8 @@ const sources : PoiMapData["sources"] = {
                         coordinates: [2.357573,48.837904],
                     },
                     properties: {
-                        key: 'Paris'
+                        key: 'Paris',
+                        description: 'Officia deserunt commodo enim ea ad veniam enim consectetur aliquip adipisicing duis. Exercitation aute velit pariatur est et ea qui veniam ad duis quis ad aliquip. Ipsum exercitation dolor tempor deserunt sunt amet laborum tempor excepteur est sunt ea quis.'
                     },
                 },
                 {
@@ -26,7 +27,8 @@ const sources : PoiMapData["sources"] = {
                         coordinates: [-0.563328,44.838245],
                     },
                     properties: {
-                        key: 'Bordeaux'
+                        key: 'Bordeaux',
+                        description: 'Pariatur duis mollit sit id ullamco ea non ad dolore voluptate nostrud deserunt fugiat proident. Sunt dolor qui consectetur exercitation mollit proident Lorem laborum cillum sit Lorem id eiusmod. Lorem culpa tempor aliqua aliquip reprehenderit. Aute officia reprehenderit aute pariatur incididunt nostrud exercitation voluptate id est ex. Qui eiusmod est enim est ipsum elit laboris.'
                     },
                 },
                 {
@@ -37,7 +39,8 @@ const sources : PoiMapData["sources"] = {
                         coordinates: [-1.552924,47.214847],
                     },
                     properties: {
-                        key: 'Nantes'
+                        key: 'Nantes',
+                        description: "Irure incididunt deserunt officia eiusmod occaecat duis nostrud sint excepteur. Id non voluptate non proident sunt sit nisi eiusmod sit excepteur duis cillum adipisicing. Nostrud officia ad tempor quis commodo aute elit tempor reprehenderit esse est aute fugiat reprehenderit. Aliquip eu occaecat Lorem cupidatat labore consequat. Culpa commodo sunt proident exercitation. Enim voluptate minim veniam enim nulla aute dolor magna est elit aliqua. Ex occaecat fugiat laboris do do dolor nostrud cupidatat."
                     },
                 },
                 {
@@ -48,7 +51,8 @@ const sources : PoiMapData["sources"] = {
                         coordinates: [5.360529,43.303114],
                     },
                     properties: {
-                        key: 'Marseille'
+                        key: 'Marseille',
+                        description: "Dolore nisi non id labore. Ea deserunt irure nisi nisi deserunt anim nisi et. Culpa sint mollit deserunt ea eiusmod laborum nostrud."
                     },
                 },
             ],
@@ -65,7 +69,7 @@ const sources : PoiMapData["sources"] = {
                     properties: {
                         name: "Battle of Verdun",
                         date: "1916",
-                        description: "The Battle of Verdun was fought from 21 February to 18 December 1916 on the Western Front in France. The battle was the longest of the First World War and took place on the hills north of Verdun-sur-Meuse."
+                        description: "The Battle of Verdun was fought from 21 February to 18 December 1916 on the Western Front in France. The battle was the longest of the First World War and took place on the hills north of Verdun-sur-Meuse. Nisi magna dolor ullamco Lorem culpa ea tempor exercitation dolor ex cupidatat esse voluptate ea. Incididunt consectetur ut officia eiusmod voluptate commodo adipisicing tempor eiusmod esse nulla veniam ut. Aute ipsum eiusmod culpa dolore ea aliquip nulla consectetur reprehenderit in mollit nostrud. Elit commodo non est voluptate pariatur. Exercitation reprehenderit pariatur dolore aute elit ea dolor commodo cillum. Est dolore ut elit in. Ullamco est laborum aute labore. Cillum incididunt laboris do eiusmod fugiat enim veniam aliquip duis incididunt laboris anim nostrud. Laborum mollit esse magna fugiat fugiat fugiat aliquip." 
                     },
                     geometry: {
                         type: "Point",
diff --git a/packages/visualizations/src/components/Chart/Chart.svelte b/packages/visualizations/src/components/Chart/Chart.svelte
index 5cdd63a9..a9f0def0 100644
--- a/packages/visualizations/src/components/Chart/Chart.svelte
+++ b/packages/visualizations/src/components/Chart/Chart.svelte
@@ -245,6 +245,7 @@
             </div>
         {/if}
         <figure class="chart legend--{legendPosition}">
+            <!-- svelte-ignore a11y-no-interactive-element-to-noninteractive-role -->
             <canvas
                 role="img"
                 use:chartJs={chartConfig}
diff --git a/packages/visualizations/src/components/MapPoi/Map.ts b/packages/visualizations/src/components/MapPoi/Map.ts
index 23a96ce4..1522cb76 100644
--- a/packages/visualizations/src/components/MapPoi/Map.ts
+++ b/packages/visualizations/src/components/MapPoi/Map.ts
@@ -10,7 +10,7 @@ import maplibregl, {
     StyleSpecification,
 } from 'maplibre-gl';
 
-import { POPUP_OPTIONS, POPUP_WIDTH } from './constants';
+import { POPUP_CLASSNAME, POPUP_OPTIONS, POPUP_WIDTH } from './constants';
 import type { PopupsConfiguration, CenterZoomOptions } from './types';
 
 const CURSOR = {
@@ -190,15 +190,16 @@ export default class MapPOI {
         if (!this.popup.isOpen()) {
             this.popup.addTo(map);
         }
-        this.popup.addClassName('poi-map__popup--loading');
+        this.popup.addClassName(`${POPUP_CLASSNAME}--loading`);
         this.popup.setLngLat(geometry.coordinates as LngLatLike).setHTML(getLoadingContent());
 
         getContent(featureId, properties).then((content) => {
             this.popup.setHTML(content);
+            this.popup.removeClassName(`${POPUP_CLASSNAME}--loading`);
         });
 
         const classnameModifier = display === 'sidebar' ? 'addClassName' : 'removeClassName';
-        this.popup[classnameModifier](`${POPUP_OPTIONS.className}--as-sidebar`);
+        this.popup[classnameModifier](`${POPUP_CLASSNAME}--as-sidebar`);
 
         map.setFeatureState({ source, sourceLayer, id: featureId }, { 'popup-feature': true });
 
diff --git a/packages/visualizations/src/components/MapPoi/MapRender.svelte b/packages/visualizations/src/components/MapPoi/MapRender.svelte
index 95cf5b1e..76c384a7 100644
--- a/packages/visualizations/src/components/MapPoi/MapRender.svelte
+++ b/packages/visualizations/src/components/MapPoi/MapRender.svelte
@@ -122,6 +122,8 @@
         }
     }
     .map-card {
+        container-type: inline-size;
+        container-name: map-card;
         display: flex;
         flex-direction: column;
         margin: 0;
@@ -134,32 +136,103 @@
     figcaption h3 {
         margin: 0;
     }
+
     /* To add classes programmatically in svelte we will use a global selector. We place it inside a local selector to obtain some encapsulation and avoid side effects */
+
+    /* --- POPUP ---  */
     .map-card :global(.poi-map__popup) {
         /* To be above map controls (z-index: 2)*/
         z-index: 3;
-        /* 26px is for its padding */
-        max-height: calc(100% - 26px);
         height: auto;
-        overflow-y: auto;
+        max-height: 100%;
+        box-sizing: border-box;
     }
     .map-card :global(.poi-map__popup.poi-map__popup--as-sidebar) {
         /* TO DO: add common stylesheet */
-        transform: translate(13px, 13px) !important;
+        height: 100%;
+        max-height: 100%;
+        transform: translate(0px, 0px) !important;
+        padding: 13px 13px 0px 13px;
     }
+
+    /* --- POPUP TIP ---  */
     .map-card :global(.poi-map__popup.poi-map__popup--as-sidebar > .maplibregl-popup-tip) {
         display: none;
     }
+
+    /* --- POPUP CONTENT ---  */
     .map-card :global(.poi-map__popup > .maplibregl-popup-content) {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
         padding: 13px;
         border-radius: 6px;
-        box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.26);
+        max-height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
     }
     /* Add a more opacity and blur effect on map when cooperative gesture is shown */
     .map-card :global(.maplibregl-cooperative-gesture-screen) {
         background: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(2px);
     }
+
+    /* --- POPUP CLOSE BUTTON ---  */
+    .map-card :global(.maplibregl-popup-close-button) {
+        font-size: 16px;
+        padding: 0;
+        width: 24px;
+        height: 24px;
+        margin-bottom: 13px;
+        position: relative;
+        order: -1;
+        flex-shrink: 0;
+        left: calc(100% - 26px);
+    }
+    .map-card :global(.maplibregl-popup-close-button:hover) {
+        background-color: transparent;
+    }
+    /* Hide close button when content is loading */
+    .map-card :global(.poi-map__popup--loading .maplibregl-popup-close-button) {
+        display: none;
+    }
+
+    /* --- CONTROLS --- */
+    .map-card :global(.maplibregl-ctrl.maplibregl-ctrl-group) {
+        margin-top: 13px;
+        margin-right: 13px;
+    }
+
+    /* --- CONTAINER QUERIES ---  */
+    @container map-card (width < 600px) {
+        /* Force tooltip popup to behave like a sidebar popup */
+        .map-card :global(.poi-map__popup) {
+            height: 100%;
+            max-height: 100%;
+            transform: translate(0px, 0px) !important;
+            padding: 13px 13px 0px 13px;
+            width: 100%;
+            max-width: 100% !important;
+        }
+        .map-card :global(.maplibregl-popup-tip) {
+            display: none;
+        }
+        .map-card :global(.poi-map__popup > .maplibregl-popup-content) {
+            width: 100%;
+        }
+    }
+    @container map-card (width >= 600px) {
+        .map-card :global(.poi-map__popup) {
+            max-width: 300px !important;
+        }
+        /* Close button is not visible for tooltip popup */
+        .map-card
+            :global(.poi-map__popup:not(.poi-map__popup--as-sidebar)
+                .maplibregl-popup-close-button) {
+            display: none;
+        }
+    }
+
     .main {
         aspect-ratio: var(--aspect-ratio);
         flex-grow: 1;
diff --git a/packages/visualizations/src/components/MapPoi/constants.ts b/packages/visualizations/src/components/MapPoi/constants.ts
index c5a284c5..13adfd51 100644
--- a/packages/visualizations/src/components/MapPoi/constants.ts
+++ b/packages/visualizations/src/components/MapPoi/constants.ts
@@ -14,8 +14,10 @@ export const DEFAULT_DARK_GREY: Color = '#515457';
 
 export const POPUP_WIDTH = 300;
 
+export const POPUP_CLASSNAME = 'poi-map__popup';
+
 export const POPUP_OPTIONS: PopupOptions = {
-    className: 'poi-map__popup',
-    closeButton: false,
+    className: POPUP_CLASSNAME,
+    closeButton: true,
     closeOnClick: false,
 };