diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPathView.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPathView.vue
index 0e43eabf..1eb7e0ba 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathPathView.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathPathView.vue
@@ -2,7 +2,7 @@
 import LearningPathCircleColumn from "@/pages/learningPath/learningPathPage/LearningPathCircleColumn.vue";
 import LearningPathScrollButton from "@/pages/learningPath/learningPathPage/LearningPathScrollButton.vue";
 import { useScroll } from "@vueuse/core";
-import { ref } from "vue";
+import { nextTick, ref, watch } from "vue";
 import type {
   LearningContentWithCompletion,
   LearningPathType,
@@ -40,7 +40,6 @@ const scrollLearnPathDiagram = (offset: number) => {
 };
 
 const filterCircles = (topic: TopicType) => {
-  // return [];
   if (props.filter === undefined || props.filter === "") {
     return topic.circles;
   }
@@ -49,6 +48,17 @@ const filterCircles = (topic: TopicType) => {
       circle.profiles.indexOf(props.filter as string) > -1 || circle.is_base_circle
   );
 };
+
+watch(()=> props.filter, () => {
+  // we need to update the scroll state of the element, otherwise the arrows won't match the scroll state
+  // https://github.com/vueuse/vueuse/issues/2875
+    nextTick(()=> {
+      if(learnPathDiagram.value){
+        const scrollEvent = new Event('scroll');
+        learnPathDiagram.value.dispatchEvent(scrollEvent);
+      }
+    });
+})
 </script>
 
 <template>