diff --git a/frontend/src/app/schedules/scheduler/scheduler.component.css b/frontend/src/app/schedules/scheduler/scheduler.component.css
new file mode 100644
index 0000000..67e8ece
--- /dev/null
+++ b/frontend/src/app/schedules/scheduler/scheduler.component.css
@@ -0,0 +1,16 @@
+.container {
+  margin: 20px auto;
+  width: 70%;
+}
+
+.spacer {
+  margin-bottom: 2.5%;
+}
+
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 100%;
+    margin: 20px 10px;
+  }
+}
diff --git a/frontend/src/app/schedules/scheduler/scheduler.component.html b/frontend/src/app/schedules/scheduler/scheduler.component.html
new file mode 100644
index 0000000..86cc339
--- /dev/null
+++ b/frontend/src/app/schedules/scheduler/scheduler.component.html
@@ -0,0 +1,5 @@
+<div class="container">
+  <app-navigation-link-list #navLinkList [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
+
+
+</div>
diff --git a/frontend/src/app/schedules/scheduler/scheduler.component.spec.ts b/frontend/src/app/schedules/scheduler/scheduler.component.spec.ts
new file mode 100644
index 0000000..6548836
--- /dev/null
+++ b/frontend/src/app/schedules/scheduler/scheduler.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SchedulerComponent } from './scheduler.component';
+
+describe('SchedulerComponent', () => {
+  let component: SchedulerComponent;
+  let fixture: ComponentFixture<SchedulerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SchedulerComponent]
+    });
+    fixture = TestBed.createComponent(SchedulerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/schedules/scheduler/scheduler.component.ts b/frontend/src/app/schedules/scheduler/scheduler.component.ts
new file mode 100644
index 0000000..57a9a94
--- /dev/null
+++ b/frontend/src/app/schedules/scheduler/scheduler.component.ts
@@ -0,0 +1,70 @@
+import {Component, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core';
+import {NavigationLink, NavigationLinkListComponent} from "../../navigation-link-list/navigation-link-list.component";
+import {TaskEntityInfo, TaskgroupEntityInfo, TaskgroupService, TaskService} from "../../../api";
+import {ActivatedRoute} from "@angular/router";
+
+@Component({
+  selector: 'app-scheduler',
+  templateUrl: './scheduler.component.html',
+  styleUrls: ['./scheduler.component.css']
+})
+export class SchedulerComponent implements OnInit{
+  defaultNavigationLinkPath: NavigationLink[] = [
+    {
+      linkText: "Dashboard",
+      routerLink: ['/']
+    },
+    {
+      linkText: "Taskgroups",
+      routerLink: ["/taskgroups"]
+    }
+  ]
+  taskgroups: TaskgroupEntityInfo[] = []
+  taskgroup: TaskgroupEntityInfo | undefined
+  taskgroupPath: TaskgroupEntityInfo[] = []
+  taskgroupID: number = -1;
+  @ViewChild('navLinkList') navLinkListComponent: NavigationLinkListComponent | undefined
+
+  task: TaskEntityInfo | undefined
+
+  constructor(private activatedRoute: ActivatedRoute,
+              private taskgroupService: TaskgroupService,
+              private taskService: TaskService) {
+  }
+
+  ngOnInit(): void {
+    this.activatedRoute.paramMap.subscribe(params => {
+      if (params.has('taskgroupID')) {
+        this.taskgroupID = Number(params.get('taskgroupID'));
+        this.taskgroupService.taskgroupsTaskgroupIDGet(this.taskgroupID).subscribe({
+          next: resp => {
+            this.taskgroups = resp.children
+            this.taskgroupPath = resp.ancestors
+            this.taskgroup = resp.taskgroupInfo;
+            this.initializeNavigationLinkList()
+          }
+        })
+      }
+
+      if(params.has('taskID')) {
+        this.taskService.tasksTaskIDGet(Number(params.get('taskID'))).subscribe({
+          next: resp => {
+            this.task = resp;
+            this.initializeNavigationLinkList()
+          }
+        })
+      }
+    });
+  }
+
+  initializeNavigationLinkList() {
+    if(this.taskgroup != undefined && this.task != undefined) {
+      this.navLinkListComponent!.addNavigationLink(this.taskgroup!.taskgroupName, ['/taskgroups', this.taskgroup!.taskgroupID.toString()])
+      this.taskgroupPath.forEach(taskgroupEntity => {
+        this.navLinkListComponent!.addNavigationLink(taskgroupEntity.taskgroupName, ['/taskgroups', taskgroupEntity.taskgroupID.toString()]);
+      })
+      this.navLinkListComponent!.addNavigationLink(this.task!.taskName, ['/taskgroups', this.taskgroup!.taskgroupID.toString(), 'tasks', this.task.taskID.toString()]);
+      this.navLinkListComponent!.addNavigationLink('Schedule', [this.taskgroup!.taskgroupID.toString(), 'tasks', this.task.taskID.toString(), 'schedule'])
+    }
+  }
+}