diff --git a/ui/src/App.vue b/ui/src/App.vue
index 8120a29..b1559ee 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -8,6 +8,7 @@
     </div>
 
     <div class="section">
+      <ConfigView />
       <DoorMapEditor />
       <AdminButton />
     </div>
@@ -18,10 +19,12 @@
 import { Options, Vue } from "vue-class-component";
 
 import AdminButton from "./components/AdminButton.vue";
+import ConfigView from "./components/ConfigView.vue";
 import DoorMapEditor from "./components/DoorMapEditor.vue";
 
 @Options({
   components: {
+    ConfigView,
     DoorMapEditor,
     AdminButton,
   },
diff --git a/ui/src/components/ConfigView.vue b/ui/src/components/ConfigView.vue
new file mode 100644
index 0000000..cd5f266
--- /dev/null
+++ b/ui/src/components/ConfigView.vue
@@ -0,0 +1,93 @@
+<template>
+  <BulmaDrawer header="Konfiguration">
+    <div class="panel-block">
+      <div class="columns" style="width: 100%">
+        <div class="column content">
+          <h4>Rätsel</h4>
+          <dl>
+            <dt>Lösung</dt>
+            <dd>ABCDEFGHIJKLMNOPQRSTUVWX</dd>
+
+            <dt>Reihenfolge</dt>
+            <dd>AGFCINBEWLKQMXDURPOSJVHT</dd>
+
+            <dt>Offene Türchen</dt>
+            <dd>10</dd>
+
+            <dt>Nächstes Türchen in</dt>
+            <dd>dd-hh-mm-ss</dd>
+
+            <dt>Erstes Türchen</dt>
+            <dd>01.12.2023</dd>
+
+            <dt>Letztes Türchen</dt>
+            <dd>24.12.2023</dd>
+
+            <dt>Rätsel schließt</dt>
+            <dd>01.04.2024</dd>
+
+            <dt>Zufalls-Seed</dt>
+            <dd>""</dd>
+          </dl>
+        </div>
+        <div class="column content">
+          <h4>Kalender</h4>
+          <dl>
+            <dt>Definition</dt>
+            <dd>files/default.toml</dd>
+
+            <dt>Hintergrundbild</dt>
+            <dd>files/adventskalender.jpg</dd>
+
+            <dt>Türchen</dt>
+            <dd>0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16</dd>
+          </dl>
+
+          <h4>Bilder</h4>
+          <dl>
+            <dt>Größe</dt>
+            <dd>500 px</dd>
+
+            <dt>Rand</dt>
+            <dd>30 px</dd>
+
+            <dt>Schriftarten</dt>
+            <dd>files/Lena.ttf (Größe 50)</dd>
+            <dd>files/foobar.ttf (Größe 33)</dd>
+          </dl>
+        </div>
+        <div class="column content">
+          <h4>WebDAV</h4>
+          <dl>
+            <dt>URL</dt>
+            <dd>https://example.com/remote.php/webdav/advent22</dd>
+
+            <dt>Login</dt>
+            <dd>*** / ***</dd>
+
+            <dt>Cache-Dauer</dt>
+            <dd>30 s</dd>
+
+            <dt>Konfigurationsdatei</dt>
+            <dd>config.toml</dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+  </BulmaDrawer>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+import BulmaDrawer from "./bulma/Drawer.vue";
+
+@Options({
+  components: {
+    BulmaDrawer,
+  },
+})
+export default class extends Vue {}
+</script>
+
+<style scoped></style>