diff --git a/src/app/api/models/project.ts b/src/app/api/models/project.ts
index b0125e8d6..bde396b74 100644
--- a/src/app/api/models/project.ts
+++ b/src/app/api/models/project.ts
@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Entity, EntityCache, RequestOptions } from 'ngx-entity-service';
 import { Observable, tap } from 'rxjs';
-import { alertService, visualisations } from 'src/app/ajs-upgraded-providers';
+import { visualisations } from 'src/app/ajs-upgraded-providers';
 import { AppInjector } from 'src/app/app-injector';
 import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
 import { MappingFunctions } from '../services/mapping-fn';
@@ -22,6 +22,7 @@ import {
   User,
 } from './doubtfire-model';
 import { TaskOutcomeAlignment } from './task-outcome-alignment';
+import { AlertService } from 'src/app/common/services/alert.service';
 
 export class Project extends Entity {
   public id: number;
@@ -82,7 +83,7 @@ export class Project extends Entity {
       this.tutorials.filter(
         (enrol) =>
           enrol.abbreviation.toLowerCase().indexOf(matchText) >= 0 ||
-          enrol.tutorName.toLowerCase().indexOf(matchText) >= 0
+          enrol.tutorName.toLowerCase().indexOf(matchText) >= 0,
       ).length > 0
     );
   }
@@ -226,7 +227,7 @@ export class Project extends Entity {
 
   // Assigns a grade to a student
   public assignGrade(score: number, rationale: string): void {
-    const alerts: any = AppInjector.get(alertService);
+    const alerts = AppInjector.get(AlertService);
     const projectService: ProjectService = AppInjector.get(ProjectService);
     const oldGrade: number = this.grade;
     this.grade = score;
@@ -241,12 +242,13 @@ export class Project extends Entity {
         },
       })
       .subscribe({
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         next: (project) => {
-          alerts.add('success', 'Grade updated.', 2000);
+          alerts.success('Grade updated.');
         },
         error: (message) => {
           this.grade = oldGrade;
-          alerts.add('danger', `Grade was not updated: ${message}`, 8000);
+          alerts.error(`Grade was not updated: ${message}`);
         },
       });
   }
@@ -286,7 +288,7 @@ export class Project extends Entity {
       .pipe(
         tap(() => {
           this.portfolioFiles = this.portfolioFiles.filter((value) => value != file);
-        })
+        }),
       );
   }
 
@@ -344,19 +346,15 @@ export class Project extends Entity {
   }
 
   public updateUnitEnrolment(): void {
-    const expected = (this.enrolled = !this.enrolled);
-    const alerts: any = AppInjector.get(alertService);
+    const alerts = AppInjector.get(AlertService);
     const projectService: ProjectService = AppInjector.get(ProjectService);
     projectService.update(this).subscribe({
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       next: (project) => {
-        if (expected == project.enrolled) {
-          alerts.add('success', 'Enrolment changed.', 2000);
-        } else {
-          alerts.add('danger', 'Enrolment change failed.', 5000);
-        }
+        alerts.success('Enrolment changed.', 2000);
       },
       error: (message) => {
-        alerts.add('danger', message, 5000);
+        alerts.error(message);
       },
     });
   }
@@ -391,7 +389,7 @@ export class Project extends Entity {
     // dates = unit.start_date.to_date.step(unit.end_date.to_date + 1.week, step=7).to_a
     const endDateValue = this.unit.endDate.getTime() + MappingFunctions.weeksMs(3);
     const dates = MappingFunctions.step(this.unit.startDate.getTime(), endDateValue, MappingFunctions.weeksMs(1)).map(
-      (val) => new Date(val)
+      (val) => new Date(val),
     );
 
     // Get the target task from the unit's task definitions
@@ -409,7 +407,7 @@ export class Project extends Entity {
     const tasks = this.tasks;
 
     const readyOrCompleteTasks = tasks.filter((task) =>
-      ['ready_for_feedback', 'discuss', 'demonstrate', 'complete'].includes(task.status)
+      ['ready_for_feedback', 'discuss', 'demonstrate', 'complete'].includes(task.status),
     );
     let lastTargetDate: Date;
 
@@ -417,7 +415,7 @@ export class Project extends Entity {
 
     // Get the tasks currently marked as done (or ready to mark)
     const doneTasks = tasks.filter(
-      (t) => !['working_on_it', 'not_started', 'fix_and_resubmit', 'redo', 'need_help'].includes(t.status)
+      (t) => !['working_on_it', 'not_started', 'fix_and_resubmit', 'redo', 'need_help'].includes(t.status),
     );
 
     // last done task date)
diff --git a/src/app/common/edit-profile-form/edit-profile-form.component.html b/src/app/common/edit-profile-form/edit-profile-form.component.html
index 57d661613..8b993072a 100644
--- a/src/app/common/edit-profile-form/edit-profile-form.component.html
+++ b/src/app/common/edit-profile-form/edit-profile-form.component.html
@@ -1,4 +1,4 @@
-<form #form="ngForm" (ngSubmit)="submit()" fxLayout="column" fxLayoutAlign="center start">
+<form #form="ngForm" (ngSubmit)="submit()" fxLayout="column" fxLayoutAlign="center start" class="p-16">
   <div class="main-container" style="width: 100%" fxLayout="row" fxLayoutAlign="center start">
     <div class="main" style="width: 100%" fxLayout="column" fxLayoutAlign="start start">
       <!-- avatar -->
diff --git a/src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service.ts b/src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service.ts
index 2843904d0..7541f6dd4 100644
--- a/src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service.ts
+++ b/src/app/common/modals/edit-profile-dialog/edit-profile-dialog.service.ts
@@ -11,6 +11,7 @@ export class EditProfileDialogService {
 
   openDialog(user: User): void {
     this.dialog.open(EditProfileFormComponent, {
+      width: '800px',
       data: { user, mode: 'edit' },
     });
   }
diff --git a/src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.html b/src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.html
index 9c90ccafa..4797fff33 100644
--- a/src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.html
+++ b/src/app/units/states/edit/directives/unit-students-editor/unit-students-editor.component.html
@@ -6,7 +6,7 @@ <h3>Enrolled Students</h3>
     </div>
     <div class="spacer"></div>
     <div class="filter">
-      <mat-form-field>
+      <mat-form-field appearance="outline">
         <mat-label>Search</mat-label>
         <input matInput (keyup)="applyFilter($event)" />
       </mat-form-field>
@@ -48,7 +48,7 @@ <h3>Enrolled Students</h3>
     <!-- campus Column -->
     <ng-container matColumnDef="campus" sticky>
       <th mat-header-cell *matHeaderCellDef mat-sort-header>Campus</th>
-      <td mat-cell *matCellDef="let project">
+      <td mat-cell *matCellDef="let project" class="pt-4">
         <student-campus-select [unit]="unit" [student]="project" [update]="true"></student-campus-select>
       </td>
     </ng-container>
@@ -56,7 +56,7 @@ <h3>Enrolled Students</h3>
     <!-- Tutorial Column -->
     <ng-container matColumnDef="tutorial" sticky>
       <th mat-header-cell *matHeaderCellDef>Tutorial</th>
-      <td mat-cell *matCellDef="let project">
+      <td mat-cell *matCellDef="let project" class="pt-4">
         <student-tutorial-select [unit]="unit" [student]="project"></student-tutorial-select>
       </td>
     </ng-container>
@@ -65,7 +65,11 @@ <h3>Enrolled Students</h3>
     <ng-container matColumnDef="enrolled" sticky>
       <th mat-header-cell *matHeaderCellDef mat-sort-header>Enrolled</th>
       <td mat-cell *matCellDef="let project">
-        <mat-checkbox [(ngModel)]="project.enrolled" (click)="project.updateUnitEnrolment()"></mat-checkbox>
+        <mat-checkbox
+          color="primary"
+          [(ngModel)]="project.enrolled"
+          (click)="project.updateUnitEnrolment()"
+        ></mat-checkbox>
       </td>
     </ng-container>
 
diff --git a/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.html b/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.html
index c6b41d369..d908dfa8c 100644
--- a/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.html
+++ b/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.html
@@ -9,12 +9,12 @@ <h4>{{ stream.name }} - {{ stream.abbreviation }}</h4>
       </div>
 
       <ng-template #doStreamEdit>
-        <mat-form-field>
+        <mat-form-field appearance="outline">
           <mat-label>Name</mat-label>
           <input matInput [(ngModel)]="stream.name" />
         </mat-form-field>
         <span>-</span>
-        <mat-form-field>
+        <mat-form-field appearance="outline">
           <mat-label>Abbreviation</mat-label>
           <input matInput [(ngModel)]="stream.abbreviation" />
         </mat-form-field>
@@ -45,13 +45,13 @@ <h4>Tutorials without a stream</h4>
           {{ tutorial.abbreviation }}
         </div>
         <ng-template #edit>
-          <mat-form-field class="data-entry">
+          <mat-form-field appearance="outline" class="data-entry" >
             <input matInput required formControlName="abbreviation" placeholder="Abbreviation" />
           </mat-form-field>
         </ng-template>
       </td>
       <td mat-footer-cell *matFooterCellDef>
-        <mat-form-field class="data-entry">
+        <mat-form-field appearance="outline" class="data-entry">
           <input matInput required formControlName="abbreviation" placeholder="Abbreviation" />
         </mat-form-field>
       </td>
@@ -65,7 +65,7 @@ <h4>Tutorials without a stream</h4>
           {{ tutorial.campus ? tutorial.campus.name : '' }}
         </div>
         <ng-template #edit>
-          <mat-form-field class="data-entry">
+          <mat-form-field appearance="outline" class="data-entry">
             <mat-label>Campus</mat-label>
             <mat-select [compareWith]="compareSelection" formControlName="campus">
               <mat-option [value]="null">Not Specified</mat-option>
@@ -77,7 +77,7 @@ <h4>Tutorials without a stream</h4>
         </ng-template>
       </td>
       <td mat-footer-cell *matFooterCellDef>
-        <mat-form-field class="data-entry">
+        <mat-form-field appearance="outline" class="data-entry">
           <mat-label>Campus</mat-label>
           <mat-select formControlName="campus">
             <mat-option [value]="null">Not Specified</mat-option>
@@ -97,13 +97,13 @@ <h4>Tutorials without a stream</h4>
           {{ tutorial.meetingLocation }}
         </div>
         <ng-template #edit>
-          <mat-form-field class="data-entry">
+          <mat-form-field appearance="outline" class="data-entry">
             <input matInput required formControlName="meetingLocation" placeholder="Location" />
           </mat-form-field>
         </ng-template>
       </td>
       <td mat-footer-cell *matFooterCellDef>
-        <mat-form-field class="data-entry">
+        <mat-form-field appearance="outline" class="data-entry">
           <input matInput required formControlName="meetingLocation" placeholder="Location" />
         </mat-form-field>
       </td>
@@ -117,7 +117,7 @@ <h4>Tutorials without a stream</h4>
           {{ tutorial.meetingDay }}
         </div>
         <ng-template #edit>
-          <mat-form-field class="data-entry">
+          <mat-form-field appearance="outline" class="data-entry">
             <mat-label>Day</mat-label>
             <mat-select required formControlName="meetingDay">
               <mat-option *ngFor="let day of days" [value]="day">
@@ -128,7 +128,7 @@ <h4>Tutorials without a stream</h4>
         </ng-template>
       </td>
       <td mat-footer-cell *matFooterCellDef>
-        <mat-form-field class="data-entry">
+        <mat-form-field appearance="outline" class="data-entry">
           <mat-label>Day</mat-label>
           <mat-select required formControlName="meetingDay">
             <mat-option *ngFor="let day of days" [value]="day">
@@ -147,7 +147,7 @@ <h4>Tutorials without a stream</h4>
           {{ tutorial.meetingTime }}
         </div>
         <ng-template #edit>
-          <mat-form-field class="data-entry">
+          <mat-form-field appearance="outline" class="data-entry">
             <input
               matInput
               required
@@ -159,7 +159,7 @@ <h4>Tutorials without a stream</h4>
         </ng-template>
       </td>
       <td mat-footer-cell *matFooterCellDef>
-        <mat-form-field class="data-entry">
+        <mat-form-field appearance="outline" class="data-entry">
           <input matInput required formControlName="meetingTime" placeholder="Time" />
         </mat-form-field>
       </td>
@@ -173,7 +173,7 @@ <h4>Tutorials without a stream</h4>
           {{ tutorial.tutor?.name }}
         </div>
         <ng-template #edit>
-          <mat-form-field class="data-entry">
+          <mat-form-field appearance="outline" class="data-entry">
             <mat-label>Tutor</mat-label>
             <mat-select required [compareWith]="compareSelection" formControlName="tutor">
               <mat-option *ngFor="let tutor of unit.staffUsers" [value]="tutor">
@@ -184,7 +184,7 @@ <h4>Tutorials without a stream</h4>
         </ng-template>
       </td>
       <td mat-footer-cell *matFooterCellDef>
-        <mat-form-field class="data-entry">
+        <mat-form-field appearance="outline" class="data-entry">
           <mat-label>Tutor</mat-label>
           <mat-select required formControlName="tutor">
             <mat-option *ngFor="let tutor of unit.staffUsers" [value]="tutor">
@@ -203,13 +203,13 @@ <h4>Tutorials without a stream</h4>
           {{ tutorial.capacity }}
         </div>
         <ng-template #edit>
-          <mat-form-field class="data-entry">
+          <mat-form-field appearance="outline" class="data-entry">
             <input matInput required formControlName="capacity" placeholder="Capacity" />
           </mat-form-field>
         </ng-template>
       </td>
       <td mat-footer-cell *matFooterCellDef>
-        <mat-form-field class="data-entry">
+        <mat-form-field appearance="outline" class="data-entry">
           <input matInput required formControlName="capacity" placeholder="Capacity" />
         </mat-form-field>
       </td>
diff --git a/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.ts b/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.ts
index 4ca15bc57..a507dc44d 100644
--- a/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.ts
+++ b/src/app/units/states/edit/directives/unit-tutorials-list/unit-tutorials-list.component.ts
@@ -46,7 +46,7 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> im
     private tutorialStreamService: TutorialStreamService,
     private campusService: CampusService,
     @Inject(confirmationModal) private confirmationModal: any,
-    @Inject(alertService) private alerts: any
+    @Inject(alertService) private alerts: any,
   ) {
     super(
       {
@@ -58,7 +58,7 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> im
         capacity: new UntypedFormControl('', [Validators.required]),
         tutor: new UntypedFormControl(null, [Validators.required]),
       },
-      'Tutorial'
+      'Tutorial',
     );
   }
 
@@ -80,7 +80,7 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> im
 
   private filterTutorials(): void {
     this.tutorials = this.unit.tutorials.filter(
-      (tutorial) => tutorial.tutorialStream === this.stream || (!tutorial.tutorialStream && !this.stream)
+      (tutorial) => tutorial.tutorialStream === this.stream || (!tutorial.tutorialStream && !this.stream),
     );
     this.dataSource.data = this.tutorials;
   }
@@ -189,7 +189,7 @@ export class UnitTutorialsListComponent extends EntityFormComponent<Tutorial> im
           error: (message) => {
             this.alerts.add('danger', `Failed to delete stream. ${message}`, 8000);
           },
-        })
+        }),
     );
   }