diff --git a/src/pages/shows/shows.component.html b/src/pages/shows/shows.component.html
index 9e94b84..924e8b1 100644
--- a/src/pages/shows/shows.component.html
+++ b/src/pages/shows/shows.component.html
@@ -6,7 +6,7 @@
         <div class="card-body">
           <h5 class="card-title">{{ show.title }}</h5>
           <p class="card-text">{{ show.date | date }}</p>
-          <button type="button" class="btn btn-outline-danger">
+          <button type="button" class="btn btn-outline-danger" (click)="deleteShow(show)">
             <i class="bi bi-trash"></i>
           </button>
           <button type="button" class="btn btn-outline-warning">
diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts
index 1359f61..44add53 100644
--- a/src/pages/shows/shows.component.ts
+++ b/src/pages/shows/shows.component.ts
@@ -4,10 +4,12 @@ import {Show} from '../../interfaces/show';
 import {ShowsApiResponse} from '../../interfaces/shows-api-response';
 import {Toast} from '../../interfaces/toast';
 import {ToastService} from '../../services/toast/toast.service';
-import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';
 import {CreateModalComponent} from '../../components/create-modal/create-modal/create-modal.component';
 import {DatePipe} from '@angular/common';
 import {ShowsApiIdResponse} from '../../interfaces/shows-api-id-response';
+import {DeleteModalComponent} from '../../components/delete-modal/delete-modal.component';
+import {ShowsApiDeletion} from '../../interfaces/shows-api-deletion';
 
 @Component({
   selector: 'app-shows',
@@ -60,4 +62,29 @@ export class ShowsComponent {
       }
     )
   }
+
+  deleteShow(show: Show) {
+    let modal: NgbModalRef = this.modalService.open(DeleteModalComponent)
+    modal.componentInstance.showName = show.title;
+    modal.result.then(
+      (result) => {
+        if (result) {
+          this.api.deleteShw(show._id).subscribe({
+              next: (response: ShowsApiDeletion) => {
+                // Do nothing
+              }, error: (err: any) => {
+                console.log(err)
+              }, complete: () => {
+                this.toastService.show({body: "Show deleted!"})
+                this.shows = this.shows.filter(((s: Show) => s != show))
+              }
+            }
+          )
+        }
+      },
+      (result) => {
+        // Dismissed, do nothing
+      }
+    )
+  }
 }