diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.html
index 77c15ddec..5bbf1e64e 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.html
@@ -1,138 +1,146 @@
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      1
+<div class="flex-col pr-32">
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        1
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Task details</h3>
-    <p class="font-normal text-gray-700">Name the task and set target grade</p>
-    <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-      <f-task-definition-general [taskDefinition]="taskDefinition"></f-task-definition-general>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Task details</h3>
+      <p class="font-normal text-gray-700">Name the task and set target grade</p>
+      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
+        <f-task-definition-general [taskDefinition]="taskDefinition"></f-task-definition-general>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      2
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        2
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Inbox</h3>
-    <p class="font-normal text-gray-700">Who assesses {{ unit.hasGroupwork() ? 'and submits ' : '' }}this task?</p>
-    <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-      <f-task-definition-who [taskDefinition]="taskDefinition"></f-task-definition-who>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Inbox</h3>
+      <p class="font-normal text-gray-700">
+        Who assesses {{ unit.hasGroupwork() ? 'and submits ' : '' }}this task?
+      </p>
+      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
+        <f-task-definition-who [taskDefinition]="taskDefinition"></f-task-definition-who>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      3
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        3
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Due dates</h3>
-    <p class="font-normal text-gray-700">When is this task due?</p>
-    <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-      <f-task-definition-dates [taskDefinition]="taskDefinition"></f-task-definition-dates>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Due dates</h3>
+      <p class="font-normal text-gray-700">When is this task due?</p>
+      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
+        <f-task-definition-dates [taskDefinition]="taskDefinition"></f-task-definition-dates>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      4
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        4
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Upload requirements</h3>
-    <p class="font-normal text-gray-700">What do students need to upload?</p>
-    <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-      <f-task-definition-upload [taskDefinition]="taskDefinition"></f-task-definition-upload>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Upload requirements</h3>
+      <p class="font-normal text-gray-700">What do students need to upload?</p>
+      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
+        <f-task-definition-upload [taskDefinition]="taskDefinition"></f-task-definition-upload>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      5
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        5
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Task description and resources</h3>
-    <p class="font-normal text-gray-700">Upload task descriptions and resources</p>
-    <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-      <f-task-definition-resources [taskDefinition]="taskDefinition"></f-task-definition-resources>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">
+        Task description and resources
+      </h3>
+      <p class="font-normal text-gray-700">Upload task descriptions and resources</p>
+      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
+        <f-task-definition-resources
+          [taskDefinition]="taskDefinition"
+        ></f-task-definition-resources>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      6
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        6
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Task assessment automation</h3>
-    <p class="font-normal text-gray-700" *ngIf="!overseerEnabled">Automation is not enabled</p>
-    <p class="font-normal text-gray-700" *ngIf="overseerEnabled">Configure automated assessment</p>
-    <div class="bg-white border border-gray-200 rounded-xl shadow p-6" *ngIf="overseerEnabled">
-      <f-task-definition-overseer [taskDefinition]="taskDefinition"></f-task-definition-overseer>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">
+        Task assessment automation
+      </h3>
+      <p class="font-normal text-gray-700" *ngIf="!overseerEnabled">Automation is not enabled</p>
+      <p class="font-normal text-gray-700" *ngIf="overseerEnabled">
+        Configure automated assessment
+      </p>
+      <div class="bg-white border border-gray-200 rounded-xl shadow p-6" *ngIf="overseerEnabled">
+        <f-task-definition-overseer [taskDefinition]="taskDefinition"></f-task-definition-overseer>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      7
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        7
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Optional settings</h3>
-    <p class="font-normal text-gray-700">Configure automated assessment</p>
-    <mat-accordion>
-      <mat-expansion-panel>
-        <mat-expansion-panel-header>
-          <mat-panel-title> Options </mat-panel-title>
-        </mat-expansion-panel-header>
-        <f-task-definition-options [taskDefinition]="taskDefinition"></f-task-definition-options>
-      </mat-expansion-panel>
-    </mat-accordion>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Optional settings</h3>
+      <p class="font-normal text-gray-700">Configure automated assessment</p>
+      <mat-accordion>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title> Options </mat-panel-title>
+          </mat-expansion-panel-header>
+          <f-task-definition-options [taskDefinition]="taskDefinition"></f-task-definition-options>
+        </mat-expansion-panel>
+      </mat-accordion>
+    </div>
   </div>
 </div>
-
-<mat-toolbar>
-  <mat-toolbar-row class="flex flex-row">
-    <span class="flex-grow"></span>
-    <button mat-button mat-raised-button color="primary" (click)="save()"><mat-icon>save</mat-icon>Save</button>
-  </mat-toolbar-row>
-</mat-toolbar>
+<div class="w-full flex flex-row place-content-end sticky bottom-16 z-10">
+  <button mat-fab color="primary" (click)="save()"><mat-icon>save</mat-icon></button>
+</div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.html
index 9c6c146b8..5ec2551e0 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-general/task-definition-general.component.html
@@ -3,8 +3,8 @@
     <mat-label>Grade where task appears</mat-label>
     <mat-select [(ngModel)]="taskDefinition.targetGrade" required>
       @for (grade of grades; track grade) {
-  <mat-option [value]="grade.value">{{ grade.viewValue }}</mat-option>
-}
+        <mat-option [value]="grade.value">{{ grade.viewValue }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
@@ -23,3 +23,8 @@
   <mat-label>Descriptive task name</mat-label>
   <input matInput [(ngModel)]="taskDefinition.name" required />
 </mat-form-field>
+
+<mat-form-field appearance="outline" class="flex flex-grow">
+  <mat-label>Task description</mat-label>
+  <textarea matInput [(ngModel)]="taskDefinition.description" required> </textarea>
+</mat-form-field>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html
index d874a5a13..d346b1ce8 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html
@@ -8,7 +8,12 @@ <h3>Task List</h3>
       <span class="flex-grow"></span>
       <div>
         <mat-form-field appearance="outline">
-          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter" [(ngModel)]="filter" />
+          <input
+            matInput
+            (keyup)="applyFilter($event.target.value)"
+            placeholder="Filter"
+            [(ngModel)]="filter"
+          />
         </mat-form-field>
       </div>
     </div>
@@ -22,31 +27,51 @@ <h3>Task List</h3>
     >
       <ng-container matColumnDef="name" sticky>
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Task Name</th>
-        <td mat-cell *matCellDef="let taskDefinition" (click)="selectTaskDefinition(taskDefinition)">
+        <td
+          mat-cell
+          *matCellDef="let taskDefinition"
+          (click)="selectTaskDefinition(taskDefinition)"
+        >
           {{ taskDefinition.abbreviation }} {{ taskDefinition.name }}
         </td>
       </ng-container>
       <ng-container matColumnDef="grade" sticky>
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Grade</th>
-        <td mat-cell *matCellDef="let taskDefinition" (click)="selectTaskDefinition(taskDefinition)">
+        <td
+          mat-cell
+          *matCellDef="let taskDefinition"
+          (click)="selectTaskDefinition(taskDefinition)"
+        >
           {{ taskDefinition.targetGradeText }}
         </td>
       </ng-container>
       <ng-container matColumnDef="startDate" sticky>
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Start Date</th>
-        <td mat-cell *matCellDef="let taskDefinition" (click)="selectTaskDefinition(taskDefinition)">
+        <td
+          mat-cell
+          *matCellDef="let taskDefinition"
+          (click)="selectTaskDefinition(taskDefinition)"
+        >
           {{ taskDefinition.startDate | date: 'd LLL y' }}
         </td>
       </ng-container>
       <ng-container matColumnDef="targetDate" sticky>
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Due Date</th>
-        <td mat-cell *matCellDef="let taskDefinition" (click)="selectTaskDefinition(taskDefinition)">
+        <td
+          mat-cell
+          *matCellDef="let taskDefinition"
+          (click)="selectTaskDefinition(taskDefinition)"
+        >
           {{ taskDefinition.targetDate | date: 'd LLL y' }}
         </td>
       </ng-container>
       <ng-container matColumnDef="deadlineDate" sticky>
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Deadline</th>
-        <td mat-cell *matCellDef="let taskDefinition" (click)="selectTaskDefinition(taskDefinition)">
+        <td
+          mat-cell
+          *matCellDef="let taskDefinition"
+          (click)="selectTaskDefinition(taskDefinition)"
+        >
           {{ taskDefinition.dueDate | date: 'd LLL y' }}
         </td>
       </ng-container>
@@ -54,16 +79,15 @@ <h3>Task List</h3>
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let taskDefinition">
           @if (taskDefinitionHasChanges(taskDefinition)) {
-<button
-            mat-icon-button
-            aria-label="save task definition"
-            color="primary"
-            (click)="saveTaskDefinition(taskDefinition)"
-           
-          >
-            <mat-icon>save</mat-icon>
-          </button>
-}
+            <button
+              mat-icon-button
+              aria-label="save task definition"
+              color="primary"
+              (click)="saveTaskDefinition(taskDefinition)"
+            >
+              <mat-icon>save</mat-icon>
+            </button>
+          }
           <button
             mat-icon-button
             aria-label="delete task definition"
@@ -91,22 +115,29 @@ <h3>Task List</h3>
       <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
       <span class="flex-grow"></span>
       <label>Definitions CSV</label>
-      <button mat-icon-button (click)="unit.downloadTaskDefinitionsCsv()"><mat-icon>download</mat-icon></button>
-      <button mat-icon-button (click)="uploadTaskDefinitionsCsv()"><mat-icon>upload_file</mat-icon></button>
+      <button mat-icon-button (click)="unit.downloadTaskDefinitionsCsv()">
+        <mat-icon>download</mat-icon>
+      </button>
+      <button mat-icon-button (click)="uploadTaskDefinitionsCsv()">
+        <mat-icon>upload_file</mat-icon>
+      </button>
       <span class="flex-grow"></span>
       <label>Resources as Zip</label>
-      <button mat-icon-button (click)="unit.downloadAllTaskResourcesZip()"><mat-icon>download</mat-icon></button>
-      <button mat-icon-button (click)="uploadTaskResourcesZip()"><mat-icon>upload_file</mat-icon></button>
+      <button mat-icon-button (click)="unit.downloadAllTaskResourcesZip()">
+        <mat-icon>download</mat-icon>
+      </button>
+      <button mat-icon-button (click)="uploadTaskResourcesZip()">
+        <mat-icon>upload_file</mat-icon>
+      </button>
       <span class="flex-grow"></span>
       <button mat-raised-button color="primary" (click)="createTaskDefinition()">Add Task</button>
     </span>
     @if (selectedTaskDefinition) {
-<f-task-definition-editor
-     
-      [taskDefinition]="selectedTaskDefinition"
-      [unit]="unit"
-    ></f-task-definition-editor>
-}
+      <f-task-definition-editor
+        [taskDefinition]="selectedTaskDefinition"
+        [unit]="unit"
+      ></f-task-definition-editor>
+    }
   </div>
   <!-- <div class="flex flex-col gap-4">
     <h3>Batch Upload Tasks</h3>