diff --git a/ui/src/components/CalendarAssistant.vue b/ui/src/components/CalendarAssistant.vue
index 456299f..2a35996 100644
--- a/ui/src/components/CalendarAssistant.vue
+++ b/ui/src/components/CalendarAssistant.vue
@@ -1,37 +1,39 @@
 <template>
   <MultiModal ref="multi_modal" />
 
-  <BulmaDrawer header="Kalender-Assistent">
+  <BulmaDrawer
+    header="Kalender-Assistent"
+    :ready="is_loaded"
+    @open="on_open"
+    refreshable
+  >
     <div class="card-content">
       <div class="content">
         <h4>Alle Türchen</h4>
         <div class="tags are-medium">
-          <span
-            v-for="index in 24"
-            :key="index"
+          <BulmaButton
+            v-for="(day_part, index) in day_parts"
+            :key="`btn-${index}`"
             class="tag button is-primary"
-            @click.left="door_click(index - 1)"
-          >
-            <span class="icon">
-              <font-awesome-icon icon="fa-solid fa-door-open" />
-            </span>
-            <span>{{ index }}</span>
-          </span>
+            icon="fa-solid fa-door-open"
+            :text="`${day_part.day}`"
+            @click.left="door_click(day_part.day)"
+          />
         </div>
 
         <h4>Buchstaben-Zuordnung</h4>
         <div class="tags are-medium">
-          <span class="tag is-info">1: A</span>
-          <span class="tag is-info">2: G</span>
-          <span class="tag is-info">3: F</span>
-          <span class="tag is-info">4: C</span>
-          <span class="tag is-info">5: I</span>
-          <span class="tag is-info">6: N</span>
-          <span class="tag is-info">7: B</span>
-          <span class="tag is-info">…</span>
+          <span
+            v-for="(day_part, index) in day_parts"
+            :key="`part-${index}`"
+            class="tag is-info"
+          >
+            {{ day_part.day }}: {{ day_part.part.split("").join(", ") }}
+          </span>
         </div>
 
         <h4>Bilder-Zuordnung</h4>
+        <!-- TODO -->
         <div class="tags are-medium">
           <span class="tag is-primary">1: images_auto/1.jpg</span>
           <span class="tag is-primary">2: images_manual/1.jpg</span>
@@ -48,6 +50,7 @@
 </template>
 
 <script lang="ts">
+import { DayPartModel } from "@/lib/api";
 import { Options, Vue } from "vue-class-component";
 
 import BulmaButton from "./bulma/Button.vue";
@@ -62,10 +65,24 @@ import MultiModal from "./calendar/MultiModal.vue";
   },
 })
 export default class extends Vue {
+  public is_loaded = true;
+  public day_parts: DayPartModel[] = [];
+
   declare $refs: {
     multi_modal: MultiModal;
   };
 
+  public on_open(): void {
+    this.is_loaded = false;
+
+    Promise.all([this.$advent22.api_get<DayPartModel[]>("admin/day_parts")])
+      .then(([day_parts]) => {
+        this.day_parts = day_parts;
+        this.is_loaded = true;
+      })
+      .catch(console.log);
+  }
+
   public door_click(day: number) {
     this.$refs.multi_modal.show_progress();