diff --git a/collisions/index.html b/collisions/index.html
index 00d6b2e..3586aad 100644
--- a/collisions/index.html
+++ b/collisions/index.html
@@ -8,6 +8,7 @@
         <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
         <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
         <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
+        <link href='../css/maps.css' rel='stylesheet' />
 
         <style>
 
@@ -56,7 +57,7 @@
         <div id='map'></div>
 
         <!-- controls -->
-        <div class = 'fill-lighten3 col4 pad2x row7 rounded-toggle pin-right'>
+        <div id="legend" class = 'fill-lighten2 col4 pad1 row7 pin-right'>
             <form>
                 <h5>Year</h5>
                 <div id="yearRadio" class='rounded-toggle inline'>
diff --git a/css/maps.css b/css/maps.css
index 6ccee3d..161a6bd 100644
--- a/css/maps.css
+++ b/css/maps.css
@@ -62,3 +62,24 @@ input[type=text].mapboxgl-ctrl-geocoder--input {    /*fixing geocode clash with
 .mapboxgl-ctrl-geocoder--icon-search {
   top: 7px;
 }
+
+#legend {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(0,0,0,0.5);
+  border-radius: 4px;
+  margin: 8px;
+}
+
+#legendbtn {
+  margin: 8px;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 4px;
+}
+
+@media only screen and (max-width: 600px) {
+  #legend, #legendbtn {
+    margin: 0px;
+  }
+}
diff --git a/desire/index.html b/desire/index.html
index 6009bab..d0d9130 100644
--- a/desire/index.html
+++ b/desire/index.html
@@ -9,6 +9,7 @@
     <script  data-cfasync="false" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
     <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
+    <link href='../css/maps.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }
         #app { position:absolute; top:0; right:0; bottom:0; left:0; }
@@ -28,7 +29,7 @@
 <body>
 <div id='app' class='col12 contain clip'>
 <div id='map'></div>
-<div class='col4 pad1  scroll-styled pin-topright  '>
+<div class='col4  scroll-styled pin-topright  '>
   <div id='legendbtn' class='fill-darken2 pad1 icon book hidden button fr' onclick="$('#legendbtn').toggle();$('#legend').toggle()"></div>
   <div id='legend' class='fill-lighten3  round'>
     <div id='closebtn' class='fill-darken2 pad1 icon close button fr' onclick="$('#legendbtn').toggle();$('#legend').toggle()"></div>
diff --git a/lts/index.html b/lts/index.html
index 3e2d560..df2a3eb 100644
--- a/lts/index.html
+++ b/lts/index.html
@@ -44,7 +44,7 @@
             </div> -->
 
             <!-- controls -->
-            <div class='col4 pad1 scroll-styled pin-topright '>
+            <div class='col4 scroll-styled pin-topright '>
                 <div id='legendbtn' class='fill-darken2 pad1 icon menu button hidden fr' onclick="toggle('legendbtn');toggle('legend');"></div>
                 <div id='legend' class='fill-darken2 round'>
                     <div id='closebtn' class='fill-darken2 pad1 icon close button fr' onclick="toggle('legendbtn');toggle('legend');"></div>
diff --git a/routing/index.html b/routing/index.html
index 4eef927..cffaf66 100644
--- a/routing/index.html
+++ b/routing/index.html
@@ -9,6 +9,7 @@
         <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
         <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
         <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
+        <link href='../css/maps.css' rel='stylesheet' />
 
         <style>
 
@@ -28,7 +29,7 @@
             <div id='map'></div>
 
             <!-- controls -->
-            <div class='col4 pad1  scroll-styled pin-topright dark '>
+            <div class='col4 scroll-styled pin-topright dark '>
                 <div id='legendbtn' class='fill-darken2 pad1 icon menu button fr hidden' onclick="toggle('legendbtn');toggle('legend');"></div>
                 <div id='legend' class='fill-darken2 round'>
                     <div id='closebtn' class='fill-darken2 pad1 icon close button fr' onclick="toggle('legendbtn');toggle('legend');"></div>
