diff --git a/the_works/templates/views/herausgeber.html b/the_works/templates/views/herausgeber.html
index 27aed43..7ae9a72 100644
--- a/the_works/templates/views/herausgeber.html
+++ b/the_works/templates/views/herausgeber.html
@@ -2,55 +2,9 @@
 
 {% block title %}Herausgeber:innen{% endblock title %}
 
-{% block script %}
-<script>
-  const SCRIPT_ROOT = {{ request.script_root | tojson }};
-  
-  function showCreateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Herausgeber:in hinzufügen";
-    // empty text input 
-    document.getElementById("form_Name").value = "";
-    // set form action
-    document.getElementById("form_submit").formAction = "{{ url_for('herausgeber.create') }}";
-    // show modal
-    document.getElementById("herausgebermodal").showModal();
-  }
-  
-  function showUpdateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Herausgeber:in bearbeiten";
-    // populate text input 
-    document.getElementById("form_Name").value = this.dataset.name;
-    // set form action
-    document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/herausgeber/update/${this.dataset.id}`;
-    // show modal
-    document.getElementById("herausgebermodal").showModal();
-  }
-  
-  window.onload = function () {
-    // initialise DataTable
-    let table = new DataTable('#herausgebertable', {
-      paging: false,
-      order: []
-    });
-    deRole("#herausgebertable");
-
-    // create and append "New"-button to
-    let button = document.createElement("button");
-    button.id = "create-button";
-    button.setAttribute("title", "herausgeber:in hinzufügen");
-    button.innerHTML = "Neu …";
-    button.addEventListener("click", showCreateModal, false);
-    document.getElementById("herausgebertable_wrapper").firstElementChild.firstElementChild.appendChild(button);
-
-    // add event listeners
-    document.getElementById ("create-button").addEventListener("click", showCreateModal, false);
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", showUpdateModal, false); 
-    }
-  }
-</script>{% endblock script %}
+{% block head %}
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+{% endblock head %}
 
 {% block heading %}Herausgeber:innen{% endblock heading %}
 
@@ -58,7 +12,7 @@
 
 {% include "_icons.svg" %}
 
-<table id="herausgebertable">
+<table id="herausgeber-table">
   <thead>
     <tr>
       <th>Name</th>
@@ -76,11 +30,11 @@
   </tbody>
 </table>
 
-<dialog aria-labelledby="dialog-heading" id="herausgebermodal">
+<dialog aria-labelledby="dialog-heading" id="herausgeber-modal">
   <article>
     <form id="herausgeber_detail_form" method="post" >
       <header>
-        <button aria-label="close" rel="prev" onclick="herausgebermodal.close()"></button>
+        <button aria-label="close" rel="prev" onclick="herausgeber-modal.close()"></button>
         <h1 id="dialog-heading">#</h1>
       </header>
 
@@ -100,4 +54,44 @@
     </form>
   </article>
 </dialog>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
+
+{% block script %}
+<script src="{{ url_for('static', filename='datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script>
+  const create_url = "{{ url_for('herausgeber.create') }}";
+  const update_url_dummy = "{{ url_for('herausgeber.update', id=-1) }}";
+  window.onload = function () {
+    initDataTable("#herausgeber-table");
+    initCreateButton({
+      title: "Genre hinzufügen …",
+      table_id: "#herausgeber-table"
+    });
+
+    // add event listener to "New" element
+    document.getElementById ("create-button").addEventListener("click", () => {
+      showDialog({
+        heading: "Neue:r Herausgeber:in",
+        input_id: "form_Name",
+        form_action: create_url,
+        modal_id: "herausgeber-modal"
+      })
+    });
+
+    // add event listeners for "update" elements
+    for (const el of document.querySelectorAll('.action-update') ) { 
+      el.addEventListener("click", (event) => { 
+        showDialog({
+          heading: "Herausgeber:in bearbeiten",
+          input_id: "form_Name",
+          input_value: event.currentTarget.dataset.name,
+          form_action: update_url_dummy,
+          url_id: event.currentTarget.dataset.id,
+          modal_id: "herausgeber-modal"
+        }) 
+      }); 
+    }
+  }
+</script>
+{% endblock script %}
diff --git a/the_works/templates/views/pseudonym.html b/the_works/templates/views/pseudonym.html
index 15726df..2ce07db 100644
--- a/the_works/templates/views/pseudonym.html
+++ b/the_works/templates/views/pseudonym.html
@@ -2,55 +2,9 @@
 
 {% block title %}Pseudonyme{% endblock title %}
 
-{% block script %}
-<script>
-  const SCRIPT_ROOT = {{ request.script_root | tojson }};
-  
-  function showCreateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Pseudonym hinzufügen";
-    // empty text input 
-    document.getElementById("form_Pseudonym").value = "";
-    // set form action
-    document.getElementById("form_submit").formAction = "{{ url_for('pseudonym.create') }}";
-    // show modal
-    document.getElementById("pseudonymmodal").showModal();
-  }
-  
-  function showUpdateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Pseudonym bearbeiten";
-    // populate text input 
-    document.getElementById("form_Pseudonym").value = this.dataset.pseudonym;
-    // set form action
-    document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/pseudonym/update/${this.dataset.id}`;
-    // show modal
-    document.getElementById("pseudonymmodal").showModal();
-  }
-  
-  window.onload = function () {
-    // initialise DataTable
-    let table = new DataTable('#pseudonymtable', {
-      paging: false,
-      order: []
-    });
-    deRole("#pseudonymtable");
-
-    // create and append "New"-button to
-    let button = document.createElement("button");
-    button.id = "create-button";
-    button.setAttribute("title", "Pseudonym hinzufügen");
-    button.innerHTML = "Neu …";
-    button.addEventListener("click", showCreateModal, false);
-    document.getElementById("pseudonymtable_wrapper").firstElementChild.firstElementChild.appendChild(button);
-
-    // add event listeners
-    document.getElementById ("create-button").addEventListener("click", showCreateModal, false);
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", showUpdateModal, false); 
-    }
-  }
-</script>{% endblock script %}
+{% block head %}
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+{% endblock head %}
 
 {% block heading %}Pseudonyme{% endblock heading %}
 
@@ -58,7 +12,7 @@
 
 {% include "_icons.svg" %}
 
-<table id="pseudonymtable">
+<table id="pseudonym table">
   <thead>
     <tr>
       <th>Pseudonym</th>
@@ -76,11 +30,11 @@
   </tbody>
 </table>
 
-<dialog aria-labelledby="dialog-heading" id="pseudonymmodal">
+<dialog aria-labelledby="dialog-heading" id="pseudonym-modal">
   <article>
     <form id="pseudonym_detail_form" method="post" >
       <header>
-        <button aria-label="close" rel="prev" onclick="pseudonymmodal.close()"></button>
+        <button aria-label="close" rel="prev" onclick="pseudonym-modal.close()"></button>
         <h1 id="dialog-heading">#</h1>
       </header>
 
@@ -100,4 +54,44 @@
     </form>
   </article>
 </dialog>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
+
+{% block script %}
+<script src="{{ url_for('static', filename='datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script>
+  const create_url = "{{ url_for('pseudonym.create') }}";
+  const update_url_dummy = "{{ url_for('pseudonym.update', id=-1) }}";
+  window.onload = function () {
+    initDataTable("#pseudonym-table");
+    initCreateButton({
+      title: "Pseudonym hinzufügen …",
+      table_id: "#pseudonym-table"
+    });
+
+    // add event listener to "New" element
+    document.getElementById ("create-button").addEventListener("click", () => {
+      showDialog({
+        heading: "Neues Pseudonym",
+        input_id: "form_Pseudonym",
+        form_action: create_url,
+        modal_id: "pseudonym-modal"
+      })
+    });
+
+    // add event listeners for "update" elements
+    for (const el of document.querySelectorAll('.action-update') ) { 
+      el.addEventListener("click", (event) => { 
+        showDialog({
+          heading: "Pseudonym bearbeiten",
+          input_id: "form_Pseudonym",
+          input_value: event.currentTarget.dataset.pseudonym,
+          form_action: update_url_dummy,
+          url_id: event.currentTarget.dataset.id,
+          modal_id: "pseudonym-modal"
+        }) 
+      }); 
+    }
+  }
+</script>
+{% endblock script %}
diff --git a/the_works/templates/views/reihe.html b/the_works/templates/views/reihe.html
index ad52a71..80ce590 100644
--- a/the_works/templates/views/reihe.html
+++ b/the_works/templates/views/reihe.html
@@ -2,57 +2,9 @@
 
 {% block title %}Reihen{% endblock title %}
 
-{% block script %}
-<script>
-  const SCRIPT_ROOT = {{ request.script_root | tojson }};
-  
-  function showCreateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Reihe hinzufügen";
-    // empty inputs 
-    document.getElementById("form_Titel").value = "";
-    document.getElementById("form_Verlag").selectedIndex = "";
-    // set form action
-    document.getElementById("form_submit").formAction = "{{ url_for('reihe.create') }}";
-    // show modal
-    document.getElementById("reihenmodal").showModal();
-  }
-  
-  function showUpdateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Reihe bearbeiten";
-    // populate text input 
-    document.getElementById("form_Titel").value = this.dataset.reihe;
-    document.getElementById("form_Verlag").selectedIndex = this.dataset.verlag;
-    // set form action
-    document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/reihe/update/${this.dataset.id}`;
-    // show modal
-    document.getElementById("reihenmodal").showModal();
-  }
-  
-  window.onload = function () {
-    // initialise DataTable
-    let table = new DataTable('#reihentable', {
-      paging: false,
-      order: []
-    });
-    deRole("#reihentable");
-
-    // create and append "New"-button to
-    let button = document.createElement("button");
-    button.id = "create-button";
-    button.setAttribute("title", "Reihe hinzufügen");
-    button.innerHTML = "Neu …";
-    button.addEventListener("click", showCreateModal, false);
-    document.getElementById("reihentable_wrapper").firstElementChild.firstElementChild.appendChild(button);
-
-    // add event listeners
-    document.getElementById ("create-button").addEventListener("click", showCreateModal, false);
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", showUpdateModal, false); 
-    }
-  }
-</script>{% endblock script %}
+{% block head %}
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+{% endblock head %}
 
 {% block heading %}Reihen{% endblock heading %}
 
@@ -60,7 +12,7 @@
 
 {% include "_icons.svg" %}
 
-<table id="reihentable">
+<table id="reihe-table">
   <thead>
     <tr>
       <th>Reihe</th>
@@ -73,18 +25,18 @@
     <tr id="reihe-{{ reihe['id'] }}">
       <td title="Reihe">{{ reihe["Titel"] }}</td>
       <td title="Verlag">{{ reihe["Verlag"] }}</td>
-      <td class="action action-update" data-id="{{ reihe['id'] }}" data-reihe="{{reihe['Titel'] }}" data-verlag="{{reihe['v_id'] }}"><a href="#" title="Reihe bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
+      <td class="action action-update" data-id="{{ reihe['id'] }}" data-titel="{{reihe['Titel'] }}" data-verlag="{{reihe['v_id'] }}"><a href="#" title="Reihe bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
       <td id="delete-{{ reihe['id'] }}" class="action"><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('reihe.delete', id=reihe['id']) }}" title="Reihe löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
     </tr>  
     {% endfor %}
   </tbody>
 </table>
 
-<dialog aria-labelledby="dialog-heading" id="reihenmodal">
+<dialog aria-labelledby="dialog-heading" id="reihe-modal">
   <article>
     <form id="reihe_detail_form" method="post" >
       <header>
-        <button aria-label="close" rel="prev" onclick="reihenmodal.close()"></button>
+        <button aria-label="close" rel="prev" onclick="reihe-modal.close()"></button>
         <h1 id="dialog-heading">#</h1>
       </header>
 
@@ -111,4 +63,44 @@
     </form>
   </article>
 </dialog>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
+
+{% block script %}
+<script src="{{ url_for('static', filename='datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script>
+  const create_url = "{{ url_for('reihe.create') }}";
+  const update_url_dummy = "{{ url_for('reihe.update', id=-1) }}";
+  window.onload = function () {
+    initDataTable("#reihe-table");
+    initCreateButton({
+      title: "Reihe hinzufügen …",
+      table_id: "#reihe-table"
+    });
+
+    // add event listener to "New" element
+    document.getElementById ("create-button").addEventListener("click", () => {
+      showDialog({
+        heading: "Neue Reihe",
+        input_id: ["form_Titel", "form_Verlag"],
+        form_action: create_url,
+        modal_id: "reihe-modal"
+      })
+    });
+
+    // add event listeners for "update" elements
+    for (const el of document.querySelectorAll('.action-update') ) { 
+      el.addEventListener("click", (event) => { 
+        showDialog({
+          heading: "Reihe bearbeiten",
+          input_id: ["form_Titel", "form_Verlag"],
+          input_value: [event.currentTarget.dataset.titel, event.currentTarget.dataset.verlag],
+          form_action: update_url_dummy,
+          url_id: event.currentTarget.dataset.id,
+          modal_id: "reihe-modal"
+        }) 
+      }); 
+    }
+  }
+</script>
+{% endblock script %}
\ No newline at end of file