diff --git a/.prettierrc.json b/.prettierrc.json
index 08d6d29d..c7db42fc 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,4 +1,7 @@
 {
     "tabWidth": 4,
-    "printWidth": 120
+    "printWidth": 120,
+    "singleQuote": true,
+    "semi": true,
+    "trailingComma": "es5"
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index affc663d..ca621d30 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,9 @@
 {
     "workbench.tree.indent": 18,
     "editor.tabSize": 4,
+    "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
 }
diff --git a/src/app/common/commonMethods.ts b/src/app/common/commonMethods.ts
index ed49cbde..60ea891f 100644
--- a/src/app/common/commonMethods.ts
+++ b/src/app/common/commonMethods.ts
@@ -2,7 +2,7 @@
 
 // random numbers generated are lowerbound inclusive and upperbound exclusive: [lowerbound, upperbound)
 export function generateRandomNonrepeatingNumberList(size: number, lowerBound: number, upperBound: number): number[] {
-    if (size > upperBound - lowerBound) throw new Error("Size cannot be greater than the bounds");
+    if (size > upperBound - lowerBound) throw new Error('Size cannot be greater than the bounds');
     const randList = [];
     while (randList.length < size) {
         const randNum = getRandomNumber(lowerBound, upperBound);
@@ -79,30 +79,6 @@ export function wait(time: number): Promise<void> {
     });
 }
 
-export function isSurveyMonkeyQuestionnaire(task: string): boolean {
-    return false;
-    // return task.includes(RouteMap.surveymonkeyquestionnaire.id);
-}
-
-export function isCustomTask(task: string): boolean {
-    return false;
-    // return task.includes(RouteMap.pavloviatask.id);
-}
-
-export const ConsentIds = [
-    // RouteMap.consent.id,
-    // RouteMap.webPhenoClinical.id,
-    // RouteMap.webPhenoClinicalFR.id,
-    // RouteMap.stressClinical.id,
-    // RouteMap.stressClinicalFR.id,
-    // RouteMap.stressClinicalDebrief.id,
-    // RouteMap.stressPilot.id,
-];
-// remove later, this is a bandaid fix
-export function isConsent(id: string): boolean {
-    return ConsentIds.includes(id);
-}
-
 export function thisOrDefault<T>(value: T, defaultValue: T): T {
     return value === null || value === undefined ? defaultValue : value;
 }
@@ -114,3 +90,7 @@ export function throwErrIfNotDefined(value: any, errStr: string): any {
         return value;
     }
 }
+
+export function objIsEmpty(arg: any): boolean {
+    return Object.keys(arg).length === 0;
+}
diff --git a/src/app/models/TaskData.ts b/src/app/models/TaskData.ts
index 96e55087..14a0e9c2 100644
--- a/src/app/models/TaskData.ts
+++ b/src/app/models/TaskData.ts
@@ -1,20 +1,20 @@
-import { UseHand } from "../pages/tasks/task-playables/finger-tapping/finger-tapping-task.component";
-import { RatingTaskCounterBalance } from "../pages/tasks/task-playables/everyday-choice/rater/rater.component";
-import { SmileyFaceTaskCounterbalance } from "../pages/tasks/task-playables/smiley-face/smiley-face.component";
-import { Key, UserResponse } from "./InternalDTOs";
-import { ParticipantType } from "./enums";
+import { UseHand } from '../pages/tasks/task-playables/finger-tapping/finger-tapping-task.component';
+import { RatingTaskCounterBalance } from '../pages/tasks/task-playables/everyday-choice/rater/rater.component';
+import { SmileyFaceTaskCounterbalance } from '../pages/tasks/task-playables/smiley-face/smiley-face.component';
+import { Key, UserResponse } from './InternalDTOs';
+import { ParticipantType } from './enums';
 
 export enum TaskNames {
-    ODDBALL = "oddball",
-    DIGITSPAN = "digitspan",
-    FINGERTAPPING = "fingertapping",
-    NBACK = "nback",
-    STROOP = "stroop",
-    TRAILMAKING = "trailmaking",
-    TASKSWITCHING = "taskswitching",
-    DEMANDSELECTION = "demandselection",
-    SMILEYFACE = "smileyface",
-    EVERYDAYCHOICE = "everydaychoice",
+    ODDBALL = 'oddball',
+    DIGITSPAN = 'digitspan',
+    FINGERTAPPING = 'fingertapping',
+    NBACK = 'nback',
+    STROOP = 'stroop',
+    TRAILMAKING = 'trailmaking',
+    TASKSWITCHING = 'taskswitching',
+    DEMANDSELECTION = 'demandselection',
+    SMILEYFACE = 'smileyface',
+    EVERYDAYCHOICE = 'everydaychoice',
 }
 
 export abstract class TaskData {
@@ -132,17 +132,10 @@ export class EverydayChoiceTaskData extends TaskData {
     activity: string;
     question: string;
     userAnswer: number;
-    activityType: "DoNothing" | "DoSomething" | "";
+    activityType: 'DoNothing' | 'DoSomething' | '';
     responseTime: number;
 }
 
-export class CustomTask {
-    customTaskID: string;
-    name: string;
-    url: string;
-    description: string;
-}
-
 export class ParticipantData {
     userId: string;
     studyId: number;
diff --git a/src/app/models/enums.ts b/src/app/models/enums.ts
index 208f7594..33fe4991 100644
--- a/src/app/models/enums.ts
+++ b/src/app/models/enums.ts
@@ -1,69 +1,72 @@
 export enum RouteNames {
-    LANDINGPAGE_LOGIN_SUBROUTE = "login",
-    LANDINGPAGE_REGISTER_SUBROUTE = "register",
-    LANDINGPAGE_FORGOT_PASSWORD = "send-reset-email",
-    LANDINGPAGE_RESET_PASSWORD = "reset",
+    LANDINGPAGE_LOGIN_SUBROUTE = 'login',
+    LANDINGPAGE_REGISTER_SUBROUTE = 'register',
+    LANDINGPAGE_FORGOT_PASSWORD = 'send-reset-email',
+    LANDINGPAGE_RESET_PASSWORD = 'reset',
 
-    TASKPLAYER = "playtask",
+    TASKPLAYER = 'playtask',
 
-    QUESTIONNAIRE = "questionnaire",
+    QUESTIONNAIRE = 'questionnaire',
 
-    PAVLOVIA = "pavlovia",
+    PAVLOVIA = 'pavlovia',
 
-    CONSENT = "consent",
+    CONSENT = 'consent',
+
+    INFO_DISPLAY = 'infodisplay',
 }
 
 export enum AdminRouteNames {
-    DASHBOARD_BASEROUTE = "admin-dashboard",
+    DASHBOARD_BASEROUTE = 'admin-dashboard',
 
-    COMPONENTS_SUBROUTE = "components",
-    DATA_SUBROUTE = "data",
-    GUESTS_SUBROUTE = "guests",
-    STUDIES_SUBROUTE = "studies",
-    STUDIES_CREATE_SUBROUTE = "create",
-    STUDIES_VIEW_SUBROUTE = "view",
+    COMPONENTS_SUBROUTE = 'components',
+    DATA_SUBROUTE = 'data',
+    GUESTS_SUBROUTE = 'guests',
+    STUDIES_SUBROUTE = 'studies',
+    STUDIES_CREATE_SUBROUTE = 'create',
+    STUDIES_VIEW_SUBROUTE = 'view',
 }
 
 export enum ParticipantRouteNames {
-    DASHBOARD_BASEROUTE = "participant-dashboard",
-    CROWDSOURCEPARTICIPANT_REGISTER_BASEROUTE = "crowdsource-participant",
+    DASHBOARD_BASEROUTE = 'participant-dashboard',
+    CROWDSOURCEPARTICIPANT_REGISTER_BASEROUTE = 'crowdsource-participant',
 
-    STUDIES_SUBROUTE = "studies",
-    PROFILE_SUBROUTE = "profile",
+    STUDIES_SUBROUTE = 'studies',
+    PROFILE_SUBROUTE = 'profile',
 }
 
 // Each task is one of the following type
 export enum TaskType {
-    NAB = "NAB",
-    EXPERIMENTAL = "EXPERIMENTAL",
-    QUESTIONNAIRE = "QUESTIONNAIRE",
-    CONSENT = "CONSENT",
+    NAB = 'NAB',
+    EXPERIMENTAL = 'EXPERIMENTAL',
+    QUESTIONNAIRE = 'QUESTIONNAIRE',
+    CONSENT = 'CONSENT',
+    INFO_DISPLAY = 'INFO_DISPLAY',
 }
 
 export enum Platform {
-    PSHARPLAB = "PSHARPLAB",
-    SURVEYMONKEY = "SURVEYMONEKY",
-    PAVLOVIA = "PAVLOVIA",
+    PSHARPLAB = 'PSHARPLAB',
+    SURVEYMONKEY = 'SURVEYMONEKY',
+    PAVLOVIA = 'PAVLOVIA',
 }
 
 export enum SnackbarType {
-    SUCCESS = "SUCCESS",
-    ERROR = "ERROR",
-    INFO = "INFO",
+    SUCCESS = 'SUCCESS',
+    ERROR = 'ERROR',
+    INFO = 'INFO',
 }
 
 export enum Role {
-    ADMIN = "ADMIN",
-    PARTICIPANT = "PARTICIPANT",
-    GUEST = "GUEST", // access to admin views but cannot make any calls to backend
+    ADMIN = 'ADMIN',
+    PARTICIPANT = 'PARTICIPANT',
+    GUEST = 'GUEST', // access to admin views but cannot make any calls to backend
 }
 
 export enum StimuliProvidedType {
-    HARDCODED = "hardcoded",
-    GENERATED = "generated",
+    HARDCODED = 'hardcoded',
+    GENERATED = 'generated',
 }
 
 export enum ParticipantType {
-    CROWDSOURCED = "CROWDSOURCED",
-    ACCOUNTHOLDER = "ACCOUNTHOLDER",
+    CROWDSOURCED = 'CROWDSOURCED',
+    ACCOUNTHOLDER = 'ACCOUNTHOLDER',
 }
diff --git a/src/app/pages/admin/admin-dashboard/studies/create-modify-study/create-modify-study.component.scss b/src/app/pages/admin/admin-dashboard/studies/create-modify-study/create-modify-study.component.scss
index 5064c4df..13390f9a 100644
--- a/src/app/pages/admin/admin-dashboard/studies/create-modify-study/create-modify-study.component.scss
+++ b/src/app/pages/admin/admin-dashboard/studies/create-modify-study/create-modify-study.component.scss
@@ -93,10 +93,6 @@
     background-color: #b157a6;
 }
 
-.CustomTask {
-    background-color: #3e1e52;
-}
-
 .badge {
     padding: 5px 8px;
     border-radius: 10px;
diff --git a/src/app/pages/admin/admin-dashboard/study-components/manage-questionnaires/manage-questionnaires.component.html b/src/app/pages/admin/admin-dashboard/study-components/manage-questionnaires/manage-questionnaires.component.html
deleted file mode 100644
index c6ad85a2..00000000
--- a/src/app/pages/admin/admin-dashboard/study-components/manage-questionnaires/manage-questionnaires.component.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<div class="container-fluid p-4">
-    <div class="d-flex justify-content-between">
-        <h2 class="mb-5">Psharplab Questionnaires</h2>
-    </div>
-
-    <div *ngIf="(questionnaires | async)?.length == 0" style="color: red">No questionnaires</div>
-
-    <table
-        *ngIf="(questionnaires | async)?.length > 0"
-        mat-table
-        [dataSource]="questionnaires"
-        class="mat-elevation-z3 w-100"
-    >
-        <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef>Name</th>
-            <td class="first-col-width" mat-cell *matCellDef="let questionnaire">{{ questionnaire.name }}</td>
-        </ng-container>
-
-        <ng-container matColumnDef="description">
-            <th mat-header-cell *matHeaderCellDef>Description</th>
-            <td mat-cell *matCellDef="let questionnaire">{{ questionnaire.description }}</td>
-        </ng-container>
-
-        <ng-container matColumnDef="url">
-            <th mat-header-cell *matHeaderCellDef>URL</th>
-            <td mat-cell *matCellDef="let questionnaire">{{ questionnaire.url }}</td>
-        </ng-container>
-
-        <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef>Actions</th>
-            <td mat-cell *matCellDef="let questionnaire">
-                <div class="d-flex justify-content-between">
-                    <button mat-icon-button (click)="previewQuestionnaire(questionnaire)">
-                        <mat-icon style="color: green">play_arrow</mat-icon>
-                    </button>
-                </div>
-            </td></ng-container
-        >
-
-        <tr mat-header-row *matHeaderRowDef="displayedQuestionnaireColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedQuestionnaireColumns"></tr>
-    </table>
-</div>
diff --git a/src/app/pages/admin/admin-dashboard/study-components/manage-questionnaires/manage-questionnaires.component.ts b/src/app/pages/admin/admin-dashboard/study-components/manage-questionnaires/manage-questionnaires.component.ts
deleted file mode 100644
index a40c9784..00000000
--- a/src/app/pages/admin/admin-dashboard/study-components/manage-questionnaires/manage-questionnaires.component.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-import { MatDialog } from "@angular/material/dialog";
-import { Router } from "@angular/router";
-import { Observable, Subscription } from "rxjs";
-import { map } from "rxjs/operators";
-import { RouteNames, TaskType } from "src/app/models/enums";
-import { Task } from "src/app/models/Task";
-import { QuestionnaireNavigationConfig } from "src/app/pages/tasks/questionnaire-reader/questionnaire-reader.component";
-import { TaskService } from "src/app/services/task.service";
-
-@Component({
-    selector: "app-manage-questionnaires",
-    templateUrl: "./manage-questionnaires.component.html",
-    styleUrls: ["./manage-questionnaires.component.scss"],
-})
-export class ManageQuestionnairesComponent implements OnInit {
-    constructor(private dialog: MatDialog, private taskService: TaskService, private router: Router) {}
-
-    subscriptions: Subscription[] = [];
-    displayedQuestionnaireColumns = ["name", "description", "actions"];
-
-    ngOnInit() {
-        this.tasks = this.taskService.tasks;
-    }
-
-    tasks: Observable<Task[]>;
-
-    get questionnaires(): Observable<Task[]> {
-        return this.tasks.pipe(
-            map((tasks) => (tasks ? tasks.filter((task) => task.taskType === TaskType.QUESTIONNAIRE) : []))
-        );
-    }
-
-    previewQuestionnaire(questionnaire: Task) {
-        const questionnaireConfig: QuestionnaireNavigationConfig = {
-            metadata: questionnaire.config,
-            mode: "test",
-        };
-
-        this.router.navigate([`${RouteNames.QUESTIONNAIRE}`], { state: questionnaireConfig });
-    }
-
-    ngOnDestroy() {
-        this.subscriptions.forEach((sub) => sub.unsubscribe());
-    }
-}
diff --git a/src/app/pages/admin/admin-dashboard/study-components/pavlovia-tasks/pavlovia-tasks.component.html b/src/app/pages/admin/admin-dashboard/study-components/pavlovia-tasks/pavlovia-tasks.component.html
deleted file mode 100644
index 2256d504..00000000
--- a/src/app/pages/admin/admin-dashboard/study-components/pavlovia-tasks/pavlovia-tasks.component.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<div class="container-fluid p-4">
-    <div class="d-flex justify-content-between">
-        <h2 class="mb-5">Pavlovia Tasks</h2>
-    </div>
-
-    <div *ngIf="(customTasks | async)?.length === 0" style="color: red">No pavlovia tasks</div>
-
-    <h3 class="mat-h3">Neuropsych Battery (NAB)</h3>
-    <hr />
-
-    <table
-        *ngIf="(NABPavloviaTasks | async).length > 0"
-        mat-table
-        [dataSource]="NABPavloviaTasks"
-        class="mat-elevation-z3"
-    >
-        <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef>Name</th>
-            <td class="first-col-width" mat-cell *matCellDef="let NABTask">{{ NABTask.name }}</td>
-        </ng-container>
-
-        <ng-container matColumnDef="description">
-            <th mat-header-cell *matHeaderCellDef>Description</th>
-            <td mat-cell *matCellDef="let NABTask">{{ NABTask.description }}</td>
-        </ng-container>
-
-        <ng-container matColumnDef="url">
-            <th mat-header-cell *matHeaderCellDef>URL</th>
-            <td mat-cell *matCellDef="let task">{{ task.externalURL }}</td>
-        </ng-container>
-
-        <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef>Actions</th>
-            <td mat-cell *matCellDef="let NABTask">
-                <button mat-icon-button (click)="run(NABTask)">
-                    <mat-icon style="color: green">play_arrow</mat-icon>
-                </button>
-            </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="displayedTaskColumns"></tr>
-        <tr mat-row *matRowDef="let element; columns: displayedTaskColumns"></tr>
-    </table>
-    <span class="error-text" *ngIf="(NABPavloviaTasks | async).length === 0">No NAB pavlovia tasks</span>
-</div>
-
-<div class="container-fluid p-4">
-    <h3 class="mat-h3">Experimental Tasks</h3>
-    <hr />
-
-    <table
-        *ngIf="(experimentalPavloviaTasks | async).length > 0"
-        mat-table
-        [dataSource]="experimentalPavloviaTasks"
-        class="mat-elevation-z3"
-    >
-        <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef>Name</th>
-            <td class="first-col-width" mat-cell *matCellDef="let task">{{ task.name }}</td>
-        </ng-container>
-
-        <ng-container matColumnDef="description">
-            <th mat-header-cell *matHeaderCellDef>Description</th>
-            <td mat-cell *matCellDef="let task">{{ task.description }}</td>
-        </ng-container>
-
-        <ng-container matColumnDef="url">
-            <th mat-header-cell *matHeaderCellDef>URL</th>
-            <td mat-cell *matCellDef="let task">{{ task.externalURL }}</td>
-        </ng-container>
-
-        <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef>Actions</th>
-            <td mat-cell *matCellDef="let task">
-                <button mat-icon-button (click)="run(task)">
-                    <mat-icon style="color: green">play_arrow</mat-icon>
-                </button>
-            </td></ng-container
-        >
-
-        <tr mat-header-row *matHeaderRowDef="displayedTaskColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedTaskColumns"></tr>
-    </table>
-    <span class="error-text" *ngIf="(experimentalPavloviaTasks | async).length === 0"
-        >No experimental pavlovia tasks</span
-    >
-</div>
diff --git a/src/app/pages/admin/admin-dashboard/study-components/pavlovia-tasks/pavlovia-tasks.component.ts b/src/app/pages/admin/admin-dashboard/study-components/pavlovia-tasks/pavlovia-tasks.component.ts
deleted file mode 100644
index c56976a9..00000000
--- a/src/app/pages/admin/admin-dashboard/study-components/pavlovia-tasks/pavlovia-tasks.component.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
-import { Observable } from "rxjs";
-import { map } from "rxjs/operators";
-import { Platform, RouteNames, TaskType } from "src/app/models/enums";
-import { Task } from "src/app/models/Task";
-import { CustomTask } from "src/app/models/TaskData";
-import { EmbeddedPageNavigationConfig } from "src/app/pages/tasks/embedded-page/embedded-page.component";
-import { TaskService } from "src/app/services/task.service";
-
-@Component({
-    selector: "app-pavlovia-tasks",
-    templateUrl: "./pavlovia-tasks.component.html",
-    styleUrls: ["./pavlovia-tasks.component.scss"],
-})
-export class PavloviaTasksComponent implements OnInit {
-    displayedTaskColumns = ["name", "description", "url", "actions"];
-
-    customTasks: Observable<CustomTask[]>;
-
-    ngOnInit() {
-        this.pavloviaTasks = this.taskService.tasks;
-    }
-
-    pavloviaTasks: Observable<Task[]>;
-
-    get experimentalPavloviaTasks(): Observable<Task[]> {
-        return this.pavloviaTasks.pipe(
-            map((tasks) =>
-                tasks
-                    ? tasks.filter(
-                          (task) => task.taskType === TaskType.EXPERIMENTAL && task.fromPlatform === Platform.PAVLOVIA
-                      )
-                    : []
-            )
-        );
-    }
-
-    get NABPavloviaTasks(): Observable<Task[]> {
-        return this.pavloviaTasks.pipe(
-            map((tasks) =>
-                tasks
-                    ? tasks.filter((task) => task.taskType === TaskType.NAB && task.fromPlatform === Platform.PAVLOVIA)
-                    : []
-            )
-        );
-    }
-
-    run(task: Task) {
-        const config: EmbeddedPageNavigationConfig = {
-            config: {
-                externalURL: task.externalURL,
-                task: task,
-            },
-            mode: "test",
-        };
-        this.router.navigate([`${RouteNames.PAVLOVIA}`], { state: config });
-    }
-
-    constructor(private taskService: TaskService, private router: Router) {}
-}
diff --git a/src/app/pages/admin/admin-dashboard/study-components/shared/view-components-table/view-components-table.component.html b/src/app/pages/admin/admin-dashboard/study-components/shared/view-components-table/view-components-table.component.html
new file mode 100644
index 00000000..bdb4d683
--- /dev/null
+++ b/src/app/pages/admin/admin-dashboard/study-components/shared/view-components-table/view-components-table.component.html
@@ -0,0 +1,29 @@
+<ng-container *ngIf="tableTitle">
+    <h3 class="mat-h3">{{ tableTitle }}</h3>
+    <hr />
+</ng-container>
+
+<div *ngIf="rowData?.length == 0" style="color: red">{{ msgOnEmpty }}</div>
+
+<table *ngIf="rowData?.length > 0" mat-table [dataSource]="rowData" class="mat-elevation-z3 w-100">
+    <ng-container *ngFor="let row of tableconfig">
+        <ng-container [matColumnDef]="row.columnHeader">
+            <th mat-header-cell *matHeaderCellDef>{{ row.columnHeader }}</th>
+            <td mat-cell *matCellDef="let givenRow">{{ givenRow[row.columnKey] }}</td>
+        </ng-container>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <td mat-cell *matCellDef="let givenRow">
+            <div class="d-flex justify-content-between">
+                <button mat-icon-button (click)="onSelect(givenRow)">
+                    <mat-icon style="color: green">play_arrow</mat-icon>
+                </button>
+            </div>
+        </td></ng-container
+    >
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+</table>
diff --git a/src/app/pages/admin/admin-dashboard/study-components/shared/view-components-table/view-components-table.component.scss b/src/app/pages/admin/admin-dashboard/study-components/shared/view-components-table/view-components-table.component.scss
new file mode 100644
index 00000000..60fd8b78
--- /dev/null
+++ b/src/app/pages/admin/admin-dashboard/study-components/shared/view-components-table/view-components-table.component.scss
@@ -0,0 +1,3 @@
+td {
+    white-space: normal;
+}
diff --git a/src/app/pages/admin/admin-dashboard/study-components/shared/view-components-table/view-components-table.component.spec.ts b/src/app/pages/admin/admin-dashboard/study-components/shared/view-components-table/view-components-table.component.spec.ts
new file mode 100644
index 00000000..e943c062
--- /dev/null
+++ b/src/app/pages/admin/admin-dashboard/study-components/shared/view-components-table/view-components-table.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewComponentsTableComponent } from './view-components-table.component';
+
+describe('ViewComponentsTableComponent', () => {
+  let component: ViewComponentsTableComponent;
+  let fixture: ComponentFixture<ViewComponentsTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ViewComponentsTableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewComponentsTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/admin/admin-dashboard/study-components/shared/view-components-table/view-components-table.component.ts b/src/app/pages/admin/admin-dashboard/study-components/shared/view-components-table/view-components-table.component.ts
new file mode 100644
index 00000000..015aa7fe
--- /dev/null
+++ b/src/app/pages/admin/admin-dashboard/study-components/shared/view-components-table/view-components-table.component.ts
@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+export interface ViewComponentsTableModel<T> {
+    tableConfig: {
+        columnHeader: string;
+        columnKey: string;
+    }[];
+    tableData: T[];
+    msgOnEmpty: string;
+    tableTitle: string;
+}
+
+@Component({
+    selector: 'app-view-components-table',
+    templateUrl: './view-components-table.component.html',
+    styleUrls: ['./view-components-table.component.scss'],
+})
+export class ViewComponentsTableComponent<T> implements OnInit {
+    @Input()
+    data: ViewComponentsTableModel<T>;
+
+    @Output()
+    rowRun: EventEmitter<T> = new EventEmitter();
+
+    get rowData(): T[] {
+        return this.data?.tableData || [];
+    }
+
+    get tableTitle(): string {
+        return this.data?.tableTitle;
+    }
+
+    get displayedColumns(): string[] {
+        const columnHeaders = this.data.tableConfig.map((x) => x.columnHeader);
+        return [...columnHeaders, 'actions'];
+    }
+
+    get tableconfig(): { columnHeader: string; columnKey: string }[] {
+        return this.data?.tableConfig || [];
+    }
+
+    get msgOnEmpty(): string {
+        return this.data?.msgOnEmpty || 'No data';
+    }
+
+    onSelect(arg: T) {
+        this.rowRun.emit(arg);
+    }
+
+    constructor() {}
+
+    ngOnInit(): void {}
+}
diff --git a/src/app/pages/admin/admin-dashboard/study-components/study-components.component.html b/src/app/pages/admin/admin-dashboard/study-components/study-components.component.html
index fcadc050..8c036650 100644
--- a/src/app/pages/admin/admin-dashboard/study-components/study-components.component.html
+++ b/src/app/pages/admin/admin-dashboard/study-components/study-components.component.html
@@ -1,11 +1,18 @@
 <mat-tab-group (selectedTabChange)="saveTabPref($event)" [(selectedIndex)]="selectedTabIndex">
     <mat-tab label="Psharplab Tasks">
-        <app-view-tasks></app-view-tasks>
+        <div class="p-4">
+            <app-view-tasks></app-view-tasks>
+        </div>
     </mat-tab>
     <mat-tab label="Psharplab Questionnaires">
-        <app-manage-questionnaires></app-manage-questionnaires>
+        <div class="p-4">
+            <app-manage-questionnaires></app-manage-questionnaires>
+        </div>
     </mat-tab>
     <mat-tab label="Pavlovia Tasks">
-        <app-pavlovia-tasks></app-pavlovia-tasks>
+        <div class="p-4">
+            <app-pavlovia-tasks></app-pavlovia-tasks>
+        </div>
     </mat-tab>
+    <mat-tab label="Info Display Slides"> </mat-tab>
 </mat-tab-group>
diff --git a/src/app/pages/admin/admin-dashboard/study-components/view-info-displays/view-info-displays.component.html b/src/app/pages/admin/admin-dashboard/study-components/view-info-displays/view-info-displays.component.html
new file mode 100644
index 00000000..29c3acb7
--- /dev/null
+++ b/src/app/pages/admin/admin-dashboard/study-components/view-info-displays/view-info-displays.component.html
@@ -0,0 +1 @@
+<p>view-info-displays works!</p>
diff --git a/src/app/pages/admin/admin-dashboard/study-components/view-info-displays/view-info-displays.component.scss b/src/app/pages/admin/admin-dashboard/study-components/view-info-displays/view-info-displays.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/pages/admin/admin-dashboard/study-components/view-info-displays/view-info-displays.component.spec.ts b/src/app/pages/admin/admin-dashboard/study-components/view-info-displays/view-info-displays.component.spec.ts
new file mode 100644
index 00000000..5dab489b
--- /dev/null
+++ b/src/app/pages/admin/admin-dashboard/study-components/view-info-displays/view-info-displays.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewInfoDisplaysComponent } from './view-info-displays.component';
+
+describe('ViewInfoDisplaysComponent', () => {
+  let component: ViewInfoDisplaysComponent;
+  let fixture: ComponentFixture<ViewInfoDisplaysComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ViewInfoDisplaysComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewInfoDisplaysComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/admin/admin-dashboard/study-components/view-info-displays/view-info-displays.component.ts b/src/app/pages/admin/admin-dashboard/study-components/view-info-displays/view-info-displays.component.ts
new file mode 100644
index 00000000..283a5c51
--- /dev/null
+++ b/src/app/pages/admin/admin-dashboard/study-components/view-info-displays/view-info-displays.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-view-info-displays',
+  templateUrl: './view-info-displays.component.html',
+  styleUrls: ['./view-info-displays.component.scss']
+})
+export class ViewInfoDisplaysComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/pages/admin/admin-dashboard/study-components/view-pavlovia-tasks/pavlovia-tasks.component.html b/src/app/pages/admin/admin-dashboard/study-components/view-pavlovia-tasks/pavlovia-tasks.component.html
new file mode 100644
index 00000000..2c22f925
--- /dev/null
+++ b/src/app/pages/admin/admin-dashboard/study-components/view-pavlovia-tasks/pavlovia-tasks.component.html
@@ -0,0 +1,12 @@
+<div class="pb-4">
+    <app-view-components-table
+        [data]="NABPavloviaTasksForTable | async"
+        (rowRun)="run($event)"
+    ></app-view-components-table>
+</div>
+<div>
+    <app-view-components-table
+        [data]="experimentalPavloviaTasksForTable | async"
+        (rowRun)="run($event)"
+    ></app-view-components-table>
+</div>
diff --git a/src/app/pages/admin/admin-dashboard/study-components/pavlovia-tasks/pavlovia-tasks.component.scss b/src/app/pages/admin/admin-dashboard/study-components/view-pavlovia-tasks/pavlovia-tasks.component.scss
similarity index 100%
rename from src/app/pages/admin/admin-dashboard/study-components/pavlovia-tasks/pavlovia-tasks.component.scss
rename to src/app/pages/admin/admin-dashboard/study-components/view-pavlovia-tasks/pavlovia-tasks.component.scss
diff --git a/src/app/pages/admin/admin-dashboard/study-components/pavlovia-tasks/pavlovia-tasks.component.spec.ts b/src/app/pages/admin/admin-dashboard/study-components/view-pavlovia-tasks/pavlovia-tasks.component.spec.ts
similarity index 60%
rename from src/app/pages/admin/admin-dashboard/study-components/pavlovia-tasks/pavlovia-tasks.component.spec.ts
rename to src/app/pages/admin/admin-dashboard/study-components/view-pavlovia-tasks/pavlovia-tasks.component.spec.ts
index 2ef2ed9f..a004d1b1 100644
--- a/src/app/pages/admin/admin-dashboard/study-components/pavlovia-tasks/pavlovia-tasks.component.spec.ts
+++ b/src/app/pages/admin/admin-dashboard/study-components/view-pavlovia-tasks/pavlovia-tasks.component.spec.ts
@@ -1,13 +1,13 @@
-import { OverlayModule } from "@angular/cdk/overlay";
-import { HttpClientTestingModule } from "@angular/common/http/testing";
-import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
-import { MatDialog } from "@angular/material/dialog";
-import { MatSnackBar } from "@angular/material/snack-bar";
-import { SnackbarService } from "src/app/services/snackbar.service";
+import { OverlayModule } from '@angular/cdk/overlay';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { SnackbarService } from 'src/app/services/snackbar.service';
 
-import { PavloviaTasksComponent } from "./pavlovia-tasks.component";
+import { PavloviaTasksComponent } from './pavlovia-tasks.component';
 
-describe("ManageCustomTasksComponent", () => {
+describe('ManageCustomTasksComponent', () => {
     let component: PavloviaTasksComponent;
     let fixture: ComponentFixture<PavloviaTasksComponent>;
 
@@ -31,7 +31,7 @@ describe("ManageCustomTasksComponent", () => {
         fixture.detectChanges();
     });
 
-    it("should create", () => {
+    it('should create', () => {
         expect(component).toBeTruthy();
     });
 });
diff --git a/src/app/pages/admin/admin-dashboard/study-components/view-pavlovia-tasks/pavlovia-tasks.component.ts b/src/app/pages/admin/admin-dashboard/study-components/view-pavlovia-tasks/pavlovia-tasks.component.ts
new file mode 100644
index 00000000..c2bceb48
--- /dev/null
+++ b/src/app/pages/admin/admin-dashboard/study-components/view-pavlovia-tasks/pavlovia-tasks.component.ts
@@ -0,0 +1,95 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Platform, RouteNames, TaskType } from 'src/app/models/enums';
+import { Task } from 'src/app/models/Task';
+import { EmbeddedPageNavigationConfig } from 'src/app/pages/tasks/embedded-page/embedded-page.component';
+import { TaskService } from 'src/app/services/task.service';
+import { ViewComponentsTableModel } from '../shared/view-components-table/view-components-table.component';
+
+@Component({
+    selector: 'app-pavlovia-tasks',
+    templateUrl: './pavlovia-tasks.component.html',
+    styleUrls: ['./pavlovia-tasks.component.scss'],
+})
+export class PavloviaTasksComponent implements OnInit {
+    ngOnInit() {
+        this.tasks = this.taskService.tasks;
+    }
+
+    tasks: Observable<Task[]>;
+
+    get NABPavloviaTasksForTable(): Observable<ViewComponentsTableModel<Task>> {
+        return this.tasks.pipe(
+            map((tasks) =>
+                tasks
+                    ? tasks.filter((task) => task.taskType === TaskType.NAB && task.fromPlatform === Platform.PAVLOVIA)
+                    : []
+            ),
+            map((tasks) => ({
+                tableConfig: [
+                    {
+                        columnHeader: 'Name',
+                        columnKey: 'name',
+                    },
+                    {
+                        columnHeader: 'Description',
+                        columnKey: 'description',
+                    },
+                    {
+                        columnHeader: 'URL',
+                        columnKey: 'externalURL',
+                    },
+                ],
+                tableData: tasks,
+                msgOnEmpty: 'No pavlovia NAB Tasks',
+                tableTitle: 'Neuropsych Battery (NAB)',
+            }))
+        );
+    }
+
+    get experimentalPavloviaTasksForTable(): Observable<ViewComponentsTableModel<Task>> {
+        return this.tasks.pipe(
+            map((tasks) =>
+                tasks
+                    ? tasks.filter(
+                          (task) => task.taskType === TaskType.EXPERIMENTAL && task.fromPlatform === Platform.PAVLOVIA
+                      )
+                    : []
+            ),
+            map((tasks) => ({
+                tableConfig: [
+                    {
+                        columnHeader: 'Name',
+                        columnKey: 'name',
+                    },
+                    {
+                        columnHeader: 'Description',
+                        columnKey: 'description',
+                    },
+                    {
+                        columnHeader: 'URL',
+                        columnKey: 'externalURL',
+                    },
+                ],
+                tableData: tasks,
+                msgOnEmpty: 'No questionnaires',
+                tableTitle: 'Experimental Tasks',
+            }))
+        );
+    }
+
+    run(task: Task) {
+        const config: EmbeddedPageNavigationConfig = {
+            config: {
+                externalURL: task.externalURL,
+                task: task,
+            },
+            mode: 'test',
+        };
+        this.router.navigate([`${RouteNames.PAVLOVIA}`], { state: config });
+    }
+
+    constructor(private taskService: TaskService, private router: Router) {}
+}
diff --git a/src/app/pages/admin/admin-dashboard/study-components/view-questionnaires/manage-questionnaires.component.html b/src/app/pages/admin/admin-dashboard/study-components/view-questionnaires/manage-questionnaires.component.html
new file mode 100644
index 00000000..c93bda8f
--- /dev/null
+++ b/src/app/pages/admin/admin-dashboard/study-components/view-questionnaires/manage-questionnaires.component.html
@@ -0,0 +1,4 @@
+<app-view-components-table
+    [data]="questionnairesForTable | async"
+    (rowRun)="previewQuestionnaire($event)"
+></app-view-components-table>
diff --git a/src/app/pages/admin/admin-dashboard/study-components/manage-questionnaires/manage-questionnaires.component.scss b/src/app/pages/admin/admin-dashboard/study-components/view-questionnaires/manage-questionnaires.component.scss
similarity index 100%
rename from src/app/pages/admin/admin-dashboard/study-components/manage-questionnaires/manage-questionnaires.component.scss
rename to src/app/pages/admin/admin-dashboard/study-components/view-questionnaires/manage-questionnaires.component.scss
diff --git a/src/app/pages/admin/admin-dashboard/study-components/view-questionnaires/manage-questionnaires.component.ts b/src/app/pages/admin/admin-dashboard/study-components/view-questionnaires/manage-questionnaires.component.ts
new file mode 100644
index 00000000..09c3b990
--- /dev/null
+++ b/src/app/pages/admin/admin-dashboard/study-components/view-questionnaires/manage-questionnaires.component.ts
@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { RouteNames, TaskType } from 'src/app/models/enums';
+import { Task } from 'src/app/models/Task';
+import { QuestionnaireNavigationConfig } from 'src/app/pages/tasks/questionnaire-reader/questionnaire-reader.component';
+import { TaskService } from 'src/app/services/task.service';
+import { ViewComponentsTableModel } from '../shared/view-components-table/view-components-table.component';
+
+@Component({
+    selector: 'app-manage-questionnaires',
+    templateUrl: './manage-questionnaires.component.html',
+    styleUrls: ['./manage-questionnaires.component.scss'],
+})
+export class ManageQuestionnairesComponent implements OnInit {
+    constructor(private taskService: TaskService, private router: Router) {}
+
+    subscriptions: Subscription[] = [];
+
+    ngOnInit() {
+        this.tasks = this.taskService.tasks;
+    }
+
+    tasks: Observable<Task[]>;
+
+    get questionnairesForTable(): Observable<ViewComponentsTableModel<Task>> {
+        return this.tasks.pipe(
+            map((tasks) => (tasks ? tasks.filter((task) => task.taskType === TaskType.QUESTIONNAIRE) : [])),
+            map((tasks) => ({
+                tableConfig: [
+                    {
+                        columnHeader: 'Name',
+                        columnKey: 'name',
+                    },
+                    {
+                        columnHeader: 'Description',
+                        columnKey: 'description',
+                    },
+                ],
+                tableData: tasks,
+                msgOnEmpty: 'No questionnaires',
+                tableTitle: '',
+            }))
+        );
+    }
+
+    previewQuestionnaire(questionnaire: Task) {
+        const questionnaireConfig: QuestionnaireNavigationConfig = {
+            metadata: questionnaire.config,
+            mode: 'test',
+        };
+
+        this.router.navigate([`${RouteNames.QUESTIONNAIRE}`], { state: questionnaireConfig });
+    }
+
+    ngOnDestroy() {
+        this.subscriptions.forEach((sub) => sub.unsubscribe());
+    }
+}
diff --git a/src/app/pages/admin/admin-dashboard/study-components/view-tasks/view-tasks.component.html b/src/app/pages/admin/admin-dashboard/study-components/view-tasks/view-tasks.component.html
index 199fc155..c202206a 100644
--- a/src/app/pages/admin/admin-dashboard/study-components/view-tasks/view-tasks.component.html
+++ b/src/app/pages/admin/admin-dashboard/study-components/view-tasks/view-tasks.component.html
@@ -1,63 +1,9 @@
-<div class="container-fluid p-4">
-    <h2 class="mb-5">Psharplab Tasks</h2>
-
-    <h3 class="mat-h3">Neuropsych Battery (NAB)</h3>
-    <hr />
-
-    <div>
-        <table mat-table [dataSource]="NABTask" class="mat-elevation-z3">
-            <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef>Name</th>
-                <td class="first-col-width" mat-cell *matCellDef="let NABTask">{{ NABTask.name }}</td>
-            </ng-container>
-
-            <ng-container matColumnDef="description">
-                <th mat-header-cell *matHeaderCellDef>Description</th>
-                <td mat-cell *matCellDef="let NABTask">{{ NABTask.description }}</td>
-            </ng-container>
-
-            <ng-container matColumnDef="route">
-                <th mat-header-cell *matHeaderCellDef>Actions</th>
-                <td mat-cell *matCellDef="let NABTask">
-                    <button mat-icon-button (click)="run(NABTask)">
-                        <mat-icon style="color: green">play_arrow</mat-icon>
-                    </button>
-                </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="displayedColumnsForStudies"></tr>
-            <tr mat-row *matRowDef="let element; columns: displayedColumnsForStudies"></tr>
-        </table>
-    </div>
+<div class="pb-4">
+    <app-view-components-table [data]="NABTasksForTable | async" (rowRun)="run($event)"></app-view-components-table>
 </div>
-
-<div class="container-fluid p-4">
-    <h3 class="mat-h3">Experimental Tasks</h3>
-    <hr />
-
-    <div>
-        <table mat-table [dataSource]="experimentalTasks" class="mat-elevation-z3">
-            <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef>Name</th>
-                <td class="first-col-width" mat-cell *matCellDef="let experimentTask">{{ experimentTask.name }}</td>
-            </ng-container>
-
-            <ng-container matColumnDef="description">
-                <th mat-header-cell *matHeaderCellDef>Description</th>
-                <td mat-cell *matCellDef="let experimentTask">{{ experimentTask.description }}</td>
-            </ng-container>
-
-            <ng-container matColumnDef="route">
-                <th mat-header-cell *matHeaderCellDef>Actions</th>
-                <td mat-cell *matCellDef="let experimentTask">
-                    <button mat-icon-button (click)="run(experimentTask)">
-                        <mat-icon style="color: green">play_arrow</mat-icon>
-                    </button>
-                </td></ng-container
-            >
-
-            <tr mat-header-row *matHeaderRowDef="displayedColumnsForStudies"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumnsForStudies"></tr>
-        </table>
-    </div>
+<div>
+    <app-view-components-table
+        [data]="experimentalTasksForTable | async"
+        (rowRun)="run($event)"
+    ></app-view-components-table>
 </div>
diff --git a/src/app/pages/admin/admin-dashboard/study-components/view-tasks/view-tasks.component.ts b/src/app/pages/admin/admin-dashboard/study-components/view-tasks/view-tasks.component.ts
index e5cd8c5a..7b533fa7 100644
--- a/src/app/pages/admin/admin-dashboard/study-components/view-tasks/view-tasks.component.ts
+++ b/src/app/pages/admin/admin-dashboard/study-components/view-tasks/view-tasks.component.ts
@@ -1,54 +1,65 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
-import { TaskService } from "../../../../../services/task.service";
-import { Task } from "../../../../../models/Task";
-import { Observable, Subscription } from "rxjs";
-import { Platform, RouteNames, TaskType } from "../../../../../models/enums";
-import { map } from "rxjs/operators";
-import { HttpClient } from "@angular/common/http";
-import { TaskPlayerNavigationConfig } from "src/app/pages/tasks/task-playables/task-player/task-player.component";
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { TaskService } from '../../../../../services/task.service';
+import { Task } from '../../../../../models/Task';
+import { Observable, Subscription } from 'rxjs';
+import { Platform, RouteNames, TaskType } from '../../../../../models/enums';
+import { map } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
+import { TaskPlayerNavigationConfig } from 'src/app/pages/tasks/task-playables/task-player/task-player.component';
+import { ViewComponentsTableModel } from '../shared/view-components-table/view-components-table.component';
 
 @Component({
-    selector: "app-view-tasks",
-    templateUrl: "./view-tasks.component.html",
-    styleUrls: ["./view-tasks.component.scss"],
+    selector: 'app-view-tasks',
+    templateUrl: './view-tasks.component.html',
+    styleUrls: ['./view-tasks.component.scss'],
 })
 export class ViewTasksComponent implements OnInit, OnDestroy {
-    // contains Ids of completed tasks
-    completedTasks: number[] = [];
-
     subscribers: Subscription[] = [];
 
-    displayedColumnsForStudies = ["name", "description", "route"];
-
     tasklist: Observable<Task[]>;
 
-    constructor(private router: Router, private taskService: TaskService, private http: HttpClient) {}
+    constructor(private router: Router, private taskService: TaskService) {}
 
     ngOnInit() {
         this.tasklist = this.taskService.tasks;
     }
 
-    run(task: Task) {
-        const navigationConfig: TaskPlayerNavigationConfig = {
-            metadata: task.config,
-            mode: "test",
-        };
-
-        this.router.navigate([`${RouteNames.TASKPLAYER}`], { state: navigationConfig });
-    }
-
-    get NABTask(): Observable<Task[]> {
+    get NABTasksForTable(): Observable<ViewComponentsTableModel<Task>> {
         return this.tasklist.pipe(
             map((tasks) =>
                 tasks
                     ? tasks.filter((task) => task.taskType === TaskType.NAB && task.fromPlatform === Platform.PSHARPLAB)
                     : []
-            )
+            ),
+            map((tasks) => ({
+                tableConfig: [
+                    {
+                        columnHeader: 'Name',
+                        columnKey: 'name',
+                    },
+                    {
+                        columnHeader: 'Description',
+                        columnKey: 'description',
+                    },
+                ],
+                tableData: tasks,
+                msgOnEmpty: 'No NAB Tasks',
+                tableTitle: 'Neuropsych Battery (NAB)',
+            }))
         );
     }
 
-    get experimentalTasks(): Observable<Task[]> {
+    run(task: Task) {
+        const navigationConfig: TaskPlayerNavigationConfig = {
+            metadata: task.config,
+            mode: 'test',
+        };
+
+        this.router.navigate([`${RouteNames.TASKPLAYER}`], { state: navigationConfig });
+    }
+
+    get experimentalTasksForTable(): Observable<ViewComponentsTableModel<Task>> {
         return this.tasklist.pipe(
             map((tasks) =>
                 tasks
@@ -56,16 +67,25 @@ export class ViewTasksComponent implements OnInit, OnDestroy {
                           (task) => task.taskType === TaskType.EXPERIMENTAL && task.fromPlatform === Platform.PSHARPLAB
                       )
                     : []
-            )
+            ),
+            map((tasks) => ({
+                tableConfig: [
+                    {
+                        columnHeader: 'Name',
+                        columnKey: 'name',
+                    },
+                    {
+                        columnHeader: 'Description',
+                        columnKey: 'description',
+                    },
+                ],
+                tableData: tasks,
+                msgOnEmpty: 'No NAB Tasks',
+                tableTitle: 'Experimental Tasks',
+            }))
         );
     }
 
-    // returns true if the given task is complete, and false otherwise
-    taskIsComplete(task: Task): boolean {
-        if (!this.completedTasks || !task || !task.id) return false;
-        return this.completedTasks.includes(task.id) ? true : false;
-    }
-
     ngOnDestroy() {
         this.subscribers.forEach((x) => x.unsubscribe());
     }
diff --git a/src/app/pages/admin/admin.module.ts b/src/app/pages/admin/admin.module.ts
index 5a93d7d1..1114450a 100644
--- a/src/app/pages/admin/admin.module.ts
+++ b/src/app/pages/admin/admin.module.ts
@@ -1,22 +1,24 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { AdminDashboardComponent } from "./admin-dashboard/admin-dashboard.component";
-import { AdminRoutingModule } from "./admin-routing.module";
-import { DataComponent } from "./admin-dashboard/data/data.component";
-import { ManageGuestsComponent } from "./admin-dashboard/manage-guests/manage-guests.component";
-import { StudiesComponent } from "./admin-dashboard/studies/studies.component";
-import { StudyComponentsComponent } from "./admin-dashboard/study-components/study-components.component";
-import { ViewTasksComponent } from "./admin-dashboard/study-components/view-tasks/view-tasks.component";
-import { MaterialModule } from "src/app/modules/material/material.module";
-import { SharedModule } from "../shared/shared.module";
-import { RouterModule } from "@angular/router";
-import { PavloviaTasksComponent } from "./admin-dashboard/study-components/pavlovia-tasks/pavlovia-tasks.component";
-import { ManageQuestionnairesComponent } from "./admin-dashboard/study-components/manage-questionnaires/manage-questionnaires.component";
-import { DataTableComponent } from "./admin-dashboard/data/data-table/data-table.component";
-import { ViewStudiesComponent } from "./admin-dashboard/studies/view-studies/view-studies.component";
-import { TaskModule } from "../tasks/task.module";
-import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { CreateModifyStudyComponent } from "./admin-dashboard/studies/create-modify-study/create-modify-study.component";
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
+import { AdminRoutingModule } from './admin-routing.module';
+import { DataComponent } from './admin-dashboard/data/data.component';
+import { ManageGuestsComponent } from './admin-dashboard/manage-guests/manage-guests.component';
+import { StudiesComponent } from './admin-dashboard/studies/studies.component';
+import { StudyComponentsComponent } from './admin-dashboard/study-components/study-components.component';
+import { ViewTasksComponent } from './admin-dashboard/study-components/view-tasks/view-tasks.component';
+import { MaterialModule } from 'src/app/modules/material/material.module';
+import { SharedModule } from '../shared/shared.module';
+import { RouterModule } from '@angular/router';
+import { PavloviaTasksComponent } from './admin-dashboard/study-components/view-pavlovia-tasks/pavlovia-tasks.component';
+import { ManageQuestionnairesComponent } from './admin-dashboard/study-components/view-questionnaires/manage-questionnaires.component';
+import { DataTableComponent } from './admin-dashboard/data/data-table/data-table.component';
+import { ViewStudiesComponent } from './admin-dashboard/studies/view-studies/view-studies.component';
+import { TaskModule } from '../tasks/task.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CreateModifyStudyComponent } from './admin-dashboard/studies/create-modify-study/create-modify-study.component';
+import { ViewInfoDisplaysComponent } from './admin-dashboard/study-components/view-info-displays/view-info-displays.component';
+import { ViewComponentsTableComponent } from './admin-dashboard/study-components/shared/view-components-table/view-components-table.component';
 
 @NgModule({
     declarations: [
@@ -31,6 +33,8 @@ import { CreateModifyStudyComponent } from "./admin-dashboard/studies/create-mod
         PavloviaTasksComponent,
         ManageQuestionnairesComponent,
         DataTableComponent,
+        ViewInfoDisplaysComponent,
+        ViewComponentsTableComponent,
     ],
     imports: [
         CommonModule,
diff --git a/src/app/pages/participant/participant-dashboard/participant-studies/consent-dialog/consent-dialog.component.html b/src/app/pages/participant/participant-dashboard/participant-studies/consent-dialog/consent-dialog.component.html
index 5fea00c1..0baebbbc 100644
--- a/src/app/pages/participant/participant-dashboard/participant-studies/consent-dialog/consent-dialog.component.html
+++ b/src/app/pages/participant/participant-dashboard/participant-studies/consent-dialog/consent-dialog.component.html
@@ -1,3 +1,3 @@
 <ng-container *ngIf="data">
-    <app-consent [consentNavigationConfig]="data" (emitConsent)="onEmitConsent($event)"></app-consent>
+    <app-consent [readerMetadata]="data" (emitConsent)="onEmitConsent($event)"></app-consent>
 </ng-container>
diff --git a/src/app/pages/shared/consent-component/consent-reader.component.html b/src/app/pages/shared/consent-component/consent-reader.component.html
index f19dcc82..631028db 100644
--- a/src/app/pages/shared/consent-component/consent-reader.component.html
+++ b/src/app/pages/shared/consent-component/consent-reader.component.html
@@ -1,16 +1,16 @@
-<div *ngIf="consentNavigationConfig && consentNavigationConfig.metadata" class="container-fluid scrollable p-5">
+<div *ngIf="readerMetadata && readerMetadata.metadata" class="container-fluid scrollable p-5">
     <div class="image">
-        <img [src]="consentNavigationConfig.metadata?.img" alt="Organizations" />
+        <img [src]="readerMetadata.metadata?.img" alt="Organizations" />
     </div>
 
     <div class="title my-4">
         <h2 class="mat-h2">
-            <b>{{ consentNavigationConfig.metadata?.title }}</b>
+            <b>{{ readerMetadata.metadata?.title }}</b>
         </h2>
     </div>
 
     <div class="summary">
-        <ng-container *ngFor="let block of consentNavigationConfig.metadata?.summary">
+        <ng-container *ngFor="let block of readerMetadata.metadata?.summary">
             <p>
                 <b>{{ block.caption }}&nbsp;</b>
                 <span class="my-1" *ngFor="let wordBlock of block.words">{{ wordBlock }}</span>
@@ -20,12 +20,12 @@ <h2 class="mat-h2">
 
     <div class="secondTitle">
         <p>
-            <b>{{ consentNavigationConfig.metadata?.secondTitle }}</b>
+            <b>{{ readerMetadata.metadata?.secondTitle }}</b>
         </p>
     </div>
 
     <div class="body">
-        <div class="my-4" *ngFor="let block of consentNavigationConfig.metadata?.body">
+        <div class="my-4" *ngFor="let block of readerMetadata.metadata?.body">
             <h4>
                 <b>{{ block.caption }}</b>
             </h4>
@@ -36,27 +36,27 @@ <h4>
     </div>
 
     <div class="endMessage my-4">
-        <span>{{ consentNavigationConfig.metadata?.endMessage }}</span>
+        <span>{{ readerMetadata.metadata?.endMessage }}</span>
     </div>
 
     <div align="center" class="bottom-button-bar">
         <div class="d-flex flex-row align-items-center justify-content-around">
-            <div class="m-2" *ngIf="consentNavigationConfig.metadata?.buttons.reject.show">
-                <button mat-raised-button color="warn" (click)="onConsentResponse(false)">
+            <div class="m-2" *ngIf="readerMetadata.metadata?.buttons.reject.show">
+                <button mat-raised-button color="warn" (click)="onSubmit(false)">
                     {{
-                        consentNavigationConfig.metadata?.buttons.reject.text
-                            ? consentNavigationConfig.metadata?.buttons.reject.text
+                        readerMetadata.metadata?.buttons.reject.text
+                            ? readerMetadata.metadata?.buttons.reject.text
                             : "DECLINE"
                     }}
                     &nbsp;
                     <mat-icon> clear </mat-icon>
                 </button>
             </div>
-            <div class="m-2" *ngIf="consentNavigationConfig.metadata?.buttons.accept.show">
-                <button mat-raised-button color="primary" (click)="onConsentResponse(true)">
+            <div class="m-2" *ngIf="readerMetadata.metadata?.buttons.accept.show">
+                <button mat-raised-button color="primary" (click)="onSubmit(true)">
                     {{
-                        consentNavigationConfig.metadata?.buttons.accept.text
-                            ? consentNavigationConfig.metadata?.buttons.accept.text
+                        readerMetadata.metadata?.buttons.accept.text
+                            ? readerMetadata.metadata?.buttons.accept.text
                             : "ACCEPT"
                     }}
                     &nbsp;
diff --git a/src/app/pages/shared/consent-component/consent-reader.component.ts b/src/app/pages/shared/consent-component/consent-reader.component.ts
index 0aff1cb0..e9fed9af 100644
--- a/src/app/pages/shared/consent-component/consent-reader.component.ts
+++ b/src/app/pages/shared/consent-component/consent-reader.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, Output, EventEmitter } from "@angular/core";
 import { Router } from "@angular/router";
+import { AbstractBaseReaderComponent } from "../../tasks/shared/base-reader";
 
 class ConsentForm {
     img: string;
@@ -36,9 +37,9 @@ export class ConsentNavigationConfig {
     templateUrl: "./consent-reader.component.html",
     styleUrls: ["./consent-reader.component.scss"],
 })
-export class ConsentReaderComponent {
+export class ConsentReaderComponent implements AbstractBaseReaderComponent {
     @Input()
-    consentNavigationConfig: ConsentNavigationConfig;
+    readerMetadata: ConsentNavigationConfig;
 
     @Output()
     emitConsent: EventEmitter<boolean> = new EventEmitter();
@@ -47,12 +48,12 @@ export class ConsentReaderComponent {
         const state = this.router.getCurrentNavigation()?.extras.state as ConsentNavigationConfig;
 
         if (state) {
-            this.consentNavigationConfig = state;
+            this.readerMetadata = state;
         }
     }
 
-    onConsentResponse(response: boolean) {
-        if (this.consentNavigationConfig.mode !== "test") {
+    onSubmit(response: boolean) {
+        if (this.readerMetadata.mode !== "test") {
             this.emitConsent.next(response);
         }
     }
diff --git a/src/app/pages/tasks/consent/consent-page/consent-page.component.html b/src/app/pages/tasks/consent/consent-page/consent-page.component.html
index 5fea00c1..0baebbbc 100644
--- a/src/app/pages/tasks/consent/consent-page/consent-page.component.html
+++ b/src/app/pages/tasks/consent/consent-page/consent-page.component.html
@@ -1,3 +1,3 @@
 <ng-container *ngIf="data">
-    <app-consent [consentNavigationConfig]="data" (emitConsent)="onEmitConsent($event)"></app-consent>
+    <app-consent [readerMetadata]="data" (emitConsent)="onEmitConsent($event)"></app-consent>
 </ng-container>
diff --git a/src/app/pages/tasks/embedded-page/embedded-page.component.ts b/src/app/pages/tasks/embedded-page/embedded-page.component.ts
index 897045c4..97c579cc 100644
--- a/src/app/pages/tasks/embedded-page/embedded-page.component.ts
+++ b/src/app/pages/tasks/embedded-page/embedded-page.component.ts
@@ -3,7 +3,6 @@ import { MatDialog } from "@angular/material/dialog";
 import { Router } from "@angular/router";
 import { Subscription } from "rxjs";
 import { Task } from "src/app/models/Task";
-import { ConfirmationService } from "src/app/services/confirmation/confirmation.service";
 import { TaskManagerService } from "src/app/services/task-manager.service";
 import { UserService } from "src/app/services/user.service";
 import { ConfirmDoneDialogComponent } from "./confirm-done-dialog/confirm-done-dialog.component";
diff --git a/src/app/pages/tasks/info-display/info-display.component.html b/src/app/pages/tasks/info-display/info-display.component.html
index 3e890959..6ad195a0 100644
--- a/src/app/pages/tasks/info-display/info-display.component.html
+++ b/src/app/pages/tasks/info-display/info-display.component.html
@@ -1 +1,34 @@
-<p>info-display works!</p>
+<div class="info-display-container">
+    <h1 class="mat-h1 my-3 title-text">
+        <b>{{ title }}</b>
+        <hr />
+    </h1>
+
+    <ng-container *ngFor="let section of sections">
+        <div class="my-5">
+            <h2 *ngIf="section.header" class="title-text" [innerHTML]="section.header"></h2>
+            <p *ngIf="section.textContent" class="sub-text" [innerHTML]="section.textContent"></p>
+        </div>
+    </ng-container>
+
+    <div class="button-container">
+        <button
+            (click)="onSubmit('home')"
+            class="w-25"
+            color="secondary"
+            mat-raised-button
+            *ngIf="shouldShowHomeButton"
+        >
+            Return to Home
+        </button>
+        <button
+            (click)="onSubmit('continue')"
+            class="w-25"
+            color="primary"
+            mat-raised-button
+            *ngIf="shouldShowContinueButton"
+        >
+            Continue
+        </button>
+    </div>
+</div>
diff --git a/src/app/pages/tasks/info-display/info-display.component.scss b/src/app/pages/tasks/info-display/info-display.component.scss
index e69de29b..8836730e 100644
--- a/src/app/pages/tasks/info-display/info-display.component.scss
+++ b/src/app/pages/tasks/info-display/info-display.component.scss
@@ -0,0 +1,16 @@
+.info-display-container {
+    padding: 2% 4%;
+}
+
+.title-text {
+    color: #3f51b5;
+}
+
+.sub-text {
+    color: #464646;
+}
+
+.button-container {
+    display: flex;
+    justify-content: space-around;
+}
diff --git a/src/app/pages/tasks/info-display/info-display.component.ts b/src/app/pages/tasks/info-display/info-display.component.ts
index e10e43bf..2564838f 100644
--- a/src/app/pages/tasks/info-display/info-display.component.ts
+++ b/src/app/pages/tasks/info-display/info-display.component.ts
@@ -1,17 +1,15 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
-import { Subject } from "rxjs";
-import { IOnComplete, Playable } from "../task-playables/playable";
-import { Navigation } from "../shared/navigation-buttons/navigation-buttons.component";
-import { TaskManagerService } from "src/app/services/task-manager.service";
-import { Router } from "@angular/router";
-import { UserService } from "src/app/services/user.service";
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { TaskManagerService } from 'src/app/services/task-manager.service';
+import { Router } from '@angular/router';
+import { UserService } from 'src/app/services/user.service';
+import { AbstractBaseReaderComponent } from '../shared/base-reader';
+import { ParticipantRouteNames, RouteNames } from 'src/app/models/enums';
 
 export interface InfoDisplayMetadata {
     shouldIncrementIndex: boolean;
     title?: string;
-    subtitle?: string;
     sections?: InfoDisplaySection[];
-    buttons?: InfoDisplayButtonConfig[];
+    buttons?: InfoDisplayButtonConfig;
 }
 
 export interface InfoDisplaySection {
@@ -26,24 +24,43 @@ export interface InfoDisplayButtonConfig {
 
 export interface InfoDisplayNavigationConfig {
     metadata: InfoDisplayMetadata;
-    mode: "test" | "actual";
+    mode: 'test' | 'actual';
 }
 
 @Component({
-    selector: "app-info-display",
-    templateUrl: "./info-display.component.html",
-    styleUrls: ["./info-display.component.scss"],
+    selector: 'app-info-display',
+    templateUrl: './info-display.component.html',
+    styleUrls: ['./info-display.component.scss'],
 })
-export class InfoDisplayComponent implements OnInit, OnDestroy {
-    infoDisplayMetadata: InfoDisplayMetadata;
+export class InfoDisplayComponent implements OnInit, OnDestroy, AbstractBaseReaderComponent {
+    readerMetadata: InfoDisplayNavigationConfig;
+
+    get shouldShowHomeButton(): boolean {
+        return this.readerMetadata?.metadata?.buttons?.displayHomeButton;
+    }
+
+    get shouldShowContinueButton(): boolean {
+        return this.readerMetadata?.metadata?.buttons?.displayHomeButton;
+    }
+
+    get title(): string {
+        return this.readerMetadata?.metadata?.title || '';
+    }
+
+    get sections(): InfoDisplaySection[] {
+        return this.readerMetadata?.metadata?.sections || [];
+    }
 
     constructor(private taskManager: TaskManagerService, private router: Router, private userService: UserService) {
-        const state = this.router.getCurrentNavigation().extras.state as InfoDisplayMetadata;
+        const state = this.router.getCurrentNavigation().extras.state as InfoDisplayNavigationConfig;
 
         if (state) {
-            this.infoDisplayMetadata = state;
+            this.readerMetadata = state;
+            const incrementIndex = this.readerMetadata.metadata?.shouldIncrementIndex;
 
-            if (!this.userService.isCrowdsourcedUser) {
+            // crowdsourced users cannot take breaks as they do not have accounts and so cannot sign back in.
+            // this is a safety check: realistically, crowdsourced users will not be shown info display slides
+            if (!this.userService.isCrowdsourcedUser && incrementIndex) {
                 this.taskManager.setTaskAsComplete().subscribe((res) => {});
             }
         } else {
@@ -51,6 +68,14 @@ export class InfoDisplayComponent implements OnInit, OnDestroy {
         }
     }
 
+    onSubmit(arg: 'home' | 'continue') {
+        if (arg === 'home') {
+            this.router.navigate([ParticipantRouteNames.DASHBOARD_BASEROUTE]);
+        } else {
+            this.taskManager.next();
+        }
+    }
+
     ngOnInit(): void {}
 
     ngOnDestroy(): void {}
diff --git a/src/app/pages/tasks/questionnaire-reader/questionnaire-reader.component.html b/src/app/pages/tasks/questionnaire-reader/questionnaire-reader.component.html
index 61096e2c..6697504b 100644
--- a/src/app/pages/tasks/questionnaire-reader/questionnaire-reader.component.html
+++ b/src/app/pages/tasks/questionnaire-reader/questionnaire-reader.component.html
@@ -112,7 +112,7 @@ <h2 *ngIf="question.title" class="title-text" [innerHTML]="question.title"></h2>
             <button
                 (click)="onSubmit()"
                 class="w-25 mb-5"
-                [disabled]="!questionnaire.valid || questionnaireMetadata.mode === 'test'"
+                [disabled]="!questionnaire.valid || readerMetadata.mode === 'test'"
                 color="primary"
                 mat-raised-button
             >
diff --git a/src/app/pages/tasks/questionnaire-reader/questionnaire-reader.component.ts b/src/app/pages/tasks/questionnaire-reader/questionnaire-reader.component.ts
index 156bb66b..e69d184d 100644
--- a/src/app/pages/tasks/questionnaire-reader/questionnaire-reader.component.ts
+++ b/src/app/pages/tasks/questionnaire-reader/questionnaire-reader.component.ts
@@ -1,23 +1,24 @@
-import { Component } from "@angular/core";
-import { FormControl, FormGroup, ValidatorFn, Validators } from "@angular/forms";
-import { Router } from "@angular/router";
-import { NzMarks } from "ng-zorro-antd/slider";
-import { of } from "rxjs";
-import { mergeMap, take } from "rxjs/operators";
-import { ParticipantDataService } from "src/app/services/study-data.service";
-import { TaskManagerService } from "src/app/services/task-manager.service";
-import { UserService } from "src/app/services/user.service";
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { NzMarks } from 'ng-zorro-antd/slider';
+import { of } from 'rxjs';
+import { mergeMap, take } from 'rxjs/operators';
+import { ParticipantDataService } from 'src/app/services/study-data.service';
+import { TaskManagerService } from 'src/app/services/task-manager.service';
+import { UserService } from 'src/app/services/user.service';
+import { AbstractBaseReaderComponent } from '../shared/base-reader';
 
 class Question {
     questionType:
-        | "multipleChoiceSelect"
-        | "radiobuttons"
-        | "freeTextResponse"
-        | "displayText"
-        | "divider"
-        | "input"
-        | "slider";
-    radiobuttonPresentation?: "horizontal" | "vertical" = "horizontal";
+        | 'multipleChoiceSelect'
+        | 'radiobuttons'
+        | 'freeTextResponse'
+        | 'displayText'
+        | 'divider'
+        | 'input'
+        | 'slider';
+    radiobuttonPresentation?: 'horizontal' | 'vertical' = 'horizontal';
     allowMultipleSelections?: boolean; // for multiple choice select, allow multiple choices
     key: string; // unique property of the input - this is what will be used when getting the data. Mandatory for all questionTypes except divider and free text
     label?: string; // label of the input
@@ -45,28 +46,28 @@ class QuestionnaireMetadata {
 
 export class QuestionnaireNavigationConfig {
     metadata: QuestionnaireMetadata;
-    mode: "test" | "actual";
+    mode: 'test' | 'actual';
 }
 
 @Component({
-    selector: "app-questionnaire-reader",
-    templateUrl: "./questionnaire-reader.component.html",
-    styleUrls: ["./questionnaire-reader.component.scss"],
+    selector: 'app-questionnaire-reader',
+    templateUrl: './questionnaire-reader.component.html',
+    styleUrls: ['./questionnaire-reader.component.scss'],
 })
-export class QuestionnaireReaderComponent {
-    questionnaireMetadata: QuestionnaireNavigationConfig;
+export class QuestionnaireReaderComponent implements AbstractBaseReaderComponent {
+    readerMetadata: QuestionnaireNavigationConfig;
     questionnaire: FormGroup;
 
     get isValid(): boolean {
-        return this.questionnaireMetadata?.metadata?.questions?.length > 0;
+        return this.readerMetadata?.metadata?.questions?.length > 0;
     }
 
     get title(): string {
-        return this.isValid ? this.questionnaireMetadata.metadata.title : "";
+        return this.isValid ? this.readerMetadata.metadata.title : '';
     }
 
     get questions(): Question[] {
-        return this.isValid ? this.questionnaireMetadata.metadata.questions : [];
+        return this.isValid ? this.readerMetadata.metadata.questions : [];
     }
 
     constructor(
@@ -78,12 +79,12 @@ export class QuestionnaireReaderComponent {
         const state = this.router.getCurrentNavigation().extras.state as QuestionnaireNavigationConfig;
 
         if (state) {
-            this.questionnaireMetadata = state;
+            this.readerMetadata = state;
 
-            if (!this.keysExistAndAreUnique(this.questionnaireMetadata.metadata)) {
+            if (!this.keysExistAndAreUnique(this.readerMetadata.metadata)) {
                 this.taskManager.handleErr();
             } else {
-                this.questionnaire = this.getFormGroup(this.questionnaireMetadata.metadata);
+                this.questionnaire = this.getFormGroup(this.readerMetadata.metadata);
             }
         } else {
             this.taskManager.handleErr();
@@ -95,7 +96,7 @@ export class QuestionnaireReaderComponent {
             [key: string]: FormControl;
         } = {};
         metadata.questions.forEach((question) => {
-            if (question.questionType !== "divider" && question.questionType !== "displayText") {
+            if (question.questionType !== 'divider' && question.questionType !== 'displayText') {
                 // extensible for later if we want to add other validators
                 let validatorFnArr: ValidatorFn[] = [];
                 if (question.validation) {
@@ -111,7 +112,7 @@ export class QuestionnaireReaderComponent {
                 }
 
                 formGroup[question.key] =
-                    validatorFnArr.length > 0 ? new FormControl("", validatorFnArr) : new FormControl("");
+                    validatorFnArr.length > 0 ? new FormControl('', validatorFnArr) : new FormControl('');
             }
         });
 
@@ -122,8 +123,8 @@ export class QuestionnaireReaderComponent {
         const keysMap: { [key: string]: boolean } = {};
 
         metadata.questions.forEach((question) => {
-            if (question.questionType !== "freeTextResponse" && question.questionType !== "divider") {
-                if (question.key === "" || question.key === undefined) return false;
+            if (question.questionType !== 'freeTextResponse' && question.questionType !== 'divider') {
+                if (question.key === '' || question.key === undefined) return false;
 
                 if (keysMap[question.key]) {
                     return false;
@@ -163,7 +164,7 @@ export class QuestionnaireReaderComponent {
             const reducer = (acc: string, currVal: string, currIndex: number) =>
                 currIndex === 0 ? currVal : `${acc}, ${currVal}`;
 
-            questionaireResponse[key] = isArray ? (value as string[]).reduce(reducer, "") : value;
+            questionaireResponse[key] = isArray ? (value as string[]).reduce(reducer, '') : value;
         });
 
         this.participantDataService
diff --git a/src/app/pages/tasks/shared/base-reader.ts b/src/app/pages/tasks/shared/base-reader.ts
new file mode 100644
index 00000000..330a4bc8
--- /dev/null
+++ b/src/app/pages/tasks/shared/base-reader.ts
@@ -0,0 +1,10 @@
+export interface ReaderNavigationConfig {
+    metadata: any;
+    mode: "test" | "actual";
+}
+
+export interface AbstractBaseReaderComponent {
+    readerMetadata: ReaderNavigationConfig;
+
+    onSubmit: (arg: any) => void;
+}
\ No newline at end of file
diff --git a/src/app/routing/app-routing.module.ts b/src/app/routing/app-routing.module.ts
index 0206c92b..1cf5a3ee 100644
--- a/src/app/routing/app-routing.module.ts
+++ b/src/app/routing/app-routing.module.ts
@@ -12,6 +12,7 @@ import { EmbeddedPageComponent } from "../pages/tasks/embedded-page/embedded-pag
 import { ConsentPageComponent } from "../pages/tasks/consent/consent-page/consent-page.component";
 import { SendResetPasswordComponent } from "../pages/landing-page/forgot-password/send-reset-password/send-reset-password.component";
 import { ResetPasswordLoginComponent } from "../pages/landing-page/forgot-password/change-password-page/reset-password-login.component";
+import { InfoDisplayComponent } from "../pages/tasks/info-display/info-display.component";
 
 const routes: Routes = [
     {
@@ -40,6 +41,10 @@ const routes: Routes = [
         path: RouteNames.TASKPLAYER,
         component: TaskPlayerComponent,
     },
+    {
+        path: RouteNames.INFO_DISPLAY,
+        component: InfoDisplayComponent,
+    },
     {
         path: RouteNames.PAVLOVIA,
         component: EmbeddedPageComponent,
diff --git a/src/app/routing/routes.ts b/src/app/routing/routes.ts
deleted file mode 100644
index 2ab3cfda..00000000
--- a/src/app/routing/routes.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-// import { StudiesRoutingMap, TaskType } from "../models/InternalDTOs";
-
-// export const RouteMap: StudiesRoutingMap = {
-//     digitspan: {
-//         id: "digitspan",
-//         title: "Digit Span",
-//         description: "The participant reads a sequence of numbers and enters them in the same or reverse order",
-//         type: TaskType.NAB,
-//         route: "task/digitspan",
-//     },
-//     fingertapping: {
-//         id: "fingertapping",
-//         title: "Finger Tapping Task",
-//         description:
-//             "The participant uses their dominant or non dominant hand to tap the 'P' and 'Q' characters as quickly as they can",
-//         type: TaskType.NAB,
-//         route: "task/fingertapping",
-//     },
-//     nback: {
-//         id: "nback",
-//         title: "N-Back",
-//         description:
-//             "The participant sees a sequence of letters and presses the left or right arrow arrow key to indicate if they saw that letter 2 letters ago",
-//         type: TaskType.NAB,
-//         route: "task/nback",
-//     },
-//     stroop: {
-//         id: "stroop",
-//         title: "Stroop Task",
-//         description:
-//             "The participant sees either the word RED, BLUE, or GREEN. The participant has to press 1 if the word is colored red, 2 if the word is colored blue, or 3 if the word is colored green",
-//         type: TaskType.NAB,
-//         route: "task/stroop",
-//     },
-//     stroopshort: {
-//         id: "stroopshort",
-//         title: "Stroop Task Short Version",
-//         description: "The stroop task, but with 60 trials instead of 120",
-//         type: TaskType.NAB,
-//         route: "task/stroopshort",
-//     },
-//     trailmaking: {
-//         id: "trailmaking",
-//         title: "Trail Making",
-//         description: "The participant clicks different buttons in sequential order as fast as possible",
-//         type: TaskType.NAB,
-//         route: "task/trailmaking",
-//     },
-//     colorgame: {
-//         id: "colorgame",
-//         title: "Color Game",
-//         description: "Description of Color Game",
-//         type: TaskType.Experimental,
-//         route: "task/colorgame",
-//     },
-//     shapegame: {
-//         id: "shapegame",
-//         title: "Shape Game",
-//         description: "Description of Shape Game",
-//         type: TaskType.Experimental,
-//         route: "task/shapegame",
-//     },
-//     taskswitching: {
-//         id: "taskswitching",
-//         title: "Task Switching",
-//         description:
-//             "The participant is given a number from 1 - 4 or from 6 - 9. If the number if blue, then the participant should press the arrow keys to indicate whether the number if odd or even. If the number is orange, the participant should press the arrow keys to indicate whether the number if less than or greater than 5",
-//         type: TaskType.Experimental,
-//         route: "task/taskswitching",
-//     },
-//     demandselection: {
-//         id: "demandselection",
-//         title: "Demand Selection",
-//         description:
-//             "The participant selects one of two patches on the screen and is then presented with the task switching task. One patch is more difficult and switches more often than the other",
-//         type: TaskType.Experimental,
-//         route: "task/demandselection",
-//     },
-//     simon: {
-//         id: "simon",
-//         title: "Simon Task",
-//         description: "Description of Simon Task",
-//         type: TaskType.Experimental,
-//         route: "task/simontask",
-//     },
-//     smileyface: {
-//         id: "smileyface",
-//         title: "Smiley Face",
-//         description: "Description of Smiley Face Game",
-//         type: TaskType.Experimental,
-//         route: "task/smileyface",
-//     },
-//     oddball: {
-//         id: "oddball",
-//         title: "Oddball Task",
-//         description: "Description of the Oddball Task",
-//         type: TaskType.Experimental,
-//         route: "task/oddball",
-//     },
-//     rating: {
-//         id: "rating",
-//         title: "Rating Game (Part 1 of the every day choice task)",
-//         description: "Description of Everyday Choice Task",
-//         type: TaskType.Experimental,
-//         route: "task/rating",
-//     },
-//     choice: {
-//         id: "choice",
-//         title: "Choice Game (Part 2 of the every day choice task)",
-//         description: "Description of Everyday Choice Task",
-//         type: TaskType.Experimental,
-//         route: "task/choice",
-//     },
-//     postchoice: {
-//         id: "postchoice",
-//         title: "Post Choice Game (Part 3 of the every day choice task)",
-//         description: "Description of Everyday Choice Task",
-//         type: TaskType.Experimental,
-//         route: "task/postchoice",
-//     },
-//     ratingnew: {
-//         id: "ratingnew",
-//         title: "Rating Game and Choice Game Modified (Part 1 and 2 of the every day choice task)",
-//         description: "Description of the modified rating and choice game",
-//         type: TaskType.Experimental,
-//         route: "task/ratingnew",
-//     },
-//     consent: {
-//         id: "consent",
-//         title: "WebPheno_Pilot",
-//         description: "Consent Form",
-//         type: TaskType.Questionnaire,
-//         route: "consent",
-//     },
-//     webPhenoClinical: {
-//         id: "webPhenoClinical",
-//         title: "WebPheno_Clinical",
-//         description: "Consent Form",
-//         type: TaskType.Questionnaire,
-//         route: "consent",
-//     },
-//     webPhenoClinicalFR: {
-//         id: "webPhenoClinicalFR",
-//         title: "WebPheno_Clinical_FR",
-//         description: "Consent Form FR",
-//         type: TaskType.Questionnaire,
-//         route: "consent",
-//     },
-//     stressClinical: {
-//         id: "stressClinical",
-//         title: "Stress_Clinical",
-//         description: "Consent Form",
-//         type: TaskType.Questionnaire,
-//         route: "consent",
-//     },
-//     stressClinicalFR: {
-//         id: "stressClinicalFR",
-//         title: "Stress_Clinical_FR",
-//         description: "Consent Form FR",
-//         type: TaskType.Questionnaire,
-//         route: "consent",
-//     },
-//     stressClinicalDebrief: {
-//         id: "stressClinicalDebrief",
-//         title: "Stress Clinical Debrief",
-//         description: "Debrief",
-//         type: TaskType.Questionnaire,
-//         route: "consent",
-//     },
-//     stressPilot: {
-//         id: "stressPilot",
-//         title: "Stress_Pilot",
-//         description: "Consent Form",
-//         type: TaskType.Questionnaire,
-//         route: "consent",
-//     },
-//     demographicsquestionnaire: {
-//         id: "demographicsquestionnaire",
-//         title: "Demographics Questionnaire",
-//         description: "Questionnaire Asking certain participant demographics questions",
-//         type: TaskType.Questionnaire,
-//         route: "task/demographics-questionnaire",
-//     },
-//     surveymonkeyquestionnaire: {
-//         id: "surveymonkeyquestionnaire",
-//         title: "Survey Monkey Questionnaire",
-//         description: "Linked Survey Monkey Questionnaire",
-//         type: TaskType.Questionnaire,
-//         route: "task/questionnaire",
-//     },
-//     pavloviatask: {
-//         id: "pavloviatask",
-//         title: "Pavlovia Task",
-//         description: "Linked Pavlovia Task",
-//         type: TaskType.CustomTask,
-//         route: "task/questionnaire",
-//     },
-// };
diff --git a/src/app/services/task-manager.service.ts b/src/app/services/task-manager.service.ts
index 255a180f..bf487f75 100644
--- a/src/app/services/task-manager.service.ts
+++ b/src/app/services/task-manager.service.ts
@@ -1,23 +1,25 @@
-import { Injectable } from "@angular/core";
-import { Study } from "../models/Study";
-import { StudyService } from "./study.service";
-import { SnackbarService } from "./snackbar.service";
-import { Router } from "@angular/router";
-import { UserService } from "./user.service";
-import { SessionStorageService } from "./sessionStorage.service";
-import { map, mergeMap, take } from "rxjs/operators";
-import { ParticipantRouteNames, Platform, RouteNames, TaskType } from "../models/enums";
-import { StudyTask, Task } from "../models/Task";
-import { TaskPlayerNavigationConfig } from "../pages/tasks/task-playables/task-player/task-player.component";
-import { QuestionnaireNavigationConfig } from "../pages/tasks/questionnaire-reader/questionnaire-reader.component";
-import { Observable, of } from "rxjs";
-import { TaskService } from "./task.service";
-import { ConsentNavigationConfig } from "../pages/shared/consent-component/consent-reader.component";
-import { EmbeddedPageNavigationConfig } from "../pages/tasks/embedded-page/embedded-page.component";
-import { CanClear } from "./clearance.service";
+import { Injectable } from '@angular/core';
+import { Study } from '../models/Study';
+import { StudyService } from './study.service';
+import { SnackbarService } from './snackbar.service';
+import { Router } from '@angular/router';
+import { UserService } from './user.service';
+import { SessionStorageService } from './sessionStorage.service';
+import { map, mergeMap, take } from 'rxjs/operators';
+import { ParticipantRouteNames, Platform, RouteNames, TaskType } from '../models/enums';
+import { StudyTask, Task } from '../models/Task';
+import { TaskPlayerNavigationConfig } from '../pages/tasks/task-playables/task-player/task-player.component';
+import { QuestionnaireNavigationConfig } from '../pages/tasks/questionnaire-reader/questionnaire-reader.component';
+import { Observable, of } from 'rxjs';
+import { TaskService } from './task.service';
+import { ConsentNavigationConfig } from '../pages/shared/consent-component/consent-reader.component';
+import { EmbeddedPageNavigationConfig } from '../pages/tasks/embedded-page/embedded-page.component';
+import { CanClear } from './clearance.service';
+import { objIsEmpty } from '../common/commonMethods';
+import { InfoDisplayNavigationConfig } from '../pages/tasks/info-display/info-display.component';
 
 @Injectable({
-    providedIn: "root",
+    providedIn: 'root',
 })
 export class TaskManagerService implements CanClear {
     /**
@@ -84,7 +86,7 @@ export class TaskManagerService implements CanClear {
 
     private showConsent(consent: Task) {
         const config: ConsentNavigationConfig = {
-            mode: "actual",
+            mode: 'actual',
             metadata: consent.config,
         };
 
@@ -101,9 +103,13 @@ export class TaskManagerService implements CanClear {
 
     handleErr(): void {
         this._sessionStorageService.clearSessionStorage();
-        this._router.navigate(["crowdsource-participant"]);
+        if (this._userService.isCrowdsourcedUser) {
+            this._router.navigate([ParticipantRouteNames.CROWDSOURCEPARTICIPANT_REGISTER_BASEROUTE]);
+        } else {
+            this._router.navigate([ParticipantRouteNames.DASHBOARD_BASEROUTE]);
+        }
         this._snackbarService.openErrorSnackbar(
-            "There was an error. Please contact sharplab.neuro@mcgill.ca",
+            'There was an error. Please contact sharplab.neuro@mcgill.ca',
             undefined,
             15000
         );
@@ -114,41 +120,51 @@ export class TaskManagerService implements CanClear {
     private _routeToTask(studyTask: StudyTask) {
         this._router.navigate([`${ParticipantRouteNames.DASHBOARD_BASEROUTE}`]).then(() => {
             if (studyTask.task.fromPlatform === Platform.PAVLOVIA) {
+                // taskType can also be experimental or NAB from pavlovia
                 const navigationConfig: EmbeddedPageNavigationConfig = {
-                    mode: "actual",
+                    mode: 'actual',
                     config: {
                         externalURL: studyTask.task.externalURL,
                         task: studyTask.task,
                     },
                 };
-                this._router.navigate([`${RouteNames.PAVLOVIA}`], { state: navigationConfig });
+                this._router.navigate([RouteNames.PAVLOVIA], { state: navigationConfig });
             } else if (studyTask.task.taskType === TaskType.QUESTIONNAIRE) {
-                const config = Object.keys(studyTask.config).length === 0 ? studyTask.task.config : studyTask.config;
+                // if config object is empty, that means we use the default config.
+                // otherwise, use the overriding config
+                const config = objIsEmpty(studyTask.config) ? studyTask.task.config : studyTask.config;
                 const navigationConfig: QuestionnaireNavigationConfig = {
                     metadata: config,
-                    mode: "actual",
+                    mode: 'actual',
                 };
-                this._router.navigate([`${RouteNames.QUESTIONNAIRE}`], { state: navigationConfig });
+                this._router.navigate([RouteNames.QUESTIONNAIRE], { state: navigationConfig });
             } else if (studyTask.task.taskType === TaskType.EXPERIMENTAL || studyTask.task.taskType === TaskType.NAB) {
-                const config = Object.keys(studyTask.config).length === 0 ? studyTask.task.config : studyTask.config;
+                const config = objIsEmpty(studyTask.config) ? studyTask.task.config : studyTask.config;
                 const navigationConfig: TaskPlayerNavigationConfig = {
                     metadata: config,
-                    mode: "actual",
+                    mode: 'actual',
+                };
+                this._router.navigate([RouteNames.TASKPLAYER], { state: navigationConfig });
+            } else if (studyTask.task.taskType === TaskType.INFO_DISPLAY) {
+                const config = objIsEmpty(studyTask.config) ? studyTask.task.config : studyTask.config;
+                const navigationConfig: InfoDisplayNavigationConfig = {
+                    metadata: config,
+                    mode: 'actual',
                 };
-                this._router.navigate([`${RouteNames.TASKPLAYER}`], { state: navigationConfig });
+                this._router.navigate([RouteNames.INFO_DISPLAY], { state: navigationConfig });
             }
         });
     }
 
     private _routeToFinalPage(completionCode: string): void {
         if (this._userService.isCrowdsourcedUser) {
-            this._router.navigate(["/complete"], { state: { completionCode: completionCode } });
+            this._router.navigate(['/complete'], { state: { completionCode: completionCode } });
         } else {
             this._userService.updateStudyUsers();
             this._router.navigate([
                 `${ParticipantRouteNames.DASHBOARD_BASEROUTE}/${ParticipantRouteNames.STUDIES_SUBROUTE}`,
             ]);
-            this._snackbarService.openSuccessSnackbar("Completed Study!");
+            this._snackbarService.openSuccessSnackbar('Completed Study!');
         }
     }