diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts
index 7938a4e274..454a60b26a 100644
--- a/src/app/doubtfire-angular.module.ts
+++ b/src/app/doubtfire-angular.module.ts
@@ -43,6 +43,7 @@ import {UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
 import {MatDialogModule as MatDialogModuleNew} from '@angular/material/dialog';
 import {AlertService} from 'src/app/common/services/alert.service';
 import {AlertComponent} from 'src/app/common/services/alert.service';
+import {MatSidenavModule} from '@angular/material/sidenav';
 
 import {setTheme} from 'ngx-bootstrap/utils';
 
@@ -613,6 +614,7 @@ const MY_DATE_FORMAT = {
     MatDialogModuleNew,
     CalendarModule.forRoot({provide: CalendarDateAdapter, useFactory: adapterFactory}),
     CodeEditorModule.forRoot(),
+    MatSidenavModule,
   ],
 })
 
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 37191fb944..708f2fbfe3 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
@@ -1,116 +1,129 @@
-<div class="flex flex-row gap-8">
-  <div class="flex-grow flex flex-col gap-8 gap-y-0">
-    <div class="flex flex-row">
-      <div>
-        <h3>Task List</h3>
-        <p>Plan the list of tasks for students to complete.</p>
-      </div>
-      <span class="flex-grow"></span>
-      <div>
-        <mat-form-field appearance="outline">
-          <input
-            matInput
-            (keyup)="applyFilter($event.target.value)"
-            placeholder="Filter"
-            [(ngModel)]="filter"
-          />
-        </mat-form-field>
-      </div>
+<div class="flex-grow flex flex-col gap-8 gap-y-0">
+  <div class="flex flex-row">
+    <div>
+      <h3>Task List</h3>
+      <p>Plan the list of tasks for students to complete.</p>
     </div>
-
-    <table
-      class="flex-grow f-table selectable"
-      mat-table
-      [dataSource]="taskDefinitionSource"
-      matSort
-      (matSortChange)="sortData($event)"
-    >
-      <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)"
-        >
-          {{ 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)"
-        >
-          {{ 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)"
-        >
-          {{ 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)"
-        >
-          {{ 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)"
-        >
-          {{ taskDefinition.dueDate | date: 'd LLL y' }}
-        </td>
-      </ng-container>
-      <ng-container matColumnDef="taskDefAction" sticky>
-        <th mat-header-cell *matHeaderCellDef></th>
-        <td mat-cell *matCellDef="let taskDefinition">
-          @if (taskDefinitionHasChanges(taskDefinition)) {
+    <span class="flex-grow"></span>
+    <div>
+      <mat-form-field appearance="outline">
+        <input
+          matInput
+          (keyup)="applyFilter($event.target.value)"
+          placeholder="Filter"
+          [(ngModel)]="filter"
+        />
+      </mat-form-field>
+    </div>
+  </div>
+  <mat-drawer-container class="h-[1000px]">
+    <mat-drawer mode="side" opened
+      ><table
+        class="flex-grow f-table selectable"
+        mat-table
+        [dataSource]="taskDefinitionSource"
+        matSort
+        (matSortChange)="sortData($event)"
+      >
+        <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)"
+          >
+            {{ 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)"
+          >
+            {{ 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)"
+          >
+            {{ 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)"
+          >
+            {{ 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)"
+          >
+            {{ taskDefinition.dueDate | date: 'd LLL y' }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="taskDefAction" sticky>
+          <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)"
+              aria-label="delete task definition"
+              color="warn"
+              (click)="deleteTaskDefinition(taskDefinition)"
             >
-              <mat-icon>save</mat-icon>
+              <mat-icon>delete</mat-icon>
             </button>
-          }
-          <button
-            mat-icon-button
-            aria-label="delete task definition"
-            color="warn"
-            (click)="deleteTaskDefinition(taskDefinition)"
-          >
-            <mat-icon>delete</mat-icon>
-          </button>
-        </td>
-      </ng-container>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <td mat-footer-cell *matFooterCellDef [colSpan]="columns.length"></td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="columns"></tr>
+        <tr
+          mat-row
+          *matRowDef="let row; columns: columns"
+          [style.background]="selectedTaskDefinition === row ? 'lightblue' : ''"
+        ></tr></table
+    ></mat-drawer>
+    <mat-drawer-content>
+      @if (selectedTaskDefinition) {
+        <f-task-definition-editor
+          [taskDefinition]="selectedTaskDefinition"
+          [unit]="unit"
+        ></f-task-definition-editor>
+      }
+    </mat-drawer-content>
+  </mat-drawer-container>
+
+  <!-- <div class="flex flex-row gap-8">
+
 
-      <!-- Action footer row -->
-      <ng-container matColumnDef="actions">
-        <td mat-footer-cell *matFooterCellDef [colSpan]="columns.length"></td>
-      </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="columns"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: columns"
-        [style.background]="selectedTaskDefinition === row ? 'lightblue' : ''"
-      ></tr>
-    </table>
     <span class="flex items-center">
       <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
       <span class="flex-grow"></span>
@@ -132,11 +145,7 @@ <h3>Task List</h3>
       <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>
-    }
+
   </div>
+</div> -->
 </div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts
index 8fea690462..302619ecc6 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts
@@ -1,15 +1,19 @@
-import { AfterViewInit, Component, Inject, Input, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
-import { Subscription } from 'rxjs';
-import { confirmationModal, csvResultModalService, csvUploadModalService } from 'src/app/ajs-upgraded-providers';
-import { TaskDefinition } from 'src/app/api/models/task-definition';
-import { Unit } from 'src/app/api/models/unit';
-import { TaskDefinitionService } from 'src/app/api/services/task-definition.service';
-import { AlertService } from 'src/app/common/services/alert.service';
-import { addWeeks } from 'date-fns';
-import { FeedbackTemplateService } from 'src/app/api/services/feedback-template.service';
+import {AfterViewInit, Component, Inject, Input, ViewChild} from '@angular/core';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {Subscription} from 'rxjs';
+import {
+  confirmationModal,
+  csvResultModalService,
+  csvUploadModalService,
+} from 'src/app/ajs-upgraded-providers';
+import {TaskDefinition} from 'src/app/api/models/task-definition';
+import {Unit} from 'src/app/api/models/unit';
+import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+import {addWeeks} from 'date-fns';
+import {FeedbackTemplateService} from 'src/app/api/services/feedback-template.service';
 
 @Component({
   selector: 'f-unit-task-editor',
@@ -17,14 +21,21 @@ import { FeedbackTemplateService } from 'src/app/api/services/feedback-template.
   styleUrls: ['unit-task-editor.component.scss'],
 })
 export class UnitTaskEditorComponent implements AfterViewInit {
-  @ViewChild(MatTable, { static: false }) table: MatTable<TaskDefinition>;
-  @ViewChild(MatSort, { static: false }) sort: MatSort;
-  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+  @ViewChild(MatTable, {static: false}) table: MatTable<TaskDefinition>;
+  @ViewChild(MatSort, {static: false}) sort: MatSort;
+  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
 
   @Input() unit: Unit;
 
   public taskDefinitionSource: MatTableDataSource<TaskDefinition>;
-  public columns: string[] = ['name', 'grade', 'startDate', 'targetDate', 'deadlineDate', 'taskDefAction'];
+  public columns: string[] = [
+    'name',
+    // 'grade',
+    // 'startDate',
+    // 'targetDate',
+    // 'deadlineDate',
+    'taskDefAction',
+  ];
   public filter: string;
   public selectedTaskDefinition: TaskDefinition;
 
@@ -34,7 +45,7 @@ export class UnitTaskEditorComponent implements AfterViewInit {
     private alerts: AlertService,
     @Inject(csvResultModalService) private csvResultModalService: any,
     @Inject(csvUploadModalService) private csvUploadModal: any,
-    @Inject(confirmationModal) private confirmationModal: any
+    @Inject(confirmationModal) private confirmationModal: any,
   ) {}
 
   ngAfterViewInit(): void {
@@ -43,8 +54,9 @@ export class UnitTaskEditorComponent implements AfterViewInit {
         this.taskDefinitionSource = new MatTableDataSource<TaskDefinition>(taskDefinitions);
         this.taskDefinitionSource.paginator = this.paginator;
         this.taskDefinitionSource.sort = this.sort;
-        this.taskDefinitionSource.filterPredicate = (data: any, filter: string) => data.matches(filter);
-      })
+        this.taskDefinitionSource.filterPredicate = (data: any, filter: string) =>
+          data.matches(filter);
+      }),
     );
   }
 
@@ -154,7 +166,7 @@ export class UnitTaskEditorComponent implements AfterViewInit {
     this.csvUploadModal.show(
       'Upload Task Definitions as CSV',
       'Test message',
-      { file: { name: 'Task Definition CSV Data', type: 'csv' } },
+      {file: {name: 'Task Definition CSV Data', type: 'csv'}},
       this.unit.getTaskDefinitionBatchUploadUrl(),
       (response: any) => {
         // at least one student?
@@ -162,7 +174,7 @@ export class UnitTaskEditorComponent implements AfterViewInit {
         if (response.success.length > 0) {
           this.unit.refresh();
         }
-      }
+      },
     );
   }
 
@@ -170,7 +182,7 @@ export class UnitTaskEditorComponent implements AfterViewInit {
     this.csvUploadModal.show(
       'Upload Task Sheets and Resources as Zip',
       'Test message',
-      { file: { name: 'Task Sheets and Resources', type: 'zip' } },
+      {file: {name: 'Task Sheets and Resources', type: 'zip'}},
       this.unit.taskUploadUrl,
       (response: any) => {
         // at least one student?
@@ -178,7 +190,7 @@ export class UnitTaskEditorComponent implements AfterViewInit {
         if (response.success.length > 0) {
           this.unit.refresh();
         }
-      }
+      },
     );
   }