diff --git a/package-lock.json b/package-lock.json
index 0421eb2f..524714a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,6 @@
     "packages": {
         "": {
             "dependencies": {
-                "@headlessui/vue": "^1.7.23",
                 "@inertiajs/vue3": "^2.0.0-beta.3",
                 "@vitejs/plugin-vue": "^5.2.1",
                 "@vueuse/core": "^12.0.0",
@@ -727,21 +726,6 @@
                 }
             }
         },
-        "node_modules/@headlessui/vue": {
-            "version": "1.7.23",
-            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.23.tgz",
-            "integrity": "sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==",
-            "license": "MIT",
-            "dependencies": {
-                "@tanstack/vue-virtual": "^3.0.0-beta.60"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "peerDependencies": {
-                "vue": "^3.2.0"
-            }
-        },
         "node_modules/@humanfs/core": {
             "version": "0.19.1",
             "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
diff --git a/package.json b/package.json
index 280adc6a..b6b68f3a 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
         "vue-tsc": "^2.2.4"
     },
     "dependencies": {
-        "@headlessui/vue": "^1.7.23",
         "@inertiajs/vue3": "^2.0.0-beta.3",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vueuse/core": "^12.0.0",
diff --git a/resources/js/pages/settings/Password.vue b/resources/js/pages/settings/Password.vue
index dd5b1114..f4c35c11 100644
--- a/resources/js/pages/settings/Password.vue
+++ b/resources/js/pages/settings/Password.vue
@@ -2,7 +2,6 @@
 import InputError from '@/components/InputError.vue';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
-import { TransitionRoot } from '@headlessui/vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { ref } from 'vue';
 
@@ -104,15 +103,14 @@ const updatePassword = () => {
                     <div class="flex items-center gap-4">
                         <Button :disabled="form.processing">Save password</Button>
 
-                        <TransitionRoot
-                            :show="form.recentlySuccessful"
-                            enter="transition ease-in-out"
-                            enter-from="opacity-0"
-                            leave="transition ease-in-out"
-                            leave-to="opacity-0"
+                        <Transition
+                            enter-active-class="transition ease-in-out"
+                            enter-from-class="opacity-0"
+                            leave-active-class="transition ease-in-out"
+                            leave-to-class="opacity-0"
                         >
-                            <p class="text-sm text-neutral-600">Saved</p>
-                        </TransitionRoot>
+                            <p v-show="form.recentlySuccessful" class="text-sm text-neutral-600">Saved.</p>
+                        </Transition>
                     </div>
                 </form>
             </div>
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index e580ded3..e37234f7 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { TransitionRoot } from '@headlessui/vue';
 import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
 
 import DeleteUser from '@/components/DeleteUser.vue';
@@ -91,15 +90,14 @@ const submit = () => {
                     <div class="flex items-center gap-4">
                         <Button :disabled="form.processing">Save</Button>
 
-                        <TransitionRoot
-                            :show="form.recentlySuccessful"
-                            enter="transition ease-in-out"
-                            enter-from="opacity-0"
-                            leave="transition ease-in-out"
-                            leave-to="opacity-0"
+                        <Transition
+                            enter-active-class="transition ease-in-out"
+                            enter-from-class="opacity-0"
+                            leave-active-class="transition ease-in-out"
+                            leave-to-class="opacity-0"
                         >
-                            <p class="text-sm text-neutral-600">Saved.</p>
-                        </TransitionRoot>
+                            <p v-show="form.recentlySuccessful" class="text-sm text-neutral-600">Saved.</p>
+                        </Transition>
                     </div>
                 </form>
             </div>