diff --git a/static/officeHours.css b/static/officeHours.css
new file mode 100644
index 0000000..3945a59
--- /dev/null
+++ b/static/officeHours.css
@@ -0,0 +1,17 @@
+/* mark required fields */
+input.required ~ label::after, select.required ~ label::after {
+	content: ' *';
+    color: red;
+}
+/* improve indent of help texts below form fields */
+.form-control ~ .form-text {
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+.timetableRightBorder {
+	border-right: 1px dotted;
+}
+td.officeHour {
+	border: 1px solid;
+}
diff --git a/templating/templates/deleteMailForm.html b/templating/templates/deleteMailForm.html
index af4b8ff..378e6e7 100644
--- a/templating/templates/deleteMailForm.html
+++ b/templating/templates/deleteMailForm.html
@@ -1,19 +1,31 @@
 {{define "title"}}Sprechstunde löschen{{end}}
 
 {{define "content"}}
-{{.Error}}
+<div class="col-md-8 offset-md-2">
+  {{ if .Error }}
+  <div class="alert alert-danger">
+    <strong>Fehler:</strong> {{.Error}}
+  </div>
+  {{ end }}
 
-Willst du die Sprechstunde<br>
-  {{printf "%02d" .OfficeHour.Date.Hour}}:{{printf "%02d" .OfficeHour.Date.Minute}} - {{printf "%02d" .OfficeHour.EndDate.Hour}}:{{printf "%02d" .OfficeHour.EndDate.Minute}}<br>
-  {{if eq .OfficeHour.Date.Week 1}}in ungeraden Vorlesungswochen<br>{{end}}{{if eq .OfficeHour.Date.Week 2}}in geraden Vorlesungswochen<br>{{end}}
-  {{.OfficeHour.Course.Name}}<br>
-  {{.OfficeHour.Tutor.Name}}<br>
-  {{.OfficeHour.Room.Name}}<br>
-wirklich löschen? Bitte bestätige dies durch Angabe der Mailadresse, mit der die Sprechstunde angelegt wurde: <br>
-<form method="POST" action="deleteOfficeHour">
-<input type="hidden" name="id" value="{{.OfficeHour.Id}}">
-<label for="email">Email-Adresse</label>:
-  <input name="email" id="email" type="email" size="50" required><br>
-  <input type="submit">
-</form>
+  <p>
+    Willst du die Sprechstunde<br>
+    {{printf "%02d" .OfficeHour.Date.Hour}}:{{printf "%02d" .OfficeHour.Date.Minute}} - {{printf "%02d" .OfficeHour.EndDate.Hour}}:{{printf "%02d" .OfficeHour.EndDate.Minute}}<br>
+    {{if eq .OfficeHour.Date.Week 1}}in ungeraden Vorlesungswochen<br>{{end}}{{if eq .OfficeHour.Date.Week 2}}in geraden Vorlesungswochen<br>{{end}}
+    {{.OfficeHour.Course.Name}}<br>
+    {{.OfficeHour.Tutor.Name}}<br>
+    {{.OfficeHour.Room.Name}}<br>
+    wirklich löschen? Bitte bestätige dies durch Angabe der Mailadresse, mit der die Sprechstunde angelegt wurde:
+  </p>
+  <form method="POST" action="deleteOfficeHour">
+    <input type="hidden" name="id" value="{{.OfficeHour.Id}}">
+    <div class="input-group">
+      <div class="form-floating">
+        <input class="form-control required" name="email" id="email" type="email" size="50" required placeholder="">
+        <label for="email">Email-Adresse</label>
+      </div>
+        <button class="btn btn-outline-primary" type="submit">Bestätigen</button>
+    </div>
+  </form>
+</div>
 {{end}}