diff --git a/src/pages/shows/shows.component.html b/src/pages/shows/shows.component.html
index 0184096..cf63025 100644
--- a/src/pages/shows/shows.component.html
+++ b/src/pages/shows/shows.component.html
@@ -12,7 +12,7 @@
   </div>
   <div class="row justify-content-end mt-3">
     <div class="col-2">
-      <button type="button" class="btn btn-primary">Add new show</button>
+      <button type="button" class="btn btn-primary" (click)="createNewShow()">Add new show</button>
     </div>
   </div>
 </div>
diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts
index 32a985e..c37ef3b 100644
--- a/src/pages/shows/shows.component.ts
+++ b/src/pages/shows/shows.component.ts
@@ -4,6 +4,8 @@ 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 {CreateModalComponent} from '../../components/create-modal/create-modal/create-modal.component';
 
 @Component({
   selector: 'app-shows',
@@ -14,6 +16,7 @@ import {ToastService} from '../../services/toast/toast.service';
 export class ShowsComponent {
   private api: ShowsApiService = inject(ShowsApiService);
   private toastService: ToastService = inject(ToastService);
+  private modalService: NgbModal = inject(NgbModal);
 
   shows: Show[] = [];
 
@@ -34,4 +37,8 @@ export class ShowsComponent {
       }
     })
   }
+
+  createNewShow() {
+    this.modalService.open(CreateModalComponent)
+  }
 }