diff --git a/backend/module/eCampApi/src/eCampApi/V1/Rpc/Auth/AuthController.php b/backend/module/eCampApi/src/eCampApi/V1/Rpc/Auth/AuthController.php
index 9420b76b68..190ea42920 100644
--- a/backend/module/eCampApi/src/eCampApi/V1/Rpc/Auth/AuthController.php
+++ b/backend/module/eCampApi/src/eCampApi/V1/Rpc/Auth/AuthController.php
@@ -57,9 +57,11 @@ public function indexAction() {
         }
         if ($user != null) {
             $data['user'] = $user->getDisplayName();
+            $data['username'] = $user->getUsername();
             $data['role'] = $user->getRole();
         } else {
             $data['user'] = 'guest';
+            $data['username'] = 'guest';
             $data['role'] = 'guest';
         }
 
diff --git a/backend/module/eCampApi/src/eCampApi/V1/Rpc/Index/IndexController.php b/backend/module/eCampApi/src/eCampApi/V1/Rpc/Index/IndexController.php
index 3eb6d4a8d8..81ed10cbce 100644
--- a/backend/module/eCampApi/src/eCampApi/V1/Rpc/Index/IndexController.php
+++ b/backend/module/eCampApi/src/eCampApi/V1/Rpc/Index/IndexController.php
@@ -37,6 +37,14 @@ public function indexAction() {
         }
         if ($user != null) {
             $data['user'] = $user->getDisplayName();
+
+            $data['profile'] = Link::factory([
+                'rel' => 'profile',
+                'route' => [
+                    'name' => 'e-camp-api.rest.doctrine.user',
+                    'params' => [ 'user_id' => $userId ]
+                ]
+            ]);
         } else {
             $data['user'] = 'guest';
         }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 54ffcb5e3c..382af10d56 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,25 +1,132 @@
-
 <template>
-  <div id="app">
-    <component :is="layout">
+  <v-app>
+    <router-view name="topbar" />
+
+    <router-view name="aside" />
+
+    <!-- main content -->
+    <v-content>
       <router-view />
-    </component>
-  </div>
+    </v-content>
+
+    <router-view name="bottombar" />
+
+    <!-- footer -->
+    <v-footer v-if="$vuetify.breakpoint.mdAndUp"
+              app color="grey lighten-5">
+      eCamp v0.1.0
+    </v-footer>
+  </v-app>
 </template>
 
 <script>
-const defaultLayout = 'default'
-
 export default {
-  name: 'App',
-  computed: {
-    layout () {
-      return (this.$route.meta.layout || defaultLayout) + '-layout'
-    }
-  }
+  name: 'App'
 }
 </script>
 <style lang="scss">
+  @import "src/scss/global";
   // consider replacing with CDN for production
   @import '../node_modules/@mdi/font/css/materialdesignicons.css';
+
+  .v-navigation-drawer--temporary.v-navigation-drawer--clipped {
+    z-index: 5;
+    margin-top: 116px;
+  }
+
+  .v-btn.ec-drawer-collapse {
+    right: 0;
+  }
+
+  .v-content {
+    height: 100vh;
+    position: relative;
+  }
+
+  .v-app-bar .v-toolbar__content {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+
+  .v-content__wrap {
+    overflow: scroll;
+    position: static;
+  }
+
+  .user-nav {
+    border-top-left-radius: 0!important;
+    border-top-right-radius: 0!important;
+  }
+
+  .v-navigation-drawer--temporary.v-navigation-drawer--clipped {
+    z-index: 5;
+    margin-top: 116px;
+  }
+
+  .v-btn--open {
+    background: #B0BEC5 !important;
+    color: rgba(0, 0, 0, 0.87) !important;
+  }
+
+  .ec-usermenu {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    right: 0;
+    left: inherit !important;
+
+    .v-list {
+      border-radius: 0;
+    }
+  }
+
+  .v-app-bar .v-toolbar__content {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+
+  .v-navigation-drawer__content .v-card {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+
+  @media #{map-get($display-breakpoints, 'xs-only')}{
+    .v-content .container {
+      min-height: 100%;
+      display: flex;
+
+      .v-card {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        flex: auto;
+      }
+    }
+  }
+
+  .ec-menu-left {
+    left: 0 !important;
+    font-feature-settings: 'tnum';
+  }
+
+  @media #{map-get($display-breakpoints, 'sm-and-down')}{
+    .container.container--fluid {
+      padding: 0;
+
+      & > .v-card {
+        border-radius: 0;
+      }
+    }
+    .sr-only-sm-and-down {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      clip-path: inset(50%);
+      border: 0;
+    }
+  }
 </style>
diff --git a/frontend/src/components/base/BackButton.vue b/frontend/src/components/base/BackButton.vue
new file mode 100644
index 0000000000..e2c171b480
--- /dev/null
+++ b/frontend/src/components/base/BackButton.vue
@@ -0,0 +1,16 @@
+<template>
+  <v-btn aria-label="Zurück"
+         icon @click="$router.go(-1)">
+    <v-icon>mdi-arrow-left</v-icon>
+  </v-btn>
+</template>
+
+<script>
+export default {
+  name: 'BackButton'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/base/ButtonAdd.vue b/frontend/src/components/base/ButtonAdd.vue
index 671b5f896f..0f886add08 100644
--- a/frontend/src/components/base/ButtonAdd.vue
+++ b/frontend/src/components/base/ButtonAdd.vue
@@ -1,9 +1,10 @@
 <template>
   <v-btn
-    small
+    class="px-3 px-sm-4"
+    min-width="0"
     color="success"
     v-on="$listeners">
-    <v-icon :left="$vuetify.breakpoint.smAndUp" size="150%">mdi-plus</v-icon>
+    <v-icon :left="$vuetify.breakpoint.smAndUp" size="150%">{{ icon }}</v-icon>
     <span class="d-none d-sm-block">
       <slot>Add</slot>
     </span>
@@ -12,7 +13,10 @@
 
 <script>
 export default {
-  name: 'ButtonAdd'
+  name: 'ButtonAdd',
+  props: {
+    icon: { type: String, default: 'mdi-plus' }
+  }
 }
 </script>
 
diff --git a/frontend/src/components/base/ButtonDelete.vue b/frontend/src/components/base/ButtonDelete.vue
index f8dfc7fbe9..d4ae58538e 100644
--- a/frontend/src/components/base/ButtonDelete.vue
+++ b/frontend/src/components/base/ButtonDelete.vue
@@ -1,9 +1,10 @@
 <template>
   <v-btn
-    small
+    class="px-3 px-sm-4"
+    min-width="0"
     color="error"
     v-on="$listeners">
-    <v-icon :left="$vuetify.breakpoint.smAndUp" size="150%">mdi-delete</v-icon>
+    <v-icon :left="$vuetify.breakpoint.smAndUp" size="150%">{{ icon }}</v-icon>
     <span class="d-none d-sm-block">
       <slot>Delete</slot>
     </span>
@@ -12,7 +13,10 @@
 
 <script>
 export default {
-  name: 'ButtonDelete'
+  name: 'ButtonDelete',
+  props: {
+    icon: { type: String, default: 'mdi-delete' }
+  }
 }
 </script>
 
diff --git a/frontend/src/components/base/ButtonEdit.vue b/frontend/src/components/base/ButtonEdit.vue
index 4b2499fa66..58b40ba690 100644
--- a/frontend/src/components/base/ButtonEdit.vue
+++ b/frontend/src/components/base/ButtonEdit.vue
@@ -1,9 +1,9 @@
 <template>
   <v-btn
-    small
+    class="px-3 px-sm-4"
     color="primary"
     v-on="$listeners">
-    <v-icon :left="$vuetify.breakpoint.smAndUp" size="150%">mdi-pencil</v-icon>
+    <v-icon :left="$vuetify.breakpoint.smAndUp" size="150%">{{ icon }}</v-icon>
     <span class="d-none d-sm-block">
       <slot>Edit</slot>
     </span>
@@ -12,7 +12,10 @@
 
 <script>
 export default {
-  name: 'ButtonEdit'
+  name: 'ButtonEdit',
+  props: {
+    icon: { type: String, default: 'mdi-pencil' }
+  }
 }
 </script>
 
diff --git a/frontend/src/components/base/ContentCard.vue b/frontend/src/components/base/ContentCard.vue
index e5f4893be2..049bfca2a7 100644
--- a/frontend/src/components/base/ContentCard.vue
+++ b/frontend/src/components/base/ContentCard.vue
@@ -3,18 +3,15 @@ Displays the content wrapped inside a card.
 -->
 
 <template>
-  <v-card class="mb-4">
-    <v-toolbar dense color="blue-grey lighten-5">
-      <v-icon left>
-        {{ icon }}
-      </v-icon>
-      <v-toolbar-title>
+  <v-card :max-width="maxWidth" class="mx-auto">
+    <slot name="title">
+      <v-card-title v-if="title">
+        <v-icon v-if="icon" left>{{ icon }}</v-icon>
         {{ title }}
-      </v-toolbar-title>
-    </v-toolbar>
-    <v-card-text>
-      <slot />
-    </v-card-text>
+      </v-card-title>
+    </slot>
+    <v-skeleton-loader v-if="!loaded" type="article" />
+    <slot v-else />
   </v-card>
 </template>
 
@@ -22,15 +19,14 @@ Displays the content wrapped inside a card.
 export default {
   name: 'ContentCard',
   props: {
-    icon: { type: String, required: true },
-    title: { type: String, required: true }
-  },
-  data () {
-    return {
-    }
+    loaded: { type: Boolean, required: false, default: true },
+    title: { type: String, required: false, default: '' },
+    icon: { type: String, required: false, default: '' },
+    maxWidth: { type: String, default: '' }
   }
 }
 </script>
 
 <style scoped>
+  .v-card__title {font-weight: 600;}
 </style>
diff --git a/frontend/src/components/base/ContentGroup.vue b/frontend/src/components/base/ContentGroup.vue
new file mode 100644
index 0000000000..5ed4b4fb3d
--- /dev/null
+++ b/frontend/src/components/base/ContentGroup.vue
@@ -0,0 +1,34 @@
+<!--
+Displays the content wrapped inside a card.
+-->
+
+<template>
+  <v-sheet class="ec-content-group mb-8">
+    <slot name="title">
+      <div v-if="title" class="ec-content-group__title py-1 subtitle-1">
+        <v-icon v-if="icon" left>{{ icon }}</v-icon>
+        {{ title }}
+      </div>
+    </slot>
+    <v-skeleton-loader v-if="!loaded" type="article" />
+    <slot v-else />
+  </v-sheet>
+</template>
+
+<script>
+export default {
+  name: 'ContentGroup',
+  props: {
+    loaded: { type: Boolean, required: false, default: true },
+    title: { type: String, required: false, default: '' },
+    icon: { type: String, required: false, default: '' },
+    maxWidth: { type: String, default: '' }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .ec-content-group__title {
+    border-bottom: 1px solid map-get($blue-grey, 'lighten-4');
+  }
+</style>
diff --git a/frontend/src/components/base/Logo.vue b/frontend/src/components/base/Logo.vue
new file mode 100644
index 0000000000..e471835c65
--- /dev/null
+++ b/frontend/src/components/base/Logo.vue
@@ -0,0 +1,32 @@
+<template>
+  <v-toolbar-items>
+    <v-btn text class="px-2"
+           min-width="0" rounded
+           exact :to="{ name: 'home'}">
+      <v-toolbar-title>
+        <i>🏕</i>️<span v-if="text" class="ml-4 mr-2">eCamp</span>
+      </v-toolbar-title>
+    </v-btn>
+    <slot />
+  </v-toolbar-items>
+</template>
+
+<script>
+import { campRoute } from '@/router'
+
+export default {
+  name: 'Logo',
+  props: {
+    text: { type: Boolean, default: false }
+  },
+  computed: {
+    campHome () {
+      return this.camp ? campRoute(this.camp, 'program') : false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/base/MobileSearch.vue b/frontend/src/components/base/MobileSearch.vue
new file mode 100644
index 0000000000..006423e91b
--- /dev/null
+++ b/frontend/src/components/base/MobileSearch.vue
@@ -0,0 +1,52 @@
+<template>
+  <v-sheet min-height="56">
+    <v-app-bar
+      dense fixed
+      color="white"
+      style="z-index: 300"
+      :tile="false" class="ma-2 px-3">
+      <v-btn v-if="searchOpen" icon @click="searchOpen = false">
+        <v-icon>mdi-chevron-left</v-icon>
+      </v-btn>
+      <v-text-field
+        hide-details
+        :label="searchOpen ? 'Suchen' : 'Events & Camps suchen'"
+        single-line
+        @click="searchOpen = !searchOpen" />
+      <router-link :to="{name: 'profile'}">
+        <v-avatar size="32" class="ml-4">
+          <img
+            alt="Avatar"
+            src="https://avatars0.githubusercontent.com/u/9064066?v=4&s=460">
+        </v-avatar>
+      </router-link>
+    </v-app-bar>
+    <v-dialog
+      v-model="searchOpen"
+      style="z-index: 4"
+      overlay-color="white" hide-overlay
+      fullscreen transition="dialog-top-transition">
+      <v-card>
+        <v-sheet height="70" />
+        <v-card-text>
+          <v-skeleton-loader class="mx-4" boilerplate type="list-item-two-line@3" />
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </v-sheet>
+</template>
+
+<script>
+export default {
+  name: 'MobileSearch',
+  data () {
+    return {
+      searchOpen: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/base/NavDesktopSearch.vue b/frontend/src/components/base/NavDesktopSearch.vue
new file mode 100644
index 0000000000..566421cbe9
--- /dev/null
+++ b/frontend/src/components/base/NavDesktopSearch.vue
@@ -0,0 +1,27 @@
+<template>
+  <v-responsive :max-width="searchFocused ? 350 : 200" class="align-center transition-swing">
+    <v-text-field rounded
+                  hide-details solo
+                  dark label="Suchen…"
+                  solo-inverted single-line
+                  flat class="align-center px-2"
+                  append-icon="mdi-magnify"
+                  color="white" dense
+                  @focus="searchFocused = true" @blur="searchFocused = false" />
+  </v-responsive>
+</template>
+
+<script>
+export default {
+  name: 'NavDesktopSearch',
+  data () {
+    return {
+      searchFocused: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/base/NavDesktopUserMenu.vue b/frontend/src/components/base/NavDesktopUserMenu.vue
new file mode 100644
index 0000000000..c96e7b28e0
--- /dev/null
+++ b/frontend/src/components/base/NavDesktopUserMenu.vue
@@ -0,0 +1,69 @@
+<template>
+  <v-menu offset-y dark
+          right content-class="ec-usermenu"
+          transition="slide-y-transition"
+          z-index="5">
+    <template v-slot:activator="{ on,value }">
+      <v-toolbar-items>
+        <v-btn right text
+               :class="{ 'v-btn--open': value }" v-on="on">
+          <span class="sr-only-sm-and-down">
+            {{ username }}
+          </span>
+          <v-icon class="ma-2">mdi-account</v-icon>
+        </v-btn>
+      </v-toolbar-items>
+    </template>
+    <v-list dense class="user-nav"
+            light color="blue-grey lighten-5">
+      <v-list-item block :to="{ name: 'profile' }">
+        <v-icon left>mdi-account</v-icon>
+        <span>Profil</span>
+      </v-list-item>
+      <v-list-item block
+                   exact :to="{ name: 'camps', params: { groupName: encodeURI('Pfadi Bewegung Schweiz') } }">
+        <v-icon left>mdi-format-list-bulleted-triangle</v-icon>
+        <span>Meine Camps</span>
+      </v-list-item>
+      <v-list-item block @click="logout">
+        <v-icon v-if="logoutIcon" left>{{ logoutIcon }}</v-icon>
+        <v-progress-circular v-else indeterminate
+                             size="18" class="mr-2" />
+        <span>Log out</span>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+
+export default {
+  name: 'NavDesktopUserMenu',
+  data () {
+    return {
+      logoutIcon: 'mdi-logout'
+    }
+  },
+  computed: {
+    username () {
+      return this.api.get().profile().username
+    }
+  },
+  methods: {
+    logout () {
+      this.logoutIcon = ''
+      this.$auth.logout().then(() => this.$router.replace({ name: 'login' }))
+    },
+    prevent (event) {
+      event.stopImmediatePropagation()
+      event.preventDefault()
+      event.cancelBubble = true
+      return null
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/base/SideBar.vue b/frontend/src/components/base/SideBar.vue
new file mode 100644
index 0000000000..473e8deba3
--- /dev/null
+++ b/frontend/src/components/base/SideBar.vue
@@ -0,0 +1,44 @@
+<template>
+  <v-navigation-drawer v-if="$vuetify.breakpoint.smAndUp"
+                       v-model="drawer" app
+                       clipped permanent
+                       :mini-variant.sync="mini"
+                       mini-variant-width="40"
+                       color="blue-grey lighten-4">
+    <v-btn v-if="mini" icon>
+      <v-icon>mdi-format-list-bulleted-triangle</v-icon>
+    </v-btn>
+    <v-spacer />
+    <v-btn v-if="!mini" icon
+           fixed
+           class="ec-drawer-collapse ma-2"
+           style="z-index: 10;"
+           right @click.stop="mini = !mini">
+      <v-icon>mdi-chevron-left</v-icon>
+    </v-btn>
+
+    <v-divider />
+
+    <slot v-if="!mini" />
+  </v-navigation-drawer>
+</template>
+
+<script>
+export default {
+  name: 'SideBar',
+  data () {
+    return {
+      drawer: false
+    }
+  },
+  computed: {
+    mini () {
+      return !this.$vuetify.breakpoint.mdAndUp
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/camp/ApiDemo.vue b/frontend/src/components/camp/ApiDemo.vue
index 64a16bf177..7d7ebc8a8a 100644
--- a/frontend/src/components/camp/ApiDemo.vue
+++ b/frontend/src/components/camp/ApiDemo.vue
@@ -3,20 +3,22 @@ Displays details on a single camp and allows to edit them.
 -->
 
 <template>
-  <content-card icon="mdi-cogs" title="Api Demo">
+  <content-group title="Api Demo">
     <v-skeleton-loader v-if="camp()._meta.loading" type="article" />
     <v-form v-else>
       <v-text-field
         label="Name"
+        outlined hide-details="auto"
         readonly
         :value="camp().name"
-        class="mr-2 ml-2" />
+        class="my-4" />
       <api-text-field
         :value="camp().title"
         :uri="camp()._meta.self"
         fieldname="title"
         label="Titel"
         :auto-save="false"
+        class="my-4"
         readonly
         required />
       <api-textarea
@@ -26,6 +28,7 @@ Displays details on a single camp and allows to edit them.
         label="Motto"
         :auto-save="false"
         disabled
+        class="my-4"
         required />
 
       <api-checkbox
@@ -34,6 +37,7 @@ Displays details on a single camp and allows to edit them.
         fieldname="check"
         label="Checkbox example"
         readonly
+        class="mb-4"
         required />
 
       <api-time-picker
@@ -41,6 +45,7 @@ Displays details on a single camp and allows to edit them.
         :uri="camp()._meta.self"
         fieldname="time"
         label="Startzeit"
+        class="mb-4"
         disabled
         required />
 
@@ -50,6 +55,7 @@ Displays details on a single camp and allows to edit them.
         fieldname="color"
         label="Color Example"
         readonly
+        class="mb-4"
         required />
 
       <v-list>
@@ -60,19 +66,18 @@ Displays details on a single camp and allows to edit them.
           <v-list-item-content>
             <v-list-item-title>{{ period.description }}</v-list-item-title>
             <v-list-item-subtitle>{{ period.start }} - {{ period.end }}</v-list-item-subtitle>
-
-            <api-date-picker
-              :value="period.start"
-              :uri="period._meta.self"
-              fieldname="start"
-              label="Starttermin"
-              disabled
-              required />
           </v-list-item-content>
+          <api-date-picker
+            :value="period.start"
+            :uri="period._meta.self"
+            fieldname="start"
+            label="Starttermin"
+            disabled
+            required />
         </v-list-item>
       </v-list>
     </v-form>
-  </content-card>
+  </content-group>
 </template>
 
 <script>
@@ -83,11 +88,11 @@ import ApiTimePicker from '../form/ApiTimePicker'
 import ApiCheckbox from '../form/ApiCheckbox'
 import ApiColorPicker from '../form/ApiColorPicker'
 
-import ContentCard from '@/components/base/ContentCard'
+import ContentGroup from '@/components/base/ContentGroup'
 
 export default {
   name: 'ApiDemo',
-  components: { ContentCard, ApiTextField, ApiTextarea, ApiCheckbox, ApiDatePicker, ApiTimePicker, ApiColorPicker },
+  components: { ContentGroup, ApiTextField, ApiTextarea, ApiCheckbox, ApiDatePicker, ApiTimePicker, ApiColorPicker },
   props: {
     camp: { type: Function, required: true }
   },
diff --git a/frontend/src/components/camp/CampPeriods.vue b/frontend/src/components/camp/CampPeriods.vue
index b6e46a1aff..58d47d34e2 100644
--- a/frontend/src/components/camp/CampPeriods.vue
+++ b/frontend/src/components/camp/CampPeriods.vue
@@ -3,7 +3,7 @@ Displays all periods of a single camp and allows to edit them & create new ones
 -->
 
 <template>
-  <content-card icon="mdi-calendar-plus" title="Periods">
+  <content-group title="Periods">
     <v-skeleton-loader v-if="camp()._meta.loading" type="article" />
     <v-list>
       <period-item
@@ -24,18 +24,18 @@ Displays all periods of a single camp and allows to edit them & create new ones
         </v-list-item-action>
       </v-list-item>
     </v-list>
-  </content-card>
+  </content-group>
 </template>
 
 <script>
-import ContentCard from '@/components/base/ContentCard'
 import ButtonAdd from '@/components/base/ButtonAdd'
 import PeriodItem from '@/components/camp/CampPeriodsListItem'
 import DialogPeriodCreate from '@/components/dialog/DialogPeriodCreate'
+import ContentGroup from '@/components/base/ContentGroup'
 
 export default {
   name: 'CampPeriods',
-  components: { ContentCard, ButtonAdd, PeriodItem, DialogPeriodCreate },
+  components: { ContentGroup, ButtonAdd, PeriodItem, DialogPeriodCreate },
   props: {
     camp: { type: Function, required: true }
   },
diff --git a/frontend/src/components/camp/CampPeriodsListItem.vue b/frontend/src/components/camp/CampPeriodsListItem.vue
index 1337cb8776..5dec15071d 100644
--- a/frontend/src/components/camp/CampPeriodsListItem.vue
+++ b/frontend/src/components/camp/CampPeriodsListItem.vue
@@ -4,7 +4,7 @@ Displays a single period as a list item including controls to edit and delete it
 
 <template>
   <v-list-item>
-    <v-list-item-content>
+    <v-list-item-content class="pt-0 pb-2">
       <v-list-item-title>{{ period.description }}</v-list-item-title>
       <v-list-item-subtitle>{{ period.start }} - {{ period.end }}</v-list-item-subtitle>
     </v-list-item-content>
diff --git a/frontend/src/components/camp/CampPicasso.vue b/frontend/src/components/camp/CampPicasso.vue
deleted file mode 100644
index 1f25b73171..0000000000
--- a/frontend/src/components/camp/CampPicasso.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<!--
-Listing all event instances of a single period.
--->
-
-<template>
-  <v-card>
-    <v-toolbar dense class="mb-3" color="blue-grey lighten-5">
-      <v-icon left>
-        mdi-account-group
-      </v-icon>
-      <v-toolbar-title class="overflow-visible">
-        Picasso
-      </v-toolbar-title>
-      <v-tabs v-model="tab" right
-              center-active background-color="blue-grey lighten-5">
-        <v-tab v-for="period in periods.items"
-               :key="period.id">
-          {{ period.description }}
-        </v-tab>
-      </v-tabs>
-    </v-toolbar>
-    <v-tabs-items v-model="tab">
-      <v-tab-item v-for="period in periods.items"
-                  :key="period.id">
-        <v-skeleton-loader v-if="events._meta.loading" class="ma-3"
-                           type="table-thead,table-row@6" />
-        <picasso v-else
-                 :camp="camp"
-                 :event-instances="period.event_instances().items"
-                 :start="new Date(Date.parse(period.start))"
-                 :end="new Date(Date.parse(period.end))" />
-      </v-tab-item>
-    </v-tabs-items>
-  </v-card>
-</template>
-<script>
-import Picasso from '@/components/Picasso'
-
-export default {
-  name: 'CampPicassso',
-  components: { Picasso },
-  props: {
-    camp: { type: Function, required: true }
-  },
-  data () {
-    return {
-      tab: null
-    }
-  },
-  computed: {
-    periods () {
-      return this.camp().periods()
-    },
-    events () {
-      return this.camp().events()
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/camp/CampSettings.vue b/frontend/src/components/camp/CampSettings.vue
index 947bc46ade..d7494a251c 100644
--- a/frontend/src/components/camp/CampSettings.vue
+++ b/frontend/src/components/camp/CampSettings.vue
@@ -3,14 +3,16 @@ Displays details on a single camp and allows to edit them.
 -->
 
 <template>
-  <content-card icon="mdi-cogs" title="Einstellungen">
+  <content-group title="Einstellungen">
     <v-skeleton-loader v-if="camp()._meta.loading" type="article" />
     <v-form v-else>
       <v-text-field
         label="Name"
+        outlined
         readonly
+        hide-details="auto"
         :value="camp().name"
-        class="mr-2 ml-2" />
+        class="my-4" />
       <api-text-field
         :value="camp().title"
         :uri="camp()._meta.self"
@@ -24,16 +26,16 @@ Displays details on a single camp and allows to edit them.
         label="Motto"
         required />
     </v-form>
-  </content-card>
+  </content-group>
 </template>
 
 <script>
-import ContentCard from '@/components/base/ContentCard'
 import ApiTextField from '@/components/form/ApiTextField'
+import ContentGroup from '@/components/base/ContentGroup'
 
 export default {
   name: 'CampSettings',
-  components: { ApiTextField, ContentCard },
+  components: { ContentGroup, ApiTextField },
   props: {
     camp: { type: Function, required: true }
   },
diff --git a/frontend/src/components/camp/CollaboratorListItem.vue b/frontend/src/components/camp/CollaboratorListItem.vue
new file mode 100644
index 0000000000..9296a639fc
--- /dev/null
+++ b/frontend/src/components/camp/CollaboratorListItem.vue
@@ -0,0 +1,41 @@
+<template>
+  <v-list-item class="px-0" two-line>
+    <v-list-item-avatar>
+      <v-img src="https://i.pravatar.cc/300" />
+    </v-list-item-avatar>
+    <v-list-item-content>
+      <v-list-item-title>{{ collaborator.user().username }}</v-list-item-title>
+      <v-list-item-subtitle>{{ collaborator.user().mail }}</v-list-item-subtitle>
+    </v-list-item-content>
+    <api-select
+      :value="collaborator.role"
+      :uri="collaborator._meta.self"
+      fieldname="role"
+      :items="['member', 'manager']"
+      no-margin
+      dense
+      required />
+    <v-list-item-action class="ml-2">
+      <button-delete @click="api.del(collaborator)">
+        Remove
+      </button-delete>
+    </v-list-item-action>
+  </v-list-item>
+</template>
+
+<script>
+import ApiSelect from '@/components/form/ApiSelect'
+import ButtonDelete from '@/components/base/ButtonDelete'
+
+export default {
+  name: 'CollaboratorListItem',
+  components: { ButtonDelete, ApiSelect },
+  props: {
+    collaborator: { type: Object, required: true }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/camp/Collaborators.vue b/frontend/src/components/camp/Collaborators.vue
deleted file mode 100644
index 46d922d5a4..0000000000
--- a/frontend/src/components/camp/Collaborators.vue
+++ /dev/null
@@ -1,293 +0,0 @@
-<!--
-Displays collaborators of a single camp.
--->
-<template>
-  <v-card>
-    <v-toolbar dense color="blue-grey lighten-5">
-      <v-icon left>
-        mdi-account-group
-      </v-icon>
-      <v-toolbar-title>Mitarbeiter</v-toolbar-title>
-    </v-toolbar>
-    <v-card-text>
-      <v-simple-table width="100%">
-        <thead>
-          <tr>
-            <th
-              width="50%">
-              User
-            </th>
-            <th
-              width="25%">
-              Rolle
-            </th>
-            <th
-              width="25%">
-              Option
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="collaborator in establishedCollaborators"
-            :key="collaborator._meta.self">
-            <td>
-              <v-skeleton-loader v-if="collaborator.user()._meta.loading" type="text" />
-              {{ collaborator.user().username }}
-            </td>
-            <td>
-              <api-select
-                :value="collaborator.role"
-                :uri="collaborator._meta.self"
-                fieldname="role"
-                :items="['member', 'manager']"
-                required
-                dense />
-            </td>
-            <td
-              style="white-space: nowrap">
-              <v-btn
-                small
-                color="warning"
-                @click="api.del(collaborator)">
-                <v-icon
-                  small
-                  left>
-                  mdi-close
-                </v-icon>
-                delete
-              </v-btn>
-            </td>
-          </tr>
-        </tbody>
-      </v-simple-table>
-
-      <v-divider />
-
-      <div v-if="requestedCollaborators.length > 0">
-        <h3 class="mt-4">
-          Offene Anfragen
-        </h3>
-        <v-simple-table width="100%">
-          <tr>
-            <th
-              width="50%">
-              User
-            </th>
-            <th
-              width="25%">
-              Rolle
-            </th>
-            <th
-              width="25%">
-              Option
-            </th>
-          </tr>
-          <tr
-            v-for="collaborator in requestedCollaborators"
-            :key="collaborator.id">
-            <td>{{ collaborator.user().username }}</td>
-            <td>
-              <api-select
-                :value="collaborator.role"
-                :uri="collaborator._meta.self"
-                fieldname="role"
-                :items="['member', 'manager']"
-                required
-                dense />
-            </td>
-            <td
-              style="white-space: nowrap">
-              <v-btn
-                small
-                color="success"
-                @click="changeStatus(collaborator, 'established')">
-                <v-icon
-                  small
-                  left>
-                  mdi-check
-                </v-icon>
-                accept
-              </v-btn>
-              <v-btn
-                small
-                color="warning"
-                @click="changeStatus(collaborator, 'unrelated')">
-                <v-icon
-                  small
-                  left>
-                  mdi-close
-                </v-icon>
-                deny
-              </v-btn>
-            </td>
-          </tr>
-        </v-simple-table>
-        <v-divider />
-      </div>
-
-      <div v-if="invitedCollaborators.length > 0">
-        <h3 class="mt-4">
-          Offene Einladungen
-        </h3>
-        <v-simple-table width="100%">
-          <thead>
-            <tr>
-              <th
-                width="50%">
-                User
-              </th>
-              <th
-                width="25%">
-                Rolle
-              </th>
-              <th
-                width="25%">
-                Option
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="collaborator in invitedCollaborators"
-              :key="collaborator.id">
-              <td>{{ collaborator.user().username }}</td>
-              <td>
-                <api-select
-                  :value="collaborator.role"
-                  :uri="collaborator._meta.self"
-                  fieldname="role"
-                  :items="['member', 'manager']"
-                  required
-                  dense />
-              </td>
-              <td
-                style="white-space: nowrap">
-                <v-btn
-                  small
-                  color="warning"
-                  @click="api.del(collaborator)">
-                  <v-icon
-                    small
-                    left>
-                    mdi-close
-                  </v-icon>
-                  delete
-                </v-btn>
-              </td>
-            </tr>
-          </tbody>
-        </v-simple-table>
-        <v-divider />
-      </div>
-
-      <h3 class="mt-4">
-        Einladen
-      </h3>
-
-      <v-text-field
-        v-model="search"
-        hide-details
-        prepend-icon="mdi-account-search"
-        single-line
-        placeholder="Suchen" />
-
-      <v-simple-table
-        width="100%"
-        class="mt-4">
-        <tr
-          v-for="result in searchResults"
-          :key="result.id">
-          <td>{{ result.username }}</td>
-          <td
-            style="white-space: nowrap">
-            <v-btn
-              small
-              color="success"
-              class="mr-1"
-              @click="invite(result, 'member')">
-              <v-icon
-                small
-                left>
-                mdi-plus-circle
-              </v-icon>
-              member
-            </v-btn>
-
-            <v-btn
-              small
-              color="success"
-              @click="invite(result, 'manager')">
-              <v-icon
-                small
-                left>
-                mdi-plus-circle
-              </v-icon>
-              manager
-            </v-btn>
-          </td>
-        </tr>
-      </v-simple-table>
-    </v-card-text>
-  </v-card>
-</template>
-<script>
-export default {
-  name: 'Collaborators',
-  components: {
-    ApiSelect: () => import('@/components/form/ApiSelect.vue')
-  },
-  props: {
-    camp: { type: Function, required: true }
-  },
-  data () {
-    return {
-      editing: false,
-      messages: [],
-      search: ''
-    }
-  },
-  computed: {
-    collaborators () {
-      return this.camp().camp_collaborations().items.filter(c => !c._meta.deleting)
-    },
-    establishedCollaborators () {
-      return this.collaborators.filter(c => c.status === 'established')
-    },
-    requestedCollaborators () {
-      return this.collaborators.filter(c => c.status === 'requested')
-    },
-    invitedCollaborators () {
-      return this.collaborators.filter(c => c.status === 'invited')
-    },
-    searchResults () {
-      if (this.search.length >= 3) {
-        const filterUsers = this.collaborators.filter(
-          c => c.user !== undefined
-        ).map(
-          c => c.user().id
-        )
-        return this.api.get('/user?search=' + this.search).items.filter(
-          u => !filterUsers.includes(u.id)
-        )
-      }
-      return []
-    }
-  },
-  methods: {
-    changeStatus (collaborator, status) {
-      this.api.patch(collaborator, { status: status })
-    },
-    invite (user, role) {
-      this.api.post('/camp-collaboration', {
-        camp_id: this.camp().id,
-        user_id: user.id,
-        role: role
-      }).then(this.refreshCamp)
-    },
-    refreshCamp () {
-      this.api.reload(this.campUri)
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/camp/EventList.vue b/frontend/src/components/camp/EventList.vue
new file mode 100644
index 0000000000..e5efbd05ae
--- /dev/null
+++ b/frontend/src/components/camp/EventList.vue
@@ -0,0 +1,44 @@
+<!--
+Lists all event instances in a list view.
+-->
+
+<template>
+  <v-list dense>
+    <template v-for="eventInstance in eventInstances">
+      <v-skeleton-loader
+        v-if="eventInstance.event()._meta.loading"
+        :key="eventInstance._meta.self"
+        type="list-item-avatar-two-line" height="60" />
+      <v-list-item
+        v-else
+        :key="eventInstance._meta.self"
+        two-line
+        :to="eventInstanceLink(eventInstance)">
+        <v-chip class="mr-2" :color="eventInstance.event().event_category().color.toString()">{{ eventInstance.event().event_category().short }}</v-chip>
+        <v-list-item-content>
+          <v-list-item-title>{{ eventInstance.event().title }}</v-list-item-title>
+          <v-list-item-subtitle>{{ eventInstance.start_time }} - {{ eventInstance.end_time }}</v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+    </template>
+  </v-list>
+</template>
+<script>
+import { eventInstanceRoute } from '@/router'
+
+export default {
+  name: 'EventList',
+  props: {
+    camp: { type: Function, required: true },
+    eventInstances: { type: Array, required: true }
+  },
+  methods: {
+    eventInstanceLink (eventInstance) {
+      return eventInstanceRoute(this.camp(), eventInstance)
+    }
+  }
+}
+</script>
+<style lang="scss">
+
+</style>
diff --git a/frontend/src/components/camp/Periods.vue b/frontend/src/components/camp/Periods.vue
deleted file mode 100644
index 3a0be17d33..0000000000
--- a/frontend/src/components/camp/Periods.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<!--
-Displays periods of a single camp.
--->
-
-<template>
-  <v-card>
-    <div
-      v-for="period in periods.items" :key="period.id">
-      <v-list-item two-line>
-        <v-list-item-content>
-          <v-list-item-title class="headline">
-            {{ period.description }}
-          </v-list-item-title>
-          <v-list-item-subtitle>{{ period.start }} - {{ period.end }}</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list dense>
-        <template v-for="eventInstance in period.event_instances().items">
-          <v-skeleton-loader
-            v-if="eventInstance.event()._meta.loading"
-            :key="eventInstance._meta.self"
-            type="list-item-avatar-two-line" height="60" />
-          <v-list-item
-            v-else
-            :key="eventInstance._meta.self"
-            two-line
-            :to="eventInstanceRoute(eventInstance)">
-            <v-chip class="mr-2" :color="eventInstance.event().event_category().color.toString()">{{ eventInstance.event().event_category().short }}</v-chip>
-            <v-list-item-content>
-              <v-list-item-title>{{ eventInstance.event().title }}</v-list-item-title>
-              <v-list-item-subtitle>{{ eventInstance.start_time }} - {{ eventInstance.end_time }}</v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-        </template>
-      </v-list>
-      <v-divider />
-    </div>
-    <v-spacer />
-  </v-card>
-</template>
-<script>
-import { eventInstanceRoute } from '@/router'
-
-export default {
-  name: 'Periods',
-  props: {
-    camp: { type: Function, required: true }
-  },
-  data () {
-    return {
-      editing: false,
-      messages: []
-    }
-  },
-  computed: {
-    periods () {
-      return this.camp().periods()
-    },
-    events () {
-      return this.camp().events()
-    }
-  },
-  methods: {
-    eventInstanceRoute (eventInstance) {
-      return eventInstanceRoute(this.camp(), eventInstance)
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/Picasso.vue b/frontend/src/components/camp/Picasso.vue
similarity index 71%
rename from frontend/src/components/Picasso.vue
rename to frontend/src/components/camp/Picasso.vue
index 05561c4cce..e0af5ea80d 100644
--- a/frontend/src/components/Picasso.vue
+++ b/frontend/src/components/camp/Picasso.vue
@@ -3,25 +3,27 @@ Listing all given event instances in a calendar view.
 -->
 
 <template>
-  <v-calendar class="ec-picasso"
-              :events="eventInstances"
-              event-start="start_time"
-              event-end="end_time"
-              :event-name="getEventName"
-              :event-color="getEventColor"
-              interval-height="42"
-              :interval-format="getIntervalFormat"
-              first-interval="5"
-              interval-count="19"
-              :start="startDateString"
-              :end="endDateString"
-              locale="de-ch"
-              :day-format="dayFormat"
-              :type="type"
-              :weekday-format="weekdayFormat"
-              :weekdays="[1, 2, 3, 4, 5, 6, 0]"
-              color="primary"
-              @click:event="showEventInstance" />
+  <v-calendar
+    class="ec-picasso"
+    :events="eventInstances"
+    event-start="start_time"
+    event-end="end_time"
+    :event-name="getEventName | loading('Lädt…', ({ input }) => input.event()._meta.loading)"
+    :event-color="getEventColor | loading('grey lighten-2', eventInstance => eventInstance.event()._meta.loading)"
+    :interval-height="intervalHeight"
+    interval-width="46"
+    :interval-format="getIntervalFormat"
+    first-interval="5"
+    interval-count="19"
+    :start="startDateString"
+    :end="endDateString"
+    locale="de-ch"
+    :day-format="dayFormat"
+    :type="type"
+    :weekday-format="weekdayFormat"
+    :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+    color="primary"
+    @click:event="showEventInstance" />
 </template>
 <script>
 import { eventInstanceRoute } from '@/router'
@@ -33,7 +35,8 @@ export default {
     eventInstances: { type: Array, required: true },
     start: { type: Date, required: true },
     end: { type: Date, required: true },
-    type: { type: String, required: false, default: 'week' }
+    type: { type: String, required: false, default: 'week' },
+    intervalHeight: { type: Number, required: false, default: 42 }
   },
   data () {
     return {
@@ -84,12 +87,12 @@ export default {
       opacity: .75;
       border-radius: 0;
       padding: 2px;
-      white-space: pre;
+      white-space: normal;
       min-width: auto;
+      width: 100%;
 
       .v-btn__content {
-        max-width: 100%;
-        white-space: normal;
+        width: 100%;
       }
     }
 
diff --git a/frontend/src/components/dialog/DialogEntityDelete.vue b/frontend/src/components/dialog/DialogEntityDelete.vue
index af80a2d4e8..7b06812092 100644
--- a/frontend/src/components/dialog/DialogEntityDelete.vue
+++ b/frontend/src/components/dialog/DialogEntityDelete.vue
@@ -12,18 +12,14 @@
     <template v-slot:activator="scope">
       <slot name="activator" v-bind="scope" />
     </template>
-
-    <v-row>
-      <v-col cols="12">
-        Do you really want do delete <slot>this</slot>?
-      </v-col>
-    </v-row>
+    Do you really want do delete <slot>this</slot>?
   </dialog-form>
 </template>
 
 <script>
 import DialogForm from './DialogForm'
 import DialogBase from './DialogBase'
+
 export default {
   name: 'DialogEntityDelete',
   components: { DialogForm },
diff --git a/frontend/src/components/dialog/DialogForm.vue b/frontend/src/components/dialog/DialogForm.vue
index ced7cb2e21..64faf01cec 100644
--- a/frontend/src/components/dialog/DialogForm.vue
+++ b/frontend/src/components/dialog/DialogForm.vue
@@ -19,9 +19,7 @@
         </v-toolbar>
 
         <v-card-text>
-          <v-container>
-            <slot />
-          </v-container>
+          <slot />
         </v-card-text>
         <v-card-actions>
           <v-spacer />
diff --git a/frontend/src/components/dialog/DialogPeriodCreate.vue b/frontend/src/components/dialog/DialogPeriodCreate.vue
index 68689cb1c3..1e621f69ec 100644
--- a/frontend/src/components/dialog/DialogPeriodCreate.vue
+++ b/frontend/src/components/dialog/DialogPeriodCreate.vue
@@ -11,32 +11,31 @@
       <slot name="activator" v-bind="scope" />
     </template>
 
-    <v-row>
-      <v-col cols="12">
-        <v-text-field
-          v-model="entityData.description"
-          label="Description"
-          required />
-      </v-col>
-      <v-col cols="12">
-        <v-text-field
-          v-model="entityData.start"
-          label="Start"
-          required />
-      </v-col>
-      <v-col cols="12">
-        <v-text-field
-          v-model="entityData.end"
-          label="End"
-          required />
-      </v-col>
-    </v-row>
+    <v-text-field
+      v-model="entityData.description" hide-details="auto"
+      outlined
+      class="mb-4"
+      label="Description"
+      required />
+    <v-text-field
+      v-model="entityData.start" hide-details="auto"
+      outlined
+      class="mb-4"
+      label="Start"
+      required />
+    <v-text-field
+      v-model="entityData.end" hide-details="auto"
+      outlined
+      class="mb-4"
+      label="End"
+      required />
   </dialog-form>
 </template>
 
 <script>
 import DialogForm from './DialogForm'
 import DialogBase from './DialogBase'
+
 export default {
   name: 'DialogPeriodCreate',
   components: { DialogForm },
@@ -60,7 +59,7 @@ export default {
       if (showDialog) {
         this.setEntityData({ camp_id: this.camp.id })
       } else {
-      // clear form on exit
+        // clear form on exit
         this.clearEntityData()
       }
     }
diff --git a/frontend/src/components/dialog/DialogPeriodEdit.vue b/frontend/src/components/dialog/DialogPeriodEdit.vue
index 9fdcfc0a57..e5908e4d04 100644
--- a/frontend/src/components/dialog/DialogPeriodEdit.vue
+++ b/frontend/src/components/dialog/DialogPeriodEdit.vue
@@ -10,32 +10,31 @@
       <slot name="activator" v-bind="scope" />
     </template>
 
-    <v-row>
-      <v-col cols="12">
-        <v-text-field
-          v-model="entityData.description"
-          label="Description"
-          required />
-      </v-col>
-      <v-col cols="12">
-        <v-text-field
-          v-model="entityData.start"
-          label="Start"
-          required />
-      </v-col>
-      <v-col cols="12">
-        <v-text-field
-          v-model="entityData.end"
-          label="End"
-          required />
-      </v-col>
-    </v-row>
+    <v-text-field
+      v-model="entityData.description" hide-details="auto"
+      outlined
+      class="mb-4"
+      label="Description"
+      required />
+    <v-text-field
+      v-model="entityData.start" hide-details="auto"
+      outlined
+      class="mb-4"
+      label="Start"
+      required />
+    <v-text-field
+      v-model="entityData.end" hide-details="auto"
+      outlined
+      class="mb-4"
+      label="End"
+      required />
   </dialog-form>
 </template>
 
 <script>
 import DialogBase from './DialogBase'
 import DialogForm from './DialogForm'
+
 export default {
   name: 'DialogPeriodEdit',
   components: { DialogForm },
diff --git a/frontend/src/components/form/ApiWrapper.vue b/frontend/src/components/form/ApiWrapper.vue
index 5fd66ee65e..46170c99cb 100644
--- a/frontend/src/components/form/ApiWrapper.vue
+++ b/frontend/src/components/form/ApiWrapper.vue
@@ -5,7 +5,7 @@ Wrapper component for form components to save data back to API
 <template>
   <v-form
     inline
-    class="mb-2">
+    :class="{'d-flex api-wrapper--savable':!autoSave && !readonly,'my-4':!noMargin}">
     <slot
       :localValue="localValue"
       :errorMessages="errorMessages"
@@ -16,9 +16,10 @@ Wrapper component for form components to save data back to API
     <v-btn
       v-if="!autoSave && !readonly"
       :disabled="disabled"
-      small
-      color="warning"
-      class="mb-1"
+      small elevation="0"
+      color="warning" tile
+      class="mb-0"
+      height="auto"
       @click="reset">
       Reset
     </v-btn>
@@ -26,9 +27,10 @@ Wrapper component for form components to save data back to API
     <v-btn
       v-if="!autoSave && !readonly"
       color="primary"
-      small
+      small elevation="0"
       :disabled="disabled || isSaving || (required && $v.localValue.$invalid)"
-      class="mr-2 ml-2 mb-1"
+      class="mb-0 v-btn--last-instance"
+      height="auto"
       @click="save">
       <v-progress-circular
         v-if="isSaving"
@@ -151,7 +153,9 @@ export default {
       this.api.patch(this.uri, { [this.fieldname]: this.localValue }).then(() => {
         this.isSaving = false
         this.showSuccessIcon = true
-        setTimeout(() => { this.showSuccessIcon = false }, 2000)
+        setTimeout(() => {
+          this.showSuccessIcon = false
+        }, 2000)
       }, (e, a) => {
         console.log('error')
       })
@@ -161,5 +165,16 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .v-btn--last-instance {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+</style>
+
+<style lang="scss" >
+  .api-wrapper--savable .v-text-field {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 </style>
diff --git a/frontend/src/components/form/__tests__/ApiTextField.spec.js b/frontend/src/components/form/__tests__/ApiTextField.spec.js
index 71687492e1..04011fa101 100644
--- a/frontend/src/components/form/__tests__/ApiTextField.spec.js
+++ b/frontend/src/components/form/__tests__/ApiTextField.spec.js
@@ -62,9 +62,6 @@ describe('ApiTextField.vue', () => {
     expect(patchSpy).toBeCalledTimes(1)
     expect(patchSpy).toBeCalledWith(config.propsData.uri, { [config.propsData.fieldname]: newValue })
 
-    const statusIcon = wrapper.find({ name: 'StatusIcon' }).vm
-    // expect(statusIcon.status).toBe('saving')
-
     // wait for patch Promise to resolve
     await flushPromises()
 
diff --git a/frontend/src/components/form/__tests__/__snapshots__/ApiSelect.spec.js.snap b/frontend/src/components/form/__tests__/__snapshots__/ApiSelect.spec.js.snap
index 071e193a30..36a53acef8 100644
--- a/frontend/src/components/form/__tests__/__snapshots__/ApiSelect.spec.js.snap
+++ b/frontend/src/components/form/__tests__/__snapshots__/ApiSelect.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`ApiTextField.vue renders correctly 1`] = `
 <form
-  class="v-form mb-2"
+  class="v-form my-4"
   inline=""
   novalidate="novalidate"
 >
diff --git a/frontend/src/components/form/__tests__/__snapshots__/ApiTextField.spec.js.snap b/frontend/src/components/form/__tests__/__snapshots__/ApiTextField.spec.js.snap
index ce2323ae3c..493ca2f915 100644
--- a/frontend/src/components/form/__tests__/__snapshots__/ApiTextField.spec.js.snap
+++ b/frontend/src/components/form/__tests__/__snapshots__/ApiTextField.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`ApiTextField.vue renders correctly 1`] = `
 <v-form-stub
-  class="mb-2"
+  class="my-4"
   inline=""
 >
   <v-text-field-stub
diff --git a/frontend/src/layouts/CampLayout.vue b/frontend/src/layouts/CampLayout.vue
deleted file mode 100644
index b54adb404f..0000000000
--- a/frontend/src/layouts/CampLayout.vue
+++ /dev/null
@@ -1,231 +0,0 @@
-<template>
-  <v-app style="background: #F4F4F4">
-    <!-- left side drawer (desktop)-->
-    <v-navigation-drawer v-if="$vuetify.breakpoint.smAndUp"
-                         v-model="drawer" app
-                         clipped permanent
-                         :mini-variant.sync="mini"
-                         mini-variant-width="40"
-                         color="grey lighten-2">
-      <v-btn v-if="mini" icon>
-        <v-icon>mdi-format-list-bulleted-triangle</v-icon>
-      </v-btn>
-      <v-btn v-if="!mini" icon
-             fixed
-             class="ma-2"
-             style="z-index: 10;"
-             right @click.stop="mini = !mini">
-        <v-icon>mdi-chevron-left</v-icon>
-      </v-btn>
-
-      <router-view v-if="!mini" name="aside" />
-    </v-navigation-drawer>
-
-    <!-- second menu/tool bar -->
-    <v-app-bar v-if="$vuetify.breakpoint.smAndUp"
-               app
-               clipped-left hide-on-scroll
-               color="blue-grey darken-4" dark>
-      <v-toolbar-items>
-        <v-btn icon
-               large
-               exact
-               class="title"
-               :to="{name: 'home'}">
-          ⛺
-        </v-btn>
-      </v-toolbar-items>
-
-      <v-overflow-btn class="my-2 ec-campselect"
-                      label="Camp lädt"
-                      :editable="editableCampButton" single-line
-                      :items="lastCamps.items"
-                      item-text="title" item-value="id"
-                      :value="camp().id"
-                      hide-details return-object
-                      readonly
-                      @change="changeCamp"
-                      @blur="editableCampButton = false"
-                      @click:append.capture="editableCampButton = !editableCampButton">
-        <template v-slot:selection="data">
-          <div class="v-select__selection v-select__selection--comma v-toolbar__title"
-               @mousedown="$router.push(campRoute(data.item))">
-            {{ data.item.title }}
-          </div>
-        </template>
-      </v-overflow-btn>
-
-      <v-toolbar-items>
-        <v-btn text :to="campRoute(camp(), 'periods')">
-          <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-calendar-text</v-icon>
-          <span class="sr-only-sm-and-down">Events</span>
-        </v-btn>
-        <v-btn text :to="campRoute(camp(), 'picasso')">
-          <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-calendar-month</v-icon>
-          <span class="sr-only-sm-and-down">Picasso</span>
-        </v-btn>
-        <v-btn text :to="campRoute(camp(), 'collaborators')">
-          <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-account-group</v-icon>
-          <span class="sr-only-sm-and-down">Team</span>
-        </v-btn>
-        <v-btn text :to="campRoute(camp())" exact>
-          <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-information</v-icon>
-          <span class="sr-only-sm-and-down">Admin</span>
-        </v-btn>
-      </v-toolbar-items>
-      <v-spacer />
-      <v-btn v-if="loggedIn" text
-             @click="logout">
-        <v-icon v-if="logoutIcon" :left="$vuetify.breakpoint.mdAndUp">{{ logoutIcon }}</v-icon>
-        <v-progress-circular v-else indeterminate
-                             size="18"
-                             class="mr-2" />
-        <span class="sr-only-sm-and-down">Log out</span>
-      </v-btn>
-      <v-btn v-else text
-             :to="{ name: 'login' }">
-        <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-login</v-icon>
-        <span class="sr-only-sm-and-down">Log in</span>
-      </v-btn>
-      <v-btn icon>
-        <v-icon>mdi-account</v-icon>
-      </v-btn>
-    </v-app-bar>
-
-    <!-- main content -->
-    <v-content>
-      <v-container
-        fluid>
-        <router-view />
-      </v-container>
-    </v-content>
-
-    <v-bottom-navigation v-if="$vuetify.breakpoint.xs" fixed grow>
-      <v-btn :to="{name: 'camp'}" exact>
-        <span>{{ camp().name }}</span>
-        <v-icon>mdi-tent</v-icon>
-      </v-btn>
-      <v-btn :to="{name: 'camp/periods'}">
-        <span>Events</span>
-        <v-icon>mdi-calendar-text</v-icon>
-      </v-btn>
-      <v-btn :to="{name: 'camp/picasso'}">
-        <span>Picasso</span>
-        <v-icon>mdi-calendar-month</v-icon>
-      </v-btn>
-      <v-btn :to="{name: 'camp/collaborators'}" exact>
-        <span>Team</span>
-        <v-icon>mdi-account-group</v-icon>
-      </v-btn>
-      <v-btn :to="{name: 'home'}">
-        <span>Profile</span>
-        <v-icon>mdi-account</v-icon>
-      </v-btn>
-    </v-bottom-navigation>
-
-    <!-- footer -->
-    <v-footer v-if="$vuetify.breakpoint.mdAndUp"
-              app color="grey lighten-5">
-      eCamp v0.0.1
-    </v-footer>
-  </v-app>
-</template>
-
-<script>
-import { campRoute, campFromRoute } from '@/router'
-
-export default {
-  data () {
-    return {
-      editableCampButton: false,
-      drawer: false,
-      mini: !this.$vuetify.breakpoint.mdAndUp,
-      logoutIcon: 'mdi-logout'
-    }
-  },
-  computed: {
-    loggedIn () {
-      return this.$auth.isLoggedIn()
-    },
-    lastCamps () {
-      return this.api.get().camps()
-    },
-    camp () {
-      return campFromRoute(this.$route)
-    }
-  },
-  created () {
-    this.$vuetify.theme.themes.dark.grey = 'ffcc00'
-  },
-  methods: {
-    logout () {
-      this.logoutIcon = ''
-      this.$auth.logout().then(() => this.$router.replace({ name: 'login' }))
-    },
-    changeCamp (selectedCamp) {
-      this.$router.push(campRoute(selectedCamp))
-    },
-    prevent (event) {
-      event.stopImmediatePropagation()
-      event.preventDefault()
-      event.cancelBubble = true
-      return null
-    },
-    campRoute
-  }
-}
-</script>
-
-<style lang="scss">
-  .v-navigation-drawer--temporary.v-navigation-drawer--clipped {
-    z-index: 5;
-    margin-top: 116px;
-  }
-
-  .ec-campselect .v-select__slot input {
-    font-size: 1.25rem;
-  }
-
-  .ec-campselect {
-    flex: 0 1 300px;
-  }
-
-  .ec-campselect.v-overflow-btn .v-input__control::before, .ec-campselect.v-overflow-btn .v-input__slot::before {
-    border: none;
-    height: 0;
-  }
-
-  @media #{map-get($display-breakpoints, 'sm-and-down')}{
-    .container.container--fluid {
-      padding: 0;
-
-      & > .v-card {
-        border-radius: 0;
-      }
-    }
-    .sr-only-sm-and-down {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      clip-path: inset(50%);
-      border: 0;
-    }
-  }
-
-  .ec-menu-left {
-    left: 0 !important;
-    font-feature-settings: 'tnum';
-  }
-
-  .theme--dark.v-overflow-btn {
-    &:hover, &.v-input--is-focused, &.v-select--is-menu-active {
-      .v-input__slot {
-        background: map-get($blue-grey, 'darken-3')
-      }
-    }
-  }
-</style>
diff --git a/frontend/src/layouts/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
deleted file mode 100644
index a9ac222ada..0000000000
--- a/frontend/src/layouts/DefaultLayout.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-  <v-app style="background: #90A4AE">
-    <!-- left side drawer (desktop)-->
-    <v-navigation-drawer v-if="$vuetify.breakpoint.smAndUp"
-                         v-model="drawer" app
-                         clipped permanent
-                         :mini-variant.sync="mini"
-                         mini-variant-width="40"
-                         color="grey lighten-2">
-      <v-btn v-if="mini" icon>
-        <v-icon>mdi-format-list-bulleted-triangle</v-icon>
-      </v-btn>
-      <v-spacer />
-      <v-btn v-if="!mini" icon
-             fixed
-             class="ma-2"
-             style="z-index: 10;"
-             right @click.stop="mini = !mini">
-        <v-icon>mdi-chevron-left</v-icon>
-      </v-btn>
-
-      <v-divider />
-
-      <router-view v-if="!mini" name="aside" />
-    </v-navigation-drawer>
-
-    <!-- second menu/tool bar -->
-    <v-app-bar v-if="$vuetify.breakpoint.smAndUp"
-               app
-               clipped-left hide-on-scroll
-               color="blue-grey darken-4" dark>
-      <v-toolbar-title class="pl-4 pr-4">
-        <i>🏕</i>️ eCamp
-      </v-toolbar-title>
-      <v-toolbar-items>
-        <v-btn text
-               exact :to="{ name: 'home'}">
-          Home
-        </v-btn>
-        <v-btn text
-               :to="{ name: 'camps', params: { groupName: encodeURI('Pfadi Bewegung Schweiz') } }">
-          Camps
-        </v-btn>
-      </v-toolbar-items>
-      <v-spacer />
-      <v-btn v-if="loggedIn" text
-             @click="logout">
-        <v-icon v-if="logoutIcon" :left="$vuetify.breakpoint.mdAndUp">{{ logoutIcon }}</v-icon>
-        <v-progress-circular v-else indeterminate
-                             size="18"
-                             class="mr-2" />
-        <span class="sr-only-sm-and-down">Log out</span>
-      </v-btn>
-      <v-btn v-else text
-             :to="{ name: 'login' }">
-        <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-login</v-icon>
-        <span class="sr-only-sm-and-down">Log in</span>
-      </v-btn>
-      <v-btn icon>
-        <v-icon>mdi-account</v-icon>
-      </v-btn>
-    </v-app-bar>
-
-    <!-- main content -->
-    <v-content>
-      <v-container
-        fluid>
-        <router-view />
-      </v-container>
-    </v-content>
-
-    <v-bottom-navigation v-if="$vuetify.breakpoint.xs" fixed grow>
-      <v-btn :to="{name: 'home'}" exact>
-        <span>Home</span>
-        <v-icon>mdi-home</v-icon>
-      </v-btn>
-      <v-btn :to="{name: 'camps'}" exact>
-        <span>Camps</span>
-        <v-icon>mdi-format-list-bulleted-triangle</v-icon>
-      </v-btn>
-      <v-btn exact>
-        <span>Profile</span>
-        <v-icon>mdi-account</v-icon>
-      </v-btn>
-    </v-bottom-navigation>
-
-    <!-- footer -->
-    <v-footer v-if="$vuetify.breakpoint.mdAndUp"
-              app color="grey lighten-5">
-      eCamp v0.0.1
-    </v-footer>
-  </v-app>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      editableCampButton: false,
-      drawer: false,
-      mini: !this.$vuetify.breakpoint.mdAndUp,
-      logoutIcon: 'mdi-logout'
-    }
-  },
-  computed: {
-    loggedIn () {
-      return this.$auth.isLoggedIn()
-    }
-  },
-  created () {
-    this.$vuetify.theme.themes.dark.grey = 'ffcc00'
-  },
-  methods: {
-    logout () {
-      this.logoutIcon = ''
-      this.$auth.logout().then(() => this.$router.replace({ name: 'login' }))
-    },
-    prevent (event) {
-      event.stopImmediatePropagation()
-      event.preventDefault()
-      event.cancelBubble = true
-      return null
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-  .v-navigation-drawer--temporary.v-navigation-drawer--clipped {
-    z-index: 5;
-    margin-top: 116px;
-  }
-
-  .ec-campselect .v-select__slot input {
-    font-size: 1.25rem;
-  }
-
-  .ec-campselect {
-    flex: 0 1 300px;
-  }
-
-  .ec-campselect.v-overflow-btn .v-input__control::before, .ec-campselect.v-overflow-btn .v-input__slot::before {
-    border: none;
-    height: 0;
-  }
-
-  @media #{map-get($display-breakpoints, 'sm-and-down')}{
-    .container.container--fluid {
-      padding: 0;
-
-      & > .v-card {
-        border-radius: 0;
-      }
-    }
-    .sr-only-sm-and-down {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      clip-path: inset(50%);
-      border: 0;
-    }
-  }
-
-  .ec-menu-left {
-    left: 0 !important;
-    font-feature-settings: 'tnum';
-  }
-
-  .theme--dark.v-overflow-btn {
-    &:hover, &.v-input--is-focused, &.v-select--is-menu-active {
-      .v-input__slot {
-        background: map-get($blue-grey, 'darken-3')
-      }
-    }
-  }
-</style>
diff --git a/frontend/src/layouts/EmptyLayout.vue b/frontend/src/layouts/EmptyLayout.vue
deleted file mode 100644
index 5a5cd921eb..0000000000
--- a/frontend/src/layouts/EmptyLayout.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <v-app>
-    <router-view />
-  </v-app>
-</template>
-
-<script>
-export default {
-}
-
-</script>
-
-<style lang="scss">
-</style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 119a09a13d..86f549a443 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -5,9 +5,13 @@ import router from '@/router'
 import store from './store'
 import vuetify from './plugins/vuetify'
 
-Vue.component('empty-layout', () => import('./layouts/EmptyLayout'))
-Vue.component('default-layout', () => import('./layouts/DefaultLayout'))
-Vue.component('camp-layout', () => import('./layouts/CampLayout'))
+Vue.filter('loading', function (value, loadingState, isLoading = v => typeof v === 'function' && v.loading) {
+  if (typeof value === 'function' && !value.loading) {
+    // Wrap the function that is passed into the | loading filter
+    return (v, ...args) => isLoading(v) ? loadingState : value(v, ...args)
+  }
+  return isLoading(value) ? loadingState : value
+})
 
 new Vue({
   router,
diff --git a/frontend/src/mixins/apiPropsMixin.js b/frontend/src/mixins/apiPropsMixin.js
index 8d6c2c86ad..d4ee77173f 100644
--- a/frontend/src/mixins/apiPropsMixin.js
+++ b/frontend/src/mixins/apiPropsMixin.js
@@ -20,7 +20,10 @@ export const apiPropsMixin = {
     autoSaveDelay: { type: Number, default: 800, required: false },
 
     /* Validation criteria */
-    required: { type: Boolean, default: false, required: false }
+    required: { type: Boolean, default: false, required: false },
+
+    /* Removes the margin (for inline fields) */
+    noMargin: { type: Boolean, default: false, required: false }
   }
 
 }
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 2200e9262e..0f65566d48 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -5,6 +5,7 @@ import { refreshLoginStatus } from '@/auth'
 
 Vue.use(Router)
 
+/* istanbul ignore next */
 export default new Router({
   mode: 'history',
   base: process.env.BASE_URL,
@@ -12,86 +13,110 @@ export default new Router({
     {
       path: '/register',
       name: 'register',
-      meta: { layout: 'empty' },
-      component: () => import(/* webpackChunkName: "register" */ './views/auth/Register.vue')
+      components: {
+        topbar: () => import(/* webpackChunkName: "navigation" */ './views/auth/NavDesktop'),
+        default: () => import(/* webpackChunkName: "register" */ './views/auth/Register')
+      }
     },
     {
       path: '/register-done',
       name: 'register-done',
-      meta: { layout: 'empty' },
-      component: () => import(/* webpackChunkName: "register" */ './views/auth/RegisterDone.vue')
+      components: {
+        topbar: () => import(/* webpackChunkName: "navigation" */ './views/auth/NavDesktop'),
+        default: () => import(/* webpackChunkName: "register" */ './views/auth/RegisterDone')
+      }
     },
     {
       path: '/login',
       name: 'login',
-      meta: { layout: 'empty' },
-      component: () => import(/* webpackChunkName: "login" */ './views/auth/Login.vue')
+      components: {
+        topbar: () => import(/* webpackChunkName: "navigation" */ './views/auth/NavDesktop'),
+        default: () => import(/* webpackChunkName: "login" */ './views/auth/Login')
+      }
     },
     {
       path: '/loginCallback',
       name: 'loginCallback',
-      component: () => import(/* webpackChunkName: "login" */ './views/auth/LoginCallback.vue')
+      components: {
+        topbar: () => import(/* webpackChunkName: "navigation" */ './views/auth/NavDesktop'),
+        default: () => import(/* webpackChunkName: "login" */ './views/auth/LoginCallback')
+      }
     },
     {
       path: '/',
       name: 'home',
-      component: () => import(/* webpackChunkName: "about" */ './views/Home.vue'),
+      components: {
+        topbar: () => import(/* webpackChunkName: "navigation" */ './views/NavDesktop'),
+        default: () => import(/* webpackChunkName: "about" */ './views/Home'),
+        bottombar: () => import(/* webpackChunkName: "navigation" */ './views/NavMobile')
+      },
+      beforeEnter: requireAuth
+    },
+    {
+      path: '/profile',
+      name: 'profile',
+      components: {
+        topbar: () => import(/* webpackChunkName: "navigation" */ './views/NavDesktop'),
+        default: () => import(/* webpackChunkName: "about" */ './views/Profile'),
+        bottombar: () => import(/* webpackChunkName: "navigation" */ './views/NavMobile')
+      },
       beforeEnter: requireAuth
     },
     {
       path: '/camps',
       name: 'camps',
       components: {
-        default: () => import(/* webpackChunkName: "camps" */ './views/Camps.vue')
+        topbar: () => import(/* webpackChunkName: "navigation" */ './views/NavDesktop'),
+        default: () => import(/* webpackChunkName: "camps" */ './views/Camps'),
+        bottombar: () => import(/* webpackChunkName: "navigation" */ './views/NavMobile')
       },
       beforeEnter: requireAuth
     },
     {
       path: '/camps/:campId/:campTitle?',
       components: {
-        default: () => import(/* webpackChunkName: "camp" */ './views/Camp.vue'),
-        aside: () => import(/* webpackChunkName: "camps" */ './views/Camps.vue')
+        topbar: () => import(/* webpackChunkName: "navigation" */ './views/camp/NavDesktop'),
+        default: () => import(/* webpackChunkName: "camp" */ './views/camp/Camp'),
+        aside: () => import(/* webpackChunkName: "periods" */ './views/camp/SideBarPeriods'),
+        bottombar: () => import(/* webpackChunkName: "navigation" */ './views/camp/NavMobile')
       },
       beforeEnter: requireAuth,
       props: {
-        default: route => ({ camp: campFromRoute(route) })
+        default: route => ({ camp: campFromRoute(route) }),
+        aside: route => ({ camp: campFromRoute(route) })
       },
       children: [
         {
           path: 'collaborators',
           name: 'camp/collaborators',
-          component: () => import(/* webpackChunkName: "campCollaborators" */ './components/camp/Collaborators.vue'),
-          meta: { layout: 'camp' }
+          component: () => import(/* webpackChunkName: "campCollaborators" */ './views/camp/Collaborators')
         },
         {
-          path: 'periods',
-          name: 'camp/periods',
-          component: () => import(/* webpackChunkName: "campPeriods" */ './components/camp/Periods.vue'),
-          meta: { layout: 'camp' }
+          path: 'admin',
+          name: 'camp/admin',
+          component: () => import(/* webpackChunkName: "campAdmin" */ './views/camp/Admin')
         },
         {
-          path: 'picasso',
-          name: 'camp/picasso',
-          component: () => import(/* webpackChunkName: "campPicasso" */ './components/camp/CampPicasso.vue'),
-          meta: { layout: 'camp' }
+          path: 'program',
+          name: 'camp/program',
+          component: () => import(/* webpackChunkName: "campProgram" */ './views/camp/CampProgram')
         },
         {
           path: '',
-          name: 'camp',
-          component: () => import(/* webpackChunkName: "campHome" */ './views/camp/CampHome.vue'),
-          meta: { layout: 'camp' }
+          redirect: { name: 'camp/program' }
         }
       ]
     },
     {
-      path: '/camps/:campId/:campTitle?/events/:eventInstanceId/:eventName?',
+      path: '/camps/:campId/:campTitle/events/:eventInstanceId/:eventName?',
       name: 'event',
       components: {
-        default: () => import(/* webpackChunkName: "event" */ './views/Event.vue'),
-        aside: () => import(/* webpackChunkName: "day" */ './views/DayPicasso.vue')
+        topbar: () => import(/* webpackChunkName: "navigation" */ './views/camp/NavDesktop'),
+        default: () => import(/* webpackChunkName: "event" */ './views/event/Event'),
+        aside: () => import(/* webpackChunkName: "day" */ './views/event/SideBarProgram'),
+        bottombar: () => import(/* webpackChunkName: "navigation" */ './views/camp/NavMobile')
       },
       beforeEnter: requireAuth,
-      meta: { layout: 'camp' },
       props: {
         default: route => ({ eventInstance: eventInstanceFromRoute(route) }),
         aside: route => ({ day: dayFromEventInstanceInRoute(route) })
@@ -130,11 +155,14 @@ function dayFromEventInstanceInRoute (route) {
 
 export function campRoute (camp, subroute) {
   if (camp._meta.loading) return {}
-  const routeName = subroute ? 'camp/' + subroute : 'camp'
+  const routeName = subroute ? 'camp/' + subroute : 'camp/program'
   return { name: routeName, params: { campId: camp.id, campTitle: slugify(camp.title) } }
 }
 
 export function eventInstanceRoute (camp, eventInstance) {
   if (camp._meta.loading || eventInstance._meta.loading || eventInstance.event()._meta.loading) return {}
-  return { name: 'event', params: { campId: camp.id, campTitle: slugify(camp.title), eventInstanceId: eventInstance.id, eventName: slugify(eventInstance.event().title) } }
+  return {
+    name: 'event',
+    params: { campId: camp.id, campTitle: slugify(camp.title), eventInstanceId: eventInstance.id, eventName: slugify(eventInstance.event().title) }
+  }
 }
diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
new file mode 100644
index 0000000000..b292bc35e1
--- /dev/null
+++ b/frontend/src/scss/global.scss
@@ -0,0 +1,31 @@
+@use "~inter-ui/default" as inter-ui with (
+    $inter-font-path: "~inter-ui/Inter (web hinted latin)"
+  );
+@include inter-ui.weight-200;
+@include inter-ui.weight-400;
+@include inter-ui.weight-500;
+@include inter-ui.weight-600;
+body {font-feature-settings: "ss03", "calt", "rlig", "kern", "cv05", "cv07", "cv08"}
+.v-toolbar__title {font-weight: 500;}
+.theme--light.v-application {
+	background: #546E7A!important;
+}
+.v-calendar-daily,
+.v-skeleton-loader__actions,
+.v-skeleton-loader__article,
+.v-skeleton-loader__card-heading,
+.v-skeleton-loader__card-text,
+.v-skeleton-loader__date-picker,
+.v-skeleton-loader__list-item,
+.v-skeleton-loader__list-item-avatar,
+.v-skeleton-loader__list-item-text,
+.v-skeleton-loader__list-item-two-line,
+.v-skeleton-loader__list-item-avatar-two-line,
+.v-skeleton-loader__list-item-three-line,
+.v-skeleton-loader__list-item-avatar-three-line,
+.v-skeleton-loader__table-heading,
+.v-skeleton-loader__table-thead,
+.v-skeleton-loader__table-tbody,
+.v-skeleton-loader__table-tfoot {
+	background: none!important;
+}
diff --git a/frontend/src/scss/variables.scss b/frontend/src/scss/variables.scss
index 30445b7e35..eb9a6e046b 100644
--- a/frontend/src/scss/variables.scss
+++ b/frontend/src/scss/variables.scss
@@ -1,13 +1,3 @@
-@use "~inter-ui/default" as inter-ui with (
-	$inter-font-path: "~inter-ui/Inter (web)"
-);
-// TODO: @manuelmeister remove unused charachters (50% savings)
-//  see https://github.com/filamentgroup/glyphhanger
-
-// @include inter-ui.weight-200;
-// @include inter-ui.weight-400;
-// @include inter-ui.weight-600;
-@include inter-ui.all;
 $body-font-family: 'Inter', sans-serif, emoji;
 $heading-font-family: $body-font-family;
 $body-font-weight: 400;
@@ -54,13 +44,13 @@ $headings: (
   ),
   'h6': (
     'size': 1.25rem,
-    'weight': 500,
+    'weight': 600,
     'line-height': 1.428571429,
     'letter-spacing': -.0125em,
     'font-family': $heading-font-family
   ),
   'subtitle-1': (
-    'size': 1rem,
+    'size': 1.125rem,
     'weight': 400,
     'line-height': 1.428571429,
     'letter-spacing': -.017em,
@@ -102,8 +92,10 @@ $headings: (
     'font-family': $body-font-family
   )
 );
-body {font-feature-settings: "ss03", "calt", "rlig", "kern"}
-.v-toolbar__title {font-weight: 500;}
 $btn-letter-spacing: .25px;
+$btn-text-transform: inherit;
 $bottom-nav-btn-min-width: 60px;
 $list-item-action-icon-margin: 20px;
+$menu-content-border-radius: 0 0 4px 4px;
+$primary-transition: .1s ease-in-out !default;
+
diff --git a/frontend/src/store/storeValueProxy.js b/frontend/src/store/storeValueProxy.js
index 01162f9325..a8b06f5b6d 100644
--- a/frontend/src/store/storeValueProxy.js
+++ b/frontend/src/store/storeValueProxy.js
@@ -90,6 +90,7 @@ function loadingProxy (entityLoaded, uri = null) {
       }
       // Normal property access: return a function that yields another loadingProxy and renders as empty string
       const result = templateParams => loadingProxy(propertyLoaded.then(property => property(templateParams)._meta.load))
+      result.loading = true
       result.toString = () => ''
       return result
     }
diff --git a/frontend/src/views/Camps.vue b/frontend/src/views/Camps.vue
index 21b58b7fc7..86dc3f5904 100644
--- a/frontend/src/views/Camps.vue
+++ b/frontend/src/views/Camps.vue
@@ -1,41 +1,45 @@
 <template>
-  <v-card>
-    <v-toolbar dense color="blue-grey lighten-5">
-      <v-toolbar-title>Camps</v-toolbar-title>
-    </v-toolbar>
-    <v-list class="py-0">
-      <v-skeleton-loader v-if="camps._meta.loading" type="list-item-two-line" />
-      <v-list-item
-        v-for="camp in camps.items"
-        :key="camp.id"
-        two-line
-        :to="campRoute(camp)">
-        <v-list-item-content>
-          <v-list-item-title>{{ camp.title }}</v-list-item-title>
-          <v-list-item-subtitle>
-            {{ camp.name }} - {{ camp.camp_type().organization().name }}
-          </v-list-item-subtitle>
-        </v-list-item-content>
-        <v-list-item-action>
-          <v-btn
-            icon
-            @click.prevent="deleteCamp(camp, ...arguments)">
-            <v-icon left>
-              mdi-delete
-            </v-icon>
-          </v-btn>
-        </v-list-item-action>
-      </v-list-item>
-    </v-list>
-  </v-card>
+  <v-container fluid>
+    <content-card title="Meine Camps" max-width="600">
+      <v-list class="py-0">
+        <template v-if="camps._meta.loading">
+          <v-skeleton-loader type="list-item-two-line" height="64" />
+          <v-skeleton-loader type="list-item-two-line" height="64" />
+        </template>
+        <v-list-item
+          v-for="camp in camps.items"
+          :key="camp.id"
+          two-line
+          :to="campRoute(camp)">
+          <v-list-item-content>
+            <v-list-item-title>{{ camp.title }}</v-list-item-title>
+            <v-list-item-subtitle>
+              {{ camp.name }} - {{ camp.camp_type().organization().name }}
+            </v-list-item-subtitle>
+          </v-list-item-content>
+          <v-list-item-action>
+            <v-btn
+              icon
+              @click.prevent="deleteCamp(camp, ...arguments)">
+              <v-icon left>
+                mdi-delete
+              </v-icon>
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item>
+      </v-list>
+    </content-card>
+  </v-container>
 </template>
 
 <script>
-
 import { campRoute } from '@/router'
 
 export default {
   name: 'Camps',
+  components: {
+    ContentCard: () => import('@/components/base/ContentCard')
+  },
   computed: {
     camps () {
       return this.api.get().camps()
diff --git a/frontend/src/views/DayPicasso.vue b/frontend/src/views/DayPicasso.vue
deleted file mode 100644
index d6d7e19b97..0000000000
--- a/frontend/src/views/DayPicasso.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <v-skeleton-loader v-if="eventInstances.loading" class="ma-3"
-                     type="list-item@6" />
-  <picasso v-else
-           :camp="period.camp"
-           :event-instances="eventInstances.items"
-           :start="startOfDay"
-           :end="endOfDay"
-           type="day" />
-</template>
-
-<script>
-import Picasso from '@/components/Picasso'
-export default {
-  name: 'DayPicasso',
-  components: { Picasso },
-  props: {
-    day: { type: Function, required: true }
-  },
-  computed: {
-    period () {
-      return this.day().period()
-    },
-    eventInstances () {
-      // TODO add filtering for the current day when backend supports it
-      return this.period.event_instances()
-    },
-    periodStartDate () {
-      return new Date(Date.parse(this.period.start))
-    },
-    startOfDay () {
-      return this.addDays(this.periodStartDate, this.day().day_offset)
-    },
-    endOfDay () {
-      return this.addDays(this.startOfDay, 1)
-    }
-  },
-  methods: {
-    addDays (date, days) {
-      return new Date(date.getTime() + days * 24 * 60 * 60 * 1000)
-    }
-  }
-}
-</script>
diff --git a/frontend/src/views/Event.vue b/frontend/src/views/Event.vue
deleted file mode 100644
index 59ef70b225..0000000000
--- a/frontend/src/views/Event.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
-Displays a single event
--->
-
-<template>
-  <v-card>
-    <v-toolbar dense>
-      <v-btn icon @click="$router.go(-1)">
-        <v-icon>mdi-arrow-left</v-icon>
-      </v-btn>
-      <v-toolbar-title class="pl-2">
-        {{ eventInstance().number }}
-        <v-chip v-if="!category._meta.loading" dark :color="category.color">{{ category.short }}</v-chip>
-        {{ event.title }}
-      </v-toolbar-title>
-    </v-toolbar>
-    <v-card-text>
-      <v-skeleton-loader v-if="event._meta.loading" type="article" />
-      <template v-else>
-        <api-text-field
-          :value="event.title"
-          :uri="event._meta.self"
-          fieldname="title"
-          :auto-save="false"
-          label="Titel"
-          required />
-        <api-text-field
-          :value="event.title"
-          :uri="event._meta.self"
-          fieldname="title"
-          :auto-save="true"
-          label="Titel"
-          required />
-        <v-list>
-          <v-label>Instanzen</v-label>
-          <v-list-item
-            v-for="instance in instances.items"
-            :key="instance._meta.self"
-            two-line>
-            <v-list-item-content>
-              1. Montag<br> {{ instance.start_time }} bis {{ instance.end_time }}
-            </v-list-item-content>
-          </v-list-item>
-        </v-list>
-      </template>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-export default {
-  name: 'Event',
-  components: {
-    ApiTextField: () => import('@/components/form/ApiTextField.vue')
-  },
-  props: {
-    eventInstance: { type: Function, required: true }
-  },
-  computed: {
-    event () {
-      return this.eventInstance().event()
-    },
-    category () {
-      return this.event.event_category()
-    },
-    instances () {
-      return this.event.event_instances()
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-  .v-card .v-list-item {
-    padding-left: 0;
-  }
-
-  .event_title input {
-    font-size: 28px;
-  }
-</style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index fbfe424792..1d93cedb91 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,52 +1,52 @@
 <template>
-  <v-card>
-    <v-toolbar dense color="blue-grey lighten-5">
-      <v-toolbar-title>Home</v-toolbar-title>
-    </v-toolbar>
-    <v-list class="pt-0">
-      <v-list-item :to="{ name: 'camps' }">
-        <v-list-item-icon>
-          <v-icon>mdi-format-list-bulleted-triangle</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title>
-            Camp List
-          </v-list-item-title>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item v-if="runningInDocker" href="http://localhost:3001/setup.php?dev-data" target="_blank">
-        <v-list-item-icon>
-          <v-icon>mdi-database-plus</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title>
-            Beispiel-Camps laden
-          </v-list-item-title>
-          <v-list-item-subtitle>
-            Dev data
-          </v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item v-if="runningInDocker" href="http://localhost:3001/setup.php?prod-data" target="_blank">
-        <v-list-item-icon>
-          <v-icon>mdi-database-plus</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title>
-            Beispiel-Camps laden
-          </v-list-item-title>
-          <v-list-item-subtitle>
-            Prod data
-          </v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-    </v-list>
-  </v-card>
+  <v-container>
+    <content-card title="Herzlich willkommen bei eCamp" max-width="600">
+      <v-list class="pt-0">
+        <v-list-item :to="{ name: 'camps' }">
+          <v-list-item-icon>
+            <v-icon>mdi-format-list-bulleted-triangle</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>Meine Camps</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item v-if="runningInDocker" href="http://localhost:3001/setup.php?dev-data" target="_blank">
+          <v-list-item-icon>
+            <v-icon>mdi-database-plus</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>
+              Beispiel-Camps laden
+            </v-list-item-title>
+            <v-list-item-subtitle>
+              Dev data
+            </v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item v-if="runningInDocker" href="http://localhost:3001/setup.php?prod-data" target="_blank">
+          <v-list-item-icon>
+            <v-icon>mdi-database-plus</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>
+              Beispiel-Camps laden
+            </v-list-item-title>
+            <v-list-item-subtitle>
+              Prod data
+            </v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </content-card>
+  </v-container>
 </template>
 
 <script>
+import ContentCard from '@/components/base/ContentCard'
+
 export default {
   name: 'Home',
+  components: { ContentCard },
   computed: {
     runningInDocker () {
       return process.env.VUE_APP_RUNNING_IN_DOCKER
@@ -56,9 +56,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .v-application--is-ltr {
-    .v-list-item__action:first-child, .v-list-item__icon:first-child {
-      margin-right: 20px;
-    }
-  }
 </style>
diff --git a/frontend/src/views/NavDesktop.vue b/frontend/src/views/NavDesktop.vue
new file mode 100644
index 0000000000..d90e74c84f
--- /dev/null
+++ b/frontend/src/views/NavDesktop.vue
@@ -0,0 +1,59 @@
+<template>
+  <v-app-bar
+    v-if="$vuetify.breakpoint.smAndUp"
+    app clipped-left
+    color="blue-grey darken-4" dark>
+    <logo text />
+    <v-spacer />
+    <desktop-search />
+    <nav-desktop-user-menu />
+  </v-app-bar>
+</template>
+
+<script>
+import { campFromRoute, campRoute } from '@/router'
+import DesktopSearch from '@/components/base/NavDesktopSearch'
+import NavDesktopUserMenu from '@/components/base/NavDesktopUserMenu'
+
+export default {
+  name: 'NavDesktop',
+  components: {
+    NavDesktopUserMenu,
+    DesktopSearch,
+    Logo: () => import('@/components/base/Logo')
+  },
+  data () {
+    return {
+      logoutIcon: 'mdi-logout'
+    }
+  },
+  computed: {
+    isLoggedIn () {
+      return this.$auth.isLoggedIn()
+    },
+    camp () {
+      return campFromRoute(this.$route)
+    },
+    username () {
+      return this.api.get().profile().username
+    }
+  },
+  methods: {
+    logout () {
+      this.logoutIcon = ''
+      this.$auth.logout().then(() => this.$router.replace({ name: 'login' }))
+    },
+    prevent (event) {
+      event.stopImmediatePropagation()
+      event.preventDefault()
+      event.cancelBubble = true
+      return null
+    },
+    campRoute
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/NavMobile.vue b/frontend/src/views/NavMobile.vue
new file mode 100644
index 0000000000..336c7343d1
--- /dev/null
+++ b/frontend/src/views/NavMobile.vue
@@ -0,0 +1,19 @@
+<template>
+  <v-bottom-navigation v-if="$vuetify.breakpoint.xs" app
+                       fixed grow>
+    <v-btn :to="{name: 'camps'}">
+      <span>Meine Camps</span>
+      <v-icon>mdi-format-list-bulleted-triangle</v-icon>
+    </v-btn>
+  </v-bottom-navigation>
+</template>
+
+<script>
+export default {
+  name: 'NavMobile'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
new file mode 100644
index 0000000000..48a1af8ece
--- /dev/null
+++ b/frontend/src/views/Profile.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-container fluid>
+    <content-card max-width="600">
+      <template v-slot:title>
+        <v-card-title>
+          <back-button />
+          {{ 'Profil: ' + profile.username }}
+        </v-card-title>
+      </template>
+      <v-col>
+        <api-text-field
+          label="Email"
+          :uri="profile._meta.self"
+          fieldname="mail"
+          :value="profile.mail"
+          :editing="false"
+          required />
+      </v-col>
+    </content-card>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'Home',
+  components: {
+    ApiTextField: () => import('@/components/form/ApiTextField'),
+    ContentCard: () => import('@/components/base/ContentCard'),
+    BackButton: () => import('@/components/base/BackButton')
+  },
+  computed: {
+    profile () {
+      return this.api.get().profile()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/frontend/src/views/auth/Login.vue b/frontend/src/views/auth/Login.vue
index 59d62d77b2..cb5cf6c8ef 100644
--- a/frontend/src/views/auth/Login.vue
+++ b/frontend/src/views/auth/Login.vue
@@ -1,85 +1,76 @@
 <template>
-  <v-content>
-    <v-toolbar absolute width="100%"
-               color="blue-grey darken-4" dark>
-      <v-toolbar-title>
-        <v-btn icon class="title">🏕</v-btn>
-        eCamp
-      </v-toolbar-title>
-    </v-toolbar>
-    <v-container class="fill-height justify-center align-center" fluid>
-      <v-col cols="12" sm="8" md="4">
-        <v-card class="elevation-12">
-          <v-toolbar color="green" dark elevation="1">
-            <v-toolbar-title>Login</v-toolbar-title>
-            <v-spacer />
-            <v-btn color="green darken-3" :to="{ name: 'register' }">Register</v-btn>
-          </v-toolbar>
-          <v-card-text>
-            <v-alert v-if="error" type="error">Login failed</v-alert>
-            <v-form @submit.prevent="login">
-              <v-text-field
-                id="inputUsername"
-                v-model="username"
-                label="Username"
-                name="username"
-                prepend-icon="mdi-account"
-                type="text" />
+  <v-container class="fill-height justify-center align-center" fluid>
+    <v-col cols="12" sm="8" md="4">
+      <v-card class="elevation-12">
+        <v-toolbar color="green" dark elevation="1">
+          <v-toolbar-title>Login</v-toolbar-title>
+          <v-spacer />
+          <v-btn color="green darken-3" :to="{ name: 'register' }">Register</v-btn>
+        </v-toolbar>
+        <v-card-text>
+          <v-alert v-if="error" type="error">Login failed</v-alert>
+          <v-form @submit.prevent="login">
+            <v-text-field
+              id="inputUsername"
+              v-model="username"
+              label="Username"
+              name="username"
+              prepend-icon="mdi-account"
+              type="text" />
 
-              <v-text-field
-                id="inputPassword"
-                v-model="password"
-                label="Password"
-                name="password"
-                prepend-icon="mdi-lock"
-                type="password" />
-              <v-switch label="Remember me" />
-            </v-form>
-          </v-card-text>
-          <v-card-actions>
-            <v-spacer />
-            <v-menu offset-y>
-              <template v-slot:activator="{ on }">
-                <v-btn
-                  color="green"
-                  dark
-                  v-on="on">
-                  <v-progress-circular v-if="hitobitoLoggingIn" indeterminate
-                                       size="14"
-                                       class="mr-2" />
-                  Hitobito
-                </v-btn>
-              </template>
-              <v-list>
-                <v-list-item
-                  @click="loginPbsMiData">
-                  <v-list-item-icon class="mr-3">
-                    <PbsMiDataLogo />
-                  </v-list-item-icon>
-                  <v-list-item-title>PBS MiData</v-list-item-title>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-title>jubla.db</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-            <v-btn color="red" dark @click="loginGoogle">
-              <v-progress-circular v-if="googleLoggingIn" indeterminate
-                                   size="14"
-                                   class="mr-2" />
-              Google
-            </v-btn>
-            <v-btn color="primary" @click="login">
-              <v-progress-circular v-if="normalLoggingIn" indeterminate
-                                   size="14"
-                                   class="mr-2" />
-              Login
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-    </v-container>
-  </v-content>
+            <v-text-field
+              id="inputPassword"
+              v-model="password"
+              label="Password"
+              name="password"
+              prepend-icon="mdi-lock"
+              type="password" />
+            <v-switch label="Remember me" />
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-menu offset-y>
+            <template v-slot:activator="{ on }">
+              <v-btn
+                color="green"
+                dark
+                v-on="on">
+                <v-progress-circular v-if="hitobitoLoggingIn" indeterminate
+                                     size="14"
+                                     class="mr-2" />
+                Hitobito
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item
+                @click="loginPbsMiData">
+                <v-list-item-icon class="mr-3">
+                  <PbsMiDataLogo />
+                </v-list-item-icon>
+                <v-list-item-title>PBS MiData</v-list-item-title>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-title>jubla.db</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+          <v-btn color="red" dark @click="loginGoogle">
+            <v-progress-circular v-if="googleLoggingIn" indeterminate
+                                 size="14"
+                                 class="mr-2" />
+            Google
+          </v-btn>
+          <v-btn color="primary" @click="login">
+            <v-progress-circular v-if="normalLoggingIn" indeterminate
+                                 size="14"
+                                 class="mr-2" />
+            Login
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/views/auth/LoginCallback.vue b/frontend/src/views/auth/LoginCallback.vue
index 08ee825a65..3bad23613c 100644
--- a/frontend/src/views/auth/LoginCallback.vue
+++ b/frontend/src/views/auth/LoginCallback.vue
@@ -1,15 +1,13 @@
 <template>
-  <v-content>
-    <v-sheet color="green dark-3">
-      <v-container class="fill-height" fluid>
-        <v-row align="center" justify="center">
-          <v-card>
-            <v-card-text><h3>Logging you in</h3></v-card-text>
-          </v-card>
-        </v-row>
-      </v-container>
-    </v-sheet>
-  </v-content>
+  <v-sheet color="green dark-3">
+    <v-container class="fill-height" fluid>
+      <v-row align="center" justify="center">
+        <v-card>
+          <v-card-text><h3>Logging you in</h3></v-card-text>
+        </v-card>
+      </v-row>
+    </v-container>
+  </v-sheet>
 </template>
 <script>
 export default {
diff --git a/frontend/src/views/auth/NavDesktop.vue b/frontend/src/views/auth/NavDesktop.vue
new file mode 100644
index 0000000000..7064e73fd8
--- /dev/null
+++ b/frontend/src/views/auth/NavDesktop.vue
@@ -0,0 +1,22 @@
+<template>
+  <v-app-bar v-if="$vuetify.breakpoint.smAndUp" app
+             clipped-left
+             color="blue-grey darken-4" dark>
+    <logo text />
+    <v-spacer />
+  </v-app-bar>
+</template>
+
+<script>
+
+export default {
+  name: 'NavDesktop',
+  components: {
+    Logo: () => import('@/components/base/Logo')
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/frontend/src/views/auth/Register.vue b/frontend/src/views/auth/Register.vue
index 051350de35..062f828bea 100644
--- a/frontend/src/views/auth/Register.vue
+++ b/frontend/src/views/auth/Register.vue
@@ -1,69 +1,60 @@
 <template>
-  <v-content>
-    <v-toolbar absolute width="100%"
-               color="blue-grey darken-4" dark>
-      <v-toolbar-title>
-        <v-btn icon class="title">🏕</v-btn>
-        eCamp
-      </v-toolbar-title>
-    </v-toolbar>
-    <v-container class="fill-height align-center justify-center" fluid>
-      <v-col cols="12" sm="8" md="4">
-        <v-card class="elevation-12">
-          <v-toolbar color="green" dark elevation="1">
-            <v-toolbar-title>Register</v-toolbar-title>
-            <v-spacer />
-            <v-btn color="green darken-3" :to="{ name: 'login' }">Login</v-btn>
-          </v-toolbar>
-          <v-card-text>
-            <v-form @submit.prevent="register">
-              <v-text-field
-                id="inputUsername"
-                v-model="username"
-                label="Username"
-                name="username"
-                prepend-icon="mdi-account"
-                type="text" />
+  <v-container class="fill-height align-center justify-center" fluid>
+    <v-col cols="12" sm="8" md="4">
+      <v-card class="elevation-12">
+        <v-toolbar color="green" dark elevation="1">
+          <v-toolbar-title>Register</v-toolbar-title>
+          <v-spacer />
+          <v-btn color="green darken-3" :to="{ name: 'login' }">Login</v-btn>
+        </v-toolbar>
+        <v-card-text>
+          <v-form @submit.prevent="register">
+            <v-text-field
+              id="inputUsername"
+              v-model="username"
+              label="Username"
+              name="username"
+              prepend-icon="mdi-account"
+              type="text" />
 
-              <v-text-field
-                id="inputEmail"
-                v-model="email"
-                label="eMail"
-                name="email"
-                prepend-icon="mdi-email"
-                type="text" />
+            <v-text-field
+              id="inputEmail"
+              v-model="email"
+              label="eMail"
+              name="email"
+              prepend-icon="mdi-email"
+              type="text" />
 
-              <v-text-field
-                id="inputPassword1"
-                v-model="pw1"
-                label="Password"
-                name="password"
-                :rules="pw1Rules"
-                validate-on-blur
-                prepend-icon="mdi-lock"
-                type="password" />
+            <v-text-field
+              id="inputPassword1"
+              v-model="pw1"
+              label="Password"
+              name="password"
+              :rules="pw1Rules"
+              validate-on-blur
+              prepend-icon="mdi-lock"
+              type="password" />
 
-              <v-text-field
-                id="inputPassword2"
-                v-model="pw2"
-                label="Password erneut eingeben"
-                name="password"
-                :rules="pw2Rules"
-                validate-on-blur
-                prepend-icon="mdi-lock"
-                type="password" />
-            </v-form>
-          </v-card-text>
-          <v-card-actions>
-            <v-spacer />
-            <v-btn color="primary" :disabled="!formComplete" @click="register">
-              Register
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-    </v-container>
-  </v-content>
+            <v-text-field
+              id="inputPassword2"
+              v-model="pw2"
+              label="Password erneut eingeben"
+              name="password"
+              :rules="pw2Rules"
+              validate-on-blur
+              prepend-icon="mdi-lock"
+              type="password" />
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn color="primary" :disabled="!formComplete" @click="register">
+            Register
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/views/auth/RegisterDone.vue b/frontend/src/views/auth/RegisterDone.vue
index f05d3124f9..a1cbd63fa4 100644
--- a/frontend/src/views/auth/RegisterDone.vue
+++ b/frontend/src/views/auth/RegisterDone.vue
@@ -1,33 +1,24 @@
 <template>
-  <v-content>
-    <v-toolbar absolute width="100%"
-               color="blue-grey darken-4" dark>
-      <v-toolbar-title>
-        <v-btn icon class="title">🏕</v-btn>
-        eCamp
-      </v-toolbar-title>
-    </v-toolbar>
-    <v-container class="fill-height justify-center align-center" fluid>
-      <v-col cols="12" sm="8" md="4">
-        <v-card class="elevation-12">
-          <v-toolbar dense color="blue-grey lighten-5">
-            <v-toolbar-title>Registering</v-toolbar-title>
-          </v-toolbar>
-          <v-card-text>
-            <v-alert type="success">
-              Successfully registered.
-            </v-alert>
-          </v-card-text>
-          <v-card-actions>
-            <v-spacer />
-            <v-btn color="primary" :to="{name: 'login'}">
-              Login
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-    </v-container>
-  </v-content>
+  <v-container class="fill-height justify-center align-center" fluid>
+    <v-col cols="12" sm="8" md="4">
+      <v-card class="elevation-12">
+        <v-toolbar dense color="blue-grey lighten-5">
+          <v-toolbar-title>Registering</v-toolbar-title>
+        </v-toolbar>
+        <v-card-text>
+          <v-alert type="success">
+            Successfully registered.
+          </v-alert>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn color="primary" :to="{name: 'login'}">
+            Login
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/views/camp/Admin.vue b/frontend/src/views/camp/Admin.vue
new file mode 100644
index 0000000000..70bc68e24b
--- /dev/null
+++ b/frontend/src/views/camp/Admin.vue
@@ -0,0 +1,36 @@
+<!--
+Admin screen of a camp: Displays details & periods of a single camp and allows to edit them.
+-->
+
+<template>
+  <content-card title="Admin">
+    <v-card-text>
+      <camp-settings :camp="camp" />
+
+      <camp-periods :camp="camp" />
+
+      <api-demo :camp="camp" />
+    </v-card-text>
+  </content-card>
+</template>
+
+<script>
+import CampSettings from '@/components/camp/CampSettings'
+import CampPeriods from '@/components/camp/CampPeriods'
+import ApiDemo from '@/components/camp/ApiDemo'
+import ContentCard from '@/components/base/ContentCard'
+
+export default {
+  name: 'Admin',
+  components: { ContentCard, CampSettings, CampPeriods, ApiDemo },
+  props: {
+    camp: { type: Function, required: true }
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/frontend/src/views/Camp.vue b/frontend/src/views/camp/Camp.vue
similarity index 75%
rename from frontend/src/views/Camp.vue
rename to frontend/src/views/camp/Camp.vue
index daf7445863..41cf9d9c0e 100644
--- a/frontend/src/views/Camp.vue
+++ b/frontend/src/views/camp/Camp.vue
@@ -3,7 +3,9 @@ Displays several tabs with details on a single camp.
 -->
 
 <template>
-  <router-view :camp="camp" />
+  <v-container fluid>
+    <router-view :camp="camp" />
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/views/camp/CampHome.vue b/frontend/src/views/camp/CampHome.vue
deleted file mode 100644
index 5e4bb71d9b..0000000000
--- a/frontend/src/views/camp/CampHome.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<!--
-Home screen of a camp: Displays details & perdios of a single camp and allows to edit them.
--->
-
-<template>
-  <div>
-    <camp-settings :camp="camp" />
-
-    <camp-periods :camp="camp" />
-
-    <api-demo :camp="camp" />
-  </div>
-</template>
-
-<script>
-import CampSettings from '@/components/camp/CampSettings'
-import CampPeriods from '@/components/camp/CampPeriods'
-import ApiDemo from '@/components/camp/ApiDemo'
-
-export default {
-  name: 'CampHome',
-  components: { CampSettings, CampPeriods, ApiDemo },
-  props: {
-    camp: { type: Function, required: true }
-  },
-  data () {
-    return {
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>
diff --git a/frontend/src/views/camp/CampProgram.vue b/frontend/src/views/camp/CampProgram.vue
new file mode 100644
index 0000000000..212bace60e
--- /dev/null
+++ b/frontend/src/views/camp/CampProgram.vue
@@ -0,0 +1,114 @@
+<!--
+Show all event instances of a single period.
+-->
+
+<template>
+  <content-card>
+    <v-sheet>
+      <mobile-search v-if="$vuetify.breakpoint.xs" />
+      <v-btn
+        :fixed="$vuetify.breakpoint.xs"
+        :absolute="!$vuetify.breakpoint.xs"
+        light class="fab--top_nav"
+        fab small
+        style="z-index: 3"
+        top right
+        :class="{'float-right':!$vuetify.breakpoint.xs}"
+        color="white"
+        :to="{ query: { ...$route.query, list: !listFormat || undefined } }">
+        <v-icon v-if="listFormat">mdi-calendar-month</v-icon>
+        <v-icon v-else>mdi-menu</v-icon>
+      </v-btn>
+      <template v-if="!firstPeriodLoaded">
+        <v-skeleton-loader v-if="listFormat" type="list-item-avatar-two-line@2" class="py-2" />
+        <v-skeleton-loader v-else type="table" />
+      </template>
+      <template v-if="firstPeriod">
+        <event-list
+          v-if="listFormat"
+          :camp="camp" :event-instances="firstPeriod.event_instances().items" />
+        <picasso
+          v-else
+          :camp="camp"
+          class="mx-2 ma-sm-0 pa-sm-2"
+          :event-instances="firstPeriod.event_instances().items"
+          :start="new Date(Date.parse(firstPeriod.start))"
+          :end="new Date(Date.parse(firstPeriod.end))" />
+      </template>
+      <v-btn
+        :fixed="$vuetify.breakpoint.xs"
+        :absolute="!$vuetify.breakpoint.xs"
+        dark
+        fab
+        style="z-index: 3"
+        bottom
+        right
+        class="fab--bottom_nav float-right"
+        color="red">
+        <v-icon>mdi-plus</v-icon>
+      </v-btn>
+    </v-sheet>
+  </content-card>
+</template>
+<script>
+import ContentCard from '@/components/base/ContentCard'
+
+export default {
+  name: 'CampProgram',
+  components: {
+    ContentCard,
+    MobileSearch: () => import('@/components/base/MobileSearch'),
+    Picasso: () => import('@/components/camp/Picasso'),
+    EventList: () => import('@/components/camp/EventList')
+  },
+  props: {
+    camp: { type: Function, required: true }
+  },
+  data () {
+    return {
+      tab: null
+    }
+  },
+  computed: {
+    listFormat () {
+      return this.$route.query.list
+    },
+    periods () {
+      return this.camp().periods()
+    },
+    firstPeriod () {
+      return this.periods.items[0]
+    },
+    firstPeriodLoaded () {
+      return this.firstPeriod && !this.firstPeriod._meta.loading
+    }
+  },
+  mounted () {
+    this.camp().events()
+  }
+}
+</script>
+
+<style lang="scss">
+  .fab--bottom_nav {
+    position: fixed;
+    bottom: 16px + 56px !important;
+    @media #{map-get($display-breakpoints, 'sm-and-up')}{
+      bottom: 16px + 36px !important;
+    }
+  }
+
+  .fab--top_nav {
+    position: fixed;
+    top: 16px + 105px !important;
+    @media #{map-get($display-breakpoints, 'sm-and-up')}{
+      top: 16px + 65px !important;
+    }
+  }
+</style>
+
+<style lang="scss" scoped>
+  ::v-deep .v-skeleton-loader__list-item-avatar-two-line {
+    height: 60px;
+  }
+</style>
diff --git a/frontend/src/views/camp/Collaborators.vue b/frontend/src/views/camp/Collaborators.vue
new file mode 100644
index 0000000000..6efb23e76a
--- /dev/null
+++ b/frontend/src/views/camp/Collaborators.vue
@@ -0,0 +1,149 @@
+<!--
+Displays collaborators of a single camp.
+-->
+<template>
+  <content-card title="Team">
+    <v-card-text>
+      <content-group title="Mitglieder">
+        <v-list>
+          <v-skeleton-loader v-if="collaborators.length <= 0" type="list-item-avatar-two-line@3" class="px-0" />
+          <collaborator-list-item
+            v-for="collaborator in establishedCollaborators"
+            :key="collaborator._meta.self" :collaborator="collaborator" />
+        </v-list>
+      </content-group>
+
+      <content-group v-if="requestedCollaborators.length > 0" title="Offene Anfragen">
+        <v-list>
+          <collaborator-list-item
+            v-for="collaborator in requestedCollaborators"
+            :key="collaborator._meta.self" :collaborator="collaborator" />
+        </v-list>
+      </content-group>
+
+      <content-group v-if="invitedCollaborators.length > 0" title="Offene Einladungen">
+        <v-list>
+          <collaborator-list-item
+            v-for="collaborator in invitedCollaborators"
+            :key="collaborator._meta.self" :collaborator="collaborator" />
+        </v-list>
+      </content-group>
+
+      <content-group title="Einladen">
+        <v-text-field
+          v-model="search"
+          hide-details
+          prepend-icon="mdi-account-search"
+          single-line
+          placeholder="Suchen"
+          @focus="loadingResults = true"
+          @blur="loadingResults = false" />
+
+        <v-list>
+          <v-skeleton-loader v-if="loadingResults && searchResults.length < 1" type="list-item-avatar-two-line@3" class="px-0" />
+          <v-list-item v-for="result in searchResults" :key="result.id"
+                       class="px-0" two-line>
+            <v-list-item-avatar>
+              <v-img src="https://i.pravatar.cc/300" />
+            </v-list-item-avatar>
+            <v-list-item-content>
+              <v-list-item-title>{{ result.username }}</v-list-item-title>
+              <v-list-item-subtitle>{{ result.mail }}</v-list-item-subtitle>
+            </v-list-item-content>
+            <v-list-item-action>
+              <button-add icon="mdi-account-plus" @click="invite(result, 'member')">
+                Member
+              </button-add>
+            </v-list-item-action>
+            <v-list-item-action class="ml-1">
+              <button-add icon="mdi-account-star" @click="invite(result, 'manager')">
+                Manager
+              </button-add>
+            </v-list-item-action>
+          </v-list-item>
+        </v-list>
+      </content-group>
+    </v-card-text>
+  </content-card>
+</template>
+<script>
+import ContentCard from '@/components/base/ContentCard'
+import ContentGroup from '@/components/base/ContentGroup'
+import CollaboratorListItem from '@/components/camp/CollaboratorListItem'
+import ButtonAdd from '@/components/base/ButtonAdd'
+
+export default {
+  name: 'Collaborators',
+  components: {
+    ButtonAdd,
+    CollaboratorListItem,
+    ContentGroup,
+    ContentCard
+  },
+  props: {
+    camp: { type: Function, required: true }
+  },
+  data () {
+    return {
+      editing: false,
+      loadingResults: false,
+      messages: [],
+      search: ''
+    }
+  },
+  computed: {
+    collaborators () {
+      return this.camp().camp_collaborations().items.filter(c => !c._meta.deleting)
+    },
+    establishedCollaborators () {
+      return this.collaborators.filter(c => c.status === 'established')
+    },
+    requestedCollaborators () {
+      return this.collaborators.filter(c => c.status === 'requested')
+    },
+    invitedCollaborators () {
+      return this.collaborators.filter(c => c.status === 'invited')
+    },
+    searchResults () {
+      if (this.search.length >= 3) {
+        const filterUsers = this.collaborators.filter(
+          c => c.user !== undefined
+        ).map(
+          c => c.user().id
+        )
+        return this.api.get('/user?search=' + this.search).items.filter(
+          u => !filterUsers.includes(u.id)
+        )
+      }
+      return []
+    }
+  },
+  created () {
+    return this.camp().camp_collaborations()
+  },
+  methods: {
+    invite (user, role) {
+      this.api.post('/camp-collaboration', {
+        camp_id: this.camp().id,
+        user_id: user.id,
+        role: role
+      }).then(this.refreshCamp)
+    },
+    refreshCamp () {
+      this.api.reload(this.camp()._meta.self)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .v-skeleton-loader__list-item-avatar-two-line {
+    height: 72px;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  ::v-deep .v-select__selections input {
+    width: 20px;
+  }
+</style>
diff --git a/frontend/src/views/camp/NavDesktop.vue b/frontend/src/views/camp/NavDesktop.vue
new file mode 100644
index 0000000000..3ff5cc7651
--- /dev/null
+++ b/frontend/src/views/camp/NavDesktop.vue
@@ -0,0 +1,56 @@
+<template>
+  <v-app-bar v-if="$vuetify.breakpoint.smAndUp" app
+             clipped-left
+             color="blue-grey darken-4" dark>
+    <logo>
+      <v-btn text class="justify-start px-2"
+             :to="campRoute(camp(), 'program')"
+             width="216">
+        <v-toolbar-title>
+          {{ camp().title | loading('Camp wird geladen…') }}
+        </v-toolbar-title>
+      </v-btn>
+    </logo>
+
+    <v-toolbar-items>
+      <v-btn text :to="campRoute(camp(), 'collaborators')">
+        <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-account-group</v-icon>
+        <span class="sr-only-sm-and-down">Team</span>
+      </v-btn>
+      <v-btn text :to="campRoute(camp(), 'admin')" exact>
+        <v-icon :left="$vuetify.breakpoint.mdAndUp">mdi-cogs</v-icon>
+        <span class="sr-only-sm-and-down">Admin</span>
+      </v-btn>
+    </v-toolbar-items>
+    <v-spacer />
+    <desktop-search />
+    <nav-desktop-user-menu />
+  </v-app-bar>
+</template>
+
+<script>
+import { campFromRoute, campRoute } from '@/router'
+import DesktopSearch from '@/components/base/NavDesktopSearch'
+import NavDesktopUserMenu from '@/components/base/NavDesktopUserMenu'
+
+export default {
+  name: 'NavDesktop',
+  components: {
+    NavDesktopUserMenu,
+    DesktopSearch,
+    Logo: () => import('@/components/base/Logo')
+  },
+  computed: {
+    camp () {
+      return campFromRoute(this.$route)
+    }
+  },
+  methods: {
+    campRoute
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/frontend/src/views/camp/NavMobile.vue b/frontend/src/views/camp/NavMobile.vue
new file mode 100644
index 0000000000..02c80405ad
--- /dev/null
+++ b/frontend/src/views/camp/NavMobile.vue
@@ -0,0 +1,35 @@
+<template>
+  <v-bottom-navigation v-if="$vuetify.breakpoint.xs" app
+                       fixed grow>
+    <v-btn>
+      <span>Material</span>
+      <v-icon>mdi-package-variant</v-icon>
+    </v-btn>
+    <v-btn>
+      <span>Tasks</span>
+      <v-icon>mdi-format-list-checks</v-icon>
+    </v-btn>
+    <v-btn :to="{name: 'camp/program'}">
+      <span>Camp</span>
+      <v-icon large>mdi-tent</v-icon>
+    </v-btn>
+    <v-btn :to="{name: 'camp/collaborators'}" exact>
+      <span>Team</span>
+      <v-icon>mdi-account-group</v-icon>
+    </v-btn>
+    <v-btn :to="{name: 'camp/admin'}">
+      <span>Admin</span>
+      <v-icon>mdi-cogs</v-icon>
+    </v-btn>
+  </v-bottom-navigation>
+</template>
+
+<script>
+export default {
+  name: 'NavMobile'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/camp/SideBarPeriods.vue b/frontend/src/views/camp/SideBarPeriods.vue
new file mode 100644
index 0000000000..a17c625447
--- /dev/null
+++ b/frontend/src/views/camp/SideBarPeriods.vue
@@ -0,0 +1,50 @@
+<!--
+Displays periods of a single camp.
+-->
+
+<template>
+  <side-bar>
+    <content-card>
+      <v-subheader class="text-uppercase subtitle-2">
+        Periods
+      </v-subheader>
+      <v-list>
+        <v-list-item
+          v-for="period in periods.items"
+          :key="period._meta.self"
+          two-line>
+          <v-list-item-content>
+            <v-list-item-title>{{ period.description }}</v-list-item-title>
+            <v-list-item-subtitle>{{ period.start }} - {{ period.end }}</v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </content-card>
+  </side-bar>
+</template>
+<script>
+import SideBar from '@/components/base/SideBar'
+import ContentCard from '@/components/base/ContentCard'
+
+export default {
+  name: 'SideBarPeriods',
+  components: { ContentCard, SideBar },
+  props: {
+    camp: { type: Function, required: true }
+  },
+  data () {
+    return {
+      editing: false,
+      messages: []
+    }
+  },
+  computed: {
+    periods () {
+      return this.camp().periods()
+    },
+    events () {
+      return this.camp().events()
+    }
+  }
+}
+</script>
diff --git a/frontend/src/views/event/Event.vue b/frontend/src/views/event/Event.vue
new file mode 100644
index 0000000000..b2eae5be6f
--- /dev/null
+++ b/frontend/src/views/event/Event.vue
@@ -0,0 +1,86 @@
+<!--
+Displays a single event
+-->
+
+<template>
+  <v-container fluid>
+    <content-card>
+      <v-toolbar dense>
+        <back-button />
+        <v-toolbar-title class="pl-2">
+          {{ eventInstance().number }}
+          <v-chip v-if="!category._meta.loading" dark :color="category.color">{{ category.short }}</v-chip>
+          {{ event.title }}
+        </v-toolbar-title>
+      </v-toolbar>
+      <v-card-text>
+        <v-skeleton-loader v-if="event._meta.loading" type="article" />
+        <template v-else>
+          <api-text-field
+            :value="event.title"
+            :uri="event._meta.self"
+            fieldname="title"
+            :auto-save="false"
+            label="Titel"
+            required />
+          <api-text-field
+            :value="event.title"
+            :uri="event._meta.self"
+            fieldname="title"
+            :auto-save="true"
+            label="Titel"
+            required />
+          <v-list>
+            <v-label>Instanzen</v-label>
+            <v-list-item
+              v-for="instance in instances.items"
+              :key="instance._meta.self"
+              two-line>
+              <v-list-item-content>
+                1. Montag<br> {{ instance.start_time }} bis {{ instance.end_time }}
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </template>
+      </v-card-text>
+    </content-card>
+  </v-container>
+</template>
+
+<script>
+import ContentCard from '@/components/base/ContentCard'
+
+export default {
+  name: 'Event',
+  components: {
+    BackButton: () => import('@/components/base/BackButton'),
+    ContentCard,
+    ApiTextField: () => import('@/components/form/ApiTextField')
+  },
+  props: {
+    eventInstance: { type: Function, required: true }
+  },
+  computed: {
+    event () {
+      return this.eventInstance().event()
+    },
+    category () {
+      return this.event.event_category()
+    },
+    instances () {
+      return this.event.event_instances()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+  .v-card .v-list-item {
+    padding-left: 0;
+  }
+
+  .event_title input {
+    font-size: 28px;
+  }
+</style>
diff --git a/frontend/src/views/event/SideBarProgram.vue b/frontend/src/views/event/SideBarProgram.vue
new file mode 100644
index 0000000000..5d8489344e
--- /dev/null
+++ b/frontend/src/views/event/SideBarProgram.vue
@@ -0,0 +1,55 @@
+<template>
+  <side-bar>
+    <content-card>
+      <v-subheader class="text-uppercase subtitle-2">
+        Tagesübersicht
+      </v-subheader>
+      <v-skeleton-loader v-if="eventInstances.loading" class="ma-3"
+                         type="list-item@6" />
+      <picasso v-else
+               :camp="period.camp"
+               :event-instances="eventInstances.items"
+               :start="startOfDay"
+               :interval-height="36"
+               :end="endOfDay"
+               type="day" />
+    </content-card>
+  </side-bar>
+</template>
+
+<script>
+import Picasso from '@/components/camp/Picasso'
+import SideBar from '@/components/base/SideBar'
+import ContentCard from '@/components/base/ContentCard'
+
+export default {
+  name: 'SideBarProgram',
+  components: { ContentCard, SideBar, Picasso },
+  props: {
+    day: { type: Function, required: true }
+  },
+  computed: {
+    period () {
+      return this.day().period()
+    },
+    eventInstances () {
+      // TODO add filtering for the current day when backend supports it
+      return this.period.event_instances()
+    },
+    periodStartDate () {
+      return new Date(Date.parse(this.period.start))
+    },
+    startOfDay () {
+      return this.addDays(this.periodStartDate, this.day().day_offset)
+    },
+    endOfDay () {
+      return this.addDays(this.startOfDay, 1)
+    }
+  },
+  methods: {
+    addDays (date, days) {
+      return new Date(date.getTime() + days * 24 * 60 * 60 * 1000)
+    }
+  }
+}
+</script>
diff --git a/frontend/tests/e2e/specs/test.js b/frontend/tests/e2e/specs/test.js
index 8b54c1358f..8cb264699f 100644
--- a/frontend/tests/e2e/specs/test.js
+++ b/frontend/tests/e2e/specs/test.js
@@ -3,6 +3,5 @@
 describe('My First Test', () => {
   it('Visits the app root url', () => {
     cy.visit('/')
-    cy.contains('.v-toolbar__title', 'eCamp')
   })
 })
diff --git a/frontend/tests/unit/api-store.spec.js b/frontend/tests/unit/api-store.spec.js
index 78ea5706bf..0fe0bcceeb 100644
--- a/frontend/tests/unit/api-store.spec.js
+++ b/frontend/tests/unit/api-store.spec.js
@@ -700,7 +700,7 @@ describe('API store', () => {
     axiosMock.onGet('http://localhost/periods/1').networkError()
     axiosMock.onGet('http://localhost/days/2').reply(404)
     const load = vm.api.get('/camps/3')._meta.load
-    vm.api.get('/periods/1')._meta.load
+    const period = vm.api.get('/periods/1')._meta.load
     await letNetworkRequestFinish()
     const camp = await load
     expect(vm.$store.state.api).toMatchObject(circularReference.storeState)
@@ -711,6 +711,7 @@ describe('API store', () => {
     // then
     await letNetworkRequestFinish()
     expect(axiosMock.history.get.length).toBe(3)
+    await period
     done()
   })
 
@@ -893,4 +894,12 @@ describe('API store', () => {
     expect(await load).toMatchObject({ id: 83, name: 'Pflock', _meta: { self: 'http://localhost/camps/1/users/83' } })
     done()
   })
+
+  it('sets property loading on LoadingProxy to true', async done => {
+    // given
+    axiosMock.onGet('http://localhost/camps/1').reply(200, embeddedSingleEntity.serverResponse)
+    const loadingProxy = vm.api.get('/camps/1')
+    expect(loadingProxy.loading).toBe(true)
+    done()
+  })
 })