--- a/client/src/layers/Layers.vue	Thu Sep 13 09:12:50 2018 +0200
+++ b/client/src/layers/Layers.vue	Thu Sep 13 10:09:08 2018 +0200
@@ -1,12 +1,19 @@
 <template>
-    <div class="ui-element card layerselection shadow">
-        <div class="card-body">
-            <div class="headline">
-                <h4 class="card-title">Layers</h4>
+    <div>
+        <div @click="collapse" class="d-flex flex-column ui-element minimizer">
+            <div>
+                <i class="fa fa-th-list"></i>
             </div>
-            <hr>
-            <div class="d-flex flex-column">
-                <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
+        </div>
+        <div :class="layerSelectStyle">
+            <div v-if="!collapsed" class="card-body">
+                <div class="headline">
+                    <h4 class="card-title">Layers</h4>
+                </div>
+                <hr>
+                <div class="d-flex flex-column">
+                    <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
+                </div>
             </div>
         </div>
     </div>
@@ -14,9 +21,35 @@
 
 <style lang="scss">
 .layerselection {
+  margin-right: $offset;
   background-color: white;
-  margin-left: 0.5rem;
-  padding: 0.5rem;
+  margin-left: $small-offset;
+}
+
+.layerselectioncollapsed {
+  height: $icon-height;
+  width: $icon-width;
+  transition: $transition-fast;
+}
+
+.layerselectionexpanded {
+  height: $layerselect-height;
+  width: $layerselect-width;
+}
+
+.minimizer {
+  position: absolute;
+  z-index: 2;
+  margin-right: $offset;
+  right: $offset;
+  background-color: white;
+  border-radius: $border-radius;
+  padding-left: $small-offset;
+  padding-right: $small-offset;
+  padding-top: $x-small-offset;
+  margin-left: $offset;
+  height: $icon-width;
+  width: $icon-height;
 }
 </style>
 
@@ -25,13 +58,31 @@
 import { mapGetters } from "vuex";
 export default {
   name: "layers",
+  data() {
+    return {
+      collapsed: false
+    };
+  },
   components: {
     Layerselect
   },
   computed: {
-    ...mapGetters("mapstore", ["layers"])
+    ...mapGetters("mapstore", ["layers"]),
+    layerSelectStyle() {
+      return {
+        "ui-element": true,
+        card: true,
+        layerselection: true,
+        shadow: true,
+        layerselectionexpanded: !this.collapsed,
+        layerselectioncollapsed: this.collapsed
+      };
+    }
   },
   methods: {
+    collapse() {
+      this.collapsed = !this.collapsed;
+    },
     visibilityToggled(layer) {
       this.$store.commit("mapstore/toggleVisibility", layer);
     }