diff --git a/frontend/App.vue b/frontend/App.vue
index 8bfc830e3c2be34a5e35345e543a0cc725dfa561..b427165cf33e8345f08a7b08c29f81720bc69943 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="main">
-    <WeatherMap />
-  </div>
+  <!--  -->
+  <v-app>
+    <div class="main">
+    <WeatherMap id="weathermap"></WeatherMap>
+    <Legend id="legend"></Legend>
+    </div>
+  </v-app>
   
 </template>
 
@@ -10,15 +14,28 @@
         width:  100%;
         height: 100%;
     }
+    #legend{
+      width:20%;
+      height:inherit;
+      position:relative;
+      float:left;
+    }
+    #weathermap{
+      width:80%;
+      height:inherit;
+      position:relative;
+      float:left;
+    }
 </style>
 
 <script lang="ts">
 import { Component, Vue} from 'vue-property-decorator';
 import 'ol/ol.css';
-import WeatherMap from './src/WeatherMap.vue'
+import WeatherMap from './src/WeatherMap.vue';
+import Legend from './src/Legend.vue';
 
 @Component({
-    components: {WeatherMap}
+    components: {WeatherMap, Legend}
 })
 export default class App extends Vue{
     name: 'App'
diff --git a/frontend/index.js b/frontend/index.js
index a6e39c1bd5fa8c09f54f8ac071c7b82d5d2de903..8cbcea4b0d5b4f624e00eab8f21d42760886bb12 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
+import vuetify from './src/plugins/vuetify';
 import App from './App.vue';
-import vuetify from './src/plugins/vuetify'
-import 'regenerator-runtime';
+
 
 //new Vue({ render: createElement => createElement(App) }).$mount('#app');
 new Vue({vuetify, render: createElement => createElement(App)}).$mount('#app')
\ No newline at end of file
diff --git a/frontend/src/Legend.vue b/frontend/src/Legend.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c07c51bf483d7878fcfbc9c9d71565be12894505
--- /dev/null
+++ b/frontend/src/Legend.vue
@@ -0,0 +1,66 @@
+<template>
+    
+    <div>
+        <p class="font-weight-black">
+            Legend
+        </p>
+        <v-card>
+            <v-card-text>
+                <p class="font-weight-medium">
+                Durchschnittstemperatur Layer 1:
+                </p>
+                <v-range-slider
+                    v-model="range0"
+                    step="1"
+                    :min="daterange[0]"
+                    :max="daterange[1]"
+                    thumb-label="always"
+                    style="margin-top:3em"
+                >
+                </v-range-slider>
+            </v-card-text>
+        </v-card>
+        
+        <v-card style="margin-top:10px;">
+            <v-card-text>
+                <p class="font-weight-medium">
+                    Durchschnittstemperatur Layer 1:
+                </p>
+                <v-checkbox
+                    v-model="checkbox"
+                    :label="`Checkbox 1: ${checkbox.toString()}`"
+                ></v-checkbox>
+                <v-range-slider
+                    v-model="range1"
+                    step="1"
+                    :min="daterange[0]"
+                    :max="daterange[1]"
+                    thumb-label="always"
+                    style="margin-top:3em"
+                >
+                </v-range-slider>
+            </v-card-text>
+        </v-card>
+    </div>
+    
+</template>
+
+
+
+<script lang="ts">
+
+import {Vue, Ref, Component } from 'vue-property-decorator';
+
+@Component({})
+export default class Legend extends Vue{
+    private checkbox: boolean = true;
+    private daterange: number[] = [1900, 2020];
+    private range0: number[] = [1960, 1990];
+    private range1: number[] = [1991, 2020];
+
+    mounted(){
+        console.log("Legend mounted");
+    }
+
+}
+</script>
diff --git a/frontend/src/WeatherMap.vue b/frontend/src/WeatherMap.vue
index 7cdfebf434c7f0bda1190513a6e3a7462c065319..6b86e4adef3ef486b1b57b51f9706f16f6b51c35 100644
--- a/frontend/src/WeatherMap.vue
+++ b/frontend/src/WeatherMap.vue
@@ -76,10 +76,9 @@ import 'ol/ol.css';
 import StationLayer from './StationLayer';
 import MapProperties from './MapProperties';
 import StationChartPopup from './StationChartPopup.vue';
-import { component } from 'vue/types/umd';
 
 
-@Component({components:{StationChartPopup})
+@Component({components:{StationChartPopup}})
 export default class WeatherMap extends Vue{
  
     @Ref('weathermap') readonly targetElement!: HTMLElement;