diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
index f29e2e6d4..8d09d2dd3 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
@@ -2,7 +2,7 @@ import "es6-promise/auto";
 import { createStore } from "vuex";
 import { postLocation } from "./api";
 import prepareLocations from "./store.locations.js";
-import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
+import {fetchResults, makeFetch} from "ChillMainAssets/lib/api/apiMethods";
 
 const debug = process.env.NODE_ENV !== "production";
 //console.log('window.activity', window.activity);
@@ -365,11 +365,11 @@ const store = createStore({
       const accompanyingPeriodId = state.activity.accompanyingPeriod.id;
       const url = `/api/1.0/person/accompanying-course/${accompanyingPeriodId}/works.json`;
       try {
-        const works = await makeFetch("GET", url);
-        // console.log("works", works);
+        const works = await fetchResults(url);
+        // console.log('works', works);
         commit("setAccompanyingPeriodWorks", works);
       } catch (error) {
-        console.error("Failed to fetch accompanying period works:", error);
+        console.error('Failed to fetch works:', error);
       }
     },
     getWhoAmI({ commit }) {
diff --git a/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseApiController.php b/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseApiController.php
index 9212a96dc..12db826a8 100644
--- a/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseApiController.php
+++ b/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseApiController.php
@@ -313,9 +313,14 @@ final class AccompanyingCourseApiController extends ApiController
     {
         $this->denyAccessUnlessGranted(AccompanyingPeriodVoter::SEE, $accompanyingPeriod);
 
-        $works = $this->accompanyingPeriodWorkRepository->findBy(['accompanyingPeriod' => $accompanyingPeriod]);
+        $total = $this->accompanyingPeriodWorkRepository->countByAccompanyingPeriod($accompanyingPeriod);
+        $paginator = $this->getPaginatorFactory()->create($total);
 
-        return $this->json($works, Response::HTTP_OK, [], ['groups' => ['read']]);
+        $works = $this->accompanyingPeriodWorkRepository->findByAccompanyingPeriod($accompanyingPeriod, null, $paginator->getItemsPerPage(), $paginator->getCurrentPageFirstItemNumber());
+
+        $collection = new Collection($works, $paginator);
+
+        return $this->json($collection, Response::HTTP_OK, [], ['groups' => ['read']]);
     }
 
     public function workApi($id, Request $request, string $_format): Response
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
index 904006c52..ad6c4c82f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
@@ -48,16 +48,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import {onMounted, ref} from "vue";
 import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue";
-import { AccompanyingPeriodWork } from "../../../types";
-import {
-  trans,
-  ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK,
-  CONFIRM,
-} from "translator";
-import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
+import {AccompanyingPeriodWork} from "../../../types";
+import {ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK, CONFIRM, trans,} from "translator";
+import {fetchResults} from "ChillMainAssets/lib/api/apiMethods";
 
 interface AccompanyingPeriodWorkSelectorModalProps {
   accompanyingPeriodId: number;
@@ -79,16 +75,21 @@ onMounted(() => {
     console.error("No accompanyingperiod id was given");
   }
 });
-const getAccompanyingPeriodWorks = (periodId: number) => {
+const getAccompanyingPeriodWorks = async (periodId: number) => {
   const url = `/api/1.0/person/accompanying-course/${periodId}/works.json`;
 
-  makeFetch<number, AccompanyingPeriodWork[]>("GET", url)
+  try {
+    accompanyingPeriodWorks.value = await fetchResults(url);
+  } catch (error) {
+    console.log(error);
+  }
+/*  makeFetch<number, AccompanyingPeriodWork[]>("GET", url)
     .then((response) => {
       accompanyingPeriodWorks.value = response;
     })
     .catch((error) => {
       console.log(error);
-    });
+    });*/
 };
 
 const openModal = () => (showModal.value = true);