diff --git a/apps/wizarr-frontend/src/assets/scss/main.scss b/apps/wizarr-frontend/src/assets/scss/main.scss
index 491b7cf52..0bd4d62d5 100644
--- a/apps/wizarr-frontend/src/assets/scss/main.scss
+++ b/apps/wizarr-frontend/src/assets/scss/main.scss
@@ -182,24 +182,4 @@ button[disabled],
     .Vue-Toastification__toast {
         margin-bottom: 0px !important;
     }
-}
-
-
-button {
-    position: relative;
-}
-button .ext-label {
-    position: absolute;
-    background: #1f2937;
-    color: white;
-    border-radius: 5px;
-    left: -100%;
-    top: 100%;
-    padding: 1rem;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 200ms;
-}
-button:hover .ext-label {
-    opacity: 1;
 }
\ No newline at end of file
diff --git a/apps/wizarr-frontend/src/components/Buttons/AccountButton.vue b/apps/wizarr-frontend/src/components/Buttons/AccountButton.vue
index 65e94c2a0..92f6c2f00 100644
--- a/apps/wizarr-frontend/src/components/Buttons/AccountButton.vue
+++ b/apps/wizarr-frontend/src/components/Buttons/AccountButton.vue
@@ -1,9 +1,13 @@
 <template>
-    <RouterLink as="button" to="/admin/settings/account" class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button">
-        <div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
-            <i class="fa-solid fa-md fa-user"></i>
-        </div>
-        
-        <span class="ext-label">Account</span>
-    </RouterLink>
+    <VTooltip>
+        <RouterLink as="button" to="/admin/settings/account" class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button">
+            <div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
+                <i class="fa-solid fa-md fa-user"></i>
+            </div>
+        </RouterLink>
+
+        <template #popper>
+            <span>{{ __("Account") }}</span>
+        </template>
+    </VTooltip>
 </template>
diff --git a/apps/wizarr-frontend/src/components/Buttons/LanguageSelector.vue b/apps/wizarr-frontend/src/components/Buttons/LanguageSelector.vue
index f650570c6..f3fe8b0b1 100644
--- a/apps/wizarr-frontend/src/components/Buttons/LanguageSelector.vue
+++ b/apps/wizarr-frontend/src/components/Buttons/LanguageSelector.vue
@@ -1,10 +1,15 @@
 <template>
-    <button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="createModal">
-        <div :class="iconClasses" class="flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
-            <i class="fa-solid fa-md fa-globe"></i>
-        </div>
-        <span class="ext-label">Change Language</span>
-    </button>
+    <VTooltip>
+        <button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="createModal">
+            <div :class="iconClasses" class="flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
+                <i class="fa-solid fa-md fa-globe"></i>
+            </div>
+        </button>
+
+        <template #popper>
+            <span>{{ __("Language") }}</span>
+        </template>
+    </VTooltip>
 </template>
 
 <script lang="ts">
diff --git a/apps/wizarr-frontend/src/components/Buttons/LogoutButton.vue b/apps/wizarr-frontend/src/components/Buttons/LogoutButton.vue
index bfc605eb6..ad3810ca6 100644
--- a/apps/wizarr-frontend/src/components/Buttons/LogoutButton.vue
+++ b/apps/wizarr-frontend/src/components/Buttons/LogoutButton.vue
@@ -1,11 +1,15 @@
 <template>
-    <button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="logout">
-        <div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
-            <i class="fa-solid fa-lg fa-right-from-bracket"></i>
-        </div>
-    </button>
+    <VTooltip>
+        <button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="logout">
+            <div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
+                <i class="fa-solid fa-lg fa-right-from-bracket"></i>
+            </div>
+        </button>
 
-    <span class="ext-label">Logout</span>
+        <template #popper>
+            <span>{{ __("Logout") }}</span>
+        </template>
+    </VTooltip>
 </template>
 
 <script lang="ts">
diff --git a/apps/wizarr-frontend/src/components/Buttons/ThemeToggle.vue b/apps/wizarr-frontend/src/components/Buttons/ThemeToggle.vue
index 668835dc4..bd745036d 100644
--- a/apps/wizarr-frontend/src/components/Buttons/ThemeToggle.vue
+++ b/apps/wizarr-frontend/src/components/Buttons/ThemeToggle.vue
@@ -1,12 +1,17 @@
 <template>
-    <button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="toggleTheme">
-        <div :class="iconClasses" class="flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
-            <i v-if="theme == DARK_VALUE" class="fa-solid fa-md fa-cloud-moon"></i>
-            <i v-if="theme == LIGHT_VALUE" class="fa-solid fa-md fa-sun"></i>
-            <i v-if="theme == SYSTEM_VALUE" class="fa-solid fa-md fa-desktop"></i>
-        </div>
-        <span class="ext-label">Change Theme</span>
-    </button>
+    <VTooltip>
+        <button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="toggleTheme">
+            <div :class="iconClasses" class="flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
+                <i v-if="theme == DARK_VALUE" class="fa-solid fa-md fa-cloud-moon"></i>
+                <i v-if="theme == LIGHT_VALUE" class="fa-solid fa-md fa-sun"></i>
+                <i v-if="theme == SYSTEM_VALUE" class="fa-solid fa-md fa-desktop"></i>
+            </div>
+        </button>
+
+        <template #popper>
+            <span>{{ __("Change Theme") }}</span>
+        </template>
+    </VTooltip>
 </template>
 
 
diff --git a/apps/wizarr-frontend/src/components/Buttons/ViewToggle.vue b/apps/wizarr-frontend/src/components/Buttons/ViewToggle.vue
index d145a3e6b..cbc360c80 100644
--- a/apps/wizarr-frontend/src/components/Buttons/ViewToggle.vue
+++ b/apps/wizarr-frontend/src/components/Buttons/ViewToggle.vue
@@ -1,15 +1,19 @@
 <template>
-    <button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="toggleBoxView">
-        <div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
-            <!-- Box Icon -->
-            <i v-if="boxView" class="fas fa-box"></i>
+    <VTooltip>
+        <button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="toggleBoxView">
+            <div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
+                <!-- Box Icon -->
+                <i v-if="boxView" class="fas fa-box"></i>
 
-            <!-- List Icon -->
-            <i v-else class="fas fa-list"></i>
-        </div>
+                <!-- List Icon -->
+                <i v-else class="fas fa-list"></i>
+            </div>
+        </button>
 
-        <span class="ext-label">Toggle Box View</span>
-    </button>
+        <template #popper>
+            <span>{{ __("Toggle View") }}</span>
+        </template>
+    </VTooltip>
 </template>
 
 <script lang="ts">
diff --git a/package-lock.json b/package-lock.json
index 47c31a053..94ea0bf00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@wizarrrr/source",
-    "version": "3.5.0",
+    "version": "4.0.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@wizarrrr/source",
-            "version": "3.5.0",
+            "version": "4.0.0",
             "hasInstallScript": true,
             "license": "MIT",
             "workspaces": [
@@ -55,7 +55,7 @@
                 "currency-symbol-map": "^5.1.0",
                 "feather-icons": "^4.29.1",
                 "firebase": "^10.3.1",
-                "floating-vue": "^2.0.0-beta.24",
+                "floating-vue": "^2.0.0",
                 "flowbite": "^1.8.1",
                 "gridstack": "^9.2.0",
                 "jenesius-vue-modal": "^1.9.2",
@@ -25408,9 +25408,9 @@
             "dev": true
         },
         "node_modules/floating-vue": {
-            "version": "2.0.0-beta.24",
-            "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.24.tgz",
-            "integrity": "sha512-URSzP6YXaF4u1oZ9XGL8Sn8puuM7ivp5jkOUrpy5Q1mfo9BfGppJOn+ierTmsSUfJEeHBae8KT7r5DeI3vQIEw==",
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0.tgz",
+            "integrity": "sha512-YSffLYOjoaaPPBZc7VQR2qMCQ7xeXuh7i8a2u8WOdSmkjTtKtZpj2aaJnLtZRHmehrMHyCgtSxLu8jFNNX2sVw==",
             "dependencies": {
                 "@floating-ui/dom": "~1.1.1",
                 "vue-resize": "^2.0.0-alpha.1"
diff --git a/package.json b/package.json
index 4dea4995a..66c83851c 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
         "currency-symbol-map": "^5.1.0",
         "feather-icons": "^4.29.1",
         "firebase": "^10.3.1",
-        "floating-vue": "^2.0.0-beta.24",
+        "floating-vue": "^2.0.0",
         "flowbite": "^1.8.1",
         "gridstack": "^9.2.0",
         "jenesius-vue-modal": "^1.9.2",