diff --git a/js/main.js b/js/main.js
index 0968e6c..5c6389c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -211,7 +211,7 @@ function displayPointsFromApi (points) {
 				popupContent = '<span class="no-data"> Aucune information renseignée, <a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=' + feature.properties.id + '">ajoutez la dans OpenStreetMap!</a></span>'
 			}
 			let html = '<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=' + feature.properties.id + '">' +
-				'✏️</a> <span class="color-indication" style="background-color: '+color+';">'+displayOutPowerGuessed+'</span> <br/>' + popupContent
+				'✏️</a> <span class="color-indication" style="background-color: '+color+';">'+displayOutPowerGuessed+'</span> <br/><span class="popup-content">' + popupContent +'</span>'
 
 			// console.log('layer', layer)
 			let marker = L.marker(layer._latlng, {
diff --git a/styles/style.css b/styles/style.css
index 28478fe..e982f5f 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -176,13 +176,16 @@ a {
 }
 
 .leaflet-popup-content {
+
+	word-break: break-all;
+	word-wrap: break-word;
+}
+.popup-content{
+	overflow: auto;
 	min-width: 10rem;
 	max-width: 20rem;
 	min-height: 5rem;
 	max-height: 10rem;
-	overflow: auto;
-	word-break: break-all;
-	word-wrap: break-word;
 }
 
 .popup-key {
@@ -191,6 +194,7 @@ a {
 }
 .popup-value{
 	min-width: 10rem;
+	max-width: 49%;
 	text-align: right;
 	display: inline-block;
 }
@@ -204,14 +208,16 @@ a {
 
 .color-indication {
 	min-width: 1rem;
+	max-width: 5rem;
 	height: 1rem;
 	padding: 1rem;
 	border-radius: 2rem;
 	display: block;
-	float: right;
-	margin: 0.5rem;
+	position: relative;
+	top: -2rem;
 	color: white;
 	text-shadow: 0 0 0.5rem #222;
+	clear:right;
 }
 
 .no-data {