diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 04bd0d8..9912137 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -36,6 +36,8 @@ 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';
+import { RenamePresetDialogComponent } from './rename-preset-dialog/rename-preset-dialog.component';
+import { DeletePresetDialogComponent } from './delete-preset-dialog/delete-preset-dialog.component';
 
 
 @NgModule({
@@ -46,7 +48,9 @@ import {PlanTimeBarComponent} from './plan-time-bar/plan-time-bar.component';
     ImplementerDialogComponent,
     MultiselectAutocompleteComponent,
     FilterDialogComponent,
-    PlanTimeBarComponent
+    PlanTimeBarComponent,
+    RenamePresetDialogComponent,
+    DeletePresetDialogComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/data.service.ts b/frontend/src/app/data.service.ts
index 808ff23..10c83e8 100644
--- a/frontend/src/app/data.service.ts
+++ b/frontend/src/app/data.service.ts
@@ -266,6 +266,42 @@ export class DataService {
     return promise;
   }
 
+  /**
+  * The function updateDatePerChange sends the new date to the backend if the date was moved
+  * @param change the Change (the Resource) from which the date should be changed
+  */
+  public async renamePreset(preset: any){
+    const promise = new Promise(resolve=>{
+      let serializableResource = {id: preset.id, newName: preset.name};
+      let strigifiedResource = JSON.stringify(serializableResource);
+      let resJson = JSON.parse(strigifiedResource) as typeof strigifiedResource;
+      this.http.post('http://localhost:8080/api/renamePreset', resJson).subscribe((response:any)=>{
+        resolve(response);
+      },(error:any)=>{
+        resolve(error);
+      });
+    });
+    return promise;
+  }
+
+  /**
+  * The function updateDatePerChange sends the new date to the backend if the date was moved
+  * @param change the Change (the Resource) from which the date should be changed
+  */
+  public async deletePreset(preset: any){
+    const promise = new Promise(resolve=>{
+      let serializableResource = {id: preset.id};
+      let strigifiedResource = JSON.stringify(serializableResource);
+      let resJson = JSON.parse(strigifiedResource) as typeof strigifiedResource;
+      this.http.post('http://localhost:8080/api/deletePreset', resJson).subscribe((response:any)=>{
+        resolve(response);
+      },(error:any)=>{
+        resolve(error);
+      });
+    });
+    return promise;
+  }
+
   /**
   * The function updateDatePerChange sends the new date to the backend if the date was moved
   * @param change the Change (the Resource) from which the date should be changed
diff --git a/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.css b/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.html b/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.html
new file mode 100644
index 0000000..571b31f
--- /dev/null
+++ b/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.html
@@ -0,0 +1,5 @@
+<h2 style="font-family: Roboto;">Möchten Sie das Preset {{preset.name}} wirklich löschen?</h2>
+<mat-dialog-actions align="end">
+  <button  mat-raised-button  style="margin-right: 3px;" matDialogClose>Abbrechen</button>
+  <button  mat-raised-button color = "primary" style="margin-left: 3px;" (click)="deletePreset()" matDialogClose>Löschen</button>
+</mat-dialog-actions>
diff --git a/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.spec.ts b/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.spec.ts
new file mode 100644
index 0000000..63f78b0
--- /dev/null
+++ b/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeletePresetDialogComponent } from './delete-preset-dialog.component';
+
+describe('DeletePresetDialogComponent', () => {
+  let component: DeletePresetDialogComponent;
+  let fixture: ComponentFixture<DeletePresetDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DeletePresetDialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeletePresetDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.ts b/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.ts
new file mode 100644
index 0000000..7a09d21
--- /dev/null
+++ b/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.ts
@@ -0,0 +1,27 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { LanguageService } from '../language.service';
+import { DataService } from '../data.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-delete-preset-dialog',
+  templateUrl: './delete-preset-dialog.component.html',
+  styleUrls: ['./delete-preset-dialog.component.css']
+})
+export class DeletePresetDialogComponent implements OnInit {
+
+  public preset;
+
+  constructor(public languageService: LanguageService, public dialogRef: MatDialogRef<DeletePresetDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService, private _snackBar: MatSnackBar) {
+    this.preset = data[0].preset;
+  }
+
+  ngOnInit(): void {
+  }
+
+  public deletePreset(){
+    this.dataService.deletePreset(this.preset);
+  }
+
+}
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index 9551da3..4801ff6 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -81,6 +81,34 @@
   background-color: red;
  }
 
+ .editButton{
+  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border: none;  border-top-right-radius: 4px; margin-right: 15px;
+ }
+
+ .editButton:hover{
+  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04);  border-top-right-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.08);
+ }
+
+.editButton:checked{
+  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04);  border-top-right-radius: 4px;
+  background-color: red;
+ }
+
+ .deleteButton{
+  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 1px;  border: none; border-top-right-radius: 4px; margin-right: 15px; margin-left: -15px;
+ }
+
+ .deleteButton:hover{
+  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 2px;  border-top-right-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.08);
+ }
+
+.deleteButton:checked{
+  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 2px;  border-top-right-radius: 4px;
+  background-color: red;
+ }
+
  /* .datePickerContainer{
   height: 20px;
   width: 400px;
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 0f31191..6baf902 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -51,6 +51,8 @@
       </mat-optgroup>
     </mat-select>
   </mat-form-field>
+  <button mat-basic-button class="editButton" (click)="openRenameDialog()" color="" style="" ><mat-icon>edit</mat-icon></button>
+  <button mat-basic-button class="deleteButton" (click)="openDeleteDialog()" color="" style="" ><mat-icon>delete_forever</mat-icon></button>
 </div>
 
 <div class="filterContainer">
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
index 5204446..097179b 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
@@ -15,6 +15,8 @@ import * as $ from 'jquery';
 import { StateDialogComponent } from 'src/app/state-dialog/state-dialog.component';
 import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';
 import { MAT_DATE_FORMATS } from '@angular/material/core';
+import { RenamePresetDialogComponent } from '../rename-preset-dialog/rename-preset-dialog.component';
+import { DeletePresetDialogComponent } from '../delete-preset-dialog/delete-preset-dialog.component';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -316,6 +318,33 @@ export class NttGanttComponent implements OnInit {
     }
   }
 
+  /**
+   * The function openFilterDialog triggers the opening of the filterDialog, recieves the results of the filterDialog and refrehses the gantt chart.
+   * This function is triggered by the filter button.
+  */
+  public openRenameDialog(){
+      console.log(this.filters);
+      let dialogRef = RenamePresetDialogComponent;
+        this.matDialog.open(dialogRef,
+        {data : [{preset: this.selectedPreset}], width: '20%', maxWidth: '800px'}).afterClosed().subscribe((res)=>{
+          this.refreshGanttwithPresets();
+        });
+    }
+
+  /**
+   * The function openFilterDialog triggers the opening of the filterDialog, recieves the results of the filterDialog and refrehses the gantt chart.
+   * This function is triggered by the filter button.
+  */
+  public openDeleteDialog(){
+    console.log(this.filters);
+    let dialogRef = DeletePresetDialogComponent;
+    console.log(this.selectedPreset);
+      this.matDialog.open(dialogRef,
+      {data : [{preset: this.selectedPreset}], width: '20%', maxWidth: '800px'}).afterClosed().subscribe((res)=>{
+        this.refreshGanttwithPresets();
+      });
+  }
+
   public refreshGanttwithPresets(){
     this.showSaveButton = false;
     this.showSaveUnderButton = false;
diff --git a/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.css b/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.html b/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.html
new file mode 100644
index 0000000..149dc62
--- /dev/null
+++ b/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.html
@@ -0,0 +1,9 @@
+<h2 style="font-family: Roboto;">Preset {{preset.name}} umbenennen?</h2>
+<mat-form-field class="example-full-width">
+  <mat-label>Preset Name</mat-label>
+  <input matInput [(ngModel)]="newName">
+</mat-form-field>
+<mat-dialog-actions align="end">
+  <button  mat-raised-button  style="margin-right: 3px;" matDialogClose>Abbrechen</button>
+  <button  mat-raised-button color = "primary" style="margin-left: 3px;" (click)="renamePreset()" matDialogClose>Umbenennen</button>
+</mat-dialog-actions>
diff --git a/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.spec.ts b/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.spec.ts
new file mode 100644
index 0000000..3a207a3
--- /dev/null
+++ b/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RenamePresetDialogComponent } from './rename-preset-dialog.component';
+
+describe('RenamePresetDialogComponent', () => {
+  let component: RenamePresetDialogComponent;
+  let fixture: ComponentFixture<RenamePresetDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RenamePresetDialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RenamePresetDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.ts b/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.ts
new file mode 100644
index 0000000..e5aa1d9
--- /dev/null
+++ b/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.ts
@@ -0,0 +1,28 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { LanguageService } from '../language.service';
+import { DataService } from '../data.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-rename-preset-dialog',
+  templateUrl: './rename-preset-dialog.component.html',
+  styleUrls: ['./rename-preset-dialog.component.css']
+})
+export class RenamePresetDialogComponent implements OnInit {
+  public preset;
+  public newName: string;
+
+  constructor(public languageService: LanguageService, public dialogRef: MatDialogRef<RenamePresetDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService, private _snackBar: MatSnackBar) {
+    this.preset = data[0].preset;
+    this.newName = this.preset.name;
+  }
+
+  ngOnInit(): void {
+  }
+
+  public renamePreset(){
+    this.dataService.renamePreset({id: this.preset.id, name: this.newName});
+  }
+
+}