diff --git a/src/app/api/services/extension.service.ts b/src/app/api/services/extension.service.ts
new file mode 100644
index 0000000000..f7944e3840
--- /dev/null
+++ b/src/app/api/services/extension.service.ts
@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { UserService } from 'src/app/api/models/doubtfire-model';
+
+interface GrantExtensionPayload {
+  student_ids: number[];
+  task_definition_id: number;
+  weeks_requested: number;
+  comment: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExtensionService {
+  constructor(
+    private http: HttpClient,
+    private userService: UserService
+  ) {}
+
+  grantExtension(unitId: number, payload: GrantExtensionPayload): Observable<any> {
+    const authToken = this.userService.currentUser?.authenticationToken ?? '';
+    const username = this.userService.currentUser?.username ?? '';
+
+    const headers = new HttpHeaders({
+      'Auth-Token': authToken,
+      'Username': username
+    });
+
+    return this.http.post(
+      `/api/units/${unitId}/staff-grant-extension`,
+      payload,
+      { headers }
+    );
+  }
+}
diff --git a/src/app/common/header/header.component.html b/src/app/common/header/header.component.html
index 96706776c9..e36a4aed83 100644
--- a/src/app/common/header/header.component.html
+++ b/src/app/common/header/header.component.html
@@ -50,6 +50,11 @@
         <mat-icon>qr_code_scanner</mat-icon>
       </button>
     }
+
+    @if (currentUser.role === 'Student') {
+      <f-notifications-button></f-notifications-button>
+    }
+
     @if (currentUser.role === 'Admin' || currentUser.role === 'Convenor') {
       <button
         #menuState="matMenuTrigger"
diff --git a/src/app/common/header/notifications-button/notifications-button.component.css b/src/app/common/header/notifications-button/notifications-button.component.css
new file mode 100644
index 0000000000..201c2788dd
--- /dev/null
+++ b/src/app/common/header/notifications-button/notifications-button.component.css
@@ -0,0 +1,80 @@
+.notification-panel {
+  position: absolute;
+  top: 60px;
+  right: 20px;
+  width: 450px;
+  max-height: 75vh;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  overflow-y: auto;
+  padding: 16px;
+  scrollbar-width: thin;
+  scrollbar-color: #ccc transparent;
+}
+
+.notification-panel::-webkit-scrollbar {
+  width: 6px;
+}
+.notification-panel::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 10px;
+}
+
+.notification-panel mat-list-item {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 14px 16px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  background: #fdfdfd;
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.notification-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  gap: 10px;
+}
+
+.notification-content span {
+  flex: 1;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.5;
+  font-size: 11px;
+}
+
+.notification-content button {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+}
+
+.notification-badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: red;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+  border-radius: 50%;
+  padding: 4px 7px;
+  line-height: 1;
+  min-width: 18px;
+  text-align: center;
+}
+
+.delete-all-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
+}
diff --git a/src/app/common/header/notifications-button/notifications-button.component.html b/src/app/common/header/notifications-button/notifications-button.component.html
new file mode 100644
index 0000000000..0fa383c179
--- /dev/null
+++ b/src/app/common/header/notifications-button/notifications-button.component.html
@@ -0,0 +1,35 @@
+<button mat-icon-button (click)="toggleNotifications()" aria-label="Notifications" class="notification-button">
+  <mat-icon>notifications</mat-icon>
+  <span *ngIf="notifications.length > 0" class="notification-badge">{{ notifications.length }}</span>
+</button>
+
+<!-- Notification List Panel -->
+<div *ngIf="showNotifications" class="notification-panel" #panel>
+  <mat-list>
+    <mat-list-item *ngFor="let note of notifications">
+      <div class="notification-content">
+        <span class="mat-body-2">{{ note.message }}</span>
+        <button mat-icon-button aria-label="Dismiss notification" (click)="dismissNotification(note.id)">
+          <mat-icon>close</mat-icon>
+        </button>
+      </div>
+    </mat-list-item>
+
+    <!-- If no notifications -->
+    <mat-list-item *ngIf="notifications.length === 0">
+      <span class="mat-body-2">No notifications</span>
+    </mat-list-item>
+  </mat-list>
+
+  <div *ngIf="notifications.length > 0" class="delete-all-container">
+    <button mat-button color="warn" (click)="deleteAllNotifications()">Delete All</button>
+  </div>
+
+  <div class="close-container">
+    <button mat-button (click)="toggleNotifications()">Close</button>
+  </div>
+</div>
+
+
+
+
diff --git a/src/app/common/header/notifications-button/notifications-button.component.spec.ts b/src/app/common/header/notifications-button/notifications-button.component.spec.ts
new file mode 100644
index 0000000000..7dedd16e77
--- /dev/null
+++ b/src/app/common/header/notifications-button/notifications-button.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationsButtonComponent } from './notifications-button.component';
+
+describe('NotificationsButtonComponent', () => {
+  let component: NotificationsButtonComponent;
+  let fixture: ComponentFixture<NotificationsButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NotificationsButtonComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NotificationsButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/common/header/notifications-button/notifications-button.component.ts b/src/app/common/header/notifications-button/notifications-button.component.ts
new file mode 100644
index 0000000000..fd38bc8355
--- /dev/null
+++ b/src/app/common/header/notifications-button/notifications-button.component.ts
@@ -0,0 +1,62 @@
+import { Component, OnInit, ElementRef, HostListener } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { AppInjector } from 'src/app/app-injector';
+import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
+
+interface Notification {
+  id: number;
+  message: string;
+}
+
+@Component({
+  selector: 'f-notifications-button',
+  templateUrl: './notifications-button.component.html',
+  styleUrls: ['./notifications-button.component.css']
+})
+export class NotificationsButtonComponent implements OnInit {
+  showNotifications = false;
+  notifications: Notification[] = [];
+  private readonly API_URL = AppInjector.get(DoubtfireConstants).API_URL;
+
+  constructor(private http: HttpClient, private eRef: ElementRef) {}
+
+  ngOnInit() {
+    this.loadNotifications();
+  }
+
+  toggleNotifications() {
+    this.showNotifications = !this.showNotifications;
+  }
+
+  loadNotifications() {
+    this.http.get<Notification[]>(`${this.API_URL}/notifications`).subscribe({
+      next: data => this.notifications = data,
+      error: err => console.error('Error loading notifications', err)
+    });
+  }
+
+  dismissNotification(notificationId: number) {
+    this.http.delete(`${this.API_URL}/notifications/${notificationId}`).subscribe({
+      next: () => {
+        this.notifications = this.notifications.filter(note => note.id !== notificationId);
+      },
+      error: err => console.error('Error deleting notification', err)
+    });
+  }
+
+  deleteAllNotifications() {
+    this.http.delete(`${this.API_URL}/notifications`).subscribe({
+      next: () => {
+        this.notifications = [];
+      },
+      error: err => console.error('Error deleting all notifications', err)
+    });
+  }
+
+  @HostListener('document:click', ['$event'])
+  clickOutside(event: Event) {
+    if (this.showNotifications && !this.eRef.nativeElement.contains(event.target)) {
+      this.showNotifications = false;
+    }
+  }
+}
diff --git a/src/app/common/header/task-dropdown/task-dropdown.component.html b/src/app/common/header/task-dropdown/task-dropdown.component.html
index c5d1d763d4..bd4adf75d3 100644
--- a/src/app/common/header/task-dropdown/task-dropdown.component.html
+++ b/src/app/common/header/task-dropdown/task-dropdown.component.html
@@ -150,6 +150,11 @@
         @if (
           unitRole.role === 'Convenor' || unitRole.role === 'Admin' || unitRole.role === 'Auditor'
         ) {
+        <button uiSref="units/staff_grant_extension" [uiParams]="{unitId: unitRole.unit.id}" mat-menu-item>
+          <mat-icon aria-label="Staff Grant Extension" fontIcon="schedule"></mat-icon>Staff Grant Extension
+        </button>
+      }
+        @if (unitRole.role === 'Convenor' || unitRole.role === 'Admin' || unitRole.role === 'Auditor') {
           <button uiSref="units/admin" [uiParams]="{unitId: unitRole.unit.id}" mat-menu-item>
             <mat-icon aria-label="Unit Administration" fontIcon="admin_panel_settings"></mat-icon>
             Administration
diff --git a/src/app/common/header/task-dropdown/task-dropdown.component.ts b/src/app/common/header/task-dropdown/task-dropdown.component.ts
index b67f220b03..1dd4b0e7be 100644
--- a/src/app/common/header/task-dropdown/task-dropdown.component.ts
+++ b/src/app/common/header/task-dropdown/task-dropdown.component.ts
@@ -29,6 +29,7 @@ export class TaskDropdownComponent {
     'Tutorial List': 'Tutorials',
     'Unit Administration': 'Admin',
     'Unit Analytics': 'Analytics',
+    'Staff Grant Extension': 'Extension',
   };
 
   taskDropdownData: { title: string; target: string; visible: any }[];
diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts
index 318c601b35..67307534db 100644
--- a/src/app/doubtfire-angular.module.ts
+++ b/src/app/doubtfire-angular.module.ts
@@ -297,6 +297,7 @@ import {PortfolioIncludedTasksComponent} from './projects/states/portfolio/direc
 import {OverseerScriptEditorModalComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/overseer-script-editor-modal/overseer-script-editor-modal.component';
 import {CodeEditorModule} from '@ngstack/code-editor';
 import {UploadGradesComponent} from './units/states/portfolios/upload-grades/upload-grades.component';
+import {NotificationsButtonComponent} from './common/header/notifications-button/notifications-button.component';
 
 // See https://stackoverflow.com/questions/55721254/how-to-change-mat-datepicker-date-format-to-dd-mm-yyyy-in-simplest-way/58189036#58189036
 const MY_DATE_FORMAT = {
@@ -310,6 +311,11 @@ const MY_DATE_FORMAT = {
     monthYearA11yLabel: 'MMMM yyyy',
   },
 };
+// import {UnitStudentEnrolmentModalComponent} from './units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component';
+import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
+import {StaffGrantExtensionComponent} from './units/states/tasks/staff-grant-extension/staff-grant-extension.component';
+import {StaffGrantExtensionFormComponent} from './units/states/tasks/staff-grant-extension/grant-extension-form/grant-extension-form.component';
+import {StaffGrantExtensionSummaryComponent} from './units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component';
 
 @NgModule({
   // Components we declare
@@ -452,6 +458,10 @@ const MY_DATE_FORMAT = {
     AnalyticsTutorTimesComponent,
     PortfolioIncludedTasksComponent,
     OverseerScriptEditorModalComponent,
+    NotificationsButtonComponent,
+    StaffGrantExtensionComponent,
+    StaffGrantExtensionSummaryComponent,
+    StaffTaskListComponent,
   ],
   providers: [
     // Services we provide
@@ -541,6 +551,7 @@ const MY_DATE_FORMAT = {
     LtiService,
     TaskPrerequisiteService,
     MarkingSessionService,
+    provideAnimationsAsync(),
   ],
   imports: [
     FlexLayoutModule,
@@ -594,6 +605,7 @@ const MY_DATE_FORMAT = {
     EmojiModule,
     PdfViewerModule,
     LottieComponent,
+    StaffGrantExtensionFormComponent,
     UIRouterUpgradeModule.forRoot({states: doubtfireStates}),
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: environment.production,
diff --git a/src/app/doubtfire.states.ts b/src/app/doubtfire.states.ts
index 01b722864a..a3b39fc71d 100644
--- a/src/app/doubtfire.states.ts
+++ b/src/app/doubtfire.states.ts
@@ -8,6 +8,12 @@ import {TeachingPeriodListComponent} from './admin/states/teaching-periods/teach
 import {AcceptEulaComponent} from './eula/accept-eula/accept-eula.component';
 import {FUsersComponent} from './admin/states/f-users/f-users.component';
 import {FUnitsComponent} from './admin/states/f-units/f-units.component';
+// import {UnauthorisedComponent} from './errors/states/unauthorised/unauthorised.component';
+import {StaffGrantExtensionComponent} from './units/states/tasks/staff-grant-extension/staff-grant-extension.component';
+// import {ProjectDashboardComponent} from './projects/states/dashboard/project-dashboard/project-dashboard.component';
+// import {UnitRootState} from './units/unit-root-state.component';
+// import {ProjectRootState} from './projects/states/project-root-state.component';
+// import {TaskViewerState} from './units/task-viewer/task-viewer-state.component';
 import {ScormPlayerComponent} from './common/scorm-player/scorm-player.component';
 import {TutorDiscussionComponent} from './projects/states/tutor-discussion/tutor-discussion.component';
 import {SuccessCloseComponent} from './common/success-close/success-close.component';
@@ -15,6 +21,10 @@ import {ProjectPlanComponent} from './projects/states/plan/project-plan.componen
 import {JplagReportViewerComponent} from './projects/states/jplag/jplag-report-viewer.component';
 import {LtiDashboardComponent} from './home/states/lti-dashboard/lti-dashboard.component';
 import {LtiUnitLinkComponent} from './home/states/lti-unit-link/lti-unit-link.component';
+import {Ng2ViewDeclaration} from '@uirouter/angular';
+// import {GrantExtensionFormComponent} from './admin/modals/grant-extension-form/grant-extension-form.component';
+import {UnitAnalyticsComponent} from './units/states/analytics/unit-analytics-route.component'; // Todo @SGE team: Replace with SGE component
+
 /*
  * Use this file to store any states that are sourced by angular components.
  */
@@ -571,6 +581,32 @@ const LtiUnitLinkState: NgHybridStateDeclaration = {
   },
 };
 
+/**
+ * Define the Staff Grant Extension state.
+ */
+const StaffGrantExtensionState: NgHybridStateDeclaration = { // Todo @Jason: Navigating to this route makes the `TaskDropdown` disappear - fix
+  name: 'units/staff_grant_extension',
+  url: '/units/:unitId/staff_grant_extension',
+  resolve: {
+    unitId: [
+      '$stateParams',
+      function ($stateParams) {
+        return $stateParams.unitId;
+      },
+    ],
+  },
+  views: {
+    main: {
+      component: StaffGrantExtensionComponent,
+    },
+  },
+  data: {
+    task: 'Staff Grant Extension',
+    pageTitle: 'Staff Grant Extension',
+    roleWhitelist: ['Tutor', 'Convenor', 'Admin'],
+  },
+};
+
 /**
  * Export the list of states we have created in angular
  */
@@ -596,4 +632,11 @@ export const doubtfireStates = [
   LtiDashboardState,
   LtiUnitLinkState,
   TutorAttendance,
+  // GrantExtensionState,
+  // UnauthoriedState,
+  // ProjectRootState,
+  // ProjectDashboardState,
+  // UnitRootState,
+  // TaskViewerState,
+  StaffGrantExtensionState,
 ];
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.html b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.html
index 7463d4fb13..5d78eaae19 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.html
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.html
@@ -15,9 +15,9 @@ <h2 class="mb-0">{{ task?.statusLabel() }}</h2>
         @for (trigger of triggers; track trigger) {
           <mat-option [value]="trigger.status">
             <status-icon [status]="trigger.status" [showTooltip]="false"></status-icon>
-            <span style="display: inline-flex; margin-left: 10px"
-              ><h5>{{ trigger.label }}</h5></span
-            >
+            <span style="display: inline-flex; margin-left: 10px">
+              <h5>{{ trigger.label }}</h5>
+            </span>
           </mat-option>
         }
       </mat-select>
@@ -41,6 +41,8 @@ <h5>{{ task?.statusLabel() }}</h5>
     }
   </mat-card-content>
 
+  @if ( task?.unit.currentUserIsStaff || task?.canApplyForExtension() || (task?.inSubmittedState() &&
+  task?.requiresFileUpload()) ) {
   <mat-card-actions class="space-x-2">
     <button
       mat-stroked-button
@@ -54,6 +56,8 @@ <h5>{{ task?.statusLabel() }}</h5>
 
     @if (task?.canApplyForExtension()) {
       <button mat-stroked-button (click)="applyForExtension()">Request extension</button>
+    } @if (task?.inSubmittedState() && task?.requiresFileUpload()) {
+    <button mat-stroked-button (click)="updateFilesInSubmission()">Upload new files</button>
     }
     @if (task?.inSubmittedState() && task?.requiresFileUpload()) {
       <button mat-stroked-button (click)="updateFilesInSubmission()">Upload new files</button>
@@ -61,5 +65,13 @@ <h5>{{ task?.statusLabel() }}</h5>
     <button mat-raised-button color="primary" (click)="openDiscussionQrCode()">
       Show Discussion QR
     </button>
+    @if (currentUser?.role === 'Admin' || currentUser?.role === 'Convenor') {
+      <button mat-stroked-button (click)="openGrantExtensionDialog()">
+        Grant Extension
+      </button>
+
+    }
+
   </mat-card-actions>
+}
 </mat-card>
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.ts
index 70934d7d51..184a93e2ef 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/directives/task-status-card/task-status-card.component.ts
@@ -8,9 +8,10 @@ import {ExtensionModalService} from 'src/app/common/modals/extension-modal/exten
 import {QrModalService} from 'src/app/common/modals/qr-modal/qr-modal.service';
 import {DoubtfireConstants} from 'src/app/config/constants/doubtfire-constants';
 import {SubmissionTypeModalService} from 'src/app/tasks/modals/submission-type-modal/submission-type-modal.service';
-
-import {Project} from 'src/app/api/models/project';
+import {MatDialog} from '@angular/material/dialog';
+// import {GrantExtensionFormComponent} from 'src/app/admin/modals/grant-extension-form/grant-extension-form.component';
 import {UserService} from 'src/app/api/services/user.service';
+import {Project} from 'src/app/api/models/project';
 @Component({
   selector: 'f-task-status-card',
   templateUrl: './task-status-card.component.html',
@@ -27,6 +28,7 @@ export class TaskStatusCardComponent implements OnChanges, AfterViewInit {
     private doubtfireConstants: DoubtfireConstants,
     private submissionTypeModalService: SubmissionTypeModalService,
     private userService: UserService,
+    private dialog: MatDialog,
   ) {}
 
   @Input() task: Task;
diff --git a/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.ts b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.ts
new file mode 100644
index 0000000000..b9230045f9
--- /dev/null
+++ b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.ts
@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {CdkDragEnd, CdkDragMove, CdkDragStart} from '@angular/cdk/drag-drop';
+import {Component, Input, OnInit} from '@angular/core';
+import {
+  BehaviorSubject,
+  Observable,
+  Subject,
+  auditTime,
+  merge,
+  of,
+  tap,
+  withLatestFrom,
+} from 'rxjs';
+import {ProjectService} from 'src/app/api/services/project.service';
+import {GlobalStateService} from '../../index/global-state.service';
+import {UserService} from 'src/app/api/services/user.service';
+import {Project, TaskDefinition} from 'src/app/api/models/doubtfire-model';
+import { MatDialog } from '@angular/material/dialog';
+@Component({
+  selector: 'f-project-dashboard',
+  templateUrl: './project-dashboard.component.html',
+  styleUrl: './project-dashboard.component.css',
+})
+export class ProjectDashboardComponent implements OnInit {
+  @Input() public project$: Observable<Project>;
+
+  /**
+   * The currently selected task definition - selected in the unit task list.
+   * This is crated here, and passed to children to interact with and share across context.
+   */
+  public selectedTaskDefinition$: BehaviorSubject<TaskDefinition> =
+    new BehaviorSubject<TaskDefinition>(null);
+
+  subs$: Observable<unknown>;
+
+  private leftComponentStartSize$ = new Subject<number>();
+  private dragMove$ = new Subject<{event: CdkDragMove; div: HTMLDivElement}>();
+  private dragMoveAudited$;
+
+  projectTasks = [];
+
+  constructor(
+    private currentUser: UserService,
+    private projectService: ProjectService,
+    private globalStateService: GlobalStateService,
+    private dialog: MatDialog,
+  ) {}
+
+  startedDragging(event: CdkDragStart, div: HTMLDivElement) {
+    event.source.element.nativeElement.classList.add('hovering');
+    const w = div.getBoundingClientRect().width;
+    this.leftComponentStartSize$.next(w);
+  }
+
+  dragging(event: CdkDragMove, div: HTMLDivElement) {
+    this.dragMove$.next({event, div});
+    event.source.reset();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  stoppedDragging(event: CdkDragEnd, _div: HTMLDivElement) {
+    event.source.element.nativeElement.classList.remove('hovering');
+  }
+
+  ngOnInit(): void {
+    // projectTasks = this.projectService.loadProject
+    this.project$.subscribe((project) => {
+      console.log(project);
+    });
+
+    this.dragMoveAudited$ = this.dragMove$.pipe(
+      withLatestFrom(this.leftComponentStartSize$),
+      auditTime(30),
+      tap(([moveEvent, startSize]) => {
+        window.dispatchEvent(new Event('resize'));
+
+        let newWidth: number;
+        let width: number;
+        if (moveEvent.div.id === 'inboxpanel') {
+          newWidth = startSize + moveEvent.event.distance.x;
+
+          // if width is belo 250, snap to 50px
+          if (newWidth < 250 && newWidth > 100) {
+            width = 250;
+          } else if (newWidth < 150) {
+            width = 50;
+          } else {
+            width = Math.min(newWidth, 500);
+          }
+        } else {
+          newWidth = startSize - moveEvent.event.distance.x;
+          width = Math.min(Math.max(newWidth, 250), 500);
+        }
+        moveEvent.div.style.width = `${width}px`;
+        moveEvent.event.source.reset();
+      }),
+    );
+    this.subs$ = merge(this.dragMoveAudited$, of(true));
+    window.dispatchEvent(new Event('resize'));
+  }
+}
diff --git a/src/app/units/states/tasks/staff-grant-extension/grant-extension-form/grant-extension-form.component.html b/src/app/units/states/tasks/staff-grant-extension/grant-extension-form/grant-extension-form.component.html
new file mode 100644
index 0000000000..013d58915e
--- /dev/null
+++ b/src/app/units/states/tasks/staff-grant-extension/grant-extension-form/grant-extension-form.component.html
@@ -0,0 +1,105 @@
+<form [formGroup]="grantExtensionForm" (ngSubmit)="submitForm()">
+  <!-- Student Selection with Search -->
+  <div class="w-full mb-4">
+    <mat-form-field appearance="fill" class="w-full">
+      <mat-label>Search Students</mat-label>
+      <input matInput
+             [(ngModel)]="searchQuery"
+             (ngModelChange)="filterStudents()"
+             [ngModelOptions]="{standalone: true}"
+             placeholder="Type to search students...">
+    </mat-form-field>
+
+    <!-- Select All Option -->
+    <div class="flex items-center px-2 mt-0" *ngIf="showStudentList">
+      <mat-checkbox
+        #selectAllBox
+        [checked]="selectedStudents?.length === filteredStudents?.length"
+        (change)="toggleSelectAll()"
+        (mouseup)="handleCheckboxBlur()"
+        color="primary"
+        disableRipple>
+        Select All
+      </mat-checkbox>
+    </div>
+
+    <!-- Student List -->
+    <div *ngIf="showStudentList"
+         class="student-list-container mt-4"
+         [class.border-red-500]="grantExtensionForm.get('students')?.touched && grantExtensionForm.get('students')?.invalid"
+         [class.border-2]="grantExtensionForm.get('students')?.touched && grantExtensionForm.get('students')?.invalid"
+         style="max-height: 200px; min-height: 100px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 4px; padding: 8px; scrollbar-width: thin; scrollbar-color: #888 #f1f1f1;">
+      <div *ngFor="let student of filteredStudents"
+           class="flex items-center px-4 py-2 cursor-pointer transition-colors duration-200"
+           [class.hover:bg-gray-100]="!isStudentSelected(student.id)"
+           [class.bg-blue-100]="isStudentSelected(student.id)"
+           (click)="toggleStudent(student.id)"
+           (keydown)="handleStudentKeydown($event, student.id)"
+           tabindex="0"
+           role="option"
+           [attr.aria-selected]="isStudentSelected(student.id)">
+        {{ student.name }} ({{ student.id }})
+      </div>
+    </div>
+  </div>
+
+  <!-- Student Selection Error -->
+  <div *ngIf="grantExtensionForm.get('students')?.touched && grantExtensionForm.get('students')?.invalid" style="color: #f44336; font-size: 12px; margin-top: 4px; margin-bottom: 24px;">
+    Please select at least one student.
+  </div>
+
+  <!-- Extension Duration -->
+  <div class="mb-8">
+    <label for="extension" class="block text-xl font-semibold text-gray-900 mb-4">
+      Extension Duration: <strong>{{ grantExtensionForm.get('extension')?.value }}</strong> week(s)
+    </label>
+
+    <div [class.border-red-500]="grantExtensionForm.get('extension')?.touched && grantExtensionForm.get('extension')?.invalid"
+         [class.border-2]="grantExtensionForm.get('extension')?.touched && grantExtensionForm.get('extension')?.invalid"
+         [class.border]="grantExtensionForm.get('extension')?.touched && grantExtensionForm.get('extension')?.invalid"
+         [class.rounded]="grantExtensionForm.get('extension')?.touched && grantExtensionForm.get('extension')?.invalid"
+         [class.p-2]="grantExtensionForm.get('extension')?.touched && grantExtensionForm.get('extension')?.invalid">
+      <mat-slider
+        min="1"
+        max="4"
+        step="1"
+        tickInterval="5"
+        thumbLabel
+        class="w-full"
+        style="width: 100%; max-width: 600px; min-width: 300px;"
+      >
+        <input matSliderThumb formControlName="extension" />
+      </mat-slider>
+    </div>
+
+    <mat-error *ngIf="grantExtensionForm.get('extension')?.touched && grantExtensionForm.get('extension')?.invalid" class="mt-2">
+      Please select a valid extension duration (1-4 weeks).
+    </mat-error>
+  </div>
+
+  <!-- Reason Field -->
+  <mat-form-field appearance="fill" class="w-full mb-4">
+    <mat-label>Reason</mat-label>
+    <textarea
+      matInput
+      formControlName="reason"
+      rows="4"
+      required
+      maxlength="300"
+      placeholder="Explain why extension is needed (max 300 characters)"
+    ></textarea>
+    <mat-hint align="end">{{grantExtensionForm.get('reason')?.value?.length || 0}}/300</mat-hint>
+    <mat-error *ngIf="grantExtensionForm.get('reason')?.touched && grantExtensionForm.get('reason')?.invalid">
+      Please provide a reason for the extension (max 300 characters).
+    </mat-error>
+  </mat-form-field>
+
+  <!-- Form Buttons -->
+  <div class="flex justify-end gap-3 mt-6">
+    <button mat-button type="button" (click)="resetForm()" [disabled]="isSubmitting">Reset</button>
+    <button mat-flat-button color="primary" type="submit" [disabled]="isSubmitting">
+      Grant Extension
+    </button>
+  </div>
+</form>
+
diff --git a/src/app/units/states/tasks/staff-grant-extension/grant-extension-form/grant-extension-form.component.spec.ts b/src/app/units/states/tasks/staff-grant-extension/grant-extension-form/grant-extension-form.component.spec.ts
new file mode 100644
index 0000000000..6686218bcf
--- /dev/null
+++ b/src/app/units/states/tasks/staff-grant-extension/grant-extension-form/grant-extension-form.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { StaffGrantExtensionFormComponent } from './grant-extension-form.component';
+
+describe('StaffGrantExtensionFormComponent', () => {
+  let component: StaffGrantExtensionFormComponent;
+  let fixture: ComponentFixture<StaffGrantExtensionFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StaffGrantExtensionFormComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StaffGrantExtensionFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/units/states/tasks/staff-grant-extension/grant-extension-form/grant-extension-form.component.ts b/src/app/units/states/tasks/staff-grant-extension/grant-extension-form/grant-extension-form.component.ts
new file mode 100644
index 0000000000..5dd96710c0
--- /dev/null
+++ b/src/app/units/states/tasks/staff-grant-extension/grant-extension-form/grant-extension-form.component.ts
@@ -0,0 +1,307 @@
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ExtensionService } from 'src/app/api/services/extension.service';
+import { FormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { UserService } from 'src/app/api/models/doubtfire-model';
+import { finalize } from 'rxjs/operators';
+import { ExtensionServiceResult, ExtensionSummaryPayload } from 'src/app/units/states/tasks/staff-grant-extension/models/extension-results.model';
+
+@Component({
+  selector: 'f-staff-grant-extension-form',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    CommonModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    MatSliderModule,
+    MatButtonModule,
+    FormsModule,
+    MatCheckboxModule
+  ],
+  templateUrl: './grant-extension-form.component.html'
+})
+export class StaffGrantExtensionFormComponent implements OnInit {
+  @Output() extensionResult = new EventEmitter<ExtensionSummaryPayload>();
+
+  grantExtensionForm!: FormGroup;
+  isSubmitting = false;
+  searchQuery = '';
+  selectedStudents: number[] = [];
+  showStudentList = true;
+
+  // Old hardcoded values (for reference):
+  // unitId = 1;
+  // taskDefinitionId = 25;
+  // students = [
+  //   { id: 1, name: 'Joe M' },
+  //   { id: 2, name: 'Sahiru W' },
+  //   { id: 3, name: 'Samindi M' },
+  //   { id: 4, name: 'Student 4' },
+  //   { id: 5, name: 'Student 5' },
+  //   { id: 6, name: 'Student 6' },
+  //   { id: 7, name: 'Student 7' },
+  //   { id: 8, name: 'Student 8' },
+  //   { id: 9, name: 'Student 9' },
+  //   { id: 10, name: 'Student 10' },
+  //   { id: 11, name: 'Student 11' },
+  //   { id: 12, name: 'Student 12' },
+  //   { id: 13, name: 'Student 13' },
+  //   { id: 14, name: 'Student 14' },
+  //   { id: 15, name: 'Student 15' },
+  //   { id: 16, name: 'Student 16' },
+  //   { id: 17, name: 'Student 17' },
+  //   { id: 18, name: 'Student 18' },
+  //   { id: 19, name: 'Student 19' },
+  //   { id: 20, name: 'Student 20' }
+  // ];
+
+  @Input() unitId!: number;
+  @Input() taskDefinitionId!: number;
+  @Input() students: { id: number; name: string }[] = [];
+  filteredStudents: { id: number; name: string }[] = [];
+
+  constructor(
+    private fb: FormBuilder,
+    private snackBar: MatSnackBar,
+    private extensionService: ExtensionService,
+    private http: HttpClient,
+    private userService: UserService
+  ) { }
+
+  // Build headers for API calls
+  private buildHeaders(): HttpHeaders {
+    const authToken = this.userService.currentUser?.authenticationToken ?? '';
+    const username = this.userService.currentUser?.username ?? '';
+    return new HttpHeaders({
+      'Auth-Token': authToken,
+      'Username': username
+    });
+  }
+
+  // Load students for the unit
+  private loadUnitStudents(): void {
+    if (!this.unitId) return;
+
+    this.http.get<{ student: { id: number; first_name: string; last_name: string } }[]>(
+      `/api/students?unit_id=${this.unitId}`,
+      { headers: this.buildHeaders() }
+    ).subscribe({
+      next: (projects) => {
+        this.students = (projects ?? []).map(p => ({
+          id: p.student.id,
+          name: `${p.student.first_name} ${p.student.last_name}`
+        }));
+        this.filteredStudents = this.students;
+      },
+      error: () => {
+        this.students = [];
+        this.filteredStudents = [];
+      }
+    });
+  }
+
+  // Initialize the reactive form with validators for each field
+  ngOnInit(): void {
+    this.grantExtensionForm = this.fb.group({
+      students: [[], Validators.required],
+      extension: [1, [Validators.required, Validators.min(1)]],
+      reason: ['', [Validators.required, Validators.maxLength(300)]]
+    });
+
+    this.filteredStudents = this.students;
+
+    if (!this.students?.length) {
+      this.loadUnitStudents();
+    }
+  }
+
+  // Filters students based on search query
+  filterStudents(): void {
+    if (!this.searchQuery.trim()) {
+      this.filteredStudents = this.students;
+    } else {
+      this.filteredStudents = this.students.filter(student =>
+        student.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
+        student.id.toString().includes(this.searchQuery)
+      );
+    }
+  }
+
+  // Toggle student selection
+  toggleStudent(studentId: number): void {
+    const index = this.selectedStudents.indexOf(studentId);
+    if (index > -1) {
+      this.selectedStudents.splice(index, 1);
+    } else {
+      this.selectedStudents.push(studentId);
+    }
+    this.updateFormStudents();
+  }
+
+  // Check if student is selected
+  isStudentSelected(studentId: number): boolean {
+    return this.selectedStudents.includes(studentId);
+  }
+
+  // Toggle select all students
+  toggleSelectAll(): void {
+    if (this.selectedStudents.length === this.filteredStudents.length) {
+      this.selectedStudents = [];
+    } else {
+      this.selectedStudents = this.filteredStudents.map(student => student.id);
+    }
+    this.updateFormStudents();
+  }
+
+  // Update form control with selected students
+  updateFormStudents(): void {
+    this.grantExtensionForm.patchValue({
+      students: this.selectedStudents
+    });
+  }
+
+  // Handle keyboard navigation for student list
+  handleStudentKeydown(event: KeyboardEvent, studentId: number): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.toggleStudent(studentId);
+    }
+  }
+
+  // Handle checkbox blur to prevent immediate closing
+  handleCheckboxBlur(): void {
+    setTimeout(() => {
+      this.showStudentList = true;
+    }, 100);
+  }
+
+  // Submit the form
+  submitForm(): void {
+    // Mark all form controls as touched to trigger validation display
+    this.markFormGroupTouched();
+
+    if (this.grantExtensionForm.valid && !this.isSubmitting) {
+      this.isSubmitting = true;
+
+      const formData = this.grantExtensionForm.value;
+
+      // Create the payload for the extension service
+      const payload = {
+        student_ids: this.selectedStudents,
+        task_definition_id: this.taskDefinitionId,
+        weeks_requested: formData.extension,
+        comment: formData.reason
+      };
+
+      // Submit the extension request
+      this.extensionService.grantExtension(this.unitId, payload)
+        .pipe(
+          finalize(() => { this.isSubmitting = false; }) // added this: always unset submitting flag
+        )
+        .subscribe({
+          next: (results: ExtensionServiceResult) => {
+            this.snackBar.open('Extensions granted successfully!', 'Close', {
+              duration: 3000,
+              horizontalPosition: 'center',
+              verticalPosition: 'top'
+            });
+
+            // Build summary payload including weeksRequested and createdAt timestamp
+            const summaryPayload: ExtensionSummaryPayload = {
+              results: results,
+              weeksRequested: payload.weeks_requested,
+              createdAt: new Date().toISOString(),
+              taskDefinitionId: this.taskDefinitionId!
+            };
+
+            // Emit the detailed summary so parent can show it
+            this.extensionResult.emit(summaryPayload);
+
+            // Reset form
+            this.resetForm();
+
+        },
+        error: (error) => {
+          console.error('Error granting extensions:', error);
+
+          // Extract specific error message from the API response
+          let errorMessage = 'Error granting extensions. Please try again.';
+
+          // Check if error is directly a string (most common case)
+          if (typeof error === 'string') {
+            errorMessage = error;
+          } else if (error?.error) {
+            // Check if error.error is a string
+            if (typeof error.error === 'string') {
+              errorMessage = error.error;
+            } else if (error.error.error) {
+              errorMessage = error.error.error;
+            } else if (error.error.message) {
+              errorMessage = error.error.message;
+            }
+          } else if (error?.message) {
+            errorMessage = error.message;
+          }
+
+          const errorResults = error?.error?.results;
+          if (errorResults) {
+            const summaryPayload: ExtensionSummaryPayload = {
+              results: errorResults,
+              weeksRequested: payload.weeks_requested,
+              createdAt: new Date().toISOString(),
+              taskDefinitionId: this.taskDefinitionId!
+            };
+            this.extensionResult.emit(summaryPayload);
+          }
+
+          this.snackBar.open(errorMessage, 'Close', {
+            duration: 7000,
+            horizontalPosition: 'center',
+            verticalPosition: 'top',
+            panelClass: ['error-snackbar']
+          });
+        }
+      });
+    } else {
+      // Show validation error message
+      this.snackBar.open('Please fill in all required fields correctly.', 'Close', {
+        duration: 4000,
+        horizontalPosition: 'center',
+        verticalPosition: 'top',
+        panelClass: ['error-snackbar']
+      });
+    }
+  }
+
+  // Mark all form controls as touched to trigger validation display
+  private markFormGroupTouched(): void {
+    Object.keys(this.grantExtensionForm.controls).forEach(key => {
+      const control = this.grantExtensionForm.get(key);
+      control?.markAsTouched();
+    });
+  }
+
+  // Reset the form
+  resetForm(): void {
+    this.grantExtensionForm.reset({
+      students: [],
+      extension: 1,
+      reason: ''
+    });
+    this.selectedStudents = [];
+    this.searchQuery = '';
+    this.filteredStudents = this.students;
+    this.showStudentList = true;
+  }
+}
diff --git a/src/app/units/states/tasks/staff-grant-extension/models/extension-results.model.ts b/src/app/units/states/tasks/staff-grant-extension/models/extension-results.model.ts
new file mode 100644
index 0000000000..136e643462
--- /dev/null
+++ b/src/app/units/states/tasks/staff-grant-extension/models/extension-results.model.ts
@@ -0,0 +1,31 @@
+export interface SuccessfulResult {
+  student_id: number;
+  project_id: number;
+  weeks_requested: number;
+  extension_response: string;
+  task_status: string;
+}
+
+export interface FailedResult {
+  student_id: number;
+  project_id: number;
+  error: string;
+}
+
+export interface SkippedResult {
+  student_id: number;
+  reason: string;
+}
+
+export interface ExtensionServiceResult {
+  successful: SuccessfulResult[];
+  failed: FailedResult[];
+  skipped: SkippedResult[];
+}
+
+export interface ExtensionSummaryPayload {
+  results: ExtensionServiceResult;
+  weeksRequested: number;
+  createdAt: string; // ISO string
+  taskDefinitionId: number;
+}
diff --git a/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component.html b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component.html
new file mode 100644
index 0000000000..4401f08725
--- /dev/null
+++ b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component.html
@@ -0,0 +1,33 @@
+<div class="summary-card panel-container">
+  <div class="summary-header">
+    <h3>Extension Granted</h3>
+    <p>
+      Extension has been granted for
+      <strong>{{ successCount }}</strong> student<span *ngIf="successCount !== 1">s</span>
+      until <span class="summary-date">{{ expiryFormatted }}</span>
+    </p>
+  </div>
+
+  <div class="summary-body">
+    <div class="stats">
+      <div class="stat stat-success">
+        <div class="count-number">{{ successCount }}</div>
+        <div class="count-label">Successful</div>
+      </div>
+      <div class="stat stat-failed">
+        <div class="count-number">{{ failedCount }}</div>
+        <div class="count-label">Failed</div>
+      </div>
+      <div class="stat stat-skipped">
+        <div class="count-number">{{ skippedCount }}</div>
+        <div class="count-label">Skipped</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="summary-actions">
+    <button mat-stroked-button color="primary" (click)="dismiss()">Dismiss</button>
+  </div>
+</div>
+
+
diff --git a/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component.scss b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component.scss
new file mode 100644
index 0000000000..797271ca73
--- /dev/null
+++ b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component.scss
@@ -0,0 +1,76 @@
+:host {
+  display: block;
+}
+
+.panel-container {
+  background: white;
+  border-radius: 12px;
+  border: 1px solid rgba(57, 57, 255, 0.2);
+  box-shadow: 0 4px 12px rgba(57, 57, 255, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+.summary-header {
+  background: #e6f7f0;
+  padding: 16px;
+  border-bottom: 1px solid #d1e7dd;
+
+  h3 {
+    margin: 0 0 4px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1d7044;
+  }
+
+  p {
+    margin: 0;
+    font-size: 13px;
+    color: #444;
+
+    .summary-date {
+      font-weight: 700;
+      color: #0d6efd;
+    }
+  }
+}
+
+.summary-body {
+  padding: 16px;
+}
+
+.stats {
+  display: flex;
+  justify-content: space-around;
+  text-align: center;
+  gap: 16px;
+
+  .count-number {
+    font-size: 20px;
+    font-weight: 700;
+  }
+
+  .count-label {
+    font-size: 12px;
+    color: #666;
+  }
+}
+
+.stat-success .count-number {
+  color: #28a745;
+}
+
+.stat-failed .count-number {
+  color: #dc3545;
+}
+
+.stat-skipped .count-number {
+  color: #6c757d;
+}
+
+.summary-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 16px;
+  border-top: 1px solid #eee;
+  background: #fff;
+}
diff --git a/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component.spec.ts b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component.spec.ts
new file mode 100644
index 0000000000..15bcb20abf
--- /dev/null
+++ b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component.spec.ts
@@ -0,0 +1,23 @@
+// import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+// import { StaffGrantExtensionSummaryComponent } from './staff-grant-extension-summary.component';
+
+// describe('StaffGrantExtensionSummaryComponent', () => {
+//   let component: StaffGrantExtensionSummaryComponent;
+//   let fixture: ComponentFixture<StaffGrantExtensionSummaryComponent>;
+
+//   beforeEach(async () => {
+//     await TestBed.configureTestingModule({
+//       imports: [StaffGrantExtensionSummaryComponent]
+//     })
+//     .compileComponents();
+
+//     fixture = TestBed.createComponent(StaffGrantExtensionSummaryComponent);
+//     component = fixture.componentInstance;
+//     fixture.detectChanges();
+//   });
+
+//   it('should create', () => {
+//     expect(component).toBeTruthy();
+//   });
+// });
diff --git a/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component.ts b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component.ts
new file mode 100644
index 0000000000..c663cd331a
--- /dev/null
+++ b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension-summary/staff-grant-extension-summary.component.ts
@@ -0,0 +1,82 @@
+// staff-grant-extension-summary.component.ts
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { ExtensionSummaryPayload } from 'src/app/units/states/tasks/staff-grant-extension/models/extension-results.model';
+
+
+@Component({
+  selector: 'f-staff-grant-extension-summary',
+  templateUrl: './staff-grant-extension-summary.component.html',
+  styleUrls: ['./staff-grant-extension-summary.component.scss']
+})
+export class StaffGrantExtensionSummaryComponent implements OnInit, OnDestroy {
+  @Input() summary!: ExtensionSummaryPayload | null;
+  @Output() dismissed = new EventEmitter<void>();
+
+  expiryDate?: Date;
+  expiryFormatted = '';
+  successCount = 0;
+  failedCount = 0;
+  skippedCount = 0;
+
+  private timeoutId: ReturnType<typeof setTimeout> | null = null;
+  private intervalId: ReturnType<typeof setInterval> | null = null;
+
+
+  ngOnInit(): void {
+    if (!this.summary) return;
+
+    const createdAt = this.summary.createdAt ? new Date(this.summary.createdAt) : new Date();
+    this.expiryDate = new Date(createdAt.getTime() + (this.summary.weeksRequested * 7 * 24 * 60 * 60 * 1000));
+    this.expiryFormatted = this.expiryDate.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+
+    this.successCount = (this.summary.results?.successful ?? []).length;
+    this.failedCount = (this.summary.results?.failed ?? []).length;
+    this.skippedCount = (this.summary.results?.skipped ?? []).length;
+
+    this.scheduleAutoDismiss();
+  }
+
+  ngOnDestroy(): void {
+    this.clearTimers();
+  }
+
+  dismiss(): void {
+    this.clearTimers();
+    this.dismissed.emit();
+  }
+
+  // Timer: setTimeout supports max ~2,147,483,647ms (~24.85 days)
+  private scheduleAutoDismiss(): void {
+    if (!this.expiryDate) return;
+    const msUntilExpiry = this.expiryDate.getTime() - Date.now();
+    if (msUntilExpiry <= 0) {
+      // already expired
+      this.dismiss();
+      return;
+    }
+
+    const MAX_TIMEOUT = 2147483647; // max setTimeout reliably
+    if (msUntilExpiry <= MAX_TIMEOUT) {
+      this.timeoutId = setTimeout(() => this.dismiss(), msUntilExpiry);
+    } else {
+      // for long durations, poll daily until expiry
+      this.intervalId = setInterval(() => {
+        if (Date.now() >= (this.expiryDate!.getTime())) {
+          this.clearTimers();
+          this.dismiss();
+        }
+      }, 24 * 60 * 60 * 1000);
+    }
+  }
+
+  private clearTimers(): void {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+}
diff --git a/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension.component.html b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension.component.html
new file mode 100644
index 0000000000..45532eedaf
--- /dev/null
+++ b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension.component.html
@@ -0,0 +1,56 @@
+<div fxLayout="row" fxFill class="main-content">
+  <!-- Left Panel - Task List -->
+  <div fxFlex="35" class="task-list-panel">
+    <div class="panel-container">
+      <div class="panel-header">
+        <h3>Tasks</h3>
+        <p class="text-muted">Click on a task to select it for extension granting</p>
+      </div>
+
+      <div class="task-list-container">
+        <f-unit-task-list
+          *ngIf="unit"
+          [unitTasks]="unit.taskDefinitions"
+          mode="all-tasks"
+        ></f-unit-task-list>
+        <div *ngIf="!unit" class="no-unit-message">
+          <mat-icon>info</mat-icon>
+          <p>Please select a unit to view tasks</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Right Panel - Grant Extension Form -->
+  <div fxFlex="65" class="form-panel">
+    <div class="panel-container" [class.disabled]="!isFormActive">
+      <div class="panel-header">
+        <h3>Grant Extension</h3>
+        <p *ngIf="selectedTaskDefinition" class="text-muted">Granting extension for: {{ selectedTaskDefinition.name }}</p>
+        <p *ngIf="!selectedTaskDefinition" class="text-muted">Select a task from the left to enable the form</p>
+      </div>
+
+      <div class="form-container">
+        <f-staff-grant-extension-summary
+          *ngIf="showSummary && extensionSummary"
+          [summary]="extensionSummary"
+          (dismissed)="onSummaryDismissed()"
+          class="mb-4"
+        ></f-staff-grant-extension-summary>
+
+        <div *ngIf="isFormActive && selectedTaskDefinition" class="form-content">
+          <f-staff-grant-extension-form
+            (extensionResult)="onExtensionResult($event)"
+            [unitId]="unitId"
+            [taskDefinitionId]="taskDefinitionId">
+          </f-staff-grant-extension-form>
+        </div>
+        <div *ngIf="!isFormActive || !selectedTaskDefinition" class="form-disabled-message">
+          <mat-icon>lock</mat-icon>
+          <h4>Form Disabled</h4>
+          <p>Please select a task from the left panel to enable the grant extension form.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension.component.scss b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension.component.scss
new file mode 100644
index 0000000000..ae213c0ada
--- /dev/null
+++ b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension.component.scss
@@ -0,0 +1,159 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+.page-header {
+  padding: 16px 24px;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #e9ecef;
+
+  h2 {
+    margin: 0;
+    color: #2c3e50;
+    font-weight: 600;
+  }
+
+  .text-muted {
+    margin: 0;
+    color: #6c757d;
+    font-size: 14px;
+  }
+}
+
+.main-content {
+  height: 100%;
+  padding: 20px;
+  gap: 20px;
+}
+
+.task-list-panel,
+.form-panel {
+  height: 100%;
+}
+
+.panel-container {
+  background: white;
+  border-radius: 12px;
+  border: 1px solid rgba(57, 57, 255, 0.2);
+  box-shadow: 0 4px 12px rgba(57, 57, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.panel-header {
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid #e0e0e0;
+  background: #fafafa;
+
+  h3 {
+    margin: 0 0 4px 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.task-list-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+  padding: 0;
+}
+
+.form-container {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.form-content {
+  height: 100%;
+}
+
+.form-disabled-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+  color: #999;
+
+  mat-icon {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+  }
+
+  h4 {
+    margin: 0 0 8px 0;
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+}
+
+.no-unit-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  text-align: center;
+  color: #999;
+
+  mat-icon {
+    font-size: 32px;
+    width: 32px;
+    height: 32px;
+    margin-bottom: 12px;
+    opacity: 0.5;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+}
+
+// Disabled state styling
+.panel-container.disabled {
+  opacity: 0.6;
+
+  .form-container {
+    pointer-events: none;
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .main-content {
+    flex-direction: column;
+    padding: 12px;
+    gap: 12px;
+  }
+
+  .task-list-panel,
+  .form-panel {
+    flex: 1;
+  }
+}
diff --git a/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension.component.spec.ts b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension.component.spec.ts
new file mode 100644
index 0000000000..db14aaf73e
--- /dev/null
+++ b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension.component.spec.ts
@@ -0,0 +1,61 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { StaffGrantExtensionComponent } from './staff-grant-extension.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { TaskDefinition } from 'src/app/api/models/doubtfire-model';
+
+describe('StaffGrantExtensionComponent', () => {
+  let component: StaffGrantExtensionComponent;
+  let fixture: ComponentFixture<StaffGrantExtensionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        StaffGrantExtensionComponent,
+        MatDialogModule,
+        MatIconModule
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StaffGrantExtensionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have form disabled initially', () => {
+    expect(component.isFormActive).toBeFalse();
+    expect(component.selectedTaskDefinition).toBeNull();
+  });
+
+  it('should enable form when task is selected', () => {
+    const mockTaskDefinition = {
+      id: 1,
+      name: 'Test Task'
+    } as unknown as TaskDefinition;
+
+    component.selectedTaskDefinition$.next(mockTaskDefinition);
+
+    expect(component.isFormActive).toBeTrue();
+    expect(component.selectedTaskDefinition).toEqual(mockTaskDefinition);
+  });
+
+  it('should reset form after submission', () => {
+    // First select a task
+    const mockTaskDefinition = {
+      id: 1,
+      name: 'Test Task'
+    } as unknown as TaskDefinition;
+    component.selectedTaskDefinition$.next(mockTaskDefinition);
+
+    // Then submit
+    component.onFormSubmitted();
+
+    expect(component.isFormActive).toBeFalse();
+    expect(component.selectedTaskDefinition).toBeNull();
+  });
+});
diff --git a/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension.component.ts b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension.component.ts
new file mode 100644
index 0000000000..f131f5faac
--- /dev/null
+++ b/src/app/units/states/tasks/staff-grant-extension/staff-grant-extension.component.ts
@@ -0,0 +1,181 @@
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { Subject, BehaviorSubject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Unit } from 'src/app/api/models/unit';
+import { UnitRole } from 'src/app/api/models/unit-role';
+import { TaskDefinition } from 'src/app/api/models/doubtfire-model';
+import { GlobalStateService } from 'src/app/projects/states/index/global-state.service';
+import { UIRouter } from '@uirouter/angular';
+import { UnitService } from 'src/app/api/models/doubtfire-model';
+import { ExtensionSummaryPayload } from 'src/app/units/states/tasks/staff-grant-extension/models/extension-results.model';
+import { TasksViewerService } from '../tasks-viewer.service';
+
+@Component({
+  selector: 'f-staff-grant-extension',
+  templateUrl: './staff-grant-extension.component.html',
+  styleUrls: ['./staff-grant-extension.component.scss']
+})
+export class StaffGrantExtensionComponent implements OnInit, OnDestroy {
+  @Input() unit?: Unit;
+  @Input() unitRole?: UnitRole;
+
+  selectedTaskDefinition: TaskDefinition | null = null;
+  // selectedTaskDefinition$ = new BehaviorSubject<TaskDefinition | null>(null);
+  isFormActive = false;
+  unitId?: number;
+  taskDefinitionId?: number;
+
+  extensionSummary?: ExtensionSummaryPayload | null = null;
+  showSummary = false;
+  extensionSummaries = new Map<number, ExtensionSummaryPayload>();
+
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private globalState: GlobalStateService,
+    private router: UIRouter,
+    private unitService: UnitService,
+    private taskViewerService: TasksViewerService,
+  ) {}
+
+  ngOnInit(): void {
+    // Subscribe to task definition selection changes
+    this.taskViewerService.selectedTaskDef
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(taskDef => {
+        this.selectedTaskDefinition = taskDef;
+        this.isFormActive = !!taskDef;
+
+        if (taskDef) {
+          this.taskDefinitionId = taskDef.id;
+          const saved = this.extensionSummaries.get(taskDef.id);
+          if (saved) {
+            this.extensionSummary = saved;
+            this.showSummary = true;
+          } else {
+            this.extensionSummary = null;
+            this.showSummary = false;
+          }
+        } else {
+          this.extensionSummary = null;
+          this.showSummary = false;
+        }
+      });
+
+    // Get current unit from global state
+    this.globalState.currentViewAndEntitySubject$.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(state => {
+      if (state && state.entity) {
+        let newUnit: Unit | undefined;
+
+        // Handle both cases: Unit OR UnitRole
+        if (state.entity instanceof Unit) {
+          newUnit = state.entity;
+        } else if (state.entity instanceof UnitRole) {
+          newUnit = state.entity.unit;
+        }
+
+        if (newUnit) {
+          this.loadUnit(newUnit.id);
+        }
+      }
+    });
+
+    // If no unit in global state, try to get it from the current URL
+    const currentUrl = this.router.globals.current.url;
+    const unitMatch = currentUrl.match(/\/units\/(\d+)/);
+
+    if (unitMatch) {
+      const unitId = parseInt(unitMatch[1]);
+      this.loadUnit(unitId);
+    }
+
+    // If still no unit, try to get the first available unit for the user
+    if (!this.unit) {
+      this.globalState.unitRolesSubject.pipe(
+        takeUntil(this.destroy$)
+      ).subscribe(unitRoles => {
+        if (unitRoles && unitRoles.length > 0 && !this.unit) {
+          const firstUnitRole = unitRoles[0];
+          this.unit = firstUnitRole.unit;
+          this.unitId = this.unit.id;
+        }
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  // Called when child emits extensionResult
+  onExtensionResult(payload: ExtensionSummaryPayload): void {
+    const tdId = payload.taskDefinitionId ?? this.taskDefinitionId;
+    if (!tdId) return;
+
+    // Always clear the previous one
+    this.extensionSummaries.delete(tdId);
+
+    // Temporarily hide the summary
+    this.extensionSummary = null;
+    this.showSummary = false;
+
+
+    // Save the payload for that specific task
+    this.extensionSummaries.set(tdId, payload)
+
+    if (this.selectedTaskDefinition && this.selectedTaskDefinition.id === tdId) {
+    setTimeout(() => {
+      this.extensionSummary = payload;
+      this.showSummary = true;
+    }, 0);
+  }
+
+  }
+
+  onSummaryDismissed(): void {
+    const tdId = this.extensionSummary?.taskDefinitionId ?? this.selectedTaskDefinition?.id;
+    if (tdId) {
+      this.extensionSummaries.delete(tdId);
+    }
+
+    this.showSummary = false;
+    this.extensionSummary = null;
+  }
+
+  // Handle task selection from <f-unit-task-list>
+  onTaskSelected(task: TaskDefinition): void {
+    this.selectedTaskDefinition = task;
+    // this.selectedTaskDefinition$.next(task);
+    // this.taskDefinitionId = task.id;
+  }
+
+  // Helper: fetch unit and refresh taskDefinitions
+  private loadUnit(unitId: number): void {
+    if (!this.unitId || this.unitId !== unitId) {
+      this.extensionSummaries.clear();
+      this.unitId = unitId;
+      this.unitService.get(unitId).subscribe({
+        next: (fresh: Unit) => {
+          this.unit = fresh; // includes updated taskDefinitions
+          this.resetFormState();
+        },
+        error: (err) => {
+          console.error('Error loading unit:', err);
+        }
+      });
+    }
+  }
+
+  private resetFormState(): void {
+    this.selectedTaskDefinition = null;
+    // this.selectedTaskDefinition$.next(null);
+    this.taskDefinitionId = undefined;
+    this.isFormActive = false;
+
+    this.extensionSummary = null;
+    this.showSummary = false;
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 7eec75221c..2c952a7ab8 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -41,3 +41,6 @@
 .mat-spinner circle {
   stroke: #ddd !important;
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }