diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
new file mode 100644
index 0000000..e69de29
diff --git a/app/components/AppNav.vue b/app/components/AppNav.vue
new file mode 100644
index 0000000..e69de29
diff --git a/app/components/StatsBar.vue b/app/components/StatsBar.vue
new file mode 100644
index 0000000..e69de29
diff --git a/app/composables/useAdmin.ts b/app/composables/useAdmin.ts
new file mode 100644
index 0000000..93c158c
--- /dev/null
+++ b/app/composables/useAdmin.ts
@@ -0,0 +1,103 @@
+// composables/useAdmin.ts
+export const useAdmin = () => {
+  const formTitle = useState('formTitle', () => '')
+  const editingFormId = useState<number | null>('editingFormId', () => null)
+  const questions = useState<any[]>('questions', () => [])
+
+  const publishedForms = useState('publishedForms', () => [
+    {
+      id: 1,
+      week: 4,
+      title: 'Kindness & Compassion',
+      date: 'Feb 12, 2024',
+      status: 'Active',
+      questions: [
+        { id: 101, type: 'context', text: 'Read the story of the Bell of Atri.', textEs: 'Lee la historia de la Campana de Atri.', reference: 'A story about justice and kindness to animals.', referenceEs: 'Una historia sobre la justicia y la bondad con los animales.' },
+        { id: 102, type: 'video', text: 'Watch this video on empathy', textEs: 'Mira este video sobre la empatía', url: 'https://www.youtube.com/embed/1Evwgu369Jw' },
+        { id: 103, type: 'text', text: 'What did the horse do in the story?', textEs: '¿Qué hizo el caballo en la historia?', reference: 'He rang the bell to ask for justice.', referenceEs: 'Tocó la campana para pedir justicia.' },
+        { id: 104, type: 'math', text: 'If there are 5 bells and 3 horses, how many items in total?', textEs: 'Si hay 5 campanas y 3 caballos, ¿cuántos artículos en total?', reference: '8' }
+      ]
+    }
+  ])
+
+  const students = useState('students', () => [
+    { id: 1, name: 'Aiden Smith', initials: 'AS', books: 12, streak: 4, lastActive: '2 hours ago' },
+    { id: 2, name: 'Nevin Kumar', initials: 'NK', books: 14, streak: 5, lastActive: 'Just now' },
+    { id: 3, name: 'Swarna Jay', initials: 'SJ', books: 8, streak: 2, lastActive: 'Yesterday' }
+  ])
+
+  const raffleWinner = useState<any>('raffleWinner', () => null)
+  const isSpinning = useState('isSpinning', () => false)
+
+  const addQuestion = (type: string) => {
+    const q: any = {
+      id: Date.now(),
+      type,
+      text: '',
+      textEs: '',
+      reference: '',
+      referenceEs: '',
+      url: ''
+    }
+    if (type === 'mcq') {
+      q.choices = [
+        { text: '', correct: true },
+        { text: '', correct: false },
+        { text: '', correct: false },
+        { text: '', correct: false }
+      ]
+    }
+    questions.value.push(q)
+  }
+
+  const publishForm = () => {
+    if (!formTitle.value) return alert('Please enter a title!')
+    const editingId = editingFormId.value
+    if (editingId) {
+      const idx = publishedForms.value.findIndex((f: any) => f.id === editingId)
+      if (idx !== -1) {
+        publishedForms.value[idx].title = formTitle.value
+        publishedForms.value[idx].questions = [...questions.value]
+      }
+      editingFormId.value = null
+    } else {
+      publishedForms.value.push({
+        id: Date.now(),
+        week: publishedForms.value.length + 1,
+        title: formTitle.value,
+        date: new Date().toLocaleDateString(),
+        status: 'Active',
+        questions: [...questions.value]
+      })
+    }
+    formTitle.value = ''
+    questions.value = []
+    alert(editingId ? 'Form Updated! ✅' : 'Form Published! 🚀')
+  }
+
+  const editPublishedForm = (form: any) => {
+    formTitle.value = form.title
+    questions.value = JSON.parse(JSON.stringify(form.questions))
+    editingFormId.value = form.id
+    navigateTo('/admin/builder')
+  }
+
+  const toggleFormPublish = (form: any) => {
+    form.status = form.status === 'Active' ? 'Unpublished' : 'Active'
+  }
+
+  const spinRaffle = () => {
+    isSpinning.value = true
+    raffleWinner.value = null
+    setTimeout(() => {
+      isSpinning.value = false
+      raffleWinner.value = students.value[Math.floor(Math.random() * students.value.length)]
+    }, 2000)
+  }
+
+  return {
+    formTitle, editingFormId, questions, publishedForms,
+    students, raffleWinner, isSpinning,
+    addQuestion, publishForm, editPublishedForm, toggleFormPublish, spinRaffle
+  }
+}
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
index ea8702f..159ecd1 100644
--- a/app/middleware/auth.global.ts
+++ b/app/middleware/auth.global.ts
@@ -1,15 +1,19 @@
-import { authClient } from '../utils/auth-client'
+// import { authClient } from '../utils/auth-client'
 
-export default defineNuxtRouteMiddleware(async (to) => {
-  const { data: session } = await authClient.useSession(useFetch)
-
-  if (session.value) {
-    if (to.path === '/auth') {
-      return navigateTo('/')
-    }
-  } else {
-    if (to.path !== '/auth') {
-      return navigateTo('/auth')
-    }
-  }
+export default defineNuxtRouteMiddleware(() => {
+  // auth disabled for now
 })
+
+// export default defineNuxtRouteMiddleware(async (to) => {
+//   const { data: session } = await authClient.useSession(useFetch)
+
+//   if (session.value) {
+//     if (to.path === '/auth') {
+//       return navigateTo('/')
+//     }
+//   } else {
+//     if (to.path !== '/auth') {
+//       return navigateTo('/')
+//     }
+//   }
+// })
diff --git a/app/pages/admin/builder.vue b/app/pages/admin/builder.vue
new file mode 100644
index 0000000..84fc979
--- /dev/null
+++ b/app/pages/admin/builder.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+
+const { formTitle, editingFormId, questions, publishedForms, addQuestion, publishForm, editPublishedForm, toggleFormPublish } = useAdmin()
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto space-y-8">
+
+    <!-- Header -->
+    <div class="flex justify-between items-center">
+      <div>
+        <h2 class="text-4xl font-bold text-gray-900">Daily Form Builder</h2>
+        <p class="text-gray-500 mt-1">Create custom curriculum for your students.</p>
+      </div>
+      <div class="flex gap-2">
+        <button
+          v-if="editingFormId"
+          @click="editingFormId = null; formTitle = ''; questions = []"
+          class="px-6 py-3 rounded-xl font-bold border-2 border-gray-200 text-gray-500 hover:bg-gray-50 transition"
+        >
+          Cancel
+        </button>
+        <button
+          @click="publishForm"
+          class="bg-purple-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-purple-700 shadow-lg transition active:scale-95"
+        >
+          {{ editingFormId ? '✅ Update Form' : '🚀 Publish Week' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Title Input -->
+    <div class="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm">
+      <label class="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2">Form Title</label>
+      <input
+        v-model="formTitle"
+        type="text"
+        placeholder="e.g. Week 4: Kindness & Math"
+        class="w-full text-2xl font-bold text-gray-800 border-b-2 border-gray-100 focus:border-purple-400 focus:outline-none transition py-2"
+      />
+    </div>
+
+    <!-- Add Question Buttons -->
+    <div class="flex gap-3 flex-wrap">
+      <button @click="addQuestion('text')"    class="flex-1 bg-blue-50 text-blue-600 font-bold py-4 rounded-2xl hover:bg-blue-100 transition border border-dashed border-blue-200 min-w-[130px]">+ Discussion</button>
+      <button @click="addQuestion('mcq')"     class="flex-1 bg-emerald-50 text-emerald-600 font-bold py-4 rounded-2xl hover:bg-emerald-100 transition border border-dashed border-emerald-200 min-w-[130px]">+ Multiple Choice</button>
+      <button @click="addQuestion('video')"   class="flex-1 bg-red-50 text-red-600 font-bold py-4 rounded-2xl hover:bg-red-100 transition border border-dashed border-red-200 min-w-[130px]">+ Video Embed</button>
+      <button @click="addQuestion('context')" class="flex-1 bg-gray-50 text-gray-600 font-bold py-4 rounded-2xl hover:bg-gray-100 transition border border-dashed border-gray-200 min-w-[130px]">+ Context Block</button>
+    </div>
+
+    <!-- Questions List -->
+    <div class="space-y-4">
+      <div
+        v-if="questions.length === 0"
+        class="text-center py-12 text-gray-400 border-4 border-dashed border-gray-100 rounded-3xl"
+      >
+        No questions yet. Add one above!
+      </div>
+
+      <div
+        v-for="(q, index) in questions"
+        :key="q.id"
+        class="bg-white border-2 border-gray-100 rounded-2xl p-6 relative hover:border-purple-100 transition shadow-sm"
+      >
+        <button @click="questions.splice(index, 1)" class="absolute top-4 right-4 text-gray-300 hover:text-red-500 transition text-lg">✕</button>
+
+        <!-- Type badge -->
+        <span class="text-xs font-black uppercase tracking-widest px-3 py-1 rounded-full mb-4 inline-block"
+          :class="{
+            'bg-blue-100 text-blue-700': q.type === 'text',
+            'bg-emerald-100 text-emerald-700': q.type === 'mcq',
+            'bg-red-100 text-red-700': q.type === 'video',
+            'bg-gray-100 text-gray-700': q.type === 'context'
+          }">
+          {{ q.type === 'text' ? '🗣️ Discussion' : q.type === 'mcq' ? '📋 Multiple Choice' : q.type === 'video' ? '📺 Video' : '📄 Context' }}
+        </span>
+
+        <!-- Text  / MCQ fields -->
+        <div v-if="['text', 'mcq'].includes(q.type)" class="space-y-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label class="block text-xs font-bold text-gray-400 uppercase mb-1">Question (English)</label>
+              <input v-model="q.text" type="text" placeholder="Enter question in English..."
+                class="w-full font-bold text-gray-800 border-2 border-gray-50 bg-gray-50 rounded-xl px-4 py-3 focus:bg-white focus:border-purple-200 focus:outline-none transition" />
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-gray-400 uppercase mb-1">Question (Spanish)</label>
+              <input v-model="q.textEs" type="text" placeholder="Ingrese pregunta en Español..."
+                class="w-full font-bold text-gray-800 border-2 border-gray-50 bg-gray-50 rounded-xl px-4 py-3 focus:bg-white focus:border-purple-200 focus:outline-none transition" />
+            </div>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label class="block text-xs font-bold text-gray-400 uppercase mb-1">Reference (English)</label>
+              <textarea v-model="q.reference" rows="2" placeholder="Correct answer..."
+                class="w-full text-sm text-gray-600 border-2 border-gray-50 bg-gray-50 rounded-xl px-4 py-3 focus:bg-white focus:border-purple-200 focus:outline-none transition" />
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-gray-400 uppercase mb-1">Reference (Spanish)</label>
+              <textarea v-model="q.referenceEs" rows="2" placeholder="Respuesta correcta..."
+                class="w-full text-sm text-gray-600 border-2 border-gray-50 bg-gray-50 rounded-xl px-4 py-3 focus:bg-white focus:border-purple-200 focus:outline-none transition" />
+            </div>
+          </div>
+        </div>
+
+        <!-- MCQ Choices -->
+        <div v-if="q.type === 'mcq'" class="mt-4 space-y-3">
+          <label class="block text-xs font-bold text-gray-400 uppercase mb-1">Answer Choices</label>
+          <div v-for="(choice, ci) in q.choices" :key="ci" class="flex items-center gap-3">
+            <span class="w-8 h-8 rounded-full flex items-center justify-center font-black text-sm"
+              :class="choice.correct ? 'bg-emerald-500 text-white' : 'bg-gray-100 text-gray-500'">
+              {{ String.fromCharCode(65 + ci) }}
+            </span>
+            <input v-model="choice.text" type="text" :placeholder="'Choice ' + String.fromCharCode(65 + ci) + '...'"
+              class="flex-grow font-bold text-gray-800 border-2 border-gray-50 bg-gray-50 rounded-xl px-4 py-3 focus:bg-white focus:border-purple-200 focus:outline-none transition" />
+            <button
+              @click="q.choices.forEach((c: any) => c.correct = false); choice.correct = true"
+              :class="['px-3 py-2 rounded-lg font-bold text-xs transition', choice.correct ? 'bg-emerald-500 text-white' : 'bg-gray-100 text-gray-400 hover:bg-emerald-100 hover:text-emerald-600']">
+              {{ choice.correct ? '✓ Correct' : 'Set Correct' }}
+            </button>
+            <button @click="q.choices.splice(ci, 1)" class="text-gray-300 hover:text-red-500 transition text-lg">✕</button>
+          </div>
+          <button @click="q.choices.push({ text: '', correct: false })"
+            class="w-full py-3 border-2 border-dashed border-emerald-200 text-emerald-500 font-bold rounded-xl hover:bg-emerald-50 transition">
+            + Add Choice
+          </button>
+        </div>
+
+        <!-- Video URL -->
+        <div v-if="q.type === 'video'">
+          <label class="block text-xs font-bold text-gray-400 uppercase mb-1">YouTube URL</label>
+          <input v-model="q.url" type="text" placeholder="https://youtu.be/..."
+            class="w-full font-bold text-gray-800 border-2 border-gray-50 bg-gray-50 rounded-xl px-4 py-3 focus:bg-white focus:border-purple-200 focus:outline-none transition" />
+        </div>
+
+        <!-- Context Block -->
+        <div v-if="q.type === 'context'" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-xs font-bold text-gray-400 uppercase mb-1">Context (English)</label>
+            <textarea v-model="q.text" rows="3" placeholder="Read this paragraph first..."
+              class="w-full text-gray-800 border-2 border-gray-50 bg-gray-50 rounded-xl px-4 py-3 focus:bg-white focus:border-purple-200 focus:outline-none transition" />
+          </div>
+          <div>
+            <label class="block text-xs font-bold text-gray-400 uppercase mb-1">Context (Spanish)</label>
+            <textarea v-model="q.textEs" rows="3" placeholder="Lea este párrafo primero..."
+              class="w-full text-gray-800 border-2 border-gray-50 bg-gray-50 rounded-xl px-4 py-3 focus:bg-white focus:border-purple-200 focus:outline-none transition" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Published Forms -->
+    <div class="mt-12">
+      <h3 class="text-2xl font-bold text-gray-900 mb-4">Published Curriculums</h3>
+      <div class="space-y-3">
+        <div
+          v-for="form in publishedForms"
+          :key="form.id"
+          class="bg-white p-6 rounded-2xl border border-gray-200 flex justify-between items-center hover:border-purple-200 transition"
+          :class="{ 'opacity-60': form.status === 'Unpublished' }"
+        >
+          <div>
+            <h4 class="font-bold text-lg text-gray-800">{{ form.title }}</h4>
+            <p class="text-sm text-gray-400">Published: {{ form.date }} · {{ form.questions.length }} questions</p>
+          </div>
+          <div class="flex gap-2 items-center">
+            <span class="text-sm font-bold px-3 py-1 rounded-full"
+              :class="form.status === 'Active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'">
+              {{ form.status }}
+            </span>
+            <button @click="editPublishedForm(form)"
+              class="text-sm font-bold px-4 py-2 rounded-xl bg-blue-50 text-blue-600 hover:bg-blue-100 transition">
+              ✏️ Edit
+            </button>
+            <button @click="toggleFormPublish(form)"
+              :class="['text-sm font-bold px-4 py-2 rounded-xl transition', form.status === 'Active' ? 'bg-red-50 text-red-600 hover:bg-red-100' : 'bg-green-50 text-green-600 hover:bg-green-100']">
+              {{ form.status === 'Active' ? '⏸ Unpublish' : '▶ Republish' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/admin/index.vue b/app/pages/admin/index.vue
new file mode 100644
index 0000000..c29394f
--- /dev/null
+++ b/app/pages/admin/index.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 flex">
+
+    <!-- Sidebar -->
+    <aside class="w-64 bg-white border-r border-gray-200 flex flex-col pt-6 min-h-screen fixed left-0 top-0">
+      <!-- Logo -->
+      <div class="px-6 mb-8 flex items-center gap-3">
+        <div class="w-10 h-10 bg-[#E0604D] rounded-xl flex items-center justify-center text-white font-bold text-xl">L</div>
+        <div>
+          <div class="font-bold text-gray-900 leading-none">Reading<span class="text-[#E0604D]">Huddle</span></div>
+          <div class="text-[10px] text-teal-500 uppercase tracking-widest font-bold">Teacher Portal</div>
+        </div>
+      </div>
+
+      <div class="px-6 mb-4">
+        <h2 class="text-xs font-black text-gray-400 uppercase tracking-widest mb-4">Admin Tools</h2>
+        <nav class="space-y-1">
+          <NuxtLink
+            to="/admin/builder"
+            class="flex items-center gap-3 px-4 py-3 font-bold rounded-r-xl transition-all border-l-4"
+            :class="$route.path === '/admin/builder'
+              ? 'bg-purple-50 text-purple-700 border-purple-500'
+              : 'text-gray-600 hover:bg-gray-50 border-transparent'"
+          >
+            📝 Form Builder
+          </NuxtLink>
+          <NuxtLink
+            to="/admin/progress"
+            class="flex items-center gap-3 px-4 py-3 font-bold rounded-r-xl transition-all border-l-4"
+            :class="$route.path === '/admin/progress'
+              ? 'bg-blue-50 text-blue-700 border-blue-500'
+              : 'text-gray-600 hover:bg-gray-50 border-transparent'"
+          >
+            📊 Class Progress
+          </NuxtLink>
+          <NuxtLink
+            to="/admin/raffle"
+            class="flex items-center gap-3 px-4 py-3 font-bold rounded-r-xl transition-all border-l-4"
+            :class="$route.path === '/admin/raffle'
+              ? 'bg-orange-50 text-orange-700 border-orange-500'
+              : 'text-gray-600 hover:bg-gray-50 border-transparent'"
+          >
+            🎰 Raffle System
+          </NuxtLink>
+        </nav>
+      </div>
+
+      <!-- Back to home -->
+      <div class="mt-auto px-6 pb-8">
+        <NuxtLink to="/" class="flex items-center gap-2 text-sm text-gray-400 hover:text-gray-600 font-bold transition">
+          ← Back to Portal
+        </NuxtLink>
+      </div>
+    </aside>
+
+    <!-- Main content area -->
+    <main class="ml-64 flex-1 p-10">
+      <!-- If on /admin exactly, show a welcome screen -->
+      <div v-if="$route.path === '/admin'" class="flex flex-col items-center justify-center min-h-[60vh] text-center gap-6">
+        <div class="text-8xl">🏫</div>
+        <h1 class="text-4xl font-black text-gray-900">Welcome, Teacher!</h1>
+        <p class="text-gray-400 font-medium text-lg">Pick a tool from the sidebar to get started.</p>
+        <div class="grid grid-cols-3 gap-4 mt-4 max-w-lg w-full">
+          <NuxtLink to="/admin/builder" class="bg-white rounded-2xl border-2 border-gray-100 p-6 text-center hover:border-purple-300 hover:shadow-md transition">
+            <div class="text-3xl mb-2">📝</div>
+            <div class="font-bold text-gray-700 text-sm">Form Builder</div>
+          </NuxtLink>
+          <NuxtLink to="/admin/progress" class="bg-white rounded-2xl border-2 border-gray-100 p-6 text-center hover:border-blue-300 hover:shadow-md transition">
+            <div class="text-3xl mb-2">📊</div>
+            <div class="font-bold text-gray-700 text-sm">Class Progress</div>
+          </NuxtLink>
+          <NuxtLink to="/admin/raffle" class="bg-white rounded-2xl border-2 border-gray-100 p-6 text-center hover:border-orange-300 hover:shadow-md transition">
+            <div class="text-3xl mb-2">🎰</div>
+            <div class="font-bold text-gray-700 text-sm">Raffle</div>
+          </NuxtLink>
+        </div>
+      </div>
+
+      <!-- Child pages render here -->
+      <NuxtPage v-else />
+    </main>
+  </div>
+</template>
diff --git a/app/pages/admin/progress.vue b/app/pages/admin/progress.vue
new file mode 100644
index 0000000..0acf22e
--- /dev/null
+++ b/app/pages/admin/progress.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+const { students } = useAdmin()
+</script>
+
+<template>
+  <div class="max-w-5xl mx-auto">
+    <h2 class="text-4xl font-bold text-gray-900 mb-8">Class Progress 📊</h2>
+
+    <div class="bg-white rounded-3xl shadow-xl border border-gray-200 overflow-hidden">
+      <table class="w-full text-left">
+        <thead class="bg-gray-50 border-b border-gray-200">
+          <tr>
+            <th class="p-6 text-xs font-black text-gray-400 uppercase tracking-widest">Student</th>
+            <th class="p-6 text-xs font-black text-gray-400 uppercase tracking-widest">Books Read</th>
+            <th class="p-6 text-xs font-black text-gray-400 uppercase tracking-widest">Weekly Streak</th>
+            <th class="p-6 text-xs font-black text-gray-400 uppercase tracking-widest">Last Active</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100">
+          <tr v-for="student in students" :key="student.id" class="hover:bg-blue-50/50 transition">
+            <td class="p-6 font-bold text-gray-800">
+              <div class="flex items-center gap-3">
+                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-purple-400 text-white flex items-center justify-center text-xs font-black shadow-md">
+                  {{ student.initials }}
+                </div>
+                {{ student.name }}
+              </div>
+            </td>
+            <td class="p-6">
+              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-lg bg-blue-100 text-blue-700 font-bold">
+                📚 {{ student.books }}
+              </span>
+            </td>
+            <td class="p-6">
+              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-lg bg-orange-100 text-orange-700 font-bold">
+                👑 {{ student.streak }}
+              </span>
+            </td>
+            <td class="p-6 text-gray-500 font-medium text-sm">{{ student.lastActive }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/admin/raffle.vue b/app/pages/admin/raffle.vue
new file mode 100644
index 0000000..8c87701
--- /dev/null
+++ b/app/pages/admin/raffle.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+const { students, raffleWinner, isSpinning, spinRaffle } = useAdmin()
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto text-center">
+    <h2 class="text-5xl font-black mb-8 text-gray-900">Weekly Raffle 🎟️</h2>
+
+    <div class="bg-white rounded-[3rem] shadow-2xl p-16 max-w-xl mx-auto border-b-8 border-yellow-400 relative overflow-hidden">
+
+      <!-- idle state -->
+      <div v-if="!raffleWinner && !isSpinning">
+        <div class="text-9xl mb-8 hover:rotate-12 transition cursor-pointer" @click="spinRaffle">🎟️</div>
+        <button
+          @click="spinRaffle"
+          class="bg-yellow-400 hover:bg-yellow-500 text-white text-2xl font-black py-5 px-16 rounded-full shadow-xl transition active:scale-95"
+        >
+          SPIN IT!
+        </button>
+        <p class="text-gray-400 font-medium mt-6 text-sm">{{ students.length }} students in the pool</p>
+      </div>
+
+      <!-- spinning state -->
+      <div v-else-if="isSpinning" class="py-10">
+        <div class="text-9xl animate-spin mb-6">🎡</div>
+        <h3 class="text-3xl font-bold text-yellow-600">Spinning...</h3>
+      </div>
+
+      <!-- winner state -->
+      <div v-else class="py-6">
+        <div class="text-9xl mb-6 animate-bounce">🥳</div>
+        <h2 class="text-4xl font-black text-gray-900 mb-2">Winner!</h2>
+        <p class="text-3xl font-bold text-purple-600 mb-6">{{ raffleWinner.name }}</p>
+        <button
+          @click="raffleWinner = null"
+          class="text-gray-400 hover:text-gray-600 font-bold underline"
+        >
+          Start Over
+        </button>
+      </div>
+    </div>
+
+    <!-- Student list -->
+    <div class="mt-12 bg-white rounded-3xl border border-gray-200 overflow-hidden shadow-sm max-w-xl mx-auto">
+      <div class="p-4 bg-gray-50 border-b border-gray-200">
+        <h3 class="font-black text-gray-700 uppercase tracking-widest text-xs">Students in Pool</h3>
+      </div>
+      <div class="divide-y divide-gray-100">
+        <div v-for="student in students" :key="student.id" class="flex items-center gap-3 p-4">
+          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-purple-400 text-white flex items-center justify-center text-xs font-black">
+            {{ student.initials }}
+          </div>
+          <span class="font-bold text-gray-800">{{ student.name }}</span>
+          <span class="ml-auto text-xs text-gray-400 font-medium">🎟️ {{ student.streak }} tickets</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/auth.vue b/app/pages/auth.vue
index f9ad540..20284ac 100644
--- a/app/pages/auth.vue
+++ b/app/pages/auth.vue
@@ -1,83 +1,209 @@
 <script setup lang="ts">
-  import { z } from 'zod'
-  import type { FormSubmitEvent } from '@nuxt/ui'
-  import { authClient } from '../utils/auth-client'
-
-  const toast = useToast()
-  const isEmailSent = ref(false)
-
-  const schema = computed(() => {
-    if (!isEmailSent.value) {
-      return z.object({
-        email: z.string().email('Invalid email'),
-      })
+import { z } from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { authClient } from '../utils/auth-client'
+
+const toast = useToast()
+const isEmailSent = ref(false)
+const view = ref<'landing' | 'login'>('landing')
+const loginRole = ref<'admin' | 'reader'>('admin')
+
+const schema = computed(() => {
+  if (!isEmailSent.value) {
+    return z.object({
+      email: z.string().email('Invalid email'),
+    })
+  } else {
+    return z.object({
+      email: z.string().email('Invalid email'),
+      otp: z.array(z.string()).length(6, 'Must be 6 digits'),
+    })
+  }
+})
+
+const state = reactive({
+  email: '',
+  otp: [] as string[],
+})
+
+function goToLogin(role: 'admin' | 'reader') {
+  loginRole.value = role
+  view.value = 'login'
+}
+
+async function handleSubmit(event: FormSubmitEvent<any>) {
+  if (!isEmailSent.value) {
+    const { data, error } = await authClient.emailOtp.sendVerificationOtp({
+      email: state.email,
+      type: 'sign-in',
+    })
+    if (error) {
+      toast.add({ title: 'Error', description: error.message, color: 'error' })
     } else {
-      return z.object({
-        email: z.string().email('Invalid email'),
-        otp: z.array(z.string()).length(6, 'Must be 6 digits'),
-      })
+      isEmailSent.value = true
+      toast.add({ title: 'Success', description: 'OTP sent to your email', color: 'success' })
     }
-  })
-
-  const state = reactive({
-    email: '',
-    otp: [] as string[],
-  })
-
-  async function handleSubmit(event: FormSubmitEvent<any>) {
-    if (!isEmailSent.value) {
-      const { data, error } = await authClient.emailOtp.sendVerificationOtp({
-        email: state.email,
-        type: 'sign-in',
-      })
-
-      if (error) {
-        toast.add({ title: 'Error', description: error.message, color: 'error' })
-      } else {
-        isEmailSent.value = true
-        toast.add({ title: 'Success', description: 'OTP sent to your email', color: 'success' })
-      }
+  } else {
+    const { data, error } = await authClient.signIn.emailOtp({
+      email: state.email,
+      otp: state.otp.join(''),
+    })
+    if (error) {
+      toast.add({ title: 'Error', description: error.message, color: 'error' })
     } else {
-      const { data, error } = await authClient.signIn.emailOtp({
-        email: state.email,
-        otp: state.otp.join(''),
-      })
-
-      if (error) {
-        toast.add({ title: 'Error', description: error.message, color: 'error' })
-      } else {
-        await navigateTo('/', { external: true })
-      }
+      await navigateTo('/', { external: true })
     }
   }
+}
 </script>
 
 <template>
-  <div class="flex h-full w-full items-center justify-center py-12">
-    <UCard class="w-full max-w-md">
-      <template #header>
-        <div class="flex items-center justify-center text-xl font-bold">Login</div>
-      </template>
-
-      <UForm :schema="schema" :state="state" @submit="handleSubmit" class="space-y-5">
-        <UFormField name="email" v-if="!isEmailSent">
-          <UInput v-model="state.email" class="w-full" placeholder="Email" />
-        </UFormField>
-
-        <UFormField name="otp" v-if="isEmailSent">
-          <UPinInput
-            otp
-            v-model="state.otp"
-            :length="6"
-            size="xl"
-            class="flex w-full items-center justify-center"
-          />
-        </UFormField>
-
-        <UButton loading-auto type="submit" class="w-full justify-center">
-          {{ isEmailSent ? 'Login' : 'Send OTP' }}
-        </UButton>
-      </UForm>
-    </UCard>
+  <div class="min-h-screen bg-[#f8f7f4] font-sans">
+
+    <!-- Shared top gradient bar -->
+    <div class="h-1.5 w-full bg-gradient-to-r from-indigo-600 via-amber-400 to-amber-500" />
+
+    <main class="max-w-4xl mx-auto min-h-[calc(100vh-6px)] flex flex-col">
+
+      <!-- ── LANDING VIEW ── -->
+      <Transition name="fade" mode="out-in">
+        <div
+          v-if="view === 'landing'"
+          class="flex flex-col items-center justify-center flex-1 py-20 text-center gap-12"
+        >
+          <!-- Bouncing rocket -->
+          <div class="animate-bounce text-8xl select-none">🚀</div>
+
+          <!-- Headline -->
+          <div class="space-y-3">
+            <h1
+              class="text-6xl sm:text-7xl font-black tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-amber-400 to-amber-500 drop-shadow-sm leading-none pb-1"
+            >
+              Welcome!
+            </h1>
+            <p class="text-xl sm:text-2xl font-medium text-gray-400 max-w-xl mx-auto">
+              Your school reading adventure starts here.
+            </p>
+          </div>
+
+          <!-- Role cards -->
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 w-full max-w-2xl px-4">
+            <!-- Admin card -->
+            <button
+              @click="navigateTo('/admin')"
+              class="group bg-white rounded-3xl border-2 border-gray-100 p-10 text-center shadow-sm hover:border-indigo-400 hover:shadow-lg transition-all duration-200 cursor-pointer"
+            >
+              <div
+                class="w-20 h-20 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center text-5xl mb-5 mx-auto group-hover:rotate-12 transition-transform duration-300 select-none"
+              >
+                🏫
+              </div>
+              <h3 class="text-2xl font-bold text-gray-900 mb-2">Faculty & Admin</h3>
+              <p class="text-gray-400 font-medium">Manage students, curriculum & raffles.</p>
+            </button>
+
+            <!-- Student card -->
+            <button
+              @click="navigateTo('/reader')"
+
+              class="group bg-white rounded-3xl border-2 border-gray-100 p-10 text-center shadow-sm hover:border-amber-400 hover:shadow-lg transition-all duration-200 cursor-pointer"
+            >
+              <div
+                class="w-20 h-20 bg-amber-50 text-amber-500 rounded-2xl flex items-center justify-center text-5xl mb-5 mx-auto group-hover:rotate-12 transition-transform duration-300 select-none"
+              >
+                ✨
+              </div>
+              <h3 class="text-2xl font-bold text-gray-900 mb-2">Reading Buddy</h3>
+              <p class="text-gray-400 font-medium">Complete challenges, log books & win prizes!</p>
+            </button>
+          </div>
+        </div>
+
+        <!-- ── LOGIN VIEW ── -->
+        <div
+          v-else-if="view === 'login'"
+          class="flex items-center justify-center flex-1 py-20 px-4"
+        >
+          <div class="relative bg-white/80 backdrop-blur rounded-3xl border border-gray-100 shadow-xl p-12 w-full max-w-md text-center space-y-8 overflow-hidden">
+
+            <!-- Top accent bar -->
+            <div class="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-indigo-600 via-amber-400 to-amber-500" />
+
+            <!-- Icon -->
+            <div class="w-24 h-24 bg-indigo-50 rounded-full flex items-center justify-center text-6xl mx-auto shadow-inner select-none">
+              🪄
+            </div>
+
+            <!-- Title -->
+            <div>
+              <h2 class="text-4xl font-black text-gray-900 mb-1">Magic Login</h2>
+              <p class="text-gray-400 font-medium">
+                {{ isEmailSent ? 'Enter the 6-digit code we sent you.' : 'Enter your email to receive a one-time code.' }}
+              </p>
+            </div>
+
+            <!-- Form -->
+            <UForm :schema="schema" :state="state" @submit="handleSubmit" class="space-y-5 text-left">
+
+              <!-- Email field -->
+              <UFormField v-if="!isEmailSent" name="email" label="Email Address">
+                <UInput
+                  v-model="state.email"
+                  type="email"
+                  placeholder="name@school.edu"
+                  size="xl"
+                  class="w-full"
+                />
+              </UFormField>
+
+              <!-- OTP field -->
+              <UFormField v-if="isEmailSent" name="otp" label="Verification Code">
+                <div class="flex justify-center">
+                  <UPinInput
+                    otp
+                    v-model="state.otp"
+                    :length="6"
+                    size="xl"
+                  />
+                </div>
+              </UFormField>
+
+              <!-- Submit -->
+              <UButton
+                loading-auto
+                type="submit"
+                size="xl"
+                class="w-full justify-center font-bold rounded-2xl bg-gray-900 hover:bg-black text-white transition active:scale-95"
+              >
+                {{ isEmailSent ? 'Verify & Login 🪄' : 'Send Magic Link 🪄' }}
+              </UButton>
+            </UForm>
+
+            <!-- Back link -->
+            <button
+              @click="view = 'landing'; isEmailSent = false"
+              class="text-xs font-bold text-gray-400 hover:text-gray-700 uppercase tracking-widest transition-colors"
+            >
+              ← Back to Portal
+            </button>
+          </div>
+        </div>
+      </Transition>
+    </main>
   </div>
 </template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index d05e437..faf2a9b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,197 +1,31 @@
 <script setup lang="ts">
-  import { authClient } from '../utils/auth-client'
-
-  const { data: users, pending, error } = await useFetch('/api/users')
-
-  const selectedFile = ref<File | null>(null)
-  const imagePreview = ref<string>('')
-  const isUploading = ref(false)
-  const isModalOpen = ref(false)
-
-  async function logout() {
-    await authClient.signOut()
-    await navigateTo('/auth', { external: true })
-  }
-
-  function getImageLink(user: { image: boolean; id: string }) {
-    return user.image ? 'api/users/' + user.id + '/profile' : undefined
-  }
-
-  function handleImageUpload(event: Event) {
-    const target = event.target as HTMLInputElement
-    const files = target.files as FileList
-
-    if (!files || files.length === 0) return
-
-    const file = files[0]
-
-    if (!file?.type.startsWith('image/')) {
-      return
-    }
-
-    selectedFile.value = file
-
-    const reader = new FileReader()
-    reader.onload = (e) => {
-      imagePreview.value = e.target?.result as string
-    }
-    reader.readAsDataURL(file)
-  }
-
-  const openModal = () => {
-    isModalOpen.value = true
-  }
-
-  const closeModal = () => {
-    isModalOpen.value = false
-  }
-
-  async function updatePfp() {
-    if (!selectedFile.value) return
-
-    isUploading.value = true
-
-    try {
-      const formData = new FormData()
-      formData.append('file', selectedFile.value)
-
-      await $fetch('/api/users/upload', {
-        method: 'POST',
-        body: formData,
-      })
-
-      // Refresh users data to show updated profile picture
-      await refreshNuxtData()
-
-      // Reset state
-      selectedFile.value = null
-      imagePreview.value = ''
-      isModalOpen.value = false
-    } catch (error) {
-      console.error('Upload failed:', error)
-    } finally {
-      isUploading.value = false
-    }
-  }
+definePageMeta({ ssr: false })
 </script>
 
 <template>
-  <UContainer class="py-10">
-    <div class="mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-center">
-      <div>
-        <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Dashboard</h1>
-        <p class="mt-1 text-gray-500 dark:text-gray-400">
-          Manage your application users and settings.
-        </p>
-      </div>
-      <div class="flex justify-between gap-4 md:items-center">
-        <UModal :open="isModalOpen">
-          <UButton
-            color="success"
-            variant="soft"
-            @click="openModal"
-            icon="i-heroicons-arrow-up-on-square-20-solid"
-            label="Update Profile Picture"
-          />
-
-          <template #content>
-            <div class="m-12 space-y-4">
-              <h3 class="text-lg font-medium text-gray-900 dark:text-white">
-                Update Profile Picture
-              </h3>
-
-              <div v-if="imagePreview" class="flex justify-center">
-                <UAvatar :src="imagePreview" size="3xl" />
-              </div>
-
-              <div>
-                <input
-                  type="file"
-                  accept="image/*"
-                  class="file:bg-primary-50 file:text-brand4 hover:file:bg-primary-100 block w-full cursor-pointer text-sm text-gray-500 file:mr-4 file:rounded-full file:border-0 file:px-4 file:py-2 file:text-sm file:font-semibold"
-                  @change="handleImageUpload"
-                />
-              </div>
-
-              <div class="flex justify-end gap-2">
-                <UButton variant="soft" @click="closeModal"> Cancel </UButton>
-                <UButton
-                  color="success"
-                  :loading="isUploading"
-                  :disabled="!selectedFile"
-                  @click="updatePfp"
-                >
-                  Upload
-                </UButton>
-              </div>
-            </div>
-          </template>
-        </UModal>
-        <UButton
-          color="error"
-          variant="soft"
-          icon="i-heroicons-arrow-right-on-rectangle-20-solid"
-          label="Logout"
-          @click="logout"
-        />
-      </div>
+  <div class="min-h-screen bg-[#f5ede3] flex flex-col items-center justify-center gap-12 p-8">
+    <div class="text-8xl animate-bounce">🚀</div>
+    <div class="text-center space-y-3">
+      <h1 class="text-6xl font-black text-gray-900">ReadingHuddle</h1>
+      <p class="text-xl text-gray-400">Where are you heading today?</p>
     </div>
-
-    <UCard class="w-full">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <UIcon name="i-heroicons-users-20-solid" class="h-5 w-5 text-gray-500" />
-            <h2 class="text-base leading-7 font-semibold text-gray-900 dark:text-white">
-              Registered Users
-            </h2>
-          </div>
-          <UBadge variant="subtle" color="primary" size="md">{{ users?.length || 0 }} Users</UBadge>
-        </div>
-      </template>
-
-      <div v-if="pending" class="space-y-4">
-        <div v-for="i in 3" :key="i" class="flex items-center justify-between py-2">
-          <div class="flex w-full items-center gap-3">
-            <USkeleton class="h-10 w-10 rounded-full" />
-            <div class="w-full max-w-[200px] space-y-2">
-              <USkeleton class="h-4 w-full" />
-              <USkeleton class="h-3 w-2/3" />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div v-else-if="error">
-        <UAlert
-          icon="i-heroicons-exclamation-triangle-20-solid"
-          color="error"
-          variant="subtle"
-          title="Error loading users"
-          :description="error.message"
-        />
-      </div>
-
-      <div v-else class="divide-y divide-gray-200 dark:divide-gray-800">
-        <div
-          v-for="user in users"
-          :key="user.id"
-          class="flex items-center justify-between py-4 first:pt-0 last:pb-0"
-        >
-          <div class="flex items-center gap-3">
-            <UAvatar :src="getImageLink(user)" :alt="user.name" size="md" :as="{ img: 'img' }" />
-            <div>
-              <p class="font-medium text-gray-900 dark:text-white">{{ user.name }}</p>
-              <p class="text-sm text-gray-500 dark:text-gray-400">{{ user.email }}</p>
-            </div>
-          </div>
-          <UBadge :color="user.emailVerified ? 'success' : 'warning'" variant="subtle" size="sm">
-            {{ user.emailVerified ? 'Verified' : 'Pending' }}
-          </UBadge>
-        </div>
-
-        <div v-if="users?.length === 0" class="py-8 text-center text-gray-500">No users found.</div>
-      </div>
-    </UCard>
-  </UContainer>
-</template>
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 w-full max-w-2xl">
+      <button
+        @click="navigateTo('/admin')"
+        class="group bg-white rounded-3xl border-2 border-gray-100 p-10 text-center shadow-sm hover:border-indigo-400 hover:shadow-lg transition-all duration-200"
+      >
+        <div class="w-20 h-20 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center text-5xl mb-5 mx-auto group-hover:rotate-12 transition-transform duration-300">🏫</div>
+        <h3 class="text-2xl font-bold text-gray-900 mb-2">Faculty & Admin</h3>
+        <p class="text-gray-400 font-medium">Manage students, curriculum & raffles.</p>
+      </button>
+      <button
+        @click="navigateTo('/reader')"
+        class="group bg-white rounded-3xl border-2 border-gray-100 p-10 text-center shadow-sm hover:border-amber-400 hover:shadow-lg transition-all duration-200"
+      >
+        <div class="w-20 h-20 bg-amber-50 text-amber-500 rounded-2xl flex items-center justify-center text-5xl mb-5 mx-auto group-hover:rotate-12 transition-transform duration-300">✨</div>
+        <h3 class="text-2xl font-bold text-gray-900 mb-2">Reading Buddy</h3>
+        <p class="text-gray-400 font-medium">Complete challenges, log books & win prizes!</p>
+      </button>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/pages/reader/decor.vue b/app/pages/reader/decor.vue
new file mode 100644
index 0000000..3af9ef3
--- /dev/null
+++ b/app/pages/reader/decor.vue
@@ -0,0 +1,251 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+
+const settings = reactive({ theme: 'light', dyslexiaFont: false, language: 'en', fontSize: 1 })
+const stats = reactive({ xp: 1250, booksRead: 14, streak: 5, tickets: 3 })
+
+const themeClass = computed(() => {
+  const t = settings.theme !== 'light' ? `theme-${settings.theme}` : ''
+  const d = settings.dyslexiaFont ? 'dyslexia-font' : ''
+  return `reader-app ${t} ${d}`.trim()
+})
+
+// ── Click badge animations ──
+const xpClicked     = ref(false)
+const ticketClicked = ref(false)
+const burstCoins    = ref<{id:number;tx:number;ty:number}[]>([])
+const flyTickets    = ref<number[]>([])
+
+function triggerXpClick() {
+  xpClicked.value = true
+  burstCoins.value = [
+    { id: Date.now(), tx:-32, ty:-40 }, { id: Date.now()+1, tx:0, ty:-48 }, { id: Date.now()+2, tx:32, ty:-40 }
+  ]
+  setTimeout(() => { xpClicked.value = false; burstCoins.value = [] }, 800)
+}
+function triggerTicketClick() {
+  ticketClicked.value = true
+  flyTickets.value = [Date.now()]
+  setTimeout(() => { ticketClicked.value = false; flyTickets.value = [] }, 1000)
+}
+
+// ── Shop tabs ──
+const decorTab = ref<'shop'|'badges'>('shop')
+
+// ── Shop items — themes ──
+const shopItems = ref([
+  { id: 1,  type:'theme', name:'Light Bloom',   cost:0,   class:'light',  owned:true,  previewBg:'#f5ede3',  previewGrad:'radial-gradient(at 0% 0%, hsla(25,95%,75%,0.3) 0px, transparent 50%)' },
+  { id: 2,  type:'theme', name:'Galaxy Night',  cost:500, class:'blue',   owned:false, previewBg:'#1f3b7c',  previewGrad:'radial-gradient(at 0% 0%, hsla(250,20%,20%,0.5) 0px, transparent 50%)' },
+  { id: 3,  type:'theme', name:'Old Parchment', cost:300, class:'sepia',  owned:false, previewBg:'#f4ecd8',  previewGrad:'none' },
+  { id: 10, type:'theme', name:'Sunset',        cost:100, class:'sunset', owned:false, previewBg:'#fff5f5',  previewGrad:'radial-gradient(at 0% 0%, hsla(10,90%,75%,0.25) 0px, transparent 50%)' },
+  { id: 11, type:'theme', name:'Ocean',         cost:100, class:'ocean',  owned:false, previewBg:'#f0f9ff',  previewGrad:'radial-gradient(at 0% 0%, hsla(200,90%,75%,0.25) 0px, transparent 50%)' },
+  { id: 12, type:'theme', name:'Forest',        cost:150, class:'forest', owned:false, previewBg:'#f0fdf4',  previewGrad:'radial-gradient(at 0% 0%, hsla(140,80%,70%,0.25) 0px, transparent 50%)' },
+  { id: 13, type:'theme', name:'Candy',         cost:150, class:'candy',  owned:false, previewBg:'#fdf2f8',  previewGrad:'radial-gradient(at 0% 0%, hsla(330,90%,85%,0.35) 0px, transparent 50%)' },
+  { id: 14, type:'theme', name:'Fire',          cost:150, class:'fire',   owned:false, previewBg:'#fff7ed',  previewGrad:'radial-gradient(at 30% 40%, hsla(20,95%,65%,0.3) 0px, transparent 50%)' },
+  { id: 15, type:'theme', name:'Ice',           cost:150, class:'ice',    owned:false, previewBg:'#f0f9ff',  previewGrad:'radial-gradient(at 0% 0%, hsla(200,100%,95%,0.4) 0px, transparent 50%)' },
+  { id: 4,  type:'animation', name:'Twinkling Stars',      cost:200,  owned:false },
+  { id: 5,  type:'animation', name:'Confetti Rain',        cost:1000, owned:false },
+  { id: 6,  type:'animation', name:'Magic Sparkles',       cost:400,  owned:false },
+  { id: 7,  type:'animation', name:'Fireflies',            cost:400,  owned:false },
+  { id: 8,  type:'animation', name:'Fluttering Butterflies', cost:500, owned:false },
+  { id: 9,  type:'animation', name:'Falling Leaves',       cost:800,  owned:false },
+])
+
+const activeAnimations = ref<string[]>([])
+const showShopCelebration = ref('')
+
+function buyItem(item: any) {
+  if (stats.xp >= item.cost) {
+    stats.xp -= item.cost
+    item.owned = true
+    showShopCelebration.value = item.name
+    setTimeout(() => { showShopCelebration.value = '' }, 2500)
+    applyItem(item)
+  } else {
+    alert('Not enough XP!')
+  }
+}
+
+function applyItem(item: any) {
+  if (item.type === 'theme') {
+    settings.theme = item.class
+  } else if (item.type === 'animation') {
+    if (activeAnimations.value.includes(item.name)) {
+      activeAnimations.value = activeAnimations.value.filter(a => a !== item.name)
+    } else {
+      activeAnimations.value.push(item.name)
+    }
+  }
+}
+
+// ── Badges ──
+const badges = ref([
+  { id:1, name:'First Steps',   icon:'🐣', desc:'Read your first book',      unlocked:true  },
+  { id:2, name:'Book Worm',     icon:'🐛', desc:'Read 10 books',             unlocked:true  },
+  { id:3, name:'Form Master',   icon:'📝', desc:'Complete 5 weekly forms',   unlocked:false },
+  { id:4, name:'Early Bird',    icon:'☀️', desc:'Read before 8am',           unlocked:true  },
+  { id:5, name:'Night Owl',     icon:'🦉', desc:'Read after 8pm',            unlocked:false },
+  { id:6, name:'Streak Star',   icon:'⭐', desc:'Get a 7 day streak',        unlocked:false },
+  { id:7, name:'Raffle Champ',  icon:'🎫', desc:'Enter 3 raffles',           unlocked:true  },
+  { id:8, name:'Super Sage',    icon:'🧙', desc:'Reach level 20',            unlocked:false },
+])
+</script>
+
+<template>
+  <div :class="themeClass" :style="`font-size:${settings.fontSize*16}px`" class="pb-32 px-4 pt-4 min-h-screen">
+
+    <!-- ── TOP BAR ── -->
+    <header class="max-w-4xl mx-auto flex justify-between items-center mb-8 px-2 relative z-[200]">
+      <div class="flex items-center gap-3">
+        <div class="w-12 h-12 rounded-xl flex items-center justify-center text-white font-heading font-bold text-2xl shadow-lg" style="background:var(--brand-indigo)">L</div>
+        <div class="flex flex-col">
+          <span class="font-heading font-bold text-2xl tracking-tight leading-none" style="color:var(--brand-dark)">Reading<span style="color:var(--brand-indigo)">Huddle</span></span>
+          <span class="text-[10px] font-bold uppercase tracking-widest" style="color:var(--brand-mint)">Reading Buddy</span>
+        </div>
+      </div>
+      <div class="flex items-center gap-3">
+        <!-- XP + Tickets -->
+        <div class="relative bg-white/90 backdrop-blur-md px-4 py-2 rounded-xl shadow-xl border-2 flex items-center gap-3 cursor-pointer select-none"
+             style="border-color:rgba(245,158,11,0.3)"
+             :class="xpClicked ? 'scale-90' : ''"
+             @click="triggerXpClick">
+          <span class="text-lg" :class="xpClicked ? 'animate-star-spin' : ''">⭐</span>
+          <span class="font-heading font-bold text-amber-600">{{ stats.xp }}</span>
+          <span class="text-gray-300">|</span>
+          <span class="text-lg" :class="ticketClicked ? 'animate-ticket-wobble' : ''" @click.stop="triggerTicketClick">🎟️</span>
+          <span class="font-heading font-bold" style="color:var(--brand-mint)">{{ stats.tickets }}</span>
+          <span v-for="c in burstCoins" :key="c.id" class="absolute text-sm animate-coin-burst"
+                :style="`--tx:${c.tx}px;--ty:${c.ty}px;left:50%;top:50%;`">🪙</span>
+          <Transition name="box-pop">
+            <span v-if="ticketClicked" class="absolute -top-10 left-1/2 text-2xl animate-box-shake pointer-events-none">📦</span>
+          </Transition>
+          <span v-for="id in flyTickets" :key="id" class="absolute text-lg animate-ticket-fly pointer-events-none"
+                style="left:50%;top:50%;transform:translateX(-50%) translateY(-50%)">🎟️</span>
+        </div>
+        <NuxtLink to="/reader"
+          class="w-14 h-14 bg-white/90 backdrop-blur-md rounded-xl flex items-center justify-center text-2xl border-2 border-white shadow-xl hover:scale-110 active:scale-95 transition-all"
+          style="text-decoration:none">🏠</NuxtLink>
+      </div>
+    </header>
+
+    <!-- ── MAIN ── -->
+    <main class="max-w-4xl mx-auto min-h-[60vh]">
+
+      <!-- Tab switcher -->
+      <div class="flex gap-4 p-1 rounded-2xl border-2 border-white max-w-sm mx-auto mb-8" style="background:rgba(255,255,255,0.5); backdrop-filter:blur(10px)">
+        <button @click="decorTab = 'shop'"
+          class="flex-1 py-2 rounded-xl font-bold transition-all"
+          :style="decorTab === 'shop' ? 'background:var(--brand-indigo); color:white' : 'color:#9ca3af'">Shop</button>
+        <button @click="decorTab = 'badges'"
+          class="flex-1 py-2 rounded-xl font-bold transition-all"
+          :style="decorTab === 'badges' ? 'background:var(--brand-indigo); color:white' : 'color:#9ca3af'">Badges</button>
+      </div>
+
+      <!-- ── SHOP ── -->
+      <div v-if="decorTab === 'shop'" class="space-y-8">
+
+        <!-- Themes -->
+        <div>
+          <h3 class="text-xl font-black mb-4 pb-2 flex items-center gap-2" style="color:var(--brand-dark); border-bottom:4px solid rgba(224,96,77,0.2)">
+            <span>🎨</span> THEMES
+          </h3>
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
+            <div
+              v-for="item in shopItems.filter(i => i.type === 'theme')" :key="item.id"
+              @click="item.owned ? applyItem(item) : buyItem(item)"
+              class="premium-card p-4 bg-white/80 cursor-pointer overflow-hidden transition-all hover:scale-105 active:scale-95"
+              :style="settings.theme === item.class ? 'border:4px solid var(--brand-indigo)' : ''"
+            >
+              <div class="w-full aspect-square rounded-xl mb-3 shadow-inner border border-gray-100"
+                   :style="`background-color:${item.previewBg}; background-image:${item.previewGrad !== 'none' ? item.previewGrad : ''}`" />
+              <div class="flex items-center justify-between px-1">
+                <span class="text-xs font-black truncate" style="color:var(--brand-dark)">{{ item.name }}</span>
+                <span v-if="!item.owned" class="text-[9px] font-black p-1 rounded-lg" style="background:rgba(245,158,11,0.2); color:var(--brand-amber)">{{ item.cost }} XP</span>
+                <span v-else-if="settings.theme === item.class" class="text-[9px] font-black" style="color:var(--brand-indigo)">EQUIPPED</span>
+                <span v-else class="text-[9px] font-black" style="color:var(--brand-mint)">OWNED</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Animations -->
+        <div>
+          <h3 class="text-xl font-black mb-4 pb-2 flex items-center gap-2" style="color:var(--brand-dark); border-bottom:4px solid rgba(224,96,77,0.2)">
+            <span>✨</span> ANIMATIONS
+          </h3>
+          <div class="space-y-3">
+            <div
+              v-for="item in shopItems.filter(i => i.type === 'animation')" :key="item.id"
+              class="flex items-center justify-between p-4 rounded-2xl border-2 transition-all"
+              :style="activeAnimations.includes(item.name)
+                ? 'border-color:var(--brand-mint); background:rgba(45,212,191,0.05)'
+                : 'border-color:white; background:rgba(255,255,255,0.6)'"
+            >
+              <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center text-2xl shadow-sm">✨</div>
+                <div>
+                  <h4 class="font-black uppercase tracking-tight" style="color:var(--brand-dark)">{{ item.name }}</h4>
+                  <p v-if="!item.owned" class="text-[10px] text-gray-500 font-bold">Requires {{ item.cost }} XP</p>
+                  <p v-else class="text-[10px] font-bold" style="color:var(--brand-mint)">Active</p>
+                </div>
+              </div>
+              <button v-if="!item.owned" @click="buyItem(item)"
+                :disabled="stats.xp < item.cost"
+                class="btn-fun px-6 py-2 rounded-xl font-black text-xs text-gray-900 active:scale-95 disabled:opacity-50"
+                style="background:var(--brand-gold)">BUY</button>
+              <button v-else @click="applyItem(item)"
+                class="px-6 py-2 rounded-xl font-black text-xs transition-colors"
+                :style="activeAnimations.includes(item.name)
+                  ? 'background:var(--brand-dark); color:white'
+                  : 'background:white; color:var(--brand-dark)'">
+                {{ activeAnimations.includes(item.name) ? 'REMOVE' : 'EQUIP' }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ── BADGES ── -->
+      <div v-else class="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <div
+          v-for="badge in badges" :key="badge.id"
+          class="premium-card p-6 flex flex-col items-center text-center gap-2 group"
+          :class="badge.unlocked ? '' : 'opacity-40 grayscale'"
+          :style="badge.unlocked ? 'border-color:var(--brand-gold)' : ''"
+        >
+          <div class="text-5xl group-hover:scale-110 transition duration-500">{{ badge.icon }}</div>
+          <h4 class="font-heading font-bold text-lg leading-tight" style="color:var(--brand-dark)">{{ badge.name }}</h4>
+          <p class="text-[10px] font-bold text-gray-400">{{ badge.desc }}</p>
+          <div v-if="badge.unlocked" class="mt-2 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider" style="background:rgba(245,158,11,0.2); color:var(--brand-dark)">Unlocked</div>
+        </div>
+      </div>
+
+    </main>
+
+    <!-- ── LEFT / RIGHT ARROWS ── -->
+    <NuxtLink to="/reader/home"
+      class="fixed right-2 top-1/2 -translate-y-1/2 z-[100] p-2 flex items-center gap-1 transition-all cursor-pointer group"
+      style="color:rgba(224,96,77,0.6); text-decoration:none">
+      <span class="text-sm font-bold uppercase tracking-wide">Home</span>
+      <svg class="w-12 h-16 group-hover:translate-x-1 transition-transform drop-shadow-md" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    </NuxtLink>
+
+    <!-- ── SHOP PURCHASE CELEBRATION ── -->
+    <Transition name="fade">
+      <div v-if="showShopCelebration" class="fixed inset-0 z-[200] flex items-center justify-center pointer-events-none">
+        <div class="text-center animate-shop-pop">
+          <div class="text-8xl mb-4">✨</div>
+          <h2 class="font-heading text-4xl font-black text-white drop-shadow-lg">{{ showShopCelebration }}</h2>
+          <p class="text-2xl text-white/80 font-bold drop-shadow-md mt-2">Unlocked! 🎉</p>
+        </div>
+      </div>
+    </Transition>
+
+  </div>
+</template>
+
+<style>
+@import './reader.css';
+</style>
diff --git a/app/pages/reader/forms.vue b/app/pages/reader/forms.vue
new file mode 100644
index 0000000..90c4904
--- /dev/null
+++ b/app/pages/reader/forms.vue
@@ -0,0 +1,512 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+
+const settings = reactive({ theme: 'light', dyslexiaFont: false, language: 'en', fontSize: 1 })
+
+const stats = reactive({ xp: 1250, booksRead: 14, streak: 5, tickets: 3 })
+
+const themeClass = computed(() => {
+  const t = settings.theme !== 'light' ? `theme-${settings.theme}` : ''
+  const d = settings.dyslexiaFont ? 'dyslexia-font' : ''
+  return `reader-app ${t} ${d}`.trim()
+})
+
+// ── Click badge animations ──
+const xpClicked     = ref(false)
+const ticketClicked = ref(false)
+const burstCoins    = ref<{id:number;tx:number;ty:number}[]>([])
+const flyTickets    = ref<number[]>([])
+
+function triggerXpClick() {
+  xpClicked.value = true
+  burstCoins.value = [
+    { id: Date.now(), tx: -32, ty: -40 }, { id: Date.now()+1, tx: 0, ty: -48 }, { id: Date.now()+2, tx: 32, ty: -40 },
+  ]
+  setTimeout(() => { xpClicked.value = false; burstCoins.value = [] }, 800)
+}
+function triggerTicketClick() {
+  ticketClicked.value = true
+  flyTickets.value = [Date.now()]
+  setTimeout(() => { ticketClicked.value = false; flyTickets.value = [] }, 1000)
+}
+
+// ── Forms data ──
+const formsMode = ref<'list'|'history'>('list')
+
+const thisWeekForms = ref([
+  {
+    id: 201, day: 'Monday', dayNum: 1, title: 'Kindness & Compassion', missed: true, status: 'Active',
+    questions: [
+      { id: 2011, type: 'context', text: 'Read the story of the Bell of Atri.', textEs: 'Lee la historia de la Campana de Atri.', reference: 'A story about justice and kindness to animals.', referenceEs: 'Una historia sobre la justicia y la bondad con los animales.' },
+      { id: 2012, type: 'video',   text: 'Watch this video on empathy', textEs: 'Mira este video sobre la empatía', url: 'https://www.youtube.com/embed/1Evwgu369Jw', reference: '', referenceEs: '' },
+      { id: 2013, type: 'text',    text: 'What did the horse do in the story?', textEs: '¿Qué hizo el caballo en la historia?', reference: 'He rang the bell to ask for justice.', referenceEs: 'Tocó la campana para pedir justicia.' },
+      { id: 2014, type: 'mcq',     text: 'If there are 5 bells and 3 horses, how many items in total?', textEs: 'Si hay 5 campanas y 3 caballos, ¿cuántos en total?', reference: '8', referenceEs: '8',
+        choices: [{ text:'6',correct:false },{ text:'8',correct:true },{ text:'10',correct:false },{ text:'15',correct:false }] },
+    ]
+  },
+  {
+    id: 202, day: 'Tuesday', dayNum: 2, title: 'Honesty & Truth', missed: true, status: 'Active',
+    questions: [
+      { id: 2021, type: 'context', text: 'Read about George Washington and the cherry tree.', textEs: '', reference: 'A tale about the value of telling the truth.', referenceEs: '' },
+      { id: 2022, type: 'text',    text: 'Why is honesty important?', textEs: '¿Por qué es importante la honestidad?', reference: 'It builds trust and respect.', referenceEs: 'Genera confianza y respeto.' },
+      { id: 2023, type: 'mcq',     text: 'If George planted 12 trees and chopped 1, how many are left?', textEs: '', reference: '11', referenceEs: '11',
+        choices: [{ text:'10',correct:false },{ text:'11',correct:true },{ text:'12',correct:false },{ text:'13',correct:false }] },
+    ]
+  },
+  {
+    id: 203, day: 'Wednesday', dayNum: 3, title: 'Courage & Bravery', missed: false, status: 'Active',
+    questions: [
+      { id: 2031, type: 'context', text: 'Read about Ruby Bridges walking to school.', textEs: '', reference: 'Ruby was the first Black child to attend an all-white school.', referenceEs: '' },
+      { id: 2032, type: 'video',   text: 'Watch this video about courage', textEs: '', url: 'https://www.youtube.com/embed/1Evwgu369Jw', reference: '', referenceEs: '' },
+      { id: 2033, type: 'text',    text: 'What made Ruby brave?', textEs: '¿Qué hizo valiente a Ruby?', reference: 'She kept going even when people tried to stop her.', referenceEs: '' },
+    ]
+  },
+  {
+    id: 204, day: 'Thursday', dayNum: 4, title: 'Friendship & Loyalty', missed: false, status: 'Active',
+    questions: [
+      { id: 2041, type: 'context', text: "Read the story of Charlotte's Web.", textEs: '', reference: "Charlotte saved Wilbur through her friendship.", referenceEs: '' },
+      { id: 2042, type: 'text',    text: 'How did Charlotte show she was a true friend?', textEs: '', reference: "She used her web to write messages that saved Wilbur.", referenceEs: '' },
+      { id: 2043, type: 'mcq',     text: 'Charlotte wrote 3 words. Each word has 5 letters. How many letters total?', textEs: '', reference: '15', referenceEs: '15',
+        choices: [{ text:'8',correct:false },{ text:'10',correct:false },{ text:'15',correct:true },{ text:'20',correct:false }] },
+    ]
+  },
+  {
+    id: 205, day: 'Friday', dayNum: 5, title: 'Gratitude & Appreciation', missed: false, status: 'Active',
+    questions: [
+      { id: 2051, type: 'context', text: 'Read about the meaning of gratitude.', textEs: '', reference: 'Gratitude is being thankful for what you have.', referenceEs: '' },
+      { id: 2052, type: 'text',    text: 'Name 3 things you are grateful for today.', textEs: 'Nombra 3 cosas por las que estás agradecido hoy.', reference: 'Open-ended — any thoughtful answer.', referenceEs: '' },
+      { id: 2053, type: 'mcq',     text: 'If you thanked 4 people today and 3 yesterday, how many total?', textEs: '', reference: '7', referenceEs: '7',
+        choices: [{ text:'5',correct:false },{ text:'6',correct:false },{ text:'7',correct:true },{ text:'8',correct:false }] },
+    ]
+  },
+])
+
+const completedWeeks = ref<number[]>([])
+
+// ── Flow state ──
+const activeForm         = ref<any>(null)
+const preFormStep        = ref<string|null>(null)   // 'ask' | 'has-book' | 'no-book' | null
+const preFormBookTitle   = ref('')
+const hasOwnBook         = ref(false)
+const currentQIdx        = ref(0)
+const answers            = ref<Record<number,string>>({})
+const feedbackVisible    = ref<Record<number,boolean>>({})
+
+// Raffle reward
+const showRaffleReward   = ref(false)
+const ticketDropped      = ref(false)
+const ticketOverBox      = ref(false)
+const ticketStyle        = ref<Record<string,string>>({})
+let touchStartY = 0
+
+function startChallenge(form: any) {
+  activeForm.value      = form
+  preFormStep.value     = 'ask'
+  preFormBookTitle.value = ''
+  currentQIdx.value     = 0
+  feedbackVisible.value = {}
+  answers.value         = {}
+}
+
+function preFormAddBook() {
+  if (preFormBookTitle.value.trim()) { stats.booksRead++; hasOwnBook.value = true }
+  preFormStep.value = null
+}
+
+function preFormSkipToForm() {
+  hasOwnBook.value  = false
+  preFormStep.value = null
+}
+
+function checkAnswer() {
+  const q = activeForm.value.questions[currentQIdx.value]
+  feedbackVisible.value[q.id] = true
+}
+
+function nextStep() {
+  const qs = activeForm.value.questions
+  if (currentQIdx.value < qs.length - 1) {
+    currentQIdx.value++
+    if (hasOwnBook.value && qs[currentQIdx.value].type === 'video') nextStep()
+  } else {
+    submitChallenge()
+  }
+}
+
+function submitChallenge() {
+  completedWeeks.value.push(activeForm.value.id)
+  stats.xp      += 100
+  stats.tickets += 1
+  showRaffleReward.value = true
+  ticketDropped.value    = false
+  ticketOverBox.value    = false
+  ticketStyle.value      = {}
+  setTimeout(() => {
+    activeForm.value      = null
+    currentQIdx.value     = 0
+    feedbackVisible.value = {}
+    answers.value         = {}
+  }, 500)
+}
+
+function onTicketDragStart(e: DragEvent) { e.dataTransfer?.setData('text/plain', 'ticket') }
+function onTicketDrop() { ticketOverBox.value = false; ticketDropped.value = true }
+function onTicketTouchStart(e: TouchEvent) { touchStartY = e.touches[0].clientY }
+function onTicketTouchMove(e: TouchEvent) {
+  e.preventDefault()
+  const t  = e.touches[0]
+  const dy = t.clientY - touchStartY
+  ticketStyle.value = { transform: `translate(-50%, ${dy}px)` }
+  const box = document.getElementById('raffle-box')
+  if (box) {
+    const r = box.getBoundingClientRect()
+    ticketOverBox.value = t.clientX >= r.left && t.clientX <= r.right && t.clientY >= r.top && t.clientY <= r.bottom
+  }
+}
+function onTicketTouchEnd() { ticketOverBox.value ? onTicketDrop() : (ticketStyle.value = {}) }
+
+function getBadgeClass(type: string) {
+  if (type === 'text')    return 'bg-blue-100 text-blue-700 border-2 border-blue-200'
+  if (type === 'mcq')     return 'bg-yellow-100 text-yellow-700 border-2 border-yellow-200'
+  if (type === 'video')   return 'bg-pink-100 text-pink-600 border-2 border-pink-200'
+  return 'bg-gray-100 text-gray-500 border-2 border-gray-200'
+}
+</script>
+
+<template>
+  <div :class="themeClass" :style="`font-size:${settings.fontSize*16}px`" class="pb-32 px-4 pt-4 min-h-screen">
+
+    <!-- ── TOP BAR ── -->
+    <header class="max-w-4xl mx-auto flex justify-between items-center mb-8 px-2 relative z-[200]">
+      <div class="flex items-center gap-3">
+        <div class="w-12 h-12 rounded-xl flex items-center justify-center text-white font-heading font-bold text-2xl shadow-lg" style="background:var(--brand-indigo)">L</div>
+        <div class="flex flex-col">
+          <span class="font-heading font-bold text-2xl tracking-tight leading-none" style="color:var(--brand-dark)">Reading<span style="color:var(--brand-indigo)">Huddle</span></span>
+          <span class="text-[10px] font-bold uppercase tracking-widest" style="color:var(--brand-mint)">Reading Buddy</span>
+        </div>
+      </div>
+      <div class="flex items-center gap-3">
+        <!-- XP + Tickets -->
+        <div class="relative bg-white/90 backdrop-blur-md px-4 py-2 rounded-xl shadow-xl border-2 flex items-center gap-3 cursor-pointer select-none"
+             style="border-color:rgba(245,158,11,0.3)"
+             :class="xpClicked ? 'scale-90' : ''"
+             @click="triggerXpClick">
+          <span class="text-lg" :class="xpClicked ? 'animate-star-spin' : ''">⭐</span>
+          <span class="font-heading font-bold text-amber-600">{{ stats.xp }}</span>
+          <span class="text-gray-300">|</span>
+          <span class="text-lg" :class="ticketClicked ? 'animate-ticket-wobble' : ''" @click.stop="triggerTicketClick">🎟️</span>
+          <span class="font-heading font-bold" style="color:var(--brand-mint)">{{ stats.tickets }}</span>
+          <span v-for="c in burstCoins" :key="c.id" class="absolute text-sm animate-coin-burst"
+                :style="`--tx:${c.tx}px;--ty:${c.ty}px;left:50%;top:50%;`">🪙</span>
+          <Transition name="box-pop">
+            <span v-if="ticketClicked" class="absolute -top-10 left-1/2 text-2xl animate-box-shake pointer-events-none">📦</span>
+          </Transition>
+          <span v-for="id in flyTickets" :key="id" class="absolute text-lg animate-ticket-fly pointer-events-none"
+                style="left:50%;top:50%;transform:translateX(-50%) translateY(-50%)">🎟️</span>
+        </div>
+        <!-- Settings / Home -->
+        <NuxtLink to="/reader"
+          class="w-14 h-14 bg-white/90 backdrop-blur-md rounded-xl flex items-center justify-center text-2xl border-2 border-white shadow-xl hover:scale-110 active:scale-95 transition-all"
+          style="text-decoration:none">🏠</NuxtLink>
+      </div>
+    </header>
+
+    <!-- ── MAIN ── -->
+    <main class="max-w-4xl mx-auto min-h-[60vh]">
+      <section class="space-y-6">
+
+        <div class="mb-2">
+          <h2 class="font-heading text-4xl font-bold mb-4" style="color:var(--brand-dark)">Daily Forms 📝</h2>
+        </div>
+
+        <!-- ── FORMS LIST ── -->
+        <div v-if="!activeForm" class="grid gap-3">
+          <div
+            v-for="form in thisWeekForms" :key="form.id"
+            @click="!completedWeeks.includes(form.id) && startChallenge(form)"
+            class="premium-card p-5 flex items-center justify-between group transition-all"
+            :class="[
+              completedWeeks.includes(form.id) ? 'cursor-default' : 'cursor-pointer hover:scale-[1.01]',
+              completedWeeks.includes(form.id) ? '' : form.missed ? 'hover:!border-amber-400' : ''
+            ]"
+            :style="completedWeeks.includes(form.id)
+              ? 'border-color:rgba(45,212,191,0.4); background:rgba(45,212,191,0.05)'
+              : form.missed ? 'border-color:#fcd34d; background:rgba(251,191,36,0.05)' : ''"
+          >
+            <div class="flex items-center gap-5">
+              <div
+                class="w-14 h-14 rounded-xl flex flex-col items-center justify-center font-heading font-bold transition text-sm"
+                :style="completedWeeks.includes(form.id)
+                  ? 'background:var(--brand-mint); color:white'
+                  : form.missed
+                    ? 'background:#f59e0b; color:white'
+                    : 'background:rgba(224,96,77,0.1); color:var(--brand-indigo)'"
+              >
+                <span class="text-[9px] uppercase leading-none">{{ form.day.substring(0,3) }}</span>
+                <span class="text-lg font-black leading-tight">{{ form.dayNum }}</span>
+              </div>
+              <div>
+                <h4 class="font-heading text-lg font-bold" style="color:var(--brand-dark)">{{ form.title }}</h4>
+                <div class="flex items-center gap-2 mt-0.5">
+                  <p class="text-xs font-bold text-gray-400">{{ form.day }} • {{ form.questions.length }} Steps</p>
+                  <span v-if="completedWeeks.includes(form.id)" class="text-xs font-black px-2 py-0.5 rounded-full" style="color:var(--brand-mint); background:rgba(45,212,191,0.15)">✓ Done</span>
+                  <span v-else-if="form.missed" class="text-xs font-black text-amber-600 bg-amber-100 px-2 py-0.5 rounded-full">Missed</span>
+                </div>
+              </div>
+            </div>
+            <div v-if="!completedWeeks.includes(form.id)">
+              <button class="btn-fun text-white px-5 py-2 rounded-xl font-bold text-sm"
+                      :style="form.missed ? 'background:#f59e0b' : 'background:var(--brand-indigo)'">Start 🚀</button>
+            </div>
+            <div v-else><span class="text-2xl">✅</span></div>
+          </div>
+        </div>
+
+        <!-- ── PRE-FORM: Ask ── -->
+        <div v-else-if="activeForm && preFormStep === 'ask'" class="space-y-6">
+          <div class="premium-card p-10 bg-white/60 text-center space-y-6">
+            <div class="text-8xl animate-bounce">📚</div>
+            <h3 class="font-heading text-3xl font-bold" style="color:var(--brand-dark)">Before we start...</h3>
+            <p class="text-xl text-gray-500 font-medium">Do you already have a book you've been reading?</p>
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-md mx-auto">
+              <button @click="preFormStep = 'has-book'"
+                class="btn-fun text-white py-5 rounded-2xl font-bold text-xl shadow-lg hover:scale-105"
+                style="background:var(--brand-indigo)">Yes, I have a book! 📖</button>
+              <button @click="preFormStep = 'no-book'"
+                class="btn-fun text-gray-900 py-5 rounded-2xl font-bold text-xl shadow-lg hover:scale-105"
+                style="background:var(--brand-gold)">No, I need one 📺</button>
+            </div>
+            <button @click="activeForm = null; preFormStep = null" class="text-gray-400 font-bold hover:text-gray-700 transition text-sm">← Back to Forms</button>
+          </div>
+        </div>
+
+        <!-- ── PRE-FORM: Has book ── -->
+        <div v-else-if="activeForm && preFormStep === 'has-book'" class="space-y-6">
+          <div class="premium-card p-10 bg-white/60 text-center space-y-6">
+            <div class="text-8xl">📖</div>
+            <h3 class="font-heading text-3xl font-bold" style="color:var(--brand-dark)">Awesome! What book are you reading?</h3>
+            <div class="max-w-md mx-auto">
+              <input v-model="preFormBookTitle" type="text" placeholder="Type your book title..."
+                class="w-full p-5 bg-gray-50 border-2 border-transparent rounded-2xl font-bold text-xl outline-none text-center transition"
+                style="focus:border-color:var(--brand-indigo)" />
+            </div>
+            <button @click="preFormAddBook" :disabled="!preFormBookTitle.trim()"
+              class="btn-fun text-white py-4 px-12 rounded-2xl font-bold text-xl shadow-lg disabled:opacity-40 hover:scale-105"
+              style="background:var(--brand-indigo)">Add to Library & Start Form ✨</button>
+            <button @click="preFormStep = 'ask'" class="block mx-auto text-gray-400 font-bold hover:text-gray-700 transition text-sm">← Go Back</button>
+          </div>
+        </div>
+
+        <!-- ── PRE-FORM: No book (watch video) ── -->
+        <div v-else-if="activeForm && preFormStep === 'no-book'" class="space-y-4">
+          <div class="premium-card p-5 bg-white/60 text-center space-y-3">
+            <h3 class="font-heading text-xl font-bold" style="color:var(--brand-dark)">📺 Let's read a story together!</h3>
+            <p class="text-gray-500 font-medium text-sm">Watch this book being read aloud, then we'll do the form.</p>
+            <div class="max-w-2xl mx-auto aspect-video w-full rounded-2xl overflow-hidden shadow-lg border-4 border-white">
+              <iframe class="w-full h-full" src="https://www.youtube.com/embed/1Evwgu369Jw" frameborder="0" allowfullscreen />
+            </div>
+            <div class="flex items-center justify-center gap-4 pt-1">
+              <button @click="preFormStep = 'ask'" class="text-gray-400 font-bold hover:text-gray-700 transition text-sm">← Back</button>
+              <button @click="preFormSkipToForm"
+                class="btn-fun text-white py-3 px-10 rounded-2xl font-bold text-lg shadow-lg hover:scale-105"
+                style="background:var(--brand-indigo)">Continue to Form ➡️</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- ── ACTIVE FORM QUESTIONS ── -->
+        <div v-else-if="activeForm && !preFormStep" class="space-y-6">
+          <div class="premium-card p-5 bg-white/60 relative overflow-hidden">
+            <!-- Progress bar -->
+            <div class="absolute top-0 left-0 w-full h-2 bg-gray-100">
+              <div class="h-full transition-all duration-500" style="background:var(--brand-indigo)"
+                   :style="`width:${((currentQIdx + 1) / activeForm.questions.length) * 100}%`" />
+            </div>
+
+            <div class="flex justify-between items-center mb-4 mt-2">
+              <div>
+                <h3 class="font-heading text-2xl font-bold" style="color:var(--brand-dark)">{{ activeForm.title }}</h3>
+                <p class="text-gray-400 font-bold">Step {{ currentQIdx + 1 }} of {{ activeForm.questions.length }}</p>
+              </div>
+              <button @click="activeForm = null; preFormStep = null" class="text-gray-400 hover:text-red-500 font-bold text-lg">Cancel</button>
+            </div>
+
+            <Transition name="step-fade" mode="out-in">
+              <div :key="currentQIdx">
+                <div v-if="activeForm.questions[currentQIdx]" class="space-y-3">
+
+                  <!-- Type badge -->
+                  <span v-if="activeForm.questions[currentQIdx].type !== 'video'"
+                    class="inline-block px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest"
+                    :class="getBadgeClass(activeForm.questions[currentQIdx].type)">
+                    {{ activeForm.questions[currentQIdx].type }}
+                  </span>
+
+                  <!-- Context block -->
+                  <div v-if="activeForm.questions[currentQIdx].type === 'context'" class="p-5 rounded-2xl bg-amber-50 border border-amber-100 space-y-2">
+                    <p class="text-xl font-heading font-bold leading-snug" style="color:var(--brand-dark)">{{ activeForm.questions[currentQIdx].text }}</p>
+                    <p v-if="activeForm.questions[currentQIdx].textEs" class="text-sm text-gray-500 italic font-medium">{{ activeForm.questions[currentQIdx].textEs }}</p>
+                  </div>
+
+                  <!-- Video -->
+                  <div v-else-if="activeForm.questions[currentQIdx].type === 'video'"
+                    class="max-w-2xl mx-auto aspect-video w-full rounded-2xl overflow-hidden shadow-lg border-4 border-white">
+                    <iframe class="w-full h-full" :src="activeForm.questions[currentQIdx].url" frameborder="0" allowfullscreen />
+                  </div>
+
+                  <!-- Text / MCQ question -->
+                  <div v-else class="space-y-1">
+                    <h4 class="text-xl font-heading font-bold" style="color:var(--brand-dark)">"{{ activeForm.questions[currentQIdx].text }}"</h4>
+                    <p v-if="activeForm.questions[currentQIdx].textEs" class="text-sm font-medium text-gray-400 italic">"{{ activeForm.questions[currentQIdx].textEs }}"</p>
+                  </div>
+
+                  <!-- Input area -->
+                  <div v-if="['text','mcq'].includes(activeForm.questions[currentQIdx].type)" class="mt-6">
+                    <!-- Not yet answered -->
+                    <div v-if="!feedbackVisible[activeForm.questions[currentQIdx].id]">
+                      <textarea
+                        v-if="activeForm.questions[currentQIdx].type === 'text'"
+                        v-model="answers[activeForm.questions[currentQIdx].id]"
+                        placeholder="Type your answer here..."
+                        class="w-full premium-card bg-white p-6 text-lg outline-none min-h-[120px] shadow-inner"
+                      />
+                      <!-- MCQ -->
+                      <div v-else-if="activeForm.questions[currentQIdx].type === 'mcq'" class="space-y-3">
+                        <button
+                          v-for="(choice, ci) in activeForm.questions[currentQIdx].choices" :key="ci"
+                          @click="answers[activeForm.questions[currentQIdx].id] = choice.text"
+                          class="w-full text-left p-5 rounded-2xl font-bold text-lg border-2 transition-all"
+                          :style="answers[activeForm.questions[currentQIdx].id] === choice.text
+                            ? 'border-color:var(--brand-indigo); background:rgba(224,96,77,0.1); color:var(--brand-indigo); transform:scale(1.02)'
+                            : 'border-color:#f1f5f9; background:white; color:#374151'"
+                        >
+                          <span class="inline-flex items-center justify-center w-8 h-8 rounded-full mr-3 text-sm font-black"
+                            :style="answers[activeForm.questions[currentQIdx].id] === choice.text
+                              ? 'background:var(--brand-indigo); color:white'
+                              : 'background:#f1f5f9; color:#6b7280'"
+                          >{{ String.fromCharCode(65 + ci) }}</span>
+                          {{ choice.text }}
+                        </button>
+                      </div>
+
+                      <button
+                        @click="checkAnswer"
+                        :disabled="!answers[activeForm.questions[currentQIdx].id]"
+                        class="mt-6 btn-fun w-full text-white py-4 rounded-2xl font-bold text-xl disabled:opacity-50 shadow-lg"
+                        style="background:var(--brand-indigo)">Check Answer ✨</button>
+                    </div>
+
+                    <!-- Feedback -->
+                    <div v-else class="p-6 rounded-[2rem] animate-pop-bounce border-2"
+                         style="background:rgba(45,212,191,0.1); border-color:rgba(45,212,191,0.3)">
+                      <div class="font-black mb-2 uppercase tracking-widest flex items-center gap-2" style="color:var(--brand-mint)">
+                        ✨ Great job!
+                      </div>
+                      <p class="text-gray-700 font-medium">Reference: "{{ activeForm.questions[currentQIdx].reference }}"</p>
+                      <p v-if="activeForm.questions[currentQIdx].referenceEs" class="text-gray-500 italic text-sm">"{{ activeForm.questions[currentQIdx].referenceEs }}"</p>
+                    </div>
+                  </div>
+
+                  <!-- Navigation -->
+                  <div class="flex justify-between items-center mt-4">
+                    <button v-if="currentQIdx > 0" @click="currentQIdx--"
+                      class="text-gray-400 font-bold hover:text-gray-700 transition text-lg">← Back</button>
+                    <div v-else />
+                    <div class="flex-grow" />
+                    <!-- Context / Video: always show Continue -->
+                    <button
+                      v-if="['context','video'].includes(activeForm.questions[currentQIdx].type)"
+                      @click="nextStep"
+                      class="btn-fun text-white px-10 py-3 rounded-2xl font-bold text-lg shadow-lg"
+                      style="background:var(--brand-dark)"
+                    >{{ currentQIdx < activeForm.questions.length - 1 ? 'Continue ➡️' : 'Finish Challenge! 🎉' }}</button>
+                    <!-- Text/MCQ after answered -->
+                    <button
+                      v-else-if="feedbackVisible[activeForm.questions[currentQIdx].id]"
+                      @click="nextStep"
+                      class="btn-fun text-white px-10 py-3 rounded-2xl font-bold text-lg"
+                      style="background:var(--brand-dark)"
+                    >{{ currentQIdx < activeForm.questions.length - 1 ? 'Next Step' : 'Finish Challenge! 🎉' }}</button>
+                  </div>
+                </div>
+              </div>
+            </Transition>
+          </div>
+        </div>
+
+      </section>
+    </main>
+
+    <!-- ── LEFT ARROW ── -->
+    <NuxtLink to="/reader/home"
+      class="fixed left-2 top-1/2 -translate-y-1/2 z-[100] p-2 flex items-center gap-1 transition-all cursor-pointer group"
+      style="color:rgba(224,96,77,0.6); text-decoration:none">
+      <svg class="w-12 h-16 group-hover:-translate-x-1 transition-transform drop-shadow-md" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+      </svg>
+      <span class="text-sm font-bold uppercase tracking-wide">Home</span>
+    </NuxtLink>
+
+    <!-- ── RAFFLE TICKET DRAG-AND-DROP OVERLAY ── -->
+    <Transition name="fade">
+      <div v-if="showRaffleReward" class="fixed inset-0 z-[200]" style="width:100vw; height:100vh; left:0; top:0;">
+        <div class="absolute inset-0 backdrop-blur-md" style="background:rgba(15,23,42,0.6)" />
+        <div class="p-6 bg-white max-w-md w-[90%] absolute z-10 animate-pop text-center space-y-5 overflow-auto"
+             style="border-radius:2.5rem; box-shadow:0 20px 60px rgba(0,0,0,0.3); border-bottom:8px solid var(--brand-gold); left:50%; top:50%; transform:translate(-50%,-50%)">
+
+          <!-- Drag zone -->
+          <div v-if="!ticketDropped" class="space-y-6">
+            <h2 class="font-heading text-2xl font-black" style="color:var(--brand-dark)">You earned a RAFFLE TICKET! 🎉</h2>
+            <p class="text-gray-500 font-medium">Drag your ticket into the raffle box!</p>
+
+            <div class="relative mx-auto" style="height:200px">
+              <div
+                draggable="true"
+                @dragstart="onTicketDragStart"
+                @touchstart="onTicketTouchStart"
+                @touchmove="onTicketTouchMove"
+                @touchend="onTicketTouchEnd"
+                class="absolute left-1/2 -translate-x-1/2 cursor-grab active:cursor-grabbing hover:scale-110 select-none transition-transform"
+                :style="[{zIndex:10, touchAction:'none'}, ticketStyle]"
+              >
+                <div class="text-[80px] leading-none drop-shadow-lg animate-bounce">🎟️</div>
+                <p class="text-xs font-bold text-gray-400 mt-1">Drag me! ↑</p>
+              </div>
+            </div>
+
+            <div
+              id="raffle-box"
+              @dragover.prevent="ticketOverBox = true"
+              @dragleave="ticketOverBox = false"
+              @drop.prevent="onTicketDrop"
+              class="mx-auto w-40 h-32 rounded-2xl border-4 border-dashed flex flex-col items-center justify-center transition-all duration-300"
+              :style="ticketOverBox ? 'border-color:var(--brand-gold); background:rgba(245,158,11,0.2); transform:scale(1.1)' : 'border-color:#d1d5db; background:#f9fafb'"
+            >
+              <span class="text-4xl">📦</span>
+              <span class="text-xs font-bold text-gray-400 uppercase mt-1">Raffle Box</span>
+            </div>
+          </div>
+
+          <!-- After drop -->
+          <div v-else class="flex flex-col items-center justify-center text-center space-y-4 py-4">
+            <div class="text-[72px] leading-none">🎉</div>
+            <h2 class="font-heading text-2xl font-black" style="color:var(--brand-dark)">Ticket Entered!</h2>
+            <p class="text-base text-gray-500 font-medium">Great job completing today's form!</p>
+            <div class="inline-flex items-center gap-2 px-5 py-2 rounded-full font-heading font-black text-lg" style="background:rgba(245,158,11,0.2); color:var(--brand-dark)">
+              🎟️ You now have {{ stats.tickets }} tickets!
+            </div>
+            <button
+              @click="showRaffleReward = false; ticketDropped = false"
+              class="btn-fun text-white py-3 px-10 rounded-2xl font-bold text-lg shadow-lg hover:scale-105 mt-1"
+              style="background:var(--brand-indigo)">Back to Home 🏠</button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+  </div>
+</template>
+
+<style>
+@import './reader.css';
+</style>
diff --git a/app/pages/reader/home.vue b/app/pages/reader/home.vue
new file mode 100644
index 0000000..98cc0e5
--- /dev/null
+++ b/app/pages/reader/home.vue
@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import type { Student, Announcement, Form, FormGroup } from '~~/prisma/generated/client'
+
+definePageMeta({ ssr: false })
+/* TODO:
+  1 change settings option to switch profiles into a redirect to teh profile selection page
+
+  2 calculations/parsing for selected student
+    -- streak    (decide between daily and weekly)
+    -- tickets    (raffle entries, number of forms completed during the current form group))
+    -- completed forms in form group
+
+  3 Announcements
+    -- get active announcements
+    -- change display to be larger
+    -- change display to show the most recent announcement with a dropdown to show all
+ 
+  4 get student selected from previous page
+    -- should come from session, nuxt store, or be passed as a param from previous page, could also use a tool like pinia or may also be a function of auth
+  5 find and apply unlocked shop items from selected student
+
+  6 make progress bar dynamic based on form group size and completed forms.
+*/
+
+//TODO 4 retrieve active student
+const {data: student} = await useFetch<Student | null>('/api/student/1')
+ 
+//TODO 2 parse settings from student
+const settings = reactive({
+  dyslexiaFont: false,
+  language:    'en',
+  fontSize:    1,
+})
+
+//TODO 2 calculate stats from student data
+const stats = {
+  xp: computed(() => Number(student.value?.exp ?? 0)),
+  streak: 5,
+  tickets: 3,
+}
+
+const showSettings = ref(false)
+
+// ── Theme class ──
+const themeClass = computed(() => {
+  const t = 'light'
+  const d = settings.dyslexiaFont ? 'dyslexia-font' : ''
+  return `reader-app ${t} ${d}`.trim()
+})
+
+// ── Click-triggered badge animations ──
+const xpClicked     = ref(false)
+const ticketClicked = ref(false)
+const burstCoins    = ref<{id:number; tx:number; ty:number}[]>([])
+const flyTickets    = ref<number[]>([])
+
+function triggerXpClick() {
+  xpClicked.value = true
+  burstCoins.value = [
+    { id: Date.now(),     tx: -32, ty: -40 },
+    { id: Date.now() + 1, tx:   0, ty: -48 },
+    { id: Date.now() + 2, tx:  32, ty: -40 },
+  ]
+  setTimeout(() => { xpClicked.value = false; burstCoins.value = [] }, 800)
+}
+
+function triggerTicketClick() {
+  ticketClicked.value = true
+  flyTickets.value = [Date.now()]
+  setTimeout(() => { ticketClicked.value = false; flyTickets.value = [] }, 1000)
+}
+
+//TODO 3
+// Announcements 
+const announcements = ref([
+  { id: 1, title: 'New Book Added!', content: student.value?.name ?? 'Student' },
+  { id: 2, title: 'Raffle Winners Announced!', content: 'Congrats to our latest raffle winners! 🎉', icon: '🎟️' },
+])
+
+//TODO 2
+//  Weekly forms progress 
+const thisWeekForms = ref([
+  { id: 201, day: 'Monday',    dayNum: 1, missed: true  },
+  { id: 202, day: 'Tuesday',   dayNum: 2, missed: true  },
+  { id: 203, day: 'Wednesday', dayNum: 3, missed: false },
+  { id: 204, day: 'Thursday',  dayNum: 4, missed: false },
+  { id: 205, day: 'Friday',    dayNum: 5, missed: false },
+])
+const completedWeeks = ref<number[]>([201, 202])
+
+const completedThisWeek = computed(() =>
+  completedWeeks.value.filter(id => thisWeekForms.value.some(f => f.id === id))
+)
+
+const completionMessage = computed(() => {
+  const n = completedThisWeek.value.length
+  return ['', 'Nice!', 'Good Job!', 'Great Job!', 'Wow!', 'Awesome!', 'Amazing!'][n] ?? 'Spectacular!'
+})
+</script>
+
+<template>
+  <div :class="themeClass" :style="`font-size: ${settings.fontSize * 16}px`" class="pb-32 px-4 pt-4 min-h-screen">
+
+    <!-- ── TOP BAR ── -->
+    <header class="max-w-4xl mx-auto flex justify-between items-center mb-8 px-2 relative z-[200]">
+      <div class="flex items-center gap-3">
+        <div class="w-12 h-12 rounded-xl flex items-center justify-center text-white font-heading font-bold text-2xl shadow-lg"
+             style="background: var(--brand-indigo)">L</div>
+        <div class="flex flex-col">
+          <span class="font-heading font-bold text-2xl tracking-tight leading-none" style="color: var(--brand-dark)">
+            Reading<span style="color: var(--brand-indigo)">Huddle</span>
+          </span>
+          <span class="text-[10px] font-bold uppercase tracking-widest" style="color: var(--brand-mint)">Reading Buddy</span>
+        </div>
+      </div>
+
+      <!-- XP + Tickets badge + settings -->
+      <div class="flex items-center gap-3">
+        <!-- XP badge — click triggers star spin + coin burst -->
+        <div
+          class="relative bg-white/90 backdrop-blur-md px-4 py-2 rounded-xl shadow-xl border-2 flex items-center gap-3 cursor-pointer select-none transition-all"
+          style="border-color: rgba(245,158,11,0.3)"
+          :class="xpClicked ? 'scale-90' : ''"
+          @click="triggerXpClick"
+        >
+          <span class="text-lg" :class="xpClicked ? 'animate-star-spin' : ''">⭐</span>
+          <span class="font-heading font-bold text-amber-600">{{ stats.xp }}</span>
+          <span class="text-gray-300">|</span>
+          <span class="text-lg" :class="ticketClicked ? 'animate-ticket-wobble' : ''">🎟️</span>
+          <span class="font-heading font-bold" style="color: var(--brand-mint)">{{ stats.tickets }}</span>
+
+          <!-- Burst coins on XP click -->
+          <span
+            v-for="c in burstCoins" :key="c.id"
+            class="absolute text-sm animate-coin-burst"
+            :style="`--tx:${c.tx}px; --ty:${c.ty}px; left:50%; top:50%;`"
+          >🪙</span>
+        </div>
+
+        <!-- Settings button -->
+        <button
+          @click="showSettings = true"
+          class="w-14 h-14 bg-white/90 backdrop-blur-md rounded-xl flex items-center justify-center text-2xl transition-all border-2 border-white shadow-xl hover:scale-110 active:scale-95"
+          style="hover:color: var(--brand-indigo)"
+        >⚙️</button>
+      </div>
+    </header>
+
+    <!-- ── MAIN CONTENT ── -->
+    <main class="max-w-4xl mx-auto min-h-[60vh]">
+      <section class="h-full flex flex-col justify-between gap-4 pb-4">
+
+        <!-- Welcome heading -->
+        <div class="text-center py-4">
+          <h1 class="font-heading text-5xl font-bold mb-1" style="color: var(--brand-dark)">Welcome Back! 👋</h1>
+          <p class="text-lg text-gray-500 font-medium">Ready for today's reading adventure?</p>
+        </div>
+
+        <!-- Announcements Ticker TODO 3-->
+        <div v-if="announcements.length > 0" class="premium-card px-5 py-3" style="background: rgba(245,158,11,0.05); border-color: rgba(245,158,11,0.2)">
+          <div class="flex items-center gap-3">
+            <span class="text-xl">📢</span>
+            <div class="flex-grow overflow-hidden">
+              <p class="text-sm font-bold truncate" style="color: var(--brand-dark)">
+                <span class="px-2 py-0.5 rounded-full text-[10px] font-black uppercase mr-2 text-gray-900" style="background: var(--brand-gold)">New</span>
+                {{ announcements[0].title }} — {{ announcements[0].content }}
+              </p>
+            </div>
+            <span class="text-lg">{{ announcements[0].icon }}</span>
+          </div>
+        </div>
+
+        <!-- Daily Form CTA TODO 2-->
+        <NuxtLink
+          to="/reader/forms"
+          class="w-full rounded-3xl p-6 text-white text-left group cursor-pointer hover:scale-[1.02] active:scale-[0.98] transition-all duration-200 shadow-lg block"
+          style="background: linear-gradient(135deg, #E0604D 0%, #c94a38 100%); border-bottom: 6px solid #a83d2e; text-decoration: none;"
+        >
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-bold uppercase tracking-widest opacity-80 mb-1">Today's Challenge</p>
+              <h3 class="font-heading text-3xl font-black">Start Your Daily Form 📝</h3>
+              <p class="text-base opacity-80 mt-1 font-medium">
+                {{ completedThisWeek.length }} out of {{ thisWeekForms.length }} completed this week.
+                {{ completionMessage }}
+              </p>
+            </div>
+            <span class="text-5xl group-hover:translate-x-2 transition-transform duration-300">➜</span>
+          </div>
+        </NuxtLink>
+        <!-- TODO 6-->>
+        <!-- 7-Day Raffle Progress -->
+        <div class="premium-card p-5 bg-white/80" style="border: 2px solid rgba(224,96,77,0.1)">
+          <div class="flex items-center justify-between mb-3">
+            <h3 class="font-heading font-black text-base flex items-center gap-2" style="color: var(--brand-dark)">
+              🎟️ Weekly Raffle Progress
+            </h3>
+            <span class="text-sm font-bold text-gray-400">
+              {{ completedThisWeek.length }} / {{ thisWeekForms.length }} days
+            </span>
+          </div>
+
+          <div class="flex items-center justify-between gap-2">
+            <div v-for="form in thisWeekForms" :key="form.id" class="flex-1 flex flex-col items-center gap-1">
+              <div
+                class="w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold transition-all shadow-sm"
+                :class="
+                  completedWeeks.includes(form.id)
+                    ? 'text-white scale-110'
+                    : form.missed
+                      ? 'text-amber-500 border-2 border-amber-300 border-dashed bg-amber-100'
+                      : 'text-gray-300 border-2 border-gray-200 bg-gray-100'
+                "
+                :style="completedWeeks.includes(form.id) ? `background: var(--brand-mint)` : ''"
+              >
+                <span v-if="completedWeeks.includes(form.id)">✓</span>
+                <span v-else>{{ form.dayNum }}</span>
+              </div>
+              <span class="text-[10px] font-bold text-gray-400 uppercase">{{ form.day.substring(0,3) }}</span>
+            </div>
+          </div>
+
+          <div class="mt-3 h-2 bg-gray-100 rounded-full overflow-hidden">
+            <div
+              class="h-full rounded-full transition-all duration-500"
+              style="background: linear-gradient(to right, var(--brand-mint), var(--brand-indigo))"
+              :style="`width: ${(completedThisWeek.length / thisWeekForms.length) * 100}%`"
+            />
+          </div>
+          <p v-if="completedThisWeek.length === thisWeekForms.length"
+             class="text-center font-bold mt-2 text-sm animate-pop"
+             style="color: var(--brand-mint)">
+            🎉 All done this week! Your raffle ticket is in!
+          </p>
+        </div>
+
+      </section>
+    </main>
+
+    <!-- ── LEFT / RIGHT ARROWS ── -->
+    <!-- Left: Store -->
+    <NuxtLink
+      to="/reader/decor"
+      class="fixed left-2 top-1/2 -translate-y-1/2 z-[100] p-2 flex items-center gap-1 transition-all cursor-pointer group"
+      style="color: rgba(224,96,77,0.6); text-decoration:none;"
+    >
+      <svg class="w-12 h-16 group-hover:-translate-x-1 transition-transform drop-shadow-md" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+      </svg>
+      <span class="text-sm font-bold uppercase tracking-wide">Store</span>
+    </NuxtLink>
+
+    <!-- Right: Forms -->
+    <NuxtLink
+      to="/reader/forms"
+      class="fixed right-2 top-1/2 -translate-y-1/2 z-[100] p-2 flex items-center gap-1 transition-all cursor-pointer group"
+      style="color: rgba(224,96,77,0.6); text-decoration:none;"
+    >
+      <span class="text-sm font-bold uppercase tracking-wide">Forms</span>
+      <svg class="w-12 h-16 group-hover:translate-x-1 transition-transform drop-shadow-md" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    </NuxtLink>
+
+    <!-- ── SETTINGS PANEL (slide-up) ── -->
+    <Transition name="slide-up">
+      <div v-if="showSettings" class="fixed inset-0 z-50 flex flex-col justify-end">
+        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="showSettings = false" />
+        <div class="relative rounded-t-[2.5rem] p-8 space-y-5 shadow-2xl max-h-[90vh] overflow-y-auto bg-white">
+          <div class="w-12 h-1.5 rounded-full bg-gray-300 mx-auto -mt-2" />
+          <div class="text-center mb-2">
+            <div class="text-5xl mb-3">⚙️</div>
+            <h2 class="font-heading text-3xl font-bold" style="color: var(--brand-dark)">Settings</h2>
+          </div>
+
+          <!-- Kid profiles TODO 1-->
+          <div>
+            <label class="block text-xs font-black text-gray-400 uppercase tracking-widest mb-3">Who's Reading?</label>
+            <div class="flex gap-4 justify-center flex-wrap">
+              <div
+                v-for="(profile, idx) in kidProfiles" :key="idx"
+                @click="activeProfileIdx = idx"
+                class="flex flex-col items-center gap-2 cursor-pointer transition-all p-3 rounded-xl"
+                :class="activeProfileIdx === idx ? 'scale-105 shadow-md' : 'opacity-70 hover:opacity-100'"
+                :style="activeProfileIdx === idx ? 'background: rgba(224,96,77,0.1)' : ''"
+              >
+                <div class="w-16 h-16 rounded-xl flex items-center justify-center text-2xl font-black text-white shadow-md" :class="profile.color">
+                  {{ profile.avatar }}
+                </div>
+                <span class="text-xs font-bold" style="color: var(--brand-dark)">{{ profile.name }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Font size -->
+          <div>
+            <label class="block text-xs font-black text-gray-400 uppercase tracking-widest mb-3">Text Size</label>
+            <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-xl">
+              <span class="text-sm font-bold text-gray-400">A</span>
+              <input type="range" min="1" max="1.5" step="0.1" v-model.number="settings.fontSize"
+                     class="flex-grow h-2 bg-gray-200 rounded-full appearance-none cursor-pointer accent-brand-indigo" />
+              <span class="text-xl font-bold text-gray-400">A</span>
+              <span class="text-xs font-bold px-2 py-1 rounded-lg" style="color: var(--brand-indigo); background: rgba(224,96,77,0.1)">
+                {{ Math.round(settings.fontSize * 100) }}%
+              </span>
+            </div>
+          </div>
+
+          <!-- Dyslexia font -->
+          <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
+            <div>
+              <h4 class="font-bold" style="color: var(--brand-dark)">Dyslexia-Friendly Font</h4>
+              <p class="text-xs text-gray-400">Uses OpenDyslexic typeface</p>
+            </div>
+            <button
+              @click="settings.dyslexiaFont = !settings.dyslexiaFont"
+              class="w-14 h-8 rounded-full transition-all relative"
+              :style="settings.dyslexiaFont ? `background: var(--brand-mint)` : 'background: #d1d5db'"
+            >
+              <div class="w-6 h-6 bg-white rounded-full shadow-md absolute top-1 transition-all"
+                   :class="settings.dyslexiaFont ? 'right-1' : 'left-1'" />
+            </button>
+          </div>
+
+          <!-- Language -->
+          <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
+            <div>
+              <h4 class="font-bold" style="color: var(--brand-dark)">Language / Idioma</h4>
+              <p class="text-xs text-gray-400">{{ settings.language === 'en' ? 'English' : 'Español' }}</p>
+            </div>
+            <button
+              @click="settings.language = settings.language === 'en' ? 'es' : 'en'"
+              class="px-4 py-2 rounded-xl font-bold text-sm transition"
+              style="background: rgba(224,96,77,0.1); color: var(--brand-indigo)"
+            >
+              {{ settings.language === 'en' ? '🇪🇸 Español' : '🇺🇸 English' }}
+            </button>
+          </div>
+
+          <button @click="showSettings = false"
+            class="w-full py-4 rounded-2xl font-heading font-bold text-lg text-white transition transform active:scale-95 shadow-lg hover:bg-black"
+            style="background: var(--brand-dark)"
+          >Done ✓</button>
+        </div>
+      </div>
+    </Transition>
+
+  </div>
+</template>
+
+<style>
+@import './reader.css';
+</style>
diff --git a/app/pages/reader/index.vue b/app/pages/reader/index.vue
new file mode 100644
index 0000000..1094087
--- /dev/null
+++ b/app/pages/reader/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+</script>
+
+<template>
+  <div class="min-h-screen bg-[#f5ede3] flex flex-col items-center justify-center gap-12 p-8">
+    
+    <div class="text-8xl animate-bounce animation-duration: 2">🚀</div>
+    
+    <div class="text-center space-y-3">
+      <h1 class="text-6xl font-black text-gray-900">ReadingHuddle</h1>
+      <p class="text-xl text-gray-400">Where are you heading today?</p>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 w-full max-w-2xl">
+      
+      <!-- Admin -->
+      <NuxtLink to="/admin"
+        class="group bg-white rounded-3xl border-2 border-gray-100 p-10 text-center shadow-sm hover:border-indigo-400 hover:shadow-lg transition-all duration-200"
+      >
+        <div class="w-20 h-20 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center text-5xl mb-5 mx-auto group-hover:rotate-12 transition-transform duration-300">
+          🏫
+        </div>
+        <h3 class="text-2xl font-bold text-gray-900 mb-2">Faculty & Admin</h3>
+        <p class="text-gray-400 font-medium">Manage students, curriculum & raffles.</p>
+      </NuxtLink>
+
+      <!-- Reader -->
+      <NuxtLink to="/reader/home"
+        class="group bg-white rounded-3xl border-2 border-gray-100 p-10 text-center shadow-sm hover:border-amber-400 hover:shadow-lg transition-all duration-200"
+      >
+        <div class="w-20 h-20 bg-amber-50 text-amber-500 rounded-2xl flex items-center justify-center text-5xl mb-5 mx-auto group-hover:rotate-12 transition-transform duration-300">
+          ✨
+        </div>
+        <h3 class="text-2xl font-bold text-gray-900 mb-2">Reading Buddy</h3>
+        <p class="text-gray-400 font-medium">Complete challenges, log books & win prizes!</p>
+      </NuxtLink>
+
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/pages/reader/reader.css b/app/pages/reader/reader.css
new file mode 100644
index 0000000..4f50f25
--- /dev/null
+++ b/app/pages/reader/reader.css
@@ -0,0 +1,272 @@
+/* ============================================================
+   ReadingHuddle — Reader Pages Shared CSS
+   Exact port of the HTML reference
+   Fonts: Fredoka (headings), Quicksand (body)
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');
+
+/* ---------- CSS Variables ---------- */
+:root {
+  --brand-indigo: #E0604D;
+  --brand-gold:   #F59E0B;
+  --brand-amber:  #D97706;
+  --brand-mint:   #2DD4BF;
+  --brand-pink:   #FB7185;
+  --brand-blue:   #38BDF8;
+  --brand-dark:   #0F172A;
+  --bg-gradient:
+    radial-gradient(at 0% 0%,   hsla(25, 95%, 75%, 0.3)  0px, transparent 50%),
+    radial-gradient(at 100% 0%, hsla(10, 90%, 70%, 0.25) 0px, transparent 50%),
+    radial-gradient(at 100% 100%, hsla(40, 95%, 70%, 0.25) 0px, transparent 50%);
+}
+
+/* ---------- Body / Base ---------- */
+.reader-app {
+  font-family: 'Quicksand', sans-serif;
+  background-color: #f5ede3;
+  background-image: var(--bg-gradient);
+  background-attachment: fixed;
+  min-height: 100vh;
+  transition: background 0.5s ease, color 0.5s ease;
+}
+
+.reader-app h1, .reader-app h2, .reader-app h3,
+.reader-app h4, .reader-app h5, .reader-app h6,
+.reader-app .font-heading {
+  font-family: 'Fredoka', sans-serif;
+}
+
+/* ---------- Themes ---------- */
+.reader-app.theme-dark {
+  --brand-dark: #f8fafc;
+  --bg-gradient:
+    radial-gradient(at 0% 0%,   hsla(250, 20%, 20%, 0.5) 0px, transparent 50%),
+    radial-gradient(at 100% 0%, hsla(280, 30%, 15%, 0.5) 0px, transparent 50%),
+    radial-gradient(at 100% 100%, hsla(200, 30%, 10%, 0.5) 0px, transparent 50%);
+  background-color: #0f172a !important;
+  color: #f8fafc;
+}
+
+.reader-app.theme-sepia {
+  --brand-dark: #433422;
+  --bg-gradient: none;
+  background-color: #f4ecd8 !important;
+}
+
+.reader-app.theme-sunset {
+  background-color: #fff5f5 !important;
+  --bg-gradient:
+    radial-gradient(at 0% 0%,   hsla(10, 90%, 75%, 0.25) 0px, transparent 50%),
+    radial-gradient(at 100% 100%, hsla(280, 90%, 70%, 0.25) 0px, transparent 50%);
+}
+
+.reader-app.theme-ocean {
+  background-color: #f0f9ff !important;
+  --bg-gradient:
+    radial-gradient(at 0% 0%,   hsla(200, 90%, 75%, 0.25) 0px, transparent 50%),
+    radial-gradient(at 100% 100%, hsla(180, 90%, 70%, 0.25) 0px, transparent 50%);
+}
+
+.reader-app.theme-forest {
+  background-color: #f0fdf4 !important;
+  --bg-gradient:
+    radial-gradient(at 0% 0%,   hsla(140, 80%, 70%, 0.25) 0px, transparent 50%),
+    radial-gradient(at 100% 100%, hsla(120, 70%, 60%, 0.25) 0px, transparent 50%);
+}
+
+.reader-app.theme-candy {
+  background-color: #fdf2f8 !important;
+  --bg-gradient:
+    radial-gradient(at 0% 0%,   hsla(330, 90%, 85%, 0.35) 0px, transparent 50%),
+    radial-gradient(at 100% 100%, hsla(280, 80%, 85%, 0.35) 0px, transparent 50%);
+}
+
+.reader-app.theme-fire {
+  background-color: #fff7ed !important;
+  --bg-gradient:
+    radial-gradient(at 30% 40%, hsla(20, 95%, 65%, 0.3)  0px, transparent 50%),
+    radial-gradient(at 70% 60%, hsla(0,  90%, 60%, 0.2)  0px, transparent 50%);
+}
+
+.reader-app.theme-ice {
+  background-color: #f0f9ff !important;
+  --bg-gradient:
+    radial-gradient(at 0% 0%,   hsla(200, 100%, 95%, 0.4) 0px, transparent 50%),
+    radial-gradient(at 100% 100%, hsla(190, 90%, 90%, 0.35) 0px, transparent 50%);
+}
+
+/* ---------- Dyslexia Font ---------- */
+.reader-app.dyslexia-font,
+.reader-app.dyslexia-font * {
+  font-family: 'OpenDyslexic', sans-serif !important;
+}
+
+/* ---------- Premium Card ---------- */
+.premium-card {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 2.5rem;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.1);
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.premium-card:hover {
+  transform: translateY(-8px) scale(1.01);
+  box-shadow: 0 20px 40px rgba(79, 70, 229, 0.1);
+  border-color: var(--brand-indigo);
+}
+
+/* ---------- Buttons ---------- */
+.btn-fun {
+  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
+}
+.btn-fun:hover  { transform: translateY(-2px) scale(1.02); }
+.btn-fun:active { transform: scale(0.95); }
+
+.btn-bounce:active { transform: scale(0.95); }
+
+/* ---------- Nav Bar ---------- */
+.nav-bar {
+  position: fixed;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(44, 62, 80, 0.95);
+  backdrop-filter: blur(15px);
+  padding: 0.8rem 2rem;
+  border-radius: 2.5rem;
+  display: flex;
+  gap: 2.5rem;
+  z-index: 100;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.nav-item {
+  padding: 0.7rem 1.5rem;
+  color: #94a3b8;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-size: 0.85rem;
+}
+
+.nav-item.active {
+  color: white;
+  transform: translateY(-5px);
+}
+
+/* ---------- Animations ---------- */
+@keyframes pop {
+  0%   { transform: scale(0.9); opacity: 0; }
+  100% { transform: scale(1);   opacity: 1; }
+}
+.animate-pop { animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
+
+@keyframes popBounce {
+  0%, 100% { transform: translateY(0); }
+  20%       { transform: translateY(-8px); }
+  40%       { transform: translateY(0); }
+  60%       { transform: translateY(-4px); }
+  80%       { transform: translateY(0); }
+}
+.animate-pop-bounce { animation: popBounce 1.5s ease-in-out; }
+
+/* ── Click-triggered XP badge: star spins ── */
+@keyframes starSpin {
+  0%   { transform: rotate(0deg) scale(1); }
+  30%  { transform: rotate(200deg) scale(1.5); }
+  100% { transform: rotate(360deg) scale(1); }
+}
+.animate-star-spin { animation: starSpin 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
+
+/* ── Click-triggered XP badge: 3 coins burst outward ── */
+@keyframes coinBurst {
+  0%   { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.2); }
+  60%  { opacity: 1; }
+  100% { opacity: 0; transform: translateX(calc(-50% + var(--tx, 0px))) translateY(calc(-50% + var(--ty, -40px))) scale(0.4); }
+}
+.animate-coin-burst {
+  animation: coinBurst 0.65s ease-out forwards;
+  pointer-events: none;
+}
+
+/* ── Click-triggered Ticket badge: wobble ── */
+@keyframes ticketWobble {
+  0%   { transform: rotate(0deg) scale(1); }
+  20%  { transform: rotate(-22deg) scale(1.25); }
+  50%  { transform: rotate(16deg) scale(1.1); }
+  80%  { transform: rotate(-8deg) scale(1.05); }
+  100% { transform: rotate(0deg) scale(1); }
+}
+.animate-ticket-wobble { animation: ticketWobble 0.5s ease-in-out; }
+
+/* ── Click-triggered Ticket badge: ticket flies up into box ── */
+@keyframes ticketFly {
+  0%   { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); }
+  40%  { opacity: 1; transform: translateX(-50%) translateY(-280%) scale(0.9); }
+  100% { opacity: 0; transform: translateX(-50%) translateY(-400%) scale(0.3); }
+}
+.animate-ticket-fly {
+  animation: ticketFly 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+  pointer-events: none;
+}
+
+/* ── Box pops above ticket badge ── */
+@keyframes boxShake {
+  0%, 100% { transform: translateX(-50%) rotate(0deg); }
+  20%       { transform: translateX(-50%) rotate(-10deg); }
+  50%       { transform: translateX(-50%) rotate(10deg); }
+  80%       { transform: translateX(-50%) rotate(-5deg); }
+}
+.animate-box-shake { animation: boxShake 0.5s ease-in-out 0.3s; }
+
+/* ── Raffle ticket drag overlay ── */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* ── Shop purchase celebration ── */
+@keyframes shopPop {
+  0%   { transform: scale(0.5); opacity: 0; }
+  70%  { transform: scale(1.1); opacity: 1; }
+  100% { transform: scale(1); }
+}
+.animate-shop-pop { animation: shopPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
+
+/* ── Slow spin for decorative elements ── */
+@keyframes spinSlow {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+.animate-spin-slow { animation: spinSlow 8s linear infinite; }
+
+/* ── Fade transition ── */
+.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
+.fade-enter-from,  .fade-leave-to     { opacity: 0; }
+
+/* ── Slide-up (settings panel) ── */
+.slide-up-enter-active { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.slide-up-leave-active { transition: transform 0.25s ease-in; }
+.slide-up-enter-from   { transform: translateY(100%); }
+.slide-up-leave-to     { transform: translateY(100%); }
+
+/* ── Box pop transition ── */
+.box-pop-enter-active { animation: boxPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.box-pop-leave-active { transition: opacity 0.15s; }
+.box-pop-leave-to     { opacity: 0; }
+@keyframes boxPopIn {
+  from { opacity: 0; transform: translateX(-50%) scale(0.3); }
+  to   { opacity: 1; transform: translateX(-50%) scale(1); }
+}
+
+/* ── Question step fade ── */
+.step-fade-enter-active, .step-fade-leave-active { transition: opacity 0.25s ease; }
+.step-fade-enter-from,  .step-fade-leave-to     { opacity: 0; }
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index dfcbd5e..77e9ae6 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -12,7 +12,6 @@ model User {
   name          String
   email         String
   emailVerified Boolean   @default(false)
-  image         String?
   createdAt     DateTime  @default(now())
   updatedAt     DateTime  @updatedAt
   sessions      Session[]
diff --git a/prisma/seed.ts b/prisma/seed.ts
index b755720..f180eef 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -9,7 +9,7 @@ async function main() {
   const user1 = await prisma.user.create({
     data: {
       name: 'Oryx',
-      email: 'oryx@example.com',
+      email: 'parent1@example.com',
       emailVerified: true,
       accounts: {
         create: {
@@ -17,18 +17,17 @@ async function main() {
           providerId: 'credential', // Common for email/password
           password: 'hashed_password_here', // In a real app, hash this!
           students: {
-            create: { name: 'Crota' },
+            create: { name: 'Crota', exp: 5000, settings: { dyslexiaFont: true, fontSize: 1, language: 'en'}} },
           },
         },
       },
-    },
-  })
+    })
 
   // 2. Create a Parent with an OAuth Account (e.g., Google) and multiple children
   const user2 = await prisma.user.create({
     data: {
       name: 'Richard Watterson',
-      email: 'RW123456789@gmail.com',
+      email: 'parent2@gmail.com',
       emailVerified: true,
       accounts: {
         create: {
@@ -51,7 +50,7 @@ async function main() {
   const admin1 = await prisma.user.create({
     data: {
       name: 'Gary Admin',
-      email: 'admin@gary.com',
+      email: 'admin1@example.com',
       emailVerified: true,
       accounts: {
         create: {
@@ -75,11 +74,10 @@ async function main() {
           accountId: 'admin2_local_id',
           providerId: 'credential',
           password: 'hashed_password_here',
-          admin: { create: { settings: {} } },
+          admin: { create: { settings: { dyslexiaFont: true, fontSize: 1, language: 'en' } } } },
         },
       },
-    },
-  })
+    })
 
   console.log({ user1, user2, admin1, admin2 })
   console.log('Seeding finished.')
@@ -94,4 +92,4 @@ main()
     console.error(e)
     await prisma.$disconnect()
     process.exit(1)
-  })
+  })
\ No newline at end of file
diff --git a/server/api/announcement/[id].ts b/server/api/announcement/[id].ts
new file mode 100644
index 0000000..e69de29
diff --git a/server/api/announcement/index.ts b/server/api/announcement/index.ts
new file mode 100644
index 0000000..06150f3
--- /dev/null
+++ b/server/api/announcement/index.ts
@@ -0,0 +1,21 @@
+import { Prisma } from '~~/prisma/generated/client'
+import { prisma } from '../../utils/prisma'
+
+
+export default defineEventHandler(async (event) => {
+  const method = event.node.req.method
+
+  if (method === 'GET') { return await prisma.announcement.findMany() }
+
+  if (method === 'POST') {
+    const body = await readBody(event)
+    return await prisma.announcement.create({
+      data: {
+        content: body.content,
+        postDate: new Date(body.postDate),
+        expiryDate: new Date(body.expiryDate),
+        author: body.author,
+      }
+    })
+  }
+})
\ No newline at end of file
diff --git a/server/api/student/[id].ts b/server/api/student/[id].ts
new file mode 100644
index 0000000..f406c2d
--- /dev/null
+++ b/server/api/student/[id].ts
@@ -0,0 +1,38 @@
+import { prisma } from '../../utils/prisma'
+
+export default defineEventHandler(async (event) => {
+  const method = event.node.req.method
+  const id = event.context.params?.id
+  
+  //validate id path parameter
+  if (!id || isNaN(Number(id))) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Invalid ID',
+    })
+  }
+  const studentId = Number(id)
+
+  if (method === 'GET') {
+
+    const student = await prisma.student.findUnique({
+      where: {
+        id: studentId,
+      },
+    })
+
+    if (!student) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Student not found',
+      })
+    }
+
+    return student
+  }
+
+  if (method === 'PUT') {}
+
+  if (method === 'DELETE') {}
+
+})
\ No newline at end of file
diff --git a/server/api/student/index.ts b/server/api/student/index.ts
new file mode 100644
index 0000000..3c9d0d3
--- /dev/null
+++ b/server/api/student/index.ts
@@ -0,0 +1,21 @@
+import { prisma } from '../../utils/prisma'
+
+export default defineEventHandler(async (event) => {
+  const method = event.node.req.method
+
+  if (method === 'GET') {
+    const students = await prisma.student.findMany()
+    return students
+  }
+
+  if (method === 'POST') {
+    const body = await readBody(event)
+
+    await prisma.student.create({
+      data: {
+        name: body.name,
+        parent: Number(body.parent),
+      }
+    })
+  }
+})
\ No newline at end of file