diff --git a/apis_core/relations/static/css/relations.css b/apis_core/relations/static/css/relations.css
index cda88d50f..ae262ebda 100644
--- a/apis_core/relations/static/css/relations.css
+++ b/apis_core/relations/static/css/relations.css
@@ -2,3 +2,22 @@
   overflow-y: auto;
   max-height: 40vh;
 }
+
+#relationdialog {
+    border: 1px solid black;
+    border-radius: .3rem;
+    overflow: visible;
+    padding: 0;
+    opacity: 1;
+    transform: scale(1);
+    transition: all 0.5s ease-in-out;
+
+    @starting-style {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+}
+
+#relation-dialog-content {
+    padding: 1rem;
+}
diff --git a/apis_core/relations/static/js/relation_dialog.js b/apis_core/relations/static/js/relation_dialog.js
new file mode 100644
index 000000000..d70510c58
--- /dev/null
+++ b/apis_core/relations/static/js/relation_dialog.js
@@ -0,0 +1,20 @@
+document.body.addEventListener("reinit_select2", function(evt) {
+    form = document.getElementById(evt.detail.value);
+    form.querySelectorAll(".listselect2").forEach(element => {
+        $(element).select2({
+            ajax: {
+                url: $(element).data("autocomplete-light-url"),
+            },
+            dropdownParent: $("#relationdialog"),
+        });
+    });
+    $('.select2-selection').addClass("form-control");
+});
+document.body.addEventListener("dismissModal", function(evt) {
+    document.getElementById("relationdialog").close();
+});
+document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById("relationdialog").addEventListener("mousedown", function(evt) {
+        evt.target == this && this.close();
+    });
+});
diff --git a/apis_core/relations/templates/apis_core/apis_entities/abstractentity_form.html b/apis_core/relations/templates/apis_core/apis_entities/abstractentity_form.html
index 839047a5c..00eb50415 100644
--- a/apis_core/relations/templates/apis_core/apis_entities/abstractentity_form.html
+++ b/apis_core/relations/templates/apis_core/apis_entities/abstractentity_form.html
@@ -1,4 +1,17 @@
 {% extends "apis_core/apis_entities/abstractentity_form.html" %}
+{% load static %}
+
+{% block styles %}
+  {{ block.super }}
+  <link href="{% static 'css/relations.css' %}" rel="stylesheet" />
+{% endblock styles %}
+
+{% block content %}
+  {{ block.super }}
+  <dialog id="relationdialog">
+    <div id="relation-dialog-content"></div>
+  </dialog>
+{% endblock content %}
 
 {% block col-one %}
   {% include "relations/list_relations_include.html" with edit=True %}
@@ -6,23 +19,6 @@
 {% endblock col-one %}
 
 {% block scripts %}
-  <script>
-  document.body.addEventListener("dismissModal", function(evt){
-    console.log("triggered dismissModal");
-    $('#modal').modal('hide');
-  });
-  document.body.addEventListener("reinit_select2", function(evt) {
-    form = document.getElementById(evt.detail.value);
-    form.querySelectorAll(".listselect2").forEach(element => {
-      $(element).select2({
-        ajax: {
-          url: $(element).data("autocomplete-light-url"),
-        },
-        dropdownParent: $("div.modal-content"),
-      });
-    });
-    $('.select2-selection').addClass("form-control");
-  });
-  </script>
   {{ block.super }}
+  <script src="{% static "js/relation_dialog.js" %}"></script>
 {% endblock scripts %}
diff --git a/apis_core/relations/templates/relations/list_relations.html b/apis_core/relations/templates/relations/list_relations.html
index d9a004fec..decc3fa71 100644
--- a/apis_core/relations/templates/relations/list_relations.html
+++ b/apis_core/relations/templates/relations/list_relations.html
@@ -17,17 +17,15 @@
             <a href="{{ baseurl }}?obj_content_type={{ object.self_contenttype.id }}&obj_object_id={{ object.id }}&subj_content_type={{ target.id }}"
                class="btn btn-sm btn-outline-secondary"
                hx-get="{{ baseurlform }}?obj_content_type={{ object.self_contenttype.id }}&obj_object_id={{ object.id }}&subj_content_type={{ target.id }}&hx=true&reverse=true"
-               hx-target="#modal-here"
-               data-toggle="modal"
-               data-target="#modal">{{ relation.model_class.reverse_name }}</a>
+               hx-target="#relation-dialog-content"
+               hx-on:click="relationdialog.showModal();">{{ relation.model_class.reverse_name }}</a>
           {% endif %}
           {% if target.model_class in relation.model_class.obj_list and object.self_contenttype.model_class in relation.model_class.subj_list %}
             <a href="{{ baseurl }}?subj_content_type={{ object.self_contenttype.id }}&subj_object_id={{ object.id }}&obj_content_type={{ target.id }}"
                class="btn btn-sm btn-outline-secondary"
                hx-get="{{ baseurlform }}?subj_content_type={{ object.self_contenttype.id }}&subj_object_id={{ object.id }}&obj_content_type={{ target.id }}&hx=true"
-               hx-target="#modal-here"
-               data-toggle="modal"
-               data-target="#modal">{{ relation.model_class.name }}</a>
+               hx-target="#relation-dialog-content"
+               hx-on:click="relationdialog.showModal();">{{ relation.model_class.name }}</a>
           {% endif %}
         {% endif %}
       {% endfor %}