diff --git a/components/DocumentList.vue b/components/DocumentList.vue
new file mode 100644
index 00000000..21602903
--- /dev/null
+++ b/components/DocumentList.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import type {
+  IAllDocumentModels,
+  TrackModel,
+  SectionHeaderModel,
+} from "@bcc-code/bmm-sdk-fetch";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
+
+type IDiscoverableGroup = {
+  header: SectionHeaderModel | null;
+  items: Exclude<IAllDocumentModels, SectionHeaderModel>[];
+};
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  items: IAllDocumentModels[] | null | undefined;
+  pending: boolean;
+}>();
+
+const convertModels = (models: IAllDocumentModels[]) => {
+  let currentSection: IDiscoverableGroup["items"] = [];
+  const result: IDiscoverableGroup[] = [];
+  models.forEach((el, i) => {
+    if (el.type === "section_header") {
+      currentSection = [];
+      result.push({
+        header: el,
+        items: currentSection,
+      });
+    } else if (i === 0) {
+      currentSection = [el];
+      result.push({
+        header: null,
+        items: currentSection,
+      });
+    } else {
+      currentSection.push(el);
+    }
+  });
+  return result;
+};
+
+const { setQueue } = useNuxtApp().$mediaPlayer;
+
+const playItem = (item: TrackModel, group: IDiscoverableGroup) => {
+  const items = group.items.filter((c): c is TrackModel => c.type === "track");
+  setQueue(
+    items,
+    items.findIndex((track) => track.id === item.id),
+  );
+};
+
+// We remove the hostname so that we use SPA links (without full page refresh)
+const parseLink = (link: string) => {
+  const url = new URL(link);
+  return url.pathname + url.search + url.hash;
+};
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmallScreen = breakpoints.smallerOrEqual("lg");
+</script>
+
+<template>
+  <div>
+    <template v-if="props.pending">
+      <ul>
+        <li
+          v-for="index in 5"
+          :key="index"
+          class="my-6 h-11 w-full animate-pulse rounded-lg bg-background-2"
+        ></li>
+      </ul>
+    </template>
+    <template v-else-if="props.items"
+      ><template
+        v-for="group in convertModels(props.items)"
+        :key="group.header?.id || 0"
+      >
+        <PageHeading v-if="group.header" :level="3">
+          <div class="flex items-center justify-between">
+            <div>
+              <NuxtLink
+                v-if="typeof group.header.link === 'string'"
+                :to="parseLink(group.header.link)"
+              >
+                {{ group.header.title }}
+              </NuxtLink>
+              <span v-else>{{ group.header.title }}</span>
+            </div>
+            <NuxtLink
+              v-if="group.header.link"
+              :to="parseLink(group.header.link)"
+            >
+              <ButtonStyled intent="secondary" size="small">
+                <span class="whitespace-nowrap">
+                  {{ t("home.list.see-all") }}
+                </span>
+              </ButtonStyled>
+            </NuxtLink>
+          </div>
+        </PageHeading>
+        <div
+          v-if="group.header?.useCoverCarousel"
+          class="flex flex-row flex-wrap gap-6"
+        >
+          <template
+            v-for="item in group.items.slice(0, isSmallScreen ? 4 : 6)"
+            :key="item.id"
+          >
+            <NuxtLink
+              v-if="item.type === 'album'"
+              :to="{ name: 'album-id', params: { id: item.id } }"
+            >
+              <ItemCard :item="item" />
+            </NuxtLink>
+            <NuxtLink
+              v-else-if="item.type === 'playlist'"
+              :to="{ name: 'playlist-curated-id', params: { id: item.id } }"
+            >
+              <ItemCard :item="item" />
+            </NuxtLink>
+            <NuxtLink
+              v-else-if="item.type === 'podcast'"
+              :to="{ name: 'playlist-podcast-id', params: { id: item.id } }"
+            >
+              <ItemCard :item="item" />
+            </NuxtLink>
+            <div
+              v-else
+              class="grid w-52 flex-shrink-0 basis-52 gap-4"
+              style="background-color: rgba(255, 0, 0, 0.4); color: red"
+            >
+              "{{ item.type }}" is not yet implemented ...
+            </div>
+          </template>
+        </div>
+        <ol
+          v-else
+          class="w-full divide-y divide-label-separator grid grid-cols-tracklist"
+        >
+          <template v-for="item in group.items" :key="item.id">
+            <h2
+              v-if="item.type === 'chapter_header'"
+              class="text-2xl font-extrabold pt-10 pb-4"
+            >
+              {{ item.title }}
+            </h2>
+            <TrackItem
+              v-else-if="item.type === 'track'"
+              :track="item"
+              :is-track-type-known="true"
+              show-thumbnail
+              @play-track="playItem(item, group)"
+            ></TrackItem>
+            <ContributorListItem
+              v-else-if="item.type === 'contributor'"
+              :contributor="item"
+            ></ContributorListItem>
+            <AlbumItem v-else-if="item.type === 'album'" :album="item" />
+            <PlaylistItem
+              v-else-if="item.type === 'playlist'"
+              :playlist="item"
+            />
+            <PodcastItem v-else-if="item.type === 'podcast'" :podcast="item" />
+            <li v-else>
+              <div style="background-color: rgba(255, 0, 0, 0.4); color: red">
+                "{{ item.type }}" is not yet implemented ...
+              </div>
+            </li>
+          </template>
+        </ol>
+      </template>
+    </template>
+    <template v-else>
+      <div style="background-color: rgba(255, 0, 0, 0.4); color: red">
+        This list is empty 😔
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/composables/browse.ts b/composables/browse.ts
index a463869d..318b5759 100644
--- a/composables/browse.ts
+++ b/composables/browse.ts
@@ -5,3 +5,31 @@ export function useBrowse() {
     useLazyAsyncData("browse", () => new BrowseApi().browseGet()),
   );
 }
+
+export function useBrowseEvents() {
+  return reactiveApi(
+    useLazyAsyncData("browse-events", () => new BrowseApi().browseEventsGet()),
+  );
+}
+
+export function useBrowseAudiobooks() {
+  return reactiveApi(
+    useLazyAsyncData("browse-audiobooks", () =>
+      new BrowseApi().browseAudiobooksGet(),
+    ),
+  );
+}
+
+export function useBrowseMusic() {
+  return reactiveApi(
+    useLazyAsyncData("browse-music", () => new BrowseApi().browseMusicGet()),
+  );
+}
+
+export function useBrowsePodcast() {
+  return reactiveApi(
+    useLazyAsyncData("browse-podcast", () =>
+      new BrowseApi().browsePodcastsGet(),
+    ),
+  );
+}
diff --git a/composables/discover.ts b/composables/discover.ts
index 267b3725..9395cb43 100644
--- a/composables/discover.ts
+++ b/composables/discover.ts
@@ -1,34 +1,10 @@
 import { DiscoverApi } from "@bcc-code/bmm-sdk-fetch";
-import type {
-  DiscoverGetRequest,
-  SectionHeaderModel,
-  IAllDocumentModels,
-} from "@bcc-code/bmm-sdk-fetch";
-
-export type IDiscoverableGroup = {
-  header: SectionHeaderModel | null;
-  items: Exclude<IAllDocumentModels, SectionHeaderModel>[];
-};
+import type { DiscoverGetRequest } from "@bcc-code/bmm-sdk-fetch";
 
 export function useDiscover(requestParameters: DiscoverGetRequest) {
   return reactiveApi(
     useLazyAsyncData("discover", () =>
-      new DiscoverApi().discoverGet(requestParameters).then((d) => {
-        let currentSection: IDiscoverableGroup["items"] = [];
-        const result: IDiscoverableGroup[] = [];
-        d.forEach((el) => {
-          if (el.type === "section_header") {
-            currentSection = [];
-            result.push({
-              header: el,
-              items: currentSection,
-            });
-          } else {
-            currentSection.push(el);
-          }
-        });
-        return result;
-      }),
+      new DiscoverApi().discoverGet(requestParameters),
     ),
   );
 }
diff --git a/composables/playlist.ts b/composables/playlist.ts
index fbd42fcc..d40c15e5 100644
--- a/composables/playlist.ts
+++ b/composables/playlist.ts
@@ -35,3 +35,11 @@ export function useCuratedPlaylists() {
     useLazyAsyncData("playlists", () => new PlaylistApi().playlistGet()),
   );
 }
+
+export function useFeaturedPlaylists() {
+  return reactiveApi(
+    useLazyAsyncData("playlists-featured", () =>
+      new PlaylistApi().playlistDocumentsGet(),
+    ),
+  );
+}
diff --git a/package.json b/package.json
index 439443f3..6d97b6c7 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@auth0/auth0-vue": "^2.3.3",
-    "@bcc-code/bmm-sdk-fetch": "^7.1.0",
+    "@bcc-code/bmm-sdk-fetch": "^7.3.0",
     "@headlessui/vue": "^1.7.17",
     "@microsoft/applicationinsights-web": "^3.0.7",
     "@pinia/nuxt": "^0.5.1",
diff --git a/pages/browse/audiobooks.vue b/pages/browse/audiobooks.vue
new file mode 100644
index 00000000..7a8041ff
--- /dev/null
+++ b/pages/browse/audiobooks.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+const { data: models, pending } = useBrowseAudiobooks();
+setTitleOfDocumentList(models);
+</script>
+
+<template>
+  <DocumentList :items="models?.items" :pending="pending"></DocumentList>
+</template>
diff --git a/pages/browse/events.vue b/pages/browse/events.vue
new file mode 100644
index 00000000..2993ffab
--- /dev/null
+++ b/pages/browse/events.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+const { data: models, pending } = useBrowseEvents();
+setTitleOfDocumentList(models);
+</script>
+
+<template>
+  <DocumentList :items="models?.items" :pending="pending"></DocumentList>
+</template>
diff --git a/pages/browse/index.vue b/pages/browse/index.vue
index d00b370e..19bffa36 100644
--- a/pages/browse/index.vue
+++ b/pages/browse/index.vue
@@ -2,51 +2,9 @@
 const { t } = useI18n();
 toolbarTitleStore().setReactiveToolbarTitle(() => t("nav.browse"));
 
-const { data: browseSections, pending } = useBrowse();
+const { data: models, pending } = useBrowse();
 </script>
 
 <template>
-  <div>
-    <PageHeading class="mb-6">{{ $t("nav.browse") }}</PageHeading>
-    <template v-if="pending">
-      <ul>
-        <li
-          v-for="index in 5"
-          :key="index"
-          class="my-6 h-11 w-full animate-pulse rounded-lg bg-background-2"
-        ></li>
-      </ul>
-    </template>
-    <ul v-else>
-      <template v-for="section in browseSections" :key="section.id || 0">
-        <PageHeading v-if="section.type === 'section_header'" :level="3">
-          <div class="flex items-center justify-between">
-            <div>
-              <a v-if="typeof section.link === 'string'" :href="section.link">
-                {{ section.title }}
-              </a>
-              <span v-else>{{ section.title }}</span>
-            </div>
-            <a v-if="section.link" :href="section.link">
-              <ButtonStyled intent="secondary" size="small">
-                <span class="whitespace-nowrap">
-                  {{ t("home.list.see-all") }}
-                </span>
-              </ButtonStyled>
-            </a>
-          </div>
-        </PageHeading>
-        <AlbumItem v-else-if="section.type === 'album'" :album="section" />
-        <PlaylistItem
-          v-else-if="section.type === 'playlist'"
-          :playlist="section"
-        />
-        <PodcastItem
-          v-else-if="section.type === 'podcast'"
-          :podcast="section"
-        />
-        <p v-else style="color: red">This is not implemented yet</p>
-      </template>
-    </ul>
-  </div>
+  <DocumentList :items="models" :pending="pending"></DocumentList>
 </template>
diff --git a/pages/browse/music.vue b/pages/browse/music.vue
index b7caabe1..22a5c288 100644
--- a/pages/browse/music.vue
+++ b/pages/browse/music.vue
@@ -1,3 +1,8 @@
+<script lang="ts" setup>
+const { data: models, pending } = useBrowseMusic();
+setTitleOfDocumentList(models);
+</script>
+
 <template>
-  <h1>The route {{ useRoute().name }} has not been implemented yet.</h1>
+  <DocumentList :items="models?.items" :pending="pending"></DocumentList>
 </template>
diff --git a/pages/browse/podcasts.vue b/pages/browse/podcasts.vue
index b7caabe1..1d49e820 100644
--- a/pages/browse/podcasts.vue
+++ b/pages/browse/podcasts.vue
@@ -1,3 +1,8 @@
+<script lang="ts" setup>
+const { data: models, pending } = useBrowsePodcast();
+setTitleOfDocumentList(models);
+</script>
+
 <template>
-  <h1>The route {{ useRoute().name }} has not been implemented yet.</h1>
+  <DocumentList :items="models?.items" :pending="pending"></DocumentList>
 </template>
diff --git a/pages/featured.vue b/pages/featured.vue
index b7caabe1..32117454 100644
--- a/pages/featured.vue
+++ b/pages/featured.vue
@@ -1,3 +1,8 @@
+<script lang="ts" setup>
+const { data: models, pending } = useFeaturedPlaylists();
+setTitleOfDocumentList(models);
+</script>
+
 <template>
-  <h1>The route {{ useRoute().name }} has not been implemented yet.</h1>
+  <DocumentList :items="models?.items" :pending="pending"></DocumentList>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index c32b41d3..2aed92f6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,156 +1,15 @@
 <script lang="ts" setup>
-import { LanguageEnum } from "@bcc-code/bmm-sdk-fetch";
-import type { DiscoverGetRequest, TrackModel } from "@bcc-code/bmm-sdk-fetch";
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
-import type { IDiscoverableGroup } from "~/composables/discover";
+import type { DiscoverGetRequest } from "@bcc-code/bmm-sdk-fetch";
 
-const { setQueue } = useNuxtApp().$mediaPlayer;
+const { t } = useI18n();
 const userData = useNuxtApp().$userData;
-
-const { t, locale } = useI18n();
 toolbarTitleStore().setReactiveToolbarTitle(() => t("nav.home"));
 
-const discoverGroups = ref<IDiscoverableGroup[] | null>(null);
-const loading = ref(true);
-
-let stopHandles: (() => void)[] = [];
-watch(
-  locale,
-  () => {
-    const parameters: DiscoverGetRequest = {
-      // Compatibility is ensured in i18n.config.ts file
-      lang: locale.value as LanguageEnum,
-    };
-    if (userData.age) parameters.age = userData.age;
-    const { data, pending, stopHandler } = useDiscover(parameters);
-    stopHandles.forEach((el) => el());
-
-    stopHandles = [
-      stopHandler,
-      watch(
-        data,
-        (d) => {
-          discoverGroups.value = d;
-        },
-        { immediate: true },
-      ),
-      watch(
-        pending,
-        (p) => {
-          loading.value = p;
-        },
-        { immediate: true },
-      ),
-    ];
-  },
-  { immediate: true },
-);
-
-const playItem = (item: TrackModel, group: IDiscoverableGroup) => {
-  const items = group.items.filter((c): c is TrackModel => c.type === "track");
-  setQueue(
-    items,
-    items.findIndex((track) => track.id === item.id),
-  );
-};
-
-const breakpoints = useBreakpoints(breakpointsTailwind);
-
-const isSmallScreen = breakpoints.smallerOrEqual("lg");
+const parameters: DiscoverGetRequest = {};
+if (userData.age) parameters.age = userData.age;
+const { data: models, pending } = useDiscover(parameters);
 </script>
 
 <template>
-  <div>
-    <template v-if="loading">
-      <ul>
-        <li
-          v-for="index in 5"
-          :key="index"
-          class="my-6 h-11 w-full animate-pulse rounded-lg bg-background-2"
-        ></li>
-      </ul>
-    </template>
-    <template v-else>
-      <template v-for="group in discoverGroups" :key="group.header?.id || 0">
-        <PageHeading v-if="group.header" :level="3">
-          <div class="flex items-center justify-between">
-            <div>
-              <a
-                v-if="typeof group.header.link === 'string'"
-                :href="group.header.link"
-              >
-                {{ group.header.title }}
-              </a>
-              <span v-else>{{ group.header.title }}</span>
-            </div>
-            <a v-if="group.header.link" :href="group.header.link">
-              <ButtonStyled intent="secondary" size="small">
-                <span class="whitespace-nowrap">{{
-                  t("home.list.see-all")
-                }}</span></ButtonStyled
-              >
-            </a>
-          </div>
-        </PageHeading>
-        <div
-          v-if="group.header?.useCoverCarousel"
-          class="flex flex-row flex-wrap gap-6"
-        >
-          <template
-            v-for="item in group.items.slice(0, isSmallScreen ? 4 : 6)"
-            :key="item.id"
-          >
-            <NuxtLink
-              v-if="item.type === 'album'"
-              :to="{ name: 'album-id', params: { id: item.id } }"
-            >
-              <ItemCard :item="item" />
-            </NuxtLink>
-            <NuxtLink
-              v-else-if="item.type === 'playlist'"
-              :to="{ name: 'playlist-curated-id', params: { id: item.id } }"
-            >
-              <ItemCard :item="item" />
-            </NuxtLink>
-            <NuxtLink
-              v-else-if="item.type === 'podcast'"
-              :to="{ name: 'playlist-podcast-id', params: { id: item.id } }"
-            >
-              <ItemCard :item="item" />
-            </NuxtLink>
-            <div
-              v-else
-              class="grid w-52 flex-shrink-0 basis-52 gap-4"
-              style="background-color: rgba(255, 0, 0, 0.4); color: red"
-            >
-              "{{ item.type }}" is not yet implemented ...
-            </div>
-          </template>
-        </div>
-        <ol
-          v-else
-          class="w-full divide-y divide-label-separator grid grid-cols-tracklist"
-        >
-          <template v-for="item in group.items" :key="item.id">
-            <TrackItem
-              v-if="item.type === 'track'"
-              :track="item"
-              :is-track-type-known="true"
-              show-thumbnail
-              @play-track="playItem(item, group)"
-            ></TrackItem>
-            <ContributorListItem
-              v-else-if="item.type === 'contributor'"
-              :contributor="item"
-            ></ContributorListItem>
-            <li v-else>
-              <div style="background-color: rgba(255, 0, 0, 0.4); color: red">
-                "{{ item.type }}" is not yet implemented ...
-              </div>
-            </li>
-          </template>
-        </ol>
-      </template>
-    </template>
-  </div>
+  <DocumentList :items="models" :pending="pending"></DocumentList>
 </template>
diff --git a/pages/search.vue b/pages/search.vue
index ff0d1f2e..5a97f954 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -1,10 +1,5 @@
 <script lang="ts" setup>
-import type {
-  SearchFilter,
-  SearchResults,
-  TrackModel,
-} from "@bcc-code/bmm-sdk-fetch";
-import type { IDiscoverableGroup } from "~/composables/discover";
+import type { SearchFilter, SearchResults } from "@bcc-code/bmm-sdk-fetch";
 
 const { t } = useI18n();
 toolbarTitleStore().setReactiveToolbarTitle(() => t("nav.search"));
@@ -59,13 +54,6 @@ const tabs = [
 ] as const;
 
 const { setQueue } = useNuxtApp().$mediaPlayer;
-const playItem = (item: TrackModel, group: IDiscoverableGroup) => {
-  const items = group.items.filter((c): c is TrackModel => c.type === "track");
-  setQueue(
-    items,
-    items.findIndex((track) => track.id === item.id),
-  );
-};
 </script>
 
 <template>
@@ -106,7 +94,7 @@ const playItem = (item: TrackModel, group: IDiscoverableGroup) => {
                 :track="item"
                 :is-track-type-known="true"
                 show-thumbnail
-                @play-track="playItem(item, { header: null, items: [item] })"
+                @play-track="setQueue([item])"
               ></TrackItem>
               <ContributorListItem
                 v-else-if="item.type === 'contributor'"
diff --git a/plugins/2.bmm-api.ts b/plugins/2.bmm-api.ts
index 244ee88a..aa02c921 100644
--- a/plugins/2.bmm-api.ts
+++ b/plugins/2.bmm-api.ts
@@ -26,6 +26,8 @@ export default defineNuxtPlugin((nuxtApp) => {
               ",",
             ),
           );
+          const uiLanguage = useNuxtApp().$i18n.locale.value;
+          headers.set("UiLanguage", uiLanguage);
 
           ctx.init.headers = headers;
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a93c7802..7fdbd45a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,8 +5,8 @@ dependencies:
     specifier: ^2.3.3
     version: 2.3.3(typescript@5.3.3)(vue-router@4.2.5)
   '@bcc-code/bmm-sdk-fetch':
-    specifier: ^7.1.0
-    version: 7.1.0
+    specifier: ^7.3.0
+    version: 7.3.0
   '@headlessui/vue':
     specifier: ^1.7.17
     version: 1.7.17(vue@3.4.14)
@@ -521,8 +521,8 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  /@bcc-code/bmm-sdk-fetch@7.1.0:
-    resolution: {integrity: sha512-vIKu9KD7ZyYoBHJjnYNs3WKQO4W4vPHsNET4510AQSTVcja82sM2wMNNnDmv9b99KbHqvmaT06y/MVEy7Dt6Yg==}
+  /@bcc-code/bmm-sdk-fetch@7.3.0:
+    resolution: {integrity: sha512-t993xdMmUhpvPtcSOsnTr1NVewqZzx6J5nQ8tm+XnlwPUNj56gVMO/3AYlaTOLJrVP/SseXFG2OvB3B88a8L9w==}
     dev: false
 
   /@bcoe/v8-coverage@0.2.3:
diff --git a/stores/toolbarTitle.ts b/stores/toolbarTitle.ts
index a399720a..9a8bee08 100644
--- a/stores/toolbarTitle.ts
+++ b/stores/toolbarTitle.ts
@@ -11,5 +11,9 @@ export const toolbarTitleStore = defineStore("toolbarTitle", () => {
     );
   }
 
-  return { setReactiveToolbarTitle, toolbarTitle };
+  function setToolbarTitle(title: string) {
+    toolbarTitle.value = title;
+  }
+
+  return { setReactiveToolbarTitle, toolbarTitle, setToolbarTitle };
 });
diff --git a/utils/reactiveApi.ts b/utils/reactiveApi.ts
index 3a26fc86..bcd4b875 100644
--- a/utils/reactiveApi.ts
+++ b/utils/reactiveApi.ts
@@ -1,8 +1,8 @@
-import type { AsyncData } from "#app";
+import type { AsyncData } from "nuxt/app";
 
 export default function reactiveApi<Data, Error>(data: AsyncData<Data, Error>) {
   const stopHandler = watch(
-    () => contentLanguageStore().contentLanguages,
+    [useNuxtApp().$i18n.locale, () => contentLanguageStore().contentLanguages],
     () => {
       data.refresh();
     },
diff --git a/utils/setTitleOfDocumentList.ts b/utils/setTitleOfDocumentList.ts
new file mode 100644
index 00000000..cb97ab46
--- /dev/null
+++ b/utils/setTitleOfDocumentList.ts
@@ -0,0 +1,13 @@
+import type { DocumentListIAllDocumentModels } from "@bcc-code/bmm-sdk-fetch";
+
+export default function setTitleOfDocumentList(
+  data: Ref<DocumentListIAllDocumentModels | null>,
+) {
+  watch(
+    data,
+    () => {
+      toolbarTitleStore().setToolbarTitle(data.value?.title ?? " ");
+    },
+    { immediate: true },
+  );
+}