diff --git a/the_works/templates/views/werk.html b/the_works/templates/views/werk.html
index b106097..9f91165 100644
--- a/the_works/templates/views/werk.html
+++ b/the_works/templates/views/werk.html
@@ -5,55 +5,6 @@
 {% block script %}
 <script>
   const SCRIPT_ROOT = {{ request.script_root | tojson }};
-  const textValues = ["Titel", "Untertitel", "Reihennummer", "Erscheinungsdatum", "ISBN_13", "ISBN_10", "ISSN", "Preis", "Klappentext", "Anmerkungen"];
-  const selectValues = ["Werksform", "Verlag", "Reihe"];
-  const blobValues = ["Titelbild"];
-
-  function showCreateModal() {
-    // set modal heading
-    document.getElementById("dialog-heading").textContent = "Werk hinzufügen";
-    // empty text inputs
-    for (const v of textValues) { document.getElementById(`form_${v}`).value = ""; }
-    // empty select inputs
-    for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = ""; }
-    // empty file inputs
-    for (const v of blobValues) {} //document.getElementById(`form_${v}`).value = "";
-    // set form action
-    document.getElementById("form_submit").formAction = "{{ url_for('werk.create') }}";
-    // show modal
-    document.getElementById("werkmodal").showModal();
-  }
-
-  function showUpdateModal() {
-    let id = this.dataset.id;
-    let url = `${SCRIPT_ROOT}/werk/read/${id}`;
-    fetch(url)
-      // throw error if network error occurred, get JSON data otherwise
-      .then((response) => {
-        if (response.ok) {
-          return response.json();
-        }
-        throw new Error ("There was an error while fetching data for the text with ID " + id);
-      })
-      // populate modal with response data and raise modal
-      .then(
-        function (response) {
-          // set modal heading
-          document.getElementById("dialog-heading").textContent = "Werk ansehen / bearbeiten";
-          // populate text inputs
-          for (const v of textValues) { document.getElementById(`form_${v}`).value = response[v]; }
-          // populate select imputs
-          for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = response[v]; }
-          // populate file inputs
-          for (const v of blobValues) {} //document.getElementById(`form_${v}`).value = response[v];
-          // set form action
-          document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/werk/update/${id}`;
-          // show modal
-          document.getElementById("werkmodal").showModal();
-        }
-      )
-      .catch((error) => console.log(error));
-  }
 
   window.onload = function () {
     // initialise DataTable
@@ -64,17 +15,13 @@
     deRole("#werk-table");
 
     // create and append "New"-button to
-    let button = document.createElement("button");
-    button.id = "create-button";
-    button.setAttribute("title", "Werk hinzufügen");
-    button.innerHTML = "Neu …";
-    button.addEventListener("click", showCreateModal, false);
-    document.getElementById("werk-table_wrapper").firstElementChild.firstElementChild.appendChild(button);
-
-    // add event listeners
-    for (const el of document.querySelectorAll('.action-update') ) {
-      el.addEventListener("click", showUpdateModal, false);
-    }
+    let a = document.createElement("a");
+    a.id = "create-button";
+    a.setAttribute("title", "Werk hinzufügen");
+    a.setAttribute("role", "button");
+    a.setAttribute("href", `${SCRIPT_ROOT}/werk/read/0`);
+    a.innerHTML = "Neu …";
+    document.getElementById("werk-table_wrapper").firstElementChild.firstElementChild.appendChild(a);
   }
 </script>
 {% endblock script %}
@@ -104,7 +51,7 @@
       <td title="Reihe">{{ werk["Reihe"] }}</td>
       <td title="Verlag">{{ werk["Verlag"] }}</td>
       <td title="Werksform">{{ werk["Werksform"] }}</td>
-      <td class="action action-update" data-id="{{ werk['id'] }}"><a href="#" title="Werk ansehen/bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
+      <td class="action action-update" data-id="{{ werk['id'] }}"><a href="{{ url_for('werk.read', id=werk['id']) }}" title="Werk ansehen/bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
       <td id="delete-{{ werk['id'] }}" class="action"><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('werk.delete', id=werk['id']) }}" title="Werk löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
     </tr>  
     {% endfor %}
diff --git a/the_works/templates/views/werk_full.html b/the_works/templates/views/werk_full.html
new file mode 100644
index 0000000..b531ab3
--- /dev/null
+++ b/the_works/templates/views/werk_full.html
@@ -0,0 +1,111 @@
+{% extends 'base.html' %}
+{% set create_mode = (werk['ID'] == 0) %}
+{% block title %}
+{% if create_mode %}
+Neues Werk erstellen
+{% else %}
+Werk bearbeiten
+{% endif %}
+{% endblock title %}
+
+{% block script %}
+{% endblock script %}
+
+{% block heading %}
+{% if create_mode %}
+Neues Werk erstellen
+{% else %}
+Werk bearbeiten
+{% endif %}
+{% endblock heading %}
+
+{% block content %}
+<form id="werk_detail_form" method="post" enctype="multipart/form-data" action="#" readonly>
+  <div class="grid">
+    <div>
+      <label>
+        <span class="required">Titel</span>
+        <input id="form_Titel" name="form_Titel" aria-label="Titel" placeholder="Titel" required value="{{ werk['Titel'] }}" />
+      </label>
+      <label>
+        Untertitel
+        <input id="form_Untertitel" name="form_Untertitel" aria-label="Untertitel" placeholder="Untertitel" value="{{ werk['Untertitel'] }}" />
+      </label>
+      <label>
+        <span class="required">Werksform</span>
+        <select id="form_Werksform" name="form_Werksform" aria-label="Werksform" required>
+          <option value="">bitte wählen …</option>
+          {% for wf in werksformen %}<option value="{{ wf.ID }}"{% if wf.ID == werk['Werksform'] %} selected{% endif %}>{{ wf.Werksform }}</option>{% endfor %}
+        </select>
+      </label>
+      <div class="grid">
+        <label>
+          Reihe
+          <select id="form_Reihe" name="form_Reihe" aria-label="Der Text gehört zur Reihe …">
+            <option value="" >keine Reihe</option>
+            {% for r in reihen %}<option value="{{ r.ID }}"{% if r.ID == werk['Reihe'] %} selected{% endif %}>{{ r.Titel }}</option>{% endfor %}
+          </select>
+        </label>
+        <label>
+          Reihennummer
+          <input id="form_Reihennummer" name="form_Reihennummer" aria-label="Reihennummer" placeholder="keine Reihennummer" value="{{ werk['Reihennummer'] }}" />
+        </label>
+      </div>
+      <label>
+        Verlag
+        <select id="form_Verlag" name="form_Verlag" aria-label="Verlag">
+          <option selected value="">kein Verlag</option>
+          {% for v in verlage %}<option value="{{ v.ID }}"{% if v.ID == werk['Verlag'] %} selected{% endif %}>{{ v.Verlag }}</option>{% endfor %}
+        </select>
+      </label>
+    </div>
+    <div>
+      <label>
+        Preis
+        <input id="form_Preis" name="form_Preis" aria-label="Preis" placeholder="kein Preis" value="{{ werk['Preis'] }}" />
+      </label>
+      <label>
+        Erscheinungsdatum
+        <input type="date" id="form_Erscheinungsdatum" name="form_Erscheinungsdatum" aria-label="Erscheinungsdatum" placeholder="kein Datum" value="{{ werk['Datum'] }}" />
+      </label>
+      <label>
+        ISBN-13
+        <input id="form_ISBN_13" name="form_ISBN_13" aria-label="ISBN-13" placeholder="keine ISBN-13" value="{{ werk['ISBN_13'] }}" />
+      </label>
+      <label>
+        ISBN-10
+        <input id="form_ISBN_10" name="form_ISBN_10" aria-label="ISBN-10" placeholder="keine ISBN-10" value="{{ werk['ISBN_10'] }}" />
+      </label>
+      <label>
+        ISSN
+        <input id="form_ISSN" name="form_ISSN" aria-label="ISSN" placeholder="keine ISSN" value="{{ werk['ISSN'] }}" />
+      </label>
+    </div>
+  </div>
+  <div class="grid">
+    <label>
+      Klappentext
+      <textarea id="form_Klappentext" name="form_Klappentext" aria-label="Klappentext" placeholder="kein Klappentext" rows="10">{{ werk['Klappentext'] }}</textarea>
+    </label>
+    <label>
+      Anmerkungen
+      <textarea id="form_Anmerkungen" name="form_Anmerkungen" aria-label="Anmerkungen" placeholder="keine Anmerkungen" rows="10">
+          {{ werk['Anmerkungen'] }}</textarea>
+    </label>
+  </div>    
+  <div>
+    <label>
+      Titelbild
+      <input type="file" id="form_Titelbild" name="form_Titelbild" aria-label="Titelbild" placeholder="kein Titelbild" />
+    </label>
+  </div>
+  <footer class="grid">
+    <button id="form_submit" type="submit" formmethod="post" formaction="{% if create_mode %}{{ url_for('werk.create') }}{% else %}{{ url_for('werk.update', id=werk['ID']) }}{% endif %}">
+      {% if create_mode %}Eintrag speichern{% else %}Änderungen speichern{% endif %}
+    </button>
+    <button type="reset" title="Alle Felder auf den vorherigen Zustand zurücksetzen">Alles zurücksetzen</button>
+    <a role="button" class="contrast" href="{{ url_for('werk.all') }}">Abbrechen (nicht speichern)</a>
+  </footer>
+</form>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/the_works/views/werk.py b/the_works/views/werk.py
index e503b0a..5e13bd8 100644
--- a/the_works/views/werk.py
+++ b/the_works/views/werk.py
@@ -24,27 +24,33 @@ def all():
       "Reihe": row.Reihe.Titel if row.Reihe else "",
       "r_id": row.Werk.Reihe or ""
     })
-  return render_template("views/werk.html", werke=werke, reihen=db.session.scalars(select(Reihe)), verlage=db.session.scalars(select(Verlag)), werksformen=db.session.scalars(select(Werksform)))
+  return render_template("views/werk.html", werke=werke)
 
 @bp.route("/werk/read/<int:id>")
 def read(id):
-  werk = db.session.get(Werk, id)
-  return {
-    "Titel": werk.Titel,
-    "Untertitel": werk.Untertitel or "",
-    "Werksform": werk.Werksform or "",
-    "Verlag": werk.Verlag or "",
-    "Reihe": werk.Reihe or "",
-    "Reihennummer": werk.Reihennummer or "",
-    "Erscheinungsdatum": werk.Erscheinungsdatum or "",
-    "ISBN_13": werk.ISBN_13 or "",
-    "ISBN_10": werk.ISBN_10 or "",
-    "ISSN": werk.ISSN or "",
-    "Preis": werk.Preis or "",
+  # id of zero -> create new entry
+  if id == 0:
+    return render_template("views/werk_full.html", werk={"ID": 0}, reihen=db.session.scalars(select(Reihe)), verlage=db.session.scalars(select(Verlag)), werksformen=db.session.scalars(select(Werksform)))
+  # all other ids -> update existing entry 
+  w = db.session.get(Werk, id)
+  werk = {
+    "ID": w.ID,
+    "Titel": w.Titel,
+    "Untertitel": w.Untertitel or "",
+    "Werksform": w.Werksform or "",
+    "Verlag": w.Verlag or "",
+    "Reihe": w.Reihe or "",
+    "Reihennummer": w.Reihennummer or "",
+    "Erscheinungsdatum": w.Erscheinungsdatum or "",
+    "ISBN_13": w.ISBN_13 or "",
+    "ISBN_10": w.ISBN_10 or "",
+    "ISSN": w.ISSN or "",
+    "Preis": w.Preis or "",
     "Titelbild": "",
-    "Klappentext": werk.Klappentext or "",
-    "Anmerkungen": werk.Anmerkungen or ""
+    "Klappentext": w.Klappentext or "",
+    "Anmerkungen": w.Anmerkungen or ""
   }
+  return render_template("views/werk_full.html", werk=werk, reihen=db.session.scalars(select(Reihe)), verlage=db.session.scalars(select(Verlag)), werksformen=db.session.scalars(select(Werksform)))
 
 @bp.route("/werk/create", methods=["POST"])
 def create():