diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue
index bccf2f4..54c613b 100644
--- a/ui/src/components/DoorMapEditor.vue
+++ b/ui/src/components/DoorMapEditor.vue
@@ -4,13 +4,18 @@
 
     <div class="tabs is-centered">
       <ul>
-        <li class="is-active"><a>Platzieren</a></li>
-        <li><a>Ordnen</a></li>
-        <li><a>Überprüfen</a></li>
+        <li
+          v-for="(step, index) in steps"
+          :key="'step-' + index"
+          :class="current_step === index ? 'is-active' : ''"
+          @click="current_step = index"
+        >
+          <a>{{ step }}</a>
+        </li>
       </ul>
     </div>
 
-    <section v-if="step === 0">
+    <section v-if="current_step === 0">
       <div class="content">
         <ul>
           <li>Linksklick + Ziehen: Neues Türchen erstellen</li>
@@ -36,7 +41,8 @@ import RectPad from "./rects/RectPad.vue";
   },
 })
 export default class CalendarImage extends Vue {
-  private step = 0;
+  private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"];
+  private current_step = 0;
 }
 </script>