diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 62a8a1d0d..0be486f31 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -63,7 +63,7 @@ body {
 .page-leave-active,
 .layout-enter-active,
 .layout-leave-active {
-  @apply transition;
+  @apply transition-opacity;
 }
 
 .page-enter,
diff --git a/components/app/Login.vue b/components/app/Login.vue
new file mode 100644
index 000000000..8c7a4373f
--- /dev/null
+++ b/components/app/Login.vue
@@ -0,0 +1,26 @@
+<template>
+  <SmartModal v-if="show" @close="hideModal">
+    <template #header>
+      <h3 class="heading">{{ $t("login") }}</h3>
+      <div>
+        <ButtonSecondary icon="close" @click.native="hideModal" />
+      </div>
+    </template>
+    <template #body>
+      <FirebaseLogin />
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+export default {
+  props: {
+    show: Boolean,
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>