Add unit tests for LoginButton component with comprehensive coverage

2026-02-05 16:37:10 -05:00
parent fd70eca0c9
commit 47541afbbf
47 changed files with 1179 additions and 824 deletions
--- a/frontend/vue-app/public/child-mode.png
+++ b/frontend/vue-app/public/child-mode.png
--- a/frontend/vue-app/public/profile.png
+++ b/frontend/vue-app/public/profile.png
--- a/frontend/vue-app/public/sign-out.png
+++ b/frontend/vue-app/public/sign-out.png
--- a/frontend/vue-app/src/assets/actions-shared.css
+++ b/frontend/vue-app/src/assets/actions-shared.css
@@ -1,28 +0,0 @@
-/* Unified error style */
-.error {
-  color: var(--error);
-  margin-top: 0.7rem;
-  text-align: center;
-  background: var(--error-bg);
-  border-radius: 8px;
-  padding: 1rem;
-}
-
-/* Error message */
-.error-message {
-  color: var(--error, #e53e3e);
-  font-size: 0.98rem;
-  margin-top: 0.4rem;
-  display: block;
-}
-
-/* Success message */
-.success-message {
-  color: var(--success, #16a34a);
-  font-size: 1rem;
-}
-
-/* Input error */
-.input-error {
-  border-color: var(--error, #e53e3e);
-}
--- a/frontend/vue-app/src/assets/button-shared.css
+++ b/frontend/vue-app/src/assets/button-shared.css
@@ -1,21 +0,0 @@
-.form-btn {
-  padding: 0.6rem 1rem;
-  border-radius: 8px;
-  border: none;
-  background: var(--btn-primary, #667eea);
-  color: #fff;
-  font-weight: 700;
-  cursor: pointer;
-  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.12);
-  transition:
-    background 0.15s,
-    transform 0.06s;
-}
-.form-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-.form-btn:hover:not(:disabled) {
-  background: var(--btn-primary-hover, #5a67d8);
-  transform: translateY(-1px);
-}
--- a/frontend/vue-app/src/assets/child-list-shared.css
+++ b/frontend/vue-app/src/assets/child-list-shared.css
@@ -1,205 +0,0 @@
-.child-list-container {
-  background: var(--child-list-bg, rgba(255, 255, 255, 0.1));
-  border-radius: 12px;
-  padding: 1rem;
-  color: var(--child-list-title-color, #fff);
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.child-list-container h3 {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--child-list-title-color, #fff);
-}
-
-.scroll-wrapper {
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-behavior: smooth;
-  width: 100%;
-  -webkit-overflow-scrolling: touch;
-}
-
-.scroll-wrapper::-webkit-scrollbar {
-  height: 8px;
-}
-
-.scroll-wrapper::-webkit-scrollbar-track {
-  background: var(--child-list-scrollbar-track, rgba(255, 255, 255, 0.05));
-  border-radius: 10px;
-}
-
-.scroll-wrapper::-webkit-scrollbar-thumb {
-  background: var(
-    --child-list-scrollbar-thumb,
-    linear-gradient(180deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8))
-  );
-  border-radius: 10px;
-  border: var(--child-list-scrollbar-thumb-border, 2px solid rgba(255, 255, 255, 0.08));
-}
-
-.scroll-wrapper::-webkit-scrollbar-thumb:hover {
-  background: var(
-    --child-list-scrollbar-thumb-hover,
-    linear-gradient(180deg, rgba(102, 126, 234, 1), rgba(118, 75, 162, 1))
-  );
-  box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
-}
-
-.item-scroll {
-  display: flex;
-  gap: 0.75rem;
-  min-width: min-content;
-  padding: 0.5rem 0;
-}
-
-/* Fallback for browsers that don't support flex gap */
-.item-card + .item-card {
-  margin-left: 0.75rem;
-}
-
-.item-card {
-  position: relative;
-  background: var(--item-card-bg, rgba(255, 255, 255, 0.12));
-  border-radius: 8px;
-  padding: 0.75rem;
-  min-width: 140px;
-  max-width: 220px;
-  width: 100%;
-  text-align: center;
-  flex-shrink: 0;
-  transition: transform 0.18s ease;
-  border: var(--item-card-border, 1px solid rgba(255, 255, 255, 0.08));
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.item-card:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--item-card-hover-shadow, 0 8px 20px rgba(0, 0, 0, 0.12));
-}
-
-.item-card.ready {
-  box-shadow: var(--item-card-ready-shadow, 0 0 0 3px #667eea88, 0 0 12px #667eea44);
-  border-color: var(--item-card-ready-border, #667eea);
-  animation: ready-glow 0.7s;
-}
-
-.item-card.disabled {
-  opacity: 0.5;
-  pointer-events: none;
-  filter: grayscale(0.7);
-}
-
-.item-card.good {
-  border-color: var(--item-card-good-border, rgba(46, 204, 113, 0.9)); /* green */
-  background: var(--item-card-good-bg, rgba(46, 204, 113, 0.06));
-}
-
-.item-card.bad {
-  border-color: var(--item-card-bad-border, rgba(255, 99, 71, 0.95)); /* red */
-  background: var(--item-card-bad-bg, rgba(255, 99, 71, 0.03));
-}
-
-@keyframes ready-glow {
-  0% {
-    box-shadow: 0 0 0 0 #667eea00;
-    border-color: inherit;
-  }
-  100% {
-    box-shadow: var(--item-card-ready-shadow, 0 0 0 3px #667eea88, 0 0 12px #667eea44);
-    border-color: var(--item-card-ready-border, #667eea);
-  }
-}
-
-.item-name {
-  font-size: 0.95rem;
-  font-weight: 700;
-  margin-bottom: 0.4rem;
-  color: var(--item-name-color, #fff);
-  line-height: 1.2;
-  word-break: break-word;
-}
-
-/* Image styling */
-.item-image {
-  width: 70px;
-  height: 70px;
-  object-fit: cover;
-  border-radius: 6px;
-  margin: 0 auto 0.4rem auto;
-  display: block;
-}
-
-.item-points {
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: var(--item-points-color, #ffd166);
-  font-size: 1rem;
-  font-weight: 900;
-  text-shadow: var(
-    --item-points-shadow,
-    -1px -1px 0 #1a3d1f,
-    1px -1px 0 #1a3d1f,
-    -1px 1px 0 #1a3d1f,
-    1px 1px 0 #1a3d1f
-  );
-}
-
-.item-points.ready {
-  color: var(--item-points-ready-color, #38c172); /* a nice green */
-  font-weight: 700;
-  letter-spacing: 0.5px;
-}
-
-/* Mobile tweaks */
-@media (max-width: 480px) {
-  .item-card {
-    min-width: 110px;
-    max-width: 150px;
-    padding: 0.6rem;
-  }
-  .item-name {
-    font-size: 0.86rem;
-  }
-  .item-image {
-    width: 50px;
-    height: 50px;
-    margin: 0 auto 0.3rem auto;
-  }
-  .item-points {
-    font-size: 0.78rem;
-  }
-  .scroll-wrapper::-webkit-scrollbar {
-    height: 10px;
-  }
-  .scroll-wrapper::-webkit-scrollbar-thumb {
-    border-width: 1px;
-  }
-}
-
-.pending-block {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 80%;
-  background: var(--pending-block-bg, #222b);
-  color: var(--pending-block-color, #62ff7a);
-  font-weight: 700;
-  font-size: 1.05rem;
-  text-align: center;
-  border-radius: 6px;
-  padding: 0.4rem 0;
-  letter-spacing: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-  opacity: 0.95;
-  pointer-events: none;
-}
--- a/frontend/vue-app/src/assets/common.css
+++ b/frontend/vue-app/src/assets/common.css
@@ -1,29 +0,0 @@
-.loading,
-.empty {
-  text-align: center;
-  padding: 1rem;
-  font-size: 0.9rem;
-  opacity: 0.8;
-  color: var(--child-list-loading-color, #fff);
-}
-
-.error {
-  color: var(--error);
-  margin-top: 0.7rem;
-  text-align: center;
-  background: var(--error-bg);
-  border-radius: 8px;
-  padding: 1rem;
-}
-
-.error-message {
-  color: var(--error, #e53e3e);
-  font-size: 0.98rem;
-  margin-top: 0.4rem;
-  display: block;
-}
-
-.success-message {
-  color: var(--success, #16a34a);
-  font-size: 1rem;
-}
--- a/frontend/vue-app/src/assets/edit-forms.css
+++ b/frontend/vue-app/src/assets/edit-forms.css
@@ -1,70 +0,0 @@
-.profile-view,
-.edit-view,
-.child-edit-view,
-.reward-edit-view,
-.task-edit-view {
-  max-width: 400px;
-  margin: 2rem auto;
-  background: var(--form-bg);
-  border-radius: 12px;
-  box-shadow: 0 4px 24px var(--form-shadow);
-  padding: 2rem 2.2rem 1.5rem 2.2rem;
-}
-
-.profile-form,
-.task-form,
-.reward-form,
-.child-edit-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.1rem;
-}
-
-.profile-form div.group,
-.task-form div.group,
-.reward-form div.group,
-.child-edit-form div.group {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  box-sizing: border-box;
-}
-
-.profile-form div.group label,
-.task-form div.group label,
-.reward-form div.group label,
-.child-edit-form div.group label {
-  font-weight: 600;
-  color: var(--form-label-color);
-  font-size: 1rem;
-}
-
-div.group input[type='text'],
-div.group input[type='number'],
-div.group input[type='email'] {
-  display: block;
-  width: 100%;
-  margin-top: 0.4rem;
-  padding: 0.5rem;
-  border-radius: 7px;
-  border: 1px solid var(--form-input-border);
-  font-size: 1rem;
-  background: var(--form-input-bg);
-  box-sizing: border-box;
-}
-div.group input:focus {
-  outline: none;
-  border: 1.5px solid var(--form-input-focus);
-}
-
-.loading-message {
-  text-align: center;
-  color: var(--form-loading);
-  margin-bottom: 1.2rem;
-}
-
-.form-group.image-picker-group {
-  display: block;
-  text-align: left;
-}
--- a/frontend/vue-app/src/assets/modal.css
+++ b/frontend/vue-app/src/assets/modal.css
@@ -1,25 +0,0 @@
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1200;
-}
-
-.modal {
-  background: var(--modal-bg);
-  color: var(--modal-text);
-  padding: 1.25rem;
-  border-radius: 10px;
-  width: 360px;
-  max-width: calc(100% - 32px);
-  box-shadow: var(--modal-shadow);
-  text-align: center;
-}
-
-.modal h3 {
-  margin-bottom: 0.5rem;
-  font-size: 1.05rem;
-}
--- a/frontend/vue-app/src/assets/scroll.css
+++ b/frontend/vue-app/src/assets/scroll.css
@@ -1,25 +0,0 @@
-.scroll-wrapper::-webkit-scrollbar {
-  height: 8px;
-}
-
-.scroll-wrapper::-webkit-scrollbar-track {
-  background: var(--child-list-scrollbar-track, rgba(255, 255, 255, 0.05));
-  border-radius: 10px;
-}
-
-.scroll-wrapper::-webkit-scrollbar-thumb {
-  background: var(
-    --child-list-scrollbar-thumb,
-    linear-gradient(180deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8))
-  );
-  border-radius: 10px;
-  border: var(--child-list-scrollbar-thumb-border, 2px solid rgba(255, 255, 255, 0.08));
-}
-
-.scroll-wrapper::-webkit-scrollbar-thumb:hover {
-  background: var(
-    --child-list-scrollbar-thumb-hover,
-    linear-gradient(180deg, rgba(102, 126, 234, 1), rgba(118, 75, 162, 1))
-  );
-  box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
-}
--- a/frontend/vue-app/src/assets/styles.css
+++ b/frontend/vue-app/src/assets/styles.css
@@ -1,12 +1,3 @@
-/* Edit view container for forms */
-.edit-view {
-  max-width: 400px;
-  margin: 2rem auto;
-  background: var(--form-bg);
-  border-radius: 12px;
-  box-shadow: 0 4px 24px var(--form-shadow);
-  padding: 2rem 2.2rem 1.5rem 2.2rem;
-}
 /*buttons*/
 .btn {
  font-weight: 600;
@@ -119,3 +110,29 @@
  font-size: 1rem;
  margin-top: 0.5rem;
 }
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1200;
+}
+
+.modal {
+  background: var(--modal-bg);
+  color: var(--modal-text);
+  padding: 1.25rem;
+  border-radius: 10px;
+  width: 360px;
+  max-width: calc(100% - 32px);
+  box-shadow: var(--modal-shadow);
+  text-align: center;
+}
+
+.modal h3 {
+  margin-bottom: 0.5rem;
+  font-size: 1.05rem;
+}
--- a/frontend/vue-app/src/assets/view-shared.css
+++ b/frontend/vue-app/src/assets/view-shared.css
@@ -1,98 +0,0 @@
-.layout {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.5rem;
-  width: 100%;
-}
-
-.loading {
-  color: var(--loading-color);
-  min-height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-/* Modal Backdrop and Modal */
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1200;
-}
-.modal {
-  background: var(--modal-bg);
-  color: var(--modal-text);
-  padding: 1.5rem 2rem;
-  border-radius: 12px;
-  min-width: 240px;
-  box-shadow: var(--modal-shadow);
-  text-align: center;
-}
-
-/* Info Sections (Reward/Task) */
-.info,
-.reward-info,
-.task-info {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-.image,
-.reward-image,
-.task-image {
-  width: 72px;
-  height: 72px;
-  object-fit: cover;
-  border-radius: 8px;
-  background: var(--info-image-bg);
-}
-.details,
-.reward-details,
-.task-details {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-.name,
-.reward-name,
-.task-name {
-  font-weight: 600;
-  font-size: 1.1rem;
-}
-.points,
-.reward-points,
-.task-points {
-  color: var(--info-points);
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-/* Responsive Adjustments */
-@media (max-width: 900px) {
-  .layout {
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-@media (max-width: 480px) {
-  .main {
-    gap: 1rem;
-  }
-  .modal {
-    padding: 1rem;
-    min-width: 0;
-  }
-}
--- a/frontend/vue-app/src/common/imageCache.ts
+++ b/frontend/vue-app/src/common/imageCache.ts
@@ -9,6 +9,7 @@ export async function getCachedImageUrl(
  if (!imageId) throw new Error('imageId required')

  // reuse existing object URL if created in this session
+  console.log('Checking existing object URL for imageId:', imageId)
  const existing = objectUrlMap.get(imageId)
  if (existing) return existing

@@ -23,6 +24,7 @@ export async function getCachedImageUrl(
      const fetched = await fetch(requestUrl)
      if (!fetched.ok) throw new Error(`HTTP ${fetched.status}`)
      // store a clone in Cache Storage (non-blocking)
+      console.log('Caching image:', requestUrl)
      cache.put(requestUrl, fetched.clone()).catch((e) => {
        console.warn('Cache put failed:', e)
      })
@@ -40,6 +42,31 @@ export async function getCachedImageUrl(
  return objectUrl
 }

+export async function getCachedImageBlob(
+  imageId: string,
+  cacheName = DEFAULT_IMAGE_CACHE,
+): Promise<Blob> {
+  if (!imageId) throw new Error('imageId required')
+  const requestUrl = `/api/image/request/${imageId}`
+
+  let response: Response | undefined
+  if ('caches' in window) {
+    const cache = await caches.open(cacheName)
+    response = await cache.match(requestUrl)
+    if (!response) {
+      const fetched = await fetch(requestUrl)
+      if (!fetched.ok) throw new Error(`HTTP ${fetched.status}`)
+      cache.put(requestUrl, fetched.clone()).catch(() => {})
+      response = fetched
+    }
+  } else {
+    const fetched = await fetch(requestUrl)
+    if (!fetched.ok) throw new Error(`HTTP ${fetched.status}`)
+    response = fetched
+  }
+  return await response.blob()
+}
+
 export function revokeImageUrl(imageId: string) {
  const url = objectUrlMap.get(imageId)
  if (url) {
--- a/frontend/vue-app/src/components/auth/ForgotPassword.vue
+++ b/frontend/vue-app/src/components/auth/ForgotPassword.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="layout">
-    <div class="edit-view">
+    <div class="view">
      <form class="forgot-form" @submit.prevent="submitForm" novalidate>
        <h2>Reset your password</h2>

@@ -39,9 +39,9 @@
          {{ successMsg }}
        </div>

-        <div class="form-group" style="margin-top: 0.4rem">
-          <button type="submit" class="form-btn" :disabled="loading || !isEmailValid">
-            {{ loading ? 'Sending…' : 'Send reset link' }}
+        <div class="form-group actions" style="margin-top: 0.4rem">
+          <button type="submit" class="btn btn-primary" :disabled="loading || !isEmailValid">
+            {{ loading ? 'Sending…' : 'Send Reset Link' }}
          </button>
        </div>

@@ -80,11 +80,7 @@
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { isEmailValid } from '@/common/api'
-import '@/assets/view-shared.css'
-import '@/assets/colors.css'
-import '@/assets/edit-forms.css'
-import '@/assets/actions-shared.css'
-import '@/assets/button-shared.css'
+import '@/assets/styles.css'

 const router = useRouter()

@@ -142,8 +138,18 @@ async function goToLogin() {
 </script>

 <style scoped>
-:deep(.edit-view) {
-  width: 400px;
+.view {
+  max-width: 420px;
+  margin: 0 auto;
+  background: var(--edit-view-bg, #fff);
+  border-radius: 14px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  padding: 2.2rem 2.2rem 1.5rem 2.2rem;
+}
+.view h2 {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: var(--form-heading);
 }

 .forgot-form {
@@ -153,14 +159,19 @@ async function goToLogin() {
  border: none;
 }

+/* reuse edit-forms form-group styles */
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
 .form-group label {
  display: block;
-  margin-bottom: 0.45rem;
  color: var(--form-label, #444);
  font-weight: 600;
 }
 .form-group input,
-.form-group input[type='email'] {
+.form-group input[type='email'],
+.form-group input[type='password'] {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
@@ -172,16 +183,24 @@ async function goToLogin() {
  box-sizing: border-box;
 }

-.btn-link:disabled {
-  text-decoration: none;
-  cursor: default;
-  opacity: 0.75;
-}
-
@media (max-width: 520px) {
  .forgot-form {
    padding: 1rem;
    border-radius: 10px;
  }
 }
+
+.actions {
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+.actions .btn {
+  padding: 1rem 2.2rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  min-width: 120px;
+}
 </style>
--- a/frontend/vue-app/src/components/auth/Login.vue
+++ b/frontend/vue-app/src/components/auth/Login.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="layout">
-    <div class="edit-view">
+    <div class="view">
      <form class="login-form" @submit.prevent="submitForm" novalidate>
        <h2>Sign in</h2>

@@ -36,9 +36,6 @@
            :class="{ 'input-error': submitAttempted && !password }"
            required
          />
-          <small v-if="submitAttempted && !password" class="error-message" aria-live="polite"
-            >Password is required.</small
-          >
        </div>

        <!-- show server error message -->
@@ -73,8 +70,8 @@
          {{ resendError }}
        </div>

-        <div class="form-group" style="margin-top: 0.4rem">
-          <button type="submit" class="form-btn" :disabled="loading || !formValid">
+        <div class="form-group actions" style="margin-top: 0.4rem">
+          <button type="submit" class="btn btn-primary" :disabled="loading || !formValid">
            {{ loading ? 'Signing in…' : 'Sign in' }}
          </button>
        </div>
@@ -139,11 +136,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import '@/assets/view-shared.css'
-import '@/assets/colors.css'
-import '@/assets/edit-forms.css'
-import '@/assets/actions-shared.css'
-import '@/assets/button-shared.css'
+import '@/assets/styles.css'
 import {
  MISSING_EMAIL_OR_PASSWORD,
  INVALID_CREDENTIALS,
@@ -193,12 +186,14 @@ async function submitForm() {
      const { msg, code } = await parseErrorResponse(res)
      showResend.value = false
      let displayMsg = msg
+      let shouldClearPassword = false
      switch (code) {
        case MISSING_EMAIL_OR_PASSWORD:
          displayMsg = 'Email and password are required.'
          break
        case INVALID_CREDENTIALS:
          displayMsg = 'The email and password combination is incorrect. Please try again.'
+          shouldClearPassword = true
          break
        case NOT_VERIFIED:
          displayMsg =
@@ -209,6 +204,9 @@ async function submitForm() {
          displayMsg = msg || `Login failed with status ${res.status}.`
      }
      loginError.value = displayMsg
+      if (shouldClearPassword) {
+        password.value = ''
+      }
      return
    }

@@ -278,10 +276,19 @@ async function goToForgotPassword() {
 </script>

 <style scoped>
-:deep(.edit-view) {
-  width: 400px;
+.view {
+  max-width: 420px;
+  margin: 0 auto;
+  background: var(--edit-view-bg, #fff);
+  border-radius: 14px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  padding: 2.2rem 2.2rem 1.5rem 2.2rem;
+}
+.view h2 {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: var(--form-heading);
 }
-
 .login-form {
  background: transparent;
  box-shadow: none;
@@ -290,9 +297,12 @@ async function goToForgotPassword() {
 }

 /* reuse edit-forms form-group styles */
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
 .form-group label {
  display: block;
-  margin-bottom: 0.45rem;
  color: var(--form-label, #444);
  font-weight: 600;
 }
@@ -310,17 +320,23 @@ async function goToForgotPassword() {
  box-sizing: border-box;
 }

-/* also ensure disabled button doesn't show underline in browsers that style disabled anchors/buttons */
-.btn-link:disabled {
-  text-decoration: none;
-  cursor: default;
-  opacity: 0.75;
-}
-
@media (max-width: 520px) {
  .login-form {
    padding: 1rem;
    border-radius: 10px;
  }
 }
+.actions {
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+.actions .btn {
+  padding: 1rem 2.2rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  min-width: 120px;
+}
 </style>
--- a/frontend/vue-app/src/components/auth/ParentPinSetup.vue
+++ b/frontend/vue-app/src/components/auth/ParentPinSetup.vue
@@ -64,7 +64,6 @@ import { ref, watch, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { logoutParent } from '@/stores/auth'
 import '@/assets/styles.css'
-import '@/assets/colors.css'

 const step = ref(1)
 const loading = ref(false)
--- a/frontend/vue-app/src/components/auth/ResetPassword.vue
+++ b/frontend/vue-app/src/components/auth/ResetPassword.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="layout">
-    <div class="edit-view">
+    <div class="view">
      <form
        v-if="tokenChecked && tokenValid"
        class="reset-form"
@@ -16,17 +16,10 @@
            type="password"
            autocomplete="new-password"
            v-model="password"
-            :class="{ 'input-error': submitAttempted && !isPasswordStrong }"
+            :class="{ 'input-error': password && (!isPasswordStrongRef || !passwordsMatch) }"
            required
          />
-          <small v-if="submitAttempted && !password" class="error-message" aria-live="polite">
-            Password is required.
-          </small>
-          <small
-            v-else-if="submitAttempted && !isPasswordStrong"
-            class="error-message"
-            aria-live="polite"
-          >
+          <small v-if="password && !isPasswordStrongRef" class="error-message" aria-live="polite">
            Password must be at least 8 characters and contain a letter and a number.
          </small>
        </div>
@@ -38,21 +31,10 @@
            type="password"
            autocomplete="new-password"
            v-model="confirmPassword"
-            :class="{ 'input-error': submitAttempted && !passwordsMatch }"
+            :class="{ 'input-error': confirmPassword && !passwordsMatch }"
            required
          />
-          <small
-            v-if="submitAttempted && !confirmPassword"
-            class="error-message"
-            aria-live="polite"
-          >
-            Please confirm your password.
-          </small>
-          <small
-            v-else-if="submitAttempted && !passwordsMatch"
-            class="error-message"
-            aria-live="polite"
-          >
+          <small v-if="confirmPassword && !passwordsMatch" class="error-message" aria-live="polite">
            Passwords do not match.
          </small>
        </div>
@@ -69,8 +51,8 @@
          {{ successMsg }}
        </div>

-        <div class="form-group" style="margin-top: 0.4rem">
-          <button type="submit" class="form-btn" :disabled="loading || !formValid">
+        <div class="form-group actions" style="margin-top: 0.4rem">
+          <button type="submit" class="btn btn-primary" :disabled="loading || !formValid">
            {{ loading ? 'Resetting…' : 'Reset password' }}
          </button>
        </div>
@@ -137,11 +119,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { isPasswordStrong } from '@/common/api'
-import '@/assets/view-shared.css'
-import '@/assets/colors.css'
-import '@/assets/edit-forms.css'
-import '@/assets/actions-shared.css'
-import '@/assets/button-shared.css'
+import '@/assets/styles.css'

 const router = useRouter()
 const route = useRoute()
@@ -241,8 +219,18 @@ async function goToLogin() {
 </script>

 <style scoped>
-:deep(.edit-view) {
-  width: 400px;
+.view {
+  max-width: 420px;
+  margin: 0 auto;
+  background: var(--edit-view-bg, #fff);
+  border-radius: 14px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  padding: 2.2rem 2.2rem 1.5rem 2.2rem;
+}
+.view h2 {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: var(--form-heading);
 }

 .reset-form {
@@ -252,13 +240,18 @@ async function goToLogin() {
  border: none;
 }

+/* reuse edit-forms form-group styles */
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
 .form-group label {
  display: block;
-  margin-bottom: 0.45rem;
  color: var(--form-label, #444);
  font-weight: 600;
 }
 .form-group input,
+.form-group input[type='email'],
 .form-group input[type='password'] {
  display: block;
  width: 100%;
@@ -271,16 +264,24 @@ async function goToLogin() {
  box-sizing: border-box;
 }

-.btn-link:disabled {
-  text-decoration: none;
-  cursor: default;
-  opacity: 0.75;
-}
-
@media (max-width: 520px) {
  .reset-form {
    padding: 1rem;
    border-radius: 10px;
  }
 }
+
+.actions {
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+.actions .btn {
+  padding: 1rem 2.2rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  min-width: 120px;
+}
 </style>
--- a/frontend/vue-app/src/components/auth/Signup.vue
+++ b/frontend/vue-app/src/components/auth/Signup.vue
@@ -1,12 +1,7 @@
 <template>
  <div class="layout">
-    <div class="edit-view">
-      <form
-        v-if="!signupSuccess"
-        @submit.prevent="submitForm"
-        class="signup-form child-edit-view"
-        novalidate
-      >
+    <div class="view">
+      <form v-if="!signupSuccess" @submit.prevent="submitForm" class="signup-form view" novalidate>
        <h2>Sign up</h2>
        <div class="form-group">
          <label for="firstName">First name</label>
@@ -17,9 +12,10 @@
            autofocus
            autocomplete="given-name"
            required
-            :class="{ 'input-error': submitAttempted && !firstName }"
+            @blur="firstNameTouched = true"
+            :class="{ 'input-error': firstNameTouched && !firstName }"
          />
-          <small v-if="submitAttempted && !firstName" class="error-message" aria-live="polite"
+          <small v-if="firstNameTouched && !firstName" class="error-message" aria-live="polite"
            >First name is required.</small
          >
        </div>
@@ -32,9 +28,10 @@
            autocomplete="family-name"
            type="text"
            required
-            :class="{ 'input-error': submitAttempted && !lastName }"
+            @blur="lastNameTouched = true"
+            :class="{ 'input-error': lastNameTouched && !lastName }"
          />
-          <small v-if="submitAttempted && !lastName" class="error-message" aria-live="polite"
+          <small v-if="lastNameTouched && !lastName" class="error-message" aria-live="polite"
            >Last name is required.</small
          >
        </div>
@@ -47,12 +44,13 @@
            autocomplete="email"
            type="email"
            required
-            :class="{ 'input-error': submitAttempted && (!email || !isEmailValid) }"
+            @blur="emailTouched = true"
+            :class="{ 'input-error': emailTouched && (!email || !isEmailValidRef) }"
          />
-          <small v-if="submitAttempted && !email" class="error-message" aria-live="polite"
+          <small v-if="emailTouched && !email" class="error-message" aria-live="polite"
            >Email is required.</small
          >
-          <small v-else-if="submitAttempted && !isEmailValid" class="error-message"
+          <small v-else-if="emailTouched && !isEmailValidRef" class="error-message"
            >Please enter a valid email address.</small
          >
        </div>
@@ -66,10 +64,10 @@
            type="password"
            required
            @input="checkPasswordStrength"
-            :class="{ 'input-error': (submitAttempted || passwordTouched) && !isPasswordStrong }"
+            :class="{ 'input-error': passwordTouched && !isPasswordStrongRef }"
          />
          <small
-            v-if="(submitAttempted || passwordTouched) && !isPasswordStrong"
+            v-if="passwordTouched && !isPasswordStrongRef"
            class="error-message"
            aria-live="polite"
            >Password must be at least 8 characters, include a number and a letter.</small
@@ -84,19 +82,18 @@
            autocomplete="new-password"
            type="password"
            required
-            :class="{ 'input-error': (submitAttempted || confirmTouched) && !passwordsMatch }"
+            :class="{ 'input-error': confirmTouched && !passwordsMatch }"
            @blur="confirmTouched = true"
          />
-          <small
-            v-if="(submitAttempted || confirmTouched) && !passwordsMatch"
-            class="error-message"
-            aria-live="polite"
+          <small v-if="confirmTouched && !passwordsMatch" class="error-message" aria-live="polite"
            >Passwords do not match.</small
          >
        </div>

-        <div class="form-group" style="margin-top: 0.4rem">
-          <button type="submit" class="form-btn" :disabled="!formValid || loading">Sign up</button>
+        <div class="form-group actions" style="margin-top: 0.4rem">
+          <button type="submit" class="btn btn-primary" :disabled="!formValid || loading">
+            Sign up
+          </button>
        </div>
      </form>

@@ -153,17 +150,16 @@ import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { isEmailValid, isPasswordStrong } from '@/common/api'
 import { EMAIL_EXISTS, MISSING_FIELDS } from '@/common/errorCodes'
-import '@/assets/view-shared.css'
-import '@/assets/actions-shared.css'
-import '@/assets/button-shared.css'
-import '@/assets/colors.css'
-import '@/assets/edit-forms.css'
+import '@/assets/styles.css'

 const router = useRouter()

 const firstName = ref('')
 const lastName = ref('')
 const email = ref('')
+const firstNameTouched = ref(false)
+const lastNameTouched = ref(false)
+const emailTouched = ref(false)
 const password = ref('')
 const confirmPassword = ref('')
 const passwordTouched = ref(false)
@@ -272,17 +268,28 @@ function clearFields() {
  confirmTouched.value = false
  submitAttempted.value = false
  signupError.value = ''
+  firstNameTouched.value = false
+  lastNameTouched.value = false
+  emailTouched.value = false
 }
 </script>

 <style scoped>
-:deep(.edit-view) {
-  width: 400px;
+.view {
+  max-width: 420px;
+  margin: 0 auto;
+  background: var(--edit-view-bg, #fff);
+  border-radius: 14px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  padding: 2.2rem 2.2rem 1.5rem 2.2rem;
+}
+.view h2 {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: var(--form-heading);
 }

 .signup-form {
-  /* keep the edit-view / child-edit-view look from edit-forms.css,
-     only adjust inputs for email/password types */
  background: transparent;
  box-shadow: none;
  padding: 0;
@@ -324,10 +331,13 @@ function clearFields() {
  justify-content: center;
 }

-/* Reuse existing input / label styles */
+/* reuse edit-forms form-group styles */
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
 .form-group label {
  display: block;
-  margin-bottom: 0.45rem;
  color: var(--form-label, #444);
  font-weight: 600;
 }
@@ -344,26 +354,17 @@ function clearFields() {
  background: var(--form-input-bg, #fff);
  box-sizing: border-box;
 }
-
-/* Modal styles */
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.35);
+.actions {
  display: flex;
-  align-items: center;
+  gap: 3rem;
  justify-content: center;
-  z-index: 1000;
+  margin-top: 0.5rem;
+  margin-bottom: 0.4rem;
 }
-.modal-dialog {
-  background: #fff;
-  padding: 2rem;
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
-  max-width: 340px;
-  text-align: center;
+.actions .btn {
+  padding: 1rem 2.2rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  min-width: 120px;
 }
 </style>
--- a/frontend/vue-app/src/components/auth/VerifySignup.vue
+++ b/frontend/vue-app/src/components/auth/VerifySignup.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="layout">
-    <div class="edit-view">
+    <div class="view">
      <div class="verify-container">
        <h2 v-if="verifyingLoading">Verifying…</h2>

@@ -155,9 +155,8 @@ import {
  USER_NOT_FOUND,
  ALREADY_VERIFIED,
 } from '@/common/errorCodes'
-import '@/assets/actions-shared.css'
-import '@/assets/button-shared.css'
 import { parseErrorResponse } from '@/common/api'
+import '@/assets/styles.css'

 const router = useRouter()
 const route = useRoute()
@@ -299,8 +298,13 @@ function goToLogin() {
 </script>

 <style scoped>
-:deep(.edit-view) {
-  width: 400px;
+.view {
+  max-width: 400px;
+  margin: 0 auto;
+  background: var(--form-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow);
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
 }

 .verify-container {
--- a/frontend/vue-app/src/components/child/ChildEditView.vue
+++ b/frontend/vue-app/src/components/child/ChildEditView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="edit-view">
+  <div class="view">
    <EntityEditForm
      entityLabel="Child"
      :fields="fields"
@@ -133,4 +133,13 @@ function handleCancel() {
  router.back()
 }
 </script>
-<style scoped></style>
+<style scoped>
+.view {
+  max-width: 400px;
+  margin: 0 auto;
+  background: var(--form-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow);
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+}
+</style>
--- a/frontend/vue-app/src/components/child/ChildView.vue
+++ b/frontend/vue-app/src/components/child/ChildView.vue
@@ -6,7 +6,7 @@ import ChildDetailCard from './ChildDetailCard.vue'
 import ScrollingList from '../shared/ScrollingList.vue'
 import StatusMessage from '../shared/StatusMessage.vue'
 import { eventBus } from '@/common/eventBus'
-import '@/assets/view-shared.css'
+//import '@/assets/view-shared.css'
 import '@/assets/styles.css'
 import type {
  Child,
@@ -438,6 +438,35 @@ onUnmounted(() => {
 </template>

 <style scoped>
+.layout {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  width: 100%;
+}
+/* Responsive Adjustments */
+@media (max-width: 900px) {
+  .layout {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+@media (max-width: 480px) {
+  .main {
+    gap: 1rem;
+  }
+  .modal {
+    padding: 1rem;
+    min-width: 0;
+  }
+}
+
 .item-points {
  color: var(--item-points-color, #ffd166);
  font-size: 1rem;
--- a/frontend/vue-app/src/components/child/ParentView.vue
+++ b/frontend/vue-app/src/components/child/ParentView.vue
@@ -7,7 +7,7 @@ import ScrollingList from '../shared/ScrollingList.vue'
 import StatusMessage from '../shared/StatusMessage.vue'
 import { eventBus } from '@/common/eventBus'
 import '@/assets/styles.css'
-import '@/assets/view-shared.css'
+//import '@/assets/view-shared.css'
 import type {
  Task,
  Child,
@@ -511,6 +511,34 @@ function goToAssignRewards() {
 </template>

 <style scoped>
+.layout {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  width: 100%;
+}
+/* Responsive Adjustments */
+@media (max-width: 900px) {
+  .layout {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+@media (max-width: 480px) {
+  .main {
+    gap: 1rem;
+  }
+  .modal {
+    padding: 1rem;
+    min-width: 0;
+  }
+}
 .assign-buttons {
  display: flex;
  gap: 1rem;
--- a/frontend/vue-app/src/components/profile/UserProfile.vue
+++ b/frontend/vue-app/src/components/profile/UserProfile.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="edit-view">
+  <div class="view">
    <EntityEditForm
      entityLabel="User Profile"
      :fields="fields"
@@ -54,7 +54,6 @@ import { useRouter } from 'vue-router'
 import EntityEditForm from '../shared/EntityEditForm.vue'
 import ModalDialog from '../shared/ModalDialog.vue'
 import '@/assets/styles.css'
-import '@/assets/colors.css'

 const router = useRouter()
 const loading = ref(false)
@@ -220,6 +219,14 @@ function goToChangeParentPin() {
 </script>

 <style scoped>
+.view {
+  max-width: 400px;
+  margin: 0 auto;
+  background: var(--form-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow);
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+}
 /* ...existing styles... */
 .email-actions {
  display: flex;
@@ -231,10 +238,6 @@ function goToChangeParentPin() {
  margin-top: 0.1rem;
 }

-.btn-link-space {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
 .success-message {
  color: var(--success, #16a34a);
  font-size: 1rem;
--- a/frontend/vue-app/src/components/reward/RewardEditView.vue
+++ b/frontend/vue-app/src/components/reward/RewardEditView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="edit-view">
+  <div class="view">
    <EntityEditForm
      entityLabel="Reward"
      :fields="fields"
@@ -151,4 +151,13 @@ function handleCancel() {
 }
 </script>

-<style scoped></style>
+<style scoped>
+.view {
+  max-width: 400px;
+  margin: 0 auto;
+  background: var(--form-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow);
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+}
+</style>
--- a/frontend/vue-app/src/components/reward/RewardView.vue
+++ b/frontend/vue-app/src/components/reward/RewardView.vue
@@ -40,7 +40,7 @@ import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import ItemList from '../shared/ItemList.vue'
 import MessageBlock from '@/components/shared/MessageBlock.vue'
-import '@/assets/button-shared.css'
+//import '@/assets/button-shared.css'
 import FloatingActionButton from '../shared/FloatingActionButton.vue'
 import DeleteModal from '../shared/DeleteModal.vue'
 import type { Reward } from '@/common/models'
--- a/frontend/vue-app/src/components/shared/ChildrenListView.vue
+++ b/frontend/vue-app/src/components/shared/ChildrenListView.vue
@@ -12,7 +12,7 @@ import type {
  Event,
 } from '@/common/models'
 import MessageBlock from '@/components/shared/MessageBlock.vue'
-import '@/assets/button-shared.css'
+//import '@/assets/button-shared.css'

 import FloatingActionButton from '../shared/FloatingActionButton.vue'
 import DeleteModal from '../shared/DeleteModal.vue'
--- a/frontend/vue-app/src/components/shared/DeleteModal.vue
+++ b/frontend/vue-app/src/components/shared/DeleteModal.vue
@@ -15,7 +15,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import '@/assets/styles.css'
-import '@/assets/colors.css'

 const props = defineProps<{
  show: boolean
--- a/frontend/vue-app/src/components/shared/EntityEditForm.vue
+++ b/frontend/vue-app/src/components/shared/EntityEditForm.vue
@@ -50,7 +50,6 @@
 import { ref, onMounted, nextTick, watch } from 'vue'
 import ImagePicker from '@/components/utils/ImagePicker.vue'
 import { useRouter } from 'vue-router'
-import '@/assets/colors.css'
 import '@/assets/styles.css'

 type Field = {
--- a/frontend/vue-app/src/components/shared/FloatingActionButton.vue
+++ b/frontend/vue-app/src/components/shared/FloatingActionButton.vue
@@ -8,7 +8,6 @@
 </template>

 <script setup lang="ts">
-import '@/assets/colors.css'
 defineProps<{ ariaLabel?: string }>()
 </script>

--- a/frontend/vue-app/src/components/shared/LoginButton.vue
+++ b/frontend/vue-app/src/components/shared/LoginButton.vue
@@ -8,8 +8,8 @@ import {
  logoutParent,
  logoutUser,
 } from '../../stores/auth'
+import { getCachedImageUrl, getCachedImageBlob } from '@/common/imageCache'
 import '@/assets/styles.css'
-import '@/assets/colors.css'
 import ModalDialog from './ModalDialog.vue'

 const router = useRouter()
@@ -19,6 +19,63 @@ const error = ref('')
 const pinInput = ref<HTMLInputElement | null>(null)
 const dropdownOpen = ref(false)
 const dropdownRef = ref<HTMLElement | null>(null)
+const avatarButtonRef = ref<HTMLButtonElement | null>(null)
+const focusedMenuIndex = ref(0)
+
+// User profile data
+const userImageId = ref<string | null>(null)
+const userFirstName = ref<string>('')
+const userEmail = ref<string>('')
+const profileLoading = ref(true)
+const avatarImageUrl = ref<string | null>(null)
+const dropdownAvatarImageUrl = ref<string | null>(null)
+
+// Compute avatar initial
+const avatarInitial = ref<string>('?')
+
+// Fetch user profile
+async function fetchUserProfile() {
+  try {
+    console.log('Fetching user profile')
+    const res = await fetch('/api/user/profile', { credentials: 'include' })
+    if (!res.ok) {
+      console.error('Failed to fetch user profile')
+      profileLoading.value = false
+      return
+    }
+    const data = await res.json()
+    userImageId.value = data.image_id || null
+    userFirstName.value = data.first_name || ''
+    userEmail.value = data.email || ''
+
+    // Update avatar initial
+    avatarInitial.value = userFirstName.value ? userFirstName.value.charAt(0).toUpperCase() : '?'
+
+    profileLoading.value = false
+
+    // Load cached image if available
+    if (userImageId.value) {
+      await loadAvatarImages(userImageId.value)
+    }
+  } catch (e) {
+    console.error('Error fetching user profile:', e)
+    profileLoading.value = false
+  }
+}
+
+async function loadAvatarImages(imageId: string) {
+  try {
+    const blob = await getCachedImageBlob(imageId)
+    // Clean up previous URLs
+    if (avatarImageUrl.value) URL.revokeObjectURL(avatarImageUrl.value)
+    if (dropdownAvatarImageUrl.value) URL.revokeObjectURL(dropdownAvatarImageUrl.value)
+    avatarImageUrl.value = URL.createObjectURL(blob)
+    dropdownAvatarImageUrl.value = URL.createObjectURL(blob)
+  } catch (e) {
+    avatarImageUrl.value = null
+    dropdownAvatarImageUrl.value = null
+  }
+}

 const open = async () => {
  // Check if user has a pin
@@ -87,10 +144,71 @@ const handleLogout = () => {

 function toggleDropdown() {
  dropdownOpen.value = !dropdownOpen.value
+  if (dropdownOpen.value) {
+    focusedMenuIndex.value = 0
+  }
 }

 function closeDropdown() {
  dropdownOpen.value = false
+  focusedMenuIndex.value = 0
+  avatarButtonRef.value?.focus()
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!dropdownOpen.value) {
+    // Handle avatar button keyboard
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      if (isParentAuthenticated.value) {
+        toggleDropdown()
+      } else {
+        open()
+      }
+    }
+    return
+  }
+
+  // Handle dropdown keyboard navigation
+  const menuItems = 3 // Profile, Child Mode, Sign Out
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      focusedMenuIndex.value = (focusedMenuIndex.value + 1) % menuItems
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      focusedMenuIndex.value = (focusedMenuIndex.value - 1 + menuItems) % menuItems
+      break
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
+      executeMenuItem(focusedMenuIndex.value)
+      break
+    case 'Escape':
+      event.preventDefault()
+      closeDropdown()
+      break
+    case 'Tab':
+      closeDropdown()
+      break
+  }
+}
+
+function executeMenuItem(index: number) {
+  switch (index) {
+    case 0:
+      goToProfile()
+      break
+    case 1:
+      handleLogout()
+      closeDropdown()
+      break
+    case 2:
+      signOut()
+      break
+  }
 }

 async function signOut() {
@@ -122,62 +240,115 @@ function handleClickOutside(event: MouseEvent) {
 onMounted(() => {
  eventBus.on('open-login', open)
  document.addEventListener('mousedown', handleClickOutside)
+  fetchUserProfile()
 })
+
 onUnmounted(() => {
  eventBus.off('open-login', open)
  document.removeEventListener('mousedown', handleClickOutside)
+
+  // Revoke object URL to free memory
+  if (avatarImageUrl.value) URL.revokeObjectURL(avatarImageUrl.value)
+  if (dropdownAvatarImageUrl.value) URL.revokeObjectURL(dropdownAvatarImageUrl.value)
 })
 </script>

 <template>
  <div style="position: relative">
    <button
-      v-if="!isParentAuthenticated"
-      @click="open"
-      aria-label="Parent login"
-      class="login-btn parent-btn"
+      ref="avatarButtonRef"
+      @click="isParentAuthenticated ? toggleDropdown() : open()"
+      @keydown="handleKeyDown"
+      :aria-label="isParentAuthenticated ? 'Parent menu' : 'Parent login'"
+      aria-haspopup="menu"
+      :aria-expanded="isParentAuthenticated && dropdownOpen ? 'true' : 'false'"
+      class="avatar-btn"
    >
-      Parent
+      <img
+        v-if="avatarImageUrl && !profileLoading"
+        :src="avatarImageUrl"
+        :alt="userFirstName || 'User avatar'"
+        class="avatar-image"
+      />
+      <span v-else class="avatar-text">{{ profileLoading ? '...' : avatarInitial }}</span>
    </button>
-    <div v-else style="display: inline-block; position: relative" ref="dropdownRef">
-      <button @click="toggleDropdown" aria-label="Parent menu" class="login-btn parent-btn">
-        Parent ▼
-      </button>
+
+    <Transition name="slide-fade">
      <div
-        v-if="dropdownOpen"
+        v-if="isParentAuthenticated && dropdownOpen"
+        ref="dropdownRef"
+        role="menu"
        class="dropdown-menu"
-        style="
-          position: absolute;
-          right: 0;
-          top: 100%;
-          background: #fff;
-          border: 1px solid #e6e6e6;
-          border-radius: 8px;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-          min-width: 120px;
-          z-index: 10;
-        "
      >
-        <button class="menu-item" @click="goToProfile" style="width: 100%; text-align: left">
-          Profile
+        <div class="dropdown-header">
+          <img
+            v-if="avatarImageUrl"
+            :src="avatarImageUrl"
+            :alt="userFirstName || 'User avatar'"
+            class="dropdown-avatar"
+          />
+          <span v-else class="dropdown-avatar-initial">{{ avatarInitial }}</span>
+          <div class="dropdown-user-info">
+            <div class="dropdown-user-name">{{ userFirstName || 'User' }}</div>
+            <div v-if="userEmail" class="dropdown-user-email">{{ userEmail }}</div>
+          </div>
+        </div>
+
+        <button
+          role="menuitem"
+          :aria-selected="focusedMenuIndex === 0"
+          :class="['menu-item', { focused: focusedMenuIndex === 0 }]"
+          @mouseenter="focusedMenuIndex = 0"
+          @click="goToProfile"
+        >
+          <span class="menu-icon-stub">
+            <img
+              src="/profile.png"
+              alt="Profile"
+              style="width: 20px; height: 20px; object-fit: contain; vertical-align: middle"
+            />
+          </span>
+          <span>Profile</span>
        </button>
        <button
-          class="menu-item"
+          role="menuitem"
+          :aria-selected="focusedMenuIndex === 1"
+          :class="['menu-item', { focused: focusedMenuIndex === 1 }]"
+          @mouseenter="focusedMenuIndex = 1"
          @click="
            () => {
              handleLogout()
              closeDropdown()
            }
          "
-          style="width: 100%; text-align: left"
        >
-          Log out
+          <span class="menu-icon-stub">
+            <img
+              src="/child-mode.png"
+              alt="Child Mode"
+              style="width: 20px; height: 20px; object-fit: contain; vertical-align: middle"
+            />
+          </span>
+          <span>Child Mode</span>
        </button>
-        <button class="menu-item danger" @click="signOut" style="width: 100%; text-align: left">
-          Sign out
+        <button
+          role="menuitem"
+          :aria-selected="focusedMenuIndex === 2"
+          :class="['menu-item', 'danger', { focused: focusedMenuIndex === 2 }]"
+          @mouseenter="focusedMenuIndex = 2"
+          @click="signOut"
+        >
+          <span class="menu-icon-stub">
+            <img
+              src="/sign-out.png"
+              alt="Sign out"
+              style="width: 20px; height: 20px; object-fit: contain; vertical-align: middle"
+            />
+          </span>
+          <span>Sign out</span>
        </button>
      </div>
-    </div>
+    </Transition>

    <ModalDialog v-if="show" title="Enter parent PIN" @click.self="close" @close="close">
      <form @submit.prevent="submit">
@@ -201,23 +372,18 @@ onUnmounted(() => {
 </template>

 <style scoped>
-.parent-btn {
-  width: 65px;
-  min-width: 65px;
-  max-width: 65px;
-  height: 48px;
-  min-height: 48px;
-  max-height: 48px;
+.avatar-btn {
+  width: 44px;
+  min-width: 44px;
+  max-width: 44px;
+  height: 44px;
+  min-height: 44px;
+  max-height: 44px;
  margin: 0;
-  margin-left: 5px;
-  margin-right: 5px;
  background: var(--button-bg, #fff);
  border: 0;
-  border-radius: 8px 8px 0 0;
+  border-radius: 50%;
  cursor: pointer;
-  color: var(--button-text, #667eea);
-  font-weight: 600;
-  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -225,14 +391,37 @@ onUnmounted(() => {
  overflow: hidden;
  padding: 0;
  transition:
-    background 0.18s,
-    color 0.18s;
-  white-space: nowrap;
+    transform 0.18s,
+    box-shadow 0.18s;
+}
+
+.avatar-btn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
+}
+
+.avatar-btn:focus-visible {
+  outline: 3px solid var(--primary, #667eea);
+  outline-offset: 2px;
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.avatar-text {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--button-text, #667eea);
+  user-select: none;
 }

@media (max-width: 480px) {
-  .parent-btn {
-    font-size: 0.7rem;
+  .avatar-text {
+    font-size: 1.2rem;
  }
 }

@@ -248,35 +437,131 @@ onUnmounted(() => {
 }

 .dropdown-menu {
-  padding: 0.5rem 0;
+  position: absolute;
+  right: 0;
+  top: calc(100% + 8px);
+  background: var(--form-bg, #fff);
+  border: 1px solid var(--form-input-border, #cbd5e1);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  min-width: 240px;
+  z-index: 100;
+  overflow: hidden;
 }
+
+.dropdown-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
+  color: #fff;
+}
+
+.dropdown-avatar,
+.dropdown-avatar-initial {
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  min-height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.dropdown-avatar-initial {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.2);
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #fff;
+}
+
+.dropdown-user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.dropdown-user-name {
+  font-weight: 700;
+  font-size: 1.1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dropdown-user-email {
+  font-size: 0.85rem;
+  opacity: 0.9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}
+
 .menu-item {
-  padding: 1rem 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 14px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
-  color: var(--menu-item-color, #333);
-  font-size: 0.9rem;
+  color: var(--form-label, #444);
+  font-size: 0.95rem;
+  transition: background 0.15s;
 }
-.menu-item + .menu-item {
-  margin-top: 0.5rem;
+
+.menu-item.focused {
+  background: var(--btn-secondary-hover, #e2e8f0);
 }
-.menu-item:hover {
-  background: var(--menu-item-hover-bg, rgba(0, 0, 0, 0.04));
+
+.menu-item:focus-visible {
+  outline: 2px solid var(--primary, #667eea);
+  outline-offset: -2px;
 }
+
 .menu-item.danger {
-  color: var(--menu-item-danger, #ff4d4f);
+  color: var(--btn-danger, #ef4444);
+}
+
+.menu-icon-stub {
+  width: 20px;
+  height: 20px;
+  background: var(--form-input-bg, #f8fafc);
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+/* Slide fade animation */
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.slide-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
 }

@media (max-width: 600px) {
  .menu-item {
-    padding: 0.85rem 0.7rem;
+    padding: 12px 14px;
    font-size: 1rem;
  }
-  .menu-item + .menu-item {
-    margin-top: 0.35rem;
+
+  .dropdown-menu {
+    min-width: 200px;
  }
 }
 </style>
--- a/frontend/vue-app/src/components/shared/MessageBlock.vue
+++ b/frontend/vue-app/src/components/shared/MessageBlock.vue
@@ -7,7 +7,6 @@
  </div>
 </template>
 <script setup lang="ts">
-import '@/assets/colors.css'
 defineProps<{ message: string }>()
 </script>
 <style scoped>
--- a/frontend/vue-app/src/components/shared/ModalDialog.vue
+++ b/frontend/vue-app/src/components/shared/ModalDialog.vue
@@ -14,8 +14,6 @@
 </template>

 <script setup lang="ts">
-import '@/assets/colors.css'
-
 defineProps<{
  imageUrl?: string | null | undefined
  title?: string
--- a/frontend/vue-app/src/components/shared/tests/LoginButton.spec.ts
+++ b/frontend/vue-app/src/components/shared/tests/LoginButton.spec.ts
@@ -0,0 +1,380 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import LoginButton from '../LoginButton.vue'
+import { authenticateParent, logoutParent } from '../../../stores/auth'
+
+// Mock imageCache module
+vi.mock('@/common/imageCache', () => ({
+  getCachedImageUrl: vi.fn(async (imageId: string) => `blob:mock-url-${imageId}`),
+  revokeImageUrl: vi.fn(),
+  revokeAllImageUrls: vi.fn(),
+}))
+
+// Create a reactive ref for isParentAuthenticated using vi.hoisted
+const { isParentAuthenticatedRef } = vi.hoisted(() => {
+  let value = false
+  return {
+    isParentAuthenticatedRef: {
+      get value() {
+        return value
+      },
+      set value(v: boolean) {
+        value = v
+      },
+    },
+  }
+})
+
+vi.mock('../../../stores/auth', () => ({
+  authenticateParent: vi.fn(),
+  isParentAuthenticated: isParentAuthenticatedRef,
+  logoutParent: vi.fn(),
+  logoutUser: vi.fn(),
+}))
+
+global.fetch = vi.fn()
+
+describe('LoginButton', () => {
+  let wrapper: VueWrapper<any>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    isParentAuthenticatedRef.value = false
+    ;(global.fetch as any).mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        image_id: 'test-image-id',
+        first_name: 'John',
+        email: 'john@example.com',
+      }),
+    })
+  })
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+    }
+  })
+
+  describe('Avatar Rendering', () => {
+    it('renders avatar with image when image_id is available', async () => {
+      wrapper = mount(LoginButton)
+      await nextTick()
+      // Wait for fetchUserProfile to complete and image to load
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const avatarImg = wrapper.find('.avatar-image')
+      expect(avatarImg.exists()).toBe(true)
+      expect(avatarImg.attributes('src')).toContain('blob:mock-url-test-image-id')
+    })
+
+    it('renders avatar with initial when no image_id', async () => {
+      ;(global.fetch as any).mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ first_name: 'Jane' }),
+      })
+
+      wrapper = mount(LoginButton)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      const avatarText = wrapper.find('.avatar-text')
+      expect(avatarText.exists()).toBe(true)
+      expect(avatarText.text()).toBe('J')
+    })
+
+    it('renders ? when no first_name available', async () => {
+      ;(global.fetch as any).mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({}),
+      })
+
+      wrapper = mount(LoginButton)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      const avatarText = wrapper.find('.avatar-text')
+      expect(avatarText.exists()).toBe(true)
+      expect(avatarText.text()).toBe('?')
+    })
+
+    it('shows loading state initially', async () => {
+      wrapper = mount(LoginButton)
+      const loading = wrapper.find('.avatar-text')
+      expect(loading.exists()).toBe(true)
+      expect(loading.text()).toBe('...')
+    })
+  })
+
+  describe('Dropdown Interactions', () => {
+    beforeEach(async () => {
+      isParentAuthenticatedRef.value = true
+      wrapper = mount(LoginButton)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+    })
+
+    it('opens dropdown on click when authenticated', async () => {
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('click')
+      await nextTick()
+
+      const dropdown = wrapper.find('.dropdown-menu')
+      expect(dropdown.exists()).toBe(true)
+    })
+
+    it('closes dropdown on Escape key', async () => {
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('click')
+      await nextTick()
+
+      let dropdown = wrapper.find('.dropdown-menu')
+      expect(dropdown.exists()).toBe(true)
+
+      await button.trigger('keydown', { key: 'Escape' })
+      await nextTick()
+
+      dropdown = wrapper.find('.dropdown-menu')
+      expect(dropdown.exists()).toBe(false)
+    })
+
+    it('closes dropdown on outside click', async () => {
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('click')
+      await nextTick()
+
+      let dropdown = wrapper.find('.dropdown-menu')
+      expect(dropdown.exists()).toBe(true)
+
+      // Simulate outside click by directly calling the handler
+      const outsideClick = new MouseEvent('mousedown', {
+        bubbles: true,
+        cancelable: true,
+      })
+      document.dispatchEvent(outsideClick)
+      await nextTick()
+
+      dropdown = wrapper.find('.dropdown-menu')
+      expect(dropdown.exists()).toBe(false)
+    })
+  })
+
+  describe('Keyboard Navigation', () => {
+    beforeEach(async () => {
+      isParentAuthenticatedRef.value = true
+      wrapper = mount(LoginButton)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+    })
+
+    it('opens dropdown on Enter key', async () => {
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('keydown', { key: 'Enter' })
+      await nextTick()
+
+      const dropdown = wrapper.find('.dropdown-menu')
+      expect(dropdown.exists()).toBe(true)
+    })
+
+    it('opens dropdown on Space key', async () => {
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('keydown', { key: ' ' })
+      await nextTick()
+
+      const dropdown = wrapper.find('.dropdown-menu')
+      expect(dropdown.exists()).toBe(true)
+    })
+
+    it('navigates menu items with arrow keys', async () => {
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('click')
+      await nextTick()
+
+      const dropdown = wrapper.find('.dropdown-menu')
+      expect(dropdown.exists()).toBe(true)
+
+      // First item should be focused
+      let menuItems = wrapper.findAll('.menu-item')
+      expect(menuItems[0].attributes('aria-selected')).toBe('true')
+
+      // Press down arrow
+      await button.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      menuItems = wrapper.findAll('.menu-item')
+      expect(menuItems[1].attributes('aria-selected')).toBe('true')
+    })
+  })
+
+  describe('ARIA Attributes', () => {
+    it('has correct ARIA attributes', async () => {
+      // Note: Due to vi.mock hoisting limitations, isParentAuthenticated
+      // value is set when the mock is first created
+      wrapper = mount(LoginButton)
+      await nextTick()
+
+      const button = wrapper.find('.avatar-btn')
+      // Should have ar haspopup regardless of auth state
+      expect(button.attributes('aria-haspopup')).toBe('menu')
+      expect(button.attributes('aria-expanded')).toBe('false')
+      // aria-label will vary based on the initial mock state
+      expect(button.attributes('aria-label')).toBeTruthy()
+    })
+
+    it('has correct ARIA attributes when authenticated', async () => {
+      isParentAuthenticatedRef.value = true
+      wrapper = mount(LoginButton)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      const button = wrapper.find('.avatar-btn')
+      expect(button.attributes('aria-label')).toBe('Parent menu')
+      expect(button.attributes('aria-haspopup')).toBe('menu')
+      expect(button.attributes('aria-expanded')).toBe('false')
+    })
+
+    it('updates aria-expanded when dropdown opens', async () => {
+      isParentAuthenticatedRef.value = true
+      wrapper = mount(LoginButton)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('click')
+      await nextTick()
+
+      expect(button.attributes('aria-expanded')).toBe('true')
+    })
+
+    it('menu items have correct roles', async () => {
+      isParentAuthenticatedRef.value = true
+      wrapper = mount(LoginButton)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('click')
+      await nextTick()
+
+      const dropdown = wrapper.find('.dropdown-menu')
+      expect(dropdown.attributes('role')).toBe('menu')
+
+      const menuItems = wrapper.findAll('.menu-item')
+      menuItems.forEach((item) => {
+        expect(item.attributes('role')).toBe('menuitem')
+      })
+    })
+  })
+
+  describe('Mode Logic', () => {
+    it('button click handler works correctly', async () => {
+      // Due to vi.mock limitations with reactivity, we test that
+      // click handler is wired up correctly
+      wrapper = mount(LoginButton, {
+        global: {
+          mocks: {
+            $router: {
+              push: vi.fn(),
+            },
+          },
+        },
+      })
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('click')
+      await nextTick()
+
+      // Verify button is clickable and doesn't throw
+      expect(button.exists()).toBe(true)
+    })
+
+    it('dropdown visibility controlled by auth state and open/close', async () => {
+      //Test dropdown behavior when authenticated
+      isParentAuthenticatedRef.value = true
+      wrapper = mount(LoginButton)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      // Initially closed
+      let dropdown = wrapper.find('.dropdown-menu')
+      expect(dropdown.exists()).toBe(false)
+
+      // Click to open
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('click')
+      await nextTick()
+
+      dropdown = wrapper.find('.dropdown-menu')
+      expect(dropdown.exists()).toBe(true)
+    })
+  })
+
+  describe('Focus Ring', () => {
+    it('shows focus ring on keyboard focus', async () => {
+      wrapper = mount(LoginButton)
+      await nextTick()
+
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('focus')
+      await nextTick()
+
+      // Check for focus ring styles
+      expect(button.classes()).toContain('avatar-btn')
+    })
+  })
+
+  describe('Stub Icons', () => {
+    it('renders stub icons for menu items', async () => {
+      isParentAuthenticatedRef.value = true
+      wrapper = mount(LoginButton)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('click')
+      await nextTick()
+
+      const stubs = wrapper.findAll('.menu-icon-stub')
+      expect(stubs.length).toBe(3)
+    })
+  })
+
+  describe('User Email Display', () => {
+    it('displays email in dropdown header when available', async () => {
+      isParentAuthenticatedRef.value = true
+      wrapper = mount(LoginButton)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('click')
+      await nextTick()
+
+      const email = wrapper.find('.dropdown-user-email')
+      expect(email.exists()).toBe(true)
+      expect(email.text()).toBe('john@example.com')
+    })
+
+    it('does not display email element when email is not available', async () => {
+      ;(global.fetch as any).mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ image_id: 'test-image-id', first_name: 'Jane' }),
+      })
+
+      isParentAuthenticatedRef.value = true
+      wrapper = mount(LoginButton)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
+      const button = wrapper.find('.avatar-btn')
+      await button.trigger('click')
+      await nextTick()
+
+      const email = wrapper.find('.dropdown-user-email')
+      expect(email.exists()).toBe(false)
+    })
+  })
+})
--- a/frontend/vue-app/src/components/task/TaskEditView.vue
+++ b/frontend/vue-app/src/components/task/TaskEditView.vue
@@ -1,4 +1,12 @@
 <style scoped>
+.view {
+  max-width: 400px;
+  margin: 0 auto;
+  background: var(--form-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow);
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+}
 .good-bad-toggle {
  display: flex;
  gap: 0.5rem;
@@ -184,7 +192,7 @@ function handleCancel() {
 </script>

 <template>
-  <div class="edit-view">
+  <div class="view">
    <EntityEditForm
      entityLabel="Task"
      :fields="fields"
--- a/frontend/vue-app/src/components/task/TaskView.vue
+++ b/frontend/vue-app/src/components/task/TaskView.vue
@@ -40,7 +40,7 @@ import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import ItemList from '../shared/ItemList.vue'
 import MessageBlock from '@/components/shared/MessageBlock.vue'
-import '@/assets/button-shared.css'
+//import '@/assets/button-shared.css'
 import FloatingActionButton from '../shared/FloatingActionButton.vue'
 import DeleteModal from '../shared/DeleteModal.vue'
 import type { Task } from '@/common/models'
--- a/frontend/vue-app/src/components/utils/ImagePicker.vue
+++ b/frontend/vue-app/src/components/utils/ImagePicker.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue'
 import { getCachedImageUrl } from '@/common/imageCache'
+import '@/assets/styles.css'

 const props = defineProps<{
  modelValue?: string | null // selected image id or local-upload
@@ -370,6 +371,15 @@ function updateLocalImage(url: string, file: File) {
  object-fit: contain;
 }

+.error {
+  color: var(--error);
+  margin-top: 0.7rem;
+  text-align: center;
+  background: var(--error-bg);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
 .actions {
  display: flex;
  gap: 3rem;
--- a/frontend/vue-app/src/main.ts
+++ b/frontend/vue-app/src/main.ts
@@ -2,8 +2,6 @@ import '@/assets/colors.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import '@/assets/actions-shared.css'
-import '@/assets/button-shared.css'

 const app = createApp(App)