diff --git a/the_works/templates/views/sprache.html b/the_works/templates/views/sprache.html
index 52e18fa..0956014 100644
--- a/the_works/templates/views/sprache.html
+++ b/the_works/templates/views/sprache.html
@@ -2,63 +2,17 @@
 
 {% block title %}Sprachen{% endblock title %}
 
-{% block script %}
-<script>
-  const SCRIPT_ROOT = {{ request.script_root | tojson }};
-  
-  function showCreateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Sprache hinzufügen";
-    // empty text input 
-    document.getElementById("form_Sprache").value = "";
-    // set form action
-    document.getElementById("form_submit").formAction = "{{ url_for('sprache.create') }}";
-    // show modal
-    document.getElementById("sprachmodal").showModal();
-  }
-  
-  function showUpdateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Sprache bearbeiten";
-    // populate text input 
-    document.getElementById("form_Sprache").value = this.dataset.sprache;
-    // set form action
-    document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/sprache/update/${this.dataset.id}`;
-    // show modal
-    document.getElementById("sprachmodal").showModal();
-  }
-  
-  window.onload = function () {
-    // initialise DataTable
-    let table = new DataTable('#sprachtable', {
-      paging: false,
-      order: []
-    });
-    deRole("#sprachtable");
+{% block head %}
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+{% endblock head %}
 
-    // create and append "New"-button to
-    let button = document.createElement("button");
-    button.id = "create-button";
-    button.setAttribute("title", "Sprache hinzufügen");
-    button.innerHTML = "Neu …";
-    button.addEventListener("click", showCreateModal, false);
-    document.getElementById("sprachtable_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 heading %}Verlage{% endblock heading %}
+{% block heading %}Sprachen{% endblock heading %}
 
 {% block content %}
 
 {% include "_icons.svg" %}
 
-<table id="sprachtable">
+<table id="sprache-table">
   <thead>
     <tr>
       <th>Sprachen</th>
@@ -76,11 +30,11 @@
   </tbody>
 </table>
 
-<dialog aria-labelledby="dialog-heading" id="sprachmodal">
+<dialog aria-labelledby="dialog-heading" id="sprache-modal">
   <article>
     <form id="sprache_detail_form" method="post" >
       <header>
-        <button aria-label="close" rel="prev" onclick="sprachmodal.close()"></button>
+        <button aria-label="close" rel="prev" onclick="sprache-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('sprache.create') }}";
+  const update_url_dummy = "{{ url_for('sprache.update', id=-1) }}";
+  window.onload = function () {
+    initDataTable("#sprache-table");
+    initCreateButton({
+      title: "Sprache hinzufügen …",
+      table_id: "#sprache-table"
+    });
+
+    // add event listener to "New" element
+    document.getElementById ("create-button").addEventListener("click", () => {
+      showDialog({
+        heading: "Neue Sprache",
+        input_id: "form_Sprache",
+        form_action: create_url,
+        modal_id: "sprache-modal"
+      })
+    });
+
+    // add event listeners for "update" elements
+    for (const el of document.querySelectorAll('.action-update') ) { 
+      el.addEventListener("click", (event) => { 
+        showDialog({
+          heading: "Sprache bearbeiten",
+          input_id: "form_Sprache",
+          input_value: event.currentTarget.dataset.sprache,
+          form_action: update_url_dummy,
+          url_id: event.currentTarget.dataset.id,
+          modal_id: "sprache-modal"
+        }) 
+      }); 
+    }
+  }
+</script>
+{% endblock script %}
diff --git a/the_works/templates/views/textform.html b/the_works/templates/views/textform.html
index 1ba049e..8ddf224 100644
--- a/the_works/templates/views/textform.html
+++ b/the_works/templates/views/textform.html
@@ -2,55 +2,9 @@
 
 {% block title %}Textformen{% endblock title %}
 
-{% block script %}
-<script>
-  const SCRIPT_ROOT = {{ request.script_root | tojson }};
-  
-  function showCreateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Textform hinzufügen";
-    // empty text input 
-    document.getElementById("form_Textform").value = "";
-    // set form action
-    document.getElementById("form_submit").formAction = "{{ url_for('textform.create') }}";
-    // show modal
-    document.getElementById("textformmodal").showModal();
-  }
-  
-  function showUpdateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Textform bearbeiten";
-    // populate text input 
-    document.getElementById("form_Textform").value = this.dataset.textform;
-    // set form action
-    document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/textform/update/${this.dataset.id}`;
-    // show modal
-    document.getElementById("textformmodal").showModal();
-  }
-  
-  window.onload = function () {
-    // initialise DataTable
-    let table = new DataTable('#textformtable', {
-      paging: false,
-      order: []
-    });
-    deRole("#textformtable");
-
-    // create and append "New"-button to
-    let button = document.createElement("button");
-    button.id = "create-button";
-    button.setAttribute("title", "Textform hinzufügen");
-    button.innerHTML = "Neu …";
-    button.addEventListener("click", showCreateModal, false);
-    document.getElementById("textformtable_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 %}Textformen{% endblock heading %}
 
@@ -58,7 +12,7 @@
 
 {% include "_icons.svg" %}
 
-<table id="textformtable">
+<table id="textform-table">
   <thead>
     <tr>
       <th>Textformen</th>
@@ -76,11 +30,11 @@
   </tbody>
 </table>
 
-<dialog aria-labelledby="dialog-heading" id="textformmodal">
+<dialog aria-labelledby="dialog-heading" id="textform-modal">
   <article>
     <form id="textform_detail_form" method="post" >
       <header>
-        <button aria-label="close" rel="prev" onclick="textformmodal.close()"></button>
+        <button aria-label="close" rel="prev" onclick="textform-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('textform.create') }}";
+  const update_url_dummy = "{{ url_for('textform.update', id=-1) }}";
+  window.onload = function () {
+    initDataTable("#textform-table");
+    initCreateButton({
+      title: "Testform hinzufügen …",
+      table_id: "#textform-table"
+    });
+
+    // add event listener to "New" element
+    document.getElementById ("create-button").addEventListener("click", () => {
+      showDialog({
+        heading: "Neue Textform",
+        input_id: "form_Textform",
+        form_action: create_url,
+        modal_id: "textform-modal"
+      })
+    });
+
+    // add event listeners for "update" elements
+    for (const el of document.querySelectorAll('.action-update') ) { 
+      el.addEventListener("click", (event) => { 
+        showDialog({
+          heading: "Textform bearbeiten",
+          input_id: "form_Textform",
+          input_value: event.currentTarget.dataset.textform,
+          form_action: update_url_dummy,
+          url_id: event.currentTarget.dataset.id,
+          modal_id: "textform-modal"
+        }) 
+      }); 
+    }
+  }
+</script>
+{% endblock script %}
diff --git a/the_works/templates/views/verlag.html b/the_works/templates/views/verlag.html
index ecc0665..f8fc635 100644
--- a/the_works/templates/views/verlag.html
+++ b/the_works/templates/views/verlag.html
@@ -2,55 +2,9 @@
 
 {% block title %}Verlage{% endblock title %}
 
-{% block script %}
-<script>
-  const SCRIPT_ROOT = {{ request.script_root | tojson }};
-  
-  function showCreateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Verlag hinzufügen";
-    // empty text input 
-    document.getElementById("form_Verlag").value = "";
-    // set form action
-    document.getElementById("form_submit").formAction = "{{ url_for('verlag.create') }}";
-    // show modal
-    document.getElementById("verlagsmodal").showModal();
-  }
-  
-  function showUpdateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Verlag bearbeiten";
-    // populate text input 
-    document.getElementById("form_Verlag").value = this.dataset.verlag;
-    // set form action
-    document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/verlag/update/${this.dataset.id}`;
-    // show modal
-    document.getElementById("verlagsmodal").showModal();
-  }
-  
-  window.onload = function () {
-    // initialise DataTable
-    let table = new DataTable('#verlagstable', {
-      paging: false,
-      order: []
-    });
-    deRole("#verlagstable");
-
-    // create and append "New"-button to
-    let button = document.createElement("button");
-    button.id = "create-button";
-    button.setAttribute("title", "Verlag hinzufügen");
-    button.innerHTML = "Neu …";
-    button.addEventListener("click", showCreateModal, false);
-    document.getElementById("verlagstable_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 %}Verlage{% endblock heading %}
 
@@ -58,7 +12,7 @@
 
 {% include "_icons.svg" %}
 
-<table id="verlagstable">
+<table id="verlag-table">
   <thead>
     <tr>
       <th>Verlag</th>
@@ -76,11 +30,11 @@
   </tbody>
 </table>
 
-<dialog aria-labelledby="dialog-heading" id="verlagsmodal">
+<dialog aria-labelledby="dialog-heading" id="verlag-modal">
   <article>
     <form id="verlag_detail_form" method="post" >
       <header>
-        <button aria-label="close" rel="prev" onclick="verlagsmodal.close()"></button>
+        <button aria-label="close" rel="prev" onclick="verlag-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('verlag.create') }}";
+  const update_url_dummy = "{{ url_for('verlag.update', id=-1) }}";
+  window.onload = function () {
+    initDataTable("#verlag-table");
+    initCreateButton({
+      title: "Genre hinzufügen …",
+      table_id: "#verlag-table"
+    });
+
+    // add event listener to "New" element
+    document.getElementById ("create-button").addEventListener("click", () => {
+      showDialog({
+        heading: "Neuer Verlag",
+        input_id: "form_Verlag",
+        form_action: create_url,
+        modal_id: "verlag-modal"
+      })
+    });
+
+    // add event listeners for "update" elements
+    for (const el of document.querySelectorAll('.action-update') ) { 
+      el.addEventListener("click", (event) => { 
+        showDialog({
+          heading: "Verlag bearbeiten",
+          input_id: "form_Verlag",
+          input_value: event.currentTarget.dataset.verlag,
+          form_action: update_url_dummy,
+          url_id: event.currentTarget.dataset.id,
+          modal_id: "verlag-modal"
+        }) 
+      }); 
+    }
+  }
+</script>
+{% endblock script %}
diff --git a/the_works/templates/views/werksform.html b/the_works/templates/views/werksform.html
index 2ce6a93..9d54b92 100644
--- a/the_works/templates/views/werksform.html
+++ b/the_works/templates/views/werksform.html
@@ -2,55 +2,9 @@
 
 {% block title %}Werksformen{% endblock title %}
 
-{% block script %}
-<script>
-  const SCRIPT_ROOT = {{ request.script_root | tojson }};
-  
-  function showCreateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Werksform hinzufügen";
-    // empty text input 
-    document.getElementById("form_Werksform").value = "";
-    // set form action
-    document.getElementById("form_submit").formAction = "{{ url_for('werksform.create') }}";
-    // show modal
-    document.getElementById("werksformmodal").showModal();
-  }
-  
-  function showUpdateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Werksform bearbeiten";
-    // populate text input 
-    document.getElementById("form_Werksform").value = this.dataset.werksform;
-    // set form action
-    document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/werksform/update/${this.dataset.id}`;
-    // show modal
-    document.getElementById("werksformmodal").showModal();
-  }
-  
-  window.onload = function () {
-    // initialise DataTable
-    let table = new DataTable('#werksformtable', {
-      paging: false,
-      order: []
-    });
-    deRole("#werksformtable");
-
-    // create and append "New"-button to
-    let button = document.createElement("button");
-    button.id = "create-button";
-    button.setAttribute("title", "Werksform hinzufügen");
-    button.innerHTML = "Neu …";
-    button.addEventListener("click", showCreateModal, false);
-    document.getElementById("werksformtable_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 %}Werksformen{% endblock heading %}
 
@@ -58,7 +12,7 @@
 
 {% include "_icons.svg" %}
 
-<table id="werksformtable">
+<table id="werksform-table">
   <thead>
     <tr>
       <th>Werksformen</th>
@@ -76,11 +30,11 @@
   </tbody>
 </table>
 
-<dialog aria-labelledby="dialog-heading" id="werksformmodal">
+<dialog aria-labelledby="dialog-heading" id="werksform-modal">
   <article>
     <form id="werksform_detail_form" method="post" >
       <header>
-        <button aria-label="close" rel="prev" onclick="werksformmodal.close()"></button>
+        <button aria-label="close" rel="prev" onclick="werksform-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('werksform.create') }}";
+  const update_url_dummy = "{{ url_for('werksform.update', id=-1) }}";
+  window.onload = function () {
+    initDataTable("#werksform-table");
+    initCreateButton({
+      title: "Werksform hinzufügen …",
+      table_id: "#werksform-table"
+    });
+
+    // add event listener to "New" element
+    document.getElementById ("create-button").addEventListener("click", () => {
+      showDialog({
+        heading: "Neue Werksform",
+        input_id: "form_Werksform",
+        form_action: create_url,
+        modal_id: "werksform-modal"
+      })
+    });
+
+    // add event listeners for "update" elements
+    for (const el of document.querySelectorAll('.action-update') ) { 
+      el.addEventListener("click", (event) => { 
+        showDialog({
+          heading: "Werksform bearbeiten",
+          input_id: "form_Werksform",
+          input_value: event.currentTarget.dataset.werksform,
+          form_action: update_url_dummy,
+          url_id: event.currentTarget.dataset.id,
+          modal_id: "werksform-modal"
+        }) 
+      }); 
+    }
+  }
+</script>
+{% endblock script %}