diff --git a/backend/api/management/commands/make_assistant.py b/backend/api/management/commands/make_assistant.py
index 47a4891b..84de6aa0 100644
--- a/backend/api/management/commands/make_assistant.py
+++ b/backend/api/management/commands/make_assistant.py
@@ -19,6 +19,6 @@ def handle(self, *args, **options):
             return
 
         user = user.get()
-        Assistant(user_ptr=user).save_base(raw=True)
+        Assistant.create(user)
 
         self.stdout.write(self.style.SUCCESS('Successfully made the user assistant!'))
diff --git a/frontend/src/components/TooltipHover.vue b/frontend/src/components/TooltipHover.vue
deleted file mode 100644
index 3e7e9a11..00000000
--- a/frontend/src/components/TooltipHover.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-
-const props = defineProps<{ text: string }>();
-const { t } = useI18n();
-</script>
-
-<template>
-    <div class="tooltip-container">
-        <!-- Tooltip text-->
-        <div class="tooltip">
-            <slot />
-            <span class="tooltiptext">{{ t(props.text) }}</span>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.tooltip {
-    position: relative;
-    display: inline-block;
-}
-
-.tooltip .tooltiptext {
-    visibility: hidden;
-    width: 120px;
-    background-color: black;
-    color: #fff;
-    text-align: center;
-    padding: 5px 0;
-    border-radius: 6px;
-    position: absolute;
-    z-index: 1;
-    bottom: 100%;
-    left: 50%;
-    margin-left: -60px;
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.tooltip:hover .tooltiptext {
-    visibility: visible;
-    opacity: 1;
-}
-</style>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index d81a2ddf..4853a2df 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -4,6 +4,7 @@ import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 import ConfirmationService from 'primevue/confirmationservice';
 import Ripple from 'primevue/ripple';
+import Tooltip from 'primevue/tooltip';
 import { i18n } from '@/config/i18n.ts';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
@@ -22,6 +23,8 @@ app.use(ConfirmationService);
 
 /* Bind app directives */
 app.directive('ripple', Ripple);
+app.directive('tooltip', Tooltip);
+
 
 /* Mount the application */
 app.mount('#app');
diff --git a/frontend/src/views/courses/roles/AssistantCourseView.vue b/frontend/src/views/courses/roles/AssistantCourseView.vue
index 7921b19d..a3fd2a4a 100644
--- a/frontend/src/views/courses/roles/AssistantCourseView.vue
+++ b/frontend/src/views/courses/roles/AssistantCourseView.vue
@@ -2,7 +2,6 @@
 import Title from '@/components/layout/Title.vue';
 import ProjectList from '@/components/projects/ProjectList.vue';
 import TeacherAssistantList from '@/components/teachers_assistants/TeacherAssistantList.vue';
-import TooltipHover from '@/components/TooltipHover.vue';
 import { type Course } from '@/types/Course.ts';
 import { useI18n } from 'vue-i18n';
 import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
@@ -30,9 +29,9 @@ const { t } = useI18n();
         <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
 
         <!-- Create project button -->
-        <TooltipHover text="views.projects.create">
+        <div v-tooltip.top="t('views.projects.create')">
             <ProjectCreateButton :courses="[props.course]" />
-        </TooltipHover>
+        </div>
     </div>
     <!-- Project list body -->
     <ProjectList :courses="[course]" />
diff --git a/frontend/src/views/courses/roles/TeacherCourseView.vue b/frontend/src/views/courses/roles/TeacherCourseView.vue
index 115d389b..25bd58fc 100644
--- a/frontend/src/views/courses/roles/TeacherCourseView.vue
+++ b/frontend/src/views/courses/roles/TeacherCourseView.vue
@@ -2,7 +2,6 @@
 import Title from '@/components/layout/Title.vue';
 import ProjectList from '@/components/projects/ProjectList.vue';
 import TeacherAssistantList from '@/components/teachers_assistants/TeacherAssistantList.vue';
-import TooltipHover from '@/components/TooltipHover.vue';
 import Button from 'primevue/button';
 import ButtonGroup from 'primevue/buttongroup';
 import InputSwitch from 'primevue/inputswitch';
@@ -53,7 +52,7 @@ const handleClone = async (): Promise<void> => {
 
         <ButtonGroup class="flex align-items-center space-x-2">
             <!-- Update course button -->
-            <TooltipHover text="views.courses.edit">
+            <div v-tooltip.top="t('views.courses.edit')">
                 <RouterLink :to="{ name: 'course-edit', params: { courseId: props.course.id } }">
                     <Button
                         :icon="PrimeIcons.PENCIL"
@@ -62,10 +61,10 @@ const handleClone = async (): Promise<void> => {
                         style="height: 51px; width: 51px; margin-right: 10px"
                     />
                 </RouterLink>
-            </TooltipHover>
+            </div>
 
             <!-- Clone button to clone the course -->
-            <TooltipHover text="views.courses.clone">
+            <div v-tooltip.top="t('views.courses.clone')">
                 <ConfirmDialog>
                     <template #container="{ message, acceptCallback, rejectCallback }">
                         <div class="flex flex-column p-5 surface-overlay border-round" style="max-width: 600px">
@@ -95,7 +94,7 @@ const handleClone = async (): Promise<void> => {
                     style="height: 51px; width: 51px"
                     @click="handleClone()"
                 />
-            </TooltipHover>
+            </div>
         </ButtonGroup>
     </div>
     <!-- Description -->
@@ -106,9 +105,9 @@ const handleClone = async (): Promise<void> => {
         <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
 
         <!-- Create project button -->
-        <TooltipHover text="views.projects.create">
+        <div v-tooltip.top="t('views.projects.create')">
             <ProjectCreateButton :courses="[props.course]" />
-        </TooltipHover>
+        </div>
     </div>
     <!-- Project list body -->
     <ProjectList :courses="[course]" />
@@ -117,9 +116,9 @@ const handleClone = async (): Promise<void> => {
     <div class="flex justify-content-between align-items-center my-6">
         <Title class="m-0">{{ t('views.courses.teachers_and_assistants.title') }}</Title>
 
-        <TooltipHover text="views.courses.teachers_and_assistants.edit">
+       <div v-tooltip.top="t('views.courses.teachers_and_assistants.edit')">
             <TeacherAssistantUpdateButton :course="props.course" />
-        </TooltipHover>
+       </div>
     </div>
     <!-- List with teachers and assistants -->
     <TeacherAssistantList :course="props.course" :users="course.teachers.concat(course.assistants)" />