diff --git a/src/app/common/filters/task-definition-name.pipe.ts b/src/app/common/filters/task-definition-name.pipe.ts
new file mode 100644
index 000000000..155595d2f
--- /dev/null
+++ b/src/app/common/filters/task-definition-name.pipe.ts
@@ -0,0 +1,19 @@
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { Task, TaskDefinition } from '../../api/models/doubtfire-model';
+
+@Pipe({
+  name: 'taskDefinitionName',
+})
+export class TaskDefinitionNamePipe implements PipeTransform {
+  transform(taskDefinitions: TaskDefinition[], searchName: string): TaskDefinition[] {
+    searchName = searchName.toLowerCase();
+    return taskDefinitions.filter( // use lodash filter?
+      (td) => {
+        return td.name.toLowerCase().includes(searchName)  ||
+          td.abbreviation.toLowerCase().includes(searchName)  ||
+          td.targetGradeText.toLowerCase().includes(searchName)
+      }
+    )
+  }
+}
diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts
index afd4c6375..a1de26867 100644
--- a/src/app/doubtfire-angular.module.ts
+++ b/src/app/doubtfire-angular.module.ts
@@ -223,6 +223,11 @@ import { AcceptEulaComponent } from './eula/accept-eula/accept-eula.component';
 import { TiiActionLogComponent } from './admin/tii-action-log/tii-action-log.component';
 import { TiiActionService } from './api/services/tii-action.service';
 import { FUnitsComponent } from './admin/states/f-units/f-units.component';
+import { FUnitTaskListComponent } from './units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component';
+import { FTaskDetailsViewComponent } from './units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component';
+import { FTaskSheetViewComponent } from './units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component';
+import { TasksViewerComponent } from './units/states/tasks/tasks-viewer/tasks-viewer.component';
+
 @NgModule({
   // Components we declare
   declarations: [
@@ -312,6 +317,10 @@ import { FUnitsComponent } from './admin/states/f-units/f-units.component';
     NewTeachingPeriodDialogComponent,
     FileViewerComponent,
     AlertComponent,
+    FUnitTaskListComponent,
+    FTaskDetailsViewComponent,
+    FTaskSheetViewComponent,
+    TasksViewerComponent,
     FUsersComponent,
     FUnitsComponent,
   ],
diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts
index 4a8b45ff2..eff889839 100644
--- a/src/app/doubtfire-angularjs.module.ts
+++ b/src/app/doubtfire-angularjs.module.ts
@@ -111,8 +111,8 @@ import 'build/src/app/units/units.js';
 import 'build/src/app/units/states/tasks/inbox/inbox.js';
 import 'build/src/app/units/states/tasks/tasks.js';
 import 'build/src/app/units/states/tasks/viewer/directives/task-sheet-view/task-sheet-view.js';
-import 'build/src/app/units/states/tasks/viewer/directives/task-details-view/task-details-view.js';
-import 'build/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.js';
+// import 'build/src/app/units/states/tasks/viewer/directives/task-details-view/task-details-view.js';
+// import 'build/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.js';
 import 'build/src/app/units/states/tasks/viewer/directives/directives.js';
 import 'build/src/app/units/states/tasks/viewer/viewer.js';
 import 'build/src/app/units/states/tasks/definition/definition.js';
@@ -239,6 +239,10 @@ import { UnitAnalyticsComponent } from './units/states/analytics/unit-analytics-
 import { UnitTaskEditorComponent } from './units/states/edit/directives/unit-tasks-editor/unit-task-editor.component';
 import { TeachingPeriodUnitImportService } from './admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog';
 import { FUsersComponent } from './admin/states/f-users/f-users.component';
+import { FUnitTaskListComponent } from './units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component';
+import { FTaskDetailsViewComponent } from './units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component';
+import { FTaskSheetViewComponent } from './units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component';
+import { TasksViewerComponent } from './units/states/tasks/tasks-viewer/tasks-viewer.component';
 
 import { FUnitsComponent } from './admin/states/f-units/f-units.component';
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
@@ -307,9 +311,13 @@ DoubtfireAngularJSModule.directive(
 );
 DoubtfireAngularJSModule.directive('fUnitAnalytics', downgradeComponent({ component: UnitAnalyticsComponent }));
 DoubtfireAngularJSModule.directive('extensionComment', downgradeComponent({ component: ExtensionCommentComponent }));
+DoubtfireAngularJSModule.directive('fUnitTaskList', downgradeComponent({ component: FUnitTaskListComponent }));
+DoubtfireAngularJSModule.directive('fTaskDetailsView', downgradeComponent({ component: FTaskDetailsViewComponent }));
+DoubtfireAngularJSModule.directive('fTaskSheetView', downgradeComponent({ component: FTaskSheetViewComponent }));
 DoubtfireAngularJSModule.directive('campusList', downgradeComponent({ component: CampusListComponent }));
 DoubtfireAngularJSModule.directive('activityTypeList', downgradeComponent({ component: ActivityTypeListComponent }));
 DoubtfireAngularJSModule.directive('fTaskStatusCard', downgradeComponent({ component: TaskStatusCardComponent }));
+DoubtfireAngularJSModule.directive('fTasksViewer', downgradeComponent({ component: TasksViewerComponent }));
 DoubtfireAngularJSModule.directive('fInbox', downgradeComponent({ component: InboxComponent }));
 DoubtfireAngularJSModule.directive('fTaskDueCard', downgradeComponent({ component: TaskDueCardComponent }));
 DoubtfireAngularJSModule.directive('fUsers', downgradeComponent({ component: FUsersComponent }));
diff --git a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.ts b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.ts
index 4b34001aa..f74a0045e 100644
--- a/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.ts
+++ b/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.ts
@@ -53,6 +53,8 @@ export class TaskDashboardComponent implements OnInit, OnChanges {
       labels: this.taskService.statusLabels,
       class: this.taskService.statusClass,
     };
+
+    console.log("task dashboard url: ", this.pdfUrl)
   }
 
   ngOnChanges(changes: SimpleChanges) {
diff --git a/src/app/sessions/transition-hooks.service.ts b/src/app/sessions/transition-hooks.service.ts
index 2317781d5..ff14f27cb 100644
--- a/src/app/sessions/transition-hooks.service.ts
+++ b/src/app/sessions/transition-hooks.service.ts
@@ -87,6 +87,7 @@ export class TransitionHooksService {
 
   // function to return true if navigating to inbox or task definition
   private isInboxState(toState: string): boolean {
-    return toState.startsWith('units/tasks/inbox') || toState.endsWith('tasks/definition');
+    // return toState.startsWith('units/tasks/inbox') || toState.endsWith('tasks/definition');
+    return toState.startsWith('units/tasks') || toState.endsWith('tasks/definition');
   }
 }
diff --git a/src/app/units/states/tasks/tasks-viewer.service.spec.ts b/src/app/units/states/tasks/tasks-viewer.service.spec.ts
new file mode 100644
index 000000000..79439a041
--- /dev/null
+++ b/src/app/units/states/tasks/tasks-viewer.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TasksViewerService } from './tasks-viewer.service';
+
+describe('TasksViewerService', () => {
+  let service: TasksViewerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TasksViewerService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/units/states/tasks/tasks-viewer.service.ts b/src/app/units/states/tasks/tasks-viewer.service.ts
new file mode 100644
index 000000000..f2b2b627e
--- /dev/null
+++ b/src/app/units/states/tasks/tasks-viewer.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { TaskDefinition } from 'src/app/api/models/task-definition';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TasksViewerService {
+  selectedTaskDef = new Subject<TaskDefinition>();
+  taskSelected = new Subject<boolean>();
+
+  public setSelectedTaskDef(taskDef: TaskDefinition) {
+    this.selectedTaskDef.next(taskDef);
+    this.taskSelected.next(true);
+  }
+
+  constructor() { }
+}
diff --git a/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.html b/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.html
new file mode 100644
index 000000000..fae78ebf4
--- /dev/null
+++ b/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.html
@@ -0,0 +1,42 @@
+<!-- Wide Window Display -->
+<div fxLayout="column" fxFill fxHide fxShow.gt-sm>
+  <div fxLayout="row" fxLayoutAlign="center stretch" fxFill>
+    <!-- Panel 1 -->
+    <div #tasklistpanel id="tasklistpanel" class="vertical-panel">
+      <f-unit-task-list [unitTasks]="taskDefs"></f-unit-task-list>
+    </div>
+
+    <div class="vertical-spacer"></div>
+
+    <!-- Panel 2 -->
+    <div fxFlex class="vertical-panel">
+      <f-task-sheet-view [taskDef]="selectedTaskDef"> </f-task-sheet-view>
+    </div>
+
+    <div class="vertical-spacer"></div>
+
+    <!-- Panel 3 -->
+    <div #taskdetailspanel class="vertical-panel" id="taskdetailspanel">
+      <f-task-details-view [taskDef]="selectedTaskDef" [unit]="unit"></f-task-details-view>
+    </div>
+  </div>
+</div>
+
+<!-- Narrow Window / Mobile Display -->
+<div #mobile fxLayout="row" fxFill fxHide fxShow.lt-md>
+  <div class="vertical-panel mobile" [hidden]="taskSelected">
+    <f-unit-task-list [unitTasks]="taskDefs"></f-unit-task-list>
+  </div>
+
+  <div [hidden]="!taskSelected" fxLayout="column" fxFill fxLayoutAlign="space-between stretch">
+    <div class="flex items-center">
+      <button mat-icon-button aria-label="Back to task list" matTooltip="Back to list" (click)="taskSelected = false">
+        <mat-icon>arrow_back_ios_new</mat-icon>
+      </button>
+    </div>
+
+    <div fxFlex class="vertical-panel mobile">
+      <f-task-details-view [taskDef]="selectedTaskDef" [unit]="unit"></f-task-details-view>
+    </div>
+  </div>
+</div>
diff --git a/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.scss b/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.scss
new file mode 100644
index 000000000..257c2de7f
--- /dev/null
+++ b/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.scss
@@ -0,0 +1,20 @@
+.vertical-panel {
+  border-radius: 10px;
+  background-color: white;
+  padding: 8px;
+  min-width: 60px;
+  width: 350px;
+  height: 100%;
+
+  &.mobile {
+      max-width: 100%;
+      width: 100%;
+      padding: 0px;
+  }
+}
+
+.vertical-spacer {
+  background-color: #f5f5f5;
+  z-index: 200;
+  width: 10px
+}
diff --git a/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.spec.ts b/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.spec.ts
new file mode 100644
index 000000000..bc7a35f05
--- /dev/null
+++ b/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.spec.ts
@@ -0,0 +1,20 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TasksViewerComponent } from './tasks-viewer.component';
+
+describe('TasksViewerComponent', () => {
+  let component: TasksViewerComponent;
+  let fixture: ComponentFixture<TasksViewerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TasksViewerComponent],
+    });
+    fixture = TestBed.createComponent(TasksViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.ts b/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.ts
new file mode 100644
index 000000000..af43e37ca
--- /dev/null
+++ b/src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.ts
@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TaskDefinition } from 'src/app/api/models/task-definition';
+import { TasksViewerService } from '../tasks-viewer.service';
+import { Unit } from 'src/app/api/models/unit';
+
+@Component({
+  selector: 'f-tasks-viewer',
+  templateUrl: './tasks-viewer.component.html',
+  styleUrls: ['./tasks-viewer.component.scss'],
+})
+export class TasksViewerComponent implements OnInit {
+  @Input() taskDefs: TaskDefinition[];
+  @Input() unit: Unit;
+  selectedTaskDef: TaskDefinition;
+  taskSelected: boolean;
+
+  constructor(private taskViewerService: TasksViewerService) {}
+
+  ngOnInit() {
+    this.taskViewerService.selectedTaskDef.subscribe((taskDef) => {
+      this.selectedTaskDef = taskDef;
+    });
+
+    this.taskViewerService.taskSelected.subscribe((taskSelected) => {
+      this.taskSelected = taskSelected;
+    });
+  }
+}
diff --git a/src/app/units/states/tasks/viewer/directives/directives.coffee b/src/app/units/states/tasks/viewer/directives/directives.coffee
index c9abf1ced..f299e1b0d 100644
--- a/src/app/units/states/tasks/viewer/directives/directives.coffee
+++ b/src/app/units/states/tasks/viewer/directives/directives.coffee
@@ -1,5 +1,5 @@
 angular.module('doubtfire.units.states.tasks.viewer.directives', [
-  'doubtfire.units.states.tasks.viewer.directives.unit-task-list'
+  # 'doubtfire.units.states.tasks.viewer.directives.unit-task-list'
   'doubtfire.units.states.tasks.viewer.directives.task-sheet-view'
-  'doubtfire.units.states.tasks.viewer.directives.task-details-view'
+  # 'doubtfire.units.states.tasks.viewer.directives.task-details-view'
 ])
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.html b/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.html
new file mode 100644
index 000000000..35f83cb6c
--- /dev/null
+++ b/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.html
@@ -0,0 +1,9 @@
+<div class="w-full h-full overflow-auto">
+  <div [hidden]="!taskDef">
+    <f-task-description-card [taskDef]="taskDef" [unit]="unit" [task]=""></f-task-description-card>
+  </div>
+
+  <div [hidden]="taskDef" fxFlexFill fxLayout="column" fxLayoutAlign="center center">
+    <mat-icon>subtitles_off</mat-icon>
+  </div>
+</div>
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.scss b/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.scss
new file mode 100644
index 000000000..dda643e64
--- /dev/null
+++ b/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.scss
@@ -0,0 +1,11 @@
+@use '@angular/material' as mat;
+
+@import '../../../../../../../theme.scss';
+
+$my-palette: mat.define-palette($md-formatif);
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+  padding-bottom: 15px;
+}
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.ts b/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.ts
new file mode 100644
index 000000000..57ea0b799
--- /dev/null
+++ b/src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TaskDefinition } from 'src/app/api/models/task-definition';
+import { Unit } from 'src/app/api/models/unit';
+import { TasksViewerService } from '../../../tasks-viewer.service';
+
+@Component({
+  selector: 'f-task-details-view',
+  templateUrl: './f-task-details-view.component.html',
+  styleUrls: ['./f-task-details-view.component.scss'],
+})
+export class FTaskDetailsViewComponent implements OnInit {
+  @Input() taskDef: TaskDefinition;
+  @Input() unit: Unit;
+
+  constructor(private tasksViewerService: TasksViewerService) {}
+
+  ngOnInit() {
+    this.tasksViewerService.selectedTaskDef.subscribe((taskDef) => {
+      this.taskDef = taskDef;
+    });
+  }
+}
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.html b/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.html
new file mode 100644
index 000000000..d49a08f6a
--- /dev/null
+++ b/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.html
@@ -0,0 +1,19 @@
+<div class="w-full h-full overflow-auto">
+  <ng-container [ngSwitch]="taskDef">
+    <ng-template [ngSwitchCase]="taskDef">
+      <ng-container *ngIf="taskDef; then pdfViewer; else noPdfUrl"></ng-container>
+    </ng-template>
+  </ng-container>
+
+  <!-- The PDF Viewer -->
+  <ng-template #pdfViewer>
+    <f-pdf-viewer [pdfUrl]="taskDef.getTaskPDFUrl()"></f-pdf-viewer>
+  </ng-template>
+
+  <!-- Render if no PDF URL is available for the current view -->
+  <ng-template #noPdfUrl>
+    <div fxFlexFill fxLayout="column" fxLayoutAlign="center center">
+      <mat-icon>subtitles_off</mat-icon>
+    </div>
+  </ng-template>
+</div>
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.scss b/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.spec.ts b/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.spec.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.ts b/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.ts
new file mode 100644
index 000000000..acddd7228
--- /dev/null
+++ b/src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TaskDefinition } from 'src/app/api/models/task-definition';
+import { TasksViewerService } from '../../../tasks-viewer.service';
+
+@Component({
+  selector: 'f-task-sheet-view',
+  templateUrl: './f-task-sheet-view.component.html',
+  styleUrls: ['./f-task-sheet-view.component.scss'],
+})
+export class FTaskSheetViewComponent implements OnInit {
+  @Input() taskDef: TaskDefinition;
+
+  constructor(private taskViewerService: TasksViewerService) {}
+
+  ngOnInit(): void {
+    this.taskViewerService.selectedTaskDef.subscribe((taskDef) => {
+      this.taskDef = taskDef;
+    });
+  }
+}
diff --git a/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.html b/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.html
new file mode 100644
index 000000000..ceb7f1449
--- /dev/null
+++ b/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.html
@@ -0,0 +1,51 @@
+<div class="task-list" div fxLayout="column" fxLayoutAlign="none">
+  <!-- Search Box -->
+  <div class="omnisearch rounded-t-2xl md:rounded-2xl">
+    <div class="flex items-center">
+      <button mat-icon-button aria-label="Search Icon" disabled class="flex-none flex items-center">
+        <mat-icon class="flex items-center" disabled>search</mat-icon>
+      </button>
+      <div class="grow">
+        <input
+          class="search"
+          autocomplete="off"
+          spellcheck="false"
+          type="text"
+          placeholder="Search Tasks"
+          [(ngModel)]="taskSearch"
+          (ngModelChange)="applyFilters()"
+        />
+      </div>
+    </div>
+  </div>
+
+  <!-- Scrollable Unit Task List -->
+  <div class="tasks-viewport scrollable" itemSize="60">
+    <mat-selection-list #tasks [multiple]="false">
+      <div class="text-center text-muted" *ngIf="filteredTasks.length === 0">No tasks to display</div>
+
+      <mat-list-item
+        class="clearfix"
+        *ngFor="let task of filteredTasks;"
+        [value]="task"
+        style="padding: 0; height: 60px"
+        [disableRipple]="true"
+      >
+        <div
+          class="w-full item-content"
+          *ngIf="task"
+          [ngClass]="{
+            selected: isSelectedTask(task)
+          }"
+        >
+          <div (click)="setSelectedTask(task)" class="task-entry flex items-center" [ngClass]="{ hover: task.hover }">
+            <div class="task-list-data" fxFlex>
+              <h4 class="task-title line-clamp-1">{{ task.name }}</h4>
+              <div class="task-details">{{ task.abbreviation }} - {{ gradeNames[task.targetGrade] }} Task</div>
+            </div>
+          </div>
+        </div>
+      </mat-list-item>
+    </mat-selection-list>
+  </div>
+</div>
diff --git a/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.scss b/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.scss
new file mode 100644
index 000000000..333db096a
--- /dev/null
+++ b/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.scss
@@ -0,0 +1,86 @@
+@use '@angular/material' as mat;
+
+@import '../../../../../../../theme.scss';
+@import '../../../../../../../styles/mixins/scrollable.scss';
+
+$my-palette: mat.define-palette($md-formatif);
+
+:host {
+  --background-gray: rgba(0, 0, 0, 0.04);
+  padding-right: 8px;
+}
+
+::ng-deep .cdk-virtual-scroll-content-wrapper {
+  width: 100%;
+}
+
+.task-list {
+  height: 100%;
+}
+
+.scrollable {
+  height: 100%;
+  @include scrollable();
+}
+
+.omnisearch {
+  background-color: var(--background-gray);
+  font-size: 15px;
+  padding-right: 10px;
+  text-align: left;
+
+  &.expanded {
+    height: 100%;
+  }
+
+  .search {
+    background-color: transparent;
+    border: hidden;
+    outline: none;
+  }
+
+  .mdc-icon-button {
+    display: flex;
+  }
+}
+
+.full-width {
+  width: 100%;
+}
+
+.task-list-data {
+  margin-top: 0px;
+  padding-left: 30px;
+
+  .task-title {
+    font-size: 15px;
+    margin-bottom: -2px;
+    margin-top: 8px;
+  }
+
+  .task-details {
+    margin-bottom: 0px;
+    font-size: 12px;
+  }
+}
+
+.mat-mdc-list-item .item-content {
+  height: 60px;
+  border-radius: 20px;
+}
+
+.mat-mdc-list-item .item-content:hover {
+  cursor: pointer;
+}
+
+.mat-mdc-list-item .item-content.selected {
+  background-color: var(--background-gray);
+}
+
+.task-inbox.narrow-width .mat-mdc-list-item .item-content.selected {
+  margin-right: 12px;
+}
+
+.tasks-viewport {
+  height: 100%;
+}
diff --git a/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.spec.ts b/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.spec.ts
new file mode 100644
index 000000000..dc592e52c
--- /dev/null
+++ b/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FUnitTaskListComponent } from './f-unit-task-list.component';
+
+describe('FUnitTaskListComponent', () => {
+  let component: FUnitTaskListComponent;
+  let fixture: ComponentFixture<FUnitTaskListComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FUnitTaskListComponent],
+    });
+    fixture = TestBed.createComponent(FUnitTaskListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.ts b/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.ts
new file mode 100644
index 000000000..40f66e729
--- /dev/null
+++ b/src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.ts
@@ -0,0 +1,47 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Grade } from 'src/app/api/models/grade';
+import { TaskDefinition } from 'src/app/api/models/doubtfire-model';
+import { TaskDefinitionNamePipe } from 'src/app/common/filters/task-definition-name.pipe';
+import { TasksViewerService } from '../../../tasks-viewer.service';
+
+@Component({
+  selector: 'f-unit-task-list',
+  templateUrl: './f-unit-task-list.component.html',
+  styleUrls: ['./f-unit-task-list.component.scss'],
+})
+export class FUnitTaskListComponent implements OnInit {
+  @Input() unitTasks: TaskDefinition[];
+  filteredTasks: TaskDefinition[] = null; // list of tasks which match the taskSearch term
+  taskSearch: string = ''; // task search term from user input
+  taskDefinitionNamePipe = new TaskDefinitionNamePipe();
+  private gradeNames: string[] = Grade.GRADES;
+  selectedTaskDef: TaskDefinition;
+  taskSelected: boolean;
+
+  constructor(private taskViewerService: TasksViewerService) {}
+
+  applyFilters() {
+    this.filteredTasks = this.taskDefinitionNamePipe.transform(this.unitTasks, this.taskSearch);
+  }
+
+  ngOnInit(): void {
+    this.applyFilters();
+
+    this.taskViewerService.selectedTaskDef.subscribe((taskDef) => {
+      this.selectedTaskDef = taskDef;
+    });
+    this.taskViewerService.selectedTaskDef.next(this.unitTasks[0]);
+
+    this.taskViewerService.taskSelected.subscribe((taskSelected) => {
+      this.taskSelected = taskSelected;
+    });
+  }
+
+  setSelectedTask(task: TaskDefinition) {
+    this.taskViewerService.setSelectedTaskDef(task);
+  }
+
+  isSelectedTask(task: TaskDefinition) {
+    return this.selectedTaskDef.id == task.id;
+  }
+}
diff --git a/src/app/units/states/tasks/viewer/viewer.coffee b/src/app/units/states/tasks/viewer/viewer.coffee
index 07fbf63a4..4343498ae 100644
--- a/src/app/units/states/tasks/viewer/viewer.coffee
+++ b/src/app/units/states/tasks/viewer/viewer.coffee
@@ -19,6 +19,5 @@ angular.module('doubtfire.units.states.tasks.viewer', [
 )
 
 .controller('TaskViewerStateCtrl', ($scope) ->
-  $scope.unitTasks = $scope.unit.taskDefinitions
-  $scope.selectedTaskDef = $scope.unitTasks[0]
+  $scope.taskDefs = $scope.unit.taskDefinitions
 )
diff --git a/src/app/units/states/tasks/viewer/viewer.scss b/src/app/units/states/tasks/viewer/viewer.scss
index e69de29bb..382bfdc24 100644
--- a/src/app/units/states/tasks/viewer/viewer.scss
+++ b/src/app/units/states/tasks/viewer/viewer.scss
@@ -0,0 +1,4 @@
+f-tasks-viewer {
+  height: calc($main-view-max-height + 70px); // temporary fix to reclaim the footer region for this specific page
+  display: flex;
+}
diff --git a/src/app/units/states/tasks/viewer/viewer.tpl.html b/src/app/units/states/tasks/viewer/viewer.tpl.html
index 9fdb6bc1f..358d6f33a 100644
--- a/src/app/units/states/tasks/viewer/viewer.tpl.html
+++ b/src/app/units/states/tasks/viewer/viewer.tpl.html
@@ -1,19 +1 @@
-<div class="panel-full-screen">
-  <unit-task-list
-    filters="filters"
-    unit-tasks="unitTasks"
-    unit='unit'
-    selected-task-def="selectedTaskDef"
-    class="col-xs-12 col-md-3"><!--/panel-1-->
-  </unit-task-list>
-  <task-sheet-view
-    task-def="selectedTaskDef"
-    unit='unit'
-    class="col-xs-12 col-md-6">
-  </task-sheet-view><!--/panel-2-->
-  <task-details-view
-    task-def="selectedTaskDef"
-    unit="unit"
-    class="col-xs-12 col-md-3">
-  </task-details-view><!--/panel-3-->
-</div>
\ No newline at end of file
+<f-tasks-viewer [task-defs]="taskDefs" [unit]="unit"></f-tasks-viewer>