diff --git a/projects/project-2/aufgabe3.js b/projects/project-2/aufgabe3.js
index d7952f5..c1748d7 100644
--- a/projects/project-2/aufgabe3.js
+++ b/projects/project-2/aufgabe3.js
@@ -2,8 +2,8 @@ const aufgabe3 = async () => {
 
     const wantedYears = [2015, 2016, 2017]
     const wantedSeries = [
-        {code: "SH_H2O_SAFE", displayName: "drinking water services"},
-        {code: "SH_SAN_SAFE", displayName: "sanitation services"}
+        {code: "SH_H2O_SAFE", displayName: "drinking water"},
+        {code: "SH_SAN_SAFE", displayName: "sanitation"}
     ]
     const levels = [0, 50.0, 80.0, 85.0, 90.0, 95.0, 99.0, 99.9]
 
@@ -26,11 +26,9 @@ const aufgabe3 = async () => {
             let dataArrays = (await Promise.all(requests)).map(arr => arr.data.data)
             const values = [].concat(...dataArrays)
             return values.filter(elem => elem.dimensions.Location === "ALLAREA")
-
         }
         const apiData = await Promise.all(wantedSeries.map(loadSeries))
         return [].concat(...apiData)
-
     }
 
     const getColor = percentage => {
@@ -55,12 +53,12 @@ const aufgabe3 = async () => {
     }
 
     const map = L.map('suiMap', {zoomControl: false}).setView([53.0, 14.0], 4)
-    L.control.zoom({position: 'bottomleft'}).addTo(map)
     map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
         minZoom: 0,
         maxZoom: 18
     }))
+
     const [geojsonData, apiData] = await Promise.all([
         $.getJSON('europe.geo.json'),
         loadData()
@@ -116,8 +114,8 @@ const aufgabe3 = async () => {
 
     info.addTo(map)
 
+    // Create datalayer instances for series and year
     let layers = {}
-
     for (let currSeries of wantedSeries) {
         for (let currYear of wantedYears) {
             let fullSeriesName = `${currSeries.code}_${currYear}`
@@ -155,13 +153,44 @@ const aufgabe3 = async () => {
                     })
                 }
             })
-            layers[`${currSeries.displayName} ${currYear}`] = geoJsonLayer
+            layers[`${currSeries.code}_${currYear}`] = geoJsonLayer
         }
     }
 
-    map.addLayer(Object.values(layers)[0])
+    // Create button layer selector
+    const layerSelector = L.control({position: "topright"})
+    layerSelector._div = L.DomUtil.create("div", "info text-center")
+    layerSelector._div.id = "layerSelector"
+    layerSelector.onAdd = () => {
+        const createButtonGroup = (values, groupName) => {
+            let outer = `<div class="btn-group btn-group-sm btn-group-toggle my-1 w-100" data-toggle="buttons">`
+            for (let elem of values) {
+                outer += `
+                    <label class="btn btn-primary">
+                        <input type="radio" name="${groupName}" value="${elem.value}">${elem.name}
+                    </label>`
+            }
+            outer += `</div>`
+            return outer
+        }
+        let seriesDiv = createButtonGroup(wantedSeries.map(ele => ({value: ele.code, name: ele.displayName})), "series")
+        let yearDiv = createButtonGroup(wantedYears.map(ele => ({value: ele, name: ele})), "year")
 
-    L.control.layers(layers, null).addTo(map)
+        layerSelector._div.innerHTML = [seriesDiv, yearDiv].join("<br>")
+        return layerSelector._div
+    }
+    layerSelector.addTo(map)
+
+    // Create layerGroup for data layer (to keep the base osm layer when changing the data layer)
+    const dataLayerGroup = L.layerGroup().addTo(map)
+    $("#layerSelector input:radio").change(() => {
+        let selectedSeries = $("#layerSelector input:radio[name='series']:checked")[0]?.value
+        let selectedYear = $("#layerSelector input:radio[name='year']:checked")[0]?.value
+        if (selectedSeries && selectedYear) {
+            dataLayerGroup.clearLayers()
+            dataLayerGroup.addLayer(layers[selectedSeries + "_" + selectedYear])
+        }
+    })
 }
 
 aufgabe3()
diff --git a/projects/project-2/index.html b/projects/project-2/index.html
index 0f9c8fc..00bd494 100644
--- a/projects/project-2/index.html
+++ b/projects/project-2/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="html">
 <head>
-    <title>Leaflet GeoJSON - Population Europe</title>
+    <title>Geo Visualisierung - Projekt 2</title>
     <meta charset="utf-8"/>
     <link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css"/>
     <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
@@ -13,12 +13,12 @@
 <body class="bg-dark">
 
 <nav class="navbar navbar-light bg-light">
-    <h5 class="navbar-text text-dark">
+    <h5 class="navbar-text text-dark py-1 m-0">
         Geo Visualisierung - Projekt 2 - Tim Herbst & Marcel Schwarz
     </h5>
 </nav>
 
-<div class="mx-5 my-2">
+<div class="mx-4 my-2">
     <div class="row my-3">
         <div class="col">
             <div class="card">
@@ -44,14 +44,15 @@
         </div>
     </div>
 </div>
-<footer class="mt-5 text-center" style="background-color: #f5f5f5; height: 2rem">
-    <div class="container">
-        <span class="text-muted">&copy;2020 - Tim Herbst & Marcel Schwarz </span>
-    </div>
+<footer class="mt-3 d-flex align-items-center justify-content-center" style="background-color: #f5f5f5; height: 2rem">
+    <span class="text-muted">&copy;2020 - Tim Herbst & Marcel Schwarz </span>
 </footer>
 
 
 <script defer src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
+        crossorigin="anonymous"></script>
 <script defer src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
 <script defer src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
 <script defer src='https://unpkg.com/@turf/turf/turf.min.js'></script>