diff --git a/the_works/templates/base.html b/the_works/templates/base.html
index 7513766..dcafe5f 100644
--- a/the_works/templates/base.html
+++ b/the_works/templates/base.html
@@ -8,8 +8,8 @@
     <meta name="description" content="Frontend für die Verwaltung von Texten und Veröffentlichungen" />
     <meta name="author" content="Tobias Radloff" />
 
-    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='pico.azure.css') }}">
-    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='the_works.css') }}">
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/pico.azure.css') }}">
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/the_works.css') }}">
 
     {% block head %}{% endblock head %}
 
@@ -45,7 +45,7 @@
       <p>trololol</p>
     </footer>
 
-    <script src="{{ url_for('static', filename='SwitchColorMode.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/SwitchColorMode.js') }}"></script>
     {% block script %}
     {% endblock script %}
   </body>
diff --git a/the_works/templates/views/genre.html b/the_works/templates/views/genre.html
index a0e1223..a650964 100644
--- a/the_works/templates/views/genre.html
+++ b/the_works/templates/views/genre.html
@@ -3,7 +3,7 @@
 {% block title %}Genres{% endblock title %}
 
 {% block head %}
-<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/datatables.css') }}">
 {% endblock head %}
 
 {% block heading %}Genres{% endblock heading %}
@@ -57,8 +57,9 @@
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='datatables.js') }}"></script>
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
+<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
 <script>
   window.onload = function () {
     initDataTable("genre-table");
diff --git a/the_works/templates/views/herausgeber.html b/the_works/templates/views/herausgeber.html
index 4d05bb1..3584dfa 100644
--- a/the_works/templates/views/herausgeber.html
+++ b/the_works/templates/views/herausgeber.html
@@ -3,7 +3,7 @@
 {% block title %}Herausgeber:innen{% endblock title %}
 
 {% block head %}
-<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/datatables.css') }}">
 {% endblock head %}
 
 {% block heading %}Herausgeber:innen{% endblock heading %}
@@ -57,8 +57,9 @@
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='datatables.js') }}"></script>
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
+<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
 <script>
   window.onload = function () {
     initDataTable("herausgeber-table");
diff --git a/the_works/templates/views/home.html b/the_works/templates/views/home.html
index cc5a4f3..b6e0c68 100644
--- a/the_works/templates/views/home.html
+++ b/the_works/templates/views/home.html
@@ -1,19 +1,21 @@
-{% extends 'base.html' %}
-
-{% block title %}Alles durchsuchen{% endblock title %}
-
+{% extends 'base.html' %} {% block title %}Alles durchsuchen{% endblock title %}
 {% block head %}
-<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
-{% endblock head %}
-
-{% block heading %}Alles durchsuchen{% endblock heading %}
-
-{% block content %}
-
-{% include "_icons.svg" %}
+<link
+  type="text/css"
+  rel="stylesheet"
+  href="{{ url_for('static', filename='css/datatables.css') }}"
+/>
+{% endblock head %} {% block heading %}Alles durchsuchen{% endblock heading %}
+{% block content %} {% include "_icons.svg" %}
 <section>
   <label>
-    <input type="search" id="search_all" aria-label="search" placeholder="Suchbegriff eingeben …" value="" />
+    <input
+      type="search"
+      id="search_all"
+      aria-label="search"
+      placeholder="Suchbegriff eingeben …"
+      value=""
+    />
   </label>
   <label>
     Groß-/Kleinschreibung beachten
@@ -21,16 +23,17 @@
   </label>
 </section>
 
-<section id="results">
-</section>
-{% endblock content %}
-
-{% block script %}
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<section id="results"></section>
+{% endblock content %} {% block script %}
+<script src="{{ url_for('static', filename='js/search_all.js') }}"></script>
 <script>
   const url = "{{ url_for('home.search_all', _external=True) }}";
   window.onload = () => {
-    document.getElementById("search_all").addEventListener("input", event => search_all(event.target.value, url));
+    document
+      .getElementById("search_all")
+      .addEventListener("input", (event) =>
+        search_all(event.target.value, url)
+      );
   };
 </script>
-{% endblock script %}
\ No newline at end of file
+{% endblock script %}
diff --git a/the_works/templates/views/pseudonym.html b/the_works/templates/views/pseudonym.html
index d36fdf8..15ead25 100644
--- a/the_works/templates/views/pseudonym.html
+++ b/the_works/templates/views/pseudonym.html
@@ -3,7 +3,7 @@
 {% block title %}Pseudonyme{% endblock title %}
 
 {% block head %}
-<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/datatables.css') }}">
 {% endblock head %}
 
 {% block heading %}Pseudonyme{% endblock heading %}
@@ -57,8 +57,9 @@
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='datatables.js') }}"></script>
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
+<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
 <script>
   window.onload = function () {
     initDataTable("pseudonym-table");
diff --git a/the_works/templates/views/reihe.html b/the_works/templates/views/reihe.html
index 51bd617..4eb3364 100644
--- a/the_works/templates/views/reihe.html
+++ b/the_works/templates/views/reihe.html
@@ -3,7 +3,7 @@
 {% block title %}Reihen{% endblock title %}
 
 {% block head %}
-<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/datatables.css') }}">
 {% endblock head %}
 
 {% block heading %}Reihen{% endblock heading %}
@@ -66,8 +66,9 @@
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='datatables.js') }}"></script>
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
+<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
 <script>
   window.onload = function () {
     initDataTable("reihe-table");
diff --git a/the_works/templates/views/sprache.html b/the_works/templates/views/sprache.html
index 4931160..024a230 100644
--- a/the_works/templates/views/sprache.html
+++ b/the_works/templates/views/sprache.html
@@ -3,7 +3,7 @@
 {% block title %}Sprachen{% endblock title %}
 
 {% block head %}
-<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/datatables.css') }}">
 {% endblock head %}
 
 {% block heading %}Sprachen{% endblock heading %}
@@ -57,8 +57,9 @@
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='datatables.js') }}"></script>
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
+<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
 <script>
   window.onload = function () {
     initDataTable("sprache-table");
diff --git a/the_works/templates/views/text.html b/the_works/templates/views/text.html
index 525de9f..74023e4 100644
--- a/the_works/templates/views/text.html
+++ b/the_works/templates/views/text.html
@@ -3,7 +3,7 @@
 {% block title %}Texte{% endblock title %}
 
 {% block head %}
-<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/datatables.css') }}">
 {% endblock head %}
 
 {% block heading %}Texte{% endblock heading %}
@@ -42,8 +42,9 @@
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='datatables.js') }}"></script>
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
+<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
 <script>
   window.onload = function () {
     initDataTable("text-table");
diff --git a/the_works/templates/views/text_detail.html b/the_works/templates/views/text_detail.html
index cc788dd..3d97b1e 100644
--- a/the_works/templates/views/text_detail.html
+++ b/the_works/templates/views/text_detail.html
@@ -91,8 +91,8 @@ Text bearbeiten
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/multiselect.js') }}"></script>
 <script>
-  window.onload = () => initAllDropdownSelects();
+  window.onload = () => initAllMultiselects();
 </script>
 {% endblock script %}
diff --git a/the_works/templates/views/textform.html b/the_works/templates/views/textform.html
index 45f6edf..3f0413a 100644
--- a/the_works/templates/views/textform.html
+++ b/the_works/templates/views/textform.html
@@ -3,7 +3,7 @@
 {% block title %}Textformen{% endblock title %}
 
 {% block head %}
-<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/datatables.css') }}">
 {% endblock head %}
 
 {% block heading %}Textformen{% endblock heading %}
@@ -57,8 +57,9 @@
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='datatables.js') }}"></script>
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
+<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
 <script>
   window.onload = function () {
     initDataTable("textform-table");
diff --git a/the_works/templates/views/verlag.html b/the_works/templates/views/verlag.html
index cc713fe..5e43bd4 100644
--- a/the_works/templates/views/verlag.html
+++ b/the_works/templates/views/verlag.html
@@ -3,7 +3,7 @@
 {% block title %}Verlage{% endblock title %}
 
 {% block head %}
-<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/datatables.css') }}">
 {% endblock head %}
 
 {% block heading %}Verlage{% endblock heading %}
@@ -57,8 +57,9 @@
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='datatables.js') }}"></script>
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
+<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
 <script>
   window.onload = function () {
     initDataTable("verlag-table");
diff --git a/the_works/templates/views/veroeffentlichung.html b/the_works/templates/views/veroeffentlichung.html
index 9e05738..b6aff23 100644
--- a/the_works/templates/views/veroeffentlichung.html
+++ b/the_works/templates/views/veroeffentlichung.html
@@ -3,7 +3,7 @@
 {% block title %}Veröffentlichungen{% endblock title %}
 
 {% block head %}
-<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/datatables.css') }}">
 {% endblock head %}
 
 {% block heading %}Veröffentlichungen{% endblock heading %}
@@ -90,8 +90,9 @@
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='datatables.js') }}"></script>
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
+<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
 <script>
   window.onload = function () {
     initDataTable("veroeffentlichung-table");
diff --git a/the_works/templates/views/werk.html b/the_works/templates/views/werk.html
index 8111840..384694f 100644
--- a/the_works/templates/views/werk.html
+++ b/the_works/templates/views/werk.html
@@ -64,8 +64,9 @@
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='datatables.js') }}"></script>
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
+<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
 <script>
   window.onload = () => {
     initDataTable("werk-table");
diff --git a/the_works/templates/views/werk_detail.html b/the_works/templates/views/werk_detail.html
index 3ea1fbd..7a365c0 100644
--- a/the_works/templates/views/werk_detail.html
+++ b/the_works/templates/views/werk_detail.html
@@ -182,70 +182,11 @@ Werk bearbeiten
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/multiselect.js') }}"></script>
+<script src="{{ url_for('static', filename='js/validate_date.js') }}"></script>
 <script>
-  function initFileInput(id_stub) {
-    document.getElementById(id_stub + "-upload").addEventListener("change", handleFileInputChange);
-    document.getElementById(id_stub + "-delete").addEventListener("click", handleFileDeleteClick);
-  }    
-    
-  function handleFileInputChange(event) {
-console.dir(event);
-    let id_stub = event.target.id.split("-")[0];
-
-    // mark change
-    document.getElementById(id_stub + "-haschanged").value += "+";
-    
-    // show placeholder and return if input element is empty
-    if ( ! event.target.files.length ) {
-      showOrHideThumbnail(id_stub, "hide");
-      return true;
-    }
-
-    // set img src to the uploaded file
-    let f = event.target.files[0];
-    let tn = document.getElementById(id_stub + "-thumbnail");
-    tn.src = URL.createObjectURL(f);
-
-    // add some data about the image 
-    showOrHideThumbnail(id_stub, "show");
-    document.getElementById(id_stub + "-dateigroesse").innerText = f.size;
-
-    // event handler to remove image object from memory after it has loaded on the page   
-    tn.onload = () => {
-      document.getElementById(id_stub + "-breite").innerText = tn.naturalWidth;
-      document.getElementById(id_stub + "-hoehe").innerText = tn.naturalHeight;
-      URL.revokeObjectURL(tn.src);
-    };
-  }
-
-  // event listener for delete element
-  function handleFileDeleteClick(event) {
-console.dir(event);
-    let id_stub = event.target.id.split("-")[0];
-    // mark change
-    document.getElementById(id_stub + "-haschanged").value += "-";
-    document.getElementById(id_stub + "-upload").value = "";  // clear input element
-    showOrHideThumbnail(id_stub, "hide");
-  }
-
-  function showOrHideThumbnail(id_stub, mode) {
-    if ( mode && mode.toLowerCase() != "hide" ) {
-      document.getElementById(id_stub + "-link").classList.remove("display-none"); // show thumbnail
-      document.getElementById(id_stub + "-placeholder").classList.add("display-none"); // hide placeholder 
-      document.getElementById(id_stub + "-info").classList.remove("display-none"); // show info section
-      document.getElementById(id_stub + "-delete").removeAttribute("disabled"); // enable delete link
-    } else {
-      document.getElementById(id_stub + "-link").classList.add("display-none"); // hide thumbnail element
-      document.getElementById(id_stub + "-placeholder").classList.remove("display-none"); // show plaeholder
-      document.getElementById(id_stub + "-info").classList.add("display-none"); // hide info section
-      document.getElementById(id_stub + "-delete").setAttribute("disabled", ""); // disable delete link
-    }
-  }
-
   window.onload = () => {
-    initAllDropdownSelects();
-    initFileInput("titelbild");
+    initAllMultiselects();
   }
 </script>
 {% endblock script %}
diff --git a/the_works/templates/views/werksform.html b/the_works/templates/views/werksform.html
index 65c28d4..343112a 100644
--- a/the_works/templates/views/werksform.html
+++ b/the_works/templates/views/werksform.html
@@ -3,7 +3,7 @@
 {% block title %}Werksformen{% endblock title %}
 
 {% block head %}
-<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
+<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/datatables.css') }}">
 {% endblock head %}
 
 {% block heading %}Werksformen{% endblock heading %}
@@ -57,8 +57,9 @@
 {% endblock content %}
 
 {% block script %}
-<script src="{{ url_for('static', filename='datatables.js') }}"></script>
-<script src="{{ url_for('static', filename='the_works.js') }}"></script>
+<script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
+<script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
+<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
 <script>
   window.onload = function () {
     initDataTable("werksform-table");