diff --git a/frontend/quasar.conf.js b/frontend/quasar.conf.js
index ab65a8f..d66cdbf 100644
--- a/frontend/quasar.conf.js
+++ b/frontend/quasar.conf.js
@@ -56,7 +56,8 @@ module.exports = function (ctx) {
         'QInput',
         'QFab',
         'QFabAction',
-        'QDialog'
+        'QDialog',
+        'QFooter'
       ],
 
       directives: [
diff --git a/frontend/src/layouts/MyLayout.vue b/frontend/src/layouts/MyLayout.vue
index 4faab9f..b2bc480 100644
--- a/frontend/src/layouts/MyLayout.vue
+++ b/frontend/src/layouts/MyLayout.vue
@@ -1,8 +1,15 @@
 <template>
   <q-layout view="hhh Lpr lFf">
-    <q-header elevated class="bg-white text-green-8">
+    <q-header id="qheader" elevated class="bg-white text-grey-14">
       <q-toolbar class="q-pa-md">
+        <q-img src="statics/buga_logo.svg" style="max-width: 40px;" class="q-mr-sm" />
+
+        <q-toolbar-title>
+          BuGa Geocaching
+        </q-toolbar-title>
+
         <q-btn
+          class="desktop-hide"
           flat
           dense
           ripple
@@ -11,11 +18,6 @@
         >
           <q-icon name="menu" />
         </q-btn>
-
-        <q-toolbar-title>
-          BuGa Geocaching
-        </q-toolbar-title>
-
         <!--<div>Quasar v{{ $q.version }}</div>-->
       </q-toolbar>
     </q-header>
@@ -114,6 +116,7 @@ export default {
   data() {
     return {
       leftDrawerOpen: this.$q.platform.is.desktop,
+      //menuButtonVisible: !this.$q.platform.is.desktop,
       //leftDrawerOpen: true,
       //miniState: true
     };
diff --git a/frontend/src/pages/Index.vue b/frontend/src/pages/Index.vue
index 5c54dac..af6ecc8 100644
--- a/frontend/src/pages/Index.vue
+++ b/frontend/src/pages/Index.vue
@@ -1,54 +1,61 @@
 <template>
-  <div class="q-pa-md row items-start q-gutter-md">
-    <q-card class="my-card">
-      <q-card-section>
-        {{ lorem }}
-      </q-card-section>
-    </q-card>
+  <q-page>
+      <q-tab-panels v-model="tab" animated swipeable>
+        <q-tab-panel name="map" class="q-pa-none">
+          <q-img src="statics/osm_mock.png" class="full-height full-width" :style="mapHeight"/>
+          <!--<img src="statics/osm_mock.png" class="full-height full-width"/>-->
+        </q-tab-panel>
 
-    <q-card
-      class="my-card text-white"
-      style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)"
-    >
-      <q-card-section>
-        <div class="text-h6">Our Changing Planet</div>
-        <div class="text-subtitle2">by John Doe</div>
-      </q-card-section>
+        <q-tab-panel name="list">
+          <div class="text-h6">Alarms</div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        </q-tab-panel>
+      </q-tab-panels>
 
-      <q-card-section>
-        {{ lorem }}
-      </q-card-section>
-    </q-card>
-
-    <q-card dark bordered class="bg-grey-9 my-card">
-      <q-card-section>
-        <div class="text-h6">Our Changing Planet</div>
-        <div class="text-subtitle2">by John Doe</div>
-      </q-card-section>
-
-      <q-separator dark inset />
-
-      <q-card-section>
-        {{ lorem }}
-      </q-card-section>
-    </q-card>
-
-    <q-card flat bordered class="my-card">
-      <q-card-section>
-        <div class="text-h6">Our Changing Planet</div>
-      </q-card-section>
-
-      <q-card-section>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-      </q-card-section>
-
-      <q-separator inset />
-
-      <q-card-section>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-      </q-card-section>
-    </q-card>
-  </div>
+      <q-separator />
+    <q-footer id="qfooter">
+    <q-tabs
+        v-model="tab"
+        dense
+        class="bg-grey-14"
+        align="justify"
+        inline-label
+      >
+        <q-tab name="map" label="Karte" icon="map"/>
+        <q-tab name="list" label="Liste" icon="list"/>
+      </q-tabs>
+    </q-footer>
+  </q-page>
 </template>
+
+<script>
+  import { dom } from 'quasar'
+  const { height, width } = dom
+  export default {
+    data () {
+      return {
+        tab: 'map',
+        hheight: 71.0,
+        fheight: 0.0,
+        //header: {h: '0px', w: 0}
+      }
+    },
+    mounted: function() {
+      //this.header.h = style(this.$refs.layout.$refs.header, 'height')
+      this.hheight = height(document.getElementById('qheader'));
+      this.fheight = height(document.getElementById('qfooter'));
+    },
+    computed: {
+      mapHeight () {
+        let header = this.hheight
+        let footer = this.fheight
+        let offset = header+footer+1;
+        console.log(offset)
+        return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' };
+      },
+      // computedMainStyle() {
+      //   return { height: `calc( 100vh - ${this.header.h} )` };
+      // }
+    }
+  }
+</script>
diff --git a/frontend/src/statics/buga_logo.svg b/frontend/src/statics/buga_logo.svg
new file mode 100644
index 0000000..9007135
--- /dev/null
+++ b/frontend/src/statics/buga_logo.svg
@@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 282.2"><defs><style>.cls-1,.cls-5{fill:#58c5c7;}.cls-1,.cls-2,.cls-3,.cls-7{opacity:0.65;isolation:isolate;}.cls-2,.cls-6{fill:#ec0090;}.cls-3,.cls-4{fill:#5ca038;}.cls-7,.cls-8{fill:#accd6b;}</style></defs><title>buga_logo</title><path class="cls-1" d="M272.4,1H256.8V83.4c-.3,6.2-.4,11.7-1.8,17.8-2.2,11.1-10.2,32.9-31.5,33.2h0c30.2-.2,43.3-22.1,46.4-33.2,1.9-6.1,2.1-11.5,2.5-17.8ZM165.6,1V83.4c.4,6.3.6,11.7,2.5,17.8,3,11.1,16.3,33,46.5,33.2-21.4-.2-29.4-22.1-31.6-33.2-1.4-6.1-1.5-11.5-1.8-17.8V1Zm49,133.4Z" transform="translate(0 -1)"/><path class="cls-2" d="M29.7,1H15.8V133.5H29.6V1ZM75.1,1H71.8c1.6,0,7.3.3,11.7,2.6C91.9,7.9,97.9,20,97.9,33.1c0,4.1-.7,14.2-6.7,21.9a36.4314,36.4314,0,0,1-5.1,5.3,20.8768,20.8768,0,0,1,7.8,3.4c8.2,5.7,12.7,18.1,12.7,31,0,4.5-.7,14.6-6,24-4.7,8.5-10.7,12.8-17.9,14.2-2.2.4-4.6.4-6.9.6h5.1c3.2-.2,6.6-.2,9.8-.6,10.2-1.3,18.7-5.7,25.3-14.2a39.4348,39.4348,0,0,0,8.5-24c0-12.9-6.4-25.4-17.9-31a38.99,38.99,0,0,0-11-3.4c3.6-2.4,5.7-3.8,7.2-5.3a29.4216,29.4216,0,0,0,9.4-21.9A31.5822,31.5822,0,0,0,91.8,3.6C85.5,1.2,76.8,1,75.1,1" transform="translate(0 -1)"/><path class="cls-3" d="M223.4,157.9v.5L271.2,282H291Zm-8.6,0L147.2,282H167l47.8-123.5Z" transform="translate(0 -1)"/><path class="cls-4" d="M271.2,282,223.4,158V282ZM167,282h47.8V158Z" transform="translate(0 -1)"/><path class="cls-5" d="M256.7,83.4V1H223.5V134.4c21.3-.3,29.3-22.1,31.5-33.2,1.3-6.1,1.4-11.6,1.7-17.8m-42.1,51V1H181.2V83.4c.3,6.2.4,11.7,1.8,17.8,2.1,11.1,10.2,33,31.6,33.2" transform="translate(0 -1)"/><path class="cls-6" d="M91.3,55c6-7.8,6.7-17.8,6.7-21.9C98,20,92,7.9,83.6,3.6,79,1.2,72.8,1,71.6,1H68V133.5h7.8c2.3-.2,4.7-.2,6.9-.6,7.2-1.3,13.2-5.7,17.9-14.2a50.9125,50.9125,0,0,0,6-24c0-12.9-4.5-25.3-12.7-31a22.1428,22.1428,0,0,0-7.7-3.4A31.9906,31.9906,0,0,0,91.3,55m-39,78.5h6.9V1H29.7V133.5Z" transform="translate(0 -1)"/><path class="cls-7" d="M59.1,283.2h0c-8.3-1.1-16-5.5-22.4-12.2l-.1-.1c-1-1.1-2-2.2-3-3.4a3.0388,3.0388,0,0,1-.5-.7,37.1169,37.1169,0,0,1-2.3-3.2,14.0034,14.0034,0,0,0-1-1.6c-.5-.9-1.1-1.8-1.6-2.7-.4-.7-.7-1.5-1.1-2.2s-.8-1.6-1.2-2.4a4.8745,4.8745,0,0,1-.4-1.1c-.6-1.3-1.1-2.5-1.6-3.9,0-.1-.1-.2-.1-.3a73.8391,73.8391,0,0,1-2.9-10.2,89.8012,89.8012,0,0,1-1.5-10.4c-.2-2.5-.3-4.9-.3-7.5,0-7.2.8-25.1,10.3-40.5,7.6-12.4,18.5-21.1,29.9-22.6h0c-18.5,1.2-33.8,10.2-44.5,22.6C1.2,196.1,0,214,0,221.2c0,33,25.5,60,59.1,62m68-61.8H108.3c0,2.5-.1,4.9-.3,7.3a89.8012,89.8012,0,0,1-1.5,10.4,70.0787,70.0787,0,0,1-2.9,10.2c0,.1-.1.2-.1.3-.5,1.3-1,2.6-1.6,3.9-.1.4-.3.7-.4,1.1l-1.2,2.4c-.4.8-.7,1.5-1.1,2.2-.5.9-1.1,1.8-1.6,2.7a14.0034,14.0034,0,0,1-1,1.6,37.103,37.103,0,0,1-2.3,3.2,3.0388,3.0388,0,0,0-.5.7c-1,1.2-2,2.3-3,3.4l-.1.1c-6.4,6.7-14.1,11.1-22.4,12.2h0c33.3-1.9,58.7-28.7,58.8-61.7" transform="translate(0 -1)"/><path class="cls-8" d="M59.1,283.2V158.1c-11.4,1.5-22.4,10.2-29.9,22.6-9.5,15.5-10.3,33.3-10.3,40.5-.1,33,18,59,40.2,62m49.2-61.8H68v61.7c22.1-2.9,40.2-28.7,40.3-61.7" transform="translate(0 -1)"/></svg>
\ No newline at end of file
diff --git a/frontend/src/statics/osm_mock.png b/frontend/src/statics/osm_mock.png
new file mode 100644
index 0000000..26eea45
Binary files /dev/null and b/frontend/src/statics/osm_mock.png differ