diff --git a/src/app/dashboard/dashboard-list-item.component.html b/src/app/dashboard/dashboard-list-item.component.html
new file mode 100644
index 000000000..ef5bd52e5
--- /dev/null
+++ b/src/app/dashboard/dashboard-list-item.component.html
@@ -0,0 +1,8 @@
+<div class="task-item" (click)="goToTask()">
+  <h4>{{ task?.title }}</h4>
+
+  <div class="task-details">
+    <span>Task {{ task?.number }}</span>
+    <span class="task-type">{{ task?.type }}</span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/dashboard/dashboard-list-item.component.scss b/src/app/dashboard/dashboard-list-item.component.scss
new file mode 100644
index 000000000..463fb3471
--- /dev/null
+++ b/src/app/dashboard/dashboard-list-item.component.scss
@@ -0,0 +1,22 @@
+.task-item {
+  padding: 12px;
+  border-radius: 8px;
+  background: white;
+  cursor: pointer;
+  margin-bottom: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+
+  &:hover {
+    background: #f5f5f5;
+  }
+}
+
+.task-details {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.task-type {
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/app/dashboard/dashboard-list-item.component.ts b/src/app/dashboard/dashboard-list-item.component.ts
new file mode 100644
index 000000000..8c3dd6171
--- /dev/null
+++ b/src/app/dashboard/dashboard-list-item.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'dashboard-list-item',
+  templateUrl: './dashboard-list-item.component.html',
+  styleUrls: ['./dashboard-list-item.component.scss']
+})
+export class DashboardListItemComponent {
+  @Input() task: any;
+
+  constructor(private router: Router) {}
+
+  goToTask() {
+    if (!this.task) return;
+
+    this.router.navigate([
+      '/units',
+      this.task.unitId,
+      'tasks',
+      this.task.id
+    ]);
+  }
+}
\ No newline at end of file
diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts
index 879db426d..78ddb71d2 100644
--- a/src/app/doubtfire-angular.module.ts
+++ b/src/app/doubtfire-angular.module.ts
@@ -44,7 +44,7 @@ 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 {setTheme} from 'ngx-bootstrap/utils';
 
 import {CodeEditorModule} from '@ngstack/code-editor';
@@ -366,6 +366,7 @@ const GANTT_CHART_CONFIG = {
 @NgModule({
   // Components we declare
   declarations: [
+    DashboardListItemComponent,
     AlertComponent,
     AboutDoubtfireModalContent,
     D2lUnitDetailsFormComponent,