diff --git a/src/app/dashboard/dashboard-list-item.component.html b/src/app/dashboard/dashboard-list-item.component.html
deleted file mode 100644
index f4d34fdcc..000000000
--- a/src/app/dashboard/dashboard-list-item.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="flex flex-row">
-  <div class="w-4 mr-6 shrink-0" [style.background-color]="task.color"></div>
-  <div class="py-4 flex flex-col flex-grow shrink min-w-0">
-    <h4 class="mb-1 truncate flex-grow min-w-0">{{ task.title }}</h4>
-    <p class="mb-0">{{ task.subtitle }}</p>
-  </div>
-  <div class="flex flex-row ml-2 mr-6 items-center justify-end gap-4">
-    <div *ngIf="task.comments > 0" class="flex h-8 w-8 bg-red-500 rounded-full">
-      <span class="text-white text-xl font-medium m-auto">{{ task.comments }}</span>
-    </div>
-    <mat-icon>keyboard_arrow_down</mat-icon>
-  </div>
-</div>
diff --git a/src/app/dashboard/f-cross-dashboard.component.html b/src/app/dashboard/f-cross-dashboard.component.html
index 978148aa1..3ea01a6f1 100644
--- a/src/app/dashboard/f-cross-dashboard.component.html
+++ b/src/app/dashboard/f-cross-dashboard.component.html
@@ -14,11 +14,7 @@ <h3 class="m-0 flex-grow text-white truncate min-w-0">{{ unit.code }}</h3>
 
       <div class="flex flex-col overflow-y-auto">
         <div *ngFor="let task of unit.tasks">
-          <div
-            class="border-b-[1px] border-gray-300"
-            uiSref="projects/dashboard"
-            [uiParams]="{projectId: unit.projectId, taskAbbr: task.abbreviation}"
-          >
+          <div class="border-b-[1px] border-gray-300">
             <f-dashboard-list-item [task]="task"></f-dashboard-list-item>
           </div>
         </div>
diff --git a/src/app/dashboard/f-cross-dashboard.component.ts b/src/app/dashboard/f-cross-dashboard.component.ts
index bd4bbc072..6c2107b1a 100644
--- a/src/app/dashboard/f-cross-dashboard.component.ts
+++ b/src/app/dashboard/f-cross-dashboard.component.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
 import {Project} from '../api/models/project';
 import {TaskStatus} from '../api/models/task-status';
-import {DashboardTask} from './dashboard-list-item.component';
+import {DashboardTask} from './list-item/dashboard-list-item.component';
 import {Task} from '../api/models/task';
 import {TaskDefinition} from '../api/models/task-definition';
 
@@ -18,7 +18,7 @@ type DashboardUnit = {
   templateUrl: './f-cross-dashboard.component.html',
 })
 export class CrossDashboardComponent implements OnInit {
-  constructor(private globalStateService: GlobalStateService) {}
+  constructor(private globalStateService: GlobalStateService,) {}
 
   units: DashboardUnit[] = [];
 
@@ -37,12 +37,12 @@ export class CrossDashboardComponent implements OnInit {
         projectId: project.id,
         code: unit.code,
         name: unit.name,
-        tasks: this.mapTasks(project.tasks, unit.taskDefinitions),
+        tasks: this.mapTasks(project.tasks, unit.taskDefinitions, project.id, unit.code),
       };
     });
   }
 
-  mapTasks(tasks: readonly Task[], taskDefs: readonly TaskDefinition[]): DashboardTask[] {
+  mapTasks(tasks: readonly Task[], taskDefs: readonly TaskDefinition[], projectId: number, unitCode: string): DashboardTask[] {
     return taskDefs.map((def) => {
       const task = tasks.find((t) => t.taskDefId == def.id);
       return {
@@ -51,6 +51,12 @@ export class CrossDashboardComponent implements OnInit {
         abbreviation: def.abbreviation,
         color: TaskStatus.STATUS_COLORS.get(task?.status ?? 'not_started'),
         comments: task?.numNewComments ?? 0,
+        projectId: projectId,
+        statusLabel: TaskStatus.STATUS_LABELS.get(task?.status ?? 'not_started'),
+        description: def.description,
+        unitCode: unitCode,
+        dueDate: def.targetDate,
+        taskDef: def,
       };
     });
   }
diff --git a/src/app/dashboard/list-item/dashboard-list-item.component.html b/src/app/dashboard/list-item/dashboard-list-item.component.html
new file mode 100644
index 000000000..2bbc5cb85
--- /dev/null
+++ b/src/app/dashboard/list-item/dashboard-list-item.component.html
@@ -0,0 +1,28 @@
+<div class="flex flex-row">
+  <div class="w-4 mr-6 shrink-0" [style.background-color]="task.color"></div>
+  <div class="py-4 flex flex-col flex-grow shrink min-w-0">
+    <h4
+      class="mb-1 truncate flex-grow min-w-0"
+      uiSref="projects/dashboard"
+      [uiParams]="{projectId: task.projectId, taskAbbr: task.abbreviation}"
+    >
+      {{ task.title }}
+    </h4>
+    <p class="mb-0">{{ task.subtitle }}</p>
+  </div>
+  <div class="flex flex-row ml-2 mr-6 items-center justify-end gap-4">
+    <div *ngIf="!isExpanded">
+      <div *ngIf="task.comments > 0" class="flex h-8 w-8 bg-red-500 rounded-full">
+        <span class="text-white text-xl font-medium m-auto">{{ task.comments }}</span>
+      </div>
+    </div>
+    <mat-icon (click)="isExpanded = !isExpanded" class="cursor-pointer">
+      {{ isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
+    </mat-icon>
+  </div>
+</div>
+<div class="flex flex-row">
+  <div *ngIf="isExpanded">
+    <f-expanded-list-item [task]="task"></f-expanded-list-item>
+  </div>
+</div>
diff --git a/src/app/dashboard/dashboard-list-item.component.ts b/src/app/dashboard/list-item/dashboard-list-item.component.ts
similarity index 62%
rename from src/app/dashboard/dashboard-list-item.component.ts
rename to src/app/dashboard/list-item/dashboard-list-item.component.ts
index b201cfcad..32800afac 100644
--- a/src/app/dashboard/dashboard-list-item.component.ts
+++ b/src/app/dashboard/list-item/dashboard-list-item.component.ts
@@ -1,11 +1,18 @@
 import {Component, Input} from '@angular/core';
+import {TaskDefinition} from '../../api/models/task-definition';
 
 export type DashboardTask = {
   title: string;
   subtitle: string;
+  statusLabel: string;
   abbreviation: string;
   color: string;
   comments: number;
+  projectId: number;
+  description: string;
+  taskDef: TaskDefinition;
+  unitCode: string;
+  dueDate: Date;
 };
 
 @Component({
@@ -14,4 +21,6 @@ export type DashboardTask = {
 })
 export class DashboardListItemComponent {
   @Input() task: DashboardTask;
+
+  isExpanded = false;
 }
diff --git a/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.html b/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.html
new file mode 100644
index 000000000..21ed3d234
--- /dev/null
+++ b/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.html
@@ -0,0 +1,44 @@
+<div class="flex flex-row">
+  <div class="w-4 mr-6 shrink-0" [style.background-color]="task.color"></div>
+  <div class="pb-4 flex flex-col flex-grow shrink min-w-0">
+    <p class="font-bold">{{ task.statusLabel }}</p>
+    <p class="pt-2">{{ task.description }}</p>
+    <p style="font-size: 13px">
+      Complete by
+      <span class="font-bold">{{ task.dueDate | date: 'EEEE d MMMM' }}</span>
+    </p>
+    <div class="flex flex-row gap-2 pt-2">
+      <button
+        mat-stroked-button
+        [hidden]="!task?.taskDef?.hasTaskSheet"
+        (click)="downloadTaskSheet()"
+        class="truncate"
+      >
+        <mat-icon style="width: 15px; height: 15px; font-size: 15px" aria-label="Download">
+          description
+        </mat-icon>
+        Task
+      </button>
+      <button
+        mat-stroked-button
+        [hidden]="!task?.taskDef?.hasTaskResources"
+        (click)="downloadResources()"
+        class="truncate"
+      >
+        <mat-icon style="width: 15px; height: 15px; font-size: 15px">download</mat-icon>
+        Resources
+      </button>
+      <button
+        mat-stroked-button
+        uiSref="projects/dashboard"
+        [uiParams]="{projectId: task.projectId, taskAbbr: task.abbreviation}"
+        [matBadge]="task.comments > 0 ? task.comments : null"
+        matBadgeColor="warn"
+        matBadgePosition="after"
+      >
+        <mat-icon style="width: 15px; height: 15px; font-size: 15px">open_in_new</mat-icon>
+        More
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.scss b/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.scss
new file mode 100644
index 000000000..a3b7bc573
--- /dev/null
+++ b/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.scss
@@ -0,0 +1,3 @@
+.mat-badge-warn {
+  --mat-badge-text-color: white;
+}
diff --git a/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.ts b/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.ts
new file mode 100644
index 000000000..ae1247d95
--- /dev/null
+++ b/src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.ts
@@ -0,0 +1,28 @@
+import {Component, Input} from '@angular/core';
+import {DashboardTask} from '../dashboard-list-item.component';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+
+@Component({
+  selector: 'f-expanded-list-item',
+  templateUrl: './expanded-list-item.component.html',
+  styleUrls: ['./expanded-list-item.component.scss'],
+})
+export class DashboardExpandedListItemComponent {
+  @Input() task: DashboardTask;
+
+  constructor(private fileDownloader: FileDownloaderService) {}
+
+  downloadTaskSheet() {
+    this.fileDownloader.downloadFile(
+      this.task.taskDef.getTaskPDFUrl(true),
+      `${this.task.unitCode}-${this.task.abbreviation}-TaskSheet.pdf`
+    );
+  }
+
+  downloadResources() {
+    this.fileDownloader.downloadFile(
+      this.task.taskDef.getTaskResourcesUrl(true),
+      `${this.task.unitCode}-${this.task.abbreviation}-TaskResources.zip`
+    );
+  }
+}
diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts
index df568bdbe..d6016da9b 100644
--- a/src/app/doubtfire-angular.module.ts
+++ b/src/app/doubtfire-angular.module.ts
@@ -44,7 +44,8 @@ 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 { DashboardListItemComponent } from './dashboard/dashboard-list-item.component';
+import {DashboardListItemComponent} from './dashboard/list-item/dashboard-list-item.component';
+import {DashboardExpandedListItemComponent} from './dashboard/list-item/expanded-list-item/expanded-list-item.component';
 import {setTheme} from 'ngx-bootstrap/utils';
 
 import {CodeEditorModule} from '@ngstack/code-editor';
@@ -368,6 +369,7 @@ const GANTT_CHART_CONFIG = {
   // Components we declare
   declarations: [
     DashboardListItemComponent,
+    DashboardExpandedListItemComponent,
     AlertComponent,
     AboutDoubtfireModalContent,
     D2lUnitDetailsFormComponent,