diff --git a/src-ui/src/app/app-routing.module.ts b/src-ui/src/app/app-routing.module.ts
index f49c5cd71..ee75b3312 100644
--- a/src-ui/src/app/app-routing.module.ts
+++ b/src-ui/src/app/app-routing.module.ts
@@ -20,7 +20,7 @@ const routes: Routes = [
     {path: 'documents', component: DocumentListComponent },
     {path: 'view/:id', component: DocumentListComponent },
     {path: 'search', component: SearchComponent },
-    {path: 'documents/:id', component: DocumentDetailComponent, canDeactivate: [DirtyFormGuard] },
+    {path: 'documents/:id', component: DocumentDetailComponent },
 
     {path: 'tags', component: TagListComponent },
     {path: 'documenttypes', component: DocumentTypeListComponent },
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index c0fc4af6d..d5c8c862e 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -38,7 +38,7 @@
         </svg>&nbsp;<span class="d-none d-lg-inline" i18n>More like this</span>
     </button>
 
-    <button type="button" class="btn btn-sm btn-outline-primary" (click)="close()">
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="maybeClose()">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#x" />
         </svg>&nbsp;<span class="d-none d-lg-inline" i18n>Close</span>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index 753317937..2fa96f161 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -202,6 +202,26 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent {
     })
   }
 
+  maybeClose() {
+    this.isDirty$.subscribe(dirty => {
+      if (dirty) {
+        let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+        modal.componentInstance.title = $localize`Unsaved Changes`
+        modal.componentInstance.messageBold = $localize`You have unsaved changes.`
+        modal.componentInstance.message = $localize`Are you sure you want to leave?`
+        modal.componentInstance.btnClass = "btn-warning"
+        modal.componentInstance.btnCaption = $localize`Leave page`
+        modal.componentInstance.confirmClicked.subscribe(() => {
+          modal.componentInstance.buttonsEnabled = false
+          modal.close()
+          this.close()
+        })
+      } else {
+        this.close()
+      }
+    })
+  }
+
   close() {
     this.openDocumentService.closeDocument(this.document)
     if (this.documentListViewService.savedViewId) {