diff --git a/UI/Web/src/app/app.component.ts b/UI/Web/src/app/app.component.ts
index f2241df40..26046d166 100644
--- a/UI/Web/src/app/app.component.ts
+++ b/UI/Web/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { NavigationStart, Router } from '@angular/router';
 import { take } from 'rxjs/operators';
 import { AccountService } from './_services/account.service';
 import { LibraryService } from './_services/library.service';
@@ -6,6 +7,8 @@ import { MessageHubService } from './_services/message-hub.service';
 import { NavService } from './_services/nav.service';
 import { PresenceHubService } from './_services/presence-hub.service';
 import { StatsService } from './_services/stats.service';
+import 'rxjs/add/operator/filter';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-root',
@@ -16,7 +19,17 @@ export class AppComponent implements OnInit {
 
   constructor(private accountService: AccountService, public navService: NavService, 
     private statsService: StatsService, private messageHub: MessageHubService, 
-    private presenceHub: PresenceHubService, private libraryService: LibraryService) { }
+    private presenceHub: PresenceHubService, private libraryService: LibraryService, private router: Router, private ngbModal: NgbModal) {
+    
+    // Close any open modals when a route change occurs
+    router.events
+      .filter(event => event instanceof NavigationStart)
+      .subscribe((event) => {
+        if (this.ngbModal.hasOpenModals()) {
+          this.ngbModal.dismissAll();
+        }
+      });
+  }
 
   ngOnInit(): void {
     this.setCurrentUser();