diff --git a/web/vue-app/src/components/LoginButton.vue b/web/vue-app/src/components/LoginButton.vue
index 769ba37..5f55c54 100644
--- a/web/vue-app/src/components/LoginButton.vue
+++ b/web/vue-app/src/components/LoginButton.vue
@@ -55,7 +55,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="login-button-root">
     <button v-if="!isParentAuthenticated" @click="open" aria-label="Parent login">Parent</button>
     <button v-else @click="handleLogout" aria-label="Parent logout">Log out</button>
 
@@ -152,4 +152,8 @@ onUnmounted(() => {
   font-size: 0.9rem;
   margin-top: 0.25rem;
 }
+
+.login-button-root {
+  height: 100%;
+}
 </style>
diff --git a/web/vue-app/src/layout/ChildLayout.vue b/web/vue-app/src/layout/ChildLayout.vue
index 33ab538..97845be 100644
--- a/web/vue-app/src/layout/ChildLayout.vue
+++ b/web/vue-app/src/layout/ChildLayout.vue
@@ -119,12 +119,17 @@ const showBack = computed(() => route.path !== '/child')
 
 .login-btn {
   align-self: end;
+  height: 100%;
 }
 
 @media (max-width: 480px) {
   .back-btn {
     padding: 0.45rem 0.75rem;
-    font-size: 0.95rem;
+    font-size: 0.6rem;
+    height: 100%;
+  }
+  .login-btn {
+    height: 100%;
   }
 }
 </style>
@@ -138,5 +143,13 @@ const showBack = computed(() => route.path !== '/child')
   cursor: pointer;
   color: #667eea;
   font-weight: 600;
+  height: 100%;
+}
+@media (max-width: 480px) {
+  .login-btn button {
+    padding: 0.45rem 0.75rem;
+    font-size: 0.6rem;
+    height: 100%;
+  }
 }
 </style>
diff --git a/web/vue-app/src/layout/ParentLayout.vue b/web/vue-app/src/layout/ParentLayout.vue
index 446d196..6ca7e22 100644
--- a/web/vue-app/src/layout/ParentLayout.vue
+++ b/web/vue-app/src/layout/ParentLayout.vue
@@ -230,6 +230,7 @@ const showBack = computed(
 
 .login-btn {
   align-self: end;
+  height: 100%;
 }
 
 @media (max-width: 480px) {
@@ -253,6 +254,7 @@ const showBack = computed(
   cursor: pointer;
   color: #667eea;
   font-weight: 600;
+  height: 100%;
 }
 
 @media (max-width: 480px) {