diff --git a/ui/src/App.vue b/ui/src/App.vue
index bc8ef18..199b654 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="container">
+    <LoginModal ref="login_modal" />
+    <ImageModal ref="image_modal" />
+
     <div class="section">
       <h1 class="title has-text-centered is-uppercase">
         Adventskalender {{ date }}
       </h1>
       <h2 class="subtitle has-text-centered">Der Gelöt</h2>
 
-      <LoginModal ref="login_modal" />
-      <ImageModal ref="image_modal" />
-
       <CalendarDoor
         v-for="(_, index) in 24"
         :key="index"
@@ -16,6 +16,12 @@
         @openDoor="open_calendar_door"
       />
     </div>
+
+    <div class="section">
+      <button class="button" @click="$refs.login_modal.set_active(true)">
+        Login
+      </button>
+    </div>
   </div>
 </template>
 
@@ -53,13 +59,10 @@ export default class App extends Vue {
         this.visible_days = visible_days;
       }
     );
-
-    this.$refs.login_modal.set_active(true);
   }
 
   private open_calendar_door(image_src: string): void {
-    this.$refs.image_modal.set_src(image_src);
-    this.$refs.image_modal.set_active(true);
+    this.$refs.image_modal.show_src(image_src);
   }
 }
 </script>
diff --git a/ui/src/components/ImageModal.vue b/ui/src/components/ImageModal.vue
index c9a245c..9bbfb32 100644
--- a/ui/src/components/ImageModal.vue
+++ b/ui/src/components/ImageModal.vue
@@ -27,8 +27,9 @@ export default class ImageModal extends Vue {
     this.active = state;
   }
 
-  public set_src(src: string): void {
+  public show_src(src: string): void {
     this.image_src = src;
+    this.set_active(true);
   }
 }
 </script>