From ce97ca74c707459369b5ad23a979550d39c2ef67 Mon Sep 17 00:00:00 2001
From: Oliver Pelly <opelly@gmail.com>
Date: Wed, 8 Apr 2026 13:36:23 -0700
Subject: [PATCH 1/6] first commit

---
 .../add-goal-modal/add-goal-modal.html        | 109 ++----
 .../add-goal-modal/add-goal-modal.scss        | 147 +-------
 .../add-goal-modal/add-goal-modal.ts          |  31 +-
 .../add-student-modal/add-student-modal.html  |  82 +----
 .../add-student-modal/add-student-modal.scss  | 131 +------
 .../add-student-modal/add-student-modal.ts    |  22 +-
 .../benchmark-card-full.scss                  | 116 +++---
 .../benchmark-card-full.ts                    |   2 +-
 .../edit-benchmark-modal.html                 |  21 ++
 .../edit-benchmark-modal.scss                 |   1 +
 .../edit-benchmark-modal.ts                   |  54 +++
 .../edit-event-modal/edit-event-modal.html    |  36 ++
 .../edit-event-modal/edit-event-modal.scss    |  21 ++
 .../edit-event-modal/edit-event-modal.ts      |  98 +++++
 .../edit-goal-modal/edit-goal-modal.html      |  29 ++
 .../edit-goal-modal/edit-goal-modal.scss      |   1 +
 .../edit-goal-modal/edit-goal-modal.ts        |  58 +++
 .../edit-student-modal.html                   |  21 ++
 .../edit-student-modal.scss                   |   1 +
 .../edit-student-modal/edit-student-modal.ts  |  51 +++
 .../components/modal-shell/modal-shell.html   |  10 +
 .../components/modal-shell/modal-shell.scss   | 134 +++++++
 .../components/modal-shell/modal-shell.ts     |  19 +
 .../desktop/components/reports/reports.scss   |  48 ++-
 .../student-progress-report.scss              | 111 +++---
 .../components/workspace/workspace.html       | 135 +++++++
 .../components/workspace/workspace.scss       | 276 ++++++++++++++
 .../desktop/components/workspace/workspace.ts | 230 ++++++++++++
 .../src/app/desktop/desktop.routes.ts         |  24 +-
 .../src/app/desktop/pages/home/home.html      |  85 ++++-
 .../src/app/desktop/pages/home/home.scss      | 297 ++++++++++-----
 .../src/app/desktop/pages/home/home.ts        | 339 +++++-------------
 .../src/app/shared/classes/category-colors.ts |  22 ++
 ui/winstudentgoaltracker/src/styles.scss      |  67 +++-
 34 files changed, 1813 insertions(+), 1016 deletions(-)
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.html
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.scss
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.ts
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.html
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.scss
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.html
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.scss
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.ts
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-student-modal/edit-student-modal.html
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-student-modal/edit-student-modal.scss
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-student-modal/edit-student-modal.ts
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.html
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.scss
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.ts
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
 create mode 100644 ui/winstudentgoaltracker/src/app/shared/classes/category-colors.ts

diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html b/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html
index 96cabbf..a5d4b23 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html
@@ -1,83 +1,32 @@
-<div class="overlay" (click)="onCancel()"></div>
-
-<div class="modal">
-    <div class="modal-header">
-        <h2 class="modal-title">Add Goal</h2>
-        <button class="close-btn" (click)="onCancel()" aria-label="Close">&times;</button>
+<app-modal-shell title="Add Goal" (closed)="cancelled.emit()">
+    <div class="field">
+        <label class="field-label">Category</label>
+        <input class="field-input" type="text" [(ngModel)]="form.category"
+            placeholder="e.g. Reading, Math, Behavior…" />
+    </div>
+    <div class="field">
+        <label class="field-label">Baseline</label>
+        <textarea class="field-input field-textarea" [(ngModel)]="form.baseline"
+            placeholder="Enter baseline..."></textarea>
+    </div>
+    <div class="field">
+        <label class="field-label">Goal</label>
+        <textarea class="field-input field-textarea" [(ngModel)]="form.description"
+            placeholder="Enter goal..."></textarea>
+    </div>
+    <div class="field">
+        <label class="field-label">Target Completion Date</label>
+        <input class="field-input" type="date" [(ngModel)]="form.targetCompletionDate" />
     </div>
 
-    <form class="modal-body" (ngSubmit)="onSubmit()" #goalForm="ngForm">
+    @if (errorMessage()) {
+    <p class="error">{{ errorMessage() }}</p>
+    }
 
-        <div class="field">
-            <label for="category">Category<span class="required">*</span></label>
-            <input
-                id="category"
-                type="text"
-                [(ngModel)]="form.category"
-                name="category"
-                required
-                placeholder="e.g. Academics"
-            />
-        </div>
-
-        <div class="field">
-            <label for="baseline">Baseline</label>
-            <textarea
-                id="baseline"
-                [(ngModel)]="form.baseline"
-                name="baseline"
-                rows="3"
-                placeholder="Enter baseline..."
-            ></textarea>
-        </div>
-
-        
-        <div class="field">
-            <label for="description">Goal</label>
-            <textarea
-                id="description"
-                [(ngModel)]="form.description"
-                name="description"
-                rows="3"
-                placeholder="Enter goal..."
-            ></textarea>
-        </div>
-
-
-        <div class="field">
-            <label for="targetCompletionDate">Target Completion Date</label>
-            <input
-                id="targetCompletionDate"
-                type="date"
-                [(ngModel)]="form.targetCompletionDate"
-                name="targetCompletionDate"
-            />
-        </div>
-
-        <!-- Parent goal dropdown hidden — may not be needed
-        @if (parentGoalOptions().length > 0) {
-            <div class="field">
-                <label for="goalParentId">Parent Goal <span class="optional">(optional)</span></label>
-                <select id="goalParentId" [(ngModel)]="form.goalParentId" name="goalParentId">
-                    <option [ngValue]="null">None</option>
-                    @for (goal of parentGoalOptions(); track goal.goalId) {
-                        <option [ngValue]="goal.goalId">{{ goal.category }}</option>
-                    }
-                </select>
-            </div>
-        }
-        -->
-
-        @if (errorMessage()) {
-            <p class="error">{{ errorMessage() }}</p>
-        }
-
-        <div class="modal-actions">
-            <button type="button" class="btn btn-secondary" (click)="onCancel()">Cancel</button>
-            <button type="submit" class="btn btn-primary" [disabled]="goalForm.invalid || isSubmitting()">
-                {{ isSubmitting() ? 'Saving...' : 'Add Goal' }}
-            </button>
-        </div>
-
-    </form>
-</div>
+    <div class="modal-actions">
+        <button class="btn-secondary" (click)="cancelled.emit()">Cancel</button>
+        <button class="btn-primary" (click)="onSubmit()" [disabled]="isSubmitting() || !form.category.trim()">
+            {{ isSubmitting() ? 'Saving...' : 'Add Goal' }}
+        </button>
+    </div>
+</app-modal-shell>
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.scss b/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.scss
index c652855..2918c96 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.scss
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.scss
@@ -1,146 +1 @@
-:host {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-}
-
-.overlay {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.4);
-}
-
-.modal {
-    position: relative;
-    background: #fff;
-    border-radius: 10px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
-    width: 420px;
-    max-width: 95vw;
-}
-
-.modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1.25rem 1.5rem 0;
-}
-
-.modal-title {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 600;
-}
-
-.close-btn {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    line-height: 1;
-    cursor: pointer;
-    color: #666;
-    padding: 0;
-}
-
-.close-btn:hover {
-    color: #111;
-}
-
-.modal-body {
-    padding: 1.25rem 1.5rem 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-}
-
-.field label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #333;
-}
-
-.optional {
-    font-weight: 400;
-    color: #999;
-}
-
-.field input,
-.field textarea,
-.field select {
-    padding: 0.5rem 0.75rem;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    font-size: 0.9375rem;
-    font-family: inherit;
-    outline: none;
-    resize: vertical;
-}
-
-.field input:focus,
-.field textarea:focus,
-.field select:focus {
-    border-color: #4f46e5;
-    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
-}
-
-.error {
-    font-size: 0.875rem;
-    color: #dc2626;
-    margin: 0;
-}
-
-.modal-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    margin-top: 0.25rem;
-}
-
-.btn {
-    padding: 0.5rem 1.125rem;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-    border: 1px solid transparent;
-}
-
-.btn-secondary {
-    background: transparent;
-    border-color: #ddd;
-    color: #555;
-}
-
-.btn-secondary:hover {
-    background: #f5f5f5;
-}
-
-.btn-primary {
-    background: #4f46e5;
-    color: #fff;
-    border-color: #4f46e5;
-}
-
-.btn-primary:hover:not(:disabled) {
-    background: #4338ca;
-    border-color: #4338ca;
-}
-
-.btn-primary:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
-
-.required {
-    color: red;
-    margin-left: 4px;
-}
+/* Inherits all styles from modal-shell via ::ng-deep */
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.ts b/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.ts
index 61feb4d..ac775f3 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.ts
@@ -1,21 +1,17 @@
-import { Component, computed, inject, input, output, signal } from '@angular/core';
+import { Component, inject, input, output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { ModalShell } from '../modal-shell/modal-shell';
 import { CreateGoalDto } from '../../../shared/classes/create-goal.dto';
 import { StudentGoalItem } from '../../../shared/classes/student-goal';
 import { StudentService } from '../../../shared/services/student.service';
 
 @Component({
     selector: 'app-add-goal-modal',
-    imports: [FormsModule],
+    imports: [FormsModule, ModalShell],
     templateUrl: './add-goal-modal.html',
     styleUrl: './add-goal-modal.scss',
 })
 export class AddGoalModal {
-
-    // ************************** Constructor **************************
-
-    // ************************** Declarations *************************
-
     private readonly studentService = inject(StudentService);
 
     readonly studentId = input.required<string>();
@@ -27,10 +23,6 @@ export class AddGoalModal {
     protected readonly isSubmitting = signal(false);
     protected readonly errorMessage = signal<string | null>(null);
 
-    protected readonly parentGoalOptions = computed(() =>
-        this.existingGoals().filter(g => g.goalParentId === null)
-    );
-
     protected form: CreateGoalDto = {
         description: '',
         category: '',
@@ -39,9 +31,6 @@ export class AddGoalModal {
         targetCompletionDate: null,
     };
 
-    // *****************************************************************
-    // Pre-fills targetCompletionDate from the student's nextIepDate.
-    // *****************************************************************
     ngOnInit() {
         const iepDate = this.nextIepDate?.();
         if (iepDate) {
@@ -49,18 +38,12 @@ export class AddGoalModal {
         }
     }
 
-    // ************************** Properties ***************************
-
-    // ************************ Public Methods *************************
-
-    // ************************ Event Handlers *************************
-
     async onSubmit() {
+        if (!this.form.category.trim()) return;
         this.errorMessage.set(null);
         this.isSubmitting.set(true);
 
         const result = await this.studentService.createGoal(this.studentId(), this.form);
-
         this.isSubmitting.set(false);
 
         if (!result.success) {
@@ -70,10 +53,4 @@ export class AddGoalModal {
 
         this.goalCreated.emit(result.payload!);
     }
-
-    onCancel() {
-        this.cancelled.emit();
-    }
-
-    // ********************** Support Procedures ***********************
 }
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/add-student-modal/add-student-modal.html b/ui/winstudentgoaltracker/src/app/desktop/components/add-student-modal/add-student-modal.html
index 6bc143b..bc4a110 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/add-student-modal/add-student-modal.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/add-student-modal/add-student-modal.html
@@ -1,66 +1,22 @@
-<div class="overlay" (click)="onCancel()"></div>
-
-<div class="modal">
-    <div class="modal-header">
-        <h2 class="modal-title">Add Student</h2>
-        <button class="close-btn" (click)="onCancel()" aria-label="Close">&times;</button>
+<app-modal-shell title="Add Student" (closed)="cancelled.emit()">
+    <div class="field">
+        <label class="field-label">Name</label>
+        <input class="field-input" type="text" [(ngModel)]="form.identifier"
+            placeholder="Initials or other non-personally identifiable label" />
+    </div>
+    <div class="field">
+        <label class="field-label">Next IEP Date</label>
+        <input class="field-input" type="date" [(ngModel)]="form.nextIepDate" />
     </div>
 
-    <form class="modal-body" (ngSubmit)="onSubmit()" #studentForm="ngForm">
+    @if (errorMessage()) {
+    <p class="error">{{ errorMessage() }}</p>
+    }
 
-        <div class="field">
-            <label for="identifier">Student</label>
-            <input
-                id="identifier"
-                type="text"
-                [(ngModel)]="form.identifier"
-                name="identifier"
-                required
-                placeholder="Initials or other non-personally identifiable label"
-            />
-        </div>
-
-        <!-- <div class="field">
-            <label for="programYear">Program Year</label>
-            <input   
-                id="programYear"
-                type="number"
-                [(ngModel)]="form.programYear"
-                name="programYear"
-                placeholder="e.g. 2025"
-            />
-        </div>
-
-        <div class="field">
-            <label for="enrollmentDate">Enrollment Date</label>
-            <input
-                id="enrollmentDate"
-                type="date"
-                [(ngModel)]="form.enrollmentDate"
-                name="enrollmentDate"
-            />
-        </div> -->
-
-        <div class="field">
-            <label for="nextIepDate">Next IEP Date</label>
-            <input
-                id="nextIepDate"
-                type="date"
-                [(ngModel)]="form.nextIepDate"
-                name="nextIepDate"
-            />
-        </div>
-
-        @if (errorMessage()) {
-            <p class="error">{{ errorMessage() }}</p>
-        }
-
-        <div class="modal-actions">
-            <button type="button" class="btn btn-secondary" (click)="onCancel()">Cancel</button>
-            <button type="submit" class="btn btn-primary" [disabled]="studentForm.invalid || isSubmitting()">
-                {{ isSubmitting() ? 'Saving...' : 'Add Student' }}
-            </button>
-        </div>
-
-    </form>
-</div>
+    <div class="modal-actions">
+        <button class="btn-secondary" (click)="cancelled.emit()">Cancel</button>
+        <button class="btn-primary" (click)="onSubmit()" [disabled]="isSubmitting() || !form.identifier.trim()">
+            {{ isSubmitting() ? 'Saving...' : 'Add Student' }}
+        </button>
+    </div>
+</app-modal-shell>
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/add-student-modal/add-student-modal.scss b/ui/winstudentgoaltracker/src/app/desktop/components/add-student-modal/add-student-modal.scss
index b80ee9b..2918c96 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/add-student-modal/add-student-modal.scss
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/add-student-modal/add-student-modal.scss
@@ -1,130 +1 @@
-:host {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-}
-
-.overlay {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.4);
-}
-
-.modal {
-    position: relative;
-    background: #fff;
-    border-radius: 10px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
-    width: 420px;
-    max-width: 95vw;
-}
-
-.modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1.25rem 1.5rem 0;
-}
-
-.modal-title {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 600;
-}
-
-.close-btn {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    line-height: 1;
-    cursor: pointer;
-    color: #666;
-    padding: 0;
-}
-
-.close-btn:hover {
-    color: #111;
-}
-
-.modal-body {
-    padding: 1.25rem 1.5rem 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-}
-
-.field label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #333;
-}
-
-.field input {
-    padding: 0.5rem 0.75rem;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    font-size: 0.9375rem;
-    outline: none;
-}
-
-.field input:focus {
-    border-color: #4f46e5;
-    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
-}
-
-.error {
-    font-size: 0.875rem;
-    color: #dc2626;
-    margin: 0;
-}
-
-.modal-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    margin-top: 0.25rem;
-}
-
-.btn {
-    padding: 0.5rem 1.125rem;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-    border: 1px solid transparent;
-}
-
-.btn-secondary {
-    background: transparent;
-    border-color: #ddd;
-    color: #555;
-}
-
-.btn-secondary:hover {
-    background: #f5f5f5;
-}
-
-.btn-primary {
-    background: #4f46e5;
-    color: #fff;
-    border-color: #4f46e5;
-}
-
-.btn-primary:hover:not(:disabled) {
-    background: #4338ca;
-    border-color: #4338ca;
-}
-
-.btn-primary:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
+/* Inherits all styles from modal-shell via ::ng-deep */
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/add-student-modal/add-student-modal.ts b/ui/winstudentgoaltracker/src/app/desktop/components/add-student-modal/add-student-modal.ts
index 992116a..b2f4714 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/add-student-modal/add-student-modal.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/add-student-modal/add-student-modal.ts
@@ -1,21 +1,17 @@
 import { Component, inject, output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { ModalShell } from '../modal-shell/modal-shell';
 import { CreateStudentDto } from '../../../shared/classes/create-student.dto';
 import { StudentCardDto } from '../../../shared/classes/student-card.dto';
 import { StudentService } from '../../../shared/services/student.service';
 
 @Component({
     selector: 'app-add-student-modal',
-    imports: [FormsModule],
+    imports: [FormsModule, ModalShell],
     templateUrl: './add-student-modal.html',
     styleUrl: './add-student-modal.scss',
 })
 export class AddStudentModal {
-
-    // ************************** Constructor **************************
-
-    // ************************** Declarations *************************
-
     private readonly studentService = inject(StudentService);
 
     readonly studentCreated = output<StudentCardDto>();
@@ -31,18 +27,12 @@ export class AddStudentModal {
         nextIepDate: null,
     };
 
-    // ************************** Properties ***************************
-
-    // ************************ Public Methods *************************
-
-    // ************************ Event Handlers *************************
-
     async onSubmit() {
+        if (!this.form.identifier.trim()) return;
         this.errorMessage.set(null);
         this.isSubmitting.set(true);
 
         const result = await this.studentService.createStudent(this.form);
-
         this.isSubmitting.set(false);
 
         if (!result.success) {
@@ -52,10 +42,4 @@ export class AddStudentModal {
 
         this.studentCreated.emit(result.payload!);
     }
-
-    onCancel() {
-        this.cancelled.emit();
-    }
-
-    // ********************** Support Procedures ***********************
 }
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.scss b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.scss
index a799a7b..f1c488f 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.scss
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.scss
@@ -2,53 +2,42 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    padding: 24px 28px;
 }
 
 .toolbar {
     display: flex;
     align-items: center;
-    position: relative;
     gap: 0.75rem;
-    height: 40px;
-    padding-right: 0.5rem;
-    border-radius: 8px;
-    background: #fff;
-    border-bottom: 1px solid #ddd;
-    margin-bottom: 1rem;
+    margin-bottom: 20px;
     flex-shrink: 0;
 }
 
 .toolbar-btn {
-    padding: 0.375rem 0.75rem;
+    padding: 6px 14px;
     background: transparent;
-    color: #4f46e5;
-    border: 1px solid #4f46e5;
-    border-radius: 6px;
-    font-size: 0.875rem;
+    color: var(--accent-indigo);
+    border: 1px solid var(--accent-indigo);
+    border-radius: var(--radius-md);
+    font-size: 13px;
     font-weight: 500;
     cursor: pointer;
-}
+    font-family: inherit;
 
-.toolbar-btn:hover {
-    background: #eef2ff;
-}
+    &:hover {
+        background: #EEF2FF;
+    }
 
-.toolbar-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.back-btn {
-    margin-left: 0.5rem;
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
 }
 
 .toolbar-title {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
     font-weight: 600;
-    font-size: 1.25rem;
-    color: #333;
+    font-size: 18px;
+    color: var(--text-primary);
 }
 
 .spacer {
@@ -56,91 +45,76 @@
 }
 
 .error {
-    font-size: 0.875rem;
+    font-size: 13px;
     color: #dc2626;
-    margin: 0 0 1rem;
+    margin: 0 0 12px;
 }
 
 .success {
-    font-size: 0.875rem;
+    font-size: 13px;
     color: #16a34a;
-    margin: 0 0 1rem;
+    margin: 12px 0 0;
 }
 
 .detail-card {
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 1.5rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-xl);
+    padding: 22px;
     max-width: 600px;
 }
 
 .field {
     display: flex;
     flex-direction: column;
-    margin-bottom: 1rem;
+    margin-bottom: 14px;
 }
 
 .field-label {
-    font-size: 0.75rem;
+    font-size: 12px;
     font-weight: 600;
     color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-    margin-bottom: 0.25rem;
-}
-
-.field-value {
-    font-size: 0.9375rem;
-    color: #333;
+    margin-bottom: 4px;
 }
 
 .field-input {
-    padding: 0.375rem 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 0.9375rem;
+    padding: 8px 10px;
+    border: 1px solid var(--border-muted);
+    border-radius: var(--radius-md);
+    font-size: 13px;
+    font-family: inherit;
     outline: none;
 }
 
-.field-input:focus {
-    border-color: #4f46e5;
-}
-
 .field-textarea {
-    font-family: inherit;
     resize: vertical;
-    min-height: 5rem;
+    min-height: 70px;
 }
 
 .metadata {
     display: flex;
     gap: 1.5rem;
-    margin-bottom: 1rem;
+    margin-bottom: 14px;
 }
 
 .meta-item {
-    font-size: 0.8125rem;
-    color: #888;
+    font-size: 12px;
+    color: var(--text-muted);
 }
 
 .actions {
     display: flex;
     justify-content: flex-end;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-}
-
-.actions .toolbar-btn {
-    min-width: 6rem;
+    gap: 8px;
+    margin-top: 8px;
 }
 
 .save-btn {
-    background: #4f46e5;
-    color: #fff;
-    border-color: #4f46e5;
-}
+    background: var(--accent-indigo) !important;
+    color: #fff !important;
+    border-color: var(--accent-indigo) !important;
 
-.save-btn:hover {
-    background: #4338ca;
+    &:hover {
+        background: #3730A3 !important;
+    }
 }
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.ts b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.ts
index 34614f9..e2c6ce5 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.ts
@@ -125,7 +125,7 @@ export class BenchmarkCardFull implements OnDestroy {
   }
 
   onBack() {
-    this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'benchmarks']);
+    this.router.navigate(['/students', this.studentId, 'goals', this.goalId]);
   }
 
   ngOnDestroy() {
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.html b/ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.html
new file mode 100644
index 0000000..3ed6bc8
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.html
@@ -0,0 +1,21 @@
+<app-modal-shell title="Edit Benchmark" (closed)="closed.emit()">
+    <div class="field">
+        <label class="field-label">Short Name</label>
+        <input class="field-input" type="text" [(ngModel)]="shortName" />
+    </div>
+    <div class="field">
+        <label class="field-label">Description</label>
+        <textarea class="field-input field-textarea" [(ngModel)]="benchmarkText"></textarea>
+    </div>
+
+    @if (errorMessage()) {
+    <p class="error">{{ errorMessage() }}</p>
+    }
+
+    <div class="modal-actions">
+        <button class="btn-secondary" (click)="closed.emit()">Cancel</button>
+        <button class="btn-primary" (click)="onSave()" [disabled]="saving()">
+            {{ saving() ? 'Saving...' : 'Save' }}
+        </button>
+    </div>
+</app-modal-shell>
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.scss b/ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.scss
new file mode 100644
index 0000000..2918c96
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.scss
@@ -0,0 +1 @@
+/* Inherits all styles from modal-shell via ::ng-deep */
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.ts b/ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.ts
new file mode 100644
index 0000000..cb924d6
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.ts
@@ -0,0 +1,54 @@
+import { Component, inject, input, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ModalShell } from '../modal-shell/modal-shell';
+import { StudentService } from '../../../shared/services/student.service';
+import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
+
+@Component({
+    selector: 'app-edit-benchmark-modal',
+    imports: [FormsModule, ModalShell],
+    templateUrl: './edit-benchmark-modal.html',
+    styleUrl: './edit-benchmark-modal.scss',
+})
+export class EditBenchmarkModal {
+    private readonly studentService = inject(StudentService);
+
+    readonly studentId = input.required<string>();
+    readonly benchmark = input.required<BenchmarkDto>();
+    readonly saved = output<void>();
+    readonly closed = output<void>();
+
+    protected readonly saving = signal(false);
+    protected readonly errorMessage = signal<string | null>(null);
+
+    protected shortName = '';
+    protected benchmarkText = '';
+
+    ngOnInit() {
+        const b = this.benchmark();
+        this.shortName = b.shortName ?? '';
+        this.benchmarkText = b.benchmark;
+    }
+
+    async onSave() {
+        if (!this.shortName.trim()) return;
+        this.saving.set(true);
+        this.errorMessage.set(null);
+
+        const result = await this.studentService.updateBenchmark(
+            this.studentId(),
+            this.benchmark().benchmarkId,
+            this.benchmarkText,
+            this.shortName,
+        );
+
+        this.saving.set(false);
+
+        if (result.success) {
+            this.studentService.notifyDataChanged();
+            this.saved.emit();
+        } else {
+            this.errorMessage.set(result.message);
+        }
+    }
+}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.html b/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.html
new file mode 100644
index 0000000..6dd781c
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.html
@@ -0,0 +1,36 @@
+<app-modal-shell [title]="isNew ? 'Log Progress Event' : 'Edit Progress Event'" (closed)="closed.emit()">
+    <div class="field">
+        <label class="field-label">Description</label>
+        <textarea class="field-input field-textarea tall" [(ngModel)]="content"
+            placeholder="Enter progress notes..."></textarea>
+    </div>
+
+    @if (benchmarks().length > 0) {
+    <div class="field">
+        <label class="field-label">Related Benchmarks (optional)</label>
+        <div class="benchmark-chips">
+            @for (b of benchmarks(); track b.benchmarkId) {
+            <button class="chip" [class.selected]="isBenchmarkSelected(b.benchmarkId)"
+                [style.border-color]="isBenchmarkSelected(b.benchmarkId) ? colors.border : '#D5D5D0'"
+                [style.background]="isBenchmarkSelected(b.benchmarkId) ? colors.bg : '#FFF'"
+                [style.color]="isBenchmarkSelected(b.benchmarkId) ? colors.text : '#666'"
+                [style.font-weight]="isBenchmarkSelected(b.benchmarkId) ? '600' : '400'"
+                (click)="toggleBenchmark(b.benchmarkId)">
+                {{ b.shortName || b.benchmark }}
+            </button>
+            }
+        </div>
+    </div>
+    }
+
+    @if (errorMessage()) {
+    <p class="error">{{ errorMessage() }}</p>
+    }
+
+    <div class="modal-actions">
+        <button class="btn-secondary" (click)="closed.emit()">Cancel</button>
+        <button class="btn-primary" (click)="onSave()" [disabled]="saving()">
+            {{ saving() ? 'Saving...' : (isNew ? 'Log' : 'Save') }}
+        </button>
+    </div>
+</app-modal-shell>
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.scss b/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.scss
new file mode 100644
index 0000000..593aa21
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.scss
@@ -0,0 +1,21 @@
+.benchmark-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.chip {
+    padding: 4px 10px;
+    border-radius: 5px;
+    font-size: 12px;
+    border: 1.5px solid #D5D5D0;
+    background: #FFF;
+    color: #666;
+    cursor: pointer;
+    font-family: inherit;
+    transition: all 0.15s ease;
+}
+
+.tall {
+    min-height: 90px !important;
+}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts b/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts
new file mode 100644
index 0000000..b52d1b0
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts
@@ -0,0 +1,98 @@
+import { Component, inject, input, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ModalShell } from '../modal-shell/modal-shell';
+import { StudentService } from '../../../shared/services/student.service';
+import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
+import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
+import { getCategoryColor } from '../../../shared/classes/category-colors';
+
+@Component({
+    selector: 'app-edit-event-modal',
+    imports: [FormsModule, ModalShell],
+    templateUrl: './edit-event-modal.html',
+    styleUrl: './edit-event-modal.scss',
+})
+export class EditEventModal {
+    private readonly studentService = inject(StudentService);
+
+    readonly studentId = input.required<string>();
+    readonly goalId = input.required<string>();
+    readonly goalCategory = input<string>('');
+    readonly benchmarks = input<BenchmarkDto[]>([]);
+    /** null for new event, populated for edit */
+    readonly event = input<ProgressEventDto | null>(null);
+    readonly saved = output<void>();
+    readonly closed = output<void>();
+
+    protected readonly saving = signal(false);
+    protected readonly errorMessage = signal<string | null>(null);
+    protected readonly selectedBenchmarkIds = signal<Set<string>>(new Set());
+
+    protected content = '';
+
+    async ngOnInit() {
+        const ev = this.event();
+        if (ev) {
+            this.content = ev.content;
+            // Load existing benchmark associations
+            const result = await this.studentService.getProgressEventBenchmarks(ev.progressEventId);
+            if (result.success && result.payload) {
+                this.selectedBenchmarkIds.set(new Set(result.payload));
+            }
+        }
+    }
+
+    get isNew(): boolean {
+        return this.event() === null;
+    }
+
+    get colors() {
+        return getCategoryColor(this.goalCategory());
+    }
+
+    isBenchmarkSelected(id: string): boolean {
+        return this.selectedBenchmarkIds().has(id);
+    }
+
+    toggleBenchmark(id: string) {
+        this.selectedBenchmarkIds.update(set => {
+            const next = new Set(set);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            return next;
+        });
+    }
+
+    async onSave() {
+        if (!this.content.trim()) return;
+        this.saving.set(true);
+        this.errorMessage.set(null);
+
+        const benchmarkIds = [...this.selectedBenchmarkIds()];
+
+        if (this.isNew) {
+            const result = await this.studentService.addProgressEvent(
+                this.studentId(), this.goalId(), this.content.trim(),
+                benchmarkIds.length > 0 ? benchmarkIds : undefined,
+            );
+            this.saving.set(false);
+            if (result.success) {
+                this.studentService.notifyDataChanged();
+                this.saved.emit();
+            } else {
+                this.errorMessage.set(result.message);
+            }
+        } else {
+            const result = await this.studentService.updateProgressEvent(
+                this.studentId(), this.event()!.progressEventId, this.content.trim(), benchmarkIds,
+            );
+            this.saving.set(false);
+            if (result.success) {
+                this.studentService.notifyDataChanged();
+                this.saved.emit();
+            } else {
+                this.errorMessage.set(result.message);
+            }
+        }
+    }
+}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.html b/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.html
new file mode 100644
index 0000000..426cf00
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.html
@@ -0,0 +1,29 @@
+<app-modal-shell title="Edit Goal" (closed)="closed.emit()">
+    <div class="field">
+        <label class="field-label">Category</label>
+        <input class="field-input" type="text" [(ngModel)]="category" placeholder="e.g. Reading, Math, Behavior…" />
+    </div>
+    <div class="field">
+        <label class="field-label">Description</label>
+        <textarea class="field-input field-textarea" [(ngModel)]="description"></textarea>
+    </div>
+    <div class="field">
+        <label class="field-label">Baseline</label>
+        <textarea class="field-input field-textarea" [(ngModel)]="baseline" placeholder="Enter baseline..."></textarea>
+    </div>
+    <div class="field">
+        <label class="field-label">Due Date</label>
+        <input class="field-input" type="date" [(ngModel)]="targetCompletionDate" />
+    </div>
+
+    @if (errorMessage()) {
+    <p class="error">{{ errorMessage() }}</p>
+    }
+
+    <div class="modal-actions">
+        <button class="btn-secondary" (click)="closed.emit()">Cancel</button>
+        <button class="btn-primary" (click)="onSave()" [disabled]="saving()">
+            {{ saving() ? 'Saving...' : 'Save' }}
+        </button>
+    </div>
+</app-modal-shell>
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.scss b/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.scss
new file mode 100644
index 0000000..2918c96
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.scss
@@ -0,0 +1 @@
+/* Inherits all styles from modal-shell via ::ng-deep */
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.ts b/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.ts
new file mode 100644
index 0000000..35ad92f
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.ts
@@ -0,0 +1,58 @@
+import { Component, inject, input, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ModalShell } from '../modal-shell/modal-shell';
+import { StudentService } from '../../../shared/services/student.service';
+import { StudentGoalItem } from '../../../shared/classes/student-goal';
+
+@Component({
+    selector: 'app-edit-goal-modal',
+    imports: [FormsModule, ModalShell],
+    templateUrl: './edit-goal-modal.html',
+    styleUrl: './edit-goal-modal.scss',
+})
+export class EditGoalModal {
+    private readonly studentService = inject(StudentService);
+
+    readonly studentId = input.required<string>();
+    readonly goal = input.required<StudentGoalItem>();
+    readonly saved = output<void>();
+    readonly closed = output<void>();
+
+    protected readonly saving = signal(false);
+    protected readonly errorMessage = signal<string | null>(null);
+
+    protected category = '';
+    protected description = '';
+    protected baseline = '';
+    protected targetCompletionDate: string | null = null;
+
+    ngOnInit() {
+        const g = this.goal();
+        this.category = g.category;
+        this.description = g.description;
+        this.baseline = g.baseline;
+        this.targetCompletionDate = g.targetCompletionDate ? g.targetCompletionDate.substring(0, 10) : null;
+    }
+
+    async onSave() {
+        if (!this.category.trim() || !this.description.trim()) return;
+        this.saving.set(true);
+        this.errorMessage.set(null);
+
+        const result = await this.studentService.updateGoal(this.studentId(), this.goal().goalId, {
+            category: this.category,
+            description: this.description,
+            baseline: this.baseline,
+            targetCompletionDate: this.targetCompletionDate,
+        });
+
+        this.saving.set(false);
+
+        if (result.success) {
+            this.studentService.notifyDataChanged();
+            this.saved.emit();
+        } else {
+            this.errorMessage.set(result.message);
+        }
+    }
+}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-student-modal/edit-student-modal.html b/ui/winstudentgoaltracker/src/app/desktop/components/edit-student-modal/edit-student-modal.html
new file mode 100644
index 0000000..3e7fc6b
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-student-modal/edit-student-modal.html
@@ -0,0 +1,21 @@
+<app-modal-shell title="Edit Student" (closed)="closed.emit()">
+    <div class="field">
+        <label class="field-label">Name</label>
+        <input class="field-input" type="text" [(ngModel)]="identifier" />
+    </div>
+    <div class="field">
+        <label class="field-label">IEP Date</label>
+        <input class="field-input" type="date" [(ngModel)]="nextIepDate" />
+    </div>
+
+    @if (errorMessage()) {
+    <p class="error">{{ errorMessage() }}</p>
+    }
+
+    <div class="modal-actions">
+        <button class="btn-secondary" (click)="closed.emit()">Cancel</button>
+        <button class="btn-primary" (click)="onSave()" [disabled]="saving()">
+            {{ saving() ? 'Saving...' : 'Save' }}
+        </button>
+    </div>
+</app-modal-shell>
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-student-modal/edit-student-modal.scss b/ui/winstudentgoaltracker/src/app/desktop/components/edit-student-modal/edit-student-modal.scss
new file mode 100644
index 0000000..2918c96
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-student-modal/edit-student-modal.scss
@@ -0,0 +1 @@
+/* Inherits all styles from modal-shell via ::ng-deep */
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-student-modal/edit-student-modal.ts b/ui/winstudentgoaltracker/src/app/desktop/components/edit-student-modal/edit-student-modal.ts
new file mode 100644
index 0000000..931823e
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-student-modal/edit-student-modal.ts
@@ -0,0 +1,51 @@
+import { Component, inject, input, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ModalShell } from '../modal-shell/modal-shell';
+import { StudentService } from '../../../shared/services/student.service';
+import { StudentCardDto } from '../../../shared/classes/student-card.dto';
+
+@Component({
+    selector: 'app-edit-student-modal',
+    imports: [FormsModule, ModalShell],
+    templateUrl: './edit-student-modal.html',
+    styleUrl: './edit-student-modal.scss',
+})
+export class EditStudentModal {
+    private readonly studentService = inject(StudentService);
+
+    readonly student = input.required<StudentCardDto>();
+    readonly saved = output<void>();
+    readonly closed = output<void>();
+
+    protected readonly saving = signal(false);
+    protected readonly errorMessage = signal<string | null>(null);
+
+    protected identifier = '';
+    protected nextIepDate = '';
+
+    ngOnInit() {
+        const s = this.student();
+        this.identifier = s.identifier;
+        this.nextIepDate = s.nextIepDate ? new Date(s.nextIepDate).toISOString().split('T')[0] : '';
+    }
+
+    async onSave() {
+        if (!this.identifier.trim()) return;
+        this.saving.set(true);
+        this.errorMessage.set(null);
+
+        const result = await this.studentService.updateStudent(this.student().studentId, {
+            identifier: this.identifier,
+            nextIepDate: this.nextIepDate || null,
+        });
+
+        this.saving.set(false);
+
+        if (result.success) {
+            this.studentService.notifyDataChanged();
+            this.saved.emit();
+        } else {
+            this.errorMessage.set(result.message);
+        }
+    }
+}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.html b/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.html
new file mode 100644
index 0000000..9a848b2
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.html
@@ -0,0 +1,10 @@
+<div class="overlay" (click)="onOverlayClick()"></div>
+<div class="modal" (click)="$event.stopPropagation()">
+    <div class="modal-header">
+        <span class="modal-title">{{ title() }}</span>
+        <button class="close-btn" (click)="onClose()" aria-label="Close">&times;</button>
+    </div>
+    <div class="modal-body">
+        <ng-content />
+    </div>
+</div>
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.scss b/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.scss
new file mode 100644
index 0000000..00d310e
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.scss
@@ -0,0 +1,134 @@
+:host {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+}
+
+.modal {
+    position: relative;
+    background: var(--bg-surface);
+    border-radius: var(--radius-2xl);
+    width: min(480px, 92vw);
+    max-height: 85vh;
+    overflow: auto;
+    box-shadow: var(--shadow-modal);
+}
+
+.modal-header {
+    padding: 18px 22px 14px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+}
+
+.modal-title {
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.close-btn {
+    margin-left: auto;
+    background: none;
+    border: none;
+    font-size: 20px;
+    color: var(--text-faint);
+    cursor: pointer;
+    line-height: 1;
+    padding: 0;
+
+    &:hover {
+        color: var(--text-primary);
+    }
+}
+
+.modal-body {
+    padding: 18px 22px 22px;
+}
+
+/* ─── Shared form styles for modal content ─── */
+:host ::ng-deep {
+    .field {
+        margin-bottom: 14px;
+    }
+
+    .field-label {
+        display: block;
+        font-size: 12px;
+        font-weight: 600;
+        color: #666;
+        margin-bottom: 4px;
+    }
+
+    .field-input {
+        width: 100%;
+        padding: 8px 10px;
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border-muted);
+        font-size: 13px;
+        font-family: inherit;
+        box-sizing: border-box;
+        outline: none;
+    }
+
+    .field-textarea {
+        min-height: 70px;
+        resize: vertical;
+    }
+
+    .modal-actions {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-end;
+        margin-top: 8px;
+    }
+
+    .btn-primary {
+        padding: 8px 20px;
+        border-radius: var(--radius-md);
+        border: none;
+        background: var(--accent-indigo);
+        color: #fff;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+
+        &:hover:not(:disabled) {
+            background: #3730A3;
+        }
+
+        &:disabled {
+            opacity: 0.55;
+            cursor: not-allowed;
+        }
+    }
+
+    .btn-secondary {
+        padding: 8px 20px;
+        border-radius: var(--radius-md);
+        border: none;
+        background: var(--bg-hover);
+        color: var(--text-secondary);
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+
+        &:hover {
+            background: #e5e5e0;
+        }
+    }
+
+    .error {
+        font-size: 13px;
+        color: #dc2626;
+        margin: 0 0 8px;
+    }
+}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.ts b/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.ts
new file mode 100644
index 0000000..072f3b3
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.ts
@@ -0,0 +1,19 @@
+import { Component, input, output } from '@angular/core';
+
+@Component({
+    selector: 'app-modal-shell',
+    templateUrl: './modal-shell.html',
+    styleUrl: './modal-shell.scss',
+})
+export class ModalShell {
+    readonly title = input.required<string>();
+    readonly closed = output<void>();
+
+    onOverlayClick() {
+        this.closed.emit();
+    }
+
+    onClose() {
+        this.closed.emit();
+    }
+}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/reports/reports.scss b/ui/winstudentgoaltracker/src/app/desktop/components/reports/reports.scss
index 66ff1ae..e2866e2 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/reports/reports.scss
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/reports/reports.scss
@@ -2,50 +2,46 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-}
-
-.toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 40px;
-    padding-right: 0.5rem;
-    border-radius: 8px;
-    background: #fff;
-    border-bottom: 1px solid #ddd;
-    margin-bottom: 1rem;
-    flex-shrink: 0;
+    padding: 24px 28px;
 }
 
 .page-title {
-    font-size: 24px;
+    font-size: 22px;
     font-weight: 600;
-    margin-left: 0.75rem;
+    margin: 0 0 20px;
 }
 
 .card-grid {
     display: flex;
     flex-wrap: wrap;
-    align-content: flex-start;
-    gap: 1rem;
+    gap: 12px;
 }
 
 .card {
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-    padding: 1.5rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-xl);
+    padding: 20px 24px;
     cursor: pointer;
-    transition: box-shadow 0.15s ease, transform 0.15s ease;
+    width: 280px;
+    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
 
     &:hover {
-        box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
-        transform: translateY(-2px);
+        border-color: var(--accent-indigo-light);
+        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
     }
 
     h2 {
-        margin: 0;
-        font-size: 1.125rem;
+        margin: 0 0 6px;
+        font-size: 15px;
         font-weight: 600;
+        color: var(--text-primary);
+    }
+
+    p {
+        margin: 0;
+        font-size: 13px;
+        color: var(--text-secondary);
+        line-height: 1.5;
     }
 }
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-progress-report/student-progress-report.scss b/ui/winstudentgoaltracker/src/app/desktop/components/student-progress-report/student-progress-report.scss
index 0e59c0b..b91047c 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-progress-report/student-progress-report.scss
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/student-progress-report/student-progress-report.scss
@@ -2,48 +2,42 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    padding: 24px 28px;
 }
 
 .toolbar {
     display: flex;
     align-items: center;
-    position: relative;
     gap: 0.75rem;
-    height: 40px;
-    padding-right: 0.5rem;
-    border-radius: 8px;
-    background: #fff;
-    border-bottom: 1px solid #ddd;
-    margin-bottom: 1rem;
+    margin-bottom: 20px;
     flex-shrink: 0;
 }
 
 .toolbar-btn {
-    padding: 0.375rem 0.75rem;
+    padding: 6px 14px;
     background: transparent;
-    color: #4f46e5;
-    border: 1px solid #4f46e5;
-    border-radius: 6px;
-    font-size: 0.875rem;
+    color: var(--accent-indigo);
+    border: 1px solid var(--accent-indigo);
+    border-radius: var(--radius-md);
+    font-size: 13px;
     font-weight: 500;
     cursor: pointer;
-}
+    font-family: inherit;
 
-.toolbar-btn:hover {
-    background: #eef2ff;
-}
+    &:hover {
+        background: #EEF2FF;
+    }
 
-.back-btn {
-    margin-left: 0.5rem;
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
 }
 
 .toolbar-title {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
     font-weight: 600;
-    font-size: 1.25rem;
-    color: #333;
+    font-size: 18px;
+    color: var(--text-primary);
 }
 
 .spacer {
@@ -51,9 +45,9 @@
 }
 
 .detail-card {
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 8px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-xl);
     max-width: 600px;
     overflow: hidden;
 }
@@ -61,50 +55,43 @@
 .card-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 0.625rem 1.25rem;
-    background: #f8f9fa;
-    border-bottom: 1px solid #ddd;
+    padding: 14px 22px;
+    background: var(--bg-page);
+    border-bottom: 1px solid var(--border-color);
 }
 
 .card-title {
-    font-size: 0.875rem;
+    font-size: 14px;
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
 }
 
 .card-body {
-    padding: 1.5rem;
+    padding: 22px;
 }
 
 .field {
     display: flex;
     flex-direction: column;
-    margin-bottom: 1rem;
+    margin-bottom: 14px;
 }
 
 .field-label {
-    font-size: 0.75rem;
+    font-size: 12px;
     font-weight: 600;
     color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-    margin-bottom: 0.25rem;
+    margin-bottom: 4px;
 }
 
 .field-input {
-    padding: 0.375rem 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 6px;
+    padding: 8px 10px;
+    border: 1px solid var(--border-muted);
+    border-radius: var(--radius-md);
     font-family: inherit;
-    font-size: 0.9375rem;
+    font-size: 13px;
     outline: none;
 }
 
-.field-input:focus {
-    border-color: #4f46e5;
-}
-
 .date-row {
     display: flex;
     gap: 1.5rem;
@@ -115,8 +102,8 @@
 }
 
 .goal-checklist {
-    border: 1px solid #ccc;
-    border-radius: 6px;
+    border: 1px solid var(--border-muted);
+    border-radius: var(--radius-md);
     overflow: hidden;
 }
 
@@ -124,41 +111,37 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 0.5rem 0.75rem;
+    padding: 8px 12px;
     cursor: pointer;
-    font-size: 0.9375rem;
+    font-size: 13px;
 
     &:hover {
-        background: #f5f5f5;
+        background: var(--bg-hover);
     }
 
     & + & {
-        border-top: 1px solid #eee;
+        border-top: 1px solid var(--border-color);
     }
 
     input[type="checkbox"] {
         pointer-events: none;
+        accent-color: var(--accent-indigo-light);
     }
 }
 
 .actions {
     display: flex;
     justify-content: flex-end;
-    margin-top: 0.5rem;
+    margin-top: 8px;
 }
 
 .run-btn {
-    background: #4f46e5;
-    color: #fff;
-    border-color: #4f46e5;
+    background: var(--accent-indigo) !important;
+    color: #fff !important;
+    border-color: var(--accent-indigo) !important;
     min-width: 6rem;
-}
 
-.run-btn:hover {
-    background: #4338ca;
-}
-
-.toolbar-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+    &:hover {
+        background: #3730A3 !important;
+    }
 }
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
new file mode 100644
index 0000000..8422702
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
@@ -0,0 +1,135 @@
+@if (!student()) {
+<div class="empty-panel">
+    <span class="empty-text">Select a student</span>
+</div>
+} @else {
+<!-- Modals -->
+@if (showAddGoalModal()) {
+<app-add-goal-modal [studentId]="studentId()!" [existingGoals]="goals()" [nextIepDate]="nextIepDate()"
+    (goalCreated)="onGoalCreated($event)" (cancelled)="showAddGoalModal.set(false)" />
+}
+@if (showEditGoalModal() && selectedGoal()) {
+<app-edit-goal-modal [studentId]="studentId()!" [goal]="selectedGoal()!" (saved)="onEditGoalSaved()"
+    (closed)="showEditGoalModal.set(false)" />
+}
+@if (showEditBenchmarkModal()) {
+<app-edit-benchmark-modal [studentId]="studentId()!" [benchmark]="showEditBenchmarkModal()!"
+    (saved)="onEditBenchmarkSaved()" (closed)="showEditBenchmarkModal.set(null)" />
+}
+@if (showEditEventModal()) {
+<app-edit-event-modal [studentId]="studentId()!" [goalId]="selectedGoal()!.goalId"
+    [goalCategory]="selectedGoal()!.category" [benchmarks]="goalBenchmarks()"
+    [event]="showEditEventModal() === 'new' ? null : $any(showEditEventModal())" (saved)="onEventSaved()"
+    (closed)="showEditEventModal.set(null)" />
+}
+
+<!-- Student Header -->
+<div class="student-header">
+    <div class="student-info">
+        <h1 class="student-name">{{ student()!.identifier }}</h1>
+        <span class="student-iep">IEP {{ formatDate(student()!.nextIepDate) }}</span>
+    </div>
+    <div class="goal-tabs">
+        @for (g of goals(); track g.goalId) {
+        <button class="goal-tab" [class.active]="selectedGoalId() === g.goalId || (selectedGoal()?.goalId === g.goalId)"
+            [style.border-color]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).border : '#E5E5E0'"
+            [style.background]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).bg : '#FFF'"
+            [style.color]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).text : '#666'"
+            (click)="onSelectGoal(g.goalId)">
+            {{ g.category }}
+        </button>
+        }
+        <button class="goal-tab add-goal" (click)="onAddGoal()">+ Goal</button>
+    </div>
+</div>
+
+<!-- Goal Detail -->
+@if (selectedGoal()) {
+<div class="workspace-body">
+    <!-- Goal Card -->
+    <div class="goal-card">
+        <div class="goal-card-header">
+            <span class="goal-badge" [style.color]="goalColors().text"
+                [style.background]="goalColors().bg">{{ selectedGoal()!.category }} Goal</span>
+            @if (selectedGoal()!.targetCompletionDate) {
+            <span class="goal-due">Due {{ formatDate(selectedGoal()!.targetCompletionDate) }}</span>
+            }
+            <button class="edit-icon" (click)="onEditGoal()" aria-label="Edit goal">
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
+                </svg>
+            </button>
+        </div>
+        <p class="goal-description">{{ selectedGoal()!.description }}</p>
+    </div>
+
+    <!-- Sub Tabs -->
+    <div class="sub-tabs">
+        <button class="sub-tab" [class.active]="activeTab() === 'benchmarks'"
+            [style.color]="activeTab() === 'benchmarks' ? goalColors().text : '#888'"
+            [style.border-bottom-color]="activeTab() === 'benchmarks' ? goalColors().accent : 'transparent'"
+            (click)="onTabChange('benchmarks')">
+            Benchmarks ({{ goalBenchmarks().length }})
+        </button>
+        <button class="sub-tab" [class.active]="activeTab() === 'progress'"
+            [style.color]="activeTab() === 'progress' ? goalColors().text : '#888'"
+            [style.border-bottom-color]="activeTab() === 'progress' ? goalColors().accent : 'transparent'"
+            (click)="onTabChange('progress')">
+            Progress Events ({{ sortedProgressEvents().length }})
+        </button>
+    </div>
+
+    <!-- Benchmarks Tab -->
+    @if (activeTab() === 'benchmarks') {
+    <div class="tab-content">
+        @for (b of goalBenchmarks(); track b.benchmarkId) {
+        <div class="benchmark-card">
+            <div class="benchmark-header">
+                <span class="benchmark-name" [style.color]="goalColors().text">{{ b.shortName || b.benchmark }}</span>
+                <button class="edit-icon" (click)="onEditBenchmark(b)" aria-label="Edit benchmark">
+                    <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
+                    </svg>
+                </button>
+            </div>
+            <p class="benchmark-desc">{{ b.benchmark }}</p>
+        </div>
+        }
+        <button class="add-btn" (click)="onAddBenchmark()">+ Add Benchmark</button>
+    </div>
+    }
+
+    <!-- Progress Tab -->
+    @if (activeTab() === 'progress') {
+    <div class="tab-content timeline">
+        <div class="timeline-line"></div>
+        @for (ev of sortedProgressEvents(); track ev.progressEventId) {
+        <div class="timeline-item">
+            <div class="timeline-dot" [style.background]="goalColors().bg"
+                [style.border-color]="goalColors().border"></div>
+            <div class="event-card">
+                <div class="event-header">
+                    <span class="event-date">{{ formatDate(ev.createdAt) }}</span>
+                    <button class="edit-icon" (click)="onEditEvent(ev)" aria-label="Edit event">
+                        <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#bbb" stroke-width="1.5"
+                            stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
+                        </svg>
+                    </button>
+                </div>
+                <p class="event-content">{{ ev.content }}</p>
+            </div>
+        </div>
+        }
+        <button class="add-btn" (click)="onNewEvent()">+ Log Progress Event</button>
+    </div>
+    }
+</div>
+} @else {
+<div class="empty-panel">
+    <span class="empty-text">Add a goal to get started</span>
+</div>
+}
+}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss
new file mode 100644
index 0000000..7446244
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss
@@ -0,0 +1,276 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0;
+}
+
+/* ─── Empty State ─── */
+.empty-panel {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.empty-text {
+    color: var(--text-dim);
+    font-size: 14px;
+}
+
+/* ─── Student Header ─── */
+.student-header {
+    padding: 20px 28px 16px;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-surface);
+    flex-shrink: 0;
+}
+
+.student-info {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+}
+
+.student-name {
+    font-size: 22px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.student-iep {
+    font-size: 13px;
+    color: var(--text-faint);
+}
+
+.goal-tabs {
+    display: flex;
+    gap: 4px;
+    margin-top: 14px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.goal-tab {
+    padding: 6px 14px;
+    border-radius: var(--radius-md);
+    border: 1.5px solid var(--border-color);
+    background: var(--bg-surface);
+    color: #666;
+    font-weight: 400;
+    font-size: 13px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: all var(--transition-fast);
+
+    &.active {
+        font-weight: 600;
+    }
+
+    &.add-goal {
+        border: 1.5px dashed var(--border-muted);
+        background: none;
+        color: var(--text-faint);
+    }
+}
+
+/* ─── Workspace Body ─── */
+.workspace-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px 28px;
+}
+
+/* ─── Goal Card ─── */
+.goal-card {
+    background: var(--bg-surface);
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--border-color);
+    padding: 20px 24px;
+    margin-bottom: 24px;
+}
+
+.goal-card-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+
+.goal-badge {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 3px 8px;
+    border-radius: var(--radius-sm);
+}
+
+.goal-due {
+    font-size: 12px;
+    color: var(--text-faint);
+    margin-left: auto;
+}
+
+.goal-description {
+    font-size: 15px;
+    line-height: 1.55;
+    margin: 0;
+    color: #333;
+}
+
+.edit-icon {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 2px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+
+    &:hover svg {
+        stroke: #555;
+    }
+}
+
+/* ─── Sub Tabs ─── */
+.sub-tabs {
+    display: flex;
+    gap: 0;
+    margin-bottom: 20px;
+    border-bottom: 1.5px solid var(--border-color);
+}
+
+.sub-tab {
+    padding: 8px 18px;
+    font-size: 13px;
+    font-weight: 400;
+    color: var(--text-muted);
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    margin-bottom: -1.5px;
+    font-family: inherit;
+    transition: color var(--transition-fast);
+
+    &.active {
+        font-weight: 600;
+    }
+}
+
+/* ─── Tab Content ─── */
+.tab-content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+/* ─── Benchmark Cards ─── */
+.benchmark-card {
+    background: var(--bg-surface);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+    padding: 16px 20px;
+}
+
+.benchmark-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 6px;
+}
+
+.benchmark-name {
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.benchmark-events {
+    font-size: 11px;
+    color: var(--text-dim);
+    margin-left: auto;
+}
+
+.benchmark-desc {
+    font-size: 13px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    margin: 0;
+}
+
+/* ─── Progress Timeline ─── */
+.timeline {
+    position: relative;
+    padding-left: 20px;
+}
+
+.timeline-line {
+    position: absolute;
+    left: 5px;
+    top: 8px;
+    bottom: 8px;
+    width: 2px;
+    background: var(--border-color);
+    border-radius: 1px;
+}
+
+.timeline-item {
+    position: relative;
+    margin-bottom: 16px;
+}
+
+.timeline-dot {
+    position: absolute;
+    left: -20px;
+    top: 6px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid;
+}
+
+.event-card {
+    background: var(--bg-surface);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+    padding: 14px 18px;
+}
+
+.event-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 6px;
+}
+
+.event-date {
+    font-size: 12px;
+    color: var(--text-faint);
+}
+
+.event-content {
+    font-size: 13px;
+    line-height: 1.55;
+    margin: 0;
+    color: #333;
+}
+
+/* ─── Add Buttons ─── */
+.add-btn {
+    padding: 12px;
+    border-radius: var(--radius-lg);
+    border: 1.5px dashed var(--border-muted);
+    background: none;
+    font-size: 13px;
+    color: var(--text-faint);
+    cursor: pointer;
+    font-family: inherit;
+    transition: border-color var(--transition-fast);
+    width: 100%;
+
+    &:hover {
+        border-color: var(--text-muted);
+        color: var(--text-muted);
+    }
+}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
new file mode 100644
index 0000000..c75a26a
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
@@ -0,0 +1,230 @@
+import { Component, computed, effect, inject, signal } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { StudentService } from '../../../shared/services/student.service';
+import { StudentCardDto } from '../../../shared/classes/student-card.dto';
+import { StudentGoalItem } from '../../../shared/classes/student-goal';
+import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
+import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
+import { getCategoryColor, CategoryColor } from '../../../shared/classes/category-colors';
+import { EditGoalModal } from '../edit-goal-modal/edit-goal-modal';
+import { EditBenchmarkModal } from '../edit-benchmark-modal/edit-benchmark-modal';
+import { EditEventModal } from '../edit-event-modal/edit-event-modal';
+import { AddGoalModal } from '../add-goal-modal/add-goal-modal';
+
+type TabView = 'benchmarks' | 'progress';
+
+@Component({
+    selector: 'app-workspace',
+    imports: [EditGoalModal, EditBenchmarkModal, EditEventModal, AddGoalModal],
+    templateUrl: './workspace.html',
+    styleUrl: './workspace.scss',
+})
+export class Workspace {
+
+    // ************************** Constructor **************************
+
+    constructor() {
+        // React to route param changes
+        this.route.paramMap.subscribe(params => {
+            const studentId = params.get('studentId');
+            const goalId = params.get('goalId');
+
+            if (studentId && studentId !== this.studentId()) {
+                this.studentId.set(studentId);
+                this.loadStudentData(studentId);
+            } else if (!studentId) {
+                this.student.set(null);
+                this.studentId.set(null);
+            }
+
+            if (goalId) {
+                this.selectedGoalId.set(goalId);
+            }
+        });
+
+        // When dataVersion changes and we have a student loaded, refresh
+        let initialized = false;
+        effect(() => {
+            this.studentService.dataVersion();
+            if (initialized && this.studentId()) {
+                this.loadStudentData(this.studentId()!);
+            }
+            initialized = true;
+        });
+    }
+
+    // ************************** Declarations *************************
+
+    private readonly studentService = inject(StudentService);
+    private readonly route = inject(ActivatedRoute);
+    private readonly router = inject(Router);
+
+    protected readonly studentId = signal<string | null>(null);
+    protected readonly student = signal<StudentCardDto | null>(null);
+    protected readonly goals = signal<StudentGoalItem[]>([]);
+    protected readonly benchmarks = signal<BenchmarkDto[]>([]);
+    protected readonly progressEvents = signal<ProgressEventDto[]>([]);
+    protected readonly selectedGoalId = signal<string | null>(null);
+    protected readonly activeTab = signal<TabView>('benchmarks');
+
+    // Modal states
+    protected readonly showAddGoalModal = signal(false);
+    protected readonly showEditGoalModal = signal(false);
+    protected readonly showEditBenchmarkModal = signal<BenchmarkDto | null>(null);
+    protected readonly showEditEventModal = signal<ProgressEventDto | null | 'new'>(null);
+
+    // ************************** Properties ***************************
+
+    protected readonly selectedGoal = computed<StudentGoalItem | null>(() => {
+        const id = this.selectedGoalId();
+        if (!id) return this.goals().length > 0 ? this.goals()[0] : null;
+        return this.goals().find(g => g.goalId === id) ?? null;
+    });
+
+    protected readonly goalColors = computed<CategoryColor>(() => {
+        return getCategoryColor(this.selectedGoal()?.category ?? '');
+    });
+
+    protected readonly goalBenchmarks = computed<BenchmarkDto[]>(() => {
+        const goalId = this.selectedGoal()?.goalId;
+        if (!goalId) return [];
+        return this.benchmarks().filter(b => b.goalId === goalId);
+    });
+
+    protected readonly sortedProgressEvents = computed<ProgressEventDto[]>(() => {
+        return [...this.progressEvents()]
+            .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+    });
+
+    protected readonly nextIepDate = computed<string>(() => {
+        const s = this.student();
+        if (!s?.nextIepDate) return '';
+        return new Date(s.nextIepDate).toISOString().split('T')[0];
+    });
+
+    // ************************ Event Handlers *************************
+
+    onSelectGoal(goalId: string) {
+        this.selectedGoalId.set(goalId);
+        this.activeTab.set('benchmarks');
+        this.loadGoalDetails(goalId);
+        this.router.navigate(['/students', this.studentId(), 'goals', goalId]);
+    }
+
+    onTabChange(tab: TabView) {
+        this.activeTab.set(tab);
+    }
+
+    // Modal handlers
+    onEditGoal() {
+        this.showEditGoalModal.set(true);
+    }
+
+    onEditGoalSaved() {
+        this.showEditGoalModal.set(false);
+        this.loadStudentData(this.studentId()!);
+    }
+
+    onAddGoal() {
+        this.showAddGoalModal.set(true);
+    }
+
+    onGoalCreated(goal: StudentGoalItem) {
+        this.showAddGoalModal.set(false);
+        this.studentService.notifyDataChanged();
+        this.loadStudentData(this.studentId()!).then(() => {
+            this.selectedGoalId.set(goal.goalId);
+            this.loadGoalDetails(goal.goalId);
+        });
+    }
+
+    onEditBenchmark(b: BenchmarkDto) {
+        this.showEditBenchmarkModal.set(b);
+    }
+
+    onEditBenchmarkSaved() {
+        this.showEditBenchmarkModal.set(null);
+        this.loadStudentData(this.studentId()!);
+    }
+
+    onAddBenchmark() {
+        // Navigate to the new benchmark route (still uses the old page for creation)
+        this.router.navigate(['/students', this.studentId(), 'goals', this.selectedGoal()!.goalId, 'benchmarks', 'new']);
+    }
+
+    onNewEvent() {
+        this.showEditEventModal.set('new');
+    }
+
+    onEditEvent(ev: ProgressEventDto) {
+        this.showEditEventModal.set(ev);
+    }
+
+    onEventSaved() {
+        this.showEditEventModal.set(null);
+        if (this.selectedGoal()) {
+            this.loadGoalDetails(this.selectedGoal()!.goalId);
+        }
+    }
+
+    // ************************ Formatting Helpers **********************
+
+    getCatColor(category: string): CategoryColor {
+        return getCategoryColor(category);
+    }
+
+    formatDate(d: string | Date | null): string {
+        if (!d) return '';
+        const date = new Date(d);
+        return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+    }
+
+    truncate(text: string, max: number): string {
+        return text.length > max ? text.slice(0, max) + '…' : text;
+    }
+
+    getRelatedEventCount(benchmarkId: string): number {
+        // We don't have benchmark associations in the event DTO from the list endpoint,
+        // so we return 0. The mockup shows this but we can't derive it without extra API calls.
+        return 0;
+    }
+
+    // ********************** Support Procedures ***********************
+
+    private async loadStudentData(studentId: string) {
+        const [studentResult, goalsResult, bmResult] = await Promise.all([
+            this.studentService.getStudentById(studentId),
+            this.studentService.getGoalsForStudent(studentId),
+            this.studentService.getBenchmarksForStudent(studentId),
+        ]);
+
+        if (studentResult.success && studentResult.payload) {
+            this.student.set(studentResult.payload);
+        }
+
+        if (goalsResult.success && goalsResult.payload) {
+            this.goals.set(goalsResult.payload.goals);
+            // Auto-select first goal if none selected
+            if (!this.selectedGoalId() && goalsResult.payload.goals.length > 0) {
+                this.selectedGoalId.set(goalsResult.payload.goals[0].goalId);
+            }
+        }
+
+        if (bmResult.success && bmResult.payload) {
+            this.benchmarks.set(bmResult.payload.benchmarks);
+        }
+
+        // Load progress events for selected goal
+        const goalId = this.selectedGoalId();
+        if (goalId) {
+            this.loadGoalDetails(goalId);
+        }
+    }
+
+    private async loadGoalDetails(goalId: string) {
+        const result = await this.studentService.getProgressEventsForGoal(goalId);
+        if (result.success) {
+            this.progressEvents.set(result.payload ?? []);
+        }
+    }
+}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/desktop.routes.ts b/ui/winstudentgoaltracker/src/app/desktop/desktop.routes.ts
index 644b4e7..8f6197e 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/desktop.routes.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/desktop.routes.ts
@@ -1,15 +1,9 @@
 import { Routes } from '@angular/router';
 import { Home } from './pages/home/home';
-import { StudentCardList } from './components/student-card-list/student-card-list';
-import { StudentCardFull } from './components/student-card-full/student-card-full';
-import { GoalList } from './components/goal-list/goal-list';
-import { GoalCardFull } from './components/goal-card-full/goal-card-full';
-import { ProgressList } from './components/progress-list/progress-list';
-import { BenchmarkList } from './components/benchmark-list/benchmark-list';
-import { BenchmarkCardFull } from './components/benchmark-card-full/benchmark-card-full';
-import { ProgressEdit } from './components/progress-edit/progress-edit';
+import { Workspace } from './components/workspace/workspace';
 import { Reports } from './components/reports/reports';
 import { StudentProgressReport } from './components/student-progress-report/student-progress-report';
+import { BenchmarkCardFull } from './components/benchmark-card-full/benchmark-card-full';
 
 export default [
     {
@@ -17,17 +11,11 @@ export default [
         component: Home,
         children: [
             { path: '', redirectTo: 'students', pathMatch: 'full' },
-            { path: 'students', component: StudentCardList },
-            { path: 'students/:studentId', component: StudentCardFull },
-            { path: 'students/:studentId/goals', component: GoalList },
-            { path: 'students/:studentId/goals/:goalId', component: GoalCardFull },
-            { path: 'students/:studentId/goals/:goalId/progress', component: ProgressList },
-            { path: 'students/:studentId/goals/:goalId/progress/new', component: ProgressEdit },
-            { path: 'students/:studentId/goals/:goalId/progress/:progressEventId', component: ProgressEdit },
-            { path: 'students/:studentId/goals/:goalId/benchmarks', component: BenchmarkList },
+            { path: 'students', component: Workspace },
+            { path: 'students/:studentId', component: Workspace },
+            { path: 'students/:studentId/goals/:goalId', component: Workspace },
+            // Benchmark creation still uses the dedicated page (no create-benchmark modal yet)
             { path: 'students/:studentId/goals/:goalId/benchmarks/new', component: BenchmarkCardFull },
-            { path: 'students/:studentId/goals/:goalId/benchmarks/:benchmarkId', component: BenchmarkCardFull },
-            { path: 'students/:studentId/benchmarks', component: BenchmarkList },
             { path: 'reports', component: Reports },
             { path: 'reports/student-progress', component: StudentProgressReport },
         ],
diff --git a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html
index 4e0f528..8e6b9d2 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html
@@ -1,25 +1,72 @@
 <div class="shell">
-    <!-- Header -->
-    <header class="header">
-        <button class="menu-toggle" (click)="onToggleSidebar()">☰</button>
-        <span class="header-title">{{ auth.schoolDistrictName() }} — {{ auth.programName() }}</span>
-        <button class="logout-btn" (click)="onLogout()">Log Out</button>
-    </header>
+    <!-- Modals -->
+    @if (showAddStudentModal()) {
+    <app-add-student-modal (studentCreated)="onStudentCreated($event)"
+        (cancelled)="showAddStudentModal.set(false)" />
+    }
+    @if (editingStudent()) {
+    <app-edit-student-modal [student]="editingStudent()!" (saved)="onEditStudentSaved()"
+        (closed)="editingStudent.set(null)" />
+    }
 
-    <!-- Body: Sidebar + Main -->
-    <div class="body">
-        <nav class="sidebar" [class.expanded]="sidebarExpanded()">
-            <a class="nav-item" routerLink="/students">Home</a>
-            <app-sidebar-tree-node [nodes]="sidebarTree()" [depth]="0" />
-        </nav>
+    <!-- Sidebar -->
+    <div class="sidebar">
+        <div class="sidebar-brand">
+            <div class="brand-label">Progress Tracker</div>
+            <div class="brand-sub">{{ auth.programName() }}</div>
+        </div>
 
-        <main class="content">
-            <router-outlet />
-        </main>
+        <div class="sidebar-controls">
+            <span class="controls-label">My Students</span>
+            <label class="scope-toggle">
+                <input type="checkbox" [checked]="showAll()" (change)="onToggleScope()" hidden>
+                <span class="toggle-track" [class.active]="showAll()">
+                    <span class="toggle-thumb"></span>
+                </span>
+                All
+            </label>
+        </div>
+
+        <div class="student-list">
+            @for (s of students(); track s.studentId) {
+            <div class="student-item" [class.active]="selectedStudentId() === s.studentId"
+                (click)="onSelectStudent(s)">
+                <div class="student-item-info">
+                    <div class="student-item-name" [class.bold]="selectedStudentId() === s.studentId">
+                        {{ s.identifier }}
+                    </div>
+                    <div class="student-item-meta">
+                        IEP: {{ formatDate(s.nextIepDate) }}
+                        @if (showAll() && s.ownerName) {
+                        <span class="owner-tag">· {{ s.ownerName }}</span>
+                        }
+                    </div>
+                </div>
+                <button class="edit-pencil" (click)="onEditStudent(s, $event)" aria-label="Edit student">
+                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#bbb" stroke-width="1.5"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
+                    </svg>
+                </button>
+            </div>
+            }
+        </div>
+
+        <div class="sidebar-footer">
+            <button class="add-student-btn" (click)="onAddStudent()">+ Add Student</button>
+        </div>
+
+        <div class="sidebar-nav">
+            <a class="nav-link" routerLink="/reports">Reports</a>
+        </div>
+
+        <div class="sidebar-bottom">
+            <button class="logout-link" (click)="onLogout()">Log Out</button>
+        </div>
     </div>
 
-    <!-- Footer -->
-    <footer class="footer">
-        <span>&copy; 2026 WinStudentGoalTracker</span>
-    </footer>
+    <!-- Main Content -->
+    <main class="main">
+        <router-outlet />
+    </main>
 </div>
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss
index 96bb09a..594f681 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss
+++ b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss
@@ -5,120 +5,225 @@
 
 .shell {
     display: flex;
-    flex-direction: column;
     height: 100vh;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-/* Header */
-.header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0 1rem;
-    height: 48px;
-    background: #fff;
-    border-bottom: 1px solid #ddd;
-    flex-shrink: 0;
-}
-
-.menu-toggle {
-    background: none;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    font-size: 1rem;
-    cursor: pointer;
-    padding: 0.25rem 0.5rem;
-    color: #333;
-}
-
-.menu-toggle:hover {
-    background: #f5f5f5;
-}
-
-.header-title {
-    flex: 1;
-    text-align: center;
-    font-weight: 600;
-    font-size: 1rem;
-    color: #333;
-}
-
-.logout-btn {
-    background: none;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    padding: 0.25rem 0.75rem;
-    font-size: 0.8125rem;
-    color: #333;
-    cursor: pointer;
-}
-
-.logout-btn:hover {
-    background: #f5f5f5;
-}
-
-/* Body: Sidebar + Content */
-.body {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
+    font-family: var(--font-family);
+    background: var(--bg-page);
+    color: var(--text-primary);
 }
 
+/* ─── Sidebar ─── */
 .sidebar {
-    width: 0;
-    background: #fff;
-    border-right: 1px solid #ddd;
+    width: 260px;
+    border-right: 1px solid var(--border-color);
+    background: var(--bg-surface);
     display: flex;
     flex-direction: column;
-    overflow: hidden;
-    transition: width 0.2s ease;
     flex-shrink: 0;
 }
 
-.sidebar.expanded {
-    width: 260px;
-    overflow-y: auto;
+.sidebar-brand {
+    padding: 20px 18px 12px;
+    border-bottom: 1px solid var(--border-color);
 }
 
-.nav-item {
-    display: block;
-    padding: 0.75rem 1rem;
-    color: #333;
-    text-decoration: none;
-    white-space: nowrap;
-    font-size: 0.875rem;
-}
-
-.nav-item:hover {
-    background: #f5f5f5;
-}
-
-.nav-item.active {
+.brand-label {
+    font-size: 13px;
     font-weight: 600;
-    color: #4f46e5;
-    background: #eef2ff;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 4px;
 }
 
-/* Main content */
-.content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1.5rem;
-    background: #f5f5f5;
-    display: flex;
-    flex-direction: column;
+.brand-sub {
+    font-size: 15px;
+    color: var(--text-secondary);
 }
 
-/* Footer */
-.footer {
+.sidebar-controls {
+    padding: 12px 18px 8px;
     display: flex;
     align-items: center;
-    padding: 0 1rem;
-    height: 32px;
+    gap: 8px;
+}
+
+.controls-label {
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+.scope-toggle {
+    margin-left: auto;
+    font-size: 11px;
+    color: var(--text-faint);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.toggle-track {
+    display: inline-flex;
+    align-items: center;
+    width: 30px;
+    height: 16px;
+    background: #d1d5db;
+    border-radius: 8px;
+    padding: 2px;
+    transition: background var(--transition-normal);
+
+    &.active {
+        background: var(--accent-indigo-light);
+    }
+}
+
+.toggle-thumb {
+    width: 12px;
+    height: 12px;
     background: #fff;
-    border-top: 1px solid #ddd;
-    color: #666;
-    font-size: 0.75rem;
+    border-radius: 50%;
+    transition: transform var(--transition-normal);
+
+    .active > & {
+        transform: translateX(14px);
+    }
+}
+
+/* ─── Student List ─── */
+.student-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 8px 8px;
+}
+
+.student-item {
+    padding: 10px 12px;
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    margin-bottom: 2px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: background var(--transition-fast);
+
+    &:hover {
+        background: var(--bg-hover);
+    }
+
+    &.active {
+        background: var(--bg-hover);
+    }
+}
+
+.student-item-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.student-item-name {
+    font-size: 14px;
+    font-weight: 400;
+
+    &.bold {
+        font-weight: 600;
+    }
+}
+
+.student-item-meta {
+    font-size: 11px;
+    color: var(--text-faint);
+    margin-top: 2px;
+}
+
+.owner-tag {
+    margin-left: 6px;
+    color: var(--text-dim);
+}
+
+.edit-pencil {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 2px;
     flex-shrink: 0;
+    display: flex;
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+
+    .student-item:hover & {
+        opacity: 1;
+    }
+}
+
+/* ─── Sidebar Footer ─── */
+.sidebar-footer {
+    padding: 10px 12px;
+    border-top: 1px solid var(--border-color);
+}
+
+.add-student-btn {
+    width: 100%;
+    padding: 8px 0;
+    border-radius: var(--radius-md);
+    border: 1.5px dashed var(--border-muted);
+    background: none;
+    font-size: 13px;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-family: inherit;
+    transition: border-color var(--transition-fast), color var(--transition-fast);
+
+    &:hover {
+        border-color: var(--text-muted);
+        color: var(--text-secondary);
+    }
+}
+
+.sidebar-nav {
+    padding: 6px 12px;
+    border-top: 1px solid var(--border-color);
+}
+
+.nav-link {
+    display: block;
+    padding: 8px 10px;
+    border-radius: var(--radius-md);
+    font-size: 13px;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: background var(--transition-fast);
+
+    &:hover {
+        background: var(--bg-hover);
+    }
+}
+
+.sidebar-bottom {
+    padding: 8px 12px;
+    border-top: 1px solid var(--border-color);
+}
+
+.logout-link {
+    background: none;
+    border: none;
+    font-size: 12px;
+    color: var(--text-faint);
+    cursor: pointer;
+    padding: 6px 10px;
+    font-family: inherit;
+
+    &:hover {
+        color: var(--text-secondary);
+    }
+}
+
+/* ─── Main Content ─── */
+.main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    background: var(--bg-page);
 }
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts
index 33331a5..390459d 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts
@@ -1,274 +1,103 @@
-import { Component, effect, inject, OnDestroy, signal } from '@angular/core';
-import { NavigationEnd, Router, RouterLink, RouterOutlet } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { Component, effect, inject, signal } from '@angular/core';
+import { RouterLink, RouterOutlet, Router } from '@angular/router';
 import { Auth } from '../../../shared/services/auth';
 import { StudentService } from '../../../shared/services/student.service';
 import { StudentCardDto } from '../../../shared/classes/student-card.dto';
-import { SidebarNode } from '../../../shared/classes/sidebar-node';
-import { SidebarTreeNode } from '../../components/sidebar-tree-node/sidebar-tree-node';
+import { AddStudentModal } from '../../components/add-student-modal/add-student-modal';
+import { EditStudentModal } from '../../components/edit-student-modal/edit-student-modal';
 
 @Component({
-  selector: 'app-home',
-  imports: [RouterOutlet, RouterLink, SidebarTreeNode],
-  templateUrl: './home.html',
-  styleUrl: './home.scss',
+    selector: 'app-home',
+    imports: [RouterOutlet, RouterLink, AddStudentModal, EditStudentModal],
+    templateUrl: './home.html',
+    styleUrl: './home.scss',
 })
-export class Home implements OnDestroy {
+export class Home {
 
-  // ************************** Constructor **************************
+    // ************************** Constructor **************************
 
-  constructor() {
-    this.loadStudents();
-
-    // Reload the sidebar tree whenever data changes elsewhere.
-    let initialized = false;
-    effect(() => {
-      this.studentService.dataVersion();
-      if (initialized) {
+    constructor() {
         this.loadStudents();
-      }
-      initialized = true;
-    });
 
-    // Auto-expand sidebar nodes to match the current route.
-    this.routeSub = this.router.events.pipe(
-      filter(e => e instanceof NavigationEnd)
-    ).subscribe(() => {
-      this.expandToRoute(this.router.url);
-    });
-
-    // Patch individual sidebar node labels without a full rebuild.
-    this.labelSub = this.studentService.sidebarLabelUpdate$.subscribe(update => {
-      this.patchNodeLabel(this.sidebarTree(), update.routerLink, update.label);
-    });
-  }
-
-  // ************************** Declarations *************************
-
-  protected readonly auth = inject(Auth);
-  private readonly router = inject(Router);
-  private readonly studentService = inject(StudentService);
-  private readonly routeSub: Subscription;
-  private readonly labelSub: Subscription;
-  protected readonly sidebarExpanded = signal(true);
-  protected readonly sidebarTree = signal<SidebarNode[]>([]);
-
-  // ************************** Properties ***************************
-
-  // ************************ Public Methods *************************
-
-  // ************************ Event Handlers *************************
-
-  onToggleSidebar() {
-    this.sidebarExpanded.update(v => !v);
-  }
-
-  // *****************************************************************
-  // Logs the user out and sends them back to the login screen.
-  // *****************************************************************
-  onLogout() {
-    this.auth.logout().subscribe();
-    this.auth.forceLogout();
-  }
-
-  ngOnDestroy() {
-    this.routeSub.unsubscribe();
-    this.labelSub.unsubscribe();
-  }
-
-  // ********************** Support Procedures ***********************
-
-  // *****************************************************************
-  // Recursively walks the sidebar tree to find a node whose
-  // routerLink matches the given link, and updates its label.
-  // *****************************************************************
-  private patchNodeLabel(nodes: SidebarNode[], routerLink: string[], label: string): boolean {
-    for (const node of nodes) {
-      if (node.routerLink && node.routerLink.join('/') === routerLink.join('/')) {
-        node.label = label;
-        return true;
-      }
-      if (node.children && this.patchNodeLabel(node.children, routerLink, label)) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  // *****************************************************************
-  // Loads student list, sorts by identifier, and builds the sidebar
-  // tree with lazy-loading callbacks for goals and benchmarks.
-  // When scope is 'all', groups students by owning user.
-  // *****************************************************************
-  private loadStudents() {
-    // Fetch with 'all' scope so the sidebar can show grouped nodes
-    // when the StudentCardList toggle is active.
-    this.studentService.getMyStudents('all').then(data => {
-      if (data.success) {
-        const sorted = (data.payload || []).sort((a, b) =>
-          a.identifier.localeCompare(b.identifier, undefined, { sensitivity: 'base' })
-        );
-        this.sidebarTree.set(this.buildTree(sorted));
-        this.expandToRoute(this.router.url);
-      }
-    });
-  }
-
-  // *****************************************************************
-  // Builds the sidebar node tree from a list of students.
-  // Groups students by ownerName — "My Students" first, then other
-  // owners' groups sorted alphabetically.
-  // *****************************************************************
-  private buildTree(students: StudentCardDto[]): SidebarNode[] {
-    // Group students by ownerName. Students with isMine go into "My Students".
-    const myStudents: StudentCardDto[] = [];
-    const otherGroups = new Map<string, StudentCardDto[]>();
-
-    for (const s of students) {
-      if (s.isMine !== false) {
-        myStudents.push(s);
-      } else {
-        const key = s.ownerName ?? 'Unknown';
-        if (!otherGroups.has(key)) otherGroups.set(key, []);
-        otherGroups.get(key)!.push(s);
-      }
+        // Reload student list when data changes elsewhere.
+        let initialized = false;
+        effect(() => {
+            this.studentService.dataVersion();
+            if (initialized) {
+                this.loadStudents();
+            }
+            initialized = true;
+        });
     }
 
-    const nodes: SidebarNode[] = [{
-      label: 'My Students',
-      routerLink: ['/students'],
-      expanded: true,
-      childCount: myStudents.length,
-      children: myStudents.map(s => this.buildStudentNode(s)),
-    }];
+    // ************************** Declarations *************************
 
-    // Add other users' groups sorted by owner name.
-    const sortedOwners = [...otherGroups.keys()].sort((a, b) =>
-      a.localeCompare(b, undefined, { sensitivity: 'base' })
-    );
+    protected readonly auth = inject(Auth);
+    private readonly router = inject(Router);
+    private readonly studentService = inject(StudentService);
 
-    for (const ownerName of sortedOwners) {
-      const group = otherGroups.get(ownerName)!;
-      const firstName = ownerName.split(' ')[0];
-      nodes.push({
-        label: `${firstName}'s Students`,
-        routerLink: ['/students'],
-        expanded: false,
-        childCount: group.length,
-        children: group.map(s => this.buildStudentNode(s)),
-      });
+    protected readonly students = signal<StudentCardDto[]>([]);
+    protected readonly selectedStudentId = signal<string | null>(null);
+    protected readonly showAll = signal(false);
+    protected readonly showAddStudentModal = signal(false);
+    protected readonly editingStudent = signal<StudentCardDto | null>(null);
+
+    // ************************ Event Handlers *************************
+
+    onSelectStudent(student: StudentCardDto) {
+        this.selectedStudentId.set(student.studentId);
+        this.router.navigate(['/students', student.studentId]);
     }
 
-    nodes.push({
-      label: 'Reports',
-      routerLink: ['/reports'],
-    });
-
-    return nodes;
-  }
-
-  // *****************************************************************
-  // Builds a single student sidebar node with lazy-loaded goal
-  // children.
-  // *****************************************************************
-  private buildStudentNode(s: StudentCardDto): SidebarNode {
-    return {
-      label: s.identifier,
-      routerLink: ['/students', s.studentId],
-      childCount: s.goalCount > 0 ? 1 : 0,
-      children: s.goalCount > 0 ? [{
-        label: 'Goals',
-        routerLink: ['/students', s.studentId, 'goals'],
-        childCount: s.goalCount,
-        loadChildren: () => this.loadGoalNodes(s.studentId),
-      }] : undefined,
-    };
-  }
-
-
-
-  // *****************************************************************
-  // Lazy-loads individual goal nodes for a student. Called when
-  // the "Goals" node is expanded for the first time.
-  // *****************************************************************
-  private async loadGoalNodes(studentId: string): Promise<SidebarNode[]> {
-    const result = await this.studentService.getGoalsForStudent(studentId);
-    if (!result.success || !result.payload) return [];
-
-    return result.payload.goals.map(goal => ({
-      label: goal.category,
-      routerLink: ['/students', studentId, 'goals', goal.goalId],
-      childCount: 2,
-      children: [
-        {
-          label: goal.progressEventCount > 0 ? `Progress Events (${goal.progressEventCount})` : 'Progress Events',
-          routerLink: ['/students', studentId, 'goals', goal.goalId, 'progress'],
-        },
-        {
-          label: 'Benchmarks',
-          routerLink: ['/students', studentId, 'goals', goal.goalId, 'benchmarks'],
-          childCount: goal.benchmarkCount,
-          loadChildren: goal.benchmarkCount > 0
-            ? () => this.loadBenchmarkNodes(studentId, goal.goalId)
-            : undefined,
-        },
-      ],
-    }));
-  }
-
-  // *****************************************************************
-  // Lazy-loads benchmark leaf nodes for a goal. Called when a
-  // "Benchmarks" node is expanded for the first time.
-  // *****************************************************************
-  private async loadBenchmarkNodes(studentId: string, goalId: string): Promise<SidebarNode[]> {
-    const result = await this.studentService.getBenchmarksForStudent(studentId);
-    if (!result.success || !result.payload) return [];
-
-    return result.payload.benchmarks
-      .filter(b => b.goalId === goalId)
-      .map(b => ({
-        label: b.shortName || b.benchmark,
-        routerLink: ['/students', studentId, 'goals', goalId, 'benchmarks', b.benchmarkId],
-      }));
-  }
-
-  // *****************************************************************
-  // Walks the sidebar tree and expands any node whose routerLink is
-  // a prefix of the current URL. Triggers lazy loading if needed.
-  // Returns true if the current URL matches or is a descendant of
-  // any node in the given list.
-  // *****************************************************************
-  private async expandToRoute(url: string, nodes?: SidebarNode[]): Promise<boolean> {
-    const tree = nodes || this.sidebarTree();
-    let matched = false;
-
-    for (const node of tree) {
-      const nodePath = node.routerLink ? node.routerLink.join('/') : '';
-
-      // Check if this node is the target or an ancestor of the target.
-      const isMatch = nodePath !== '' && url === nodePath;
-      const isAncestor = nodePath !== '' && url.startsWith(nodePath + '/');
-
-      if (isMatch || isAncestor) {
-        matched = true;
-
-        if (isAncestor) {
-          // Expand this node to reveal children.
-          if (node.loadChildren && !node.children) {
-            node.children = await node.loadChildren();
-          }
-          node.expanded = true;
-
-          // Continue down the tree.
-          if (node.children) {
-            await this.expandToRoute(url, node.children);
-          }
-        }
-      }
+    onToggleScope() {
+        this.showAll.update(v => !v);
+        this.loadStudents();
     }
 
-    return matched;
-  }
+    onAddStudent() {
+        this.showAddStudentModal.set(true);
+    }
+
+    onStudentCreated(student: StudentCardDto) {
+        this.showAddStudentModal.set(false);
+        this.studentService.notifyDataChanged();
+        this.selectedStudentId.set(student.studentId);
+        this.router.navigate(['/students', student.studentId]);
+    }
+
+    onEditStudent(student: StudentCardDto, event: Event) {
+        event.stopPropagation();
+        this.editingStudent.set(student);
+    }
+
+    onEditStudentSaved() {
+        this.editingStudent.set(null);
+        this.loadStudents();
+    }
+
+    onLogout() {
+        this.auth.logout().subscribe();
+        this.auth.forceLogout();
+    }
+
+    // ************************ Formatting Helpers **********************
+
+    formatDate(d: Date | null): string {
+        if (!d) return '';
+        return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+    }
+
+    // ********************** Support Procedures ***********************
+
+    private loadStudents() {
+        const scope = this.showAll() ? 'all' : undefined;
+        this.studentService.getMyStudents(scope).then(data => {
+            if (data.success) {
+                const sorted = (data.payload || []).sort((a, b) =>
+                    a.identifier.localeCompare(b.identifier, undefined, { sensitivity: 'base' })
+                );
+                this.students.set(sorted);
+            }
+        });
+    }
 }
-
diff --git a/ui/winstudentgoaltracker/src/app/shared/classes/category-colors.ts b/ui/winstudentgoaltracker/src/app/shared/classes/category-colors.ts
new file mode 100644
index 0000000..424d42b
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/shared/classes/category-colors.ts
@@ -0,0 +1,22 @@
+export interface CategoryColor {
+    bg: string;
+    border: string;
+    text: string;
+    accent: string;
+}
+
+const CATEGORY_COLORS: Record<string, CategoryColor> = {
+    Reading:  { bg: '#EEF2FF', border: '#818CF8', text: '#4338CA', accent: '#6366F1' },
+    Math:     { bg: '#FFF7ED', border: '#FB923C', text: '#C2410C', accent: '#F97316' },
+    Writing:  { bg: '#F0FDF4', border: '#4ADE80', text: '#15803D', accent: '#22C55E' },
+    Behavior: { bg: '#FDF4FF', border: '#C084FC', text: '#7E22CE', accent: '#A855F7' },
+    Speech:   { bg: '#FFF1F2', border: '#FB7185', text: '#BE123C', accent: '#F43F5E' },
+};
+
+const DEFAULT_COLOR: CategoryColor = {
+    bg: '#F5F5F0', border: '#A0A090', text: '#444', accent: '#666',
+};
+
+export function getCategoryColor(category: string): CategoryColor {
+    return CATEGORY_COLORS[category] ?? DEFAULT_COLOR;
+}
diff --git a/ui/winstudentgoaltracker/src/styles.scss b/ui/winstudentgoaltracker/src/styles.scss
index 614dd62..967d081 100644
--- a/ui/winstudentgoaltracker/src/styles.scss
+++ b/ui/winstudentgoaltracker/src/styles.scss
@@ -1,13 +1,78 @@
-/* You can add global styles to this file, and also import other style files */
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
 
+/* ─── Design Tokens ─── */
+:root {
+    --font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
+    --bg-page: #F8F8F6;
+    --bg-surface: #FFFFFF;
+    --bg-hover: #F0F0EC;
+    --border-color: #E5E5E0;
+    --border-muted: #D5D5D0;
+    --text-primary: #1a1a1a;
+    --text-secondary: #555;
+    --text-muted: #888;
+    --text-faint: #999;
+    --text-dim: #bbb;
+    --accent-indigo: #4338CA;
+    --accent-indigo-light: #6366F1;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 10px;
+    --radius-2xl: 12px;
+    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2);
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
+    --transition-fast: 0.15s ease;
+    --transition-normal: 0.2s ease;
+}
+
+/* ─── Reset ─── */
 html,
 body {
     margin: 0;
     padding: 0;
     height: 100%;
     overflow: hidden;
+    font-family: var(--font-family);
+    color: var(--text-primary);
+    background: var(--bg-page);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
 }
 
 input[type="date"] {
     font-family: inherit;
+}
+
+/* ─── Focus Styles ─── */
+input:focus,
+textarea:focus,
+select:focus {
+    outline: none;
+    border-color: var(--accent-indigo) !important;
+    box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.12);
+}
+
+/* ─── Scrollbar (subtle) ─── */
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #d5d5d0;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #bbb;
 }
\ No newline at end of file

From 4b435ccdb4d4a5ea8e4bd756784efbb352fc1b1c Mon Sep 17 00:00:00 2001
From: Oliver Pelly <opelly@gmail.com>
Date: Wed, 8 Apr 2026 14:02:33 -0700
Subject: [PATCH 2/6] dead code removal

---
 .../benchmark-card-full.ts                    |   7 -
 .../benchmark-card/benchmark-card.html        |  12 -
 .../benchmark-card/benchmark-card.scss        |  51 ----
 .../benchmark-card/benchmark-card.spec.ts     |  23 --
 .../benchmark-card/benchmark-card.ts          |  26 --
 .../benchmark-list/benchmark-list.html        |  29 ---
 .../benchmark-list/benchmark-list.scss        |  72 ------
 .../benchmark-list/benchmark-list.spec.ts     |  23 --
 .../benchmark-list/benchmark-list.ts          |  94 --------
 .../goal-card-full/goal-card-full.html        |  81 -------
 .../goal-card-full/goal-card-full.scss        | 208 ----------------
 .../goal-card-full/goal-card-full.spec.ts     |  23 --
 .../goal-card-full/goal-card-full.ts          | 196 ---------------
 .../components/goal-card/goal-card.html       |  28 ---
 .../components/goal-card/goal-card.scss       | 105 --------
 .../desktop/components/goal-card/goal-card.ts |  55 -----
 .../components/goal-list/goal-list.html       |  40 ---
 .../components/goal-list/goal-list.scss       |  96 --------
 .../desktop/components/goal-list/goal-list.ts |  91 -------
 .../progress-edit/progress-edit.html          |  57 -----
 .../progress-edit/progress-edit.scss          | 163 -------------
 .../progress-edit/progress-edit.spec.ts       |  23 --
 .../components/progress-edit/progress-edit.ts | 228 ------------------
 .../progress-item/progress-item.html          |   9 -
 .../progress-item/progress-item.scss          |  63 -----
 .../progress-item/progress-item.spec.ts       |  23 --
 .../components/progress-item/progress-item.ts |  33 ---
 .../progress-list/progress-list.html          |  40 ---
 .../progress-list/progress-list.scss          | 139 -----------
 .../progress-list/progress-list.spec.ts       |  23 --
 .../components/progress-list/progress-list.ts | 131 ----------
 .../sidebar-tree-node/sidebar-tree-node.html  |  20 --
 .../sidebar-tree-node/sidebar-tree-node.scss  |  60 -----
 .../sidebar-tree-node/sidebar-tree-node.ts    |  67 -----
 .../student-card-full/student-card-full.html  |  45 ----
 .../student-card-full/student-card-full.scss  | 180 --------------
 .../student-card-full.spec.ts                 |  23 --
 .../student-card-full/student-card-full.ts    | 160 ------------
 .../student-card-list/student-card-list.html  | 100 --------
 .../student-card-list/student-card-list.scss  | 210 ----------------
 .../student-card-list/student-card-list.ts    | 103 --------
 .../components/student-card/student-card.html |  20 --
 .../components/student-card/student-card.scss |  49 ----
 .../components/student-card/student-card.ts   |  27 ---
 .../src/app/shared/classes/sidebar-node.ts    |   8 -
 45 files changed, 3264 deletions(-)
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.spec.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.spec.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.spec.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.spec.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.spec.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.spec.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.spec.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/shared/classes/sidebar-node.ts

diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.ts b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.ts
index e2c6ce5..51f96dd 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card-full/benchmark-card-full.ts
@@ -95,19 +95,12 @@ export class BenchmarkCardFull implements OnDestroy {
         this.errorMessage.set(result.message);
       }
     } else {
-      const shortNameChanged = this.shortName !== this.savedShortName;
       const result = await this.studentService.updateBenchmark(this.studentId, this.benchmarkId!, this.benchmarkText, this.shortName || undefined);
       this.saving.set(false);
       if (result.success) {
         this.savedBenchmarkText = this.benchmarkText;
         this.savedShortName = this.shortName;
         this.successMessage.set('Changes saved.');
-        if (shortNameChanged) {
-          this.studentService.updateSidebarLabel(
-            ['/students', this.studentId, 'goals', this.goalId, 'benchmarks', this.benchmarkId!],
-            this.shortName || this.benchmarkText
-          );
-        }
       } else {
         this.errorMessage.set(result.message);
       }
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.html b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.html
deleted file mode 100644
index 4b9f0aa..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="card">
-    <div class="card-header">
-        <span class="goal-badge">{{ benchmark().goalCategory }}</span>
-        @if (benchmark().updatedAt) {
-        <span class="date">Updated: {{ benchmark().updatedAt | date:'M/d/yy' }}</span>
-        } @else {
-        <span class="date">{{ benchmark().createdAt | date:'M/d/yy' }}</span>
-        }
-    </div>
-
-    <p class="benchmark-text">{{ benchmark().benchmark }}</p>
-</div>
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.scss b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.scss
deleted file mode 100644
index e7744af..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-:host {
-    display: block;
-    width: 300px;
-}
-
-.card {
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-    padding: 1.25rem 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.625rem;
-    min-width: 0;
-}
-
-.card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.goal-badge {
-    padding: 0.2rem 0.6rem;
-    background: #f0fdf4;
-    color: #16a34a;
-    border-radius: 999px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 60%;
-}
-
-.date {
-    font-size: 0.8125rem;
-    color: #888;
-}
-
-.benchmark-text {
-    margin: 0;
-    font-size: 0.875rem;
-    color: #333;
-    line-height: 1.5;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.spec.ts b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.spec.ts
deleted file mode 100644
index 1881594..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BenchmarkCard } from './benchmark-card';
-
-describe('BenchmarkCard', () => {
-  let component: BenchmarkCard;
-  let fixture: ComponentFixture<BenchmarkCard>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [BenchmarkCard]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(BenchmarkCard);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.ts b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.ts
deleted file mode 100644
index 4f924a3..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-card/benchmark-card.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component, input } from '@angular/core';
-import { DatePipe } from '@angular/common';
-import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
-
-@Component({
-  selector: 'app-benchmark-card',
-  imports: [DatePipe],
-  templateUrl: './benchmark-card.html',
-  styleUrl: './benchmark-card.scss',
-})
-export class BenchmarkCard {
-
-  // ************************** Constructor **************************
-
-  // ************************** Declarations *************************
-
-  readonly benchmark = input.required<BenchmarkDto>();
-
-  // ************************** Properties ***************************
-
-  // ************************ Public Methods *************************
-
-  // ************************ Event Handlers *************************
-
-  // ********************** Support Procedures ***********************
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.html b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.html
deleted file mode 100644
index f82402b..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<div class="toolbar">
-    <button class="toolbar-btn back-btn" (click)="onBack()">&#8593; Goal</button>
-    <span class="spacer"></span>
-    <button class="toolbar-btn" (click)="onAddBenchmark()">+ Add a Benchmark</button>
-</div>
-
-@if (goalCategory()) {
-<h2 class="section-header">Benchmarks for {{ goalCategory() }}</h2>
-} @else {
-<h2 class="section-header">Benchmarks</h2>
-}
-
-@if (errorMessage()) {
-<p class="error">{{ errorMessage() }}</p>
-}
-
-@if (benchmarks().length === 0 && !errorMessage()) {
-<div class="empty-state">
-    <p>Benchmarks are milestones on the way to achieving a goal. They are optional in this system.</p>
-    <p>No benchmarks yet.</p>
-    <p>Click <strong>+ Add a Benchmark</strong> in the upper right to get started.</p>
-</div>
-} @else {
-<div class="card-grid">
-    @for (bm of benchmarks(); track bm.benchmarkId) {
-    <app-benchmark-card [benchmark]="bm" />
-    }
-</div>
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.scss b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.scss
deleted file mode 100644
index 1a518dd..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-:host {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.toolbar {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    height: 40px;
-    padding-right: 0.5rem;
-    border-radius: 8px;
-    background: #fff;
-    border-bottom: 1px solid #ddd;
-    margin-bottom: 1rem;
-    flex-shrink: 0;
-}
-
-.toolbar-btn {
-    padding: 0.375rem 0.75rem;
-    background: transparent;
-    color: #4f46e5;
-    border: 1px solid #4f46e5;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-}
-
-.toolbar-btn:hover {
-    background: #eef2ff;
-}
-
-.back-btn {
-    margin-left: 0.5rem;
-}
-
-.section-header {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: #333;
-    margin: 0 0 0.5rem;
-}
-
-.spacer {
-    flex: 1;
-}
-
-.error {
-    font-size: 0.875rem;
-    color: #dc2626;
-    margin: 0 0 1rem;
-}
-
-.empty-state {
-    text-align: center;
-    padding: 3rem 1.5rem;
-    color: #555;
-    font-size: 0.9375rem;
-    background: #fff;
-    border-radius: 8px;
-    border: 1px solid #ddd;
-}
-
-.card-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    overflow-y: auto;
-    flex: 1;
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.spec.ts b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.spec.ts
deleted file mode 100644
index 964283c..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BenchmarkList } from './benchmark-list';
-
-describe('BenchmarkList', () => {
-  let component: BenchmarkList;
-  let fixture: ComponentFixture<BenchmarkList>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [BenchmarkList]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(BenchmarkList);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.ts b/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.ts
deleted file mode 100644
index e8cccf6..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/benchmark-list/benchmark-list.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Component, inject, signal } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
-import { StudentService } from '../../../shared/services/student.service';
-import { BenchmarkCard } from '../benchmark-card/benchmark-card';
-
-@Component({
-  selector: 'app-benchmark-list',
-  imports: [BenchmarkCard],
-  templateUrl: './benchmark-list.html',
-  styleUrl: './benchmark-list.scss',
-})
-export class BenchmarkList {
-
-  // ************************** Constructor **************************
-
-  constructor() {
-    this.studentId = this.route.snapshot.paramMap.get('studentId')!;
-    this.goalId = this.route.snapshot.paramMap.get('goalId') || '';
-    this.loadBenchmarks();
-    this.loadGoalCategory();
-  }
-
-  // ************************** Declarations *************************
-
-  private readonly studentService = inject(StudentService);
-  private readonly route = inject(ActivatedRoute);
-  private readonly router = inject(Router);
-
-  protected readonly studentId: string;
-  protected readonly goalId: string;
-  protected readonly goalCategory = signal<string | null>(null);
-  protected readonly benchmarks = signal<BenchmarkDto[]>([]);
-  protected readonly errorMessage = signal<string | null>(null);
-
-  // ************************** Properties ***************************
-
-  // ************************ Public Methods *************************
-
-  // ************************ Event Handlers *************************
-
-  onAddBenchmark() {
-    this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'benchmarks', 'new']);
-  }
-
-  onBack() {
-    if (this.goalId) {
-      this.router.navigate(['/students', this.studentId, 'goals', this.goalId]);
-    } else {
-      this.router.navigate(['/students', this.studentId, 'goals']);
-    }
-  }
-
-  // ********************** Support Procedures ***********************
-
-  // *****************************************************************
-  // Loads benchmarks for the student from the service. Also sets
-  // goalCategory from the first benchmark's data.
-  // *****************************************************************
-  private loadBenchmarks() {
-    this.studentService.getBenchmarksForStudent(this.studentId).then(data => {
-      if (!data.success) {
-        this.errorMessage.set(data.message);
-      } else {
-        const benchmarks = data.payload?.benchmarks ?? [];
-        this.benchmarks.set(benchmarks);
-
-        // Set the goal category from benchmark data if available
-        if (this.goalId && benchmarks.length > 0) {
-          const match = benchmarks.find(b => b.goalId === this.goalId);
-          if (match) this.goalCategory.set(match.goalCategory);
-        }
-
-        // If we still don't have a category, load it from the goals API
-        if (!this.goalCategory()) {
-          this.loadGoalCategory();
-        }
-      }
-    });
-  }
-
-  // *****************************************************************
-  // Loads the goal category from the goals API as a fallback when
-  // no benchmarks exist yet to extract it from.
-  // *****************************************************************
-  private loadGoalCategory() {
-    if (!this.goalId) return;
-    this.studentService.getGoalsForStudent(this.studentId).then(result => {
-      if (!result.success || !result.payload) return;
-      const goal = result.payload.goals.find(g => g.goalId === this.goalId);
-      this.goalCategory.set(goal?.category ?? null);
-    });
-  }
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.html b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.html
deleted file mode 100644
index 7f450c1..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<div class="toolbar">
-    <button class="toolbar-btn back-btn" (click)="onBack()">&#8593; Goals</button>
-    <span class="toolbar-title">Goal Detail</span>
-    <span class="spacer"></span>
-</div>
-
-@if (loaded()) {
-<div class="detail-card">
-    <div class="card-header">
-        <span class="card-title">Goal: {{ category }}</span>
-        @if (targetCompletionDate) {
-            <span class="card-title">Target: {{ targetCompletionDate | date:'mediumDate' }}</span>
-        } @else {
-            <span class="card-title">No target date</span>
-        }
-    </div>
-
-    <div class="card-body">
-        <div class="field">
-            <label class="field-label" for="category">Category</label>
-            <input id="category" class="field-input" type="text" [(ngModel)]="category" />
-        </div>
-
-        <div class="field">
-            <label class="field-label" for="baseline">Baseline</label>
-            <textarea id="baseline" class="field-input field-textarea" [(ngModel)]="baseline" rows="3"
-                placeholder="Enter baseline..."></textarea>
-        </div>
-        <div class="field">
-            <label class="field-label" for="description">Goal</label>
-            <textarea id="description" class="field-input field-textarea" [(ngModel)]="description" rows="4"
-                placeholder="Enter goal..."></textarea>
-        </div>
-
-        <div class="field">
-            <label class="field-label" for="targetCompletionDate">Target Completion Date</label>
-            <input id="targetCompletionDate" class="field-input" type="date" [(ngModel)]="targetCompletionDate" />
-        </div>
-
-        @if (closeDate !== null) {
-        <div class="close-section">
-            <div class="field">
-                <label class="field-label" for="closeDate">Close Date</label>
-                <input id="closeDate" class="field-input" type="date" [(ngModel)]="closeDate" />
-            </div>
-            <div class="field field-row">
-                <label class="field-label" for="achieved">Achieved</label>
-                <input id="achieved" type="checkbox" [ngModel]="achieved ?? false" (ngModelChange)="achieved = $event" />
-            </div>
-            @if (achieved === false) {
-            <div class="field">
-                <label class="field-label" for="closeNotes">Close Notes <span class="required">*</span></label>
-                <textarea id="closeNotes" class="field-input field-textarea" [(ngModel)]="closeNotes" rows="3"
-                    placeholder="Explain why the goal was not achieved..." required></textarea>
-            </div>
-            }
-        </div>
-        }
-
-        <div class="actions">
-            <button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
-            <button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
-                {{ saving() ? 'Saving...' : 'Save' }}
-            </button>
-        </div>
-    </div>
-
-    <div class="card-footer">
-        <button class="footer-btn btn-green" (click)="onProgressEvents()">Progress Events</button>
-        <button class="footer-btn btn-blue" (click)="onBenchmarks()">Benchmarks</button>
-    </div>
-</div>
-}
-
-@if (errorMessage()) {
-<p class="error">{{ errorMessage() }}</p>
-}
-
-@if (successMessage()) {
-<p class="success">{{ successMessage() }}</p>
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.scss b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.scss
deleted file mode 100644
index 5bb3225..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.scss
+++ /dev/null
@@ -1,208 +0,0 @@
-:host {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.toolbar {
-    display: flex;
-    align-items: center;
-    position: relative;
-    gap: 0.75rem;
-    height: 40px;
-    padding-right: 0.5rem;
-    border-radius: 8px;
-    background: #fff;
-    border-bottom: 1px solid #ddd;
-    margin-bottom: 1rem;
-    flex-shrink: 0;
-}
-
-.toolbar-btn {
-    padding: 0.375rem 0.75rem;
-    background: transparent;
-    color: #4f46e5;
-    border: 1px solid #4f46e5;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-}
-
-.toolbar-btn:hover {
-    background: #eef2ff;
-}
-
-.toolbar-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.back-btn {
-    margin-left: 0.5rem;
-}
-
-.toolbar-title {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    font-weight: 600;
-    font-size: 1.25rem;
-    color: #333;
-}
-
-.spacer {
-    flex: 1;
-}
-
-.error {
-    font-size: 0.875rem;
-    color: #dc2626;
-    margin: 1rem 0 0;
-}
-
-.success {
-    font-size: 0.875rem;
-    color: #16a34a;
-    margin: 1rem 0 0;
-}
-
-.detail-card {
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    max-width: 600px;
-    overflow: hidden;
-}
-
-.card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.625rem 1.25rem;
-    background: #f8f9fa;
-    border-bottom: 1px solid #ddd;
-}
-
-.card-title {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: #333;
-}
-
-.card-body {
-    padding: 1.5rem;
-}
-
-.card-footer {
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-    padding: 0.5rem 1.5rem;
-    border-top: 1px solid #eee;
-}
-
-.footer-btn {
-    padding: 0.375rem 0.75rem;
-    background: transparent;
-    border: 1px solid;
-    border-radius: 6px;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    cursor: pointer;
-}
-
-.btn-green {
-    color: #16a34a;
-    border-color: #16a34a;
-}
-
-.btn-green:hover {
-    background: #f0fdf4;
-}
-
-.btn-blue {
-    color: #2563eb;
-    border-color: #2563eb;
-    margin-left: auto;
-}
-
-.btn-blue:hover {
-    background: #eff6ff;
-}
-
-.field {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-}
-
-.field-label {
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-    margin-bottom: 0.25rem;
-}
-
-.field-input {
-    padding: 0.375rem 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-family: inherit;
-    font-size: 0.9375rem;
-    outline: none;
-}
-
-.field-input:focus {
-    border-color: #4f46e5;
-}
-
-.field-textarea {
-    font-family: inherit;
-    resize: vertical;
-    min-height: 5rem;
-}
-
-.actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-}
-
-.actions .toolbar-btn {
-    min-width: 6rem;
-}
-
-.save-btn {
-    background: #4f46e5;
-    color: #fff;
-    border-color: #4f46e5;
-}
-
-.save-btn:hover {
-    background: #4338ca;
-}
-
-.close-section {
-    border-top: 1px solid #eee;
-    padding-top: 1rem;
-    margin-top: 0.5rem;
-}
-
-.field-row {
-    flex-direction: row;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.field-row input[type="checkbox"] {
-    width: 1.125rem;
-    height: 1.125rem;
-}
-
-.required {
-    color: #dc2626;
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.spec.ts b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.spec.ts
deleted file mode 100644
index d69bbd6..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { GoalCardFull } from './goal-card-full';
-
-describe('GoalCardFull', () => {
-  let component: GoalCardFull;
-  let fixture: ComponentFixture<GoalCardFull>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GoalCardFull]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(GoalCardFull);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.ts b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.ts
deleted file mode 100644
index 9783624..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card-full/goal-card-full.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-import { Component, inject, signal, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-import { DatePipe } from '@angular/common';
-import { Subscription } from 'rxjs';
-import { StudentService } from '../../../shared/services/student.service';
-import { StudentGoalItem } from '../../../shared/classes/student-goal';
-
-@Component({
-  selector: 'app-goal-card-full',
-  imports: [FormsModule, DatePipe],
-  templateUrl: './goal-card-full.html',
-  styleUrl: './goal-card-full.scss',
-})
-export class GoalCardFull implements OnDestroy {
-
-  // ************************** Constructor **************************
-
-  constructor() {
-    this.paramSub = this.route.paramMap.subscribe(params => {
-      this.studentId = params.get('studentId')!;
-      this.goalId = params.get('goalId')!;
-      this.loadGoal();
-    });
-  }
-
-  // ************************** Declarations *************************
-
-  private readonly studentService = inject(StudentService);
-  private readonly route = inject(ActivatedRoute);
-  private readonly router = inject(Router);
-  private readonly paramSub: Subscription;
-
-  private studentId!: string;
-  private goalId!: string;
-
-  protected readonly loaded = signal(false);
-  protected readonly errorMessage = signal<string | null>(null);
-  protected readonly successMessage = signal<string | null>(null);
-  protected readonly saving = signal(false);
-
-  // Form fields
-  protected description = '';
-  protected category = '';
-  protected baseline = '';
-  protected targetCompletionDate: string | null = null;
-  protected closeDate: string | null = null;
-  protected achieved: boolean | null = null;
-  protected closeNotes: string | null = null;
-
-  // Read-only metadata
-  protected progressEventCount = 0;
-  protected benchmarkCount = 0;
-
-  // Snapshot
-  private savedDescription = '';
-  private savedCategory = '';
-  private savedBaseline = '';
-  private savedTargetCompletionDate: string | null = null;
-  private savedCloseDate: string | null = null;
-  private savedAchieved: boolean | null = null;
-  private savedCloseNotes: string | null = null;
-
-  // ************************** Properties ***************************
-
-  // *****************************************************************
-  // Returns true if form values differ from the saved snapshot.
-  // *****************************************************************
-  hasChanges(): boolean {
-    return this.description !== this.savedDescription
-      || this.category !== this.savedCategory
-      || this.baseline !== this.savedBaseline
-      || this.targetCompletionDate !== this.savedTargetCompletionDate
-      || this.closeDate !== this.savedCloseDate
-      || this.achieved !== this.savedAchieved
-      || this.closeNotes !== this.savedCloseNotes;
-  }
-
-  // ************************ Public Methods *************************
-
-  // ************************ Event Handlers *************************
-
-  // *****************************************************************
-  // Saves changes to the goal via the API.
-  // *****************************************************************
-  async onSave() {
-    this.saving.set(true);
-    this.errorMessage.set(null);
-    this.successMessage.set(null);
-
-    const result = await this.studentService.updateGoal(this.studentId, this.goalId, {
-      description: this.description,
-      category: this.category,
-      baseline: this.baseline,
-      targetCompletionDate: this.targetCompletionDate,
-      closeDate: this.closeDate,
-      achieved: this.achieved,
-      closeNotes: this.closeNotes,
-    });
-
-    this.saving.set(false);
-
-    if (result.success) {
-      this.savedDescription = this.description;
-      this.savedCategory = this.category;
-      this.savedBaseline = this.baseline;
-      this.savedTargetCompletionDate = this.targetCompletionDate;
-      this.savedCloseDate = this.closeDate;
-      this.savedAchieved = this.achieved;
-      this.savedCloseNotes = this.closeNotes;
-      this.successMessage.set('Changes saved.');
-      this.studentService.notifyDataChanged();
-    } else {
-      this.errorMessage.set(result.message);
-    }
-  }
-
-  // *****************************************************************
-  // Reverts form fields to the last-saved snapshot.
-  // *****************************************************************
-  onCancel() {
-    this.description = this.savedDescription;
-    this.category = this.savedCategory;
-    this.baseline = this.savedBaseline;
-    this.targetCompletionDate = this.savedTargetCompletionDate;
-    this.closeDate = this.savedCloseDate;
-    this.achieved = this.savedAchieved;
-    this.closeNotes = this.savedCloseNotes;
-    this.errorMessage.set(null);
-    this.successMessage.set(null);
-  }
-
-  onBack() {
-    this.router.navigate(['/students', this.studentId, 'goals']);
-  }
-
-  onProgressEvents() {
-    this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'progress']);
-  }
-
-  onBenchmarks() {
-    this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'benchmarks']);
-  }
-
-  ngOnDestroy() {
-    this.paramSub.unsubscribe();
-  }
-
-  // ********************** Support Procedures ***********************
-
-  // *****************************************************************
-  // Normalizes an API date string to YYYY-MM-DD for <input type="date">.
-  // *****************************************************************
-  private toDateInput(value: string | null): string | null {
-    if (!value) return null;
-    return value.substring(0, 10);
-  }
-
-  // *****************************************************************
-  // Loads the goal by finding it in the student's goal list.
-  // *****************************************************************
-  private loadGoal() {
-    this.loaded.set(false);
-    this.studentService.getGoalsForStudent(this.studentId).then(result => {
-      if (!result.success || !result.payload) {
-        this.errorMessage.set(result.message);
-        return;
-      }
-
-      const goal = result.payload.goals.find(g => g.goalId === this.goalId);
-      if (!goal) {
-        this.errorMessage.set('Goal not found.');
-        return;
-      }
-
-      this.description = goal.description;
-      this.category = goal.category;
-      this.baseline = goal.baseline;
-      this.targetCompletionDate = this.toDateInput(goal.targetCompletionDate);
-      this.closeDate = this.toDateInput(goal.closeDate);
-      this.achieved = goal.achieved;
-      this.closeNotes = goal.closeNotes;
-      this.progressEventCount = goal.progressEventCount;
-      this.benchmarkCount = goal.benchmarkCount;
-
-      this.savedDescription = goal.description;
-      this.savedCategory = goal.category;
-      this.savedBaseline = goal.baseline;
-      this.savedTargetCompletionDate = this.toDateInput(goal.targetCompletionDate);
-      this.savedCloseDate = this.toDateInput(goal.closeDate);
-      this.savedAchieved = goal.achieved;
-      this.savedCloseNotes = goal.closeNotes;
-      this.loaded.set(true);
-    });
-  }
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html
deleted file mode 100644
index a9961a3..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="card" (click)="onCardClick()">
-    <div class="card-header">
-        <span class="card-title">Goal: {{ goal().category }}</span>
-        @if (goal().closeDate !== null) {
-            <span class="closed-badge" [class.achieved]="goal().achieved === true">
-                {{ goal().achieved === true ? 'Closed ✓' : 'Closed ✗' }}
-            </span>
-        }
-        @if (goal().targetCompletionDate) {
-            <span class="event-count">Target: {{ goal().targetCompletionDate | date:'mediumDate' }}</span>
-        } @else {
-            <span class="event-count">No target date</span>
-        }
-    </div>
-
-    <div class="card-body">
-        @if (goalNumber() > 0) {
-            <p class="description"><strong>Goal {{ goalNumber() }}:</strong> {{ goal().description }}</p>
-        } @else {
-            <p class="description">{{ goal().description }}</p>
-        }
-    </div>
-
-    <div class="card-footer">
-        <button class="footer-btn btn-green" (click)="$event.stopPropagation(); onProgressEventsClick()">Progress Events</button>
-        <button class="footer-btn btn-blue" (click)="$event.stopPropagation(); onBenchmarksClick()">Benchmarks</button>
-    </div>
-</div>
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.scss b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.scss
deleted file mode 100644
index 4d8e6bd..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-:host {
-    display: block;
-    width: 450px;
-}
-
-.card {
-    background: #fff;
-    border-radius: 8px;
-    border: 1px solid #ddd;
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    min-width: 0;
-    overflow: hidden;
-}
-
-.card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.625rem 1.25rem;
-    background: #f8f9fa;
-    border-bottom: 1px solid #ddd;
-}
-
-.card-title {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: #333;
-}
-
-.event-count {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: #333;
-}
-
-.card-body {
-    padding: 1.25rem 1.5rem;
-}
-
-.description {
-    margin: 0;
-    font-size: 0.875rem;
-    color: #555;
-    line-height: 1.5;
-    display: -webkit-box;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-.card-footer {
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-    padding: 0.5rem 1.5rem;
-    border-top: 1px solid #eee;
-}
-
-.footer-btn {
-    padding: 0.375rem 0.75rem;
-    background: transparent;
-    border: 1px solid;
-    border-radius: 6px;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    cursor: pointer;
-}
-
-.btn-green {
-    color: #16a34a;
-    border-color: #16a34a;
-}
-
-.btn-green:hover {
-    background: #f0fdf4;
-}
-
-.btn-blue {
-    color: #2563eb;
-    border-color: #2563eb;
-    margin-left: auto;
-}
-
-.btn-blue:hover {
-    background: #eff6ff;
-}
-
-.closed-badge {
-    font-size: 0.75rem;
-    font-weight: 600;
-    padding: 0.125rem 0.5rem;
-    border-radius: 4px;
-    background: #fef2f2;
-    color: #dc2626;
-    border: 1px solid #fecaca;
-}
-
-.closed-badge.achieved {
-    background: #f0fdf4;
-    color: #16a34a;
-    border-color: #bbf7d0;
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts
deleted file mode 100644
index eb8d2d3..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Component, inject, input } from '@angular/core';
-import { DatePipe } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
-import { StudentGoalItem } from '../../../shared/classes/student-goal';
-
-@Component({
-    selector: 'app-goal-card',
-    imports: [DatePipe],
-    templateUrl: './goal-card.html',
-    styleUrl: './goal-card.scss',
-})
-export class GoalCard {
-
-    // ************************** Constructor **************************
-
-    // ************************** Declarations *************************
-
-    private readonly router = inject(Router);
-    private readonly route = inject(ActivatedRoute);
-
-    readonly goal = input.required<StudentGoalItem>();
-    readonly goalNumber = input<number>(0);
-
-    // ************************** Properties ***************************
-
-    // ************************ Public Methods *************************
-
-    // ************************ Event Handlers *************************
-
-    // *****************************************************************
-    // Navigates to the goal detail page.
-    // *****************************************************************
-    onCardClick() {
-        const studentId = this.route.snapshot.paramMap.get('studentId')!;
-        this.router.navigate(['/students', studentId, 'goals', this.goal().goalId]);
-    }
-
-    // *****************************************************************
-    // Navigates to the benchmarks page for this goal.
-    // *****************************************************************
-    onBenchmarksClick() {
-        const studentId = this.route.snapshot.paramMap.get('studentId')!;
-        this.router.navigate(['/students', studentId, 'goals', this.goal().goalId, 'benchmarks']);
-    }
-
-    // *****************************************************************
-    // Navigates to the progress events page for this goal.
-    // *****************************************************************
-    onProgressEventsClick() {
-        const studentId = this.route.snapshot.paramMap.get('studentId')!;
-        this.router.navigate(['/students', studentId, 'goals', this.goal().goalId, 'progress']);
-    }
-
-    // ********************** Support Procedures ***********************
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html b/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html
deleted file mode 100644
index 0c64896..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="toolbar">
-    <button class="toolbar-btn back-btn" (click)="onBack()">&#8593; Student</button>
-    <span class="toolbar-title">Goals</span>
-    <span class="spacer"></span>
-    <button class="toolbar-btn" (click)="onAddGoal()">+ Add a Goal</button>
-</div>
-
-<!-- <img class="hero-image" src="/hurdlescropped.png" alt="Hurdles" /> -->
-
-
-@if (studentIdentifier()) {
-<h2 class="section-header">Student: {{ studentIdentifier() }}</h2>
-}
-
-@if (showAddModal()) {
-<app-add-goal-modal [studentId]="studentId" [existingGoals]="goals()" [nextIepDate]="nextIepDate()" (goalCreated)="onGoalCreated($event)"
-    (cancelled)="onModalCancelled()" />
-}
-
-@if (errorMessage()) {
-<p class="error">{{ errorMessage() }}</p>
-}
-
-@if (goals().length === 0 && !errorMessage()) {
-<div class="empty-state">
-    <p>No goals yet.</p>
-    <p>Click <strong>+ Add a Goal</strong> in the upper right to get started.</p>
-</div>
-} @else {
-<div class="card-grid">
-    @for (goal of goals(); track goal.goalId; let i = $index) {
-    <app-goal-card [goal]="goal" [goalNumber]="i + 1" />
-    }
-</div>
-}
-
-<footer class="goal-footer">
-    <span class="spacer"></span>
-    <button class="toolbar-btn"> ⭐ Generate progress report</button>
-</footer>
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.scss b/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.scss
deleted file mode 100644
index ed009bf..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-:host {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-
-.toolbar {
-    display: flex;
-    align-items: center;
-    position: relative;
-    gap: 0.75rem;
-    height: 40px;
-    padding-right: 0.5rem;
-    border-radius: 8px;
-    background: #fff;
-    border-bottom: 1px solid #ddd;
-    margin-bottom: 1rem;
-    flex-shrink: 0;
-    cursor: pointer;
-}
-
-.toolbar-btn {
-    padding: 0.375rem 0.75rem;
-    background: transparent;
-    color: #4f46e5;
-    border: 1px solid #4f46e5;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-}
-
-.toolbar-btn:hover {
-    background: #eef2ff;
-}
-
-.back-btn {
-    margin-left: 0.5rem;
-}
-
-.toolbar-title {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    font-weight: 600;
-    font-size: 1.25rem;
-    color: #333;
-}
-
-.section-header {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: #333;
-    margin: 0 0 1.25rem;
-}
-
-.spacer {
-    flex: 1;
-}
-
-.error {
-    font-size: 0.875rem;
-    color: #dc2626;
-    margin: 0 0 1rem;
-}
-
-.empty-state {
-    text-align: center;
-    padding: 3rem 1.5rem;
-    color: #555;
-    font-size: 0.9375rem;
-    background: #fff;
-    border-radius: 8px;
-    border: 1px solid #ddd;
-}
-
-.card-grid {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: start;
-    gap: 1rem;
-    overflow-y: auto;
-    flex: 1;
-}
-
-.goal-footer {
-    display: flex;
-    align-items: center;
-    padding: 0 1rem;
-    height: 48px;
-    background: #fff;
-    border-top: 1px solid #ddd;
-    flex-shrink: 0;
-    margin-top: auto;
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.ts b/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.ts
deleted file mode 100644
index ef7989b..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Component, inject, signal, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { StudentGoalItem } from '../../../shared/classes/student-goal';
-import { StudentService } from '../../../shared/services/student.service';
-import { GoalCard } from '../goal-card/goal-card';
-import { AddGoalModal } from '../add-goal-modal/add-goal-modal';
-
-@Component({
-    selector: 'app-goal-list',
-    imports: [GoalCard, AddGoalModal],
-    templateUrl: './goal-list.html',
-    styleUrl: './goal-list.scss',
-})
-export class GoalList implements OnDestroy {
-
-    // ************************** Constructor **************************
-
-    constructor() {
-        this.paramSub = this.route.paramMap.subscribe(params => {
-            this.studentId = params.get('studentId')!;
-            this.loadGoals();
-        });
-    }
-
-    // ************************** Declarations *************************
-
-    private readonly studentService = inject(StudentService);
-    private readonly route = inject(ActivatedRoute);
-    private readonly router = inject(Router);
-    private readonly paramSub: Subscription;
-
-    protected studentId!: string;
-    protected readonly studentIdentifier = signal<string | null>(null);
-    protected readonly nextIepDate = signal<string | null>(null);
-    protected readonly goals = signal<StudentGoalItem[]>([]);
-    protected readonly showAddModal = signal(false);
-    protected readonly errorMessage = signal<string | null>(null);
-
-    // ************************** Properties ***************************
-
-    // ************************ Public Methods *************************
-
-    // ************************ Event Handlers *************************
-
-    onAddGoal() {
-        this.showAddModal.set(true);
-    }
-
-    onGoalCreated(goal: StudentGoalItem) {
-        this.goals.update(list => [...list, goal]);
-        this.showAddModal.set(false);
-        this.studentService.notifyDataChanged();
-        this.router.navigate(['/students', this.studentId, 'goals', goal.goalId]);
-    }
-
-    onModalCancelled() {
-        this.showAddModal.set(false);
-    }
-
-    onBack() {
-        this.router.navigate(['/students', this.studentId]);
-    }
-
-    ngOnDestroy() {
-        this.paramSub.unsubscribe();
-    }
-
-    // ********************** Support Procedures ***********************
-
-    // *****************************************************************
-    // Loads goals for the student from the service.
-    // *****************************************************************
-    private loadGoals() {
-        this.studentService.getStudentById(this.studentId).then(studentResult => {
-            if (studentResult.success && studentResult.payload) {
-                const iep = studentResult.payload.nextIepDate;
-                this.nextIepDate.set(iep ? String(iep).substring(0, 10) : null);
-            }
-        });
-
-        this.studentService.getGoalsForStudent(this.studentId).then(data => {
-            if (!data.success) {
-                this.errorMessage.set(data.message);
-            } else {
-                this.studentIdentifier.set(data.payload?.studentIdentifier ?? null);
-                this.goals.set(data.payload?.goals ?? []);
-            }
-        });
-    }
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.html b/ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.html
deleted file mode 100644
index 3dad196..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<div class="toolbar">
-    <button class="toolbar-btn back-btn" (click)="onBack()">&#8593; Progress Events</button>
-    <span class="toolbar-title">{{ isNew() ? 'New Progress Event' : 'Edit Progress Event' }}</span>
-    <span class="spacer"></span>
-</div>
-
-@if (errorMessage()) {
-<p class="error">{{ errorMessage() }}</p>
-}
-
-@if (loaded()) {
-<div class="detail-card">
-    <div class="field">
-        <span class="field-label">Goal: {{ goalCategory }}</span>
-    </div>
-    <div class="field">
-        <label class="field-label" for="content">Notes</label>
-        <textarea id="content" class="field-input field-textarea" [(ngModel)]="content" rows="5"
-            placeholder="Enter progress event notes..."></textarea>
-    </div>
-
-    @if (benchmarkItems().length > 0) {
-    <div class="field">
-        <span class="field-label">Associated Benchmarks</span>
-        <div class="benchmark-checks">
-            @for (bm of benchmarkItems(); track bm.benchmarkId) {
-            <label class="check-item">
-                <input type="checkbox" [checked]="bm.checked" (change)="onToggleBenchmark(bm.benchmarkId)" />
-                {{ bm.label }}
-            </label>
-            }
-        </div>
-    </div>
-    }
-
-    @if (!isNew()) {
-    <div class="metadata">
-        @if (createdByName) {
-        <span class="meta-item">Created by: {{ createdByName }}</span>
-        }
-        @if (createdAt) {
-        <span class="meta-item">Created: {{ createdAt | date:'medium' }}</span>
-        }
-    </div>
-    }
-    <div class="actions">
-        <button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
-        <button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
-            {{ saving() ? 'Saving...' : 'Save' }}
-        </button>
-    </div>
-</div>
-}
-
-@if (successMessage()) {
-<p class="success">{{ successMessage() }}</p>
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.scss b/ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.scss
deleted file mode 100644
index a8a391d..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-:host {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.toolbar {
-    display: flex;
-    align-items: center;
-    position: relative;
-    gap: 0.75rem;
-    height: 40px;
-    padding-right: 0.5rem;
-    border-radius: 8px;
-    background: #fff;
-    border-bottom: 1px solid #ddd;
-    margin-bottom: 1rem;
-    flex-shrink: 0;
-}
-
-.toolbar-btn {
-    padding: 0.375rem 0.75rem;
-    background: transparent;
-    color: #4f46e5;
-    border: 1px solid #4f46e5;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-}
-
-.toolbar-btn:hover {
-    background: #eef2ff;
-}
-
-.toolbar-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.back-btn {
-    margin-left: 0.5rem;
-}
-
-.toolbar-title {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    font-weight: 600;
-    font-size: 1.25rem;
-    color: #333;
-}
-
-.spacer {
-    flex: 1;
-}
-
-.error {
-    font-size: 0.875rem;
-    color: #dc2626;
-    margin: 0 0 1rem;
-}
-
-.success {
-    font-size: 0.875rem;
-    color: #16a34a;
-    margin: 0 0 1rem;
-}
-
-.detail-card {
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 1.5rem;
-    max-width: 600px;
-}
-
-.field {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-}
-
-.field-label {
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-    margin-bottom: 0.25rem;
-}
-
-.field-input {
-    padding: 0.375rem 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 0.9375rem;
-    outline: none;
-}
-
-.field-input:focus {
-    border-color: #4f46e5;
-}
-
-.field-textarea {
-    font-family: inherit;
-    resize: vertical;
-    min-height: 5rem;
-}
-
-.benchmark-checks {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    margin-top: 0.25rem;
-}
-
-.check-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.9375rem;
-    color: #333;
-    cursor: pointer;
-}
-
-.check-item input[type="checkbox"] {
-    width: 1rem;
-    height: 1rem;
-    accent-color: #4f46e5;
-}
-
-.metadata {
-    display: flex;
-    gap: 1.5rem;
-    margin-bottom: 1rem;
-}
-
-.meta-item {
-    font-size: 0.8125rem;
-    color: #888;
-}
-
-.actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-}
-
-.actions .toolbar-btn {
-    min-width: 6rem;
-}
-
-.save-btn {
-    background: #4f46e5;
-    color: #fff;
-    border-color: #4f46e5;
-}
-
-.save-btn:hover {
-    background: #4338ca;
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.spec.ts b/ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.spec.ts
deleted file mode 100644
index 57b2089..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProgressEdit } from './progress-edit';
-
-describe('ProgressEdit', () => {
-  let component: ProgressEdit;
-  let fixture: ComponentFixture<ProgressEdit>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ProgressEdit]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ProgressEdit);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.ts b/ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.ts
deleted file mode 100644
index 3ad8691..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/progress-edit/progress-edit.ts
+++ /dev/null
@@ -1,228 +0,0 @@
-import { Component, inject, signal, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-import { DatePipe } from '@angular/common';
-import { Subscription } from 'rxjs';
-import { StudentService } from '../../../shared/services/student.service';
-import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
-
-interface BenchmarkCheckItem {
-  benchmarkId: string;
-  label: string;
-  checked: boolean;
-}
-
-@Component({
-  selector: 'app-progress-edit',
-  imports: [FormsModule, DatePipe],
-  templateUrl: './progress-edit.html',
-  styleUrl: './progress-edit.scss',
-})
-export class ProgressEdit implements OnDestroy {
-
-  // ************************** Constructor **************************
-
-  constructor() {
-    this.paramSub = this.route.paramMap.subscribe(params => {
-      this.studentId = params.get('studentId')!;
-      this.goalId = params.get('goalId')!;
-      this.progressEventId = params.get('progressEventId') ?? null;
-      this.loadData();
-    });
-  }
-
-  // ************************** Declarations *************************
-
-  private readonly studentService = inject(StudentService);
-  private readonly route = inject(ActivatedRoute);
-  private readonly router = inject(Router);
-  private readonly paramSub: Subscription;
-
-  private studentId!: string;
-  private goalId!: string;
-  private progressEventId: string | null = null;
-
-  protected readonly loaded = signal(false);
-  protected readonly isNew = signal(false);
-  protected readonly errorMessage = signal<string | null>(null);
-  protected readonly successMessage = signal<string | null>(null);
-  protected readonly saving = signal(false);
-
-  // Form fields
-  protected content = '';
-  private savedContent = '';
-
-  // Benchmark checkboxes
-  protected benchmarkItems = signal<BenchmarkCheckItem[]>([]);
-  private savedBenchmarkSelections: Set<string> = new Set();
-
-  // Read-only metadata
-  protected goalCategory = '';
-  protected createdByName = '';
-  protected createdAt: Date | null = null;
-
-  // ************************** Properties ***************************
-
-  // *****************************************************************
-  // Returns true if the form has unsaved changes.
-  // *****************************************************************
-  hasChanges(): boolean {
-    if (this.content !== this.savedContent) return true;
-    const current = new Set(this.benchmarkItems().filter(b => b.checked).map(b => b.benchmarkId));
-    if (current.size !== this.savedBenchmarkSelections.size) return true;
-    for (const id of current) {
-      if (!this.savedBenchmarkSelections.has(id)) return true;
-    }
-    return false;
-  }
-
-  // ************************ Public Methods *************************
-
-  // ************************ Event Handlers *************************
-
-  // *****************************************************************
-  // Saves the progress event (create or update) and any benchmark
-  // associations based on the checked checkboxes.
-  // *****************************************************************
-  async onSave() {
-    this.saving.set(true);
-    this.errorMessage.set(null);
-    this.successMessage.set(null);
-
-    const checkedIds = this.benchmarkItems()
-      .filter(b => b.checked)
-      .map(b => b.benchmarkId);
-
-    if (this.isNew()) {
-      const result = await this.studentService.addProgressEvent(
-        this.studentId, this.goalId, this.content.trim(),
-        checkedIds.length > 0 ? checkedIds : undefined
-      );
-      this.saving.set(false);
-      if (result.success) {
-        this.successMessage.set('Progress event created.');
-        this.savedContent = this.content;
-        this.savedBenchmarkSelections = new Set(checkedIds);
-        this.studentService.notifyDataChanged();
-        if (result.payload?.progressEventId) {
-          this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'progress', result.payload.progressEventId]);
-        }
-      } else {
-        this.errorMessage.set(result.message);
-      }
-    } else {
-      const result = await this.studentService.updateProgressEvent(
-        this.studentId, this.progressEventId!, this.content.trim(), checkedIds
-      );
-      this.saving.set(false);
-      if (result.success) {
-        this.savedContent = this.content;
-        this.savedBenchmarkSelections = new Set(checkedIds);
-        this.successMessage.set('Changes saved.');
-      } else {
-        this.errorMessage.set(result.message);
-      }
-    }
-  }
-
-  // *****************************************************************
-  // Reverts the form to the last-saved state.
-  // *****************************************************************
-  onCancel() {
-    this.content = this.savedContent;
-    this.benchmarkItems.update(items =>
-      items.map(b => ({ ...b, checked: this.savedBenchmarkSelections.has(b.benchmarkId) }))
-    );
-    this.errorMessage.set(null);
-    this.successMessage.set(null);
-  }
-
-  onBack() {
-    this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'progress']);
-  }
-
-  // *****************************************************************
-  // Toggles a benchmark checkbox.
-  // *****************************************************************
-  onToggleBenchmark(benchmarkId: string) {
-    this.benchmarkItems.update(items =>
-      items.map(b => b.benchmarkId === benchmarkId ? { ...b, checked: !b.checked } : b)
-    );
-  }
-
-  ngOnDestroy() {
-    this.paramSub.unsubscribe();
-  }
-
-  // ********************** Support Procedures ***********************
-
-  // *****************************************************************
-  // Loads all data needed for the form: goal category, benchmarks,
-  // and (for edit mode) the existing event content + associations.
-  // *****************************************************************
-  private async loadData() {
-    this.loaded.set(false);
-
-    // Load goal category
-    const goalsResult = await this.studentService.getGoalsForStudent(this.studentId);
-    if (goalsResult.success && goalsResult.payload) {
-      const goal = goalsResult.payload.goals.find(g => g.goalId === this.goalId);
-      this.goalCategory = goal?.category ?? '';
-    }
-
-    // Load benchmarks for this goal
-    const bmResult = await this.studentService.getBenchmarksForStudent(this.studentId);
-    const goalBenchmarks = (bmResult.success && bmResult.payload)
-      ? bmResult.payload.benchmarks.filter(b => b.goalId === this.goalId)
-      : [];
-
-    if (!this.progressEventId) {
-      // New event mode
-      this.isNew.set(true);
-      this.content = '';
-      this.savedContent = '';
-      this.savedBenchmarkSelections = new Set();
-      this.benchmarkItems.set(goalBenchmarks.map(b => ({
-        benchmarkId: b.benchmarkId,
-        label: b.shortName || b.benchmark,
-        checked: false,
-      })));
-      this.loaded.set(true);
-      return;
-    }
-
-    // Edit mode — load existing event
-    this.isNew.set(false);
-    const eventsResult = await this.studentService.getProgressEventsForGoal(this.goalId);
-    if (!eventsResult.success || !eventsResult.payload) {
-      this.errorMessage.set(eventsResult.message);
-      this.loaded.set(true);
-      return;
-    }
-
-    const event = eventsResult.payload.find(e => e.progressEventId === this.progressEventId);
-    if (!event) {
-      this.errorMessage.set('Progress event not found.');
-      this.loaded.set(true);
-      return;
-    }
-
-    this.content = event.content;
-    this.savedContent = event.content;
-    this.createdByName = event.createdByName;
-    this.createdAt = event.createdAt;
-
-    // Load existing benchmark associations
-    const assocResult = await this.studentService.getProgressEventBenchmarks(this.progressEventId!);
-    const associatedIds = new Set(assocResult.success && assocResult.payload ? assocResult.payload : []);
-    this.savedBenchmarkSelections = new Set(associatedIds);
-
-    this.benchmarkItems.set(goalBenchmarks.map(b => ({
-      benchmarkId: b.benchmarkId,
-      label: b.shortName || b.benchmark,
-      checked: associatedIds.has(b.benchmarkId),
-    })));
-
-    this.loaded.set(true);
-  }
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.html b/ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.html
deleted file mode 100644
index 1ae849b..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="card">
-    <p class="content">{{ event().content }}</p>
-    <div class="action-icons">
-        <button class="edit-btn" (click)="onEdit()">Edit</button>
-        <!-- <button class="icon-btn" title="Delete">&#128465;</button> -->
-    </div>
-    <span class="author">{{ event().createdByName }}</span>
-    <span class="date">{{ event().createdAt | date:'MMM d, y' }}</span>
-</div>
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.scss b/ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.scss
deleted file mode 100644
index 79e61a6..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-:host {
-    display: block;
-}
-
-.card {
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-    padding: 1.25rem 1.5rem;
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: auto auto;
-    gap: 0.75rem 1rem;
-}
-
-.content {
-    grid-column: 1;
-    grid-row: 1;
-    margin: 0;
-    font-size: 0.9375rem;
-    color: #333;
-    line-height: 1.6;
-}
-
-.action-icons {
-    grid-column: 2;
-    grid-row: 1;
-    display: flex;
-    gap: 0.5rem;
-    align-self: start;
-    justify-content: flex-end;
-}
-
-.author {
-    grid-column: 1;
-    grid-row: 2;
-    font-size: 0.8125rem;
-    font-weight: 600;
-    color: #888;
-}
-
-.date {
-    grid-column: 2;
-    grid-row: 2;
-    font-size: 0.8125rem;
-    color: #888;
-    text-align: right;
-}
-
-.edit-btn {
-    padding: 0.25rem 0.625rem;
-    background: transparent;
-    color: #4f46e5;
-    border: 1px solid #4f46e5;
-    border-radius: 6px;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    cursor: pointer;
-}
-
-.edit-btn:hover {
-    background: #eef2ff;
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.spec.ts b/ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.spec.ts
deleted file mode 100644
index 6fe4032..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProgressItem } from './progress-item';
-
-describe('ProgressItem', () => {
-  let component: ProgressItem;
-  let fixture: ComponentFixture<ProgressItem>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ProgressItem]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ProgressItem);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.ts b/ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.ts
deleted file mode 100644
index 5ab52cc..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/progress-item/progress-item.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component, inject, input } from '@angular/core';
-import { DatePipe } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
-
-@Component({
-  selector: 'app-progress-item',
-  imports: [DatePipe],
-  templateUrl: './progress-item.html',
-  styleUrl: './progress-item.scss',
-})
-export class ProgressItem {
-
-  // ************************** Constructor **************************
-
-  // ************************** Declarations *************************
-
-  private readonly router = inject(Router);
-  private readonly route = inject(ActivatedRoute);
-  readonly event = input.required<ProgressEventDto>();
-
-  // ************************** Properties ***************************
-
-  // ************************ Public Methods *************************
-
-  // ************************ Event Handlers *************************
-
-  onEdit() {
-    this.router.navigate([this.event().progressEventId], { relativeTo: this.route });
-  }
-
-  // ********************** Support Procedures ***********************
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.html b/ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.html
deleted file mode 100644
index d390b0a..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="toolbar">
-    <button class="toolbar-btn back-btn" (click)="onBack()">&#8593; Goal</button>
-    <span class="toolbar-title">Progress Events</span>
-    <span class="spacer"></span>
-    <button class="toolbar-btn" (click)="onAddProgressEvent()">+ Add Progress Event</button>
-</div>
-
-<!-- <img class="hero-image" src="/slalomcropped.png" alt="Slalom" /> -->
-
-@if (studentIdentifier() && goalCategory()) {
-<div class="header-row">
-    <h2 class="section-header">
-        Student: {{ studentIdentifier() }} &nbsp;&nbsp; Goal: {{ goalCategory() }}
-        @if (isFiltered()) {
-        <span class="filter-count">(showing {{ filteredEvents().length }} of {{ events().length }})</span>
-        }
-    </h2>
-    <div class="search-box">
-        <input type="text" class="search-input" placeholder="Search..." [value]="rawSearchText()"
-            (input)="onSearchInput($any($event.target).value)" />
-        @if (rawSearchText()) {
-        <button class="clear-btn" (click)="onClearSearch()">&times;</button>
-        }
-    </div>
-</div>
-}
-
-@if (errorMessage()) {
-<p class="error">{{ errorMessage() }}</p>
-}
-
-@if (filteredEvents().length === 0 && !errorMessage()) {
-<p class="empty-state">No progress events recorded yet. Click <strong>+ Add Progress Event</strong> to get started.</p>
-} @else {
-<div class="event-list">
-    @for (evt of filteredEvents(); track evt.progressEventId) {
-    <app-progress-item [event]="evt" />
-    }
-</div>
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.scss b/ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.scss
deleted file mode 100644
index 7217a4b..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-:host {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.hero-image {
-    max-width: 50%;
-    max-height: 100px;
-    object-fit: contain;
-    margin-bottom: 1rem;
-    flex-shrink: 0;
-    align-self: flex-start;
-}
-
-.toolbar {
-    display: flex;
-    align-items: center;
-    position: relative;
-    gap: 0.75rem;
-    height: 40px;
-    padding-right: 0.5rem;
-    border-radius: 8px;
-    background: #fff;
-    border-bottom: 1px solid #ddd;
-    margin-bottom: 1rem;
-    flex-shrink: 0;
-}
-
-.toolbar-title {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    font-weight: 600;
-    font-size: 1.25rem;
-    color: #333;
-}
-
-.spacer {
-    flex: 1;
-}
-
-.toolbar-btn {
-    padding: 0.375rem 0.75rem;
-    background: transparent;
-    color: #4f46e5;
-    border: 1px solid #4f46e5;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-}
-
-.toolbar-btn:hover {
-    background: #eef2ff;
-}
-
-.back-btn {
-    margin-left: 0.5rem;
-}
-
-.header-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 1rem;
-    padding-right: calc(0.75rem + 17px);
-    flex-shrink: 0;
-}
-
-.section-header {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: #333;
-    margin: 0;
-}
-
-.filter-count {
-    font-weight: 400;
-    color: #888;
-}
-
-.search-box {
-    position: relative;
-}
-
-.search-input {
-    padding: 0.375rem 2rem 0.375rem 0.75rem;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    width: 200px;
-    outline: none;
-}
-
-.search-input:focus {
-    border-color: #4f46e5;
-}
-
-.clear-btn {
-    position: absolute;
-    right: 0.375rem;
-    top: 50%;
-    transform: translateY(-50%);
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 1.125rem;
-    color: #888;
-    line-height: 1;
-    padding: 0 0.125rem;
-}
-
-.clear-btn:hover {
-    color: #333;
-}
-
-.error {
-    font-size: 0.875rem;
-    color: #dc2626;
-    margin: 0 0 1rem;
-}
-
-.empty-state {
-    color: #888;
-    font-size: 0.9375rem;
-    margin: 2rem auto;
-    text-align: center;
-}
-
-.event-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    overflow-y: auto;
-    scrollbar-gutter: stable;
-    flex: 1;
-    padding-right: 0.75rem;
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.spec.ts b/ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.spec.ts
deleted file mode 100644
index f6d6a62..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProgressList } from './progress-list';
-
-describe('ProgressList', () => {
-  let component: ProgressList;
-  let fixture: ComponentFixture<ProgressList>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ProgressList]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ProgressList);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.ts b/ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.ts
deleted file mode 100644
index d2fa4a0..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/progress-list/progress-list.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Component, computed, inject, signal, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Subject } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
-import { ProgressItem } from '../progress-item/progress-item';
-import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
-import { StudentService } from '../../../shared/services/student.service';
-
-@Component({
-  selector: 'app-progress-list',
-  imports: [ProgressItem],
-  templateUrl: './progress-list.html',
-  styleUrl: './progress-list.scss',
-})
-export class ProgressList implements OnDestroy {
-
-  // ************************** Constructor **************************
-
-  constructor() {
-    this.studentId = this.route.snapshot.paramMap.get('studentId')!;
-    this.goalId = this.route.snapshot.paramMap.get('goalId')!;
-    this.loadEvents();
-    this.loadGoalCategory();
-
-    this.searchInput$.pipe(debounceTime(300)).subscribe(term => {
-      this.searchTerm.set(term);
-    });
-  }
-
-  // ************************** Declarations *************************
-
-  private readonly studentService = inject(StudentService);
-  private readonly route = inject(ActivatedRoute);
-  private readonly router = inject(Router);
-
-  private readonly studentId: string;
-  private readonly goalId: string;
-  private readonly searchInput$ = new Subject<string>();
-
-  protected readonly studentIdentifier = signal<string | null>(null);
-  protected readonly goalCategory = signal<string | null>(null);
-  protected readonly events = signal<ProgressEventDto[]>([]);
-  protected readonly errorMessage = signal<string | null>(null);
-  protected readonly rawSearchText = signal('');
-  protected readonly searchTerm = signal('');
-  protected readonly showAddModal = signal(false);
-
-  // ************************** Properties ***************************
-
-  // *****************************************************************
-  // Returns events filtered by the debounced search term. Matches
-  // against the event content (case-insensitive). Only filters when
-  // the term is at least 2 characters.
-  // *****************************************************************
-  protected readonly filteredEvents = computed(() => {
-    const term = this.searchTerm().trim().toLowerCase();
-    if (term.length < 2) return this.events();
-    return this.events().filter(e => e.content.toLowerCase().includes(term));
-  });
-
-  protected readonly isFiltered = computed(() => {
-    return this.searchTerm().trim().length >= 2 && this.filteredEvents().length !== this.events().length;
-  });
-
-  // ************************ Public Methods *************************
-
-  // ************************ Event Handlers *************************
-
-  onAddProgressEvent() {
-    this.router.navigate(['/students', this.studentId, 'goals', this.goalId, 'progress', 'new']);
-  }
-
-  // *****************************************************************
-  // Navigates back to the parent goal detail.
-  // *****************************************************************
-  onBack() {
-    this.router.navigate(['/students', this.studentId, 'goals', this.goalId]);
-  }
-
-  // *****************************************************************
-  // Pushes the raw input value into the debounce stream.
-  // *****************************************************************
-  onSearchInput(value: string) {
-    this.rawSearchText.set(value);
-    this.searchInput$.next(value);
-  }
-
-  // *****************************************************************
-  // Clears the search box and resets the filter.
-  // *****************************************************************
-  onClearSearch() {
-    this.rawSearchText.set('');
-    this.searchTerm.set('');
-  }
-
-  ngOnDestroy() {
-    this.searchInput$.complete();
-  }
-
-  // ********************** Support Procedures ***********************
-
-  // *****************************************************************
-  // Loads progress events for the given goal from the API, sorted
-  // newest-first by createdAt.
-  // *****************************************************************
-  private loadEvents() {
-    this.studentService.getProgressEventsForGoal(this.goalId).then(result => {
-      if (!result.success) {
-        this.errorMessage.set(result.message);
-      } else {
-        const sorted = (result.payload ?? [])
-          .slice()
-          .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-        this.events.set(sorted);
-      }
-    });
-  }
-
-  // *****************************************************************
-  // Loads the goal category from the student's goal list so the heading
-  // can display "Progress for <goal category>".
-  // *****************************************************************
-  private loadGoalCategory() {
-    this.studentService.getGoalsForStudent(this.studentId).then(result => {
-      if (!result.success || !result.payload) return;
-      this.studentIdentifier.set(result.payload.studentIdentifier);
-      const goal = result.payload.goals.find(g => g.goalId === this.goalId);
-      this.goalCategory.set(goal?.category ?? null);
-    });
-  }
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.html b/ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.html
deleted file mode 100644
index b87834e..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.html
+++ /dev/null
@@ -1,20 +0,0 @@
-@for (node of nodes(); track node.label) {
-<div class="node-row" [style.padding-left]="indent()">
-    @if (hasToggle(node)) {
-    <span class="toggle-indicator" (click)="onToggle(node, $event)">{{ node.expanded ? '−' : '+' }}</span>
-    } @else {
-    <span class="toggle-placeholder"></span>
-    }
-    @if (node.routerLink) {
-    <a class="node-label" [routerLink]="node.routerLink" routerLinkActive="active"
-        [routerLinkActiveOptions]="{ exact: true }">{{ node.label }}</a>
-    } @else if (hasToggle(node)) {
-    <span class="node-label clickable" (click)="onToggle(node, $event)">{{ node.label }}</span>
-    } @else {
-    <span class="node-label">{{ node.label }}</span>
-    }
-</div>
-@if (node.expanded && node.children) {
-<app-sidebar-tree-node [nodes]="node.children" [depth]="depth() + 1" />
-}
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.scss b/ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.scss
deleted file mode 100644
index 4c64f52..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-:host {
-    display: contents;
-}
-
-.node-row {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.5rem 1rem;
-    min-height: 1.75rem;
-}
-
-.node-row:hover {
-    background: #f5f5f5;
-}
-
-.node-row:has(.node-label.active) {
-    background: #e5e5e5;
-}
-
-.toggle-indicator {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1rem;
-    height: 1rem;
-    border: 1px solid #aaa;
-    border-radius: 2px;
-    font-size: 0.75rem;
-    line-height: 1;
-    color: #555;
-    cursor: pointer;
-    user-select: none;
-    flex-shrink: 0;
-}
-
-.toggle-placeholder {
-    width: calc(1rem + 2px);
-    flex-shrink: 0;
-}
-
-.node-label {
-    flex: 1;
-    font-size: 0.8125rem;
-    color: #333;
-    text-decoration: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.node-label.clickable {
-    cursor: pointer;
-    user-select: none;
-}
-
-.node-label.active {
-    font-weight: 600;
-    color: #4f46e5;
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.ts b/ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.ts
deleted file mode 100644
index c198f64..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/sidebar-tree-node/sidebar-tree-node.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Component, input } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { SidebarNode } from '../../../shared/classes/sidebar-node';
-
-@Component({
-    selector: 'app-sidebar-tree-node',
-    imports: [RouterLink, RouterLinkActive, SidebarTreeNode],
-    templateUrl: './sidebar-tree-node.html',
-    styleUrl: './sidebar-tree-node.scss',
-})
-export class SidebarTreeNode {
-
-    // ************************** Constructor **************************
-
-    // ************************** Declarations *************************
-
-    readonly nodes = input.required<SidebarNode[]>();
-    readonly depth = input<number>(0);
-
-    // ************************** Properties ***************************
-
-    // *****************************************************************
-    // Computed indentation in rem based on depth.
-    // *****************************************************************
-    indent(): string {
-        return (1 + this.depth() * 1.5) + 'rem';
-    }
-
-    // ************************ Public Methods *************************
-
-    // *****************************************************************
-    // Returns true if a node should show the +/- toggle.
-    // A node is expandable if it has static children, or has a
-    // loadChildren function with a non-zero childCount.
-    // *****************************************************************
-    hasToggle(node: SidebarNode): boolean {
-        if (node.children && node.children.length > 0) return true;
-        if (node.loadChildren && node.childCount !== 0) return true;
-        return false;
-    }
-
-    // ************************ Event Handlers *************************
-
-    // *****************************************************************
-    // Toggles a node's expanded state. On first expand of a lazy node,
-    // calls loadChildren and caches the result in node.children.
-    // *****************************************************************
-    async onToggle(node: SidebarNode, event: Event) {
-        if (!this.hasToggle(node)) return;
-
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (node.expanded) {
-            node.expanded = false;
-            return;
-        }
-
-        if (node.loadChildren && !node.children) {
-            node.children = await node.loadChildren();
-        }
-
-        node.expanded = true;
-    }
-
-    // ********************** Support Procedures ***********************
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.html b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.html
deleted file mode 100644
index a782ef2..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="toolbar">
-    <button class="toolbar-btn back-btn" (click)="onBack()">&#8593; Students</button>
-    <span class="toolbar-title">Student Detail</span>
-    <span class="spacer"></span>
-</div>
-
-@if (errorMessage()) {
-<p class="error">{{ errorMessage() }}</p>
-}
-
-
-
-@if (loaded()) {
-<div class="detail-card">
-    <div class="detail-card-header">
-        <span class="detail-card-title">Student</span>
-    </div>
-
-    <div class="detail-card-body">
-        <div class="field">
-            <label class="field-label" for="identifier">Name</label>
-            <input id="identifier" class="field-input" type="text" [(ngModel)]="identifier" />
-        </div>
-        <div class="field">
-            <label class="field-label" for="nextIepDate">Next IEP Date</label>
-            <input id="nextIepDate" class="field-input" type="date" [(ngModel)]="nextIepDate" />
-        </div>
-
-        <div class="actions">
-            <button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
-            <button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
-                {{ saving() ? 'Saving...' : 'Save' }}
-            </button>
-        </div>
-    </div>
-
-    <div class="card-footer">
-        <button class="footer-btn btn-dark-green" (click)="onGoals()">Goals</button>
-        <span class="spacer"></span>
-        @if (successMessage()) {
-        <span class="success-label" [class.fade-out]="fading()">{{ successMessage() }}</span>
-        }
-    </div>
-</div>
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.scss b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.scss
deleted file mode 100644
index cc2b750..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.scss
+++ /dev/null
@@ -1,180 +0,0 @@
-:host {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.toolbar {
-    display: flex;
-    align-items: center;
-    position: relative;
-    gap: 0.75rem;
-    height: 40px;
-    padding-right: 0.5rem;
-    border-radius: 8px;
-    background: #fff;
-    border-bottom: 1px solid #ddd;
-    margin-bottom: 1rem;
-    flex-shrink: 0;
-}
-
-.toolbar-btn {
-    padding: 0.375rem 0.75rem;
-    background: transparent;
-    color: #4f46e5;
-    border: 1px solid #4f46e5;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-}
-
-.toolbar-btn:hover {
-    background: #eef2ff;
-}
-
-.toolbar-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.back-btn {
-    margin-left: 0.5rem;
-}
-
-.toolbar-title {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    font-weight: 600;
-    font-size: 1.25rem;
-    color: #333;
-}
-
-.spacer {
-    flex: 1;
-}
-
-.error {
-    font-size: 0.875rem;
-    color: #dc2626;
-    margin: 0 0 1rem;
-}
-
-
-
-.detail-card {
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    max-width: 480px;
-    overflow: hidden;
-}
-
-.detail-card-header {
-    display: flex;
-    align-items: center;
-    padding: 0.625rem 1.25rem;
-    background: #f8f9fa;
-    border-bottom: 1px solid #ddd;
-}
-
-.detail-card-title {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: #333;
-}
-
-.detail-card-body {
-    padding: 1.5rem;
-}
-
-.field {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-}
-
-.field-label {
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-    margin-bottom: 0.25rem;
-}
-
-.field-value {
-    font-size: 0.9375rem;
-    color: #333;
-}
-
-.field-input {
-    padding: 0.375rem 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 0.9375rem;
-    outline: none;
-}
-
-.field-input:focus {
-    border-color: #4f46e5;
-}
-
-.card-footer {
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 1.5rem;
-    border-top: 1px solid #eee;
-}
-
-.footer-btn {
-    padding: 0.375rem 0.75rem;
-    background: transparent;
-    border: 1px solid;
-    border-radius: 6px;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    cursor: pointer;
-}
-
-.btn-dark-green {
-    color: #15803d;
-    border-color: #15803d;
-}
-
-.btn-dark-green:hover {
-    background: #f0fdf4;
-}
-
-.success-label {
-    font-size: 0.8125rem;
-    color: #16a34a;
-    opacity: 1;
-    transition: opacity 1s ease;
-}
-
-.success-label.fade-out {
-    opacity: 0;
-}
-
-.actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-}
-
-.actions .toolbar-btn {
-    min-width: 6rem;
-}
-
-.save-btn {
-    background: #4f46e5;
-    color: #fff;
-    border-color: #4f46e5;
-}
-
-.save-btn:hover {
-    background: #4338ca;
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.spec.ts b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.spec.ts
deleted file mode 100644
index 4ed435b..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { StudentCardFull } from './student-card-full';
-
-describe('StudentCardFull', () => {
-  let component: StudentCardFull;
-  let fixture: ComponentFixture<StudentCardFull>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [StudentCardFull]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(StudentCardFull);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.ts b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.ts
deleted file mode 100644
index a0f85d3..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-full/student-card-full.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-import { Component, inject, signal, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { StudentService } from '../../../shared/services/student.service';
-import { StudentCardDto } from '../../../shared/classes/student-card.dto';
-
-@Component({
-  selector: 'app-student-card-full',
-  imports: [FormsModule],
-  templateUrl: './student-card-full.html',
-  styleUrl: './student-card-full.scss',
-})
-export class StudentCardFull implements OnDestroy {
-
-  // ************************** Constructor **************************
-
-  constructor() {
-    this.paramSub = this.route.paramMap.subscribe(params => {
-      this.studentId = params.get('studentId')!;
-      this.loadStudent();
-    });
-  }
-
-  // ************************** Declarations *************************
-
-  private readonly studentService = inject(StudentService);
-  private readonly route = inject(ActivatedRoute);
-  private readonly router = inject(Router);
-  private readonly paramSub: Subscription;
-
-  private studentId!: string;
-
-  protected readonly errorMessage = signal<string | null>(null);
-  protected readonly successMessage = signal<string | null>(null);
-  protected readonly saving = signal(false);
-  protected readonly loaded = signal(false);
-  protected readonly fading = signal(false);
-  private successTimer: any = null;
-
-  // Form fields — always editable
-  protected identifier = '';
-  protected nextIepDate = '';
-
-  // Snapshot of last-saved values for cancel
-  private savedIdentifier = '';
-  private savedNextIepDate = '';
-
-  // ************************** Properties ***************************
-
-  // *****************************************************************
-  // Returns true if form values differ from the saved snapshot.
-  // *****************************************************************
-  hasChanges(): boolean {
-    return this.identifier !== this.savedIdentifier
-      || this.nextIepDate !== this.savedNextIepDate;
-  }
-
-  // ************************ Public Methods *************************
-
-  // ************************ Event Handlers *************************
-
-  // *****************************************************************
-  // Saves changes to the student via the API.
-  // *****************************************************************
-  async onSave() {
-    this.saving.set(true);
-    this.errorMessage.set(null);
-    this.successMessage.set(null);
-
-    const result = await this.studentService.updateStudent(this.studentId, {
-      identifier: this.identifier,
-      nextIepDate: this.nextIepDate || null,
-    });
-
-    this.saving.set(false);
-
-    if (result.success) {
-      this.savedIdentifier = this.identifier;
-      this.savedNextIepDate = this.nextIepDate;
-      this.showSuccessTemporarily('Changes saved.');
-      this.studentService.notifyDataChanged();
-    } else {
-      this.errorMessage.set(result.message);
-    }
-  }
-
-  // *****************************************************************
-  // Reverts form fields to the last-saved snapshot.
-  // *****************************************************************
-  onCancel() {
-    this.identifier = this.savedIdentifier;
-    this.nextIepDate = this.savedNextIepDate;
-    this.errorMessage.set(null);
-    this.successMessage.set(null);
-  }
-
-  onBack() {
-    this.router.navigate(['/students']);
-  }
-
-  onGoals() {
-    this.router.navigate(['/students', this.studentId, 'goals']);
-  }
-
-  ngOnDestroy() {
-    this.paramSub.unsubscribe();
-    if (this.successTimer) clearTimeout(this.successTimer);
-  }
-
-  // ********************** Support Procedures ***********************
-
-  // *****************************************************************
-  // Shows a success message for 4 seconds, then fades it out over 1s.
-  // *****************************************************************
-  private showSuccessTemporarily(message: string) {
-    if (this.successTimer) clearTimeout(this.successTimer);
-    this.fading.set(false);
-    this.successMessage.set(message);
-
-    this.successTimer = setTimeout(() => {
-      this.fading.set(true);
-      this.successTimer = setTimeout(() => {
-        this.successMessage.set(null);
-        this.fading.set(false);
-      }, 1000);
-    }, 4000);
-  }
-
-  // *****************************************************************
-  // Loads the student by ID and populates form fields.
-  // *****************************************************************
-  private loadStudent() {
-    if (!this.loaded()) {
-      this.loaded.set(false);
-    }
-    this.studentService.getStudentById(this.studentId).then(result => {
-      if (result.success && result.payload) {
-        const s = result.payload;
-        this.identifier = s.identifier;
-        this.nextIepDate = this.toDateInput(s.nextIepDate);
-
-        this.savedIdentifier = this.identifier;
-        this.savedNextIepDate = this.nextIepDate;
-        this.loaded.set(true);
-      } else {
-        this.errorMessage.set(result.message);
-      }
-    });
-  }
-
-  // *****************************************************************
-  // Converts a Date to a YYYY-MM-DD string for date input binding.
-  // *****************************************************************
-  private toDateInput(date: Date | null): string {
-    if (!date) return '';
-    const d = new Date(date);
-    return d.toISOString().split('T')[0];
-  }
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.html b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.html
deleted file mode 100644
index 557eb26..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<div class="toolbar">
-    <h1 class="page-title">{{ showAll() ? 'All Students' : 'My Students' }} - <span class="student-count">{{ students().length }}</span></h1>
-    <div class="toolbar-right">
-        <label class="scope-toggle" title="Toggle between My Students and All Students">
-            <span class="scope-label">All Students</span>
-            <span class="toggle-track" [class.active]="showAll()">
-                <span class="toggle-thumb"></span>
-            </span>
-            <input type="checkbox" [checked]="showAll()" (change)="onToggleScope()" hidden>
-        </label>
-        <div class="view-toggle">
-            <button
-                class="toggle-btn"
-                [class.active]="displayMode() === 'card'"
-                (click)="setDisplayMode('card')"
-                title="Card view">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                    <rect x="3" y="3" width="8" height="8" rx="1"/>
-                    <rect x="13" y="3" width="8" height="8" rx="1"/>
-                    <rect x="3" y="13" width="8" height="8" rx="1"/>
-                    <rect x="13" y="13" width="8" height="8" rx="1"/>
-                </svg>
-            </button>
-            <button
-                class="toggle-btn"
-                [class.active]="displayMode() === 'list'"
-                (click)="setDisplayMode('list')"
-                title="List view">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                    <rect x="3" y="5" width="18" height="2" rx="1"/>
-                    <rect x="3" y="11" width="18" height="2" rx="1"/>
-                    <rect x="3" y="17" width="18" height="2" rx="1"/>
-                </svg>
-            </button>
-        </div>
-        <button class="toolbar-btn" (click)="onAddStudent()">+ Add a Student</button>
-    </div>
-</div>
-
-@if (showAddModal()) {
-    <app-add-student-modal
-        (studentCreated)="onStudentCreated($event)"
-        (cancelled)="onModalCancelled()"
-    />
-}
-
-@if (displayMode() === 'card') {
-    @if (loaded() && students().length === 0) {
-    <div class="empty-state">
-        <p>You don't have any students entered yet.</p>
-        <p>Click <strong>+ Add a Student</strong> in the upper right to get started.</p>
-    </div>
-    } @else {
-    <div class="card-grid">
-        @for (student of students(); track student.studentId) {
-        <app-student-card [student]="student" />
-        }
-    </div>
-    }
-} @else {
-    @if (loaded() && students().length === 0) {
-    <div class="empty-state">
-        <p>You don't have any students entered yet.</p>
-        <p>Click <strong>+ Add a Student</strong> in the upper right to get started.</p>
-    </div>
-    } @else {
-    <div class="student-list">
-        <div class="list-header">
-            <span class="col-name">Student</span>
-            @if (showAll()) {
-            <span class="col-owner">Owner</span>
-            }
-            <span class="col-iep">IEP Date</span>
-            <span class="col-entry">Last Entry</span>
-            <span class="col-stat">Goals</span>
-            <span class="col-stat">Events</span>
-            <span class="col-stat">Benchmarks</span>
-        </div>
-        @for (student of students(); track student.studentId) {
-        <div class="list-row" [routerLink]="['/students', student.studentId]">
-            <span class="col-name">🎓 {{ student.identifier }}</span>
-            @if (showAll()) {
-            <span class="col-owner">{{ student.ownerName }}</span>
-            }
-            <span class="col-iep">{{ student.nextIepDate | date:'M/d/yy' }}</span>
-            <span class="col-entry">
-                @if (student.lastEntryDate) {
-                    {{ student.lastEntryDate | date:'M/d/yy' }}
-                } @else {
-                    <span class="no-entry">No entries yet</span>
-                }
-            </span>
-            <span class="col-stat">{{ student.goalCount }}</span>
-            <span class="col-stat">{{ student.progressEventCount }}</span>
-            <span class="col-stat">{{ student.benchmarkCount }}</span>
-        </div>
-        }
-    </div>
-    }
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.scss b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.scss
deleted file mode 100644
index 5c9211d..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.scss
+++ /dev/null
@@ -1,210 +0,0 @@
-:host {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 40px;
-    padding-right: 0.5rem;
-    border-radius: 8px;
-    background: #fff;
-    border-bottom: 1px solid #ddd;
-    margin-bottom: 1rem;
-    flex-shrink: 0;
-}
-
-.toolbar-right {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.view-toggle {
-    display: flex;
-    border: 1px solid #d1d5db;
-    border-radius: 6px;
-    overflow: hidden;
-}
-
-.toggle-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 28px;
-    background: transparent;
-    border: none;
-    color: #6b7280;
-    cursor: pointer;
-
-    &:hover {
-        background: #f3f4f6;
-        color: #374151;
-    }
-
-    &.active {
-        background: #eef2ff;
-        color: #4f46e5;
-    }
-
-     & + & {
-        border-left: 1px solid #d1d5db;
-    }
-}
-
-.page-title {
-    font-size: 24px;
-    font-weight: 600;
-    margin-left: 0.75rem;
-}
-
-.toolbar-btn {
-    padding: 0.375rem 0.75rem;
-    background: transparent;
-    color: #4f46e5;
-    border: 1px solid #4f46e5;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-}
-
-.toolbar-btn:hover {
-    background: #eef2ff;
-}
-
-.card-grid {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: flex-start;
-    gap: 1rem;
-    overflow-y: auto;
-    flex: 1;
-}
-
-.student-list {
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    flex: 1;
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-}
-
-.list-header {
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    background: #f9fafb;
-    border-bottom: 1px solid #e5e7eb;
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: #6b7280;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    flex-shrink: 0;
-}
-
-.list-row {
-    display: flex;
-    align-items: center;
-    padding: 0.625rem 1rem;
-    border-bottom: 1px solid #f3f4f6;
-    cursor: pointer;
-    font-size: 0.9rem;
-
-    &:last-child {
-        border-bottom: none;
-    }
-
-    &:hover {
-        background: #f5f3ff;
-    }
-}
-
-.col-name {
-    flex: 2;
-    font-weight: 600;
-    color: #1f2937;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.col-iep,
-.col-entry {
-    flex: 1;
-    color: #4b5563;
-    font-size: 0.875rem;
-}
-
-.col-stat {
-    flex: 0 0 80px;
-    text-align: center;
-    color: #374151;
-    font-size: 0.875rem;
-}
-
-.no-entry {
-    color: #9ca3af;
-    font-style: italic;
-}
-
-.empty-state {
-    text-align: center;
-    padding: 3rem 1.5rem;
-    color: #555;
-    font-size: 0.9375rem;
-    background: #fff;
-    border-radius: 8px;
-    border: 1px solid #ddd;
-}
-
-.scope-toggle {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    cursor: pointer;
-    font-size: 0.875rem;
-    color: #4b5563;
-    user-select: none;
-}
-
-.toggle-track {
-    display: inline-flex;
-    align-items: center;
-    width: 36px;
-    height: 20px;
-    background: #d1d5db;
-    border-radius: 10px;
-    padding: 2px;
-    transition: background 0.2s;
-
-    &.active {
-        background: #4f46e5;
-    }
-}
-
-.toggle-thumb {
-    width: 16px;
-    height: 16px;
-    background: #fff;
-    border-radius: 50%;
-    transition: transform 0.2s;
-
-    .active > & {
-        transform: translateX(16px);
-    }
-}
-
-.col-owner {
-    flex: 1;
-    color: #4b5563;
-    font-size: 0.875rem;
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.ts b/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.ts
deleted file mode 100644
index 6c3b3ee..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Component, inject, signal } from '@angular/core';
-import { Router, RouterLink } from '@angular/router';
-import { DatePipe } from '@angular/common';
-import { StudentCard } from '../student-card/student-card';
-import { AddStudentModal } from '../add-student-modal/add-student-modal';
-import { DummyStudentService } from '../../../shared/services/dummy-student.service';
-import { StudentCardDto } from '../../../shared/classes/student-card.dto';
-import { StudentService } from '../../../shared/services/student.service';
-
-export type DisplayMode = 'card' | 'list';
-
-@Component({
-  selector: 'app-student-card-list',
-  imports: [StudentCard, AddStudentModal, RouterLink, DatePipe],
-  templateUrl: './student-card-list.html',
-  styleUrl: './student-card-list.scss',
-})
-export class StudentCardList {
-
-  // ************************** Constructor **************************
-
-  constructor() {
-    this.loadStudents();
-  }
-
-  // ************************** Declarations *************************
-
-  private readonly studentService = inject(StudentService);
-  private readonly router = inject(Router);
-  protected readonly students = signal<StudentCardDto[]>([]);
-  protected readonly displayMode = signal<DisplayMode>('card');
-  protected readonly showAddModal = signal(false);
-  protected readonly loaded = signal(false);
-  protected readonly showAll = signal(false);
-
-  public errorMessage = signal<String | null>(null);
-
-  // ************************** Properties ***************************
-
-  // ************************ Public Methods *************************
-
-  // ************************ Event Handlers *************************
-
-  setDisplayMode(mode: DisplayMode) {
-    this.displayMode.set(mode);
-  }
-
-  onAddStudent() {
-    this.showAddModal.set(true);
-  }
-
-  // *****************************************************************
-  // Toggles between "My Students" and "All Students" scope, then
-  // reloads the student list from the API with the new scope.
-  // *****************************************************************
-  onToggleScope() {
-    this.showAll.update(v => !v);
-    this.loaded.set(false);
-    this.loadStudents();
-    this.studentService.notifyDataChanged();
-  }
-
-  onStudentCreated(student: StudentCardDto) {
-    this.students.update(list => this.sortByIdentifier([...list, student]));
-    this.showAddModal.set(false);
-    this.studentService.notifyDataChanged();
-    this.router.navigate(['/students', student.studentId]);
-  }
-
-  onModalCancelled() {
-    this.showAddModal.set(false);
-  }
-
-  // ********************** Support Procedures ***********************
-
-  // *****************************************************************
-  // Sorts an array of students alphabetically by identifier.
-  // *****************************************************************
-  private sortByIdentifier(students: StudentCardDto[]): StudentCardDto[] {
-    return students.sort((a, b) =>
-      a.identifier.localeCompare(b.identifier, undefined, { sensitivity: 'base' })
-    );
-  }
-
-  // *****************************************************************
-  // Loads students from the service and populates the students signal.
-  // Uses scope 'all' when the toggle is active.
-  // *****************************************************************
-  private loadStudents() {
-    const scope = this.showAll() ? 'all' : undefined;
-    this.studentService.getMyStudents(scope).then(data => {
-
-      if (!data.success) {
-        this.errorMessage.set(data.message);
-      }
-      else {
-        this.students.set(this.sortByIdentifier(data.payload || []))
-      }
-
-      this.loaded.set(true);
-    });
-  }
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.html b/ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.html
deleted file mode 100644
index a91885d..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="card" [routerLink]="['/students', student().studentId]">
-    <h2 class="identifier">🎓 {{ student().identifier }}</h2>
-
-    <div class="meta">
-        <span class="last-entry">IEP Date: {{ student().nextIepDate | date:'M/d/yy'}}</span>
-        <span class="last-entry">
-            @if (student().lastEntryDate) {
-            Last entry: {{ student().lastEntryDate | date:'M/d/yy' }}
-            } @else {
-            No entries yet
-            }
-        </span>
-    </div>
-
-    <div class="stats">
-        <span>Goals: {{ student().goalCount }}</span>
-        <span>Events: {{ student().progressEventCount }}</span>
-        <span>Benchmarks: {{ student().benchmarkCount }}</span>
-    </div>
-</div>
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.scss b/ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.scss
deleted file mode 100644
index a5e65bb..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-:host {
-    display: block;
-    width: 280px;
-}
-
-.card {
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-    padding: 1.5rem;
-    cursor: pointer;
-    transition: box-shadow 0.15s ease, transform 0.15s ease;
-}
-
-.card:hover {
-    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
-    transform: translateY(-2px);
-}
-
-.identifier {
-    margin: 0 0 0.75rem;
-    font-size: 1.5rem;
-    text-align: center;
-}
-
-.meta {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-    font-size: 0.875rem;
-    color: #666;
-}
-
-.badge {
-    padding: 0.25rem 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    font-size: 0.8125rem;
-    color: #333;
-}
-
-.stats {
-    display: flex;
-    justify-content: space-around;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #333;
-}
\ No newline at end of file
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.ts b/ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.ts
deleted file mode 100644
index de6f77d..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-card/student-card.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-import { DatePipe } from '@angular/common';
-import { RouterLink } from '@angular/router';
-import { StudentCardDto } from '../../../shared/classes/student-card.dto';
-
-@Component({
-  selector: 'app-student-card',
-  imports: [DatePipe, RouterLink],
-  templateUrl: './student-card.html',
-  styleUrl: './student-card.scss',
-})
-export class StudentCard {
-
-  // ************************** Constructor **************************
-
-  // ************************** Declarations *************************
-
-  readonly student = input.required<StudentCardDto>();
-
-  // ************************** Properties ***************************
-
-  // ************************ Public Methods *************************
-
-  // ************************ Event Handlers *************************
-
-  // ********************** Support Procedures ***********************
-}
diff --git a/ui/winstudentgoaltracker/src/app/shared/classes/sidebar-node.ts b/ui/winstudentgoaltracker/src/app/shared/classes/sidebar-node.ts
deleted file mode 100644
index 5512921..0000000
--- a/ui/winstudentgoaltracker/src/app/shared/classes/sidebar-node.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface SidebarNode {
-    label: string;
-    routerLink?: string[];
-    children?: SidebarNode[];
-    expanded?: boolean;
-    loadChildren?: () => Promise<SidebarNode[]>;
-    childCount?: number;
-}

From 9e1bef0ee13e6cfe27cf6290b47a436913be5146 Mon Sep 17 00:00:00 2001
From: Oliver Pelly <opelly@gmail.com>
Date: Wed, 8 Apr 2026 14:12:28 -0700
Subject: [PATCH 3/6] coloring change

---
 .../edit-event-modal/edit-event-modal.ts      |  6 +++---
 .../components/workspace/workspace.html       | 21 ++++++-------------
 .../components/workspace/workspace.scss       | 11 +++++++++-
 .../desktop/components/workspace/workspace.ts | 18 ----------------
 .../src/app/shared/classes/category-colors.ts | 20 ++++++------------
 5 files changed, 25 insertions(+), 51 deletions(-)

diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts b/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts
index b52d1b0..7e4df09 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts
@@ -4,7 +4,7 @@ import { ModalShell } from '../modal-shell/modal-shell';
 import { StudentService } from '../../../shared/services/student.service';
 import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
 import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
-import { getCategoryColor } from '../../../shared/classes/category-colors';
+import { GOAL_COLOR } from '../../../shared/classes/category-colors';
 
 @Component({
     selector: 'app-edit-event-modal',
@@ -17,7 +17,7 @@ export class EditEventModal {
 
     readonly studentId = input.required<string>();
     readonly goalId = input.required<string>();
-    readonly goalCategory = input<string>('');
+
     readonly benchmarks = input<BenchmarkDto[]>([]);
     /** null for new event, populated for edit */
     readonly event = input<ProgressEventDto | null>(null);
@@ -47,7 +47,7 @@ export class EditEventModal {
     }
 
     get colors() {
-        return getCategoryColor(this.goalCategory());
+        return GOAL_COLOR;
     }
 
     isBenchmarkSelected(id: string): boolean {
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
index 8422702..00d5240 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
@@ -18,7 +18,7 @@
 }
 @if (showEditEventModal()) {
 <app-edit-event-modal [studentId]="studentId()!" [goalId]="selectedGoal()!.goalId"
-    [goalCategory]="selectedGoal()!.category" [benchmarks]="goalBenchmarks()"
+    [benchmarks]="goalBenchmarks()"
     [event]="showEditEventModal() === 'new' ? null : $any(showEditEventModal())" (saved)="onEventSaved()"
     (closed)="showEditEventModal.set(null)" />
 }
@@ -32,9 +32,6 @@
     <div class="goal-tabs">
         @for (g of goals(); track g.goalId) {
         <button class="goal-tab" [class.active]="selectedGoalId() === g.goalId || (selectedGoal()?.goalId === g.goalId)"
-            [style.border-color]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).border : '#E5E5E0'"
-            [style.background]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).bg : '#FFF'"
-            [style.color]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).text : '#666'"
             (click)="onSelectGoal(g.goalId)">
             {{ g.category }}
         </button>
@@ -49,8 +46,7 @@
     <!-- Goal Card -->
     <div class="goal-card">
         <div class="goal-card-header">
-            <span class="goal-badge" [style.color]="goalColors().text"
-                [style.background]="goalColors().bg">{{ selectedGoal()!.category }} Goal</span>
+            <span class="goal-badge">{{ selectedGoal()!.category }} Goal</span>
             @if (selectedGoal()!.targetCompletionDate) {
             <span class="goal-due">Due {{ formatDate(selectedGoal()!.targetCompletionDate) }}</span>
             }
@@ -67,14 +63,10 @@
     <!-- Sub Tabs -->
     <div class="sub-tabs">
         <button class="sub-tab" [class.active]="activeTab() === 'benchmarks'"
-            [style.color]="activeTab() === 'benchmarks' ? goalColors().text : '#888'"
-            [style.border-bottom-color]="activeTab() === 'benchmarks' ? goalColors().accent : 'transparent'"
             (click)="onTabChange('benchmarks')">
             Benchmarks ({{ goalBenchmarks().length }})
         </button>
         <button class="sub-tab" [class.active]="activeTab() === 'progress'"
-            [style.color]="activeTab() === 'progress' ? goalColors().text : '#888'"
-            [style.border-bottom-color]="activeTab() === 'progress' ? goalColors().accent : 'transparent'"
             (click)="onTabChange('progress')">
             Progress Events ({{ sortedProgressEvents().length }})
         </button>
@@ -83,10 +75,11 @@
     <!-- Benchmarks Tab -->
     @if (activeTab() === 'benchmarks') {
     <div class="tab-content">
+        <button class="add-btn" (click)="onAddBenchmark()">+ Add Benchmark</button>
         @for (b of goalBenchmarks(); track b.benchmarkId) {
         <div class="benchmark-card">
             <div class="benchmark-header">
-                <span class="benchmark-name" [style.color]="goalColors().text">{{ b.shortName || b.benchmark }}</span>
+                <span class="benchmark-name">{{ b.shortName || b.benchmark }}</span>
                 <button class="edit-icon" (click)="onEditBenchmark(b)" aria-label="Edit benchmark">
                     <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"
                         stroke-linecap="round" stroke-linejoin="round">
@@ -97,18 +90,17 @@
             <p class="benchmark-desc">{{ b.benchmark }}</p>
         </div>
         }
-        <button class="add-btn" (click)="onAddBenchmark()">+ Add Benchmark</button>
     </div>
     }
 
     <!-- Progress Tab -->
     @if (activeTab() === 'progress') {
     <div class="tab-content timeline">
+        <button class="add-btn" (click)="onNewEvent()">+ Log Progress Event</button>
         <div class="timeline-line"></div>
         @for (ev of sortedProgressEvents(); track ev.progressEventId) {
         <div class="timeline-item">
-            <div class="timeline-dot" [style.background]="goalColors().bg"
-                [style.border-color]="goalColors().border"></div>
+            <div class="timeline-dot"></div>
             <div class="event-card">
                 <div class="event-header">
                     <span class="event-date">{{ formatDate(ev.createdAt) }}</span>
@@ -123,7 +115,6 @@
             </div>
         </div>
         }
-        <button class="add-btn" (click)="onNewEvent()">+ Log Progress Event</button>
     </div>
     }
 </div>
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss
index 7446244..3ff03c5 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss
@@ -65,6 +65,9 @@
 
     &.active {
         font-weight: 600;
+        border-color: #818CF8;
+        background: #EEF2FF;
+        color: #4338CA;
     }
 
     &.add-goal {
@@ -104,6 +107,8 @@
     letter-spacing: 0.05em;
     padding: 3px 8px;
     border-radius: var(--radius-sm);
+    color: #4338CA;
+    background: #EEF2FF;
 }
 
 .goal-due {
@@ -156,6 +161,8 @@
 
     &.active {
         font-weight: 600;
+        color: #4338CA;
+        border-bottom-color: #6366F1;
     }
 }
 
@@ -184,6 +191,7 @@
 .benchmark-name {
     font-weight: 600;
     font-size: 14px;
+    color: #4338CA;
 }
 
 .benchmark-events {
@@ -227,7 +235,8 @@
     width: 12px;
     height: 12px;
     border-radius: 50%;
-    border: 2px solid;
+    border: 2px solid #818CF8;
+    background: #EEF2FF;
 }
 
 .event-card {
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
index c75a26a..c00448f 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
@@ -5,7 +5,6 @@ import { StudentCardDto } from '../../../shared/classes/student-card.dto';
 import { StudentGoalItem } from '../../../shared/classes/student-goal';
 import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
 import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
-import { getCategoryColor, CategoryColor } from '../../../shared/classes/category-colors';
 import { EditGoalModal } from '../edit-goal-modal/edit-goal-modal';
 import { EditBenchmarkModal } from '../edit-benchmark-modal/edit-benchmark-modal';
 import { EditEventModal } from '../edit-event-modal/edit-event-modal';
@@ -81,9 +80,6 @@ export class Workspace {
         return this.goals().find(g => g.goalId === id) ?? null;
     });
 
-    protected readonly goalColors = computed<CategoryColor>(() => {
-        return getCategoryColor(this.selectedGoal()?.category ?? '');
-    });
 
     protected readonly goalBenchmarks = computed<BenchmarkDto[]>(() => {
         const goalId = this.selectedGoal()?.goalId;
@@ -169,26 +165,12 @@ export class Workspace {
 
     // ************************ Formatting Helpers **********************
 
-    getCatColor(category: string): CategoryColor {
-        return getCategoryColor(category);
-    }
-
     formatDate(d: string | Date | null): string {
         if (!d) return '';
         const date = new Date(d);
         return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
     }
 
-    truncate(text: string, max: number): string {
-        return text.length > max ? text.slice(0, max) + '…' : text;
-    }
-
-    getRelatedEventCount(benchmarkId: string): number {
-        // We don't have benchmark associations in the event DTO from the list endpoint,
-        // so we return 0. The mockup shows this but we can't derive it without extra API calls.
-        return 0;
-    }
-
     // ********************** Support Procedures ***********************
 
     private async loadStudentData(studentId: string) {
diff --git a/ui/winstudentgoaltracker/src/app/shared/classes/category-colors.ts b/ui/winstudentgoaltracker/src/app/shared/classes/category-colors.ts
index 424d42b..fdec58b 100644
--- a/ui/winstudentgoaltracker/src/app/shared/classes/category-colors.ts
+++ b/ui/winstudentgoaltracker/src/app/shared/classes/category-colors.ts
@@ -5,18 +5,10 @@ export interface CategoryColor {
     accent: string;
 }
 
-const CATEGORY_COLORS: Record<string, CategoryColor> = {
-    Reading:  { bg: '#EEF2FF', border: '#818CF8', text: '#4338CA', accent: '#6366F1' },
-    Math:     { bg: '#FFF7ED', border: '#FB923C', text: '#C2410C', accent: '#F97316' },
-    Writing:  { bg: '#F0FDF4', border: '#4ADE80', text: '#15803D', accent: '#22C55E' },
-    Behavior: { bg: '#FDF4FF', border: '#C084FC', text: '#7E22CE', accent: '#A855F7' },
-    Speech:   { bg: '#FFF1F2', border: '#FB7185', text: '#BE123C', accent: '#F43F5E' },
+/** Single color used for all goals, regardless of category. */
+export const GOAL_COLOR: CategoryColor = {
+    bg: '#EEF2FF',
+    border: '#818CF8',
+    text: '#4338CA',
+    accent: '#6366F1',
 };
-
-const DEFAULT_COLOR: CategoryColor = {
-    bg: '#F5F5F0', border: '#A0A090', text: '#444', accent: '#666',
-};
-
-export function getCategoryColor(category: string): CategoryColor {
-    return CATEGORY_COLORS[category] ?? DEFAULT_COLOR;
-}

From e2834c1d5b3c04e5fee59e15eef96b428f6173b4 Mon Sep 17 00:00:00 2001
From: Oliver Pelly <opelly@gmail.com>
Date: Wed, 8 Apr 2026 15:48:28 -0700
Subject: [PATCH 4/6] modal consolidation

---
 .../add-goal-modal/add-goal-modal.ts          |  56 ---------
 .../edit-goal-modal/edit-goal-modal.html      |  29 -----
 .../edit-goal-modal/edit-goal-modal.scss      |   1 -
 .../edit-goal-modal/edit-goal-modal.ts        |  58 ---------
 .../goal-modal.html}                          |   6 +-
 .../goal-modal.scss}                          |   0
 .../components/goal-modal/goal-modal.ts       | 113 ++++++++++++++++++
 .../components/workspace/workspace.html       |  13 +-
 .../desktop/components/workspace/workspace.ts |  18 ++-
 9 files changed, 130 insertions(+), 164 deletions(-)
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.ts
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.html
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.scss
 delete mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.ts
 rename ui/winstudentgoaltracker/src/app/desktop/components/{add-goal-modal/add-goal-modal.html => goal-modal/goal-modal.html} (84%)
 rename ui/winstudentgoaltracker/src/app/desktop/components/{add-goal-modal/add-goal-modal.scss => goal-modal/goal-modal.scss} (100%)
 create mode 100644 ui/winstudentgoaltracker/src/app/desktop/components/goal-modal/goal-modal.ts

diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.ts b/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.ts
deleted file mode 100644
index ac775f3..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Component, inject, input, output, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { ModalShell } from '../modal-shell/modal-shell';
-import { CreateGoalDto } from '../../../shared/classes/create-goal.dto';
-import { StudentGoalItem } from '../../../shared/classes/student-goal';
-import { StudentService } from '../../../shared/services/student.service';
-
-@Component({
-    selector: 'app-add-goal-modal',
-    imports: [FormsModule, ModalShell],
-    templateUrl: './add-goal-modal.html',
-    styleUrl: './add-goal-modal.scss',
-})
-export class AddGoalModal {
-    private readonly studentService = inject(StudentService);
-
-    readonly studentId = input.required<string>();
-    readonly existingGoals = input.required<StudentGoalItem[]>();
-    readonly nextIepDate = input<string | null>();
-    readonly goalCreated = output<StudentGoalItem>();
-    readonly cancelled = output<void>();
-
-    protected readonly isSubmitting = signal(false);
-    protected readonly errorMessage = signal<string | null>(null);
-
-    protected form: CreateGoalDto = {
-        description: '',
-        category: '',
-        baseline: '',
-        goalParentId: null,
-        targetCompletionDate: null,
-    };
-
-    ngOnInit() {
-        const iepDate = this.nextIepDate?.();
-        if (iepDate) {
-            this.form.targetCompletionDate = iepDate;
-        }
-    }
-
-    async onSubmit() {
-        if (!this.form.category.trim()) return;
-        this.errorMessage.set(null);
-        this.isSubmitting.set(true);
-
-        const result = await this.studentService.createGoal(this.studentId(), this.form);
-        this.isSubmitting.set(false);
-
-        if (!result.success) {
-            this.errorMessage.set(result.message);
-            return;
-        }
-
-        this.goalCreated.emit(result.payload!);
-    }
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.html b/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.html
deleted file mode 100644
index 426cf00..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<app-modal-shell title="Edit Goal" (closed)="closed.emit()">
-    <div class="field">
-        <label class="field-label">Category</label>
-        <input class="field-input" type="text" [(ngModel)]="category" placeholder="e.g. Reading, Math, Behavior…" />
-    </div>
-    <div class="field">
-        <label class="field-label">Description</label>
-        <textarea class="field-input field-textarea" [(ngModel)]="description"></textarea>
-    </div>
-    <div class="field">
-        <label class="field-label">Baseline</label>
-        <textarea class="field-input field-textarea" [(ngModel)]="baseline" placeholder="Enter baseline..."></textarea>
-    </div>
-    <div class="field">
-        <label class="field-label">Due Date</label>
-        <input class="field-input" type="date" [(ngModel)]="targetCompletionDate" />
-    </div>
-
-    @if (errorMessage()) {
-    <p class="error">{{ errorMessage() }}</p>
-    }
-
-    <div class="modal-actions">
-        <button class="btn-secondary" (click)="closed.emit()">Cancel</button>
-        <button class="btn-primary" (click)="onSave()" [disabled]="saving()">
-            {{ saving() ? 'Saving...' : 'Save' }}
-        </button>
-    </div>
-</app-modal-shell>
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.scss b/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.scss
deleted file mode 100644
index 2918c96..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.scss
+++ /dev/null
@@ -1 +0,0 @@
-/* Inherits all styles from modal-shell via ::ng-deep */
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.ts b/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.ts
deleted file mode 100644
index 35ad92f..0000000
--- a/ui/winstudentgoaltracker/src/app/desktop/components/edit-goal-modal/edit-goal-modal.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Component, inject, input, output, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { ModalShell } from '../modal-shell/modal-shell';
-import { StudentService } from '../../../shared/services/student.service';
-import { StudentGoalItem } from '../../../shared/classes/student-goal';
-
-@Component({
-    selector: 'app-edit-goal-modal',
-    imports: [FormsModule, ModalShell],
-    templateUrl: './edit-goal-modal.html',
-    styleUrl: './edit-goal-modal.scss',
-})
-export class EditGoalModal {
-    private readonly studentService = inject(StudentService);
-
-    readonly studentId = input.required<string>();
-    readonly goal = input.required<StudentGoalItem>();
-    readonly saved = output<void>();
-    readonly closed = output<void>();
-
-    protected readonly saving = signal(false);
-    protected readonly errorMessage = signal<string | null>(null);
-
-    protected category = '';
-    protected description = '';
-    protected baseline = '';
-    protected targetCompletionDate: string | null = null;
-
-    ngOnInit() {
-        const g = this.goal();
-        this.category = g.category;
-        this.description = g.description;
-        this.baseline = g.baseline;
-        this.targetCompletionDate = g.targetCompletionDate ? g.targetCompletionDate.substring(0, 10) : null;
-    }
-
-    async onSave() {
-        if (!this.category.trim() || !this.description.trim()) return;
-        this.saving.set(true);
-        this.errorMessage.set(null);
-
-        const result = await this.studentService.updateGoal(this.studentId(), this.goal().goalId, {
-            category: this.category,
-            description: this.description,
-            baseline: this.baseline,
-            targetCompletionDate: this.targetCompletionDate,
-        });
-
-        this.saving.set(false);
-
-        if (result.success) {
-            this.studentService.notifyDataChanged();
-            this.saved.emit();
-        } else {
-            this.errorMessage.set(result.message);
-        }
-    }
-}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html b/ui/winstudentgoaltracker/src/app/desktop/components/goal-modal/goal-modal.html
similarity index 84%
rename from ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html
rename to ui/winstudentgoaltracker/src/app/desktop/components/goal-modal/goal-modal.html
index a5d4b23..48dee84 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/goal-modal/goal-modal.html
@@ -1,4 +1,4 @@
-<app-modal-shell title="Add Goal" (closed)="cancelled.emit()">
+<app-modal-shell [title]="modalTitle" (closed)="closed.emit()">
     <div class="field">
         <label class="field-label">Category</label>
         <input class="field-input" type="text" [(ngModel)]="form.category"
@@ -24,9 +24,9 @@
     }
 
     <div class="modal-actions">
-        <button class="btn-secondary" (click)="cancelled.emit()">Cancel</button>
+        <button class="btn-secondary" (click)="closed.emit()">Cancel</button>
         <button class="btn-primary" (click)="onSubmit()" [disabled]="isSubmitting() || !form.category.trim()">
-            {{ isSubmitting() ? 'Saving...' : 'Add Goal' }}
+            {{ isSubmitting() ? 'Saving...' : submitLabel }}
         </button>
     </div>
 </app-modal-shell>
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.scss b/ui/winstudentgoaltracker/src/app/desktop/components/goal-modal/goal-modal.scss
similarity index 100%
rename from ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.scss
rename to ui/winstudentgoaltracker/src/app/desktop/components/goal-modal/goal-modal.scss
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-modal/goal-modal.ts b/ui/winstudentgoaltracker/src/app/desktop/components/goal-modal/goal-modal.ts
new file mode 100644
index 0000000..37cd2be
--- /dev/null
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/goal-modal/goal-modal.ts
@@ -0,0 +1,113 @@
+import { Component, inject, input, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ModalShell } from '../modal-shell/modal-shell';
+import { CreateGoalDto } from '../../../shared/classes/create-goal.dto';
+import { StudentGoalItem } from '../../../shared/classes/student-goal';
+import { StudentService } from '../../../shared/services/student.service';
+
+@Component({
+    selector: 'app-goal-modal',
+    imports: [FormsModule, ModalShell],
+    templateUrl: './goal-modal.html',
+    styleUrl: './goal-modal.scss',
+})
+export class GoalModal {
+    private readonly studentService = inject(StudentService);
+
+    /** Required: the student this goal belongs to. */
+    readonly studentId = input.required<string>();
+
+    /** Optional: when provided the modal operates in edit mode. */
+    readonly goal = input<StudentGoalItem | null>(null);
+
+    /** Optional: used to pre-fill the target completion date in add mode. */
+    readonly nextIepDate = input<string | null>(null);
+
+    /** Emits the newly created goal (add mode). */
+    readonly goalCreated = output<StudentGoalItem>();
+
+    /** Emits when an existing goal has been saved (edit mode). */
+    readonly saved = output<void>();
+
+    /** Emits when the modal is dismissed without saving. */
+    readonly closed = output<void>();
+
+    protected readonly isSubmitting = signal(false);
+    protected readonly errorMessage = signal<string | null>(null);
+
+    protected form: CreateGoalDto = {
+        description: '',
+        category: '',
+        baseline: '',
+        goalParentId: null,
+        targetCompletionDate: null,
+    };
+
+    protected get isEditMode(): boolean {
+        return !!this.goal();
+    }
+
+    protected get modalTitle(): string {
+        return this.isEditMode ? 'Edit Goal' : 'Add Goal';
+    }
+
+    protected get submitLabel(): string {
+        return this.isEditMode ? 'Save' : 'Add Goal';
+    }
+
+    ngOnInit() {
+        const existing = this.goal();
+        if (existing) {
+            // Edit mode — populate form from the existing goal
+            this.form.category = existing.category;
+            this.form.description = existing.description;
+            this.form.baseline = existing.baseline;
+            this.form.goalParentId = existing.goalParentId;
+            this.form.targetCompletionDate = existing.targetCompletionDate
+                ? existing.targetCompletionDate.substring(0, 10)
+                : null;
+        } else {
+            // Add mode — pre-fill target date from IEP if available
+            const iepDate = this.nextIepDate?.();
+            if (iepDate) {
+                this.form.targetCompletionDate = iepDate;
+            }
+        }
+    }
+
+    async onSubmit() {
+        if (!this.form.category.trim()) return;
+        this.errorMessage.set(null);
+        this.isSubmitting.set(true);
+
+        if (this.isEditMode) {
+            const result = await this.studentService.updateGoal(
+                this.studentId(),
+                this.goal()!.goalId,
+                {
+                    category: this.form.category,
+                    description: this.form.description,
+                    baseline: this.form.baseline,
+                    targetCompletionDate: this.form.targetCompletionDate,
+                },
+            );
+            this.isSubmitting.set(false);
+
+            if (result.success) {
+                this.studentService.notifyDataChanged();
+                this.saved.emit();
+            } else {
+                this.errorMessage.set(result.message);
+            }
+        } else {
+            const result = await this.studentService.createGoal(this.studentId(), this.form);
+            this.isSubmitting.set(false);
+
+            if (result.success) {
+                this.goalCreated.emit(result.payload!);
+            } else {
+                this.errorMessage.set(result.message);
+            }
+        }
+    }
+}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
index 00d5240..4df120a 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
@@ -4,13 +4,12 @@
 </div>
 } @else {
 <!-- Modals -->
-@if (showAddGoalModal()) {
-<app-add-goal-modal [studentId]="studentId()!" [existingGoals]="goals()" [nextIepDate]="nextIepDate()"
-    (goalCreated)="onGoalCreated($event)" (cancelled)="showAddGoalModal.set(false)" />
-}
-@if (showEditGoalModal() && selectedGoal()) {
-<app-edit-goal-modal [studentId]="studentId()!" [goal]="selectedGoal()!" (saved)="onEditGoalSaved()"
-    (closed)="showEditGoalModal.set(false)" />
+@if (showGoalModal()) {
+<app-goal-modal [studentId]="studentId()!"
+    [goal]="showGoalModal() === 'add' ? null : $any(showGoalModal())"
+    [nextIepDate]="nextIepDate()"
+    (goalCreated)="onGoalCreated($event)" (saved)="onGoalSaved()"
+    (closed)="showGoalModal.set(null)" />
 }
 @if (showEditBenchmarkModal()) {
 <app-edit-benchmark-modal [studentId]="studentId()!" [benchmark]="showEditBenchmarkModal()!"
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
index c00448f..0606865 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
@@ -5,16 +5,15 @@ import { StudentCardDto } from '../../../shared/classes/student-card.dto';
 import { StudentGoalItem } from '../../../shared/classes/student-goal';
 import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
 import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
-import { EditGoalModal } from '../edit-goal-modal/edit-goal-modal';
+import { GoalModal } from '../goal-modal/goal-modal';
 import { EditBenchmarkModal } from '../edit-benchmark-modal/edit-benchmark-modal';
 import { EditEventModal } from '../edit-event-modal/edit-event-modal';
-import { AddGoalModal } from '../add-goal-modal/add-goal-modal';
 
 type TabView = 'benchmarks' | 'progress';
 
 @Component({
     selector: 'app-workspace',
-    imports: [EditGoalModal, EditBenchmarkModal, EditEventModal, AddGoalModal],
+    imports: [GoalModal, EditBenchmarkModal, EditEventModal],
     templateUrl: './workspace.html',
     styleUrl: './workspace.scss',
 })
@@ -67,8 +66,7 @@ export class Workspace {
     protected readonly activeTab = signal<TabView>('benchmarks');
 
     // Modal states
-    protected readonly showAddGoalModal = signal(false);
-    protected readonly showEditGoalModal = signal(false);
+    protected readonly showGoalModal = signal<StudentGoalItem | 'add' | null>(null);
     protected readonly showEditBenchmarkModal = signal<BenchmarkDto | null>(null);
     protected readonly showEditEventModal = signal<ProgressEventDto | null | 'new'>(null);
 
@@ -113,20 +111,20 @@ export class Workspace {
 
     // Modal handlers
     onEditGoal() {
-        this.showEditGoalModal.set(true);
+        this.showGoalModal.set(this.selectedGoal()!);
     }
 
-    onEditGoalSaved() {
-        this.showEditGoalModal.set(false);
+    onGoalSaved() {
+        this.showGoalModal.set(null);
         this.loadStudentData(this.studentId()!);
     }
 
     onAddGoal() {
-        this.showAddGoalModal.set(true);
+        this.showGoalModal.set('add');
     }
 
     onGoalCreated(goal: StudentGoalItem) {
-        this.showAddGoalModal.set(false);
+        this.showGoalModal.set(null);
         this.studentService.notifyDataChanged();
         this.loadStudentData(this.studentId()!).then(() => {
             this.selectedGoalId.set(goal.goalId);

From e77c867beb593d99d25596442962061143456d3b Mon Sep 17 00:00:00 2001
From: Oliver Pelly <opelly@gmail.com>
Date: Wed, 8 Apr 2026 16:13:01 -0700
Subject: [PATCH 5/6] visual cleanup

---
 .../components/workspace/workspace.html       |  8 ++---
 .../desktop/components/workspace/workspace.ts |  1 +
 .../src/app/desktop/pages/home/home.html      | 10 +++---
 .../src/app/desktop/pages/home/home.scss      | 16 +++++++++
 .../src/app/desktop/pages/home/home.ts        | 35 ++++++++++++++++++-
 5 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
index 4df120a..0915d49 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
@@ -29,13 +29,13 @@
         <span class="student-iep">IEP {{ formatDate(student()!.nextIepDate) }}</span>
     </div>
     <div class="goal-tabs">
+        <button class="goal-tab add-goal" (click)="onAddGoal()">+ Goal</button>
         @for (g of goals(); track g.goalId) {
         <button class="goal-tab" [class.active]="selectedGoalId() === g.goalId || (selectedGoal()?.goalId === g.goalId)"
             (click)="onSelectGoal(g.goalId)">
             {{ g.category }}
         </button>
         }
-        <button class="goal-tab add-goal" (click)="onAddGoal()">+ Goal</button>
     </div>
 </div>
 
@@ -46,15 +46,15 @@
     <div class="goal-card">
         <div class="goal-card-header">
             <span class="goal-badge">{{ selectedGoal()!.category }} Goal</span>
-            @if (selectedGoal()!.targetCompletionDate) {
-            <span class="goal-due">Due {{ formatDate(selectedGoal()!.targetCompletionDate) }}</span>
-            }
             <button class="edit-icon" (click)="onEditGoal()" aria-label="Edit goal">
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"
                     stroke-linecap="round" stroke-linejoin="round">
                     <path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
                 </svg>
             </button>
+            @if (selectedGoal()!.targetCompletionDate) {
+            <span class="goal-due">Due {{ formatDate(selectedGoal()!.targetCompletionDate) }}</span>
+            }
         </div>
         <p class="goal-description">{{ selectedGoal()!.description }}</p>
     </div>
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
index 0606865..fa32d2a 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
@@ -28,6 +28,7 @@ export class Workspace {
             const goalId = params.get('goalId');
 
             if (studentId && studentId !== this.studentId()) {
+                this.selectedGoalId.set(null);
                 this.studentId.set(studentId);
                 this.loadStudentData(studentId);
             } else if (!studentId) {
diff --git a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html
index 8e6b9d2..644ca6c 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html
@@ -28,7 +28,11 @@
         </div>
 
         <div class="student-list">
-            @for (s of students(); track s.studentId) {
+            @for (group of groupedStudents(); track group.label) {
+            @if (group.label) {
+            <div class="group-header">{{ group.label }}</div>
+            }
+            @for (s of group.students; track s.studentId) {
             <div class="student-item" [class.active]="selectedStudentId() === s.studentId"
                 (click)="onSelectStudent(s)">
                 <div class="student-item-info">
@@ -37,9 +41,6 @@
                     </div>
                     <div class="student-item-meta">
                         IEP: {{ formatDate(s.nextIepDate) }}
-                        @if (showAll() && s.ownerName) {
-                        <span class="owner-tag">· {{ s.ownerName }}</span>
-                        }
                     </div>
                 </div>
                 <button class="edit-pencil" (click)="onEditStudent(s, $event)" aria-label="Edit student">
@@ -50,6 +51,7 @@
                 </button>
             </div>
             }
+            }
         </div>
 
         <div class="sidebar-footer">
diff --git a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss
index 594f681..526c704 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss
+++ b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss
@@ -97,6 +97,22 @@
     padding: 0 8px 8px;
 }
 
+.group-header {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-faint);
+    padding: 12px 12px 4px;
+    margin-top: 4px;
+    border-top: 1px solid var(--border-color);
+
+    &:first-child {
+        border-top: none;
+        margin-top: 0;
+    }
+}
+
 .student-item {
     padding: 10px 12px;
     border-radius: var(--radius-lg);
diff --git a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts
index 390459d..3257f9a 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts
@@ -1,4 +1,4 @@
-import { Component, effect, inject, signal } from '@angular/core';
+import { Component, computed, effect, inject, signal } from '@angular/core';
 import { RouterLink, RouterOutlet, Router } from '@angular/router';
 import { Auth } from '../../../shared/services/auth';
 import { StudentService } from '../../../shared/services/student.service';
@@ -42,6 +42,39 @@ export class Home {
     protected readonly showAddStudentModal = signal(false);
     protected readonly editingStudent = signal<StudentCardDto | null>(null);
 
+    // Groups students by owner when "All" is active.
+    protected readonly groupedStudents = computed(() => {
+        const all = this.students();
+        if (!this.showAll()) {
+            return [{ label: null, students: all }];
+        }
+
+        const mine = all.filter(s => s.isMine);
+        const others = all.filter(s => !s.isMine);
+
+        // Group others by ownerName.
+        const byOwner = new Map<string, StudentCardDto[]>();
+        for (const s of others) {
+            const key = s.ownerName || 'Unknown';
+            const list = byOwner.get(key) || [];
+            list.push(s);
+            byOwner.set(key, list);
+        }
+
+        const groups: { label: string | null; students: StudentCardDto[] }[] = [];
+        if (mine.length) {
+            groups.push({ label: 'My Students', students: mine });
+        }
+        // Sort other teachers alphabetically.
+        const sortedKeys = [...byOwner.keys()].sort((a, b) =>
+            a.localeCompare(b, undefined, { sensitivity: 'base' })
+        );
+        for (const key of sortedKeys) {
+            groups.push({ label: key, students: byOwner.get(key)! });
+        }
+        return groups;
+    });
+
     // ************************ Event Handlers *************************
 
     onSelectStudent(student: StudentCardDto) {

From 6e6b36ee5094d6ee37fe2475633786137305f330 Mon Sep 17 00:00:00 2001
From: Oliver Pelly <opelly@gmail.com>
Date: Wed, 8 Apr 2026 16:21:33 -0700
Subject: [PATCH 6/6] fixed duplicative API calls

---
 .../app/desktop/components/workspace/workspace.ts   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
index fa32d2a..fa886e8 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
@@ -1,4 +1,4 @@
-import { Component, computed, effect, inject, signal } from '@angular/core';
+import { Component, computed, effect, inject, signal, untracked } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { StudentService } from '../../../shared/services/student.service';
 import { StudentCardDto } from '../../../shared/classes/student-card.dto';
@@ -41,12 +41,17 @@ export class Workspace {
             }
         });
 
-        // When dataVersion changes and we have a student loaded, refresh
+        // When dataVersion changes and we have a student loaded, refresh.
+        // Use untracked() for studentId so this effect only re-runs on
+        // dataVersion changes — route params already handle studentId changes.
         let initialized = false;
         effect(() => {
             this.studentService.dataVersion();
-            if (initialized && this.studentId()) {
-                this.loadStudentData(this.studentId()!);
+            if (initialized) {
+                const id = untracked(() => this.studentId());
+                if (id) {
+                    this.loadStudentData(id);
+                }
             }
             initialized = true;
         });