diff --git a/server/static/app.js b/server/static/app.js
index 5869884..f9692d3 100644
--- a/server/static/app.js
+++ b/server/static/app.js
@@ -1,5 +1,5 @@
 const TREES_MIN_ZOOM = 17;
-const TREE_LABELS_MIN_ZOOM = 20;
+const TREE_LABELS_MIN_ZOOM = 19;
 
 var map = L.map('map', {
     maxZoom: 30,
@@ -55,7 +55,7 @@ function treeIcon(entry) {
     div.appendChild(label);
     function updateLabel() {
         label.style.visibility = map.getZoom() >= TREE_LABELS_MIN_ZOOM ? "visible" : "hidden";
-        label.style.fontSize = (75 + 20 * (map.getZoom() - TREE_LABELS_MIN_ZOOM)) + "%";
+        label.style.fontSize = (80 + 20 * (map.getZoom() - TREE_LABELS_MIN_ZOOM)) + "%";
     }
     updateLabel();
 
@@ -80,37 +80,105 @@ map.on('zoom', function() {
 });
 
 function treePopup(coords, entry) {
-    var popup = L.popup()
-        .setLatLng(coords);
+    var popup = L.popup({
+        minWidth: 600,
+        maxWidth: window.innerWidth / 3,
+        maxHeight: window.innerHeight * 0.7,
+    }).setLatLng(coords);
     popup.on('add', function() {
         var info = {};
         function update(newInfo) {
+            console.log("info +=", newInfo);
             Object.keys(newInfo).forEach(function(k) {
                 info[k] = newInfo[k];
             });
 
             popup.setContent(function() {
                 var div = document.createElement("div");
+                div.setAttribute("class", "tree-popup");
+                var div1 = document.createElement("div");
+                div.appendChild(div1);
                 var h2 = document.createElement("h2");
                 h2.textContent = entry.german;
                 if (entry.age)
                     h2.textContent += " (" + entry.age + ")";
-                div.appendChild(h2);
+                div1.appendChild(h2);
                 var p = document.createElement("p");
                 p.textContent = entry.botanic;
-                div.appendChild(p);
+                div1.appendChild(p);
 
                 if (info.area) {
-                    p = document.createElement("p");
-                    p.textContent = JSON.stringify(info.area);
-                    div.appendChild(p);
+                    function getArea(key) {
+                        var result = null;
+                        info.area.forEach(function(area) {
+                            if (!result && area[key]) result = area[key];
+                        });
+                        return result;
+                    }
+                    function addH3(text) {
+                        var h3 = document.createElement("h3");
+                        h3.textContent = text;
+                        div1.appendChild(h3);
+                    }
+                    function addP(text) {
+                        var p = document.createElement("p");
+                        p.textContent = text;
+                        div1.appendChild(p);
+                    }
+                    addH3("Bodenqualität");
+                    var schutt = getArea("schutt");
+                    if (schutt != null) {
+                        addP("Schutt: " + schutt);
+                    }
+                    var versiegelung = getArea("versiegelung");
+                    if (versiegelung != null) {
+                        addP("Versiegelung: " + versiegelung);
+                    }
+                    var gebietstyp = getArea("gebietstyp");
+                    if (gebietstyp != null) {
+                        addP("Gebietstyp: " + gebietstyp);
+                    }
+                    var natuerliche_bodenfunktion = getArea("natuerliche_bodenfunktion");
+                    if (natuerliche_bodenfunktion != null) {
+                        addP("Natürliche Bodenfunktion: " + natuerliche_bodenfunktion);
+                    }
                 }
-                if (info.tree) {
-                    p = document.createElement("p");
-                    p.style.maxHeight = "10em";
-                    p.style.overflow = "scroll";
-                    p.textContent = JSON.stringify(info.tree);
-                    div.appendChild(p);
+                if (info.tree && info.tree.details) {
+                    var details = info.tree.details;
+                    var div2 = document.createElement("div");
+                    function addH(level, text) {
+                        var h = document.createElement("h" + level);
+                        h.textContent = text;
+                        div2.appendChild(h);
+                    }
+                    function addP(text) {
+                        var p = document.createElement("p");
+                        p.textContent = text;
+                        div2.appendChild(p);
+                    }
+                    div.appendChild(div2);
+
+                    addH(2, details["Latin name"]);
+                    if (details.Wildlife == "1") {
+                        addP("Geliebt von der Fauna.");
+                    }
+                    addH(3, "Boden");
+                    if (details.Acid == "1") {
+                        addP("Sauer");
+                    }
+                    if (details.Alkaline == "1") {
+                        addP("Alkalisch");
+                    }
+                    if (details.Soil) {
+                        addP("Boden: " + details.Soil);
+                    }
+                    addH(3, "Wachstum");
+                    if (details["Growth rate"]) {
+                        addP("Wachstumsrate: " + details["Growth rate"]);
+                    }
+                    if (details.Height) {
+                        addP("Höhe: " + details.Height);
+                    }
                 }
 
                 return div;
@@ -126,7 +194,6 @@ function treePopup(coords, entry) {
         fetch(["", "tree", entry.id].join("/"))
             .then(res => res.json())
             .then(data => {
-                console.log("tree data", data);
                 update({ tree: data });
             });
     });
diff --git a/server/static/index.html b/server/static/index.html
index f444576..9302c36 100644
--- a/server/static/index.html
+++ b/server/static/index.html
@@ -8,7 +8,6 @@
     <style>
      #map { margin: 0; padding: 0; width: 100vw; height: 100vh; }
      body { margin: 0; padding: 0; font-family: sans-serif; }
-
      .leaflet-div-icon {
          background: none;
          border: none;
@@ -28,6 +27,33 @@
          color: black;
          text-shadow: -1px -1px 0px white, 1px -1px 0px white, -1px 1px 0px white, 1px 1px 0px white;
      }
+
+     .tree-popup {
+         display: flex;
+         flex-flow: row;
+         align-items: stretch;
+         justify-content: center;
+     }
+     .tree-popup p {
+         line-height: 1.2em;
+     }
+     .tree-popup > div {
+         flex: 0 1 50%;
+     }
+     .tree-popup > div:nth-child(1) {
+         padding-right: 2rem;
+     }
+     .tree-popup p {
+         margin: 0.2rem 0rem;
+     }
+     .tree-popup h2 {
+         margin: 1rem 0 0.5rem;
+     }
+     .tree-popup h3 {
+         margin: 0.5rem 0 0.2rem;
+         padding: 0;
+         border-bottom: 1px solid #aaa;
+     }
     </style>
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
 </head>