diff --git a/static/css/style.css b/static/css/style.css
index be7f690..f3e7acf 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -24,6 +24,34 @@ a {
     height: 100%;
 }
 
+.leaflet-popup-content {
+    font-family: 'Libre Baskerville', serif;
+    margin: 1.3em;
+    line-height: inherit;
+}
+
+.leaflet-popup-content-wrapper {
+    border-radius: 0;
+    text-align: justify;
+}
+
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+    background: #222;
+    color: #fff;
+    box-shadow: none;
+}
+
+.leaflet-popup-scrolled {
+    border: none;
+}
+
+.circle-marker {
+    border-radius: 50%;
+    border: 2px solid rgba(0,0,0,.5);
+    background: rgba(0,0,0,.2);
+}
+
 /* filters */
 
 #filter-picker {
@@ -125,12 +153,6 @@ a {
     border-color: #888888;
 }
 
-.circle-marker {
-    border-radius: 50%;
-    border: 2px solid rgba(0,0,0,.5);
-    background: rgba(0,0,0,.2);
-}
-
 /* overlay text */
 #overlay {
     position: absolute;
@@ -164,10 +186,9 @@ a {
 
 #overlay p {
     margin: 1em 0 1.2em;
-    padding: 1.6em 0 .6em;
-    line-height: 1.5;
-    font-size: 20px;
-    border-top: 3px solid #c0c0c0;
+    padding: .6em 0;
+    line-height: 2;
+    font-size: 24px;
 }
 
 #overlay a {
diff --git a/static/js/main.js b/static/js/main.js
index 1dfb2d8..65b35f6 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -27,9 +27,7 @@ $.getJSON('/articles/')
   })
 
 $('.begin').on('click', function (e) {
-  $('#overlay')
-    .fadeOut(700)
-    .then(function() { $(this).remove() })
+  $('#overlay').fadeOut(700)
 
   e.preventDefault()
   e.stopPropagation()
diff --git a/static/js/visualization.js b/static/js/visualization.js
index f655910..cdef415 100644
--- a/static/js/visualization.js
+++ b/static/js/visualization.js
@@ -27,22 +27,24 @@ class Visualization {
     })
 
     this.oms.legColors = {
-      usual: 'rgba(0,0,0,.1)',
-      highlighted: 'rgba(0,0,0,.4)'
+      usual: 'rgba(0,0,0,.2)',
+      highlighted: 'rgba(0,0,0,.5)'
     }
 
-    var popup = new L.Popup();
+    var popup = new L.Popup({
+      autoPanPadding: [96, 96],
+      closeButton: false,
+      maxHeight: 250
+    });
     this.oms.addListener('click', function (marker) {
+      if (map.getZoom() < 10)
+        map.setZoom(9)
+
       popup.setContent(marker.description.replace(/\n/g, '<br>'))
       popup.setLatLng(marker.getLatLng())
       map.openPopup(popup)
     })
 
-    this.oms.addListener('spiderfy', (marker) => {
-      this.map.setCenter(marker.getLatLng())
-      this.map.setZoom(20)
-    })
-
     // set up markers
     this._markers = new Map()
     this.setupMarkers()
diff --git a/views/index.tpl b/views/index.tpl
index 9814ba3..0748d30 100644
--- a/views/index.tpl
+++ b/views/index.tpl
@@ -3,15 +3,15 @@
 <head>
     <meta charset="utf-8">
     <title>A mad world - Rechte Übergriffe in Berlin 2005 bis 2014</title>
+    <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
     <link rel="stylesheet" type="text/css" href="/static/css/style.css">
-    <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700' rel='stylesheet' type='text/css'>
 </head>
 <body>
     <script>document.body.classList.add('js')</script>
     <div id="overlay">
         <div class="text">
-            <h1>A mad world</h1>
+            <h1>A mad world:</h1>
             <p>
                 Jeder Punkt dieser Karte steht für einen Übergriff im Zeitraum von Januar 2005 bis November 2014.<br>
                 Die Chronik wurde erstellt von <a href="http://reachoutberlin.de/" target="_blank">ReachOut Berlin</a>. Analyse und Visualisierung von Joshua Widmann und Arne Schlüter.
