diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index 0377c30..02e5843 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -479,4 +479,11 @@
   height: 12px;
   width: 12px;
   transform: rotate(45deg);
-}
\ No newline at end of file
+}
+.gantt-container {
+  height: 75vh; /* Höhe relativ zur Viewport-Höhe */
+}
+:host {
+  display: block;
+  height: 100%; /* Die Komponente füllt den verfügbaren Raum des übergeordneten Containers */
+}
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 5ae9a0d..e6847d8 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -198,7 +198,9 @@
 
 
 <!-- <button ejs-button id='filterRecord' (click)='filter()'>Filter</button> -->
+ <div class="gantt-container">
 <ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault" [enableVirtualization]="true"
+  height="100%"
   [ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}" [dataSource]="data" [allowSorting]='true'
   [resources]="resources" [taskFields]="taskSettings" [resourceFields]="resourceFields" [editSettings]="editSettings"
   [columns]="columns" [toolbar]="" [labelSettings]="labelSettings" [allowSelection]='true' [allowResizing]='true'
@@ -255,7 +257,7 @@
     </div>
   </ng-template>
 </ejs-gantt>
-
+</div>
 <app-plan-time-bar #plantimeComponent *ngIf="!errorService.rsso && renderplanTime && renderGantt"
   [inputData]="inputForTimeline" [splitterSettings]="splitterSettings" [parentResources]="allResources"
   [filters]="filters"></app-plan-time-bar>
@@ -269,7 +271,7 @@
 <!-- [filterSettings]="filterSettings" -->
 
 <mat-paginator #paginator [ngStyle]="{'visibility':renderGantt ? 'visible' : 'hidden'}" class="demo-paginator"
-  (page)="handlePageEvent($event)" [length]="this.dataService.getTotalSize()" [pageSize]="200" [disabled]="false"
+  (page)="handlePageEvent($event)" [length]="this.dataService.getTotalSize()" [pageSize]="20" [disabled]="false"
   [showFirstLastButtons]="true" [pageSizeOptions]="[10, 20, 50, 70, 100, 200, 500]" [hidePageSize]="false"
   [pageIndex]="0" aria-label="Seite auswählen">
 </mat-paginator>
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
index 141f8ad..4ffb408 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
@@ -21,6 +21,7 @@ import { DeletePresetDialogComponent } from '../delete-preset-dialog/delete-pres
 import { SavePresetUnderDialogComponent } from '../save-preset-under-dialog/save-preset-under-dialog.component';
 import { Location } from '@angular/common';
 import { environment } from 'src/environments/environment';
+import { GanttModule, ResizeService } from '@syncfusion/ej2-angular-gantt';
 
 
 export const MY_DATE_FORMATS = {
@@ -52,7 +53,7 @@ interface presetGroup {
   selector: 'ntt-gantt',
   templateUrl: './ntt-gantt.component.html',
   styleUrls: ['./ntt-gantt.component.css'],
-  providers: [
+  providers: [ResizeService,
     { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
   ]
 })
@@ -114,7 +115,7 @@ export class NttGanttComponent implements OnInit {
   public horizontalPosition: MatSnackBarHorizontalPosition = 'end';
   public verticalPosition: MatSnackBarVerticalPosition = 'bottom';
   public inputForTimeline = [];
-  public renderplanTime: boolean = false;
+  public renderplanTime: boolean = true;
   public planTimeScrollLeft: number = 0;
 
   public stateList: any[] = [];
@@ -209,7 +210,8 @@ export class NttGanttComponent implements OnInit {
     this.renderGantt = false;
     this.firstLoad = true;
     this.sliceStart = 0;
-    this.sliceEnd = 200;
+    this.sliceEnd = 20;
+
 
     this.dataService.getUser().then((res: any) => {
       console.log(res);
@@ -428,7 +430,8 @@ export class NttGanttComponent implements OnInit {
       this.userPreferences = res.userPreferences;
       this.showDetails = res.userPreferences.showDetails;
       this.selectedScalar = this.scalars[res.userPreferences.view];
-      this.changeScalar();
+      console.log()
+      console.log("SELECETEDSCALAR########"+this.selectedScalar);
 
 
       this.dataService.fetchUserSupportGroup().then((res: any) => {
@@ -454,6 +457,8 @@ export class NttGanttComponent implements OnInit {
 
 
 
+
+
   /**###################################################################### Data Mapping, Filter and Sorting Functions  ######################################################################*/
 
   /**
@@ -542,6 +547,7 @@ export class NttGanttComponent implements OnInit {
         this.spin = false;
         this.showNoResultsError = true;
         this.renderplanTime = false;
+
       }
     });
   }
@@ -713,14 +719,17 @@ export class NttGanttComponent implements OnInit {
     if (this.selectedScalar == this.scalars[0]) {
       this.timelineSettings = { topTier: { unit: 'Week' }, bottomTier: { format: 'dd', unit: 'Day', count: 1 } };
       this.renderplanTime = false;
+
     }
     if (this.selectedScalar == this.scalars[1]) {
       this.timelineSettings = { topTier: { unit: 'Month' }, bottomTier: { format: 'WW', unit: 'Week', count: 1 } };
       this.renderplanTime = true;
+
     }
     if (this.selectedScalar == this.scalars[2]) {
       this.timelineSettings = { topTier: { unit: 'Year' }, bottomTier: { format: 'MM', unit: 'Month', count: 1 } };
       this.renderplanTime = false;
+
     }
     this.editUserPreferences();
 
@@ -754,6 +763,7 @@ export class NttGanttComponent implements OnInit {
       this.plantimeComponent.changeDateRange(this.projectStartDate, this.projectEndDate);
       this.renderplanTime = true;
 
+
     }
   }
 
@@ -767,6 +777,7 @@ export class NttGanttComponent implements OnInit {
       this.plantimeComponent.changeDateRange(this.projectStartDate, this.projectEndDate);
       this.renderplanTime = true;
 
+
     }
   }
   /**
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index cb0d05a..7dddc7e 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -32,3 +32,7 @@
   color: white !important;
   border: none;
 }
+
+html, body {
+  overflow: hidden !important;
+}