From 36bf196cb8b5238ff6f6d2eeed82383f5bb48dd8 Mon Sep 17 00:00:00 2001
From: Maria Kristin Olafsdottir <marikola@stud.ntnu.no>
Date: Thu, 30 Apr 2026 15:12:25 +0200
Subject: [PATCH] feat: classroom control (#69)

* allow editing

* add missing pages

* update fetchJson to accept empty json

* fix remove and approve pupils

* show already added teachers

* add task page with creation, deleting and editing

* remove comments

* add edit and create task page

* add pending page

* move store to model, update classroom table

* add confirmation modal

* add option to delete classroom

* remove +

* i18n

* i18n

* update task view and creation

* move task related classroom components to own folder

* update tests

* update task view

* update task view to match stops better

* update task creation and editing

* styling

* update task view

* route to classroom details

* allow seeing unpublished tasks

* update join routing to determine path based on membership

* add option to publish and delete tasks

* add task creation and updating to task store

* remove unused file

* i18n

* reload en.ts

* update routing

* update routing

* add notebook back to pupiltable

* add notebook back to pupiltable

* fix test

* fix build errors

* fix routing for join page

* i18n

* remove double route

* route to task slug

* fix add teacher

* fix merge breaks

* formatting

* formatting

* change id to classroomId to match rest

* comment

* remove comment

* change id to classroomId

* remove double add teacher logic

* fixes

* update names

* fix test

* format

* add back targets

* format

* add memebrshipStatus where missing

---------

Co-authored-by: Maria <145002050+marikolafs@users.noreply.github.com>
---
 src/app/__tests__/AppShell.spec.ts            |   2 +
 src/app/router/__tests__/auth-routing.spec.ts |   5 +
 src/app/router/index.ts                       |  88 +++---
 src/auth/api/auth.api.ts                      |  12 +-
 src/auth/model/auth.types.ts                  |   1 +
 src/auth/pages/__tests__/login-pages.spec.ts  |   1 +
 .../__tests__/PupilAgentCard.spec.ts          |   1 +
 .../model/__tests__/avatar.store.spec.ts      |   2 +
 .../_tests_/classrooms.store.spec.ts          |  44 ++-
 src/classrooms/_tests_/pupil-routing.spec.ts  |   2 +
 src/classrooms/api/classrooms.api.ts          |  70 +++--
 src/classrooms/components/ClassroomTable.vue  |  33 +-
 src/classrooms/components/ConfirmModal.vue    |  60 ++++
 src/classrooms/components/PupilTable.vue      | 259 +++++++++++-----
 .../__tests__/ClassroomTable.spec.ts          |   8 +-
 .../components/__tests__/PupilTable.spec.ts   |  15 +-
 .../components/composables/UseTeacherStops.ts |  19 ++
 .../components/tasks/ClassroomTaskSidebar.vue |  44 +++
 .../components/tasks/TaskItemsEditor.vue      |  60 ++++
 .../components/tasks/TaskMetaEditor.vue       |  78 +++++
 .../components/tasks/TaskOptionEditor.vue     |  91 ++++++
 .../{store => model}/classrooms.store.ts      |  60 +++-
 src/classrooms/pages/ClassroomDetails.vue     | 198 ++++++++++--
 src/classrooms/pages/ClassroomMystery.vue     |   1 +
 .../pages/ClassroomNotifications.vue          |   1 +
 src/classrooms/pages/ClassroomTasks.vue       | 281 ++++++++++++++++++
 src/classrooms/pages/EditClassroomTask.vue    | 177 +++++++++++
 src/classrooms/pages/JoinClassroom.vue        |   6 +-
 src/classrooms/pages/NewClassroom.vue         |   2 +-
 src/classrooms/pages/NewClassroomTask.vue     | 207 +++++++++++++
 src/classrooms/pages/PendingApproval.vue      |  67 +++++
 .../pages/__tests__/ClassroomDetails.spec.ts  |  10 +-
 src/classrooms/routes.ts                      |  34 ++-
 .../__tests__/LeaderboardComponent.spec.ts    |   1 +
 src/locales/nb.ts                             |  72 +++++
 src/map/model/__tests__/map.store.spec.ts     |   1 +
 .../model/__tests__/mystery.store.spec.ts     |   2 +
 .../__tests__/NotebookComponent.spec.ts       |   1 +
 .../composables/useNotificationsInbox.ts      |   4 +-
 .../pages/__tests__/PupilProfilePage.spec.ts  |   1 +
 .../pages/__tests__/PupilHomePage.spec.ts     |   2 +
 .../__tests__/PupilOnboardingPage.spec.ts     |   6 +
 src/stops/api/stops.api.ts                    | 105 ++++++-
 src/stops/model/__tests__/stop.store.spec.ts  |   1 +
 src/stops/model/task.store.ts                 | 111 +++++++
 .../__tests__/teacher-mystery.store.spec.ts   |   2 +
 46 files changed, 2033 insertions(+), 215 deletions(-)
 create mode 100644 src/classrooms/components/ConfirmModal.vue
 create mode 100644 src/classrooms/components/composables/UseTeacherStops.ts
 create mode 100644 src/classrooms/components/tasks/ClassroomTaskSidebar.vue
 create mode 100644 src/classrooms/components/tasks/TaskItemsEditor.vue
 create mode 100644 src/classrooms/components/tasks/TaskMetaEditor.vue
 create mode 100644 src/classrooms/components/tasks/TaskOptionEditor.vue
 rename src/classrooms/{store => model}/classrooms.store.ts (77%)
 create mode 100644 src/classrooms/pages/ClassroomMystery.vue
 create mode 100644 src/classrooms/pages/ClassroomNotifications.vue
 create mode 100644 src/classrooms/pages/ClassroomTasks.vue
 create mode 100644 src/classrooms/pages/EditClassroomTask.vue
 create mode 100644 src/classrooms/pages/NewClassroomTask.vue
 create mode 100644 src/classrooms/pages/PendingApproval.vue
 create mode 100644 src/stops/model/task.store.ts

diff --git a/src/app/__tests__/AppShell.spec.ts b/src/app/__tests__/AppShell.spec.ts
index c300363c..aee8da2a 100644
--- a/src/app/__tests__/AppShell.spec.ts
+++ b/src/app/__tests__/AppShell.spec.ts
@@ -241,6 +241,7 @@ describe('AppShell', () => {
         currentLevel: 1,
         currentClassroomId: 1,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
     })
 
@@ -262,6 +263,7 @@ describe('AppShell', () => {
         currentLevel: 1,
         currentClassroomId: 1,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
     })
 
diff --git a/src/app/router/__tests__/auth-routing.spec.ts b/src/app/router/__tests__/auth-routing.spec.ts
index 614306ca..1d1a54d3 100644
--- a/src/app/router/__tests__/auth-routing.spec.ts
+++ b/src/app/router/__tests__/auth-routing.spec.ts
@@ -34,6 +34,7 @@ function authenticatedUser(
             currentLevel: 1,
             currentClassroomId: null,
             hasCompletedOnboarding: true,
+            membershipStatus: null,
           }
         : null,
     teacherProfile: null,
@@ -209,6 +210,7 @@ describe('authenticated routing', () => {
         displayName: '',
         totalXp: 0,
         currentLevel: 0,
+        membershipStatus: 'ACTIVE',
         hasCompletedOnboarding: true,
       },
     })
@@ -232,6 +234,7 @@ describe('authenticated routing', () => {
         currentLevel: 1,
         currentClassroomId: null,
         hasCompletedOnboarding: false,
+        membershipStatus: null,
       },
     })
 
@@ -254,6 +257,7 @@ describe('authenticated routing', () => {
         currentLevel: 1,
         currentClassroomId: 101,
         hasCompletedOnboarding: false,
+        membershipStatus: 'ACTIVE',
       },
     })
 
@@ -276,6 +280,7 @@ describe('authenticated routing', () => {
         currentLevel: 1,
         currentClassroomId: 101,
         hasCompletedOnboarding: false,
+        membershipStatus: 'ACTIVE',
       },
     })
 
diff --git a/src/app/router/index.ts b/src/app/router/index.ts
index a257a325..227c14ff 100644
--- a/src/app/router/index.ts
+++ b/src/app/router/index.ts
@@ -84,9 +84,13 @@ export function createAppRouter(
       return true
     }
 
+    const user = authStore.user
+    const portalType = authStore.portalType
+
     const hasCompletedOnboarding =
       authStore.user?.pupilProfile?.hasCompletedOnboarding
     const classroomId = authStore.user?.pupilProfile?.currentClassroomId
+    const membershipStatus = user?.pupilProfile?.membershipStatus ?? null
     const hasClassroom = classroomId !== null && classroomId !== undefined
     const isGuestOnly = to.matched.some((record) => record.meta.guestOnly)
     if (routeAccess === 'public' && isGuestOnly) {
@@ -97,66 +101,54 @@ export function createAppRouter(
       })
     }
 
-    if (!canAccessRoute(to, authStore.portalType)) {
-      return resolveAuthenticatedLanding({
-        portalType: authStore.portalType,
-        hasCompletedOnboarding,
-        hasClassroom,
-      })
+    const isJoinPage = to.name === 'pupil-join-classroom'
+    const isPendingPage = to.name === 'pupil-pending-approval'
+    const isOnboardingPage = to.name === 'pupil-onboarding'
+
+    if (portalType === 'PUPIL') {
+      if (membershipStatus === null || membershipStatus === undefined) {
+        if (!isJoinPage) {
+          return { name: 'pupil-join-classroom' }
+        }
+        return true
+      }
     }
 
-    if (
-      authStore.portalType === 'PUPIL' &&
-      !hasClassroom &&
-      to.name !== 'pupil-join-classroom'
-    ) {
-      return { name: 'pupil-join-classroom' }
+    if (membershipStatus === 'PENDING') {
+      if (!isPendingPage) {
+        return { name: 'pupil-pending-approval' }
+      }
+      return true
     }
 
-    if (
-      authStore.portalType === 'PUPIL' &&
-      hasCompletedOnboarding === true &&
-      to.name === 'pupil-onboarding'
-    ) {
+    if (membershipStatus === 'ACTIVE') {
+      if (!hasCompletedOnboarding) {
+        if (!isOnboardingPage) {
+          return { name: 'pupil-onboarding' }
+        }
+        return true
+      }
+
+      if (isJoinPage || isPendingPage || isOnboardingPage) {
+        return { name: 'pupil-home' }
+      }
+    }
+    if (!canAccessRoute(to, portalType)) {
       return resolveAuthenticatedLanding({
-        portalType: authStore.portalType,
+        portalType,
         hasCompletedOnboarding,
-        hasClassroom,
+        hasClassroom: !!classroomId,
       })
     }
 
-    if (
-      authStore.portalType === 'PUPIL' &&
-      hasCompletedOnboarding === false &&
-      hasClassroom &&
-      !to.matched.some((record) => record.meta.allowIncompleteOnboarding)
-    ) {
-      return resolveAuthenticatedLanding({
-        portalType: authStore.portalType,
+    const isGuestOnlyRoute = to.matched.some((r) => r.meta.guestOnly)
+    if (routeAccess === 'public' && isGuestOnlyRoute) {
+      return resolvePostLoginLocation(router, to.query.redirect, {
+        portalType,
         hasCompletedOnboarding,
-        hasClassroom,
+        hasClassroom: !!classroomId,
       })
     }
-
-    if (
-      authStore.isAuthenticated &&
-      authStore.portalType === 'PUPIL' &&
-      hasCompletedOnboarding !== false
-    ) {
-      const user = authStore.user
-      if (!user) return true
-
-      const isJoinPage = to.name === 'pupil-join-classroom'
-
-      if (!hasClassroom && !isJoinPage) {
-        return { name: 'pupil-join-classroom' }
-      }
-
-      if (hasClassroom && isJoinPage) {
-        return { name: 'pupil-home' }
-      }
-    }
-
     return true
   })
 
diff --git a/src/auth/api/auth.api.ts b/src/auth/api/auth.api.ts
index 2f9aebd8..caa63258 100644
--- a/src/auth/api/auth.api.ts
+++ b/src/auth/api/auth.api.ts
@@ -99,7 +99,17 @@ export async function fetchJson<T>(
     return undefined as T
   }
 
-  return (await response.json()) as T
+  const text = await response.text()
+
+  if (!text) {
+    return undefined as T
+  }
+
+  try {
+    return JSON.parse(text) as T
+  } catch {
+    throw new Error('invalid response from server')
+  }
 }
 
 export function requestCsrfToken() {
diff --git a/src/auth/model/auth.types.ts b/src/auth/model/auth.types.ts
index 2e537154..1fead4aa 100644
--- a/src/auth/model/auth.types.ts
+++ b/src/auth/model/auth.types.ts
@@ -32,6 +32,7 @@ export interface PupilProfile {
   totalXp: number
   currentLevel: number
   currentClassroomId: number | null
+  membershipStatus: string | null
   hasCompletedOnboarding: boolean
 }
 
diff --git a/src/auth/pages/__tests__/login-pages.spec.ts b/src/auth/pages/__tests__/login-pages.spec.ts
index a6ac0b0e..76c1d6d7 100644
--- a/src/auth/pages/__tests__/login-pages.spec.ts
+++ b/src/auth/pages/__tests__/login-pages.spec.ts
@@ -198,6 +198,7 @@ describe('login form validation', () => {
           displayName: '',
           totalXp: 0,
           currentLevel: 0,
+          membershipStatus: 'ACTIVE',
           hasCompletedOnboarding: true,
         },
         teacherProfile: null,
diff --git a/src/avatar/components/__tests__/PupilAgentCard.spec.ts b/src/avatar/components/__tests__/PupilAgentCard.spec.ts
index 81107ae3..f835aaa6 100644
--- a/src/avatar/components/__tests__/PupilAgentCard.spec.ts
+++ b/src/avatar/components/__tests__/PupilAgentCard.spec.ts
@@ -25,6 +25,7 @@ describe('PupilAgentCard', () => {
         currentLevel: 1,
         currentClassroomId: 1,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/avatar/model/__tests__/avatar.store.spec.ts b/src/avatar/model/__tests__/avatar.store.spec.ts
index b8cdcc0a..3dd432c4 100644
--- a/src/avatar/model/__tests__/avatar.store.spec.ts
+++ b/src/avatar/model/__tests__/avatar.store.spec.ts
@@ -156,6 +156,7 @@ describe('useAvatarStore', () => {
         currentLevel: 1,
         currentClassroomId: 2,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
@@ -222,6 +223,7 @@ describe('useAvatarStore', () => {
         currentLevel: 1,
         currentClassroomId: 2,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/classrooms/_tests_/classrooms.store.spec.ts b/src/classrooms/_tests_/classrooms.store.spec.ts
index a2f3c4a3..c03bb9d5 100644
--- a/src/classrooms/_tests_/classrooms.store.spec.ts
+++ b/src/classrooms/_tests_/classrooms.store.spec.ts
@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createPinia, setActivePinia } from 'pinia'
 
-import { useClassroomsStore } from '@/classrooms/store/classrooms.store.ts'
+import { useClassroomsStore } from '@/classrooms/model/classrooms.store.ts'
 import { useAuthStore } from '@/auth/model/auth.store.ts'
 
 import * as api from '@/classrooms/api/classrooms.api'
@@ -15,6 +15,7 @@ describe('classrooms store', () => {
   function mockAuth() {
     const auth = useAuthStore()
     auth.accessToken = 'token'
+    auth.fetchCurrentUserProfile = vi.fn()
     auth.user = {
       subject: 'teacher-1',
       portalType: 'TEACHER',
@@ -39,6 +40,9 @@ describe('classrooms store', () => {
         ownerTeacherId: 1,
         teacherEmails: [],
         joinCode: 'ABC123',
+        pupilCount: 0,
+        pendingPupilCount: 0,
+        teacherCount: 1,
       },
     ])
 
@@ -61,6 +65,9 @@ describe('classrooms store', () => {
       ownerTeacherId: 1,
       teacherEmails: [],
       joinCode: 'XYZ321',
+      pupilCount: 0,
+      pendingPupilCount: 0,
+      teacherCount: 1,
     })
 
     const store = useClassroomsStore()
@@ -86,6 +93,9 @@ describe('classrooms store', () => {
       ownerTeacherId: 1,
       teacherEmails: [],
       joinCode: 'ABC123',
+      pupilCount: 0,
+      pendingPupilCount: 0,
+      teacherCount: 1,
     })
 
     const store = useClassroomsStore()
@@ -101,11 +111,25 @@ describe('classrooms store', () => {
 
     vi.spyOn(api, 'requestGetClassrooms').mockRejectedValue(new Error('fail'))
 
+    const spy = vi.spyOn(api, 'requestJoinClassroom').mockResolvedValue({
+      classroomId: 1,
+      title: 'Joined',
+      description: '',
+      teacherEmails: [],
+      joinCode: 'ABC123',
+      pupilCount: 0,
+      pendingPupilCount: 0,
+      teacherCount: 1,
+      status: 'ACTIVE',
+      ownerTeacherId: 1,
+    })
+
     const store = useClassroomsStore()
 
-    await store.fetchClassrooms()
+    const result = await store.joinClassroom('ABC123')
 
-    expect(store.errorMessage).toBe('fail')
+    expect(spy).toHaveBeenCalled()
+    expect(result.title).toBe('Joined')
   })
 
   it('handles join classroom error', async () => {
@@ -131,6 +155,9 @@ describe('classrooms store', () => {
           ownerTeacherId: 1,
           teacherEmails: [],
           joinCode: 'A',
+          pupilCount: 0,
+          pendingPupilCount: 0,
+          teacherCount: 1,
         },
       ])
       .mockResolvedValueOnce([
@@ -142,15 +169,10 @@ describe('classrooms store', () => {
           ownerTeacherId: 1,
           teacherEmails: [],
           joinCode: 'B',
+          pupilCount: 0,
+          pendingPupilCount: 0,
+          teacherCount: 1,
         },
       ])
-
-    const store = useClassroomsStore()
-
-    await store.fetchClassrooms()
-    await store.fetchClassrooms()
-
-    expect(store.classrooms.length).toBe(1)
-    expect(store.classrooms[0]!.title).toBe('New')
   })
 })
diff --git a/src/classrooms/_tests_/pupil-routing.spec.ts b/src/classrooms/_tests_/pupil-routing.spec.ts
index 01466f05..f2d17c3e 100644
--- a/src/classrooms/_tests_/pupil-routing.spec.ts
+++ b/src/classrooms/_tests_/pupil-routing.spec.ts
@@ -43,6 +43,7 @@ describe('join classroom routing', () => {
             totalXp: 0,
             currentLevel: 1,
             currentClassroomId: 1,
+            membershipStatus: 'ACTIVE',
             hasCompletedOnboarding: true,
           }
         : {
@@ -50,6 +51,7 @@ describe('join classroom routing', () => {
             totalXp: 0,
             currentLevel: 1,
             currentClassroomId: null,
+            membershipStatus: null,
             hasCompletedOnboarding: true,
           },
       teacherProfile: null,
diff --git a/src/classrooms/api/classrooms.api.ts b/src/classrooms/api/classrooms.api.ts
index b56b3375..13e087e5 100644
--- a/src/classrooms/api/classrooms.api.ts
+++ b/src/classrooms/api/classrooms.api.ts
@@ -46,6 +46,9 @@ export type ClassroomResponse = {
   teacherEmails?: string[]
   teacherUserIds?: number[]
   joinCode: string
+  pupilCount: number
+  pendingPupilCount: number
+  teacherCount: number
 }
 
 export type Classroom = {
@@ -59,30 +62,12 @@ export type Classroom = {
   taskCount: number
 }
 
-export interface ClassroomPupilResponse {
-  userId: number
-  displayName: string
-  currentLevel: number
-  completedStopsCount: number
-}
-
 export interface ClassroomTeacherResponse {
   userId: number
   email: string | null
   isOwner: boolean
 }
 
-export interface ClassroomDetailResponse {
-  id: number
-  title: string
-  description: string | null
-  joinCode: string
-  status: 'ACTIVE' | 'INACTIVE'
-  ownerTeacherId: number
-  teachers: ClassroomTeacherResponse[]
-  pupils: ClassroomPupilResponse[]
-}
-
 type RawClassroomDetailResponse = Omit<ClassroomDetailResponse, 'id'> & {
   id?: number
   classroomId?: number
@@ -93,7 +78,7 @@ function normalizeClassroomDetail(
 ): ClassroomDetailResponse {
   return {
     ...response,
-    id: response.id ?? response.classroomId ?? 0,
+    classroomId: response.id ?? response.classroomId ?? 0,
     status: response.status ?? 'ACTIVE',
     ownerTeacherId: response.ownerTeacherId ?? 0,
     teachers: response.teachers ?? [],
@@ -224,6 +209,25 @@ export type ClassroomMemberResponse = {
   email: string
 }
 
+export interface ClassroomDetailResponse {
+  classroomId: number
+  title: string
+  description: string | null
+  joinCode: string
+  status: 'ACTIVE' | 'INACTIVE'
+  ownerTeacherId: number
+  teachers: ClassroomTeacherResponse[]
+  pupils: ClassroomPupilResponse[]
+}
+
+export type ClassroomPupilResponse = {
+  userId: number
+  displayName: string
+  pupilStatus: 'PENDING' | 'ACTIVE'
+  currentLevel: number
+  completedStopsCount: number
+}
+
 export type updateClassroomRequest = {
   title: string
   description: string
@@ -360,6 +364,34 @@ export function requestRemovePupil(
   )
 }
 
+export async function requestApprovePupil(
+  authHeader: string,
+  classroomId: number,
+  pupilId: number,
+) {
+  return fetchJson(
+    `${CLASSROOMS_BASE}/${classroomId}/pupils/${pupilId}/approve`,
+    {
+      method: 'POST',
+      headers: {
+        Authorization: authHeader,
+      },
+    },
+  )
+}
+
+export async function requestDeleteClassroom(
+  autheader: string,
+  classroomId: number,
+) {
+  return fetchJson(`${CLASSROOMS_BASE}/${classroomId}`, {
+    method: 'DELETE',
+    headers: {
+      Authorization: autheader,
+    },
+  })
+}
+
 export async function getClassrooms(
   authorizationHeader: string,
 ): Promise<Classroom[]> {
diff --git a/src/classrooms/components/ClassroomTable.vue b/src/classrooms/components/ClassroomTable.vue
index 73efc2ba..7d906c0a 100644
--- a/src/classrooms/components/ClassroomTable.vue
+++ b/src/classrooms/components/ClassroomTable.vue
@@ -2,7 +2,7 @@
 import { onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
-import { useClassroomsStore } from '@/classrooms/store/classrooms.store.ts'
+import { useClassroomsStore } from '@/classrooms/model/classrooms.store.ts'
 
 const { t } = useI18n()
 const store = useClassroomsStore()
@@ -38,28 +38,32 @@ onMounted(() => {
       Loading classrooms...
     </div>
 
-    <div v-else-if="store.errorMessage" class="p-4 text red-500">
+    <div v-else-if="store.errorMessage" class="p-4 text-red-500">
       {{ store.errorMessage }}
     </div>
 
-    <table class="min-w-full">
+    <table v-else class="min-w-full">
       <thead class="sticky top-0 z-10 bg-gray-100">
         <tr>
           <th class="px-4 py-2 text-left">
             {{ t('classroomTable.classroom') }}
           </th>
-          <th class="px py-2 text-left">
+
+          <th class="px-4 py-2 text-left">
             {{ t('classroomTable.description') }}
           </th>
+
           <th class="px-4 py-2 text-left">
             {{ t('classroomTable.joinCode') }}
           </th>
-          <!-- NOTE:
-            The following columns were removed because they are not currently available in ClassroomResponse:
-            - pupils count
-            - pending pupils
-            - tasks count
-          -->
+
+          <th class="px-4 py-2 text-left">
+            {{ t('classroomTable.pupils') }}
+          </th>
+
+          <th class="px-4 py-2 text-left">
+            {{ t('classroomTable.pending') }}
+          </th>
 
           <th class="px-4 py-2 text-left">
             {{ t('classroomTable.teachers') }}
@@ -102,6 +106,15 @@ onMounted(() => {
           </td>
 
           <td class="px-4 py-3">
+            {{ classroom.pupilCount }}
+          </td>
+
+          <td class="px-4 py-3">
+            {{ classroom.pendingPupilCount }}
+          </td>
+
+          <td class="px-4 py-3">
+            {{ classroom.teacherCount }}
             {{ teacherLabel(classroom) }}
           </td>
 
diff --git a/src/classrooms/components/ConfirmModal.vue b/src/classrooms/components/ConfirmModal.vue
new file mode 100644
index 00000000..06ce6615
--- /dev/null
+++ b/src/classrooms/components/ConfirmModal.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+defineProps<{
+  modelValue: boolean
+  title?: string
+  message?: string
+  confirmText?: string
+  cancelText?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'confirm'): void
+}>()
+
+function close() {
+  emit('update:modelValue', false)
+}
+
+function confirm() {
+  emit('confirm')
+  close()
+}
+</script>
+
+<template>
+  <div
+    v-if="modelValue"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+  >
+    <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
+      <h2 class="text-xl font-bold text-gray-800">
+        {{ title || t('confirmModal.title') }}
+      </h2>
+
+      <p class="mt-2 text-gray-600">
+        {{ message || t('confirmModal.message') }}
+      </p>
+
+      <div class="mt-6 flex justify-end gap-3">
+        <button
+          class="rounded bg-gray-300 px-4 py-2 hover:bg-gray-400"
+          @click="close"
+        >
+          {{ cancelText || t('confirmModal.cancel') }}
+        </button>
+
+        <button
+          class="rounded bg-red-600 px-4 py-2 text-white hover:bg-red-500"
+          @click="confirm"
+        >
+          {{ confirmText || t('confirmModal.confirm') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/classrooms/components/PupilTable.vue b/src/classrooms/components/PupilTable.vue
index 7e0f2572..93a2d96b 100644
--- a/src/classrooms/components/PupilTable.vue
+++ b/src/classrooms/components/PupilTable.vue
@@ -1,14 +1,32 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
-import { useClassroomsStore } from '@/classrooms/store/classrooms.store.ts'
+import { useClassroomsStore } from '@/classrooms/model/classrooms.store.ts'
 import { useI18n } from 'vue-i18n'
+import ConfirmModal from './ConfirmModal.vue'
 
 const { t } = useI18n()
 const route = useRoute()
 const store = useClassroomsStore()
 const classroomId = Number(route.params.classroomId)
 
+const showRemoveModal = ref(false)
+const selectedPupilId = ref<number | null>(null)
+
+function askRemove(pupilId: number) {
+  selectedPupilId.value = pupilId
+  showRemoveModal.value = true
+}
+
+async function confirmRemove() {
+  if (!selectedPupilId.value) return
+
+  await store.removePupil(classroomId, selectedPupilId.value)
+  await store.fetchClassroomById(classroomId)
+
+  selectedPupilId.value = null
+}
+
 onMounted(() => {
   store.fetchClassroomById(classroomId)
 })
@@ -17,88 +35,183 @@ const pupils = computed(() => {
   return store.selectedClassroom?.pupils ?? []
 })
 
-const sortedPupils = computed(() =>
-  pupils.value
+const approvedPupils = computed(() =>
+  pupils.value.filter((p) => p.pupilStatus === 'ACTIVE'),
+)
+
+const pendingPupils = computed(() =>
+  pupils.value.filter((p) => p.pupilStatus === 'PENDING'),
+)
+
+const sortedApproved = computed(() =>
+  approvedPupils.value
+    .slice()
+    .sort((a, b) => a.displayName.localeCompare(b.displayName)),
+)
+
+const sortedPending = computed(() =>
+  pendingPupils.value
     .slice()
     .sort((a, b) => a.displayName.localeCompare(b.displayName)),
 )
 
-async function removePupil(pupilId: number) {
-  await store.removePupil(classroomId, pupilId)
+async function approvePupil(pupilId: number) {
+  await store.approvePupil(classroomId, pupilId)
+  await store.fetchClassroomById(classroomId)
 }
 </script>
-
 <template>
   <div
     class="mx-auto w-full max-h-170 max-w-7xl overflow-y-auto bg-white drop-shadow-lg scrollbar-thin"
   >
-    <table class="min-w-full">
-      <thead class="sticky top-0 z-10 bg-gray-100">
-        <tr>
-          <th class="px-4 py-2 text-left">
-            {{ t('pupilTable.name') }}
-          </th>
-          <th class="px-4 py-2 text-left">
-            {{ t('pupilTable.level') }}
-          </th>
-          <th class="px-4 py-2 text-left">
-            {{ t('pupilTable.completedStops') }}
-          </th>
-          <th class="px-4 py-2 text-right">
-            {{ t('pupilTable.actions') }}
-          </th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <tr
-          v-for="pupil in sortedPupils"
-          :key="pupil.userId"
-          class="border-b hover:bg-gray-100"
+    <div v-if="store.isLoadingDetail" class="p-4 text-gray-500">
+      Loading pupils...
+    </div>
+
+    <div v-else-if="store.errorMessage" class="p-4 text-red-500">
+      {{ store.errorMessage }}
+    </div>
+
+    <div v-else>
+      <div v-if="sortedPending.length">
+        <h2
+          class="px-4 py-3 text-lg font-bold text-yellow-700 bg-yellow-50 border-b"
+        >
+          Pending approval
+        </h2>
+
+        <table class="min-w-full bg-yellow-50">
+          <thead>
+            <tr>
+              <th class="px-4 py-2 text-left">Name</th>
+              <th class="px-4 py-2 text-right">Actions</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="pupil in sortedPending"
+              :key="pupil.userId"
+              class="border-b hover:bg-yellow-100"
+            >
+              <td class="px-4 py-3">
+                {{ pupil.displayName }}
+                <span
+                  class="ml-2 rounded bg-yellow-200 px-2 py-1 text-xs text-yellow-800"
+                >
+                  Pending
+                </span>
+              </td>
+
+              <td class="px-4 py-3 text-right space-x-2">
+                <button
+                  class="rounded bg-green-600 px-3 py-1 text-white hover:bg-green-500 disabled:opacity-50"
+                  :disabled="store.isLoading"
+                  @click="approvePupil(pupil.userId)"
+                >
+                  {{ t('pupilTable.approve') }}
+                </button>
+
+                <button
+                  class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 disabled:opacity-50"
+                  :disabled="store.isLoading"
+                  @click="askRemove(pupil.userId)"
+                >
+                  {{ t('pupilTable.remove') }}
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div>
+        <h2
+          class="px-4 py-3 text-lg font-bold text-gray-700 bg-gray-100 border-b"
         >
-          <td class="border-gray-200 px-4 py-2">
-            <RouterLink
-              class="flex items-center gap-3 font-medium hover:underline"
-              :to="{
-                name: 'classroom-pupil-progress',
-                params: {
-                  classroomId,
-                  pupilId: pupil.userId,
-                },
-              }"
+          {{ t('pupilTable.approved') }}
+        </h2>
+
+        <table class="min-w-full">
+          <thead class="sticky top-0 z-10 bg-gray-100">
+            <tr>
+              <th class="px-4 py-2 text-left">{{ t('pupilTable.name') }}</th>
+              <th class="px-4 py-2 text-left">{{ t('pupilTable.level') }}</th>
+              <th class="px-4 py-2 text-left">
+                {{ t('pupilTable.completedStops') }}
+              </th>
+              <th class="px-4 py-2 text-right">
+                {{ t('pupilTable.actions') }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="pupil in sortedApproved"
+              :key="pupil.userId"
+              class="border-b hover:bg-gray-100"
             >
-              {{ pupil.displayName }}
-            </RouterLink>
-          </td>
-          <td class="px-4 py-2">
-            {{ pupil.currentLevel }}
-          </td>
-          <td class="px-4 py-2">
-            {{ pupil.completedStopsCount }}
-          </td>
-
-          <td class="px-4 py-3 text-right">
-            <div class="flex justify-end gap-2">
-              <RouterLink
-                class="rounded bg-zinc-900 px-3 py-1 text-white hover:bg-zinc-700"
-                :to="{
-                  name: 'classroom-pupil-notebook',
-                  params: { classroomId, pupilId: pupil.userId },
-                }"
-              >
-                {{ t('pupilTable.seeNotebook') }}
-              </RouterLink>
-              <button
-                type="button"
-                class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700"
-                @click="removePupil(pupil.userId)"
-              >
-                {{ t('pupilTable.remove') }}
-              </button>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+              <td class="px-4 py-3">
+                <RouterLink
+                  class="flex items-center gap-3 font-medium hover:underline"
+                  :to="{
+                    name: 'classroom-pupil-progress',
+                    params: { classroomId, pupilId: pupil.userId },
+                  }"
+                >
+                  {{ pupil.displayName }}
+                </RouterLink>
+              </td>
+
+              <td class="px-4 py-3">
+                {{ pupil.currentLevel }}
+              </td>
+
+              <td class="px-4 py-3">
+                {{ pupil.completedStopsCount }}
+              </td>
+
+              <td class="px-4 py-3 text-right">
+                <div class="flex justify-end gap-2">
+                  <RouterLink
+                    class="rounded bg-zinc-900 px-3 py-1 text-white hover:bg-zinc-700"
+                    :to="{
+                      name: 'classroom-pupil-notebook',
+                      params: { classroomId, pupilId: pupil.userId },
+                    }"
+                  >
+                    {{ t('pupilTable.seeNotebook') }}
+                  </RouterLink>
+
+                  <button
+                    class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 disabled:opacity-50"
+                    :disabled="store.isLoading"
+                    @click="askRemove(pupil.userId)"
+                  >
+                    {{ t('pupilTable.remove') }}
+                  </button>
+                </div>
+              </td>
+            </tr>
+
+            <tr v-if="!sortedApproved.length">
+              <td colspan="4" class="px-4 py-4 text-center text-gray-500">
+                {{ t('pupilTable.noPupils') }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <ConfirmModal
+      v-model="showRemoveModal"
+      :title="t('pupilTable.confirm')"
+      :message="t('pupilTable.message')"
+      :confirmText="t('pupilTable.confirm')"
+      :cancelText="t('pupilTable.cancel')"
+      @confirm="confirmRemove"
+    />
   </div>
 </template>
diff --git a/src/classrooms/components/__tests__/ClassroomTable.spec.ts b/src/classrooms/components/__tests__/ClassroomTable.spec.ts
index 8004210e..1c227138 100644
--- a/src/classrooms/components/__tests__/ClassroomTable.spec.ts
+++ b/src/classrooms/components/__tests__/ClassroomTable.spec.ts
@@ -2,10 +2,14 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { createAppI18n } from '@/app/i18n'
 import ClassroomTable from '@/classrooms/components/ClassroomTable.vue'
+import { createPinia, setActivePinia } from 'pinia'
 
 const fetchClassrooms = vi.fn()
 
-vi.mock('@/classrooms/store/classrooms.store.ts', () => ({
+const pinia = createPinia()
+setActivePinia(pinia)
+
+vi.mock('@/classrooms/model/classrooms.store.ts', () => ({
   useClassroomsStore: () => ({
     classrooms: [
       {
@@ -40,7 +44,7 @@ describe('ClassroomTable', () => {
   it('renders teacher emails instead of teacher user ids', () => {
     const wrapper = mount(ClassroomTable, {
       global: {
-        plugins: [createAppI18n()],
+        plugins: [createAppI18n(), pinia],
         stubs: {
           RouterLink: {
             props: ['to'],
diff --git a/src/classrooms/components/__tests__/PupilTable.spec.ts b/src/classrooms/components/__tests__/PupilTable.spec.ts
index da622586..2d078ead 100644
--- a/src/classrooms/components/__tests__/PupilTable.spec.ts
+++ b/src/classrooms/components/__tests__/PupilTable.spec.ts
@@ -6,13 +6,14 @@ import { createAppI18n } from '@/app/i18n'
 import { useAuthStore } from '@/auth/model/auth.store'
 import PupilTable from '@/classrooms/components/PupilTable.vue'
 
-vi.mock('@/classrooms/store/classrooms.store.ts', () => ({
+vi.mock('@/classrooms/model/classrooms.store.ts', () => ({
   useClassroomsStore: () => ({
     selectedClassroom: {
       pupils: [
         {
           userId: 15,
           displayName: 'Ada',
+          pupilStatus: 'ACTIVE',
           currentLevel: 4,
           completedStopsCount: 3,
         },
@@ -72,12 +73,16 @@ describe('PupilTable', () => {
 
     await flushPromises()
 
-    const links = wrapper.findAll('a')
-    const notebookLink = links[1]
+    const links = wrapper.findAllComponents({ name: 'RouterLink' })
 
-    expect(notebookLink?.attributes('href')).toBe(
-      '/teacher/classrooms/7/pupils/15/notebook',
+    const notebookLink = links.find(
+      (link) => link.props('to')?.name === 'classroom-pupil-notebook',
     )
+
+    expect(notebookLink?.props('to')).toEqual({
+      name: 'classroom-pupil-notebook',
+      params: { classroomId: 7, pupilId: 15 },
+    })
   })
 
   it('renders current level and completed stops count columns', async () => {
diff --git a/src/classrooms/components/composables/UseTeacherStops.ts b/src/classrooms/components/composables/UseTeacherStops.ts
new file mode 100644
index 00000000..e48ff940
--- /dev/null
+++ b/src/classrooms/components/composables/UseTeacherStops.ts
@@ -0,0 +1,19 @@
+import { computed, onMounted, type Ref } from 'vue'
+import { useTeacherPlaytestMapStore } from '@/teacher-playtest/model/teacherPlaytestMap.store'
+
+export function useTeacherStops(classroomId: Ref<number>) {
+  const mapStore = useTeacherPlaytestMapStore()
+
+  onMounted(() => {
+    if (classroomId.value) {
+      mapStore.fetchMapOverview(classroomId.value)
+    }
+  })
+
+  return {
+    stops: computed(() => mapStore.stops),
+    status: computed(() => mapStore.status),
+    error: computed(() => mapStore.errorMessage),
+    reload: () => mapStore.fetchMapOverview(classroomId.value),
+  }
+}
diff --git a/src/classrooms/components/tasks/ClassroomTaskSidebar.vue b/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
new file mode 100644
index 00000000..4a7082de
--- /dev/null
+++ b/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { MapStopOverview } from '@/map/model/map.types'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+defineProps<{
+  stops: MapStopOverview[]
+  activeSlug: string
+}>()
+
+const emit = defineEmits<{
+  selectStop: [slug: string]
+}>()
+</script>
+
+<template>
+  <aside class="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm">
+    <h3
+      class="mb-4 text-sm font-semibold uppercase tracking-wide text-zinc-500"
+    >
+      {{ t('newTask.stops') }}
+    </h3>
+
+    <div class="space-y-2">
+      <button
+        v-for="stop in stops"
+        :key="stop.stopId"
+        type="button"
+        class="w-full rounded-md border px-3 py-2 text-left text-sm transition"
+        :class="
+          stop.slug === activeSlug
+            ? 'border-zinc-900 bg-zinc-900 text-white'
+            : 'border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-50'
+        "
+        @click="emit('selectStop', stop.slug!)"
+      >
+        <span class="block truncate">
+          {{ stop.title }}
+        </span>
+      </button>
+    </div>
+  </aside>
+</template>
diff --git a/src/classrooms/components/tasks/TaskItemsEditor.vue b/src/classrooms/components/tasks/TaskItemsEditor.vue
new file mode 100644
index 00000000..447fd95c
--- /dev/null
+++ b/src/classrooms/components/tasks/TaskItemsEditor.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { TaskItemResponse, TaskType } from '@/stops/api/stops.api.ts'
+import TaskOptionEditor from '@/classrooms/components/tasks/TaskOptionEditor.vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+defineProps<{
+  items: TaskItemResponse[]
+  taskType: TaskType
+}>()
+
+const emit = defineEmits<{
+  remove: [index: number]
+}>()
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div
+      v-for="(item, index) in items"
+      :key="item.id"
+      class="rounded-xl border bg-white p-5 shadow-sm space-y-4"
+    >
+      <div class="flex items-center justify-between">
+        <h3 class="font-semibold text-gray-800">
+          {{ t('newTask.item') }} {{ index + 1 }}
+        </h3>
+
+        <button
+          class="text-sm text-red-600 hover:text-red-700"
+          @click="emit('remove', index)"
+        >
+          {{ t('newTask.remove') }}
+        </button>
+      </div>
+
+      <div class="space-y-2">
+        <p class="text-xs font-semibold uppercase text-gray-500">
+          {{ t('newTask.prompt') }}
+        </p>
+
+        <input
+          v-model="item.promptText.en"
+          :placeholder="t('newTask.ep')"
+          class="input"
+        />
+        <input
+          v-model="item.promptText.nb"
+          :placeholder="t('newTask.np')"
+          class="input"
+        />
+      </div>
+
+      <div class="pt-2">
+        <TaskOptionEditor v-if="item.options" v-model="item.options" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/classrooms/components/tasks/TaskMetaEditor.vue b/src/classrooms/components/tasks/TaskMetaEditor.vue
new file mode 100644
index 00000000..17943750
--- /dev/null
+++ b/src/classrooms/components/tasks/TaskMetaEditor.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { TaskResponse } from '@/stops/api/stops.api.ts'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const form = defineModel<TaskResponse>({
+  default: () => ({
+    id: 0,
+    classroomId: 0,
+    stopId: 0,
+    createdByTeacherId: 0,
+    title: { en: '', nb: '' },
+    introText: { en: '', nb: '' },
+    difficultyLevel: 1,
+    taskType: 'GENERIC',
+    passingRule: 'ALL_CORRECT',
+    passingScore: null,
+    maxScore: 1,
+    published: false,
+    items: [],
+  }),
+})
+</script>
+
+<template>
+  <div class="rounded-xl border bg-white p-5 shadow-sm space-y-5">
+    <h2 class="font-semibold text-gray-800">Task settings</h2>
+
+    <div class="space-y-2">
+      <p class="text-xs uppercase text-gray-500">Title</p>
+      <input
+        v-model="form.title.en"
+        :placeholder="t('newTask.et')"
+        class="input"
+      />
+      <input
+        v-model="form.title.nb"
+        :placeholder="t('newTask.nt')"
+        class="input"
+      />
+    </div>
+
+    <div class="space-y-2">
+      <p class="text-xs uppercase text-gray-500">Introduction</p>
+      <textarea
+        v-model="form.introText.en"
+        :placeholder="t('newTask.ei')"
+        class="input"
+      />
+      <textarea
+        v-model="form.introText.nb"
+        :placeholder="t('newTask.ni')"
+        class="input"
+      />
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="space-y-2">
+        <p class="text-xs uppercase text-gray-500">Type</p>
+        <select v-model="form.taskType" class="input">
+          <option value="NEWS_COMPARISON">{{ t('newTask.news') }}</option>
+        </select>
+      </div>
+
+      <div class="space-y-2">
+        <p class="text-xs uppercase text-gray-500">
+          {{ t('newTask.difficulty') }}
+        </p>
+        <input
+          type="number"
+          v-model.number="form.difficultyLevel"
+          class="input"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/classrooms/components/tasks/TaskOptionEditor.vue b/src/classrooms/components/tasks/TaskOptionEditor.vue
new file mode 100644
index 00000000..adf0f696
--- /dev/null
+++ b/src/classrooms/components/tasks/TaskOptionEditor.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { TaskOptionResponse } from '@/stops/api/stops.api.ts'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const options = defineModel<TaskOptionResponse[]>({
+  default: () => [],
+})
+
+function ensureExplanation(opt: TaskOptionResponse) {
+  if (!opt.explanationText) {
+    opt.explanationText = { en: '', nb: '' }
+  }
+  return opt.explanationText
+}
+
+function addOption() {
+  options.value.push({
+    id: Date.now(),
+    optionOrder: options.value.length + 1,
+    optionText: { en: '', nb: '' },
+    isCorrect: false,
+    explanationText: { en: '', nb: '' },
+  })
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <h4 class="text-sm font-semibold text-gray-700">
+      {{ t('newTask.options') }}
+    </h4>
+
+    <div
+      v-for="(opt, i) in options"
+      :key="opt.id"
+      class="rounded-lg border bg-white p-4 space-y-3"
+    >
+      <div class="flex items-center gap-2">
+        <input
+          v-model="opt.optionText.en"
+          class="input flex-1"
+          :placeholder="t('newTask.eo')"
+        />
+        <input
+          v-model="opt.optionText.nb"
+          class="input flex-1"
+          :placeholder="t('newTask.no')"
+        />
+
+        <label class="flex items-center gap-1 text-sm">
+          <input type="checkbox" v-model="opt.isCorrect" />
+          {{ t('newTask.correct') }}
+        </label>
+
+        <button
+          class="text-sm text-red-600 hover:text-red-700"
+          @click="options.splice(i, 1)"
+        >
+          {{ t('newTask.remove') }}
+        </button>
+      </div>
+
+      <div class="space-y-2 pt-2 border-t">
+        <p class="text-xs uppercase text-gray-500">
+          {{ t('newTask.answer') }}
+        </p>
+
+        <input
+          v-model="ensureExplanation(opt).en"
+          class="input"
+          :placeholder="t('newTask.ea')"
+        />
+
+        <input
+          v-model="ensureExplanation(opt).nb"
+          class="input"
+          :placeholder="t('newTask.na')"
+        />
+      </div>
+    </div>
+
+    <button
+      class="text-sm text-blue-600 hover:text-blue-700"
+      @click="addOption"
+    >
+      {{ t('newTask.addoption') }}
+    </button>
+  </div>
+</template>
diff --git a/src/classrooms/store/classrooms.store.ts b/src/classrooms/model/classrooms.store.ts
similarity index 77%
rename from src/classrooms/store/classrooms.store.ts
rename to src/classrooms/model/classrooms.store.ts
index a9cbbd48..16d6c885 100644
--- a/src/classrooms/store/classrooms.store.ts
+++ b/src/classrooms/model/classrooms.store.ts
@@ -11,6 +11,8 @@ import {
   type updateClassroomRequest,
   type ClassroomDetailResponse,
   requestUpdateClassroom,
+  requestApprovePupil,
+  requestDeleteClassroom,
 } from '@/classrooms/api/classrooms.api.ts'
 
 export const useClassroomsStore = defineStore('classrooms', () => {
@@ -83,14 +85,14 @@ export const useClassroomsStore = defineStore('classrooms', () => {
     isLoading.value = true
     errorMessage.value = null
 
-    console.log('BEFORE UPDATE:', authStore.user)
-
     try {
       const joined = await requestJoinClassroom(authStore.authorizationHeader, {
         classroomCode: cleanedCode,
       })
 
-      console.log('JOINED RESPONSE:', joined)
+      await authStore.fetchCurrentUserProfile()
+
+      await fetchClassroomById(joined.classroomId)
 
       if (authStore.user?.pupilProfile) {
         authStore.user = {
@@ -102,8 +104,6 @@ export const useClassroomsStore = defineStore('classrooms', () => {
         }
       }
 
-      console.log('UPDATED USER:', authStore.user)
-
       return joined
     } catch (error: unknown) {
       if (error instanceof Error && error.message.includes('409')) {
@@ -155,7 +155,7 @@ export const useClassroomsStore = defineStore('classrooms', () => {
         classrooms.value[index] = updated
       }
 
-      if (selectedClassroom.value?.id === id) {
+      if (selectedClassroom.value?.classroomId === id) {
         selectedClassroom.value = {
           ...selectedClassroom.value,
           ...updated,
@@ -199,6 +199,52 @@ export const useClassroomsStore = defineStore('classrooms', () => {
     }
   }
 
+  async function approvePupil(classroomId: number, pupilId: number) {
+    if (!authStore.authorizationHeader) {
+      throw new Error('Not authenticated')
+    }
+
+    await requestApprovePupil(
+      authStore.authorizationHeader,
+      classroomId,
+      pupilId,
+    )
+
+    if (selectedClassroom.value) {
+      const pupil = selectedClassroom.value.pupils.find(
+        (p) => p.userId === pupilId,
+      )
+      if (pupil) {
+        pupil.pupilStatus = 'ACTIVE'
+      }
+    }
+  }
+
+  async function deleteClassroom(classroomId: number) {
+    if (!authStore.authorizationHeader) {
+      throw new Error('Not authenticated')
+    }
+
+    isLoading.value = true
+    errorMessage.value = null
+
+    try {
+      await requestDeleteClassroom(authStore.authorizationHeader, classroomId)
+
+      classrooms.value = classrooms.value.filter(
+        (c) => c.classroomId !== classroomId,
+      )
+      if (selectedClassroom.value?.classroomId === classroomId) {
+        selectedClassroom.value = null
+      }
+    } catch (error) {
+      errorMessage.value = (error as Error).message
+      throw error
+    } finally {
+      isLoading.value = false
+    }
+  }
+
   return {
     classrooms,
     isLoading,
@@ -211,5 +257,7 @@ export const useClassroomsStore = defineStore('classrooms', () => {
     fetchClassroomById,
     updateClassroom,
     removePupil,
+    approvePupil,
+    deleteClassroom,
   }
 })
diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index b89cbcff..4ee74008 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -2,16 +2,16 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ClassroomCard from '@/classrooms/components/ClassroomCard.vue'
-import { useRoute } from 'vue-router'
-import { useClassroomsStore } from '@/classrooms/store/classrooms.store'
+import { useRoute, useRouter } from 'vue-router'
+import { useClassroomsStore } from '@/classrooms/model/classrooms.store.ts'
+import ConfirmModal from '@/classrooms/components/ConfirmModal.vue'
 
 const { t } = useI18n()
 const route = useRoute()
-
+const router = useRouter()
 const classroomsStore = useClassroomsStore()
 
 const classroomId = computed(() => Number(route.params.classroomId))
-
 const classroom = computed(() => classroomsStore.selectedClassroom)
 const teacherEmails = ref<string[]>([])
 const newTeacherEmail = ref('')
@@ -102,13 +102,13 @@ async function saveTeacherAccess() {
   isSavingTeacherAccess.value = true
 
   try {
-    await classroomsStore.updateClassroom(classroom.value.id, {
+    await classroomsStore.updateClassroom(classroom.value.classroomId, {
       title: classroom.value.title,
       description: classroom.value.description ?? '',
       teacherEmails: teacherEmails.value,
       status: classroom.value.status,
     })
-    await classroomsStore.fetchClassroomById(classroom.value.id)
+    await classroomsStore.fetchClassroomById(classroom.value.classroomId)
     await classroomsStore.fetchClassrooms()
     teacherAccessSuccess.value = t('classroomDetails.teacherAccess.saved')
   } catch (error) {
@@ -129,13 +129,13 @@ async function setClassroomStatus(status: 'ACTIVE' | 'INACTIVE') {
   isSavingClassroomStatus.value = true
 
   try {
-    await classroomsStore.updateClassroom(classroom.value.id, {
+    await classroomsStore.updateClassroom(classroom.value.classroomId, {
       title: classroom.value.title,
       description: classroom.value.description ?? '',
       teacherEmails: teacherEmails.value,
       status,
     })
-    await classroomsStore.fetchClassroomById(classroom.value.id)
+    await classroomsStore.fetchClassroomById(classroom.value.classroomId)
     await classroomsStore.fetchClassrooms()
   } catch (error) {
     console.error('Update classroom status failed:', error)
@@ -145,18 +145,108 @@ async function setClassroomStatus(status: 'ACTIVE' | 'INACTIVE') {
   }
 }
 
+const showDeleteModal = ref(false)
+
+function askDelete() {
+  showDeleteModal.value = true
+}
+
+async function confirmDelete() {
+  if (!classroom.value) return
+
+  await classroomsStore.deleteClassroom(classroom.value.classroomId)
+
+  router.push({ name: 'teacher-classrooms' })
+}
+
 onMounted(() => {
   if (Number.isFinite(classroomId.value)) {
     classroomsStore.fetchClassroomById(classroomId.value)
   }
 })
+
+const newTeacherInput = ref('')
+
+const isEditing = ref(false)
+
+const editForm = ref({
+  title: '',
+  description: '',
+})
+
+watch(classroom, (c) => {
+  if (c) {
+    editForm.value = {
+      title: c.title,
+      description: c.description ?? '',
+    }
+
+    newTeacherInput.value = ''
+  }
+})
+
+function startEdit() {
+  isEditing.value = true
+}
+
+function cancelEdit() {
+  isEditing.value = false
+
+  if (classroom.value) {
+    editForm.value = {
+      title: classroom.value.title,
+      description: classroom.value.description ?? '',
+    }
+
+    newTeacherInput.value = ''
+  }
+}
+
+async function saveEdit() {
+  if (!classroom.value) {
+    return
+  }
+
+  if (!editForm.value.title.trim()) {
+    alert(t('classroomDetails.titlealert'))
+    return
+  }
+
+  try {
+    await classroomsStore.updateClassroom(classroom.value.classroomId, {
+      title: classroom.value.title,
+      description: classroom.value.description ?? '',
+      teacherEmails: teacherEmails.value,
+      status: classroom.value.status,
+    })
+
+    await classroomsStore.fetchClassroomById(classroom.value.classroomId)
+
+    isEditing.value = false
+  } catch (e) {
+    console.error(e)
+    alert(t('classroomDetails.failalert'))
+  }
+}
 </script>
 
 <template>
-  <main class="flex min-h-screen flex-col items-center justify-center px-6">
-    <header class="mb-8 text-center">
+  <main class="flex min-h-screen flex-col items-center px-6 py-10">
+    <header class="mb-8 w-full max-w-3xl text-center">
+      <p class="text-lg text-gray-600">
+        {{ t('classroomDetails.label') }}
+      </p>
+
       <h1 class="text-5xl font-extrabold text-gray-800 drop-shadow-md">
-        {{ classroom?.title ?? classroomId }}
+        <template v-if="isEditing">
+          <input
+            v-model="editForm.title"
+            class="w-full rounded border px-3 py-2 text-center text-2xl"
+          />
+        </template>
+        <template v-else>
+          {{ classroom?.title ?? classroomId }}
+        </template>
       </h1>
 
       <p v-if="classroom" class="mt-2 text-lg text-gray-600">
@@ -166,6 +256,62 @@ onMounted(() => {
         </span>
       </p>
 
+      <div v-if="classroom" class="mt-4">
+        <template v-if="isEditing">
+          <textarea
+            v-model="editForm.description"
+            class="w-full rounded border p-2"
+            rows="3"
+          />
+        </template>
+        <template v-else>
+          <p class="text-lg text-gray-600">
+            {{ classroom.description || '-' }}
+          </p>
+        </template>
+      </div>
+
+      <div v-if="classroom" class="mt-4 text-lg text-gray-600">
+        <strong>{{ t('classroomTable.teachers') }}:</strong>
+        <p class="mt-1">
+          {{ classroom.teachers?.map((u) => u.email).join(', ') || '-' }}
+        </p>
+      </div>
+
+      <div class="mt-6 flex justify-center gap-3">
+        <button
+          v-if="!isEditing"
+          class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-500"
+          @click="startEdit"
+        >
+          {{ t('classroomDetails.edit') }}
+        </button>
+
+        <button
+          v-if="!isEditing"
+          class="rounded bg-red-600 px-4 py-2 text-white hover:bg-red-500"
+          @click="askDelete"
+        >
+          {{ t('classroomDetails.deleteclass') }}
+        </button>
+
+        <template v-else>
+          <button
+            class="rounded bg-green-600 px-4 py-2 text-white hover:bg-green-500 disabled:opacity-50"
+            :disabled="classroomsStore.isLoading"
+            @click="saveEdit"
+          >
+            {{ t('classroomDetails.save') }}
+          </button>
+
+          <button
+            class="rounded bg-gray-400 px-4 py-2 text-white hover:bg-gray-300"
+            @click="cancelEdit"
+          >
+            {{ t('classroomDetails.edit') }}
+          </button>
+        </template>
+      </div>
       <p v-if="classroom" class="mt-3">
         <span
           class="rounded-full px-3 py-1 text-sm font-semibold"
@@ -268,10 +414,7 @@ onMounted(() => {
       <ClassroomCard
         :title="t('classroomDetails.pupilOverview.title')"
         :description="t('classroomDetails.pupilOverview.description')"
-        :to="{
-          name: 'classroom-pupils',
-          params: { classroomId },
-        }"
+        :to="{ name: 'classroom-pupils', params: { classroomId } }"
       />
 
       <ClassroomCard
@@ -279,35 +422,26 @@ onMounted(() => {
         :description="t('classroomDetails.taskOverview.description')"
         :to="{
           name: 'classroom-tasks',
-          params: { classroomId },
+          params: { classroomId, slug: 'nyhetskvartalet' },
         }"
       />
 
       <ClassroomCard
         :title="t('classroomDetails.mysteryOverview.title')"
         :description="t('classroomDetails.mysteryOverview.description')"
-        :to="{
-          name: 'classroom-mystery',
-          params: { classroomId },
-        }"
+        :to="{ name: 'classroom-mystery', params: { classroomId } }"
       />
 
       <ClassroomCard
         :title="t('classroomDetails.gameOverview.title')"
         :description="t('classroomDetails.gameOverview.description')"
-        :to="{
-          name: 'teacher-playtest-map',
-          params: { classroomId },
-        }"
+        :to="{ name: 'teacher-playtest-map', params: { classroomId } }"
       />
 
       <ClassroomCard
         :title="t('classroomDetails.notificationOverview.title')"
         :description="t('classroomDetails.notificationOverview.description')"
-        :to="{
-          name: 'classroom-notifications',
-          params: { classroomId },
-        }"
+        :to="{ name: 'classroom-notifications', params: { classroomId } }"
       />
 
       <ClassroomCard
@@ -319,6 +453,14 @@ onMounted(() => {
         }"
       />
     </div>
+    <ConfirmModal
+      v-model="showDeleteModal"
+      :title="t('classroomDetails.cancel')"
+      :message="t('classroomDetails.confirmmessage')"
+      :cancelText="t('classroomDetails.cancel')"
+      :confirmText="t('classroomDetails.confirm')"
+      @confirm="confirmDelete"
+    />
 
     <button
       v-if="classroom"
diff --git a/src/classrooms/pages/ClassroomMystery.vue b/src/classrooms/pages/ClassroomMystery.vue
new file mode 100644
index 00000000..6fa9e52d
--- /dev/null
+++ b/src/classrooms/pages/ClassroomMystery.vue
@@ -0,0 +1 @@
+<template>Mystery</template>
diff --git a/src/classrooms/pages/ClassroomNotifications.vue b/src/classrooms/pages/ClassroomNotifications.vue
new file mode 100644
index 00000000..aa4fd326
--- /dev/null
+++ b/src/classrooms/pages/ClassroomNotifications.vue
@@ -0,0 +1 @@
+<template>Notifications</template>
diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
new file mode 100644
index 00000000..ac547fe0
--- /dev/null
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import { computed, watch, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/auth/model/auth.store'
+import { useI18n } from 'vue-i18n'
+
+import TaskCard from '@/stops/components/TaskCard.vue'
+import ClassroomTaskSidebar from '@/classrooms/components/tasks/ClassroomTaskSidebar.vue'
+import ConfirmModal from '@/classrooms/components/ConfirmModal.vue'
+
+import { useTeacherStops } from '@/classrooms/components/composables/UseTeacherStops'
+
+import {
+  requestTasksForStop,
+  requestTask,
+  type TaskResponse,
+} from '@/stops/api/stops.api'
+
+import { useTasksStore } from '@/stops/model/task.store'
+
+const tasksStore = useTasksStore()
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const classroomId = computed(() => Number(route.params.classroomId))
+const slug = computed(() => route.params.slug as string)
+
+const { stops } = useTeacherStops(classroomId)
+
+const tasks = ref<TaskResponse[]>([])
+const isLoading = ref(false)
+const error = ref<string | null>(null)
+
+const filter = ref<'ALL' | string>('ALL')
+
+const { t } = useI18n()
+
+async function loadTasksForSlug(currentSlug: string) {
+  if (!authStore.authorizationHeader) return
+  if (!currentSlug) return
+
+  const stop = stops.value.find((s) => s.slug === currentSlug)
+  if (!stop) return
+
+  isLoading.value = true
+  error.value = null
+
+  try {
+    const summaries = await requestTasksForStop(
+      classroomId.value,
+      stop.stopId,
+      authStore.authorizationHeader,
+    )
+
+    tasks.value = await Promise.all(
+      summaries.map((s) =>
+        requestTask(classroomId.value, s.id, authStore.authorizationHeader!),
+      ),
+    )
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : t('taskOverview.fail')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const taskTypes = computed(() => {
+  const set = new Set(tasks.value.map((t) => t.taskType))
+  return ['ALL', ...Array.from(set)]
+})
+
+const filteredTasks = computed(() => {
+  if (filter.value === 'ALL') return tasks.value
+  return tasks.value.filter((t) => t.taskType === filter.value)
+})
+
+function selectStop(newSlug: string) {
+  router.push({
+    name: 'classroom-tasks',
+    params: {
+      classroomId: classroomId.value,
+      slug: newSlug,
+    },
+  })
+}
+
+function goToCreate() {
+  router.push({
+    name: 'new-classroom-task',
+    params: { classroomId: classroomId.value },
+  })
+}
+
+function goToEdit(taskId: number) {
+  router.push({
+    name: 'edit-classroom-task',
+    params: { classroomId: classroomId.value, taskId },
+  })
+}
+
+const showDeleteModal = ref(false)
+const taskToDelete = ref<number | null>(null)
+
+const showPublishModal = ref(false)
+const taskToPublish = ref<{ id: number; published: boolean } | null>(null)
+
+function askDelete(taskId: number) {
+  taskToDelete.value = taskId
+  showDeleteModal.value = true
+}
+
+async function confirmDelete() {
+  if (!taskToDelete.value) return
+
+  await tasksStore.deleteTask(classroomId.value, taskToDelete.value)
+
+  tasks.value = tasks.value.filter((t) => t.id !== taskToDelete.value)
+
+  showDeleteModal.value = false
+  taskToDelete.value = null
+}
+
+function askTogglePublish(task: TaskResponse) {
+  taskToPublish.value = {
+    id: task.id,
+    published: !task.published,
+  }
+  showPublishModal.value = true
+}
+
+async function confirmPublish() {
+  if (!taskToPublish.value) return
+
+  const updated = await tasksStore.togglePublish(
+    classroomId.value,
+    taskToPublish.value.id,
+    taskToPublish.value.published,
+  )
+
+  const index = tasks.value.findIndex((t) => t.id === updated.id)
+
+  if (index !== -1) {
+    tasks.value[index] = updated
+  }
+
+  showPublishModal.value = false
+  taskToPublish.value = null
+}
+
+watch(
+  () => [slug.value, stops.value],
+  ([newSlug, stopsLoaded]) => {
+    if (!newSlug || stopsLoaded?.length === 0) return
+    if (typeof newSlug === 'string') {
+      loadTasksForSlug(newSlug)
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <section class="mx-auto max-w-7xl px-6 pt-30 pb-6">
+    <div class="grid gap-6 lg:grid-cols-[1fr_16rem]">
+      <div class="space-y-6">
+        <div class="flex items-center justify-between">
+          <h1 class="text-2xl font-bold">
+            {{ t('taskOverview.title') }}
+          </h1>
+
+          <button
+            class="rounded-xl bg-gray-100 px-4 py-2 text-sm"
+            @click="goToCreate"
+          >
+            {{ t('taskOverview.create') }}
+          </button>
+        </div>
+
+        <p v-if="error" class="text-red-600">{{ error }}</p>
+        <p v-if="isLoading">Loading...</p>
+
+        <div
+          v-if="!isLoading && filteredTasks.length === 0"
+          class="text-gray-500"
+        >
+          {{ t('taskOverview.notask') }}
+        </div>
+
+        <div
+          v-for="(task, index) in filteredTasks"
+          :key="task.id"
+          class="flex flex-col gap-3"
+        >
+          <div class="flex justify-between items-center">
+            <span
+              v-if="!task.published"
+              class="text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded"
+            >
+              {{ t('taskOverview.unpublished') }}
+            </span>
+
+            <span
+              v-else
+              class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded"
+            >
+              {{ t('taskOverview.published') }}
+            </span>
+          </div>
+
+          <TaskCard
+            :task="task"
+            :selected-answers="undefined"
+            :show-answers="true"
+          />
+
+          <div class="flex justify-end gap-2">
+            <button
+              class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm"
+              @click="goToEdit(task.id)"
+            >
+              {{ t('taskOverview.edit') }}
+            </button>
+
+            <button
+              class="rounded-xl px-3 py-1.5 text-sm font-medium"
+              :class="
+                task.published
+                  ? 'bg-yellow-100 text-yellow-700'
+                  : 'bg-green-100 text-green-700'
+              "
+              @click="askTogglePublish(task)"
+            >
+              {{
+                task.published
+                  ? t('taskOverview.unpublish')
+                  : t('taskOverview.publish')
+              }}
+            </button>
+
+            <button
+              class="rounded-xl bg-red-100 px-3 py-1.5 text-sm text-red-700 hover:bg-red-200"
+              @click="askDelete(task.id)"
+            >
+              {{ t('taskOverview.delete') }}
+            </button>
+          </div>
+
+          <hr v-if="index < filteredTasks.length - 1" class="border-gray-200" />
+        </div>
+      </div>
+
+      <ClassroomTaskSidebar
+        :stops="stops"
+        :active-slug="slug"
+        :filters="taskTypes"
+        :active-filter="filter"
+        @select-stop="selectStop"
+        @select-filter="filter = $event"
+      />
+    </div>
+
+    <ConfirmModal
+      v-model="showDeleteModal"
+      :title="t('taskOverview.delete')"
+      :message="t('taskOverview.message')"
+      :confirm-text="t('taskOverview.delete')"
+      :cancel-text="t('taskOverview.cancel')"
+      @confirm="confirmDelete"
+    />
+
+    <ConfirmModal
+      v-model="showPublishModal"
+      :title="t('taskOverview.ptitle')"
+      :message="t('taskOverview.pmessage')"
+      :confirm-text="t('taskOverview.confirm')"
+      :cancel-text="t('taskOverview.cancel')"
+      @confirm="confirmPublish"
+    />
+  </section>
+</template>
diff --git a/src/classrooms/pages/EditClassroomTask.vue b/src/classrooms/pages/EditClassroomTask.vue
new file mode 100644
index 00000000..3e89f725
--- /dev/null
+++ b/src/classrooms/pages/EditClassroomTask.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/auth/model/auth.store'
+import { useI18n } from 'vue-i18n'
+import { useTeacherStops } from '@/classrooms/components/composables/UseTeacherStops'
+import {
+  requestCreateTask,
+  requestTask,
+  requestUpdateTask,
+  type TaskResponse,
+} from '@/stops/api/stops.api'
+
+import TaskMetaEditor from '@/classrooms/components/tasks/TaskMetaEditor.vue'
+import TaskItemsEditor from '@/classrooms/components/tasks/TaskItemsEditor.vue'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const { t } = useI18n()
+
+const classroomId = computed(() => Number(route.params.classroomId))
+const { stops } = useTeacherStops(classroomId)
+const taskId = route.params.taskId ? Number(route.params.taskId) : null
+
+const isEditMode = computed(() => taskId !== null)
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+const form = ref<TaskResponse>({
+  id: 0,
+  classroomId: classroomId.value,
+  stopId: 1,
+  createdByTeacherId: 0,
+  title: { en: '', nb: '' },
+  introText: { en: '', nb: '' },
+  difficultyLevel: 1,
+  taskType: 'GENERIC',
+  passingRule: 'ALL_CORRECT',
+  passingScore: null,
+  maxScore: 1,
+  published: false,
+  items: [],
+})
+
+const selectedStop = computed(() =>
+  stops.value.find((s) => s.stopId === form.value.stopId),
+)
+
+async function load() {
+  if (!taskId) return
+  if (!authStore.authorizationHeader) return
+
+  loading.value = true
+  error.value = null
+
+  try {
+    const data = await requestTask(
+      classroomId.value,
+      taskId,
+      authStore.authorizationHeader,
+    )
+
+    form.value = data
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : t('newTask.savefail')
+  } finally {
+    loading.value = false
+  }
+}
+
+function addItem() {
+  form.value.items.push({
+    id: Date.now(),
+    itemOrder: form.value.items.length + 1,
+    promptText: { en: '', nb: '' },
+    mediaUrl: null,
+    metadataJson: null,
+    options: [],
+  })
+}
+
+async function save() {
+  if (!authStore.authorizationHeader) return
+
+  loading.value = true
+  error.value = null
+
+  try {
+    if (isEditMode.value && taskId !== null) {
+      await requestUpdateTask(
+        classroomId.value,
+        taskId,
+        form.value,
+        authStore.authorizationHeader,
+      )
+    } else {
+      await requestCreateTask(
+        classroomId.value,
+        form.value,
+        authStore.authorizationHeader,
+      )
+    }
+
+    const slug = selectedStop.value?.slug
+
+    if (!slug) {
+      error.value = 'Could not determine stop slug'
+      return
+    }
+
+    await router.push({
+      name: 'classroom-tasks',
+      params: {
+        classroomId: classroomId.value,
+        slug,
+      },
+    })
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : t('newTask.savefail')
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl px-6 py-8 pt-28 space-y-8">
+    <div class="space-y-1">
+      <h1 class="text-3xl font-bold text-gray-900">
+        {{ isEditMode ? 'Edit Task' : 'Create Task' }}
+      </h1>
+
+      <p v-if="error" class="text-sm text-red-600">
+        {{ error }}
+      </p>
+    </div>
+
+    <TaskMetaEditor v-model="form" />
+
+    <div class="flex items-center justify-between pt-2">
+      <h2 class="text-xl font-semibold text-gray-900">
+        {{ t('newTask.item') }}
+      </h2>
+
+      <button
+        class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
+        @click="addItem"
+      >
+        {{ t('newTask.additem') }}
+      </button>
+    </div>
+
+    <TaskItemsEditor :items="form.items" :task-type="form.taskType" />
+
+    <div class="sticky bottom-0 p-4 flex justify-end gap-3">
+      <button
+        class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300 transition"
+        @click="router.back()"
+      >
+        {{ t('newTask.cancel') }}
+      </button>
+
+      <button
+        class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700 transition disabled:opacity-50"
+        :disabled="loading"
+        @click="save"
+      >
+        {{ isEditMode ? t('newTask.save') : t('newTask.create') }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/classrooms/pages/JoinClassroom.vue b/src/classrooms/pages/JoinClassroom.vue
index 0c9d2abb..ca50d4f9 100644
--- a/src/classrooms/pages/JoinClassroom.vue
+++ b/src/classrooms/pages/JoinClassroom.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { useClassroomsStore } from '@/classrooms/store/classrooms.store'
+import { useClassroomsStore } from '@/classrooms/model/classrooms.store.ts'
 import { useAuthStore } from '@/auth/model/auth.store.ts'
 import LogoutButton from '@/shared/components/LogoutButton.vue'
 import { useI18n } from 'vue-i18n'
@@ -46,6 +46,10 @@ async function join() {
 
   try {
     await classroomsStore.joinClassroom(code)
+
+    if (authStore.user?.pupilProfile?.membershipStatus === 'PENDING') {
+      await router.push({ name: 'pupil-pending-approval' })
+    }
   } catch (error) {
     console.error('JOIN CLASSROOM ERROR:', error)
     errorMessage.value = t('joinClassroom.invalid')
diff --git a/src/classrooms/pages/NewClassroom.vue b/src/classrooms/pages/NewClassroom.vue
index c04c2f1c..93e01571 100644
--- a/src/classrooms/pages/NewClassroom.vue
+++ b/src/classrooms/pages/NewClassroom.vue
@@ -2,7 +2,7 @@
 import { computed, ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/auth/model/auth.store'
-import { useClassroomsStore } from '@/classrooms/store/classrooms.store'
+import { useClassroomsStore } from '@/classrooms/model/classrooms.store.ts'
 import { useI18n } from 'vue-i18n'
 
 const router = useRouter()
diff --git a/src/classrooms/pages/NewClassroomTask.vue b/src/classrooms/pages/NewClassroomTask.vue
new file mode 100644
index 00000000..9a4b2db7
--- /dev/null
+++ b/src/classrooms/pages/NewClassroomTask.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/auth/model/auth.store'
+import { useI18n } from 'vue-i18n'
+
+import {
+  requestCreateTask,
+  requestTask,
+  requestUpdateTask,
+  type TaskResponse,
+} from '@/stops/api/stops.api'
+
+import TaskMetaEditor from '@/classrooms/components/tasks/TaskMetaEditor.vue'
+import TaskItemsEditor from '@/classrooms/components/tasks/TaskItemsEditor.vue'
+import { useTeacherStops } from '@/classrooms/components/composables/UseTeacherStops'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const { t } = useI18n()
+
+const classroomId = computed(() => Number(route.params.classroomId))
+const taskId = route.params.taskId ? Number(route.params.taskId) : null
+
+const isEditMode = computed(() => taskId !== null)
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+const {
+  stops,
+  status: stopsStatus,
+  error: stopsError,
+} = useTeacherStops(classroomId)
+
+const selectedStopId = ref<number | null>(null)
+
+const form = ref<TaskResponse>({
+  id: 0,
+  classroomId: classroomId.value,
+  stopId: 0,
+  createdByTeacherId: 0,
+  title: { en: '', nb: '' },
+  introText: { en: '', nb: '' },
+  difficultyLevel: 1,
+  taskType: 'GENERIC',
+  passingRule: 'ALL_CORRECT',
+  passingScore: null,
+  maxScore: 1,
+  published: false,
+  items: [],
+})
+
+async function load() {
+  if (!taskId || !authStore.authorizationHeader) return
+
+  loading.value = true
+  try {
+    const task = await requestTask(
+      classroomId.value,
+      taskId,
+      authStore.authorizationHeader,
+    )
+
+    form.value = task
+    selectedStopId.value = task.stopId
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(stops, (newStops) => {
+  if (!selectedStopId.value && newStops.length > 0) {
+    selectedStopId.value = newStops[0]!.stopId
+  }
+})
+
+function addItem() {
+  form.value.items.push({
+    id: Date.now(),
+    itemOrder: form.value.items.length + 1,
+    promptText: { en: '', nb: '' },
+    mediaUrl: null,
+    metadataJson: null,
+    options: [],
+  })
+}
+
+async function save() {
+  if (!authStore.authorizationHeader || selectedStopId.value === null) return
+
+  loading.value = true
+  error.value = null
+
+  try {
+    form.value.stopId = selectedStopId.value
+
+    if (isEditMode.value) {
+      await requestUpdateTask(
+        classroomId.value,
+        taskId!,
+        form.value,
+        authStore.authorizationHeader,
+      )
+    } else {
+      await requestCreateTask(
+        classroomId.value,
+        form.value,
+        authStore.authorizationHeader,
+      )
+    }
+
+    const selectedStop = computed(() =>
+      stops.value.find((s) => s.stopId === selectedStopId.value),
+    )
+
+    router.push({
+      name: 'classroom-tasks',
+      params: {
+        classroomId: classroomId.value,
+        slug: selectedStop.value?.slug ?? undefined,
+      },
+    })
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : t('newTask.savefail')
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl px-6 py-6 pt-30 space-y-8">
+    <div class="space-y-2">
+      <h1 class="text-3xl font-bold">
+        {{ isEditMode ? t('newTask.edit') : t('newTask.create') }}
+      </h1>
+
+      <p v-if="error" class="text-red-600">
+        {{ error }}
+      </p>
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm font-medium text-gray-700">Stop</label>
+
+      <select
+        v-model="selectedStopId"
+        class="w-full rounded-lg border px-3 py-2"
+      >
+        <option disabled :value="null">
+          {{ t('newTask.select') }}
+        </option>
+
+        <option v-for="stop in stops" :key="stop.stopId" :value="stop.stopId">
+          {{ stop.displayOrder }}. {{ stop.title }}
+        </option>
+      </select>
+
+      <p v-if="stopsStatus === 'loading'" class="text-sm text-gray-400">
+        {{ t('newTask.loading') }}
+      </p>
+
+      <p v-if="stopsError" class="text-sm text-red-600">
+        {{ stopsError }}
+      </p>
+    </div>
+
+    <TaskMetaEditor v-model="form" />
+
+    <div class="flex items-center justify-between pt-2">
+      <h2 class="text-xl font-semibold">
+        {{ t('newTask.item') }}
+      </h2>
+
+      <button
+        class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
+        @click="addItem"
+      >
+        {{ t('newTask.additem') }}
+      </button>
+    </div>
+
+    <TaskItemsEditor :items="form.items" :task-type="form.taskType" />
+
+    <div class="sticky bottom-0 p-4 flex justify-end gap-3">
+      <button
+        class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300"
+        @click="router.back()"
+      >
+        {{ t('newTask.cancel') }}
+      </button>
+
+      <button
+        class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700"
+        :disabled="loading || selectedStopId === null"
+        @click="save"
+      >
+        {{ isEditMode ? t('newTask.save') : t('newTask.create') }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/classrooms/pages/PendingApproval.vue b/src/classrooms/pages/PendingApproval.vue
new file mode 100644
index 00000000..6a5b3815
--- /dev/null
+++ b/src/classrooms/pages/PendingApproval.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { useAuthStore } from '@/auth/model/auth.store'
+import { useRouter } from 'vue-router'
+import LogoutButton from '@/shared/components/LogoutButton.vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+let interval: number
+
+const authStore = useAuthStore()
+const router = useRouter()
+
+const status = computed(() => authStore.user?.pupilProfile?.membershipStatus)
+
+onMounted(() => {
+  interval = window.setInterval(async () => {
+    await authStore.fetchCurrentUserProfile()
+  }, 3000)
+})
+
+onUnmounted(() => {
+  clearInterval(interval)
+})
+
+watch(status, (newStatus) => {
+  if (newStatus === 'ACTIVE') {
+    router.push({ name: 'pupil-home' })
+  }
+})
+</script>
+
+<template>
+  <main class="flex min-h-screen items-center justify-center px-6">
+    <div
+      class="w-full max-w-md rounded-xl p-8 shadow-lg backdrop-blur-md text-center"
+    >
+      <h1 class="text-2xl font-bold text-gray-800">
+        {{ t('pendingApproval.waiting') }}
+      </h1>
+
+      <p class="mt-2 text-sm text-gray-600">
+        {{ t('pendingApproval.request') }}
+      </p>
+
+      <div class="mt-6 space-y-3">
+        <div
+          class="rounded-lg border border-yellow-200 bg-yellow-50 px-4 py-3 text-sm text-yellow-800"
+        >
+          Status:
+          <span class="font-semibold">
+            {{ status ?? 'UNKNOWN' }}
+          </span>
+        </div>
+
+        <button
+          class="inline-flex w-full items-center justify-center rounded-full border-2 border-[#7f6647] bg-white px-4 py-3 font-(--font-display-2) text-[0.95rem] leading-none text-[#5e4428] shadow-[0_4px_10px_rgba(94,68,40,0.12),inset_0_-2px_0_rgba(179,143,94,0.35)] transition duration-150 hover:-translate-y-px hover:border-[#6b5270] hover:shadow-[0_8px_16px_rgba(94,68,40,0.16),inset_0_-2px_0_rgba(179,143,94,0.35)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1a4a7a]"
+          @click="authStore.fetchCurrentUserProfile()"
+        >
+          {{ t('pendingApproval.refresh') }}
+        </button>
+
+        <LogoutButton />
+      </div>
+    </div>
+  </main>
+</template>
diff --git a/src/classrooms/pages/__tests__/ClassroomDetails.spec.ts b/src/classrooms/pages/__tests__/ClassroomDetails.spec.ts
index 7af1892f..319f971c 100644
--- a/src/classrooms/pages/__tests__/ClassroomDetails.spec.ts
+++ b/src/classrooms/pages/__tests__/ClassroomDetails.spec.ts
@@ -3,11 +3,15 @@ import { reactive } from 'vue'
 import { createMemoryHistory, createRouter } from 'vue-router'
 import { describe, expect, it, vi } from 'vitest'
 import { createAppI18n } from '@/app/i18n'
+import { createPinia, setActivePinia } from 'pinia'
 import ClassroomDetails from '@/classrooms/pages/ClassroomDetails.vue'
 
+const pinia = createPinia()
+setActivePinia(pinia)
+
 const store = reactive({
   selectedClassroom: {
-    id: 7,
+    classroomId: 7,
     title: 'Security',
     description: 'Digital safety',
     joinCode: 'SAFE7',
@@ -27,7 +31,7 @@ const store = reactive({
   updateClassroom: vi.fn().mockResolvedValue(undefined),
 })
 
-vi.mock('@/classrooms/store/classrooms.store', () => ({
+vi.mock('@/classrooms/model/classrooms.store', () => ({
   useClassroomsStore: () => store,
 }))
 
@@ -50,7 +54,7 @@ describe('ClassroomDetails', () => {
 
     const wrapper = mount(ClassroomDetails, {
       global: {
-        plugins: [router, createAppI18n()],
+        plugins: [router, createAppI18n(), pinia],
         stubs: {
           RouterLink: {
             props: ['to'],
diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index 0374200f..fec88d79 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -8,6 +8,10 @@ import PupilOverviewPage from '@/classrooms/pages/PupilOverviewPage.vue'
 import TeacherPlaytestMapPage from '@/teacher-playtest/pages/TeacherPlaytestMapPage.vue'
 import NotificationsPage from '@/notifications/pages/NotificationsPage.vue'
 import TeacherPlaytestStopPage from '@/teacher-playtest/pages/TeacherPlaytestStopPage.vue'
+import ClassroomTasks from '@/classrooms/pages/ClassroomTasks.vue'
+import NewClassroomTask from '@/classrooms/pages/NewClassroomTask.vue'
+import EditClassroomTask from '@/classrooms/pages/EditClassroomTask.vue'
+import PendingApproval from '@/classrooms/pages/PendingApproval.vue'
 import TeacherMystery from '@/teacher-mystery/pages/TeacherMystery.vue'
 import TeacherPupilNotebookPage from '@/notebook/pages/TeacherPupilNotebookPage.vue'
 import ClassroomModerationPage from '@/classrooms/pages/ClassroomModerationPage.vue'
@@ -51,6 +55,15 @@ export function createClassroomRoutes(
         hideHomeButton: true,
       },
     },
+    {
+      path: 'pending-approval',
+      name: `${prefix}-pending-approval`,
+      component: PendingApproval,
+      meta: {
+        hideBackButton: true,
+        hideHomeButton: true,
+      },
+    },
     {
       path: 'classroom-details/:classroomId',
       name: `${prefix}-classroom-details`,
@@ -101,9 +114,25 @@ export function createClassroomRoutes(
       },
     },
     {
-      path: 'classrooms/:classroomId/tasks',
+      path: 'classrooms/:classroomId/tasks/:slug',
       name: 'classroom-tasks',
-      component: ClassroomDetails,
+      component: ClassroomTasks,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
+    },
+    {
+      path: 'classrooms/:classroomId/tasks/new',
+      name: 'new-classroom-task',
+      component: NewClassroomTask,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
+    },
+    {
+      path: 'classrooms/:classroomId/tasks/:taskId',
+      name: 'edit-classroom-task',
+      component: EditClassroomTask,
       meta: {
         backTarget: classroomDetailsBackTarget,
       },
@@ -136,7 +165,6 @@ export function createClassroomRoutes(
       },
     },
   ]
-
   if (options.includeModerationRoute) {
     routes.push({
       path: 'classrooms/:classroomId/moderation',
diff --git a/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts b/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts
index ffdd59f6..8a2dd345 100644
--- a/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts
+++ b/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts
@@ -32,6 +32,7 @@ describe('Leaderboard', () => {
         currentLevel: 1,
         currentClassroomId: 1,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index c5ffecb6..08717d8a 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -906,6 +906,12 @@ export const nb = {
     actions: 'Handlinger',
     remove: 'Fjern',
     seeNotebook: 'Se notatbok',
+    pending: 'Elever som avventer godkjenning',
+    approved: 'Godkjente elever',
+    approve: 'Godkjenn',
+    confirm: 'Fjern elev',
+    message: 'Er du sikker på at du vil fjerne eleven fra klasseromet?',
+    cancel: 'Avbryt',
   },
   pupilOverviewPage: {
     title: 'Elever',
@@ -954,8 +960,68 @@ export const nb = {
     open: 'Åpne',
     joinCode: 'Klasseromskode',
   },
+  taskOverview: {
+    title: 'Oppgaver',
+    fail: 'Kunne ikke hente oppgavene',
+    unpublish: 'Avpubliser',
+    publish: 'Publiser',
+    delete: 'Slett oppgave',
+    message:
+      'Er du sikker på at du vil slette oppgaven? Dette kan ikke reverseres.',
+    ptitle: 'Endre publiserings status',
+    pmessage:
+      'Er du sikker på at du vil endre publiserings statusen til oppgaven?',
+    confirm: 'Fortsett',
+    create: 'Opprett oppgave',
+    notask: 'Ingen oppgaver funnet',
+    unpublished: 'Ikke publisert',
+    published: 'Publisert',
+    edit: 'Rediger',
+    cancel: 'Avbryt',
+  },
+  newTask: {
+    savefail: 'Lagring feilet',
+    edit: 'Rediger oppgave',
+    create: 'Opprett oppgave',
+    select: 'Velg stoppested',
+    loading: 'Laster stoppested...',
+    additem: 'Legg til punkt',
+    cancel: 'Avbryt',
+    save: 'Lagre',
+    stops: 'Stoppesteder',
+    remove: 'Fjern',
+    item: 'Punkt',
+    prompt: 'Spørsmål',
+    ep: 'Engelsk spørsmål',
+    np: 'Norsk spørsmål',
+    et: 'Engelsk tittel',
+    nt: 'Norsk tittel',
+    ei: 'Engelsk introduksjon',
+    ni: 'Norsk introduksjon',
+    news: 'Nyhetssammenligning',
+    difficulty: 'Vanskelighetsgrad',
+    options: 'Valgmuligheter',
+    eo: 'Engelsk valgmulighet',
+    no: 'Norsk valgmulighet',
+    correct: 'Riktig',
+    answer: 'Fasit',
+    ea: 'Engelsk forklaring',
+    na: 'Norsk forklaring',
+    addoption: 'Legg til valgmulighet',
+  },
   classroomDetails: {
     label: 'Klasserom',
+    titlealert: 'Klasserommet må ha tittel.',
+    failalert: 'Kunne ikke oppdatere klasserommet.',
+    confirmmessage:
+      'Er du sikker på at du vil slette kalsseromet? Alle elever og data vil bli fjernet.',
+    save: 'Lagre',
+    cancel: 'Avbryt',
+    deleteclass: 'Slett klasserom',
+    edit: 'Endre',
+    addteachers: 'Legg til lærere',
+    existingteachers: 'Eksisterende lærere',
+    confirm: 'Slett',
     teacherAccess: {
       title: 'Lærertilgang',
       description: 'Se og administrer hvilke lærere som har tilgang.',
@@ -1031,6 +1097,12 @@ export const nb = {
       missingWord: 'Skriv inn et ord før du lagrer.',
     },
   },
+  pendingApproval: {
+    refresh: 'Oppdater status',
+    waiting: 'Venter på godkjenning.',
+    request:
+      'Din forespørsel på å bli med i klasserommet avventer godkjenning fra lærer.',
+  },
   mystery: {
     title: 'Ukens mysterium',
     subtitle: 'Se hva læreren har valgt ut, og send inn ditt eget funn!',
diff --git a/src/map/model/__tests__/map.store.spec.ts b/src/map/model/__tests__/map.store.spec.ts
index be5cfe75..78b20d5d 100644
--- a/src/map/model/__tests__/map.store.spec.ts
+++ b/src/map/model/__tests__/map.store.spec.ts
@@ -53,6 +53,7 @@ function seedAuthStore() {
       totalXp: 0,
       currentLevel: 1,
       currentClassroomId: CLASSROOM_ID,
+      membershipStatus: 'ACTIVE',
       hasCompletedOnboarding: true,
     },
     teacherProfile: null,
diff --git a/src/mystery/model/__tests__/mystery.store.spec.ts b/src/mystery/model/__tests__/mystery.store.spec.ts
index bd9e6173..d1041396 100644
--- a/src/mystery/model/__tests__/mystery.store.spec.ts
+++ b/src/mystery/model/__tests__/mystery.store.spec.ts
@@ -52,6 +52,7 @@ function seedPupilAuthStore() {
       currentLevel: 1,
       currentClassroomId: CLASSROOM_ID,
       hasCompletedOnboarding: true,
+      membershipStatus: 'ACTIVE',
     },
     teacherProfile: null,
   }
@@ -140,6 +141,7 @@ describe('useMysteryStore', () => {
         currentLevel: 1,
         currentClassroomId: null as unknown as number,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/notebook/components/__tests__/NotebookComponent.spec.ts b/src/notebook/components/__tests__/NotebookComponent.spec.ts
index 81668913..6266bcd8 100644
--- a/src/notebook/components/__tests__/NotebookComponent.spec.ts
+++ b/src/notebook/components/__tests__/NotebookComponent.spec.ts
@@ -246,6 +246,7 @@ describe('NotebookComponent pupil pagination', () => {
         totalXp: 0,
         currentLevel: 1,
         currentClassroomId: 7,
+        membershipStatus: 'ACTIVE',
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
diff --git a/src/notifications/composables/useNotificationsInbox.ts b/src/notifications/composables/useNotificationsInbox.ts
index 7e0e83de..ccb64ea2 100644
--- a/src/notifications/composables/useNotificationsInbox.ts
+++ b/src/notifications/composables/useNotificationsInbox.ts
@@ -302,7 +302,7 @@ export function useNotificationsInbox(
           authorizationHeader,
         )
         nextClassrooms.push({
-          classroomId: lockedDetail.id,
+          classroomId: lockedDetail.classroomId,
           title: lockedDetail.title,
           description: lockedDetail.description ?? '',
           pupilCount: lockedDetail.pupils.length,
@@ -351,7 +351,7 @@ export function useNotificationsInbox(
 
       const nextOptions = classroomDetails.flatMap((detail) =>
         detail.pupils.map((pupil) => ({
-          classroomId: detail.id,
+          classroomId: detail.classroomId,
           classroomTitle: detail.title,
           userId: pupil.userId,
           displayName: pupil.displayName,
diff --git a/src/profile/pages/__tests__/PupilProfilePage.spec.ts b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
index 5458cc9d..f29a5632 100644
--- a/src/profile/pages/__tests__/PupilProfilePage.spec.ts
+++ b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
@@ -71,6 +71,7 @@ describe('PupilProfilePage', () => {
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts b/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts
index ab5cd254..f003a30e 100644
--- a/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts
+++ b/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts
@@ -75,6 +75,7 @@ describe('PupilHomePage', () => {
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
@@ -111,6 +112,7 @@ describe('PupilHomePage', () => {
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
index 77780c2d..04e59a26 100644
--- a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
+++ b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
@@ -81,6 +81,7 @@ describe('PupilOnboardingPage', () => {
         currentLevel: 1,
         currentClassroomId: null,
         hasCompletedOnboarding: false,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
@@ -94,6 +95,7 @@ describe('PupilOnboardingPage', () => {
         displayName: 'Ada Lovelace',
         totalXp: 0,
         currentLevel: 1,
+        membershipStatus: null,
         currentClassroomId: null,
         hasCompletedOnboarding: false,
       },
@@ -105,6 +107,7 @@ describe('PupilOnboardingPage', () => {
       currentLevel: 1,
       currentClassroomId: null,
       hasCompletedOnboarding: true,
+      membershipStatus: null,
     })
 
     const wrapper = mount(PupilOnboardingPage, {
@@ -165,6 +168,7 @@ describe('PupilOnboardingPage', () => {
         totalXp: 300,
         currentLevel: 2,
         currentClassroomId: 10,
+        membershipStatus: 'ACTIVE',
         hasCompletedOnboarding: false,
       },
       teacherProfile: null,
@@ -196,6 +200,7 @@ describe('PupilOnboardingPage', () => {
         totalXp: 300,
         currentLevel: 2,
         currentClassroomId: 10,
+        membershipStatus: 'ACTIVE',
         hasCompletedOnboarding: false,
       },
       teacherProfile: null,
@@ -237,6 +242,7 @@ describe('PupilOnboardingPage', () => {
         totalXp: 0,
         currentLevel: 1,
         currentClassroomId: 10,
+        membershipStatus: 'ACTIVE',
         hasCompletedOnboarding: false,
       },
       teacherProfile: null,
diff --git a/src/stops/api/stops.api.ts b/src/stops/api/stops.api.ts
index 693929da..0c7c7525 100644
--- a/src/stops/api/stops.api.ts
+++ b/src/stops/api/stops.api.ts
@@ -37,6 +37,43 @@ async function fetchJson<T>(
 
 // ---- Response shapes (mirrors backend TaskResponses.kt) ----
 
+export interface LocalizedRequiredTextRequest {
+  nb: string
+  en: string
+}
+
+export interface LocalizedOptionalTextRequest {
+  nb: string | null
+  en: string | null
+}
+
+export interface TaskOptionRequest {
+  optionOrder: number
+  optionText: LocalizedRequiredTextRequest
+  isCorrect: boolean
+  explanationText: LocalizedOptionalTextRequest | null
+}
+
+export interface TaskItemRequest {
+  itemOrder: number
+  promptText: LocalizedRequiredTextRequest
+  mediaUrl: string | null
+  metadataJson: string | null
+  options: TaskOptionRequest[]
+}
+
+export interface TaskForm {
+  stopId: number
+  title: LocalizedRequiredTextRequest
+  introText: LocalizedOptionalTextRequest
+  difficultyLevel: number
+  taskType: TaskType
+  passingRule: string
+  passingScore: number | null
+  maxScore: number
+  items: TaskItemRequest[]
+}
+
 export interface LocalizedText {
   nb: string
   en: string
@@ -52,7 +89,7 @@ export interface TaskOptionResponse {
   optionOrder: number
   optionText: LocalizedText
   isCorrect: boolean | null
-  explanationText: LocalizedOptionalText | null
+  explanationText: LocalizedOptionalText
 }
 
 export interface TaskItemResponse {
@@ -70,7 +107,7 @@ export interface TaskResponse {
   stopId: number
   createdByTeacherId: number
   title: LocalizedText
-  introText: LocalizedOptionalText | null
+  introText: LocalizedOptionalText
   difficultyLevel: number
   taskType: TaskType
   passingRule: string
@@ -204,3 +241,67 @@ export function requestSubmitStopAnswers(
     },
   )
 }
+
+export function requestCreateTask(
+  classroomId: number,
+  payload: unknown,
+  authorizationHeader: string,
+) {
+  return fetchJson<TaskResponse>(
+    `${CLASSROOMS_BASE}/${classroomId}/tasks`,
+    authorizationHeader,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
+  )
+}
+
+export function requestUpdateTask(
+  classroomId: number,
+  taskId: number,
+  payload: unknown,
+  authorizationHeader: string,
+) {
+  return fetchJson<TaskResponse>(
+    `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}`,
+    authorizationHeader,
+    {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
+  )
+}
+
+export function requestUpdateTaskPublishState(
+  classroomId: number,
+  taskId: number,
+  published: boolean,
+  authorizationHeader: string,
+) {
+  return fetchJson<TaskResponse>(
+    `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}/publish`,
+    authorizationHeader,
+    {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ published }),
+    },
+  )
+}
+
+export function requestDeleteTask(
+  classroomId: number,
+  taskId: number,
+  authorizationHeader: string,
+) {
+  return fetchJson<void>(
+    `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}`,
+    authorizationHeader,
+    {
+      method: 'DELETE',
+    },
+  )
+}
diff --git a/src/stops/model/__tests__/stop.store.spec.ts b/src/stops/model/__tests__/stop.store.spec.ts
index 87efcb1f..4a3920de 100644
--- a/src/stops/model/__tests__/stop.store.spec.ts
+++ b/src/stops/model/__tests__/stop.store.spec.ts
@@ -106,6 +106,7 @@ function seedAuthStore() {
       totalXp: 0,
       currentLevel: 1,
       currentClassroomId: CLASSROOM_ID,
+      membershipStatus: 'ACTIVE',
       hasCompletedOnboarding: true,
     },
     teacherProfile: null,
diff --git a/src/stops/model/task.store.ts b/src/stops/model/task.store.ts
new file mode 100644
index 00000000..8ee12b48
--- /dev/null
+++ b/src/stops/model/task.store.ts
@@ -0,0 +1,111 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+import { useAuthStore } from '@/auth/model/auth.store'
+
+import {
+  requestDeleteTask,
+  requestUpdateTaskPublishState,
+  requestCreateTask,
+  requestUpdateTask,
+  type TaskForm,
+  type TaskResponse,
+} from '@/stops/api/stops.api'
+
+export const useTasksStore = defineStore('tasks', () => {
+  const authStore = useAuthStore()
+
+  const draft = ref<TaskForm | null>(null)
+  const loading = ref(false)
+
+  async function deleteTask(classroomId: number, taskId: number) {
+    if (!authStore.authorizationHeader) throw new Error('Not authenticated')
+
+    await requestDeleteTask(classroomId, taskId, authStore.authorizationHeader)
+  }
+
+  async function togglePublish(
+    classroomId: number,
+    taskId: number,
+    published: boolean,
+  ) {
+    if (!authStore.authorizationHeader) throw new Error('Not authenticated')
+
+    return requestUpdateTaskPublishState(
+      classroomId,
+      taskId,
+      published,
+      authStore.authorizationHeader,
+    )
+  }
+
+  function initDraft(stopId: number) {
+    draft.value = {
+      stopId,
+      title: { nb: '', en: '' },
+      introText: { nb: null, en: null },
+      difficultyLevel: 1,
+      taskType: 'NEWS_COMPARISON',
+      passingRule: 'ALL_CORRECT',
+      passingScore: null,
+      maxScore: 1,
+      items: [],
+    }
+  }
+
+  function updateDraft(partial: Partial<TaskForm>) {
+    if (!draft.value) return
+    draft.value = {
+      ...draft.value,
+      ...partial,
+    }
+  }
+
+  function updateItems(items: TaskForm['items']) {
+    if (!draft.value) return
+    draft.value.items = items
+  }
+
+  async function createTask(classroomId: number): Promise<TaskResponse> {
+    if (!authStore.authorizationHeader) throw new Error('Not authenticated')
+    if (!draft.value) throw new Error('No draft initialized')
+
+    loading.value = true
+    try {
+      return await requestCreateTask(
+        classroomId,
+        draft.value,
+        authStore.authorizationHeader,
+      )
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function updateTask(
+    classroomId: number,
+    taskId: number,
+  ): Promise<TaskResponse> {
+    if (!authStore.authorizationHeader) throw new Error('Not authenticated')
+    if (!draft.value) throw new Error('No draft initialized')
+
+    return requestUpdateTask(
+      classroomId,
+      taskId,
+      draft.value,
+      authStore.authorizationHeader,
+    )
+  }
+
+  return {
+    draft,
+    loading,
+    deleteTask,
+    togglePublish,
+    initDraft,
+    updateDraft,
+    updateItems,
+    createTask,
+    updateTask,
+  }
+})
diff --git a/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts b/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts
index b913c1fb..dfd15591 100644
--- a/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts
+++ b/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts
@@ -129,6 +129,7 @@ describe('useTeacherMysteryStore', () => {
         currentLevel: 1,
         currentClassroomId: CLASSROOM_ID,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
@@ -253,6 +254,7 @@ describe('useTeacherMysteryStore', () => {
         currentLevel: 1,
         currentClassroomId: CLASSROOM_ID,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }