diff --git a/app/components/content/HoverText.vue b/app/components/content/HoverText.vue
index 067a0d9..6a17b76 100644
--- a/app/components/content/HoverText.vue
+++ b/app/components/content/HoverText.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { Placement } from '@popperjs/core'
 import type { PropType } from 'vue'
 
 defineProps({
@@ -12,7 +11,7 @@ defineProps({
     required: true
   },
   position: {
-    type: String as PropType<Placement>
+    type: String as PropType<'top' | 'right' | 'bottom' | 'left'>
   }
 })
 </script>
diff --git a/content/index.md b/content/index.md
index 59e709e..cdc9976 100644
--- a/content/index.md
+++ b/content/index.md
@@ -5,7 +5,8 @@ understanding the
 concepts and theories behind these :hover-text{hover="My second passion 📱" text="technologies"} and in designing them
 effectively.
 
-As a software engineer and mathematics student, my :hover-text{hover="My bag of knowledges 🎒" text="expertise"} covers :prose-icon[TypeScript]{icon="i-logos:typescript-icon"},
+As a software engineer and mathematics student, my :hover-text{hover="My bag of knowledge 🎒" text="expertise"} covers :
+prose-icon[TypeScript]{icon="i-logos:typescript-icon"},
 :prose-icon[Vue]{icon="i-logos:vue"},
 :prose-icon[Nuxt]{icon="i-logos:nuxt-icon"},
 :prose-icon[Adonis]{icon="i-logos:adonisjs-icon"},