diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss
index c09c5f04a..ad63a23cc 100644
--- a/app/assets/stylesheets/styles.scss
+++ b/app/assets/stylesheets/styles.scss
@@ -230,4 +230,13 @@ pzsh-topbar {
 
 .modal-title {
   word-break: break-word;
-}
\ No newline at end of file
+}
+
+#modal-animation {
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+#modal-animation.fader {
+  opacity: 1;
+}
diff --git a/app/javascript/controllers/remote_modal_controller.js b/app/javascript/controllers/remote_modal_controller.js
index 3079a0ef8..ee85ae064 100644
--- a/app/javascript/controllers/remote_modal_controller.js
+++ b/app/javascript/controllers/remote_modal_controller.js
@@ -3,10 +3,16 @@ import { Modal } from "bootstrap"
 
 export default class extends Controller {
     connect() {
-        this.modal = new Modal(this.element)
-        this.modal.show()
+        this.modal = new Modal(this.element);
+        this.modal.show();
+        this.element.classList.toggle('fader');
     }
 
+    disconnect() {
+        this.element.classList.remove('fader');
+    }
+
+
     hideBeforeRender(event) {
         if (this.isOpen()) {
             event.preventDefault()
diff --git a/app/views/application/_remote_modal.html.haml b/app/views/application/_remote_modal.html.haml
index 72fc5147d..68ecfa810 100644
--- a/app/views/application/_remote_modal.html.haml
+++ b/app/views/application/_remote_modal.html.haml
@@ -1,5 +1,6 @@
 = turbo_frame_tag "remote_modal" do
-  .modal.fade{tabindex:"-1", "data-controller":"remote-modal", "data-action":"turbo:before-render@document->remote-modal#hideBeforeRender"}
+  #modal-animation.modal{tabindex:"-1", "data-controller":"remote-modal",
+  "data-action":"turbo:before-render@document->remote-modal#hideBeforeRender"}
     .modal-dialog
       .modal-content
         .modal-header