diff --git a/package.json b/package.json
index 20229aa19..8cc239293 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
         "typescript-eslint": "^8.23.0"
     },
     "dependencies": {
-        "@headlessui/react": "^2.2.0",
         "@inertiajs/react": "^2.0.0",
         "@radix-ui/react-avatar": "^1.1.3",
         "@radix-ui/react-checkbox": "^1.1.4",
diff --git a/resources/js/pages/settings/password.tsx b/resources/js/pages/settings/password.tsx
index 43540bb1b..0f929a92c 100644
--- a/resources/js/pages/settings/password.tsx
+++ b/resources/js/pages/settings/password.tsx
@@ -2,7 +2,6 @@ import InputError from '@/components/input-error';
 import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
 import { type BreadcrumbItem } from '@/types';
-import { Transition } from '@headlessui/react';
 import { Head, useForm } from '@inertiajs/react';
 import { FormEventHandler, useRef } from 'react';
 
@@ -110,15 +109,13 @@ export default function Password() {
                         <div className="flex items-center gap-4">
                             <Button disabled={processing}>Save password</Button>
 
-                            <Transition
-                                show={recentlySuccessful}
-                                enter="transition ease-in-out"
-                                enterFrom="opacity-0"
-                                leave="transition ease-in-out"
-                                leaveTo="opacity-0"
+                            <p
+                              className={`text-sm text-neutral-600 transition-opacity duration-500 ${
+                                recentlySuccessful ? 'opacity-100' : 'opacity-0'
+                              }`}
                             >
-                                <p className="text-sm text-neutral-600">Saved</p>
-                            </Transition>
+                              Saved
+                            </p>
                         </div>
                     </form>
                 </div>
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx
index 3aeed3a7b..67a60099d 100644
--- a/resources/js/pages/settings/profile.tsx
+++ b/resources/js/pages/settings/profile.tsx
@@ -1,5 +1,4 @@
 import { type BreadcrumbItem, type SharedData } from '@/types';
-import { Transition } from '@headlessui/react';
 import { Head, Link, useForm, usePage } from '@inertiajs/react';
 import { FormEventHandler } from 'react';
 
@@ -107,15 +106,13 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
                         <div className="flex items-center gap-4">
                             <Button disabled={processing}>Save</Button>
 
-                            <Transition
-                                show={recentlySuccessful}
-                                enter="transition ease-in-out"
-                                enterFrom="opacity-0"
-                                leave="transition ease-in-out"
-                                leaveTo="opacity-0"
+                            <p
+                              className={`text-sm text-neutral-600 transition-opacity duration-500 ${
+                                recentlySuccessful ? 'opacity-100' : 'opacity-0'
+                              }`}
                             >
-                                <p className="text-sm text-neutral-600">Saved</p>
-                            </Transition>
+                              Saved
+                            </p>
                         </div>
                     </form>
                 </div>