diff --git a/webapp/src/components/home/GetStarted.vue b/webapp/src/components/home/GetStarted.vue
index 7e0545ef1..2babcd5ee 100644
--- a/webapp/src/components/home/GetStarted.vue
+++ b/webapp/src/components/home/GetStarted.vue
@@ -20,9 +20,9 @@
     >
       <template #title>
         Train a model and contribute to existing
-        <span title="Click Explore to learn more on DISCOllaboratives"
-          ><DISCOllaborative />s</span
-        >
+        <span title="Click Explore to learn more on DISCOllaboratives">
+          <DISCOllaboratives />
+        </span>
       </template>
     </ButtonsCard>
 
@@ -32,7 +32,7 @@
       :buttons="List.of(['create', goToNewTaskCreationForm])"
     >
       <template #title>
-        Add your own ML problem to the list of <DISCOllaborative />s
+        Add your own ML problem to the list of <DISCOllaboratives />
       </template>
     </ButtonsCard>
   </div>
@@ -43,7 +43,7 @@ import { useRouter } from "vue-router";
 import { List } from "immutable";
 
 import DISCO from "@/components/simple/DISCO.vue";
-import DISCOllaborative from "@/components/simple/DISCOllaborative.vue";
+import DISCOllaboratives from "@/components/simple/DISCOllaboratives.vue";
 import ButtonsCard from "@/components/containers/ButtonsCard.vue";
 
 const router = useRouter();
diff --git a/webapp/src/components/information/Tutorial.vue b/webapp/src/components/information/Tutorial.vue
index e4e0d94fe..ce3ca9c28 100644
--- a/webapp/src/components/information/Tutorial.vue
+++ b/webapp/src/components/information/Tutorial.vue
@@ -27,7 +27,7 @@
         </div>
       <div class="flex flex-wrap items-center justify-center space-x-8">
         <CustomButton @click="router.push('/list')" class="mb-2">
-          explore <DISCOllaborative />
+          explore <DISCOllaboratives />
         </CustomButton>
         <CustomButton @click="router.push('/create')" class="mb-2">
           create your own task
@@ -46,6 +46,7 @@ import { useInformationStore } from '@/store/information'
 import IconCard from '@/components/containers/IconCard.vue'
 import CustomButton from '@/components/simple/CustomButton.vue'
 import DISCOllaborative from '@/components/simple/DISCOllaborative.vue'
+import DISCOllaboratives from '@/components/simple/DISCOllaboratives.vue'
 
 const router = useRouter()
 const informationStore = useInformationStore()
diff --git a/webapp/src/components/pages/TaskList.vue b/webapp/src/components/pages/TaskList.vue
index 2b5b08fc7..01dc28d53 100644
--- a/webapp/src/components/pages/TaskList.vue
+++ b/webapp/src/components/pages/TaskList.vue
@@ -21,19 +21,19 @@
       >
         <IconCard class="justify-self-center w-full">
         <template #title>
-          What are <DISCOllaborative/>s?
+          What are <DISCOllaboratives />?
         </template>
           <template #icon>
             <Tasks/>
           </template>
           <template #content>
-            <DISCOllaborative/> are machine learning tasks, such as diagnosing COVID from ultrasounds or classifying hand written digits, that users can join to train and contribute to with their own data. To give you a sense of <DISCO />, we pre-defined some tasks
-          along with some example datasets. The end goal is for users to create their own custom <DISCOllaborative/> and collaboratively train machine learning models.
+            <DISCOllaboratives /> are machine learning tasks, such as diagnosing COVID from ultrasounds or classifying hand written digits, that users can join to train and contribute to with their own data. To give you a sense of <DISCO />, we pre-defined some tasks
+          along with some example datasets. The end goal is for users to create their own custom <DISCOllaborative /> and collaboratively train machine learning models.
           <br>By participating to a task, you can either choose to train a model with your own data only or join a collaborative training session with other users.
           If you want to bring your own collaborative task into <DISCO />, you can do so by <button
             class="text-blue-400"
             @click="goToCreateTask()"
-          >creating a new <DISCOllaborative/></button>.
+          >creating a new <DISCOllaborative /></button>.
           <br/><br/> <b>The data you connect is only used locally and is never uploaded or shared with anyone. Data always stays on your device.</b>
           </template>
         </IconCard>
@@ -84,6 +84,7 @@ import IconCard from '@/components/containers/IconCard.vue'
 import DISCO from '@/components/simple/DISCO.vue'
 import Tasks from '@/assets/svg/Tasks.vue'
 import DISCOllaborative from '@/components/simple/DISCOllaborative.vue'
+import DISCOllaboratives from '@/components/simple/DISCOllaboratives.vue'
 
 const router = useRouter()
 const trainingStore = useTrainingStore()
diff --git a/webapp/src/components/simple/DISCOllaboratives.vue b/webapp/src/components/simple/DISCOllaboratives.vue
new file mode 100644
index 000000000..0820207b4
--- /dev/null
+++ b/webapp/src/components/simple/DISCOllaboratives.vue
@@ -0,0 +1,5 @@
+<template><DISCOllaborative />s</template>
+
+<script setup lang="ts">
+import DISCOllaborative from "./DISCOllaborative.vue";
+</script>