diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index eacc9b2..4d5d56e 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -34,6 +34,7 @@ import {MatIconModule} from '@angular/material/icon';
 import { FilterDialogComponent } from './filter-dialog/filter-dialog.component';
 import {ScrollingModule} from '@angular/cdk/scrolling';
 import { MomentDateModule } from '@angular/material-moment-adapter';
+import { PlanTimeBarComponent } from './plan-time-bar/plan-time-bar.component';
 
 @NgModule({
   declarations: [
@@ -43,7 +44,8 @@ import { MomentDateModule } from '@angular/material-moment-adapter';
     ImplementerDialogComponent,
     FilterComponentComponent,
     MultiselectAutocompleteComponent,
-    FilterDialogComponent
+    FilterDialogComponent,
+    PlanTimeBarComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/plan-time-bar/plan-time-bar.component.css b/frontend/src/app/plan-time-bar/plan-time-bar.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/plan-time-bar/plan-time-bar.component.html b/frontend/src/app/plan-time-bar/plan-time-bar.component.html
new file mode 100644
index 0000000..4caa511
--- /dev/null
+++ b/frontend/src/app/plan-time-bar/plan-time-bar.component.html
@@ -0,0 +1,29 @@
+
+<ejs-gantt #ganttObject id="ganttDefaultSum"
+  [dataSource]="data"
+  [resources]="resources"
+  [taskFields]="taskSettings"
+  [resourceFields]="resourceFields"
+  [editSettings]="editSettings"
+  [toolbar]="toolbar"
+  [labelSettings]="labelSettings"
+  [projectStartDate]="this.projectStartDate"
+  [projectEndDate]="this.projectEndDate"
+  [timelineSettings]="timelineSettings"
+  [tooltipSettings]="tooltipSettings"
+  [splitterSettings] = "splitterSettings"
+  [labelSettings]="labelSettings"
+
+  viewType="ResourceView"
+  [allowSelection]='true'
+  [allowResizing] = 'true'
+  [highlightWeekends] = 'true'
+  [treeColumnIndex]="1"
+  [showOverAllocation] = 'true'
+  [enableMultiTaskbar]= 'true'
+  [collapseAllParentTasks]= 'true'
+  [enableVirtualization]="false"
+  [allowSorting]= "false"
+  [allowFiltering]="false"
+  gridLines="Both"></ejs-gantt>
+
diff --git a/frontend/src/app/plan-time-bar/plan-time-bar.component.spec.ts b/frontend/src/app/plan-time-bar/plan-time-bar.component.spec.ts
new file mode 100644
index 0000000..3407114
--- /dev/null
+++ b/frontend/src/app/plan-time-bar/plan-time-bar.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlanTimeBarComponent } from './plan-time-bar.component';
+
+describe('PlanTimeBarComponent', () => {
+  let component: PlanTimeBarComponent;
+  let fixture: ComponentFixture<PlanTimeBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PlanTimeBarComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlanTimeBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/plan-time-bar/plan-time-bar.component.ts b/frontend/src/app/plan-time-bar/plan-time-bar.component.ts
new file mode 100644
index 0000000..e145c48
--- /dev/null
+++ b/frontend/src/app/plan-time-bar/plan-time-bar.component.ts
@@ -0,0 +1,105 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
+import { MAT_DATE_FORMATS } from '@angular/material/core';
+
+export const MY_DATE_FORMATS = {
+  parse: {
+    dateInput: 'DD.MM.YYYY',
+  },
+  display: {
+    dateInput: 'DD.MM.YYYY',
+    monthYearLabel: 'MMMM YYYY',
+    dateA11yLabel: 'LL',
+    monthYearA11yLabel: 'MMMM YYYY'
+  },
+};
+
+@Component({
+  selector: 'app-plan-time-bar',
+  templateUrl: './plan-time-bar.component.html',
+  styleUrls: ['./plan-time-bar.component.css']
+})
+export class PlanTimeBarComponent implements OnInit {
+  @Input() inputData: Array<any> = [];
+  @Input() splitterSettings: object;
+  @ViewChild('ganttObjectSum')
+  public ganttDefault!: GanttComponent;
+  public data: any[] = [];
+  public resources: any[] = [];
+  public userSupportGroup: string;
+  public taskSettings: object = {};
+  public labelSettings: object = {};
+  public projectStartDate: Date;
+  public projectEndDate: Date;
+  public resourceFields: object ={};
+  public editSettings: object = {};
+  public tooltipSettings: object ={};
+  public columns: object[] = [];
+  public toolbar: any[] = [];
+  public timelineSettings: object = {};
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.splitterSettings = this.inputData[0];
+    this.projectStartDate = this.inputData[1];
+    this.projectEndDate = this.inputData[2];
+    this.labelSettings = {
+      taskLabel: '${taskData.planzeit} H'
+  }
+
+    this.resources = [{resourceId: 1, resourceName: 'Planzeit Summen pro Woche'}];
+
+    this.data.push(
+      {
+        TaskID: '01', TaskName: "Woche 1", StartDate: new Date ('01.02.2023'), Duration: 7, planzeit: 1,
+        resources: [{resourceId: this.resources[0].resourceId},],  Progress: 0, work: 0, isRes: false
+      });
+
+    this.data.push(
+      {
+        TaskID: '02', TaskName: "Woche 2", StartDate: new Date ('01.10.2023'), Duration: 7, planzeit: 4,
+        resources: [{resourceId: this.resources[0].resourceId},],  Progress: 0, work: 0, isRes: false
+      });
+    this.data.push(
+      {
+        TaskID: '03', TaskName: "Woche 3", StartDate: new Date ('01.18.2023'), Duration: 7, planzeit: 7,
+        resources: [{resourceId: this.resources[0].resourceId},],  Progress: 0, work: 0, isRes: false
+      });
+
+    this.data.push(
+      {
+        TaskID: '04', TaskName: "Woche 4", StartDate: new Date ('01.26.2023'), Duration: 7, planzeit: 11,
+        resources: [{resourceId: this.resources[0].resourceId},],  Progress: 0, work: 0, isRes: false
+      });
+
+
+
+    this.timelineSettings = {
+      bottomTier: {
+          format: 'WW',
+          unit: 'Week',
+          count: 1
+      }
+    };
+    this.taskSettings = {
+      id: 'TaskID',
+      name: 'TaskName',
+      startDate: 'StartDate',
+      endDate: 'EndDate',
+      duration: 'Duration',
+      progress: 'Progress',
+      dependency: 'Predecessor',
+      resourceInfo: 'resources',
+      work: 'work',
+      expandState: 'isExpand',
+      child: 'subtasks',
+      planzeit: 'planzeit'
+  };
+  this.resourceFields = {
+      id: 'resourceId',
+      name: 'resourceName',
+  };
+  }
+
+}
diff --git a/frontend/src/ntt-gantt/ntt-gantt.component.html b/frontend/src/ntt-gantt/ntt-gantt.component.html
index 29038bd..51f13d7 100644
--- a/frontend/src/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/ntt-gantt/ntt-gantt.component.html
@@ -63,7 +63,7 @@
  <ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault"
     [ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}"
     [dataSource]="data"
-    [allowSorting]= 'true'
+    [allowSorting] = 'true'
     [resources]="resources"
     [taskFields]="taskSettings"
     [resourceFields]="resourceFields"
@@ -94,7 +94,6 @@
     (taskbarEditing)="taskbarEditing($event)"
     (taskbarEdited)="taskbarEdited($event)"
     (toolbarClick)="toolbarBtnClicked($event)"
-    (rowSelecting) = "rowSelecting($event)"
     (rowSelected) = "rowSelected($event)"
     (rowDeselected) = "rowDeselected($event)"
     (created)="created($event)"
@@ -139,7 +138,10 @@
     </div>
   </ng-template>
 </ejs-gantt>
-
+<app-plan-time-bar
+[inputData]="inputForTimeline"
+[splitterSettings]="splitterSettings"
+></app-plan-time-bar>
 <div *ngIf="this.showNoResultsError && this.language =='DE'"><h2>Die Suche lieferte keine Ergebnisse</h2></div>
 <div *ngIf="this.showNoResultsError && this.language =='EN'"><h2>The search did not return any results</h2></div>
   <!-- [filterSettings]="filterSettings" -->
diff --git a/frontend/src/ntt-gantt/ntt-gantt.component.ts b/frontend/src/ntt-gantt/ntt-gantt.component.ts
index 266ea39..f166ac9 100644
--- a/frontend/src/ntt-gantt/ntt-gantt.component.ts
+++ b/frontend/src/ntt-gantt/ntt-gantt.component.ts
@@ -77,6 +77,7 @@ export class NttGanttComponent implements OnInit {
   public language: string = 'DE';
   public horizontalPosition: MatSnackBarHorizontalPosition = 'end';
   public verticalPosition: MatSnackBarVerticalPosition = 'bottom';
+  public inputForTimeline = [];
 
   public deMap : Map<string, string> = new Map<string, string>()
   public enMap : Map<string, string> = new Map<string, string>()
@@ -359,14 +360,20 @@ public logg(args){
     this.tooltipSettings = {
       showTooltip: true,
       }
-    this.splitterSettings = {
-      columnIndex:3
-    };
-
 
      this.projectStartDate = this.range.controls.start.value;
      this.projectEndDate = this.range.controls.end.value;
 
+     this.splitterSettings = {
+      columnIndex:3
+    };
+
+    this.splitterSettings = {
+      position: 647+'px'
+    };
+
+     this.inputForTimeline = [this.splitterSettings, this.projectStartDate, this.projectEndDate];
+
 
   }
 
@@ -527,8 +534,8 @@ public logg(args){
         this.data.push(task);
       }
     }
-    console.log(this.resources[this.resources.length-1]);
-    this.resources.push({resourceId: 'Timeline', resourceName: 'Planzeit Summen pro Woche'})
+    // console.log(this.resources[this.resources.length-1]);
+    // this.resources.push({resourceId: 'Timeline', resourceName: 'Planzeit Summen pro Woche'})
   }
 
   /**
@@ -600,29 +607,29 @@ public logg(args){
       this.projectEndDate = new Date(this.range.controls.end.value);
     }
   }
-  public rowSelecting(args: any){
-    console.log(args)
-    if(args.data.length){
-      // if((args.data.length == this.resources.length+1)){
-      //   console.log("all")
-      // }else{
-      //   if(args.data[args.data.length-1].TaskID == 'Timeline'){
-      //     args.cancel = true;
-      //   }
-      // }
-      if(args.data[args.data.length-1].TaskID == 'Timeline'){
-        let data = args.data;
-        data.pop();
-        args.data = data;
-      }
+  // public rowSelecting(args: any){
+  //   console.log(args)
+  //   if(args.data.length){
+  //     // if((args.data.length == this.resources.length+1)){
+  //     //   console.log("all")
+  //     // }else{
+  //     //   if(args.data[args.data.length-1].TaskID == 'Timeline'){
+  //     //     args.cancel = true;
+  //     //   }
+  //     // }
+  //     if(args.data[args.data.length-1].TaskID == 'Timeline'){
+  //       let data = args.data;
+  //       data.pop();
+  //       args.data = data;
+  //     }
 
-    }else{
-      if(args.data.TaskID == 'Timeline'){
-        args.cancel = true;
-      }
-    }
+  //   }else{
+  //     if(args.data.TaskID == 'Timeline'){
+  //       args.cancel = true;
+  //     }
+  //   }
 
-  }
+  // }
 
   /**
    * The function rowSelected catches the corresponding syncfsuions event and checks if all selected resources (changes) have the same status, then it displays the corresponding buttons
@@ -1160,6 +1167,7 @@ private oldFilters:{};
     this.refreshData();
   }
   public onResizing(args){
+
     let width ='' + args.paneSize[0]+'px';
     this.splitterSettings = {
       position: width