From 2402645911e189b7186c37e6b61bfa25aba4a9af Mon Sep 17 00:00:00 2001
From: Ryan Kegel <ryan.kegel@gmail.com>
Date: Wed, 17 Dec 2025 22:50:13 -0500
Subject: [PATCH] Made changes to CSS and merged together.

---
 web/vue-app/src/assets/actions-shared.css     |  36 +++
 web/vue-app/src/assets/button-shared.css      |  54 +++++
 web/vue-app/src/assets/edit-forms.css         |  75 ++++++
 web/vue-app/src/assets/layout-shared.css      | 108 +++++++++
 web/vue-app/src/assets/list-shared.css        | 120 +++++++++
 web/vue-app/src/assets/view-shared.css        | 112 +++++++++
 .../src/components/AssignTaskButton.vue       |  38 ---
 .../src/components/ChildrenListView.vue       |  71 +++---
 web/vue-app/src/components/ImagePicker.vue    |  29 ++-
 web/vue-app/src/components/LoginButton.vue    |  36 +--
 .../src/components/child/ChildDetailCard.vue  |   4 +-
 .../src/components/child/ChildEditView.vue    |  57 +----
 .../src/components/child/ChildForm.vue        | 229 ------------------
 .../src/components/child/ChildView.vue        | 181 +++-----------
 .../src/components/child/ParentView.vue       | 193 +--------------
 .../src/components/child/RewardAssignView.vue |  30 ++-
 .../src/components/child/TaskAssignView.vue   |  30 ++-
 .../notification/NotificationList.vue         |  85 +------
 .../src/components/reward/ChildRewardList.vue |   9 +-
 .../src/components/reward/RewardEditView.vue  | 111 +++------
 .../src/components/reward/RewardList.vue      | 118 +--------
 .../src/components/reward/RewardView.vue      |  19 +-
 .../src/components/task/ChildTaskList.vue     |  15 +-
 .../src/components/task/TaskEditView.vue      |  95 +-------
 web/vue-app/src/components/task/TaskList.vue  | 126 +---------
 web/vue-app/src/components/task/TaskView.vue  |  19 +-
 web/vue-app/src/layout/ChildLayout.vue        |  75 +-----
 web/vue-app/src/layout/ParentLayout.vue       |  82 +------
 web/vue-app/src/main.ts                       |   3 +
 29 files changed, 764 insertions(+), 1396 deletions(-)
 create mode 100644 web/vue-app/src/assets/actions-shared.css
 create mode 100644 web/vue-app/src/assets/button-shared.css
 create mode 100644 web/vue-app/src/assets/edit-forms.css
 create mode 100644 web/vue-app/src/assets/layout-shared.css
 create mode 100644 web/vue-app/src/assets/list-shared.css
 create mode 100644 web/vue-app/src/assets/view-shared.css
 delete mode 100644 web/vue-app/src/components/AssignTaskButton.vue
 delete mode 100644 web/vue-app/src/components/child/ChildForm.vue

diff --git a/web/vue-app/src/assets/actions-shared.css b/web/vue-app/src/assets/actions-shared.css
new file mode 100644
index 0000000..56fea14
--- /dev/null
+++ b/web/vue-app/src/assets/actions-shared.css
@@ -0,0 +1,36 @@
+.actions {
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+  margin-top: 0.5rem;
+}
+.actions button {
+  padding: 1rem 2.2rem;
+  border-radius: 12px;
+  border: 0;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 1.25rem;
+  transition: background 0.18s;
+  min-width: 120px;
+}
+
+/* Unified error style */
+.error {
+  color: #e53e3e;
+  margin-top: 0.7rem;
+  text-align: center;
+  background: rgba(255, 107, 107, 0.1);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+@media (max-width: 480px) {
+  .actions {
+    gap: 1.2rem;
+  }
+  .actions button {
+    padding: 0.8rem 1.2rem;
+    font-size: 1.05rem;
+    min-width: 90px;
+  }
diff --git a/web/vue-app/src/assets/button-shared.css b/web/vue-app/src/assets/button-shared.css
new file mode 100644
index 0000000..7b520bd
--- /dev/null
+++ b/web/vue-app/src/assets/button-shared.css
@@ -0,0 +1,54 @@
+/* Base button style */
+.btn {
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  padding: 0.7rem 1.5rem;
+  font-size: 1.1rem;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
+  transition:
+    background 0.18s,
+    color 0.18s;
+  display: inline-block;
+}
+
+/* Primary button (e.g., Save, Confirm) */
+.btn-primary {
+  background: #667eea;
+  color: #fff;
+}
+.btn-primary:hover,
+.btn-primary:focus {
+  background: #5a67d8;
+}
+
+/* Secondary button (e.g., Cancel) */
+.btn-secondary {
+  background: #f3f3f3;
+  color: #666;
+}
+.btn-secondary:hover,
+.btn-secondary:focus {
+  background: #e2e8f0;
+}
+
+/* Danger button (e.g., Delete) */
+.btn-danger {
+  background: #ef4444;
+  color: #fff;
+}
+.btn-danger:hover,
+.btn-danger:focus {
+  background: #dc2626;
+}
+
+/* Green button (e.g., Confirm) */
+.btn-green {
+  background: #22c55e;
+  color: #fff;
+}
+.btn-green:hover,
+.btn-green:focus {
+  background: #16a34a;
+}
diff --git a/web/vue-app/src/assets/edit-forms.css b/web/vue-app/src/assets/edit-forms.css
new file mode 100644
index 0000000..d3afa0d
--- /dev/null
+++ b/web/vue-app/src/assets/edit-forms.css
@@ -0,0 +1,75 @@
+.edit-view,
+.child-edit-view,
+.reward-edit-view,
+.task-edit-view {
+  max-width: 400px;
+  margin: 2rem auto;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 24px #667eea22;
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+}
+
+.edit-view h2,
+.child-edit-view h2,
+.reward-edit-view h2,
+.task-edit-view h2 {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: #667eea;
+}
+
+.form-group,
+.reward-form label,
+.task-form label {
+  display: block;
+  margin-bottom: 1.1rem;
+  font-weight: 500;
+  color: #444;
+  width: 100%;
+}
+
+input[type='text'],
+input[type='number'],
+.reward-form input[type='text'],
+.reward-form input[type='number'],
+.task-form input[type='text'],
+.task-form input[type='number'] {
+  display: block;
+  width: 100%;
+  margin-top: 0.4rem;
+  padding: 0.5rem;
+  border-radius: 7px;
+  border: 1px solid #cbd5e1;
+  font-size: 1rem;
+  background: #f8fafc;
+  box-sizing: border-box;
+}
+
+.btn.cancel,
+button[type='button'] {
+  background: #f3f3f3;
+  color: #666;
+}
+.btn.save,
+button[type='submit'] {
+  background: #667eea;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.6rem 1.4rem;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.18s;
+}
+.btn.save:hover,
+button[type='submit']:hover:not(:disabled) {
+  background: #5a67d8;
+}
+
+.loading-message {
+  text-align: center;
+  color: #666;
+  margin-bottom: 1.2rem;
+}
diff --git a/web/vue-app/src/assets/layout-shared.css b/web/vue-app/src/assets/layout-shared.css
new file mode 100644
index 0000000..dfa8d06
--- /dev/null
+++ b/web/vue-app/src/assets/layout-shared.css
@@ -0,0 +1,108 @@
+/* Root layout */
+.layout-root {
+  width: 100%;
+  min-height: 100vh;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
+}
+
+/* Top bar */
+.topbar {
+  display: flex;
+  align-items: stretch;
+  padding: 5px 5px;
+  height: 48px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Back button container and login button container */
+.back-btn-container,
+.login-btn-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+}
+
+.back-btn-container {
+  justify-content: flex-start;
+}
+
+.login-btn-container {
+  justify-content: flex-end;
+}
+
+/* Spacer for layouts without a center nav */
+.spacer {
+  flex: 1 1 auto;
+}
+
+/* Back button */
+.back-btn {
+  background: var(--button-bg, #fff);
+  border: 0;
+  padding: 0.6rem 1rem;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  color: var(--button-text, #667eea);
+  font-weight: 600;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+/* Login button inside login-btn container */
+.login-btn {
+  background: var(--button-bg, #fff);
+  border: 0;
+  padding: 0.6rem 1rem;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  color: var(--button-text, #667eea);
+  font-weight: 600;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+/* Main content area */
+.main-content {
+  flex: 1 1 auto;
+  width: 100%;
+  justify-content: center;
+  align-items: flex-start;
+  box-sizing: border-box;
+  min-height: 0;
+  height: 0;
+  overflow: hidden;
+  overflow-y: visible;
+}
+
+/* App version display */
+.app-version {
+  position: fixed;
+  right: 18px;
+  bottom: 12px;
+  font-size: 0.92rem;
+  color: var(--app-version, #cbd5e1);
+  opacity: 0.85;
+  z-index: 100;
+  pointer-events: none;
+  user-select: none;
+  font-family: monospace;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .back-btn,
+  .login-btn button {
+    padding: 0.45rem 0.75rem;
+    font-size: 0.6rem;
+    height: 100%;
+  }
+}
diff --git a/web/vue-app/src/assets/list-shared.css b/web/vue-app/src/assets/list-shared.css
new file mode 100644
index 0000000..981893a
--- /dev/null
+++ b/web/vue-app/src/assets/list-shared.css
@@ -0,0 +1,120 @@
+/* List container */
+.listbox {
+  flex: 1 1 auto;
+  max-width: 480px;
+  width: 100%;
+  max-height: calc(100vh - 4.5rem);
+  overflow-y: auto;
+  margin: 0.2rem 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  background: #fff5;
+  padding: 0.2rem 0.2rem 0.2rem;
+  border-radius: 12px;
+}
+
+/* List item */
+.list-item {
+  display: flex;
+  align-items: center;
+  border: 2px outset #38c172;
+  border-radius: 8px;
+  padding: 0.2rem 1rem;
+  background: #f8fafc;
+  font-size: 1.05rem;
+  font-weight: 500;
+  transition: border 0.18s;
+  margin-bottom: 0.2rem;
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+  box-sizing: border-box;
+}
+.list-item.bad {
+  border-color: #e53e3e;
+  background: #fff5f5;
+}
+.list-item.good {
+  border-color: #38c172;
+  background: #f0fff4;
+}
+
+/* Image styles */
+.list-image {
+  width: 36px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: 8px;
+  margin-right: 0.7rem;
+  background: #eee;
+  flex-shrink: 0;
+}
+
+/* Name/label styles */
+.list-name {
+  flex: 1;
+  text-align: left;
+  font-weight: 600;
+}
+
+/* Points/cost/requested text */
+.list-value {
+  min-width: 60px;
+  text-align: right;
+  font-weight: 600;
+}
+
+/* Delete button */
+.delete-btn {
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  padding: 0.15rem;
+  margin-left: 0.7rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  transition:
+    background 0.15s,
+    box-shadow 0.15s;
+  width: 2rem;
+  height: 2rem;
+  opacity: 0.92;
+}
+.delete-btn:hover {
+  background: #ffeaea;
+  box-shadow: 0 0 0 2px #ef444422;
+  opacity: 1;
+}
+.delete-btn svg {
+  display: block;
+}
+
+/* Checkbox */
+.list-checkbox {
+  margin-left: 1rem;
+  width: 1.2em;
+  height: 1.2em;
+  accent-color: #667eea;
+  cursor: pointer;
+}
+
+/* Loading, error, empty states */
+.loading,
+.empty {
+  margin: 1.2rem 0;
+  color: #888;
+  font-size: 1.15rem;
+  font-weight: 600;
+  text-align: center;
+  line-height: 1.5;
+}
+
+/* Separator (if needed) */
+.list-separator {
+  height: 0px;
+  background: #0000;
+  margin: 0rem 0.2rem;
+  border-radius: 0px;
+}
diff --git a/web/vue-app/src/assets/view-shared.css b/web/vue-app/src/assets/view-shared.css
new file mode 100644
index 0000000..11c5f92
--- /dev/null
+++ b/web/vue-app/src/assets/view-shared.css
@@ -0,0 +1,112 @@
+.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: white;
+  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: #fff;
+  color: #222;
+  padding: 1.5rem 2rem;
+  border-radius: 12px;
+  min-width: 240px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  text-align: center;
+}
+
+/* Dialog Message */
+.dialog-message {
+  font-size: 1.08rem;
+  color: #444;
+  font-weight: 500;
+  margin-bottom: 1.2rem;
+  text-align: center;
+}
+.dialog-message .child-name {
+  color: #667eea;
+  font-weight: 700;
+  margin-left: 2px;
+}
+
+/* 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: #eee;
+}
+.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: #667eea;
+  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;
+  }
+}
diff --git a/web/vue-app/src/components/AssignTaskButton.vue b/web/vue-app/src/components/AssignTaskButton.vue
deleted file mode 100644
index a3755fb..0000000
--- a/web/vue-app/src/components/AssignTaskButton.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import AssignTasksDialog from './AssignTasksDialog.vue'
-
-const props = defineProps<{ childId: string | number | null }>()
-const showDialog = ref(false)
-const openDialog = () => {
-  showDialog.value = true
-}
-const closeDialog = () => {
-  showDialog.value = false
-}
-</script>
-
-<template>
-  <div>
-    <button class="assign-tasks-btn" @click="openDialog">Assign Task</button>
-    <AssignTasksDialog v-if="showDialog" :child-id="props.childId" @close="closeDialog" />
-  </div>
-</template>
-
-<style scoped>
-.assign-tasks-btn {
-  background: #667eea;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 0.7rem 1.4rem;
-  font-size: 1.1rem;
-  font-weight: 600;
-  cursor: pointer;
-  margin-top: 2rem;
-  transition: background 0.18s;
-}
-.assign-tasks-btn:hover {
-  background: #5a67d8;
-}
-</style>
diff --git a/web/vue-app/src/components/ChildrenListView.vue b/web/vue-app/src/components/ChildrenListView.vue
index b7ff86a..46766bd 100644
--- a/web/vue-app/src/components/ChildrenListView.vue
+++ b/web/vue-app/src/components/ChildrenListView.vue
@@ -355,7 +355,7 @@ onBeforeUnmount(() => {
         <p>Are you sure you want to permanently delete this child?</p>
         <div class="actions">
           <button
-            class="btn cancel"
+            class="btn btn-secondary"
             @click="
               () => {
                 confirmDeleteVisible = false
@@ -365,8 +365,8 @@ onBeforeUnmount(() => {
           >
             Cancel
           </button>
-          <button class="btn delete" @click="performDelete" :disabled="deleting">
-            {{ deleting ? 'Deleting…' : 'Confirm Delete' }}
+          <button class="btn btn-danger" @click="performDelete" :disabled="deleting">
+            {{ deleting ? 'Deleting…' : 'Delete' }}
           </button>
         </div>
       </div>
@@ -402,7 +402,6 @@ h1 {
 }
 
 .loading,
-.error,
 .empty {
   display: flex;
   align-items: center;
@@ -413,13 +412,6 @@ h1 {
   text-align: center;
 }
 
-.error {
-  color: #ff6b6b;
-  background: rgba(255, 107, 107, 0.1);
-  border-radius: 8px;
-  padding: 1rem;
-}
-
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
@@ -462,6 +454,7 @@ h1 {
   color: #666;
   border-radius: 6px;
   box-sizing: border-box;
+  font-size: 1.5rem;
 }
 
 /* consistent focus ring without changing layout */
@@ -473,27 +466,46 @@ h1 {
 /* Menu overlays the card and does NOT alter flow */
 .kebab-menu {
   position: absolute;
-  top: 44px; /* place below the button */
-  right: 0; /* align to kebab button's right edge */
+  top: 44px;
+  right: 0;
   margin: 0;
   min-width: 150px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  background: #f7fafcc7; /* subtle light gray for contrast */
+  border-radius: 10px;
+  border: 1.5px solid #bcc1c9; /* subtle border for definition */
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.18),
+    0 1.5px 6px rgba(102, 126, 234, 0.08); /* stronger shadow for separation */
   display: flex;
   flex-direction: column;
   overflow: hidden;
   z-index: 30;
+  backdrop-filter: blur(11px); /* optional: adds a modern blur effect */
 }
 
 .menu-item {
-  padding: 0.6rem 0.9rem;
+  padding: 1.1rem 0.9rem; /* Increase vertical padding for bigger touch area */
   background: transparent;
   border: 0;
   text-align: left;
   cursor: pointer;
   font-weight: 600;
   color: #333;
+  font-size: 1.1rem; /* Slightly larger text for readability */
+}
+
+.menu-item + .menu-item {
+  margin-top: 0.5rem; /* Add space between menu items */
+}
+
+@media (max-width: 600px) {
+  .menu-item {
+    padding: 0.85rem 0.7rem;
+    font-size: 1rem;
+  }
+  .menu-item + .menu-item {
+    margin-top: 0.35rem;
+  }
 }
 
 .menu-item:hover {
@@ -564,31 +576,6 @@ h1 {
   font-size: 1.05rem;
 }
 
-.actions {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: center;
-  margin-top: 1rem;
-}
-
-.btn {
-  padding: 0.5rem 0.8rem;
-  border-radius: 8px;
-  border: 0;
-  cursor: pointer;
-  font-weight: 700;
-}
-
-.btn.cancel {
-  background: #f3f3f3;
-  color: #666;
-}
-
-.btn.delete {
-  background: #ff4d4f;
-  color: white;
-}
-
 .points {
   font-size: 1.05rem;
   color: #444;
diff --git a/web/vue-app/src/components/ImagePicker.vue b/web/vue-app/src/components/ImagePicker.vue
index 4f5b86f..10833d0 100644
--- a/web/vue-app/src/components/ImagePicker.vue
+++ b/web/vue-app/src/components/ImagePicker.vue
@@ -226,6 +226,7 @@ async function resizeImageFile(
       ref="fileInput"
       type="file"
       accept=".png,.jpg,.jpeg,.gif,image/png,image/jpeg,image/gif"
+      capture="environment"
       style="display: none"
       @change="onFileChange"
     />
@@ -253,15 +254,15 @@ async function resizeImageFile(
           <div v-if="!capturedImageUrl">
             <video ref="cameraVideo" autoplay playsinline class="camera-video"></video>
             <div class="actions">
-              <button type="button" class="btn save" @click="takePhoto">Take Photo</button>
-              <button type="button" class="btn cancel" @click="closeCamera">Cancel</button>
+              <button type="button" class="btn btn-primary" @click="takePhoto">Take Photo</button>
+              <button type="button" class="btn btn-secondary" @click="closeCamera">Cancel</button>
             </div>
           </div>
           <div v-else>
             <img :src="capturedImageUrl" class="captured-preview" alt="Preview" />
             <div class="actions">
-              <button type="button" class="btn save" @click="confirmPhoto">Use Photo</button>
-              <button type="button" class="btn cancel" @click="retakePhoto">Retake</button>
+              <button type="button" class="btn btn-primary" @click="confirmPhoto">Use Photo</button>
+              <button type="button" class="btn btn-secondary" @click="retakePhoto">Retake</button>
             </div>
           </div>
         </div>
@@ -285,8 +286,8 @@ async function resizeImageFile(
   align-items: center;
 }
 .selectable-image {
-  width: 54px;
-  height: 54px;
+  width: 64px;
+  height: 64px;
   object-fit: cover;
   border-radius: 8px;
   border: 2px solid #e6e6e6;
@@ -310,29 +311,31 @@ async function resizeImageFile(
 
 .image-actions {
   display: flex;
-  gap: 1rem;
+  gap: 4rem;
   justify-content: center;
-  margin-top: 0.5rem;
+  margin-top: 1.2rem; /* Increased space below images */
 }
 
 .icon-btn {
   background: #f3f3f3;
   border: none;
   border-radius: 50%;
-  width: 38px;
-  height: 38px;
+  width: 56px; /* Increased size */
+  height: 56px; /* Increased size */
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.18s;
-  font-size: 1.5rem;
+  font-size: 2.2rem; /* Bigger + icon */
   color: #667eea;
   box-shadow: 0 2px 8px rgba(102, 126, 234, 0.07);
 }
-.icon-btn:hover {
-  background: #e0e7ff;
+.icon-btn svg {
+  width: 32px; /* Bigger camera icon */
+  height: 32px;
 }
+
 .icon {
   display: flex;
   align-items: center;
diff --git a/web/vue-app/src/components/LoginButton.vue b/web/vue-app/src/components/LoginButton.vue
index 6becc66..0174b7a 100644
--- a/web/vue-app/src/components/LoginButton.vue
+++ b/web/vue-app/src/components/LoginButton.vue
@@ -56,8 +56,12 @@ onUnmounted(() => {
 
 <template>
   <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>
+    <button v-if="!isParentAuthenticated" @click="open" aria-label="Parent login" class="login-btn">
+      Parent
+    </button>
+    <button v-else @click="handleLogout" aria-label="Parent logout" class="login-btn">
+      Log out
+    </button>
 
     <div v-if="show" class="modal-backdrop" @click.self="close">
       <div class="modal">
@@ -73,8 +77,8 @@ onUnmounted(() => {
             class="pin-input"
           />
           <div class="actions">
-            <button type="button" class="btn cancel" @click="close">Cancel</button>
-            <button type="submit" class="btn submit">OK</button>
+            <button type="button" class="btn btn-secondary" @click="close">Cancel</button>
+            <button type="submit" class="btn btn-primary">OK</button>
           </div>
         </form>
         <div v-if="error" class="error">{{ error }}</div>
@@ -132,30 +136,6 @@ onUnmounted(() => {
   margin-bottom: 0.4rem;
 }
 
-.btn {
-  padding: 0.45rem 0.7rem;
-  border-radius: 8px;
-  border: 0;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.btn.cancel {
-  background: #f3f3f3;
-  color: #666;
-}
-
-.btn.submit {
-  background: #667eea;
-  color: white;
-}
-
-.error {
-  color: #ff6b6b;
-  font-size: 0.9rem;
-  margin-top: 0.25rem;
-}
-
 .login-button-root {
 }
 </style>
diff --git a/web/vue-app/src/components/child/ChildDetailCard.vue b/web/vue-app/src/components/child/ChildDetailCard.vue
index d5c704e..0ff53b5 100644
--- a/web/vue-app/src/components/child/ChildDetailCard.vue
+++ b/web/vue-app/src/components/child/ChildDetailCard.vue
@@ -119,8 +119,8 @@ onBeforeUnmount(() => {
 }
 
 .points .value {
-  font-size: 1.1rem;
-  font-weight: 700;
+  font-size: 1.6rem;
+  font-weight: 900;
   color: #667eea;
 }
 
diff --git a/web/vue-app/src/components/child/ChildEditView.vue b/web/vue-app/src/components/child/ChildEditView.vue
index 08dc872..9536f67 100644
--- a/web/vue-app/src/components/child/ChildEditView.vue
+++ b/web/vue-app/src/components/child/ChildEditView.vue
@@ -22,10 +22,10 @@
       </div>
       <div v-if="error" class="error">{{ error }}</div>
       <div class="actions">
-        <button type="button" class="btn cancel" @click="onCancel" :disabled="loading">
+        <button type="button" class="btn btn-secondary" @click="onCancel" :disabled="loading">
           Cancel
         </button>
-        <button type="submit" class="btn save" :disabled="loading">
+        <button type="submit" class="btn btn-primary" :disabled="loading">
           {{ isEdit ? 'Save' : 'Create' }}
         </button>
       </div>
@@ -37,6 +37,7 @@
 import { ref, onMounted, computed, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import ImagePicker from '../ImagePicker.vue'
+import '@/assets/edit-forms.css'
 
 const route = useRoute()
 const router = useRouter()
@@ -153,22 +154,8 @@ function onCancel() {
 }
 </script>
 
+<!-- Removed duplicated CSS now present in edit-forms.css -->
 <style scoped>
-.child-edit-view {
-  max-width: 400px;
-  margin: 2rem auto;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 24px #667eea22;
-  padding: 2rem 2.2rem 1.5rem 2.2rem;
-}
-h2 {
-  margin-bottom: 1.2rem;
-  font-size: 1.15rem;
-  color: #667eea;
-  font-weight: 700;
-  text-align: center;
-}
 .form {
   display: flex;
   flex-direction: column;
@@ -204,44 +191,8 @@ input:focus {
   outline: none;
   border: 1.5px solid #667eea;
 }
-.actions {
-  display: flex;
-  gap: 0.7rem;
-  justify-content: center;
-  margin-top: 0.5rem;
-}
-.btn {
-  padding: 0.5rem 1.1rem;
-  border-radius: 8px;
-  border: 0;
-  cursor: pointer;
-  font-weight: 700;
-  font-size: 1rem;
-  transition: background 0.18s;
-}
-.btn.cancel {
-  background: #f3f3f3;
-  color: #666;
-}
-.btn.save {
-  background: #667eea;
-  color: white;
-}
-.btn.save:hover {
-  background: #5a67d8;
-}
 .form-group.image-picker-group {
   display: block;
   text-align: left;
 }
-.error {
-  color: #e53e3e;
-  margin-top: 0.7rem;
-  text-align: center;
-}
-.loading-message {
-  text-align: center;
-  color: #666;
-  margin-bottom: 1.2rem;
-}
 </style>
diff --git a/web/vue-app/src/components/child/ChildForm.vue b/web/vue-app/src/components/child/ChildForm.vue
deleted file mode 100644
index 8d887cb..0000000
--- a/web/vue-app/src/components/child/ChildForm.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<script setup lang="ts">
-import { defineProps, defineEmits, ref, watch } from 'vue'
-import ImagePicker from '../ImagePicker.vue'
-
-const props = defineProps<{
-  child: { id: string | number; name: string; age: number; image_id?: string | null } | null
-}>()
-const emit = defineEmits(['close', 'updated'])
-
-const name = ref(props.child?.name ?? '')
-const age = ref(props.child?.age ?? '')
-const selectedImageId = ref<string | null>(props.child?.image_id ?? null)
-const localImageFile = ref<File | null>(null)
-
-watch(
-  () => props.child,
-  (c) => {
-    name.value = c?.name ?? ''
-    age.value = c?.age ?? ''
-    selectedImageId.value = c?.image_id ?? null
-    localImageFile.value = null
-  },
-  { immediate: true },
-)
-
-// Handle new image from ImagePicker
-function onAddImage({ id, file }: { id: string; file: File }) {
-  if (id === 'local-upload') {
-    localImageFile.value = file
-  }
-}
-
-const submit = async () => {
-  let imageId = selectedImageId.value
-
-  // If the selected image is a local upload, upload it first
-  if (imageId === 'local-upload' && localImageFile.value) {
-    const formData = new FormData()
-    formData.append('file', localImageFile.value)
-    formData.append('type', '1')
-    formData.append('permanent', 'false')
-    try {
-      const resp = await fetch('/api/image/upload', {
-        method: 'POST',
-        body: formData,
-      })
-      if (!resp.ok) throw new Error('Image upload failed')
-      const data = await resp.json()
-      imageId = data.id
-    } catch (err) {
-      alert('Failed to upload image.')
-      return
-    }
-  }
-
-  // Now update the child
-  try {
-    const resp = await fetch(`/api/child/${props.child?.id}/edit`, {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        name: name.value,
-        age: age.value,
-        image_id: imageId,
-      }),
-    })
-    if (!resp.ok) throw new Error('Failed to update child')
-    emit('updated')
-  } catch (err) {
-    alert('Failed to update child.')
-  }
-}
-</script>
-
-<template>
-  <div class="modal-backdrop">
-    <div class="modal">
-      <h3>Edit Child</h3>
-      <form @submit.prevent="submit" class="form">
-        <div class="form-group">
-          <label for="child-name">Name</label>
-          <input id="child-name" v-model="name" required />
-        </div>
-        <div class="form-group">
-          <label for="child-age">Age</label>
-          <input id="child-age" v-model="age" type="number" min="0" required />
-        </div>
-        <div class="form-group image-picker-group">
-          <label for="child-image">Image</label>
-          <ImagePicker
-            id="child-image"
-            v-model="selectedImageId"
-            :image-type="1"
-            @add-image="onAddImage"
-          />
-        </div>
-        <div class="actions">
-          <button type="button" class="btn cancel" @click="emit('close')">Cancel</button>
-          <button type="submit" class="btn save">Save</button>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  z-index: 1200;
-  overflow-y: auto;
-  padding-top: max(3vh, env(safe-area-inset-top, 24px));
-  padding-bottom: max(3vh, env(safe-area-inset-bottom, 24px));
-}
-
-.modal {
-  background: #fff;
-  color: #222;
-  padding: 1.2rem 2rem 1.2rem 2rem;
-  border-radius: 12px;
-  width: 360px;
-  max-width: 100vw;
-  max-height: 100vh;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
-  text-align: center;
-  overflow-y: auto;
-  box-sizing: border-box;
-}
-
-@media (max-width: 600px), (max-height: 480px) {
-  .modal {
-    width: 90vw;
-    max-width: 98vw;
-    max-height: 94vh;
-    padding: 0.7rem 0.7rem 0.7rem 0.7rem;
-    font-size: 0.97rem;
-  }
-}
-
-@media (orientation: landscape) and (min-width: 601px) {
-  .modal {
-    width: 75vw;
-    max-width: 600px;
-    max-height: 94vh;
-  }
-}
-
-h3 {
-  margin-bottom: 1.2rem;
-  font-size: 1.15rem;
-  color: #667eea;
-  font-weight: 700;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.1rem;
-}
-
-.form-group {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.35rem;
-  box-sizing: border-box;
-}
-
-label {
-  font-weight: 600;
-  color: #333;
-  font-size: 1rem;
-}
-
-input[type='text'],
-input[type='number'] {
-  width: 100%;
-  min-width: 0;
-  box-sizing: border-box;
-  padding: 0.5rem 0.7rem;
-  border-radius: 8px;
-  border: 1px solid #e6e6e6;
-  font-size: 1rem;
-  background: #fafbff;
-  color: #222;
-  transition: border 0.2s;
-}
-input:focus {
-  outline: none;
-  border: 1.5px solid #667eea;
-}
-
-.actions {
-  display: flex;
-  gap: 0.7rem;
-  justify-content: center;
-  margin-top: 0.5rem;
-}
-.btn {
-  padding: 0.5rem 1.1rem;
-  border-radius: 8px;
-  border: 0;
-  cursor: pointer;
-  font-weight: 700;
-  font-size: 1rem;
-  transition: background 0.18s;
-}
-.btn.cancel {
-  background: #f3f3f3;
-  color: #666;
-}
-.btn.save {
-  background: #667eea;
-  color: white;
-}
-.btn.save:hover {
-  background: #5a67d8;
-}
-
-.form-group.image-picker-group {
-  display: block;
-  text-align: left;
-}
-</style>
diff --git a/web/vue-app/src/components/child/ChildView.vue b/web/vue-app/src/components/child/ChildView.vue
index b5882dd..e19ba80 100644
--- a/web/vue-app/src/components/child/ChildView.vue
+++ b/web/vue-app/src/components/child/ChildView.vue
@@ -5,6 +5,7 @@ import ChildDetailCard from './ChildDetailCard.vue'
 import ChildTaskList from '../task/ChildTaskList.vue'
 import ChildRewardList from '../reward/ChildRewardList.vue'
 import { eventBus } from '@/common/eventBus'
+import '@/assets/view-shared.css'
 import type {
   Child,
   Event,
@@ -252,7 +253,7 @@ function resetInactivityTimer() {
   if (inactivityTimer) clearTimeout(inactivityTimer)
   inactivityTimer = setTimeout(() => {
     router.push({ name: 'ChildrenListView' })
-  }, 15000) // 15 seconds
+  }, 60000) // 60 seconds
 }
 
 function setupInactivityListeners() {
@@ -310,7 +311,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="container">
+  <div>
     <div v-if="loading" class="loading">Loading...</div>
     <div v-else-if="error" class="error">Error: {{ error }}</div>
 
@@ -363,8 +364,8 @@ onUnmounted(() => {
           Would you like to redeem this reward?
         </div>
         <div class="actions">
-          <button @click="confirmRedeemReward">Yes</button>
-          <button @click="cancelRedeemReward">No</button>
+          <button @click="confirmRedeemReward" class="btn btn-primary">Yes</button>
+          <button @click="cancelRedeemReward" class="btn btn-secondary">No</button>
         </div>
       </div>
     </div>
@@ -388,8 +389,8 @@ onUnmounted(() => {
           Would you like to cancel the pending reward request?
         </div>
         <div class="actions">
-          <button @click="cancelPendingReward">Yes</button>
-          <button @click="closeCancelDialog">No</button>
+          <button @click="cancelPendingReward" class="btn btn-primary">Yes</button>
+          <button @click="closeCancelDialog" class="btn btn-secondary">No</button>
         </div>
       </div>
     </div>
@@ -397,15 +398,6 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.container {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  min-height: 100vh;
-  padding: 0.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-sizing: border-box;
-}
 .back-btn {
   background: white;
   border: 0;
@@ -416,153 +408,42 @@ onUnmounted(() => {
   color: #667eea;
   font-weight: 600;
 }
-.loading,
-.error {
-  color: white;
-  min-height: 200px;
+
+.assign-buttons {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-.error {
-  color: #ff6b6b;
-  background: rgba(255, 107, 107, 0.1);
-  border-radius: 8px;
-  padding: 1rem;
-}
-.layout {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  /* Remove grid styles */
-  /* grid-template-columns: 1fr 320px; */
-  /* gap: 1.5rem; */
-}
-.main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.5rem;
-  width: 100%;
-}
-.side {
-  display: flex;
-  flex-direction: column;
   gap: 1rem;
-}
-.placeholder {
-  background: rgba(255, 255, 255, 0.08);
-  color: white;
-  padding: 1rem;
-  border-radius: 8px;
-  min-height: 120px;
-  display: flex;
-  align-items: center;
   justify-content: center;
-  text-align: center;
+  margin: 2rem 0;
 }
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.35);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-.modal {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 24px #667eea22;
-  padding: 2rem 2.2rem 1.5rem 2.2rem;
-  min-width: 320px;
-  max-width: 90vw;
-}
-.reward-info {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-.reward-image {
-  width: 72px;
-  height: 72px;
-  object-fit: cover;
-  border-radius: 8px;
-  background: #eee;
-}
-.reward-details {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-.reward-name {
+.assign-task-btn,
+.assign-bad-btn,
+.assign-reward-btn {
   font-weight: 600;
-  font-size: 1.1rem;
-}
-.reward-points {
-  color: #667eea;
-  font-weight: 500;
-  font-size: 1rem;
-}
-.dialog-message {
-  font-size: 1.05rem;
-  margin-bottom: 1.2rem;
-  text-align: center;
-}
-.actions {
-  display: flex;
-  gap: 0.7rem;
-  justify-content: center;
-  margin-top: 0.5rem;
-}
-.actions button {
-  padding: 0.5rem 1.1rem;
+  border: none;
   border-radius: 8px;
-  border: 0;
+  padding: 0.7rem 1.5rem;
+  font-size: 1.1rem;
   cursor: pointer;
-  font-weight: 700;
-  font-size: 1rem;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
   transition: background 0.18s;
-}
-.actions button:first-child {
+  color: #fff;
   background: #667eea;
-  color: white;
 }
-.actions button:last-child {
-  background: #f3f3f3;
-  color: #666;
+.assign-task-btn:hover,
+.assign-bad-btn:hover,
+.assign-reward-btn:hover {
+  background: #5a67d8;
 }
-.actions button:last-child:hover {
-  background: #e2e8f0;
+.assign-bad-btn {
+  background: #ef4444;
 }
-
-/* Mobile adjustments */
-@media (max-width: 900px) {
-  .layout {
-    grid-template-columns: 1fr;
-  }
+.assign-bad-btn:hover {
+  background: #dc2626;
 }
-
-@media (max-width: 480px) {
-  .container {
-    padding: 1rem;
-  }
-  .back-btn {
-    padding: 0.45rem 0.75rem;
-    font-size: 0.95rem;
-    margin-bottom: 1rem;
-  }
-  .main {
-    gap: 1rem;
-  }
-  .placeholder {
-    padding: 0.75rem;
-    min-height: 80px;
-  }
+.assign-reward-btn {
+  background: #38c172;
+}
+.assign-reward-btn:hover {
+  background: #2f855a;
 }
 </style>
diff --git a/web/vue-app/src/components/child/ParentView.vue b/web/vue-app/src/components/child/ParentView.vue
index 44e89d6..6e81ec9 100644
--- a/web/vue-app/src/components/child/ParentView.vue
+++ b/web/vue-app/src/components/child/ParentView.vue
@@ -6,6 +6,7 @@ import ChildDetailCard from './ChildDetailCard.vue'
 import ChildTaskList from '../task/ChildTaskList.vue'
 import ChildRewardList from '../reward/ChildRewardList.vue'
 import { eventBus } from '@/common/eventBus'
+import '@/assets/view-shared.css'
 import type {
   Task,
   Child,
@@ -332,7 +333,7 @@ const childId = computed(() => child.value?.id ?? null)
 </script>
 
 <template>
-  <div class="container">
+  <div>
     <div v-if="loading" class="loading">Loading...</div>
     <div v-else-if="error" class="error">Error: {{ error }}</div>
 
@@ -367,13 +368,11 @@ const childId = computed(() => child.value?.id ?? null)
       </div>
     </div>
     <div class="assign-buttons">
-      <button v-if="child" class="assign-task-btn" @click="goToAssignTasks">Assign Tasks</button>
-      <button v-if="child" class="assign-bad-btn" @click="goToAssignBadHabits">
+      <button v-if="child" class="btn btn-primary" @click="goToAssignTasks">Assign Tasks</button>
+      <button v-if="child" class="btn btn-danger" @click="goToAssignBadHabits">
         Assign Bad Habits
       </button>
-      <button v-if="child" class="assign-reward-btn" @click="goToAssignRewards">
-        Assign Rewards
-      </button>
+      <button v-if="child" class="btn btn-green" @click="goToAssignRewards">Assign Rewards</button>
     </div>
 
     <!-- Pending Reward Dialog -->
@@ -385,8 +384,8 @@ const childId = computed(() => child.value?.id ?? null)
           Would you like to cancel the pending reward?
         </div>
         <div class="actions">
-          <button @click="cancelPendingReward">Yes, Cancel Reward</button>
-          <button @click="showPendingRewardDialog = false">No</button>
+          <button @click="cancelPendingReward" class="btn btn-primary">Yes</button>
+          <button @click="showPendingRewardDialog = false" class="btn btn-secondary">No</button>
         </div>
       </div>
     </div>
@@ -403,7 +402,7 @@ const childId = computed(() => child.value?.id ?? null)
           <div class="task-details">
             <div class="task-name">{{ selectedTask.name }}</div>
             <div class="task-points" :class="selectedTask.is_good ? 'good' : 'bad'">
-              {{ selectedTask.points }} pts
+              {{ selectedTask.points }} points
             </div>
           </div>
         </div>
@@ -413,7 +412,7 @@ const childId = computed(() => child.value?.id ?? null)
           <span class="child-name">{{ child?.name }}</span>
         </div>
         <div class="actions">
-          <button @click="confirmTriggerTask">Yes</button>
+          <button @click="confirmTriggerTask" class="btn btn-primary">Yes</button>
           <button
             @click="
               () => {
@@ -421,6 +420,7 @@ const childId = computed(() => child.value?.id ?? null)
                 selectedTask = null
               }
             "
+            class="btn btn-secondary"
           >
             Cancel
           </button>
@@ -443,7 +443,7 @@ const childId = computed(() => child.value?.id ?? null)
               {{
                 selectedReward.points_needed === 0
                   ? 'Reward Ready!'
-                  : selectedReward.points_needed + ' pts needed'
+                  : selectedReward.points_needed + ' more points'
               }}
             </div>
           </div>
@@ -453,7 +453,7 @@ const childId = computed(() => child.value?.id ?? null)
           >?
         </div>
         <div class="actions">
-          <button @click="confirmTriggerReward">Yes</button>
+          <button @click="confirmTriggerReward" class="btn btn-primary">Yes</button>
           <button
             @click="
               () => {
@@ -461,6 +461,7 @@ const childId = computed(() => child.value?.id ?? null)
                 selectedReward = null
               }
             "
+            class="btn btn-secondary"
           >
             Cancel
           </button>
@@ -471,174 +472,6 @@ const childId = computed(() => child.value?.id ?? null)
 </template>
 
 <style scoped>
-.container {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  min-height: 100vh;
-  padding: 2rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-sizing: border-box;
-}
-.loading,
-.error {
-  color: white;
-  min-height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-.error {
-  color: #ff6b6b;
-  background: rgba(255, 107, 107, 0.1);
-  border-radius: 8px;
-  padding: 1rem;
-}
-.layout {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-}
-.main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.5rem;
-  width: 100%;
-}
-
-/* Modal styles */
-.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: #fff;
-  color: #222;
-  padding: 1.5rem 2rem;
-  border-radius: 12px;
-  min-width: 240px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
-  text-align: center;
-}
-.task-info {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-.task-image {
-  width: 72px;
-  height: 72px;
-  object-fit: cover;
-  border-radius: 8px;
-  background: #eee;
-}
-.task-details {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-.task-name {
-  font-weight: 600;
-  font-size: 1.1rem;
-}
-.task-points,
-.task-points.good,
-.task-points.bad {
-  font-weight: 600;
-  font-size: 1.1rem;
-}
-.task-points.good {
-  color: #38c172;
-}
-.task-points.bad {
-  color: #ef4444;
-}
-.actions {
-  margin-top: 1.2rem;
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-}
-.actions button {
-  padding: 0.5rem 1.2rem;
-  border-radius: 8px;
-  border: none;
-  font-weight: 600;
-  cursor: pointer;
-}
-.actions button:first-child {
-  background: #667eea;
-  color: #fff;
-}
-.actions button:last-child {
-  background: #f3f3f3;
-  color: #666;
-}
-.actions button:last-child:hover {
-  background: #e2e8f0;
-}
-
-/* Mobile adjustments */
-@media (max-width: 900px) {
-  .layout {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 480px) {
-  .container {
-    padding: 1rem;
-  }
-  .main {
-    gap: 1rem;
-  }
-}
-
-.dialog-message {
-  font-size: 1.08rem;
-  color: #444;
-  font-weight: 500;
-}
-.dialog-message .child-name {
-  color: #667eea;
-  font-weight: 700;
-  margin-left: 2px;
-}
-.reward-info {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-.reward-image {
-  width: 72px;
-  height: 72px;
-  object-fit: cover;
-  border-radius: 8px;
-  background: #eee;
-}
-.reward-details {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-.reward-name {
-  font-weight: 600;
-  font-size: 1.1rem;
-}
-.reward-points {
-  color: #667eea;
-  font-weight: 500;
-  font-size: 1rem;
-}
 .assign-buttons {
   display: flex;
   gap: 1rem;
diff --git a/web/vue-app/src/components/child/RewardAssignView.vue b/web/vue-app/src/components/child/RewardAssignView.vue
index 4b752c1..7308628 100644
--- a/web/vue-app/src/components/child/RewardAssignView.vue
+++ b/web/vue-app/src/components/child/RewardAssignView.vue
@@ -19,8 +19,8 @@
       </div>
     </div>
     <div class="actions" v-if="rewardCountRef != 0">
-      <button class="btn cancel" @click="onCancel">Cancel</button>
-      <button class="btn submit" @click="onSubmit">Submit</button>
+      <button class="btn btn-secondary" @click="onCancel">Cancel</button>
+      <button class="btn btn-primary" @click="onSubmit">Submit</button>
     </div>
   </div>
 </template>
@@ -80,24 +80,30 @@ h2 {
   margin: 0.2rem;
 }
 .reward-list-scroll {
-  flex: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: 480px;
+  justify-content: center;
   min-height: 0;
   overflow-y: auto;
   margin-bottom: 2rem;
 }
 .actions {
   display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-  margin-top: 0;
+  gap: 3rem; /* Increased gap for more space between buttons */
+  justify-content: center;
+  margin-top: 0.5rem;
 }
-.btn {
-  padding: 0.5rem 1.2rem;
-  border-radius: 8px;
-  border: none;
-  font-weight: 600;
+.actions button {
+  padding: 1rem 2.2rem; /* Bigger touch area */
+  border-radius: 12px;
+  border: 0;
   cursor: pointer;
-  font-size: 1rem;
+  font-weight: 700;
+  font-size: 1.25rem; /* Larger text */
+  transition: background 0.18s;
+  min-width: 120px; /* Ensures buttons are wide enough */
 }
 .btn.cancel {
   background: #f3f3f3;
diff --git a/web/vue-app/src/components/child/TaskAssignView.vue b/web/vue-app/src/components/child/TaskAssignView.vue
index 0fac947..1107fae 100644
--- a/web/vue-app/src/components/child/TaskAssignView.vue
+++ b/web/vue-app/src/components/child/TaskAssignView.vue
@@ -20,8 +20,8 @@
       </div>
     </div>
     <div class="actions" v-if="taskCountRef > 0">
-      <button class="btn cancel" @click="onCancel">Cancel</button>
-      <button class="btn submit" @click="onSubmit">Submit</button>
+      <button class="btn btn-secondary" @click="onCancel">Cancel</button>
+      <button class="btn btn-primary" @click="onSubmit">Submit</button>
     </div>
   </div>
 </template>
@@ -87,24 +87,30 @@ h2 {
   margin: 0.2rem;
 }
 .task-list-scroll {
-  flex: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: 480px;
+  justify-content: center;
   min-height: 0;
   overflow-y: auto;
   margin-bottom: 2rem;
 }
 .actions {
   display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-  margin-top: 0;
+  gap: 3rem; /* Increased gap for more space between buttons */
+  justify-content: center;
+  margin-top: 0.5rem;
 }
-.btn {
-  padding: 0.5rem 1.2rem;
-  border-radius: 8px;
-  border: none;
-  font-weight: 600;
+.actions button {
+  padding: 1rem 2.2rem; /* Bigger touch area */
+  border-radius: 12px;
+  border: 0;
   cursor: pointer;
-  font-size: 1rem;
+  font-weight: 700;
+  font-size: 1.25rem; /* Larger text */
+  transition: background 0.18s;
+  min-width: 120px; /* Ensures buttons are wide enough */
 }
 .btn.cancel {
   background: #f3f3f3;
diff --git a/web/vue-app/src/components/notification/NotificationList.vue b/web/vue-app/src/components/notification/NotificationList.vue
index cbbf4f7..9fdf0f3 100644
--- a/web/vue-app/src/components/notification/NotificationList.vue
+++ b/web/vue-app/src/components/notification/NotificationList.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, onUnmounted } from 'vue'
 import { getCachedImageUrl } from '../../common/imageCache'
 import type { PendingReward, Event, ChildRewardRequestEventPayload } from '@/common/models'
 import { eventBus } from '@/common/eventBus'
+import '@/assets/list-shared.css'
 
 const emit = defineEmits(['item-clicked'])
 
@@ -70,19 +71,19 @@ function handleItemClick(item: PendingReward) {
 </script>
 
 <template>
-  <div>
+  <div class="centered-list-container">
     <div v-if="loading" class="loading">Loading notifications...</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else-if="notifications.length === 0" class="empty">No Notifications</div>
-    <div v-else class="notification-listbox">
+    <div v-else class="listbox">
       <div v-for="(item, idx) in notifications" :key="item.id">
-        <div class="notification-list-item" @click="handleItemClick(item)">
+        <div class="list-item notification-centered" @click="handleItemClick(item)">
           <div class="child-info">
             <img
               v-if="item.child_image_url"
               :src="item.child_image_url"
               alt="Child"
-              class="child-image"
+              class="list-image"
             />
             <span class="child-name">{{ item.child_name }}</span>
           </div>
@@ -93,61 +94,30 @@ function handleItemClick(item: PendingReward) {
               v-if="item.reward_image_url"
               :src="item.reward_image_url"
               alt="Reward"
-              class="reward-image"
+              class="list-image"
             />
           </div>
         </div>
-        <div v-if="idx < notifications.length - 1" class="notification-separator"></div>
+        <div v-if="idx < notifications.length - 1" class="list-separator"></div>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.notification-listbox {
-  flex: 1 1 auto;
-  width: auto;
-  max-width: 480px;
-  max-height: calc(100vh - 4.5rem);
-  overflow-y: auto;
-  margin: 0.2rem 0 0 0;
+.centered-list-container {
+  width: 100%;
   display: flex;
-  flex-direction: column;
-  gap: 0.7rem;
-  background: #fff5;
-  padding: 0.2rem 0.2rem 0.2rem;
-  border-radius: 12px;
+  justify-content: center;
 }
-.notification-list-item {
-  display: flex;
-  align-items: center;
-  border: 2px outset #ef4444;
-  border-radius: 8px;
-  padding: 0.2rem 1rem;
-  background: #f8fafc;
-  font-size: 1.05rem;
-  font-weight: 500;
-  transition: border 0.18s;
-  margin-bottom: 0.2rem;
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
-  box-sizing: border-box;
-  justify-content: space-between;
+.notification-centered {
+  justify-content: center;
 }
 .child-info {
   display: flex;
   align-items: center;
   gap: 0.7rem;
 }
-.child-image {
-  width: 36px;
-  height: 36px;
-  object-fit: cover;
-  border-radius: 8px;
-  background: #eee;
-  flex-shrink: 0;
-}
 .child-name {
   font-weight: 600;
   color: #667eea;
@@ -161,37 +131,6 @@ function handleItemClick(item: PendingReward) {
   font-weight: 600;
   color: #ef4444;
 }
-.reward-image {
-  width: 36px;
-  height: 36px;
-  object-fit: cover;
-  border-radius: 8px;
-  background: #eee;
-  flex-shrink: 0;
-}
-.loading,
-.error,
-.empty {
-  margin: 2rem 0;
-  font-size: 1.15rem;
-  font-weight: 600;
-  text-align: center;
-  color: #fdfdfd;
-  line-height: 1.5;
-}
-.error {
-  color: #ef4444; /* Red-500 for errors */
-  background: #fff1f2; /* Red-50 for error background */
-}
-.notification-list-item:last-child {
-  margin-bottom: 0;
-}
-.notification-separator {
-  height: 0px;
-  background: #0000;
-  margin: 0rem 0.2rem;
-  border-radius: 0px;
-}
 .requested-text {
   margin: 0 0.7rem;
   font-weight: 500;
diff --git a/web/vue-app/src/components/reward/ChildRewardList.vue b/web/vue-app/src/components/reward/ChildRewardList.vue
index 8df3fe8..5f6e480 100644
--- a/web/vue-app/src/components/reward/ChildRewardList.vue
+++ b/web/vue-app/src/components/reward/ChildRewardList.vue
@@ -167,7 +167,7 @@ const isAnyPending = computed(() => rewards.value.some((r) => r.redeeming))
           <img v-if="r.image_id" :src="r.image_id" alt="Reward Image" class="reward-image" />
           <div class="reward-points" :class="{ ready: r.points_needed === 0 }">
             <template v-if="r.points_needed === 0"> REWARD READY </template>
-            <template v-else> {{ r.points_needed }} pts needed </template>
+            <template v-else> {{ r.points_needed }} more points </template>
           </div>
           <!-- PENDING block if redeeming is true -->
           <div v-if="r.redeeming" class="pending-block">PENDING</div>
@@ -316,6 +316,13 @@ const isAnyPending = computed(() => rewards.value.some((r) => r.redeeming))
   font-size: 0.82rem;
   font-weight: 600;
   color: #ffd166;
+  font-size: 1rem;
+  font-weight: 900;
+  text-shadow:
+    -1px -1px 0 #1a3d1f,
+    1px -1px 0 #1a3d1f,
+    -1px 1px 0 #1a3d1f,
+    1px 1px 0 #1a3d1f;
 }
 
 .reward-points.ready {
diff --git a/web/vue-app/src/components/reward/RewardEditView.vue b/web/vue-app/src/components/reward/RewardEditView.vue
index 2bce50b..3b5ac48 100644
--- a/web/vue-app/src/components/reward/RewardEditView.vue
+++ b/web/vue-app/src/components/reward/RewardEditView.vue
@@ -26,8 +26,10 @@
       </div>
       <div v-if="error" class="error">{{ error }}</div>
       <div class="actions">
-        <button type="button" @click="handleCancel" :disabled="loading">Cancel</button>
-        <button type="submit" :disabled="loading">
+        <button type="button" @click="handleCancel" :disabled="loading" class="btn btn-secondary">
+          Cancel
+        </button>
+        <button type="submit" :disabled="loading" class="btn btn-primary">
           {{ isEdit ? 'Save' : 'Create' }}
         </button>
       </div>
@@ -39,6 +41,7 @@
 import { ref, onMounted, computed, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import ImagePicker from '../ImagePicker.vue'
+import '@/assets/edit-forms.css'
 
 const props = defineProps<{ id?: string }>()
 const route = useRoute()
@@ -158,87 +161,47 @@ const submit = async () => {
 </script>
 
 <style scoped>
-.reward-edit-view {
-  max-width: 400px;
-  width: 100%;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 24px #667eea22;
-  padding: 2rem 2.2rem 1.5rem 2.2rem;
-  margin: 0 auto;
+.good-bad-toggle {
   display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  box-sizing: border-box;
-}
-h2 {
-  text-align: center;
-  margin-bottom: 1.5rem;
-  color: #667eea;
-}
-.reward-form label {
-  display: block;
+  gap: 0.5rem;
   margin-bottom: 1.1rem;
-  font-weight: 500;
-  color: #444;
-  width: 100%;
+  justify-content: flex-start;
 }
-.reward-form input[type='text'],
-.reward-form input[type='number'] {
-  display: block;
-  width: 100%;
-  margin-top: 0.4rem;
-  padding: 0.5rem;
+
+button.toggle-btn {
+  flex: 1 1 0;
+  padding: 0.5rem 1.2rem;
+  border-width: 2px;
   border-radius: 7px;
-  border: 1px solid #cbd5e1;
-  font-size: 1rem;
-  background: #f8fafc;
-  box-sizing: border-box;
-}
-button[type='submit'] {
-  background: #667eea;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 0.6rem 1.4rem;
   font-weight: 600;
   font-size: 1rem;
   cursor: pointer;
-  transition: background 0.18s;
-}
-
-button[type='submit']:hover:not(:disabled) {
-  background: #5a67d8;
-}
-
-button[type='button'] {
   background: #f3f3f3;
-  color: #666;
-  border: none;
-  border-radius: 8px;
-  padding: 0.6rem 1.4rem;
-  font-weight: 600;
-  font-size: 1rem;
-  cursor: pointer;
+  color: #444;
+  transition:
+    background 0.18s,
+    color 0.18s,
+    border-style 0.18s;
+  outline: none;
+  border-style: outset; /* Default style */
+  border-color: #cbd5e1;
 }
-.form-group.image-picker-group {
-  width: 100%;
+
+button.toggle-btn.good-active {
+  background: #38c172;
+  color: #fff;
+  box-shadow: 0 2px 8px #38c17233;
+  transform: translateY(2px) scale(0.97);
+  border-style: ridge;
+  border-color: #38c172;
 }
-.actions {
-  margin-top: 1.2rem;
-  display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
-  width: 100%;
-}
-.error {
-  color: #e53e3e;
-  margin-bottom: 1rem;
-}
-.loading-message {
-  text-align: center;
-  color: #667eea;
-  font-size: 1.1rem;
-  margin: 2rem 0;
+
+button.toggle-btn.bad-active {
+  background: #e53e3e;
+  color: #fff;
+  box-shadow: 0 2px 8px #e53e3e33;
+  transform: translateY(2px) scale(0.97);
+  border-style: ridge;
+  border-color: #e53e3e;
 }
 </style>
diff --git a/web/vue-app/src/components/reward/RewardList.vue b/web/vue-app/src/components/reward/RewardList.vue
index e81b4a2..242ea27 100644
--- a/web/vue-app/src/components/reward/RewardList.vue
+++ b/web/vue-app/src/components/reward/RewardList.vue
@@ -2,6 +2,7 @@
 import { ref, watch, onMounted, computed } from 'vue'
 import { getCachedImageUrl } from '../../common/imageCache'
 import type { Reward } from '@/common/models'
+import '@/assets/list-shared.css'
 
 const props = defineProps<{
   childId?: string | number
@@ -132,27 +133,27 @@ const listHeight = computed(() => {
 </script>
 
 <template>
-  <div class="reward-listbox" :style="{ maxHeight: `min(${listHeight}, calc(100vh - 4.5rem))` }">
+  <div class="listbox" :style="{ maxHeight: `min(${listHeight}, calc(100vh - 4.5rem))` }">
     <div v-if="loading" class="loading">Loading rewards...</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else-if="rewards.length === 0" class="empty">No rewards found.</div>
     <div v-else>
       <div v-for="(reward, idx) in rewards" :key="reward.id">
-        <div class="reward-list-item" @click="handleEdit(reward.id)">
-          <img v-if="reward.image_url" :src="reward.image_url" alt="Reward" class="reward-image" />
-          <span class="reward-name">{{ reward.name }}</span>
-          <span class="reward-cost"> {{ reward.cost }} pts </span>
+        <div class="list-item" @click="handleEdit(reward.id)">
+          <img v-if="reward.image_url" :src="reward.image_url" alt="Reward" class="list-image" />
+          <span class="list-name">{{ reward.name }}</span>
+          <span class="list-cost"> {{ reward.cost }} pts </span>
           <input
             v-if="props.selectable"
             type="checkbox"
-            class="reward-checkbox"
+            class="list-checkbox"
             v-model="selectedRewards"
             :value="reward.id"
             @click.stop
           />
           <button
             v-if="props.deletable"
-            class="delete-btn"
+            class="btn btn-danger"
             @click.stop="handleDelete(reward.id)"
             aria-label="Delete reward"
             type="button"
@@ -168,109 +169,10 @@ const listHeight = computed(() => {
             </svg>
           </button>
         </div>
-        <div v-if="idx < rewards.length - 1" class="reward-separator"></div>
+        <div v-if="idx < rewards.length - 1" class="list-separator"></div>
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
-.reward-listbox {
-  flex: 1 1 auto;
-  width: 100%;
-  max-width: 480px;
-  /* Subtract any header/nav height if needed, e.g. 4.5rem */
-  max-height: calc(100vh - 4.5rem);
-  overflow-y: auto;
-  margin: 0.2rem 0 0 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.7rem;
-  background: #fff5;
-  padding: 0.2rem 0.2rem 0.2rem;
-  border-radius: 12px;
-}
-.reward-list-item {
-  display: flex;
-  align-items: center;
-  border: 2px outset #38c172;
-  border-radius: 8px;
-  padding: 0.2rem 1rem;
-  background: #f8fafc;
-  font-size: 1.05rem;
-  font-weight: 500;
-  transition: border 0.18s;
-  margin-bottom: 0.2rem;
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
-  box-sizing: border-box;
-}
-.reward-image {
-  width: 36px;
-  height: 36px;
-  object-fit: cover;
-  border-radius: 8px;
-  margin-right: 0.7rem;
-  background: #eee;
-  flex-shrink: 0;
-}
-.reward-name {
-  flex: 1;
-  text-align: left;
-}
-.reward-cost {
-  min-width: 60px;
-  text-align: right;
-  font-weight: 600;
-}
-.loading,
-.error,
-.empty {
-  margin: 1.2rem 0;
-  color: #888;
-}
-.error {
-  color: #e53e3e;
-}
-.reward-list-item:last-child {
-  margin-bottom: 0;
-}
-.reward-separator {
-  height: 0px;
-  background: #0000;
-  margin: 0rem 0.2rem;
-  border-radius: 0px;
-}
-.delete-btn {
-  background: transparent;
-  border: none;
-  border-radius: 50%;
-  padding: 0.15rem;
-  margin-left: 0.7rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  transition:
-    background 0.15s,
-    box-shadow 0.15s;
-  width: 2rem;
-  height: 2rem;
-  opacity: 0.92;
-}
-.delete-btn:hover {
-  background: #ffeaea;
-  box-shadow: 0 0 0 2px #ef444422;
-  opacity: 1;
-}
-.delete-btn svg {
-  display: block;
-}
-.reward-checkbox {
-  margin-left: 1rem;
-  width: 1.2em;
-  height: 1.2em;
-  accent-color: #667eea;
-  cursor: pointer;
-}
-</style>
+<style scoped></style>
diff --git a/web/vue-app/src/components/reward/RewardView.vue b/web/vue-app/src/components/reward/RewardView.vue
index a28dfdd..062f29d 100644
--- a/web/vue-app/src/components/reward/RewardView.vue
+++ b/web/vue-app/src/components/reward/RewardView.vue
@@ -29,8 +29,8 @@
       <div class="modal">
         <p>Are you sure you want to delete this reward?</p>
         <div class="actions">
-          <button @click="deleteReward">Yes, Delete</button>
-          <button @click="showConfirm = false">Cancel</button>
+          <button @click="deleteReward" class="btn btn-danger">Delete</button>
+          <button @click="showConfirm = false" class="btn btn-secondary">Cancel</button>
         </div>
       </div>
     </div>
@@ -106,17 +106,20 @@ const createReward = () => {
   text-align: center;
 }
 .actions {
-  margin-top: 1.2rem;
   display: flex;
-  gap: 1rem;
+  gap: 3rem; /* Increased gap for more space between buttons */
   justify-content: center;
+  margin-top: 0.5rem;
 }
 .actions button {
-  padding: 0.5rem 1.2rem;
-  border-radius: 8px;
-  border: none;
-  font-weight: 600;
+  padding: 1rem 2.2rem; /* Bigger touch area */
+  border-radius: 12px;
+  border: 0;
   cursor: pointer;
+  font-weight: 700;
+  font-size: 1.25rem; /* Larger text */
+  transition: background 0.18s;
+  min-width: 120px; /* Ensures buttons are wide enough */
 }
 .actions button:first-child {
   background: #ef4444;
diff --git a/web/vue-app/src/components/task/ChildTaskList.vue b/web/vue-app/src/components/task/ChildTaskList.vue
index b330b04..27c17c2 100644
--- a/web/vue-app/src/components/task/ChildTaskList.vue
+++ b/web/vue-app/src/components/task/ChildTaskList.vue
@@ -160,7 +160,7 @@ onBeforeUnmount(() => {
             class="task-points"
             :class="{ 'good-points': task.is_good, 'bad-points': !task.is_good }"
           >
-            {{ task.is_good ? task.points : -task.points }} pts
+            {{ task.is_good ? task.points : -task.points }} Points
           </div>
         </div>
       </div>
@@ -233,10 +233,6 @@ onBeforeUnmount(() => {
   padding: 0.5rem 0;
 }
 
-/* Fallback for browsers that don't support flex gap */
-.task-card + .task-card {
-  margin-left: 0.75rem;
-}
 .task-card {
   background: rgba(255, 255, 255, 0.15);
   border-radius: 8px;
@@ -301,8 +297,13 @@ onBeforeUnmount(() => {
 }
 
 .task-points {
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 1rem;
+  font-weight: 900;
+  text-shadow:
+    -1px -1px 0 #1a3d1f,
+    1px -1px 0 #1a3d1f,
+    -1px 1px 0 #1a3d1f,
+    1px 1px 0 #1a3d1f;
 }
 
 .task-points.good-points {
diff --git a/web/vue-app/src/components/task/TaskEditView.vue b/web/vue-app/src/components/task/TaskEditView.vue
index 2c1d977..b0ea13f 100644
--- a/web/vue-app/src/components/task/TaskEditView.vue
+++ b/web/vue-app/src/components/task/TaskEditView.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, computed, defineEmits, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import ImagePicker from '@/components/ImagePicker.vue'
+import '@/assets/edit-forms.css'
 
 const route = useRoute()
 const router = useRouter()
@@ -175,8 +176,10 @@ function onAddImage({ id, file }: { id: string; file: File }) {
       </div>
       <div v-if="error" class="error">{{ error }}</div>
       <div class="actions">
-        <button type="button" @click="handleCancel" :disabled="loading">Cancel</button>
-        <button type="submit" :disabled="loading">
+        <button type="button" @click="handleCancel" :disabled="loading" class="btn btn-secondary">
+          Cancel
+        </button>
+        <button type="submit" :disabled="loading" class="btn btn-primary">
           {{ isEdit ? 'Save' : 'Create' }}
         </button>
       </div>
@@ -185,77 +188,6 @@ function onAddImage({ id, file }: { id: string; file: File }) {
 </template>
 
 <style scoped>
-.task-edit-view {
-  max-width: 400px;
-  width: 100%;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 24px #667eea22;
-  padding: 2rem 2.2rem 1.5rem 2.2rem;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  box-sizing: border-box;
-}
-
-.task-form {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-h2 {
-  text-align: center;
-  margin-bottom: 1.5rem;
-  color: #667eea;
-}
-.task-form label {
-  display: block;
-  margin-bottom: 1.1rem;
-  font-weight: 500;
-  color: #444;
-  width: 100%;
-}
-
-.task-form input[type='text'],
-.task-form input[type='number'] {
-  display: block;
-  width: 100%;
-  margin-top: 0.4rem;
-  padding: 0.5rem;
-  border-radius: 7px;
-  border: 1px solid #cbd5e1;
-  font-size: 1rem;
-  background: #f8fafc;
-  box-sizing: border-box;
-}
-button[type='submit'] {
-  background: #667eea;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 0.6rem 1.4rem;
-  font-weight: 600;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: background 0.18s;
-}
-button[type='submit']:hover:not(:disabled) {
-  background: #5a67d8;
-}
-
-button[type='button'] {
-  background: #f3f3f3;
-  color: #666;
-  border: none;
-  border-radius: 8px;
-  padding: 0.6rem 1.4rem;
-  font-weight: 600;
-  font-size: 1rem;
-  cursor: pointer;
-}
-
 .good-bad-toggle {
   display: flex;
   gap: 0.5rem;
@@ -299,21 +231,4 @@ button.toggle-btn.bad-active {
   border-style: ridge;
   border-color: #e53e3e;
 }
-.actions {
-  margin-top: 1.2rem;
-  display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
-}
-
-.error {
-  color: #e53e3e;
-  margin-top: 0.7rem;
-  text-align: center;
-}
-.loading-message {
-  text-align: center;
-  color: #666;
-  margin-bottom: 1.2rem;
-}
 </style>
diff --git a/web/vue-app/src/components/task/TaskList.vue b/web/vue-app/src/components/task/TaskList.vue
index a5a45f6..b315ff0 100644
--- a/web/vue-app/src/components/task/TaskList.vue
+++ b/web/vue-app/src/components/task/TaskList.vue
@@ -2,6 +2,7 @@
 import { ref, watch, onMounted, computed } from 'vue'
 import { getCachedImageUrl } from '../../common/imageCache'
 import type { Task } from '@/common/models'
+import '@/assets/list-shared.css'
 
 const props = defineProps<{
   childId?: string | number
@@ -143,37 +144,37 @@ const filteredTasks = computed(() => {
 </script>
 
 <template>
-  <div class="task-listbox" :style="{ maxHeight: `min(${listHeight}, calc(100vh - 4.5rem))` }">
+  <div class="listbox" :style="{ maxHeight: `min(${listHeight}, calc(100vh - 4.5rem))` }">
     <div v-if="loading" class="loading">Loading tasks...</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else-if="tasks.length === 0" class="empty">No tasks found.</div>
     <div v-else>
       <div v-for="(task, idx) in filteredTasks" :key="task.id">
         <div
-          class="task-list-item"
+          class="list-item"
           :class="{ good: task.is_good, bad: !task.is_good }"
           @click="handleEdit(task.id)"
         >
-          <img v-if="task.image_url" :src="task.image_url" alt="Task" class="task-image" />
-          <span class="task-name">{{ task.name }}</span>
-          <span class="task-points">
+          <img v-if="task.image_url" :src="task.image_url" alt="Task" class="list-image" />
+          <span class="list-name">{{ task.name }}</span>
+          <span class="list-points">
             {{ task.is_good ? task.points : '-' + task.points }} pts
           </span>
           <!-- Add checkbox if selectable -->
           <input
             v-if="props.selectable"
             type="checkbox"
-            class="task-checkbox"
+            class="list-checkbox"
             v-model="selectedTasks"
             :value="task.id"
             @click.stop
           />
           <button
             v-if="props.deletable"
-            class="delete-btn"
             @click.stop="handleDelete(task.id)"
             aria-label="Delete task"
             type="button"
+            class="btn btn-danger"
           >
             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
               <circle cx="10" cy="10" r="9" fill="#fff" stroke="#ef4444" stroke-width="2" />
@@ -186,117 +187,10 @@ const filteredTasks = computed(() => {
             </svg>
           </button>
         </div>
-        <div v-if="idx < tasks.length - 1" class="task-separator"></div>
+        <div v-if="idx < tasks.length - 1" class="list-separator"></div>
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
-.task-listbox {
-  flex: 1 1 auto;
-  max-width: 480px;
-  width: 100%;
-  /* Subtract any header/nav height if needed, e.g. 4.5rem */
-  max-height: calc(100vh - 4.5rem);
-  overflow-y: auto;
-  margin: 0.2rem 0 0 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.7rem;
-  background: #fff5;
-  padding: 0.2rem 0.2rem 0.2rem;
-  border-radius: 12px;
-}
-.task-list-item {
-  display: flex;
-  align-items: center;
-  border: 2px outset #38c172;
-  border-radius: 8px;
-  padding: 0.2rem 1rem;
-  background: #f8fafc;
-  font-size: 1.05rem;
-  font-weight: 500;
-  transition: border 0.18s;
-  margin-bottom: 0.2rem;
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
-  box-sizing: border-box;
-}
-.task-list-item.bad {
-  border-color: #e53e3e;
-  background: #fff5f5;
-}
-.task-list-item.good {
-  border-color: #38c172;
-  background: #f0fff4;
-}
-.task-image {
-  width: 36px;
-  height: 36px;
-  object-fit: cover;
-  border-radius: 8px;
-  margin-right: 0.7rem;
-  background: #eee;
-  flex-shrink: 0;
-}
-.task-name {
-  flex: 1;
-  text-align: left;
-}
-.task-points {
-  min-width: 60px;
-  text-align: right;
-  font-weight: 600;
-}
-.loading,
-.error,
-.empty {
-  margin: 1.2rem 0;
-  color: #888;
-}
-.error {
-  color: #e53e3e;
-}
-.task-list-item:last-child {
-  margin-bottom: 0;
-}
-.task-separator {
-  height: 0px;
-  background: #0000;
-  margin: 0rem 0.2rem;
-  border-radius: 0px;
-}
-.delete-btn {
-  background: transparent;
-  border: none;
-  border-radius: 50%;
-  padding: 0.15rem;
-  margin-left: 0.7rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  transition:
-    background 0.15s,
-    box-shadow 0.15s;
-  width: 2rem;
-  height: 2rem;
-  opacity: 0.92;
-}
-.delete-btn:hover {
-  background: #ffeaea;
-  box-shadow: 0 0 0 2px #ef444422;
-  opacity: 1;
-}
-.delete-btn svg {
-  display: block;
-}
-.task-checkbox {
-  margin-left: 1rem;
-  width: 1.2em;
-  height: 1.2em;
-  accent-color: #667eea;
-  cursor: pointer;
-}
-</style>
+<style scoped></style>
diff --git a/web/vue-app/src/components/task/TaskView.vue b/web/vue-app/src/components/task/TaskView.vue
index c9bf564..90ee959 100644
--- a/web/vue-app/src/components/task/TaskView.vue
+++ b/web/vue-app/src/components/task/TaskView.vue
@@ -28,8 +28,8 @@
       <div class="modal">
         <p>Are you sure you want to delete this task?</p>
         <div class="actions">
-          <button @click="deleteTask">Yes, Delete</button>
-          <button @click="showConfirm = false">Cancel</button>
+          <button @click="deleteTask" class="btn btn-danger">Delete</button>
+          <button @click="showConfirm = false" class="btn btn-secondary">Cancel</button>
         </div>
       </div>
     </div>
@@ -108,17 +108,20 @@ const createTask = () => {
   text-align: center;
 }
 .actions {
-  margin-top: 1.2rem;
   display: flex;
-  gap: 1rem;
+  gap: 3rem; /* Increased gap for more space between buttons */
   justify-content: center;
+  margin-top: 0.5rem;
 }
 .actions button {
-  padding: 0.5rem 1.2rem;
-  border-radius: 8px;
-  border: none;
-  font-weight: 600;
+  padding: 1rem 2.2rem; /* Bigger touch area */
+  border-radius: 12px;
+  border: 0;
   cursor: pointer;
+  font-weight: 700;
+  font-size: 1.25rem; /* Larger text */
+  transition: background 0.18s;
+  min-width: 120px; /* Ensures buttons are wide enough */
 }
 .actions button:first-child {
   background: #ef4444;
diff --git a/web/vue-app/src/layout/ChildLayout.vue b/web/vue-app/src/layout/ChildLayout.vue
index ec801ec..752600a 100644
--- a/web/vue-app/src/layout/ChildLayout.vue
+++ b/web/vue-app/src/layout/ChildLayout.vue
@@ -5,7 +5,7 @@
         <button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
       </div>
       <div class="spacer"></div>
-      <div class="login-btn">
+      <div class="login-btn-container">
         <LoginButton />
       </div>
     </header>
@@ -35,28 +35,9 @@ const showBack = computed(() => route.path !== '/child')
 </script>
 
 <style scoped>
-.layout-root {
-  width: 100%;
-  min-height: 100vh;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
+/* Only keep styles unique to ChildLayout */
 
-.topbar {
-  display: flex;
-  align-items: stretch;
-  padding: 5px 5px;
-  height: 48px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.topbar > .back-btn-container,
-.topbar > .spacer,
-.topbar > .login-btn {
+.topbar > .spacer {
   height: 100%;
   display: flex;
   align-items: center;
@@ -65,54 +46,4 @@ const showBack = computed(() => route.path !== '/child')
 .spacer {
   flex: 1 1 auto;
 }
-
-.back-btn {
-  background: white;
-  border: 0;
-  padding: 0.6rem 1rem;
-  border-radius: 8px 8px 0 0;
-  cursor: pointer;
-  color: #667eea;
-  font-weight: 600;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-}
-
-.login-btn {
-  align-self: start;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-@media (max-width: 480px) {
-  .back-btn {
-    padding: 0.45rem 0.75rem;
-    font-size: 0.6rem;
-  }
-}
-</style>
-
-<style>
-.login-btn button {
-  background: white;
-  border: 0;
-  padding: 0.6rem 1rem;
-  border-radius: 8px 8px 0 0;
-  cursor: pointer;
-  color: #667eea;
-  font-weight: 600;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-@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 2019a0a..894321e 100644
--- a/web/vue-app/src/layout/ParentLayout.vue
+++ b/web/vue-app/src/layout/ParentLayout.vue
@@ -150,7 +150,7 @@ onMounted(async () => {
           </svg>
         </button>
       </nav>
-      <LoginButton class="login-btn" />
+      <LoginButton class="login-btn-container" />
     </header>
 
     <main class="main-content">
@@ -162,35 +162,8 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.layout-root {
-  width: 100%;
-  min-height: 100vh;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  background: var(--header-bg);
-}
+/* Only keep styles unique to ParentLayout */
 
-/* top bar holds title and logout button */
-.topbar {
-  display: flex;
-  align-items: stretch;
-  padding: 5px 5px;
-  height: 48px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.back-btn-container {
-  height: 100%;
-  display: flex;
-  align-items: stretch;
-  flex: 1 1 0;
-  justify-content: flex-start;
-}
-
-/* View Selector styles */
 .view-selector {
   height: 100%;
   display: flex;
@@ -230,58 +203,7 @@ onMounted(async () => {
   background: var(--button-hover-bg);
 }
 
-/* main content remains centered */
-.main-content {
-  flex: 1 1 auto;
-  width: 100%;
-  justify-content: center;
-  align-items: flex-start;
-  box-sizing: border-box;
-  min-height: 0;
-  height: 0; /* Ensures children can use 100% height */
-  overflow: hidden; /* Prevents parent from scrolling */
-  overflow-y: visible;
-}
-
-/* back button specific styles */
-.back-btn {
-  background: var(--button-bg);
-  border: 0;
-  padding: 0.6rem 1rem;
-  border-radius: 8px 8px 0 0;
-  cursor: pointer;
-  color: var(--button-text);
-  font-weight: 600;
-  height: 100%; /* Make the button fill its parent */
-  box-sizing: border-box;
-  display: flex;
-  align-items: center; /* Center the text/icon vertically */
-}
-
-.login-btn {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  flex: 1 1 0;
-  justify-content: flex-end;
-}
-
-.app-version {
-  position: fixed;
-  right: 18px;
-  bottom: 12px;
-  font-size: 0.92rem;
-  color: var(--app-version);
-  opacity: 0.85;
-  z-index: 100;
-  pointer-events: none;
-  user-select: none;
-  font-family: monospace;
-}
-
 @media (max-width: 480px) {
-  .back-btn,
-  .login-btn button,
   .view-selector button {
     padding: 0.45rem 0.75rem;
     font-size: 0.85rem;
diff --git a/web/vue-app/src/main.ts b/web/vue-app/src/main.ts
index c8e37b0..98229ad 100644
--- a/web/vue-app/src/main.ts
+++ b/web/vue-app/src/main.ts
@@ -1,6 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import '@/assets/actions-shared.css'
+import '@/assets/layout-shared.css'
+import '@/assets/button-shared.css'
 
 const app = createApp(App)