diff --git a/src/app/core/component/cardrenderer/card-renderer.component.ts b/src/app/core/component/cardrenderer/card-renderer.component.ts
index 3cfc9e74..60ef9e88 100644
--- a/src/app/core/component/cardrenderer/card-renderer.component.ts
+++ b/src/app/core/component/cardrenderer/card-renderer.component.ts
@@ -6,11 +6,13 @@ import Pattern from '../../model/hal/pattern.model';
 import { HalLink } from '../../model/hal/hal-link.interface';
 import { PatternService } from '../../service/pattern.service';
 import { ToasterService } from 'angular2-toaster';
+import { MatDialog } from "@angular/material/dialog";
+import { DeleteConfirmationDialogComponent } from "../delete-confirmation-dialog/delete-confirmation-dialog.component";
 
 @Component({
   selector: 'pp-card-renderer',
   templateUrl: './card-renderer.component.html',
-  styleUrls: ['./card-renderer.component.scss']
+  styleUrls: [ './card-renderer.component.scss' ]
 })
 export class CardRendererComponent {
 
@@ -22,23 +24,37 @@ export class CardRendererComponent {
               private router: Router,
               private activatedRoute: ActivatedRoute,
               private patternService: PatternService,
-              private toasterService: ToasterService) {
+              private toasterService: ToasterService,
+              private dialog: MatDialog) {
   }
 
   navigate(pattern: UriEntity): void {
     this.zone.run(() => {
-      this.router.navigate([UriConverter.doubleEncodeUri(pattern.uri)], { relativeTo: this.activatedRoute });
+      this.router.navigate([ UriConverter.doubleEncodeUri(pattern.uri) ], { relativeTo: this.activatedRoute });
     });
   }
 
   delete(pattern: Pattern): void {
-    this.patternService.deletePattern(pattern._links.self.href)
-      .subscribe(
-        value => this.handlePatternDelete(pattern),
-        error => {
-          this.toasterService.pop('error', 'Could not delete pattern!');
-        }
-      );
+    this.dialog.open(DeleteConfirmationDialogComponent, {
+      data: {
+        name: pattern.name,
+      }
+    })
+      .afterClosed().subscribe(dialoganswer => {
+      if (dialoganswer) {
+        this.patternService.deletePattern(pattern._links.self.href)
+          .subscribe(
+            value => {
+              this.handlePatternDelete(pattern);
+              this.toasterService.pop('success', 'Pattern deleted!');
+            },
+            error => {
+              this.toasterService.pop('error', 'Could not delete pattern!', "A Pattern can only be deleted if it is not a part of any Pattern Views");
+            }
+          );
+      }
+    });
+
   }
 
   getLinkCount(directedEdges: HalLink[] | HalLink): number {
@@ -51,15 +67,15 @@ export class CardRendererComponent {
   private collectAllEdgesOfPattern(pattern: Pattern): HalLink[] {
     let collectedEdges: HalLink[] = [];
     if (pattern._links.outgoingDirectedEdges) {
-      Array.isArray(pattern._links.outgoingDirectedEdges) ? collectedEdges = [...collectedEdges, ...pattern._links.outgoingDirectedEdges] :
+      Array.isArray(pattern._links.outgoingDirectedEdges) ? collectedEdges = [ ...collectedEdges, ...pattern._links.outgoingDirectedEdges ] :
         collectedEdges.push(pattern._links.outgoingDirectedEdges);
     }
     if (pattern._links.ingoingDirectedEdges) {
-      Array.isArray(pattern._links.ingoingDirectedEdges) ? collectedEdges = [...collectedEdges, ...pattern._links.ingoingDirectedEdges] :
+      Array.isArray(pattern._links.ingoingDirectedEdges) ? collectedEdges = [ ...collectedEdges, ...pattern._links.ingoingDirectedEdges ] :
         collectedEdges.push(pattern._links.ingoingDirectedEdges);
     }
     if (pattern._links.undirectedEdges) {
-      Array.isArray(pattern._links.undirectedEdges) ? collectedEdges = [...collectedEdges, ...pattern._links.undirectedEdges] :
+      Array.isArray(pattern._links.undirectedEdges) ? collectedEdges = [ ...collectedEdges, ...pattern._links.undirectedEdges ] :
         collectedEdges.push(pattern._links.undirectedEdges);
     }
     return collectedEdges;
diff --git a/src/app/core/component/create-edit-pattern-language/create-edit-pattern-language.component.ts b/src/app/core/component/create-edit-pattern-language/create-edit-pattern-language.component.ts
index 1b7c571a..4d3ec129 100644
--- a/src/app/core/component/create-edit-pattern-language/create-edit-pattern-language.component.ts
+++ b/src/app/core/component/create-edit-pattern-language/create-edit-pattern-language.component.ts
@@ -90,11 +90,12 @@ export class CreateEditPatternLanguageComponent implements OnInit {
     if (this.patternLanguageForm.valid) {
 
       switch (this.componentDialogType) {
-        case CreateEditComponentDialogType.PATTERN_VIEW:
+        case CreateEditComponentDialogType.PATTERN_VIEW :  case CreateEditComponentDialogType.DESIGN_MODEL:
 
           this.saveClicked.emit({
             dialogResult: {
-              name: this.name.value
+              name: this.name.value,
+              logo:  this.iconUrl.value,
             }
           });
           this.dialogRef.close();
@@ -123,17 +124,6 @@ export class CreateEditPatternLanguageComponent implements OnInit {
           });
           this.dialogRef.close();
           break;
-
-        case CreateEditComponentDialogType.DESIGN_MODEL:
-
-          this.saveClicked.emit({
-            dialogResult: {
-              name: this.name.value,
-              logo: this.iconUrl.value
-            }
-          });
-          this.dialogRef.close();
-          break;
       }
     }
   }
diff --git a/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html b/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html
index fdcbe3f4..d6520076 100644
--- a/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html
+++ b/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html
@@ -1,7 +1,9 @@
-<h1 mat-dialog-title>Edit or Delete Relation</h1>
+<h1 mat-dialog-title *ngIf="data?.name">Do you really want to delete {{data.name}}?</h1>
+<h1 mat-dialog-title *ngIf="!data?.name">Do you really want to delete this item?</h1>
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()">Cancle</button>
-  <button [mat-dialog-close]="data" class="pattern-button" mat-raised-button color="warn">
+  <button [mat-dialog-close]="data" class="pattern-button"  style="margin-left: auto;
+          margin-right: 0;" mat-raised-button color="warn">
     <i class="material-icons">delete</i>
   </button>
 </div>
diff --git a/src/app/core/service/pattern-language.service.ts b/src/app/core/service/pattern-language.service.ts
index 6e1d9173..74b1f246 100644
--- a/src/app/core/service/pattern-language.service.ts
+++ b/src/app/core/service/pattern-language.service.ts
@@ -107,4 +107,9 @@ export class PatternLanguageService implements GraphDataService {
   getEdgeTypes(): Observable<string[]> {
     return of();
   }
+
+  deletePatternLanguage(patternLanguageId: string){
+    const url =  this.repoEndpoint + '/patternLanguages/' + patternLanguageId;
+    return this.http.delete(url);
+  }
 }
diff --git a/src/app/core/service/pattern-view.service.ts b/src/app/core/service/pattern-view.service.ts
index 5a93586d..8018aa9b 100644
--- a/src/app/core/service/pattern-view.service.ts
+++ b/src/app/core/service/pattern-view.service.ts
@@ -91,13 +91,13 @@ export class PatternViewService implements GraphDataService {
     return this.http.get<Embedded<UndirectedEdgesResponse>>(patternContainer._links.undirectedEdges.href);
   }
 
-  getDirectedEdgeById(patternViewId, edgeId: string) : Observable<DirectedEdgeModel>{
-    return this.http.get<DirectedEdgeModel>(this.repoEndpoint + /patternViews/+ patternViewId + /directedEdges/ + edgeId)
+  getDirectedEdgeById(patternViewId, edgeId: string): Observable<DirectedEdgeModel> {
+    return this.http.get<DirectedEdgeModel>(this.repoEndpoint + /patternViews/ + patternViewId + /directedEdges/ + edgeId)
   }
 
 
-  getUndirectedEdgeById(patternViewId, edgeId: string) : Observable<UndirectedEdgeModel>{
-    return this.http.get<UndirectedEdgeModel>(this.repoEndpoint + /patternViews/+ patternViewId + /undirectedEdges/ + edgeId)
+  getUndirectedEdgeById(patternViewId, edgeId: string): Observable<UndirectedEdgeModel> {
+    return this.http.get<UndirectedEdgeModel>(this.repoEndpoint + /patternViews/ + patternViewId + /undirectedEdges/ + edgeId)
   }
 
   deleteLink(patternLink: any): Observable<any> {
@@ -116,10 +116,14 @@ export class PatternViewService implements GraphDataService {
     return of();
   }
 
-  removeRelationFromView(patternContainer: PatternContainer, relation: any):void {
-    relation.markerStart === undefined?
-      this.http.delete(patternContainer._links.directedEdges.href + '/' + relation.id).subscribe():
+  removeRelationFromView(patternContainer: PatternContainer, relation: any): void {
+    relation.markerStart === undefined ?
+      this.http.delete(patternContainer._links.directedEdges.href + '/' + relation.id).subscribe() :
       this.http.delete(patternContainer._links.undirectedEdges.href + '/' + relation.id).subscribe();
   }
 
+  deletePatternView(patternViewId: PatternContainer) {
+    return this.http.delete(patternViewId._links.self.href);
+  }
+
 }
diff --git a/src/app/core/service/pattern.service.ts b/src/app/core/service/pattern.service.ts
index 481e4096..742af464 100644
--- a/src/app/core/service/pattern.service.ts
+++ b/src/app/core/service/pattern.service.ts
@@ -68,8 +68,6 @@ export class PatternService {
   }
 
   getPatternById(patternLanguage: PatternLanguage, patternId: String): Observable<Pattern> {
-    console.log('patternid');
-    console.log(patternId);
     return this.http.get <Pattern>(this.repoEndpoint + '/patternLanguages/' + patternLanguage.id + '/patterns/' + patternId);
   }
 
diff --git a/src/app/design-model-module/component/design-model-management/design-model-management.component.html b/src/app/design-model-module/component/design-model-management/design-model-management.component.html
index ce958f56..2449f99b 100644
--- a/src/app/design-model-module/component/design-model-management/design-model-management.component.html
+++ b/src/app/design-model-module/component/design-model-management/design-model-management.component.html
@@ -6,23 +6,28 @@
 
 <div class="container">
   <mat-card *ngFor="let designModel of designModelResponse?._embedded?.designModels"
-            [routerLink]="[designModel.id]" class="landing-card">
-
+            class="landing-card">
     <mat-card-header>
-      <img mat-card-avatar [src]="designModel?.logo || '//via.placeholder.com/50x50'" alt=""/>
+      <img mat-card-avatar (click)="navigate(designModel)" [src]="designModel?.logo || '//via.placeholder.com/50x50'"
+           alt=""/>
 
-      <mat-card-title>
+      <mat-card-title (click)="navigate(designModel)">
         {{designModel.name}}
       </mat-card-title>
     </mat-card-header>
-
-    <img mat-card-image [src]="designModel?.logo || '//via.placeholder.com/200x300'" alt=""/>
+    <img mat-card-image (click)="navigate(designModel)" [src]="designModel?.logo || '//via.placeholder.com/200x300'"
+         alt=""/>
 
     <mat-card-actions>
-      <button mat-stroked-button color="primary">
-        <mat-icon>pageview</mat-icon>
-        View
-      </button>
+      <div style="text-align: center">
+        <button mat-stroked-button color="primary"
+                (click)="navigate(designModel)"><i class="material-icons">pageview</i> View
+        </button>
+        <button (click)="delete(designModel)" class="pattern-button" mat-stroked-button style="margin-left: 25px"
+                color="warn">
+          <i class="material-icons">delete</i>
+        </button>
+      </div>
     </mat-card-actions>
   </mat-card>
 </div>
diff --git a/src/app/design-model-module/component/design-model-management/design-model-management.component.scss b/src/app/design-model-module/component/design-model-management/design-model-management.component.scss
index e1007dd5..3f53a98e 100644
--- a/src/app/design-model-module/component/design-model-management/design-model-management.component.scss
+++ b/src/app/design-model-module/component/design-model-management/design-model-management.component.scss
@@ -3,10 +3,16 @@
   word-break: break-word;
 }
 
-.mat-card-actions {
-  text-align: center;
+.mat-card-title {
+  width: 10rem;
+  word-break: break-word;
+  cursor: pointer;
+}
+
+.mat-card-image{
+  cursor: pointer;
 }
 
-.landing-card {
+.mat-card-avatar{
   cursor: pointer;
 }
diff --git a/src/app/design-model-module/component/design-model-management/design-model-management.component.ts b/src/app/design-model-module/component/design-model-management/design-model-management.component.ts
index ffd838ad..186bbd89 100644
--- a/src/app/design-model-module/component/design-model-management/design-model-management.component.ts
+++ b/src/app/design-model-module/component/design-model-management/design-model-management.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, NgZone, OnInit } from '@angular/core';
 import {
   CreateEditComponentDialogType,
   CreateEditPatternLanguageComponent
@@ -12,12 +12,15 @@ import { ToasterService } from 'angular2-toaster';
 import { Observable } from 'rxjs';
 import { DesignModelService } from '../../service/design-model.service';
 import { DesignModelResponse } from '../../model/hal/design-model-response';
+import { ActivatedRoute, Router } from "@angular/router";
+import { DesignModel } from "../../model/hal/design-model";
+import { DeleteConfirmationDialogComponent } from "../../../core/component/delete-confirmation-dialog/delete-confirmation-dialog.component";
 
 
 @Component({
   selector: 'pp-design-model-management',
   templateUrl: './design-model-management.component.html',
-  styleUrls: ['./design-model-management.component.scss']
+  styleUrls: [ './design-model-management.component.scss' ]
 })
 export class DesignModelManagementComponent implements OnInit {
 
@@ -27,7 +30,10 @@ export class DesignModelManagementComponent implements OnInit {
   constructor(private designModelService: DesignModelService,
               private dialog: MatDialog,
               private patternLanguageService: PatternLanguageService,
-              private toastService: ToasterService) {
+              private toastService: ToasterService,
+              private activatedRoute: ActivatedRoute,
+              private router: Router,
+              private zone: NgZone) {
   }
 
 
@@ -67,4 +73,29 @@ export class DesignModelManagementComponent implements OnInit {
         }
       );
   }
+
+  navigate(model: DesignModel): void {
+    this.zone.run(() => {
+      this.router.navigate([ model.id ], { relativeTo: this.activatedRoute });
+    })
+  }
+
+  delete(designModel: DesignModel) {
+    const dialogRef = this.dialog.open(DeleteConfirmationDialogComponent, {
+      data: {
+        name: designModel.name,
+      }
+    }).afterClosed().subscribe(dialogAnswer => {
+      if (dialogAnswer) {
+        this.designModelService.deleteDesignModel(designModel).subscribe((respone) => {
+          for (let i = 0; i < this.designModelResponse._embedded.designModels.length; i++) {
+            this.designModelResponse._embedded.designModels[i].id === designModel.id ? this.designModelResponse._embedded.designModels.splice(i, 1) : null;
+          }
+          this.toastService.pop('success', 'Design Model deleted!');
+        },(error) => {
+          this.toastService.pop('error', 'Design Model could not be deleted!');
+        });
+      }
+    })
+  }
 }
diff --git a/src/app/design-model-module/service/design-model.service.ts b/src/app/design-model-module/service/design-model.service.ts
index 6b611063..d1399e2f 100644
--- a/src/app/design-model-module/service/design-model.service.ts
+++ b/src/app/design-model-module/service/design-model.service.ts
@@ -232,4 +232,8 @@ export class DesignModelService implements GraphDataService, GraphDataSavePatter
 
     return of({ graph: graphNodes });
   }
+
+  deleteDesignModel(designModel: DesignModel){
+    return this.httpClient.delete(designModel._links.self.href);
+  }
 }
diff --git a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.html b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.html
index 42825e39..d73f1895 100644
--- a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.html
+++ b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.html
@@ -17,11 +17,11 @@
 <div class="container">
   <mat-card class="landing-card" *ngFor="let patternLanguage of patternLanguages">
     <mat-card-header>
-      <img *ngIf="patternLanguage?.logo && patternLanguage?.logo !== ''; else noImageAvatar" mat-card-avatar
+      <img *ngIf="patternLanguage?.logo && patternLanguage?.logo !== ''; else noImageAvatar" mat-card-avatar  (click)="navigateToPL(patternLanguage)"
            [src]="patternLanguage.logo">
-      <ng-template #noImageAvatar><img mat-card-avatar [src]="'//via.placeholder.com/50x50'"></ng-template>
+      <ng-template #noImageAvatar><img mat-card-avatar [src]="'//via.placeholder.com/50x50'" (click)="navigateToPL(patternLanguage)"></ng-template>
 
-      <mat-card-title *ngIf="patternLanguage?.name && '' !== patternLanguage.name; else noPLName"
+      <mat-card-title *ngIf="patternLanguage?.name && '' !== patternLanguage.name; else noPLName" (click)="navigateToPL(patternLanguage)"
                       style="width: 10rem; word-break: break-word;">
         {{patternLanguage.name}}
       </mat-card-title>
@@ -31,13 +31,16 @@
         </mat-card-title>
       </ng-template>
     </mat-card-header>
-    <img mat-card-image *ngIf="patternLanguage?.logo && patternLanguage?.logo !== ''; else noImage"
+    <img mat-card-image (click)="navigateToPL(patternLanguage)" *ngIf="patternLanguage?.logo && patternLanguage?.logo !== ''; else noImage"
          [src]="patternLanguage.logo">
-    <ng-template #noImage><img mat-card-image [src]="'//via.placeholder.com/200x300'"></ng-template>
+    <ng-template #noImage><img mat-card-image (click)="navigateToPL(patternLanguage)" [src]="'//via.placeholder.com/200x300'"></ng-template>
     <mat-card-actions>
       <div style="text-align: center">
         <button matBadge="{{patternLanguage?.patternCount}}" mat-stroked-button color="primary"
-                (click)="navigateToPL(patternLanguage)"><i class="material-icons">pageview</i>View
+                (click)="navigateToPL(patternLanguage)"><i class="material-icons">pageview</i> View
+        </button>
+        <button (click)="delete(patternLanguage)" class="pattern-button" mat-stroked-button style="margin-left: 25px" color="warn">
+          <i class="material-icons">delete</i>
         </button>
       </div>
     </mat-card-actions>
diff --git a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.scss b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.scss
index 79875a2c..13641442 100644
--- a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.scss
+++ b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.scss
@@ -22,3 +22,15 @@
   min-height: 20rem !important;
   min-width: 13rem !important;
 }
+
+.mat-card-title {
+  cursor: pointer;
+}
+
+.mat-card-image{
+  cursor: pointer;
+}
+
+.mat-card-avatar{
+  cursor: pointer;
+}
diff --git a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.ts b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.ts
index 5f017f2f..5b0c0d25 100644
--- a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.ts
+++ b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.ts
@@ -27,6 +27,7 @@ import { DialogPatternLanguageResult } from '../data/DialogPatternLanguageResult
 import { map } from 'rxjs/operators';
 import PatternLanguageModel from '../../core/model/hal/pattern-language-model.model';
 import UriEntity from '../../core/model/hal/uri-entity.model';
+import { DeleteConfirmationDialogComponent } from "../../core/component/delete-confirmation-dialog/delete-confirmation-dialog.component";
 
 @Component({
   selector: 'pp-pattern-language-management',
@@ -64,6 +65,7 @@ export class PatternLanguageManagementComponent implements OnInit {
   ngOnInit() {
     this.patternLanguages = Array.from<PatternLanguageModel>(this.activatedRoute.snapshot.data.patternlanguages.values())
       .sort(PatternLanguageManagementComponent.sortPatternLanguages);
+    this.reloadPatternRepo();
   }
 
   async reloadPatternRepo() {
@@ -72,14 +74,13 @@ export class PatternLanguageManagementComponent implements OnInit {
         map(result => result.sort(PatternLanguageManagementComponent.sortPatternLanguages)))
       .subscribe(result => {
         this.patternLanguages = result;
-        this._toasterService.pop('success', 'Reloaded Pattern Languages');
         this.cdr.detectChanges();
         return result;
       });
     this.cdr.detectChanges();
   }
 
-  navigateToPL(pl: UriEntity): void {
+  navigateToPL(pl: PatternLanguageModel): void {
     this.zone.run(() => {
       this.router.navigate([pl.id], { relativeTo: this.activatedRoute });
     });
@@ -107,4 +108,24 @@ export class PatternLanguageManagementComponent implements OnInit {
           });
       });
   }
+
+  delete(patternLanguage: PatternLanguageModel) {
+    const dialogRef = this.dialog.open(DeleteConfirmationDialogComponent, {
+      data: {
+        name: patternLanguage.name,
+      }
+    }).afterClosed().subscribe(dialogAnswer => {
+      if(dialogAnswer){
+        this.patternLanguageService.deletePatternLanguage(patternLanguage.id).subscribe((response) =>{
+         this.patternLanguages.splice(this.patternLanguages.indexOf(patternLanguage),1);
+         this._toasterService.pop('success', 'Pattern Language deleted!');
+       },(error) => {
+          this._toasterService.pop('error', 'Pattern Language could not be deleted!', 'A Pattern Language can only be deleted if it does not contain any patterns.');
+        });
+
+
+      }
+    })
+
+  }
 }
diff --git a/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.html b/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.html
index 25c03f14..ac65582c 100644
--- a/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.html
+++ b/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.html
@@ -1,11 +1,28 @@
 <pp-action-button-bar [goBackButton]="false" [addButtonText]="'Add View'"
                       (addClicked)="createView()"></pp-action-button-bar>
-<div style="display: flex; flex-wrap: wrap; padding: 0.25em;">
-  <mat-card class="card box"
-            *ngFor="let entity of patternViewResponse?._embedded?.patternViews"
-            (click)="navigate(entity)"
-  >
-    <span>{{entity.name}}</span>
-  </mat-card>
 
+<div class="container">
+  <mat-card *ngFor="let patternView of patternViewResponse?._embedded?.patternViews"
+             class="landing-card">
+
+    <mat-card-header (click)="navigate(patternView)">
+      <img mat-card-avatar [src]="patternView?.logo || '//via.placeholder.com/50x50'" alt=""/>
+
+      <mat-card-title>
+        {{patternView.name}}
+      </mat-card-title>
+    </mat-card-header>
+
+    <img (click)="navigate(patternView)" mat-card-image [src]="patternView?.logo || '//via.placeholder.com/200x300'" alt=""/>
+
+    <mat-card-actions>
+      <div style="text-align: center">
+        <button (click)="navigate(patternView)" mat-stroked-button color="primary"><i class="material-icons">pageview</i> View
+        </button>
+        <button (click)="deletePatternView(patternView)" class="pattern-button" mat-stroked-button style="margin-left: 25px" color="warn">
+          <i class="material-icons">delete</i>
+        </button>
+      </div>
+    </mat-card-actions>
+  </mat-card>
 </div>
diff --git a/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.scss b/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.scss
index e58849e7..f5e9fc4d 100644
--- a/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.scss
+++ b/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.scss
@@ -16,3 +16,17 @@
     margin: auto;
   }
 }
+
+.mat-card-title {
+  width: 10rem;
+  word-break: break-word;
+  cursor: pointer;
+}
+
+.mat-card-image{
+  cursor: pointer;
+}
+
+.mat-card-avatar{
+  cursor: pointer;
+}
diff --git a/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.ts b/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.ts
index 7ee551f7..8f9e1a14 100644
--- a/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.ts
+++ b/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.ts
@@ -16,11 +16,12 @@ import { ToasterService } from 'angular2-toaster';
 import { UriConverter } from '../../core/util/uri-converter';
 import UriEntity from '../../core/model/hal/uri-entity.model';
 import { ActivatedRoute, Router } from '@angular/router';
+import { DeleteConfirmationDialogComponent } from "../../core/component/delete-confirmation-dialog/delete-confirmation-dialog.component";
 
 @Component({
   selector: 'pp-solution-language-management',
   templateUrl: './pattern-view-management.component.html',
-  styleUrls: ['./pattern-view-management.component.scss']
+  styleUrls: [ './pattern-view-management.component.scss' ]
 })
 export class PatternViewManagementComponent implements OnInit {
   public patternViewResponse;
@@ -46,7 +47,7 @@ export class PatternViewManagementComponent implements OnInit {
 
   navigate(view: UriEntity): void {
     this.zone.run(() => {
-      this.router.navigate([UriConverter.doubleEncodeUri(view.uri)], { relativeTo: this.activatedRoute });
+      this.router.navigate([ UriConverter.doubleEncodeUri(view.uri) ], { relativeTo: this.activatedRoute });
     });
   }
 
@@ -58,6 +59,7 @@ export class PatternViewManagementComponent implements OnInit {
       .saveClicked
       .pipe(
         tap((result: DialogPatternLanguageResult) => {
+          console.log(result.dialogResult);
           view = <PatternContainer>result.dialogResult;
         }),
         switchMap(() => this.patternViewService.savePatternView(this.patternViewResponse._links.patternViews.href, view)),
@@ -70,4 +72,24 @@ export class PatternViewManagementComponent implements OnInit {
       });
   }
 
+  deletePatternView(patternView: PatternContainer) {
+    const dialogRef = this.dialog.open(DeleteConfirmationDialogComponent, {
+      data: {
+        name: patternView.name,
+      }
+    }).afterClosed().subscribe(dialogAnswer => {
+        if (dialogAnswer) {
+          this.patternViewService.deletePatternView(patternView).subscribe((response) => {
+              for (let i = 0; i < this.patternViewResponse._embedded.patternViews.length; i++) {
+                this.patternViewResponse._embedded.patternViews[i].id === patternView.id ? this.patternViewResponse._embedded.patternViews.splice(i, 1) : null;
+              }
+              this.toastService.pop('success', 'Pattern View deleted!');
+            },
+            (error) => {
+              this.toastService.pop('error', 'Pattern View could not be deleted!');
+            }
+          );
+        }
+      })
+  }
 }