diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index 00df77bb..eec08156 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/client/src/components/MainNavigationBar.vue
@@ -162,7 +162,7 @@ const profileDropdownData = [
               Shop
             </router-link>
             <router-link
-              to="/mediacenter/overview"
+              to="/mediacenter/versicherungsvermittlerin-media/overview"
               class="nav-item"
               :class="{ 'nav-item--active': isInRoutePath(['/mediacenter']) }"
             >
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 72a061a6..5572547a 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -31,15 +31,16 @@ const router = createRouter({
       children: [
         {
           path: 'overview',
-          component: () => import('@/views/MediaMainView.vue'),
+          component: () => import('@/views/MediaCenterMainView.vue'),
+        },
+        {
+          path: 'handlungsfelder/:mediaCategorySlug',
+          props: true,
+          component: () => import('@/views/MediaCategoryDetailView.vue'),
         },
         {
           path: 'handlungsfelder',
-          component: () => import('@/views/HandlungsfelderOverview.vue'),
-        },
-        {
-          path: 'handlungsfeld',
-          component: () => import('@/views/Handlungsfeld.vue'),
+          component: () => import('@/views/MediaCenterCategoryOverview.vue'),
         },
         {
           path: 'handlungsfeldlist',
diff --git a/client/src/types.ts b/client/src/types.ts
index 4e320be2..61143553 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -168,8 +168,15 @@ export interface MediaContentCollection {
 
 export interface MediaCategoryPage extends CourseWagtailPage {
   type: 'media_library.MediaCategoryPage';
+  overview_icon: string;
   introduction_text: string;
-  description: string;
+  description_title: string;
+  description_text: string;
+  items: {
+    type: 'item';
+    value: string;
+    id: string;
+  }
   course_category: CourseCategory;
   body: MediaContentCollection[];
 }
diff --git a/client/src/views/HandlungsfelderOverview.vue b/client/src/views/HandlungsfelderOverview.vue
deleted file mode 100644
index fdf8fc3b..00000000
--- a/client/src/views/HandlungsfelderOverview.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import * as log from 'loglevel';
-import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import {reactive, ref, watch} from "vue";
-import {useMediaCenterStore} from "@/stores/mediaCenter";
-
-log.debug('HandlungsfelderOverview created');
-
-const fields = [
-  {
-    name: 'Fahrzeug',
-    icon: 'icon-hf-fahrzeug'
-  },
-  {
-    name: 'Reisen',
-    icon: 'icon-hf-reisen'
-  },
-  {
-    name: 'Einkommenssicherung',
-    icon: 'icon-hf-einkommenssicherung'
-  },
-  {
-    name: 'Gesundheit',
-    icon: 'icon-hf-fahrzeug'
-  },
-  {
-    name: 'Haushalt',
-    icon: 'icon-hf-reisen'
-  },
-  {
-    name: 'Sparen',
-    icon: 'icon-hf-einkommenssicherung'
-  },
-  {
-    name: 'Pensionierung',
-    icon: 'icon-hf-fahrzeug'
-  },
-  {
-    name: 'KMU',
-    icon: 'icon-hf-reisen'
-  },
-  {
-    name: 'Wohneigentum',
-    icon: 'icon-hf-einkommenssicherung'
-  },
-  {
-    name: 'Rechtsstreitigkeiten',
-    icon: 'icon-hf-fahrzeug'
-  },
-  {
-    name: 'Erben / Vererben',
-    icon: 'icon-hf-reisen'
-  },
-  {
-    name: 'Selbstständigkeit',
-    icon: 'icon-hf-einkommenssicherung'
-  },
-]
-
-const mediaStore = useMediaCenterStore();
-const dropdownSelected = ref(mediaStore.selectedLearningPath);
-
-watch(dropdownSelected, (newValue) => mediaStore.$patch({
-    selectedLearningPath: newValue
-  })
-)
-
-</script>
-
-<template>
-  <div class="mx-auto max-w-5xl">
-    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
-      <h1>Handlungsfelder</h1>
-      <ItDropdownSelect
-        v-model="dropdownSelected"
-        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>
-    </div>
-    <div>
-      <ul class="grid gap-5 grid-cols-1 lg:grid-cols-4">
-        <li
-          class="bg-white p-4 w-58"
-          v-for="field in fields"
-          :key="field.name"
-        >
-          <router-link to="/mediacenter/handlungsfeld">
-          <img
-            class="m-auto"
-            :src="`/static/icons/demo/${field.icon}.svg`"/>
-          <h3 class="text-base text-center">{{field.name}}</h3>
-            </router-link>
-        </li>
-      </ul>
-    </div>
-
-  </div>
-</template>
-
-<style scoped>
-
-.it-icon-hf > * {
-  @apply m-auto;
-}
-
-</style>
diff --git a/client/src/views/Handlungsfeld.vue b/client/src/views/MediaCategoryDetailView.vue
similarity index 65%
rename from client/src/views/Handlungsfeld.vue
rename to client/src/views/MediaCategoryDetailView.vue
index 52eacfe3..5c6afd05 100644
--- a/client/src/views/Handlungsfeld.vue
+++ b/client/src/views/MediaCategoryDetailView.vue
@@ -1,22 +1,19 @@
 <script setup lang="ts">
-import * as log from 'loglevel';
-import LinkCard from "@/components/mediacenter/LinkCard.vue";
-import HandlungsfeldLayout from "@/views/HandlungsfeldLayout.vue";
-import MediaLink from "@/components/mediacenter/MediaLink.vue";
-
-log.debug('Handlungsfeld created');
+import * as log from 'loglevel'
+import LinkCard from '@/components/mediacenter/LinkCard.vue'
+import HandlungsfeldLayout from '@/views/HandlungsfeldLayout.vue'
+import MediaLink from '@/components/mediacenter/MediaLink.vue'
+import { useMediaCenterStore } from '@/stores/mediaCenter'
+import { computed } from 'vue'
 
 const field = {
   title: 'Fahrzeug',
-  description: 'Das Auto ist für viele der grösste Stolz! Es birgt aber auch ein grosses Gefahrenpotenzial.  Dabei geht es bei den heutigen Fahrzeugpreisen und Reparaturkosten rasch um namhafte Summen, die der Fahrzeugbesitzer und die Fahrzeugbesitzerin in einem grösseren Schadenfall oft nur schwer selbst aufbringen kann.',
+  description:
+    'Das Auto ist für viele der grösste Stolz! Es birgt aber auch ein grosses Gefahrenpotenzial.  Dabei geht es bei den heutigen Fahrzeugpreisen und Reparaturkosten rasch um namhafte Summen, die der Fahrzeugbesitzer und die Fahrzeugbesitzerin in einem grösseren Schadenfall oft nur schwer selbst aufbringen kann.',
   icon: '/static/icons/demo/icon-hf-fahrzeug-big.svg',
   summary: {
     text: 'In diesem berufstypischem Handlungsfeld lernst du alles rund um Motorfahrzeugversicherungen, wie man sein Auto optimal schützen kann, wie du vorgehst bei einem Fahrzeugwechsel, welche Aspekte du bei einer Offerte beachten musst und wie du dem Kunden die Lösung präsentierst.',
-    items: [
-      'Motorfahrzeughaftpflichtversicherung',
-      'Motorfahrzeugkaskoversicherung',
-      'Insassenunfallversicherung'
-    ]
+    items: ['Motorfahrzeughaftpflichtversicherung', 'Motorfahrzeugkaskoversicherung', 'Insassenunfallversicherung'],
   },
   items: [
     {
@@ -30,7 +27,7 @@ const field = {
           iconUrl: '/static/icons/demo/icon-hf-book.png',
           linkText: 'PDF anzeigen',
           link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
-          openWindow: true
+          openWindow: true,
         },
         {
           title: 'Die Motorfahrzeughaftpflicht',
@@ -38,7 +35,7 @@ const field = {
           description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
           linkText: 'PDF anzeigen',
           link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
-          openWindow: true
+          openWindow: true,
         },
         {
           title: 'Die Motorfahrzeughaftpflicht',
@@ -46,7 +43,7 @@ const field = {
           description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
           linkText: 'PDF anzeigen',
           link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
-          openWindow: true
+          openWindow: true,
         },
         {
           title: 'Die Motorfahrzeughaftpflicht',
@@ -54,7 +51,7 @@ const field = {
           description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
           linkText: 'PDF anzeigen',
           link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
-          openWindow: true
+          openWindow: true,
         },
         {
           title: 'Die Motorfahrzeughaftpflicht',
@@ -62,9 +59,9 @@ const field = {
           description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
           linkText: 'PDF anzeigen',
           link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
-          openWindow: true
+          openWindow: true,
         },
-      ]
+      ],
     },
     {
       title: 'Links',
@@ -77,7 +74,7 @@ const field = {
           description: '',
           linkText: 'Link öffnen',
           link: 'https://www.nbi-ngf.ch/h',
-          openWindow: true
+          openWindow: true,
         },
         {
           title: 'Adressen der Strassenverkehrsämter',
@@ -85,9 +82,9 @@ const field = {
           description: '',
           linkText: 'Link öffnen',
           link: 'https://asa.ch/strassenverkehrsaemter/adressen/',
-          openWindow: true
+          openWindow: true,
         },
-      ]
+      ],
     },
     {
       title: 'Verankerung im Lernpfad',
@@ -100,7 +97,7 @@ const field = {
           description: '',
           linkText: 'Lerineinheit anzeigen',
           link: 'http://localhost:8000/learn/versicherungsvermittlerin/versicherungsvermittlerin-circle-analyse',
-          openWindow: false
+          openWindow: false,
         },
         {
           title: 'Circle: Einstieg – Lernsequenz: Anwenden',
@@ -108,7 +105,7 @@ const field = {
           description: '',
           linkText: 'Lerineinheit anzeigen',
           link: 'http://localhost:8000/learn/versicherungsvermittlerin/versicherungsvermittlerin-circle-analyse',
-          openWindow: false
+          openWindow: false,
         },
         {
           title: 'Circle: Einstieg – Lernsequenz: Anwenden',
@@ -116,7 +113,7 @@ const field = {
           description: '',
           linkText: 'Lerineinheit anzeigen',
           link: 'http://localhost:8000/learn/versicherungsvermittlerin/versicherungsvermittlerin-circle-analyse',
-          openWindow: false
+          openWindow: false,
         },
         {
           title: 'Circle: Einstieg – Lernsequenz: Anwenden',
@@ -124,11 +121,11 @@ const field = {
           description: '',
           linkText: 'Lerineinheit anzeigen',
           link: 'http://localhost:8000/learn/versicherungsvermittlerin/versicherungsvermittlerin-circle-analyse',
-          openWindow: false
+          openWindow: false,
         },
-      ]
+      ],
     },
-   {
+    {
       title: 'Querverweise',
       type: 'realtiveLinks',
       moreLink: '',
@@ -139,7 +136,7 @@ const field = {
           description: 'Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»',
           linkText: 'Handlungsfeldanzeigen',
           link: 'http://localhost:8000/mediacenter/handlungsfeld',
-          openWindow: false
+          openWindow: false,
         },
         {
           title: 'Rechtsstreigkeiten',
@@ -147,18 +144,30 @@ const field = {
           description: 'Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»',
           linkText: 'Handlungsfeldanzeigen',
           link: 'http://localhost:8000/mediacenter/handlungsfeld',
-          openWindow: false
+          openWindow: false,
         },
-      ]
+      ],
     },
-  ]
+  ],
 }
 
-const maxCardItems = 4;
-const maxListItems = 6;
+const props = defineProps<{
+  mediaCategorySlug: string
+}>()
+
+log.debug('MediaCategoryDetailView created', props.mediaCategorySlug)
+
+const mediaStore = useMediaCenterStore()
+
+const mediaCategory = computed(() => {
+  return mediaStore.mediaCenterPage?.children.find((category) => category.slug === props.mediaCategorySlug)
+})
+
+const maxCardItems = 4
+const maxListItems = 6
 
 const displayAsCard = (itemType: string): boolean => {
-  return itemType === 'learnmedia' || itemType === 'realtiveLinks';
+  return itemType === 'learnmedia' || itemType === 'realtiveLinks'
 }
 
 const hasMoreItems = (items: object[], maxItems: number): boolean => {
@@ -166,81 +175,75 @@ const hasMoreItems = (items: object[], maxItems: number): boolean => {
 }
 
 const getMaxDisplayItems = (items: object[], maxItems: number) => {
-  return items.slice(0, maxItems);
+  return items.slice(0, maxItems)
 }
 
 const getMaxDisplayItemsForType = (itemType: string, items: object[]) => {
-  return displayAsCard(itemType) ? getMaxDisplayItems(items, maxCardItems) : getMaxDisplayItems(items, maxListItems);
+  return displayAsCard(itemType) ? getMaxDisplayItems(items, maxCardItems) : getMaxDisplayItems(items, maxListItems)
 }
 
 const hasMoreItemsForType = (itemType: string, items: object[]) => {
-  const maxItems = displayAsCard(itemType) ? maxCardItems : maxListItems;
-  return hasMoreItems(items, maxItems);
+  const maxItems = displayAsCard(itemType) ? maxCardItems : maxListItems
+  return hasMoreItems(items, maxItems)
 }
-
-
 </script>
 
 <template>
-  <Teleport to="body">
+  <Teleport to="body" v-if="mediaStore.mediaCenterPage && mediaCategory">
     <HandlungsfeldLayout>
       <template #header>
         <div class="flex justify-between">
           <div class="w-5/12">
             <h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
-            <h1 class="mb-4 lg:mb-8">{{field.title}}</h1>
-            <p>{{field.description}}</p>
+            <h1 class="mb-4 lg:mb-8">{{ mediaCategory.title }}</h1>
+            <p>{{ mediaCategory.introduction_text }}</p>
           </div>
-          <img
-            class="w-5/12"
-            :src="field.icon"/>
+          <img class="w-5/12" :src="field.icon" />
         </div>
       </template>
       <template #body>
         <section class="mb-20">
-          <h2 class="mb-4">Das erwartet dich in diesem Handlungsfeld</h2>
-          <p class="mb-4 lg:w-2/3">{{field.summary.text}}</p>
+          <h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
+          <p class="mb-4 lg:w-2/3">{{ mediaCategory.description_text }}</p>
           <ul>
-            <li
-              v-for="item in field.summary.items"
-              :key="item"
-              class="mb-2 h-10 leading-10 flex items-center">
+            <li v-for="item in mediaCategory.items" :key="item" class="mb-2 h-10 leading-10 flex items-center">
               <span class="text-sky-500 bg-[url('/static/icons/icon-check.svg')] bg-no-repeat h-10 w-10 mr-2"></span>
-              {{item}}
+              {{ item.value }}
             </li>
           </ul>
         </section>
-        <section
-          class="mb-20"
-          v-for="item in field.items" :key="item.title">
-          <h2 class="mb-4">{{item.title}}</h2>
-          <ul :class="{
-            'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(item.type),
-            'border-t': !displayAsCard(item.type),
-            'mb-6': hasMoreItemsForType(item.type, item.items)
-          }">
+        <section class="mb-20" v-for="item in field.items" :key="item.title">
+          <h2 class="mb-4">{{ item.title }}</h2>
+          <ul
+            :class="{
+              'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(item.type),
+              'border-t': !displayAsCard(item.type),
+              'mb-6': hasMoreItemsForType(item.type, item.items),
+            }"
+          >
             <li v-for="subItem in getMaxDisplayItemsForType(item.type, item.items)" :key="subItem.link">
-                <LinkCard
-                  v-if="displayAsCard(item.type)"
-                  :title="subItem.title"
-                  :icon="subItem.iconUrl"
-                  :description="subItem.description"
-                  :url="subItem.link"
-                  :link-text="subItem.linkText"
-                  :open-window="subItem.openWindow"
-                />
-                <div v-else class="flex items-center justify-between border-b py-4">
-                  <h4 class="text-bold">{{subItem.title}}</h4>
-                  <media-link
-                    :blank="subItem.openWindow"
-                    :to="subItem.link"
-                    class="link">{{subItem.linkText}}</media-link>
-                </div>
+              <LinkCard
+                v-if="displayAsCard(item.type)"
+                :title="subItem.title"
+                :icon="subItem.iconUrl"
+                :description="subItem.description"
+                :url="subItem.link"
+                :link-text="subItem.linkText"
+                :open-window="subItem.openWindow"
+              />
+              <div v-else class="flex items-center justify-between border-b py-4">
+                <h4 class="text-bold">{{ subItem.title }}</h4>
+                <media-link :blank="subItem.openWindow" :to="subItem.link" class="link">{{
+                  subItem.linkText
+                }}</media-link>
+              </div>
             </li>
           </ul>
           <router-link
             v-if="hasMoreItemsForType(item.type, item.items)"
-            to="/mediacenter/handlungsfeldlist" class="flex items-center">
+            to="/mediacenter/handlungsfeldlist"
+            class="flex items-center"
+          >
             <span>Alle anschauen</span>
             <it-icon-arrow-right></it-icon-arrow-right>
           </router-link>
@@ -252,7 +255,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
 
 <style scoped>
 .it-icon-hf {
-  color: blue
+  color: blue;
 }
 .it-icon-hf > * {
   @apply m-auto;
diff --git a/client/src/views/MediaCenterCategoryOverview.vue b/client/src/views/MediaCenterCategoryOverview.vue
new file mode 100644
index 00000000..b47cc0ed
--- /dev/null
+++ b/client/src/views/MediaCenterCategoryOverview.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import * as log from 'loglevel'
+import { ref, watch } from 'vue'
+import { useMediaCenterStore } from '@/stores/mediaCenter'
+
+log.debug('HandlungsfelderOverview created')
+
+const fields = [
+  {
+    name: 'Fahrzeug',
+    icon: 'icon-hf-fahrzeug',
+  },
+  {
+    name: 'Reisen',
+    icon: 'icon-hf-reisen',
+  },
+  {
+    name: 'Einkommenssicherung',
+    icon: 'icon-hf-einkommenssicherung',
+  },
+  {
+    name: 'Gesundheit',
+    icon: 'icon-hf-fahrzeug',
+  },
+  {
+    name: 'Haushalt',
+    icon: 'icon-hf-reisen',
+  },
+  {
+    name: 'Sparen',
+    icon: 'icon-hf-einkommenssicherung',
+  },
+  {
+    name: 'Pensionierung',
+    icon: 'icon-hf-fahrzeug',
+  },
+  {
+    name: 'KMU',
+    icon: 'icon-hf-reisen',
+  },
+  {
+    name: 'Wohneigentum',
+    icon: 'icon-hf-einkommenssicherung',
+  },
+  {
+    name: 'Rechtsstreitigkeiten',
+    icon: 'icon-hf-fahrzeug',
+  },
+  {
+    name: 'Erben / Vererben',
+    icon: 'icon-hf-reisen',
+  },
+  {
+    name: 'Selbstständigkeit',
+    icon: 'icon-hf-einkommenssicherung',
+  },
+]
+
+const mediaStore = useMediaCenterStore()
+const dropdownSelected = ref(mediaStore.selectedLearningPath)
+
+watch(dropdownSelected, (newValue) =>
+  mediaStore.$patch({
+    selectedLearningPath: newValue,
+  })
+)
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl">
+    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
+      <h1>Handlungsfelder</h1>
+      <!--      <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
+    </div>
+    <div v-if="mediaStore.mediaCenterPage">
+      <ul class="grid gap-5 grid-cols-1 lg:grid-cols-4">
+        <li class="bg-white p-4" v-for="cat in mediaStore.mediaCenterPage.children" :key="cat.id">
+          <router-link :to="`/mediacenter/${mediaStore.mediaCenterPage.slug}/handlungsfelder/${cat.slug}`">
+            <img class="m-auto" :src="`/static/icons/demo/${cat.overview_icon}.svg`" />
+            <h3 class="text-base text-center">{{ cat.title }}</h3>
+          </router-link>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.it-icon-hf > * {
+  @apply m-auto;
+}
+</style>
diff --git a/client/src/views/MediaCenterMainView.vue b/client/src/views/MediaCenterMainView.vue
new file mode 100644
index 00000000..74714eb7
--- /dev/null
+++ b/client/src/views/MediaCenterMainView.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import * as log from 'loglevel'
+import OverviewCard from '@/components/mediacenter/OverviewCard.vue'
+import { ref, watch } from 'vue'
+import { useMediaCenterStore } from '@/stores/mediaCenter'
+
+log.debug('MediaMainView created')
+
+const mediaStore = useMediaCenterStore()
+const dropdownSelected = ref(mediaStore.selectedLearningPath)
+
+watch(dropdownSelected, (newValue) =>
+  mediaStore.$patch({
+    selectedLearningPath: newValue,
+  })
+)
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl">
+    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
+      <h1>Mediathek</h1>
+      <!--      <ItDropdownSelect-->
+      <!--        v-model="dropdownSelected"-->
+      <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
+    </div>
+    <OverviewCard
+      v-if="mediaStore.mediaCenterPage"
+      title="Handlungsfelder"
+      call2-action="Anschauen"
+      :link="`/mediacenter/${mediaStore.mediaCenterPage.slug}/handlungsfelder`"
+      description="Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen."
+      icon="handlungsfelder-overview"
+      class="mb-6"
+    >
+    </OverviewCard>
+    <OverviewCard
+      v-if="mediaStore.mediaCenterPage"
+      title="Lernmedien"
+      call2-action="Anschauen"
+      :link="`/mediacenter/${mediaStore.mediaCenterPage.slug}/lernmedien`"
+      description="Finde eine vollständige Liste der Bücher und anderen Medien, auf die im Kurs verwiesen wird."
+      icon="lernmedien-overview"
+      class="mb-6"
+    >
+    </OverviewCard>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/client/src/views/MediaMainView.vue b/client/src/views/MediaMainView.vue
deleted file mode 100644
index bd356203..00000000
--- a/client/src/views/MediaMainView.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import * as log from 'loglevel';
-import OverviewCard from '@/components/mediacenter/OverviewCard.vue';
-import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import {watch, ref} from "vue";
-import {useMediaCenterStore} from "@/stores/mediaCenter";
-
-log.debug('MediaMainView created');
-
-const mediaStore = useMediaCenterStore();
-const dropdownSelected = ref(mediaStore.selectedLearningPath);
-
-watch(dropdownSelected, (newValue) => mediaStore.$patch({
-    selectedLearningPath: newValue
-  })
-)
-
-</script>
-
-<template>
-  <div class="mx-auto max-w-5xl">
-    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
-      <h1>Mediathek</h1>
-      <ItDropdownSelect
-        v-model="dropdownSelected"
-        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>
-    </div>
-    <OverviewCard
-      title="Handlungsfelder"
-      call2-action="Anschauen"
-      link="/mediacenter/handlungsfelder"
-      description="Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen."
-      icon="handlungsfelder-overview"
-      class="mb-6">
-    </OverviewCard>
-    <OverviewCard
-      title="Lernmedien"
-      call2-action="Anschauen"
-      link="/mediacenter/lernmedien"
-      description="Finde eine vollständige Liste der Bücher und anderen Medien, auf die im Kurs verwiesen wird."
-      icon="lernmedien-overview"
-      class="mb-6">
-    </OverviewCard>
-  </div>
-</template>
-
-<style scoped>
-</style>
diff --git a/server/vbv_lernwelt/media_library/create_default_media_library.py b/server/vbv_lernwelt/media_library/create_default_media_library.py
index 618b7022..745cfc93 100644
--- a/server/vbv_lernwelt/media_library/create_default_media_library.py
+++ b/server/vbv_lernwelt/media_library/create_default_media_library.py
@@ -15,13 +15,23 @@ def create_default_media_library():
         parent=course_page,
     )
 
-    for cat in course.coursecategory_set.all():
+    icons = ['icon-hf-fahrzeug', 'icon-hf-reisen', 'icon-hf-einkommenssicherung', ]
+    for idx, cat in enumerate(course.coursecategory_set.all()):
+        overview_icon = icons[(idx + 2) % len(icons)]
         introduction_text = '''
-            Das Auto ist für viele der grösste Stolz! Es birgt aber auch ein grosses Gefahrenpotenzial.
-            Dabei geht es bei den heutigen Fahrzeugpreisen und Reparaturkosten rasch um namhafte Summen,
-            die der Fahrzeugbesitzer und die Fahrzeugbesitzerin in einem grösseren Schadenfall oft nur schwer selbst aufbringen kann.
-        '''.strip()
-        description = 'Supi'
+Das Auto ist für viele der grösste Stolz! Es birgt aber auch ein grosses Gefahrenpotenzial.
+Dabei geht es bei den heutigen Fahrzeugpreisen und Reparaturkosten rasch um namhafte Summen,
+die der Fahrzeugbesitzer und die Fahrzeugbesitzerin in einem grösseren Schadenfall oft nur schwer selbst aufbringen kann.'''.strip()
+        description_title = 'Das erwartet dich in diesem Handlungsfeld'
+        description_text = '''
+In diesem berufstypischem Handlungsfeld lernst du alles rund um Motorfahrzeugversicherungen,
+wie man sein Auto optimal schützen kann, wie du vorgehst bei einem Fahrzeugwechsel,
+welche Aspekte du bei einer Offerte beachten musst und wie du dem Kunden die Lösung präsentierst.'''.strip()
+        items = [
+            ('item', 'Motorfahrzeughaftpflichtversicherung'),
+            ('item', 'Motorfahrzeugkaskoversicherung'),
+            ('item', 'Insassenunfallversicherung'),
+        ]
         body_data = json.dumps([
             create_document_collection(),
             create_link_collection(
@@ -32,10 +42,13 @@ def create_default_media_library():
             )
         ])
         media_category = MediaCategoryPageFactory(
+            overview_icon=overview_icon,
             title=cat.name,
             course_category=cat,
             parent=media_lib_page,
             introduction_text=introduction_text,
-            description=description,
+            description_title=description_title,
+            description_text=description_text,
+            items=items,
             body=body_data,
         )
diff --git a/server/vbv_lernwelt/media_library/migrations/0001_initial.py b/server/vbv_lernwelt/media_library/migrations/0001_initial.py
index b1335286..ae8edadf 100644
--- a/server/vbv_lernwelt/media_library/migrations/0001_initial.py
+++ b/server/vbv_lernwelt/media_library/migrations/0001_initial.py
@@ -1,15 +1,16 @@
-# Generated by Django 3.2.13 on 2022-09-23 12:42
+# Generated by Django 3.2.13 on 2022-09-23 15:27
 
-from django.conf import settings
-from django.db import migrations, models
 import django.db.models.deletion
 import taggit.managers
-import vbv_lernwelt.media_library.content_blocks
 import wagtail.blocks
 import wagtail.documents.blocks
 import wagtail.fields
 import wagtail.models.collections
 import wagtail.search.index
+from django.conf import settings
+from django.db import migrations, models
+
+import vbv_lernwelt.media_library.content_blocks
 
 
 class Migration(migrations.Migration):
@@ -17,10 +18,10 @@ class Migration(migrations.Migration):
     initial = True
 
     dependencies = [
+        ('wagtailcore', '0069_log_entry_jsonfield'),
+        ('taggit', '0004_alter_taggeditem_content_type_alter_taggeditem_tag'),
         ('course', '0001_initial'),
         migrations.swappable_dependency(settings.AUTH_USER_MODEL),
-        ('taggit', '0004_alter_taggeditem_content_type_alter_taggeditem_tag'),
-        ('wagtailcore', '0069_log_entry_jsonfield'),
     ]
 
     operations = [
@@ -48,7 +49,10 @@ class Migration(migrations.Migration):
             fields=[
                 ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
                 ('introduction_text', models.TextField(default='')),
-                ('description', wagtail.fields.RichTextField(default='')),
+                ('description_title', models.TextField(default='Das erwartet dich in diesem Handlungsfeld')),
+                ('description_text', models.TextField(default='')),
+                ('items', wagtail.fields.StreamField([('item', wagtail.blocks.TextBlock())], use_json_field=True)),
+                ('overview_icon', models.CharField(default='icon-hf-fahrzeug', max_length=255)),
                 ('body', wagtail.fields.StreamField([('content_collection', wagtail.blocks.StructBlock([('title', wagtail.blocks.TextBlock()), ('contents', wagtail.blocks.StreamBlock([('Links', wagtail.blocks.StructBlock([('title', wagtail.blocks.TextBlock(blank=False, null=False)), ('description', wagtail.blocks.TextBlock(default='')), ('link_display_text', wagtail.blocks.CharBlock(default='Link öffnen', max_length=255)), ('url', wagtail.blocks.URLBlock())])), ('Documents', wagtail.documents.blocks.DocumentChooserBlock()), ('Ankers', vbv_lernwelt.media_library.content_blocks.AnchorBlock()), ('CrossReference', wagtail.blocks.StructBlock([('description', wagtail.blocks.TextBlock(default='')), ('link_display_text', wagtail.blocks.CharBlock(default='Link öffnen', max_length=255)), ('category', wagtail.blocks.PageChooserBlock(page_type=['media_library.MediaCategoryPage']))]))]))]))], null=True, use_json_field=True)),
                 ('course_category', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='course.coursecategory')),
             ],
diff --git a/server/vbv_lernwelt/media_library/models.py b/server/vbv_lernwelt/media_library/models.py
index 1971429b..615cb9e3 100644
--- a/server/vbv_lernwelt/media_library/models.py
+++ b/server/vbv_lernwelt/media_library/models.py
@@ -1,8 +1,9 @@
 from django.db import models
 from django.utils.text import slugify
-from wagtail import fields
+from wagtail import fields, blocks
 from wagtail.admin.panels import FieldPanel, StreamFieldPanel
 from wagtail.documents.models import AbstractDocument, Document
+from wagtail.fields import StreamField
 from wagtail.models import Page
 
 from vbv_lernwelt.core.model_utils import find_available_slug
@@ -40,7 +41,13 @@ class MediaCategoryPage(Page):
     course_category = models.ForeignKey('course.CourseCategory', on_delete=models.CASCADE)
     parent_page_types = ['media_library.MediaLibraryPage']
     introduction_text = models.TextField(default='')
-    description = fields.RichTextField(default='')
+    description_title = models.TextField(default='Das erwartet dich in diesem Handlungsfeld')
+    description_text = models.TextField(default='')
+    items = StreamField([
+        ('item', blocks.TextBlock()),
+    ], use_json_field=True)
+
+    overview_icon = models.CharField(max_length=255, default="icon-hf-fahrzeug")
 
     body = fields.StreamField(
         [('content_collection', MediaContentCollection())],
@@ -49,10 +56,12 @@ class MediaCategoryPage(Page):
     )
 
     content_panels = [
-        FieldPanel('title', classname="full title"),
+        FieldPanel('title'),
         FieldPanel('course_category'),
-        FieldPanel('introduction_text', classname="introduction text"),
-        FieldPanel('description', classname="introduction text"),
+        FieldPanel('introduction_text'),
+        FieldPanel('description_title'),
+        FieldPanel('description_text'),
+        FieldPanel('items'),
         StreamFieldPanel('body')
     ]
 
@@ -66,7 +75,7 @@ class MediaCategoryPage(Page):
             cls, field_names=[
                 'id', 'title', 'slug', 'type', 'translation_key',
                 'course_category',
-                'introduction_text', 'description', 'body',
+                'introduction_text', 'overview_icon', 'description_title', 'description_text', 'items', 'body',
             ]
         )
 
diff --git a/server/vbv_lernwelt/media_library/tests/media_library_factories.py b/server/vbv_lernwelt/media_library/tests/media_library_factories.py
index 4f37bfeb..b10c168e 100644
--- a/server/vbv_lernwelt/media_library/tests/media_library_factories.py
+++ b/server/vbv_lernwelt/media_library/tests/media_library_factories.py
@@ -55,7 +55,7 @@ class MediaContentCollectionFactory(wagtail_factories.StructBlockFactory):
 class MediaCategoryPageFactory(wagtail_factories.PageFactory):
     title = 'Fahrzeug'
     introduction_text = 'Das Auto ist für viele der grösste Stolz! Es birgt aber ...'
-    description = 'Das erwartet dich in diesem Handlungsfeld'
+    description_title = 'Das erwartet dich in diesem Handlungsfeld'
 
     class Meta:
         model = MediaCategoryPage