diff --git a/assets/vue/components/links/LinkForm.vue b/assets/vue/components/links/LinkForm.vue
index 3476c4ca1f..ca8e660271 100644
--- a/assets/vue/components/links/LinkForm.vue
+++ b/assets/vue/components/links/LinkForm.vue
@@ -2,7 +2,13 @@
   <form @submit.prevent="submitForm">
     <div class="field">
       <div class="p-float-label">
-        <input v-model="formData.url" name="url" type="text" id="link_url" class="p-inputtext p-component p-filled" />
+        <input
+          id="link_url"
+          v-model="formData.url"
+          name="url"
+          type="text"
+          class="p-inputtext p-component p-filled"
+        />
         <label for="link_url">
           <span class="form_required">*</span>
           URL
@@ -11,7 +17,13 @@
     </div>
     <div class="field">
       <div class="p-float-label">
-        <input v-model="formData.title" name="title" type="text" id="link_title" class="p-inputtext p-component p-filled" />
+        <input
+          id="link_title"
+          v-model="formData.title"
+          name="title"
+          type="text"
+          class="p-inputtext p-component p-filled"
+        />
         <label for="link_title">
           <span class="form_required">*</span>
           Link name
@@ -20,7 +32,7 @@
     </div>
     <div class="field">
       <div class="p-float-label">
-        <textarea v-model="formData.description" id="description" name="description"></textarea>
+        <textarea id="description" v-model="formData.description" name="description"></textarea>
         <label for="description">
           Description
         </label>
@@ -30,9 +42,9 @@
     <div class="field">
       <div class="p-float-label">
         <select
+          id="link_category_id"
           v-model="formData.category"
           name="category_id"
-          id="link_category_id"
           class="p-dropdown p-component p-inputwrapper p-inputwrapper-filled"
         >
           <option value="0">--</option>
@@ -52,7 +64,13 @@
       <div class="8">
         <label for="qf_88d91d" class="h-4"></label>
         <div id="on_homepage" class="field-checkbox">
-          <input v-model="formData.showOnHomepage" class="appearance-none checked:bg-support-4 outline-none" name="on_homepage" type="checkbox" value="1" id="qf_88d91d" />
+          <input
+            id="qf_88d91d"
+            v-model="formData.showOnHomepage"
+            class="appearance-none checked:bg-support-4 outline-none"
+            name="on_homepage"
+            type="checkbox" value="1"
+          />
           <label for="qf_88d91d">
             Show link on course homepage
           </label>
@@ -61,7 +79,12 @@
     </div>
     <div class="field">
       <div class="p-float-label">
-        <select v-model="formData.target" name="target" id="link_target" class="p-dropdown p-component p-inputwrapper p-inputwrapper-filled">
+        <select
+          id="link_target"
+          v-model="formData.target"
+          name="target"
+          class="p-dropdown p-component p-inputwrapper p-inputwrapper-filled"
+        >
           <option value="_self">Open self</option>
           <option value="_blank">Open blank</option>
           <option value="_parent">Open parent</option>
@@ -76,7 +99,7 @@
     <div class="field 2">
       <div class="8">
         <label for="link_submitLink" class="h-4"></label>
-        <button class="btn btn--primary" name="submitLink" type="submit" id="link_submitLink">
+        <button id="link_submitLink" class="btn btn--primary" name="submitLink" type="submit">
           <em class="mdi mdi-check"></em> Save links
         </button>
       </div>
@@ -90,137 +113,100 @@
   </form>
 </template>
 
-<script>
-import axios from "axios";
-import { ENTRYPOINT } from "../../config/entrypoint";
-import { RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility";
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from "vue-i18n";
-import { ref, onMounted } from "vue";
-
-export default {
-  props: {
-    linkId: {
-      type: Number,
-      default: null
-    }
+<script setup>
+import {RESOURCE_LINK_PUBLISHED} from "../resource_links/visibility";
+import linkService from "../../services/linkService";
+import {useRoute, useRouter} from 'vue-router';
+import {useI18n} from "vue-i18n";
+import {onMounted, ref} from "vue";
+import {useCidReq} from "../../composables/cidReq";
+
+const {t} = useI18n();
+const {cid, sid} = useCidReq()
+const router = useRouter()
+const route = useRoute()
+
+const props = defineProps({
+  linkId: {
+    type: Number,
+    default: null
   },
-  setup(props) {
-    const route = useRoute();
-    const router = useRouter();
-    const { t } = useI18n();
-
-    const parentResourceNodeId = ref(Number(route.params.node));
-
-    const resourceLinkList = ref(
-      JSON.stringify([
-        {
-          sid: route.query.sid,
-          cid: route.query.cid,
-          visibility: RESOURCE_LINK_PUBLISHED, // visible by default
-        },
-      ])
-    );
-
-    const formData = ref({
-      url: 'http://',
-      title: '',
-      description: '',
-      category: 0,
-      showOnHomepage: false,
-      target: '_blank',
-    });
-
-    const categories = ref([]);
-    const currentCategory = ref(0);
-
-    const fetchCategories = () => {
-      axios.get(ENTRYPOINT + 'link_categories')
-        .then(response => {
-          categories.value = response.data['hydra:member']
-        })
-        .catch(error => {
-          console.error('Error fetching categories:', error);
-        });
-    };
-
-    const fetchLink = () => {
-      if (props.linkId) {
-        axios.get(ENTRYPOINT + 'links/' + props.linkId)
-          .then(response => {
-
-            console.log("fetchLink");
-            console.log(response.data);
-
-            formData.value = response.data;
-            if (response.data.category) {
-              formData.value.category = parseInt(response.data.category["@id"].split("/").pop());
-            }
-            console.log('currentCategory', currentCategory.value);
-            console.log('formData.category', formData.value.category);
-          })
-          .catch(error => {
-            console.error('Error fetching link:', error);
-          });
-      }
-    };
-
-    onMounted(() => {
-      fetchCategories();
-      fetchLink();
-    });
-
-    const submitForm = () => {
-      const postData = {
-        url: formData.value.url,
-        title: formData.value.title,
-        description: formData.value.description,
-        category: formData.value.category,
-        showOnHomepage: formData.value.showOnHomepage,
-        target: formData.value.target,
-        parentResourceNodeId: parentResourceNodeId.value,
-        resourceLinkList: resourceLinkList.value,
-      };
-
-      if (props.linkId) {
-        const endpoint = `${ENTRYPOINT}links/${props.linkId}`;
-        postData.id = props.linkId;
-        axios.put(endpoint, postData)
-          .then(response => {
-            console.log('Link updated:', response.data);
-
-            router.push({
-              name: "LinksList",
-              query: route.query,
-            });
-          })
-          .catch(error => {
-            console.error('Error updating link:', error);
-          });
-      } else {
-        const endpoint = `${ENTRYPOINT}links`;
-
-        axios.post(endpoint, postData)
-          .then(response => {
-            console.log('Link created:', response.data);
+})
+
+const parentResourceNodeId = ref(Number(route.params.node));
+
+const resourceLinkList = ref(
+  JSON.stringify([
+    {
+      sid,
+      cid,
+      visibility: RESOURCE_LINK_PUBLISHED, // visible by default
+    },
+  ])
+);
+
+const formData = ref({
+  url: 'http://',
+  title: '',
+  description: '',
+  category: 0,
+  showOnHomepage: false,
+  target: '_blank',
+});
+
+const categories = ref([]);
+
+onMounted(() => {
+  fetchCategories();
+  fetchLink();
+});
+
+const fetchCategories = async () => {
+  try {
+    categories.value = await linkService.getCategories()
+  } catch (error) {
+    console.error('Error fetching categories:', error)
+  }
+};
 
-            router.push({
-              name: "LinksList",
-              query: route.query,
-            });
-          })
-          .catch(error => {
-            console.error('Error creating link:', error);
-          });
+const fetchLink = async () => {
+  if (props.linkId) {
+    try {
+      const response = await linkService.getLink(props.linkId)
+      formData.value = response
+      if (response.category) {
+        formData.value.category = parseInt(response.data.category["@id"].split("/").pop())
       }
-    };
+    } catch (error) {
+      console.error('Error fetching link:', error)
+    }
+  }
+}
+
+const submitForm = async () => {
+  const postData = {
+    url: formData.value.url,
+    title: formData.value.title,
+    description: formData.value.description,
+    category: formData.value.category,
+    showOnHomepage: formData.value.showOnHomepage,
+    target: formData.value.target,
+    parentResourceNodeId: parentResourceNodeId.value,
+    resourceLinkList: resourceLinkList.value,
+  }
+  try {
+    if (props.linkId) {
+      await linkService.updateLink(props.linkId, postData)
+    } else {
+      await linkService.createLink(postData)
+    }
 
-    return {
-      formData,
-      categories,
-      currentCategory,
-      submitForm
-    };
-  },
-};
+    await router.push({
+      name: "LinksList",
+      query: route.query,
+    })
+  } catch (error) {
+    console.error('Error updating link:', error)
+  }
+}
 </script>
diff --git a/assets/vue/config/entrypoint.js b/assets/vue/config/entrypoint.js
index 9676dd3072..f31aaae937 100644
--- a/assets/vue/config/entrypoint.js
+++ b/assets/vue/config/entrypoint.js
@@ -1,3 +1,3 @@
-export const ENTRYPOINT = window.location.origin+'/api/';
+export const ENTRYPOINT = window.location.origin + '/api/'
 //export const ENTRYPOINT = process.env.APP_API_PLATFORM_URL;
 
diff --git a/assets/vue/services/linkService.js b/assets/vue/services/linkService.js
new file mode 100644
index 0000000000..01e44c2843
--- /dev/null
+++ b/assets/vue/services/linkService.js
@@ -0,0 +1,34 @@
+import {ENTRYPOINT} from "../config/entrypoint";
+import axios from "axios";
+
+
+export default {
+  getLink: async(linkId) => {
+    const response = await axios.get(ENTRYPOINT + 'links/' + linkId)
+    return response.data
+  },
+  /**
+   * @param {Object} data
+   */
+  createLink: async (data) => {
+    const endpoint = `${ENTRYPOINT}links`
+
+    const response = await axios.post(endpoint, data)
+    return response.data
+  },
+  /**
+   * @param {Number} linkId
+   * @param {Object} data
+   */
+  updateLink: async (linkId, data) => {
+    const endpoint = `${ENTRYPOINT}links/${linkId}`;
+    data.id = linkId;
+
+    const response = await axios.put(endpoint, data)
+    return response.data
+  },
+  getCategories: async () => {
+    const response = await axios.get(ENTRYPOINT + 'link_categories')
+    return response.data['hydra:member']
+  },
+}