diff --git a/app/composables/useCurrentFormGroup.ts b/app/composables/useCurrentFormGroup.ts
index 89cc33c..b7f4ee5 100644
--- a/app/composables/useCurrentFormGroup.ts
+++ b/app/composables/useCurrentFormGroup.ts
@@ -1,4 +1,4 @@
-import type { FormGroup, Form } from '~~/prisma/generated/client'
+import type { FormGroup, Form, FormComponent } from '~~/prisma/generated/client'
 
 export type CurrentFormGroupState = {
   activeFormGroup: FormGroup | null
@@ -13,7 +13,7 @@ export const useCurrentFormGroup = () => {
 
   const loadActiveFormGroup = async () => {
     try {
-      const formGroupAPIResponse = await $fetch<FormGroup | FormGroup[]>('/api/formgroup?active=true')
+      const formGroupAPIResponse = await $fetch<FormGroup | FormGroup[]>('/api/formGroup?active=true')
 
       // Handle if the API returns an array or single item
       const activeFg = Array.isArray(formGroupAPIResponse) ? formGroupAPIResponse[0] : formGroupAPIResponse
@@ -23,7 +23,7 @@ export const useCurrentFormGroup = () => {
 
         try {
           const formsAPIResponse = await $fetch<Form[]>('/api/form', {
-            query: { formGroup: activeFg.id }
+            query: { formGroup: activeFg.id, published: true }
           })
 
           FormGroup.value.forms = Array.isArray(formsAPIResponse) ? formsAPIResponse : []
@@ -49,4 +49,4 @@ export const useCurrentFormGroup = () => {
     loadActiveFormGroup,
     totalFormsInGroup
   }
-}
+}
\ No newline at end of file
diff --git a/app/pages/reader/formInProgress.vue b/app/pages/reader/formInProgress.vue
new file mode 100644
index 0000000..de691cb
--- /dev/null
+++ b/app/pages/reader/formInProgress.vue
@@ -0,0 +1,2 @@
+<script setup lang="ts"></script>
+<template> </template>
\ No newline at end of file
diff --git a/app/pages/reader/forms.vue b/app/pages/reader/forms.vue
index 158469e..9ff619e 100644
--- a/app/pages/reader/forms.vue
+++ b/app/pages/reader/forms.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
 definePageMeta({ ssr: false })
 
-const settings = reactive({ theme: 'light', dyslexiaFont: false, language: 'en', fontSize: 1 })
+const { student, settings } = useCurrentStudent()
+const { FormGroup, totalFormsInGroup } = useCurrentFormGroup()
+const { tickets } = useCurrentStudentProgress()
 
-const stats = reactive({ xp: 1250, booksRead: 14, streak: 5, tickets: 3 })
+const stats = computed(() => ({
+  xp: student.value ? student.value.exp : 0,
+  tickets: tickets.value? tickets.value : 0,
+}))
 
 const themeClass = computed(() => {
-  const t = settings.theme !== 'light' ? `theme-${settings.theme}` : ''
-  const d = settings.dyslexiaFont ? 'dyslexia-font' : ''
-  return `reader-app ${t} ${d}`.trim()
+  const d = settings.value.dyslexiaFont ? 'dyslexia-font' : ''
+  return `reader-app ${d}`.trim()
 })
 
 // ── Click badge animations ──
diff --git a/app/pages/reader/home.vue b/app/pages/reader/home.vue
index ccba613..cba775d 100644
--- a/app/pages/reader/home.vue
+++ b/app/pages/reader/home.vue
@@ -16,8 +16,9 @@ definePageMeta({ ssr: false })
 const { student, settings: globalSettings, loadStudent } = useCurrentStudent()
 const { totalFormsInGroup: totalForms, loadActiveFormGroup} = useCurrentFormGroup()
 const { tickets: tickets, loadProgress} = useCurrentStudentProgress()
-//await loadActiveFormGroup()
-//await loadProgress()
+await loadStudent(2)
+await loadActiveFormGroup()
+await loadProgress()
 
 // ── Theme class ──
 const themeClass = computed(() => {
diff --git a/server/api/component/route.ts b/server/api/form/[id].ts
similarity index 100%
rename from server/api/component/route.ts
rename to server/api/form/[id].ts
diff --git a/server/api/form/index.ts b/server/api/form/index.ts
new file mode 100644
index 0000000..36a0ce4
--- /dev/null
+++ b/server/api/form/index.ts
@@ -0,0 +1,15 @@
+import { Prisma } from '~~/prisma/generated/client'
+import { prisma } from '../../utils/prisma'
+import { getQuery } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  const method = event.node.req.method
+  const query = getQuery(event) 
+
+  //GET /api/form?formGroup=1&published=true to get published forms for a specific form group
+  if (method === 'GET') {
+    return await prisma.form.findMany({
+      where: query.formGroup ? { formGroup: Number(query.formGroup), published: Boolean(query.published) } : {}
+    })
+  }
+})
\ No newline at end of file
diff --git a/server/api/form/route.ts b/server/api/formComponent/[id].ts
similarity index 100%
rename from server/api/form/route.ts
rename to server/api/formComponent/[id].ts
diff --git a/server/api/formComponent/index.ts b/server/api/formComponent/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/server/api/formGroup/[id].ts b/server/api/formGroup/[id].ts
new file mode 100644
index 0000000..e69de29
diff --git a/server/api/formGroup/index.ts b/server/api/formGroup/index.ts
new file mode 100644
index 0000000..28bfa26
--- /dev/null
+++ b/server/api/formGroup/index.ts
@@ -0,0 +1,25 @@
+import { Prisma } from '~~/prisma/generated/client'
+import { prisma } from '../../utils/prisma'
+import { getQuery } from 'h3'
+import { lte } from 'zod'
+import { _isoDateTime } from 'better-auth'
+
+export default defineEventHandler(async (event) => {
+  const method = event.node.req.method
+  const query = getQuery(event)
+  const now = new Date()
+
+
+  //Get /api/formGroup?active=true to get only active form groups
+  if (method === 'GET') {
+    return await prisma.formGroup.findMany({
+      where: query.active === 'true' ? {
+        startDate: { lte: now },
+        OR: [
+          { endDate: null },
+          { endDate: { gte: now } } ]
+      } : {}
+    })
+  }
+
+})
\ No newline at end of file
diff --git a/server/api/formSubmission/index.ts b/server/api/formSubmission/index.ts
new file mode 100644
index 0000000..fe6d2b1
--- /dev/null
+++ b/server/api/formSubmission/index.ts
@@ -0,0 +1,33 @@
+import { Prisma } from '~~/prisma/generated/client'
+import { prisma } from '../../utils/prisma'
+import { getQuery } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  const method = event.node.req.method
+  const query = getQuery(event)
+
+  if (method === 'GET') {
+    const where: Prisma.FormSubmissionWhereInput = {}
+    
+    if (query.form) {
+      where.form = Number(query.form)
+    }
+    if (query.student) {
+      where.student = Number(query.student)
+    }
+
+    return await prisma.formSubmission.findMany({
+      where
+    })
+  }
+
+  if (method === 'POST') {
+    const body = await readBody(event)
+    return await prisma.formSubmission.create({
+      data: {
+        form: Number(body.form),
+        student: Number(body.student)
+      }
+    })
+  }
+})
\ No newline at end of file