diff --git a/src/app/admin/modals/grant-extension-form/grant-extension-dialog.component.ts b/src/app/admin/modals/grant-extension-form/grant-extension-dialog.component.ts
new file mode 100644
index 0000000000..9e8ff15782
--- /dev/null
+++ b/src/app/admin/modals/grant-extension-form/grant-extension-dialog.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { GrantExtensionFormComponent } from './grant-extension-form.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'f-grant-extension-dialog',
+  standalone: true,
+  imports: [MatDialogModule, CommonModule, GrantExtensionFormComponent],
+  template: `
+    <h2 mat-dialog-title>Grant Extension</h2>
+    <mat-dialog-content>
+      <f-grant-extension-form></f-grant-extension-form>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="close()">Close</button>
+    </mat-dialog-actions>
+  `
+})
+export class GrantExtensionDialogComponent {
+  constructor(private dialogRef: MatDialogRef<GrantExtensionDialogComponent>) {}
+
+  close(): void {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/admin/modals/grant-extension-form/grant-extension-form.component.html b/src/app/admin/modals/grant-extension-form/grant-extension-form.component.html
new file mode 100644
index 0000000000..a67d00446e
--- /dev/null
+++ b/src/app/admin/modals/grant-extension-form/grant-extension-form.component.html
@@ -0,0 +1,100 @@
+<h2 mat-dialog-title>Grant Extension</h2>
+<form [formGroup]="grantExtensionForm" (ngSubmit)="submitForm()">
+
+<mat-dialog-content [formGroup]="grantExtensionForm">
+  <!-- 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()"
+             (focus)="showStudentList = true"
+             [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 mb-8"
+         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>
+
+    <mat-error *ngIf="grantExtensionForm.get('students')?.touched && grantExtensionForm.get('students')?.invalid">
+      Please select at least one student.
+    </mat-error>
+  </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> day(s)
+    </label>
+
+    <mat-slider
+      min="1"
+      max="30"
+      step="1"
+      tickInterval="5"
+      thumbLabel
+      class="w-full"
+      style="width: 100%; max-width: 600px; min-width: 300px;"
+    >
+      <input matSliderThumb formControlName="extension" />
+    </mat-slider>
+  </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
+    ></textarea>
+    <mat-error *ngIf="grantExtensionForm.get('reason')?.touched && grantExtensionForm.get('reason')?.invalid">
+      Please provide a reason for the extension.
+    </mat-error>
+  </mat-form-field>
+
+  <!-- Notes Field (Optional) -->
+  <mat-form-field appearance="fill" class="w-full mb-4">
+    <mat-label>Additional Notes (optional)</mat-label>
+    <textarea matInput formControlName="notes" rows="3"></textarea>
+  </mat-form-field>
+</mat-dialog-content>
+
+  <!-- Form Buttons -->
+<mat-dialog-actions align="end">
+  <button mat-button type="button" (click)="close()" [disabled]="isSubmitting">Cancel</button>
+  <button mat-flat-button color="primary" type="submit" [disabled]="isSubmitting">
+    Grant Extension
+  </button>
+</mat-dialog-actions>
+</form>
+
diff --git a/src/app/admin/modals/grant-extension-form/grant-extension-form.component.spec.ts b/src/app/admin/modals/grant-extension-form/grant-extension-form.component.spec.ts
new file mode 100644
index 0000000000..e9fd4f29ba
--- /dev/null
+++ b/src/app/admin/modals/grant-extension-form/grant-extension-form.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { GrantExtensionFormComponent } from './grant-extension-form.component';
+
+describe('GrantExtensionFormComponent', () => {
+  let component: GrantExtensionFormComponent;
+  let fixture: ComponentFixture<GrantExtensionFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GrantExtensionFormComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GrantExtensionFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/admin/modals/grant-extension-form/grant-extension-form.component.ts b/src/app/admin/modals/grant-extension-form/grant-extension-form.component.ts
new file mode 100644
index 0000000000..4c08e824a8
--- /dev/null
+++ b/src/app/admin/modals/grant-extension-form/grant-extension-form.component.ts
@@ -0,0 +1,182 @@
+import { Component, OnInit } 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 { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+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';
+
+@Component({
+  selector: 'f-grant-extension-form',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    CommonModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    MatSliderModule,
+    MatButtonModule,
+    MatDialogModule,
+    FormsModule,
+    MatCheckboxModule
+  ],
+  templateUrl: './grant-extension-form.component.html'
+})
+export class GrantExtensionFormComponent implements OnInit {
+  grantExtensionForm!: FormGroup;
+  isSubmitting = false;
+  searchQuery = '';
+  selectedStudents: number[] = [];
+  showStudentList = false;
+
+  // Temporary values will be replaced with dynamic context
+  unitId = 1;
+  taskDefinitionId = 25;
+
+  // List of test students to choose from
+  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' }
+  ];
+  filteredStudents = this.students;
+
+  constructor(
+    private fb: FormBuilder,
+    private dialogRef: MatDialogRef<GrantExtensionFormComponent>,
+    private snackBar: MatSnackBar,
+    private extensionService: ExtensionService
+  ) {}
+
+  // 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],
+      notes: ['']
+    });
+  }
+
+  // Filters students based on search query
+  filterStudents(): void {
+    if (!this.searchQuery) {
+      this.filteredStudents = this.students;
+    } else {
+      const query = this.searchQuery.toLowerCase();
+      this.filteredStudents = this.students.filter(student =>
+        student.name.toLowerCase().includes(query) ||
+        student.id.toString().includes(query)
+      );
+    }
+  }
+
+  // Toggles student selection state
+  toggleStudent(studentId: number): void {
+    const index = this.selectedStudents.indexOf(studentId);
+    if (index === -1) {
+      this.selectedStudents.push(studentId);
+    } else {
+      this.selectedStudents.splice(index, 1);
+    }
+    this.grantExtensionForm.patchValue({ students: this.selectedStudents });
+  }
+
+  // Handles keyboard navigation for student selection
+  handleStudentKeydown(event: KeyboardEvent, studentId: number): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.toggleStudent(studentId);
+    }
+  }
+
+  // Toggles selection of all filtered students
+  toggleSelectAll(): void {
+    if (this.selectedStudents.length === this.filteredStudents.length) {
+      this.selectedStudents = [];
+    } else {
+      this.selectedStudents = this.filteredStudents.map(student => student.id);
+    }
+    this.grantExtensionForm.patchValue({ students: this.selectedStudents });
+  }
+
+  // Checks if a student is selected
+  isStudentSelected(studentId: number): boolean {
+    return this.selectedStudents.includes(studentId);
+  }
+
+  // Safely handles blur for checkboxes
+  handleCheckboxBlur(): void {
+    // This avoids calling blur() directly on the checkbox reference
+    // which can cause errors when the reference isn't to a DOM element
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  }
+
+  // Handles form submission.
+  // Builds the payload and sends it to the backend via the ExtensionService.
+  // Displays a success or error message and closes the dialog on success.
+  submitForm(): void {
+    if (this.grantExtensionForm.invalid) {
+      this.grantExtensionForm.markAllAsTouched();
+      return;
+    }
+
+    this.isSubmitting = true;
+
+    const { students, extension, reason, notes } = this.grantExtensionForm.value;
+    const unitId = 1; // temporary value
+    const payload = {
+      student_ids: students,
+      task_definition_id: 25,
+      weeks_requested: extension,
+      comment: reason,
+      notes: notes,
+    };
+
+    this.extensionService.grantExtension(unitId, payload).subscribe({
+      next: () => {
+        this.snackBar.open('Extension granted successfully!', 'Close', { duration: 3000 });
+        this.dialogRef.close(true);
+      },
+      error: (error) => {
+        const errorMsg = error?.error?.message || 'An unexpected error occurred. Please try again.';
+        this.snackBar.open(`Failed to grant extension: ${errorMsg}`, 'Close', { duration: 5000 });
+        console.error('Grant Extension Error:', error);
+      },
+      complete: () => {
+        this.isSubmitting = false;
+      }
+    });
+  }
+
+  // Closes the dialog without submitting the form
+  close(): void {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/api/services/authentication.service.ts b/src/app/api/services/authentication.service.ts
index dfd99dfd74..9ed91d0973 100644
--- a/src/app/api/services/authentication.service.ts
+++ b/src/app/api/services/authentication.service.ts
@@ -136,7 +136,7 @@ export class AuthenticationService {
           remember: boolean;
         },
   ): Observable<any> {
-    return this.httpClient.post(this.AUTH_URL, userCredentials).pipe(
+    return this.httpClient.post(this.AUTH_URL, userCredentials, { withCredentials: true }).pipe(
       map((response: any) => {
         // Extract relevant data from response and construct user object to store in cache.
         const user: User = this.userService.cache.getOrCreate(
diff --git a/src/app/api/services/extension.service.ts b/src/app/api/services/extension.service.ts
new file mode 100644
index 0000000000..0e27251cef
--- /dev/null
+++ b/src/app/api/services/extension.service.ts
@@ -0,0 +1,38 @@
+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;
+  notes?: 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/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 e210890833..e2ced39d4a 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
@@ -1,44 +1,40 @@
 <mat-card appearance="outlined">
   @if (triggers?.length > 0) {
-  <mat-form-field class="px-4 pt-4" appearance="outline">
-    <mat-select [value]="task?.status" (selectionChange)="triggerTransition($event.value)">
-      <mat-select-trigger>
-        <span style="display: inline-flex">
-          <status-icon [status]="task?.status" style="margin-right: 10px"></status-icon>
-          <h2 class="mb-0">{{ task?.statusLabel() }}</h2>
-        </span>
-      </mat-select-trigger>
-      @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
-        >
-      </mat-option>
-      }
-    </mat-select>
-  </mat-form-field>
-  } @if (triggers?.length < 0) {
-  <mat-card-title>
-    <span style="display: inline-flex">
-      <status-icon [status]="task?.status" style="margin-right: 10px"></status-icon>
-      <h5>{{ task?.statusLabel() }}</h5>
-    </span>
-  </mat-card-title>
+    <mat-form-field class="px-4 pt-4" appearance="outline">
+      <mat-select [value]="task?.status" (selectionChange)="triggerTransition($event.value)">
+        <mat-select-trigger>
+          <span style="display: inline-flex">
+            <status-icon [status]="task?.status" style="margin-right: 10px"></status-icon>
+            <h2 class="mb-0">{{ task?.statusLabel() }}</h2>
+          </span>
+        </mat-select-trigger>
+        @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>
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
   }
 
   <mat-card-content>
     <p>{{ task?.statusHelp().reason }} {{ task?.statusHelp().action }}</p>
   </mat-card-content>
 
-  @if ( task?.unit.currentUserIsStaff || task?.canApplyForExtension() || (task?.inSubmittedState() &&
-  task?.requiresFileUpload()) ) {
   <mat-card-actions class="space-x-2">
     @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>
+      <button mat-stroked-button (click)="applyForExtension()">Request extension</button>
     }
-  </mat-card-actions>
-  }
-</mat-card>
+    @if (task?.inSubmittedState() && task?.requiresFileUpload()) {
+      <button mat-stroked-button (click)="updateFilesInSubmission()">Upload new files</button>
+    }
+    @if (currentUser?.role === 'Admin' || currentUser?.role === 'Convenor') {
+      <button mat-stroked-button (click)="openGrantExtensionDialog()">
+        Grant Extension
+      </button>
+
+    }
+
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 d33646b066..f42c4ff36d 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
@@ -5,6 +5,11 @@ import { Task } from 'src/app/api/models/task';
 import { TaskStatusEnum } from 'src/app/api/models/task-status';
 import { TaskService } from 'src/app/api/services/task.service';
 import { ExtensionModalService } from 'src/app/common/modals/extension-modal/extension-modal.service';
+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';
+
+
 
 @Component({
   selector: 'f-task-status-card',
@@ -19,6 +24,8 @@ export class TaskStatusCardComponent implements OnChanges, AfterViewInit {
     private extensions: ExtensionModalService,
     private taskService: TaskService,
     private router: UIRouter,
+    private dialog: MatDialog,
+    private userService: UserService,
   ) {}
 
   @Input() task: Task;
@@ -66,4 +73,16 @@ export class TaskStatusCardComponent implements OnChanges, AfterViewInit {
       this.task.refresh();
     });
   }
+
+  openGrantExtensionDialog(): void {
+    this.dialog.open(GrantExtensionFormComponent, {
+      width: '600px',
+      disableClose: true,
+    });
+  }
+
+  get currentUser() {
+    return this.userService.currentUser;
+  }
+
 }
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
index ac792b582e..b9230045f9 100644
--- a/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.ts
+++ b/src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.ts
@@ -15,7 +15,7 @@ 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',
@@ -43,6 +43,7 @@ export class ProjectDashboardComponent implements OnInit {
     private currentUser: UserService,
     private projectService: ProjectService,
     private globalStateService: GlobalStateService,
+    private dialog: MatDialog,
   ) {}
 
   startedDragging(event: CdkDragStart, div: HTMLDivElement) {
diff --git a/src/styles.scss b/src/styles.scss
index 0df654e6ba..f8ab056beb 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -63,4 +63,3 @@ $main-view-max-height: calc((var(--vh, 1vh) * (100)) - 85px);
     }
   }
 }
-
diff --git a/test/api/staff_grant_extension_test.rb b/test/api/staff_grant_extension_test.rb
new file mode 100644
index 0000000000..e69de29bb2