diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
index 90ae0476..6765f0f1 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathPage.vue
@@ -3,6 +3,7 @@ import LearningPathListView from "@/pages/learningPath/learningPathPage/Learning
 import LearningPathPathView from "@/pages/learningPath/learningPathPage/LearningPathPathView.vue";
 import CircleProgress from "@/pages/learningPath/learningPathPage/LearningPathProgress.vue";
 import LearningPathTopics from "@/pages/learningPath/learningPathPage/LearningPathTopics.vue";
+import LearningPathProfileFilter from "@/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue";
 import type { ViewType } from "@/pages/learningPath/learningPathPage/LearningPathViewSwitch.vue";
 import LearningPathViewSwitch from "@/pages/learningPath/learningPathPage/LearningPathViewSwitch.vue";
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
@@ -73,22 +74,13 @@ const changeViewType = (viewType: ViewType) => {
         ></CourseSessionDueDatesList>
       </div>
       <!-- Right -->
-      <div v-if="!useMobileLayout" class="flex-grow">
-        <h5 class="mb-4">Zulassungsprofil:</h5>
-        <div class="mb-4 flex gap-4">
-          <button
-            v-for="profile in course?.profiles"
-            :key="profile"
-            :class="filter == profile || !filter ? 'tag-active' : 'tag-inactive'"
-            @click="filter = profile"
-          >
-            {{ profile }}
-          </button>
-        </div>
-        <a class="link" @click="filter = ''">Alle anzeigen (Allbranche)</a>
-      </div>
+      <LearningPathProfileFilter
+        v-if="!useMobileLayout"
+        :profiles="course?.profiles"
+        :selected="filter"
+        @select="updateCourseProfile"
+      />
     </div>
-
     <!-- Bottom -->
     <div class="bg-white">
       <div v-if="lpQueryResult.learningPath">
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue b/client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue
new file mode 100644
index 00000000..82609bf9
--- /dev/null
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathProfileFilter.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+interface Props {
+  profiles?: string[];
+  selected?: string;
+}
+
+defineProps<Props>();
+defineEmits(["select"]);
+</script>
+
+<template>
+  <div class="flex-grow">
+    <h5 class="mb-4">Zulassungsprofil:</h5>
+    <div class="mb-4 flex gap-4">
+      <button
+        v-for="profile in profiles"
+        :key="profile"
+        :class="selected == profile || !selected ? 'tag-active' : 'tag-inactive'"
+        @click="$emit('select', profile)"
+      >
+        {{ profile }}
+      </button>
+    </div>
+    <a class="link" @click="$emit('select', '')">Alle anzeigen (Allbranche)</a>
+  </div>
+</template>