diff --git a/web/src/pages/users/UserProfile/ProfileDetails/ProfileDetailsForm/ProfileDetailsForm.tsx b/web/src/pages/users/UserProfile/ProfileDetails/ProfileDetailsForm/ProfileDetailsForm.tsx
index b2850a79ef..41c1d7ab4e 100644
--- a/web/src/pages/users/UserProfile/ProfileDetails/ProfileDetailsForm/ProfileDetailsForm.tsx
+++ b/web/src/pages/users/UserProfile/ProfileDetails/ProfileDetailsForm/ProfileDetailsForm.tsx
@@ -11,6 +11,9 @@ import { z } from 'zod';
 import { useI18nContext } from '../../../../../i18n/i18n-react';
 import { FormInput } from '../../../../../shared/defguard-ui/components/Form/FormInput/FormInput';
 import { FormSelect } from '../../../../../shared/defguard-ui/components/Form/FormSelect/FormSelect';
+import { Button } from '../../../../../shared/defguard-ui/components/Layout/Button/Button';
+import { ButtonStyleVariant } from '../../../../../shared/defguard-ui/components/Layout/Button/types';
+import { ModalWithTitle } from '../../../../../shared/defguard-ui/components/Layout/modals/ModalWithTitle/ModalWithTitle';
 import { useAppStore } from '../../../../../shared/hooks/store/useAppStore';
 import { useAuthStore } from '../../../../../shared/hooks/store/useAuthStore';
 import { useUserProfileStore } from '../../../../../shared/hooks/store/useUserProfileStore';
@@ -27,9 +30,7 @@ import { OAuth2AuthorizedApps } from '../../../../../shared/types';
 import { omitNull } from '../../../../../shared/utils/omitNull';
 import { titleCase } from '../../../../../shared/utils/titleCase';
 import { trimObjectStrings } from '../../../../../shared/utils/trimObjectStrings';
-import { useProfileDetailsWarningModal } from './hooks/useProfileDetailsWarningModal';
 import { ProfileDetailsFormAppsField } from './ProfileDetailsFormAppsField';
-import { ProfileDetailsWarningModals } from './ProfileDetailsWarningModals';
 
 interface Inputs {
   username: string;
@@ -63,14 +64,14 @@ export const ProfileDetailsForm = () => {
   const queryClient = useQueryClient();
   const isAdmin = useAuthStore((state) => state.isAdmin);
   const isMe = useUserProfileStore((state) => state.isMe);
-  const [fetchGroups, setFetchGroups] = useState(false);
+  const [fetchGroups] = useState(false);
   const {
     user: { editUser },
     groups: { getGroups },
   } = useApi();
   const { username: paramsUsername } = useParams();
   const navigate = useNavigate();
-  const warningModals = useProfileDetailsWarningModal((state) => state);
+  const [usernameChangeWarning, setUsernameChangeWarning] = useState(false);
 
   const zodSchema = useMemo(
     () =>
@@ -209,31 +210,48 @@ export const ProfileDetailsForm = () => {
   useEffect(() => {
     if (submitButton && submitButton.current) {
       const sub = submitSubject.subscribe(() => {
+        if (getValues().username !== userProfile?.user.username) {
+          setUsernameChangeWarning(true);
+          return;
+        }
         submitButton.current?.click();
       });
       return () => sub.unsubscribe();
     }
-  }, [submitSubject]);
-
-  useEffect(() => {
-    setTimeout(() => setFetchGroups(true), 500);
-    warningModals.reset();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [submitSubject, getValues, userProfile?.user.username]);
 
   return (
     <>
-      <ProfileDetailsWarningModals />
       <form onSubmit={handleSubmit(onValidSubmit, onInvalidSubmit)}>
+        <ModalWithTitle
+          className="change-warning-modal"
+          backdrop
+          isOpen={usernameChangeWarning}
+          onClose={() => {
+            setUsernameChangeWarning(false);
+          }}
+          title="Warning"
+        >
+          <p>{LL.userPage.userDetails.warningModals.content.usernameChange()}</p>
+          <div className="buttons">
+            <Button
+              text={LL.userPage.userDetails.warningModals.buttons.proceed()}
+              styleVariant={ButtonStyleVariant.DELETE}
+              onClick={() => {
+                setUsernameChangeWarning(false);
+                submitButton.current?.click();
+              }}
+            />
+            <Button
+              onClick={() => {
+                setUsernameChangeWarning(false);
+              }}
+              text={LL.userPage.userDetails.warningModals.buttons.cancel()}
+            />
+          </div>
+        </ModalWithTitle>
         <div className="row">
-          <div
-            className="item"
-            onClick={() => {
-              if (!userEditLoading && isAdmin && !warningModals.usernameChange.accepted) {
-                warningModals.open('usernameChange');
-              }
-            }}
-          >
+          <div className="item">
             <FormInput
               label={LL.userPage.userDetails.fields.username.label()}
               controller={{ control, name: 'username' }}
@@ -272,14 +290,7 @@ export const ProfileDetailsForm = () => {
           </div>
         </div>
         <div className="row">
-          <div
-            className="item"
-            onClick={() => {
-              if (!userEditLoading && isAdmin && !warningModals.emailChange.accepted) {
-                warningModals.open('emailChange');
-              }
-            }}
-          >
+          <div className="item">
             <FormInput
               label={LL.userPage.userDetails.fields.email.label()}
               controller={{ control, name: 'email' }}
diff --git a/web/src/pages/users/UserProfile/ProfileDetails/ProfileDetailsForm/ProfileDetailsWarningModals.tsx b/web/src/pages/users/UserProfile/ProfileDetails/ProfileDetailsForm/ProfileDetailsWarningModals.tsx
deleted file mode 100644
index e6134314b0..0000000000
--- a/web/src/pages/users/UserProfile/ProfileDetails/ProfileDetailsForm/ProfileDetailsWarningModals.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import './style.scss';
-
-import { useI18nContext } from '../../../../../i18n/i18n-react';
-import { Button } from '../../../../../shared/defguard-ui/components/Layout/Button/Button';
-import { ButtonStyleVariant } from '../../../../../shared/defguard-ui/components/Layout/Button/types';
-import { ModalWithTitle } from '../../../../../shared/defguard-ui/components/Layout/modals/ModalWithTitle/ModalWithTitle';
-import { useProfileDetailsWarningModal } from './hooks/useProfileDetailsWarningModal';
-
-export const ProfileDetailsWarningModals = () => {
-  const warningModals = useProfileDetailsWarningModal((state) => state);
-  const { LL } = useI18nContext();
-  const localLL = LL.userPage.userDetails.warningModals;
-
-  return (
-    <>
-      <ModalWithTitle
-        className="change-warning-modal"
-        backdrop
-        isOpen={warningModals.usernameChange.open}
-        onClose={() => warningModals.close('usernameChange')}
-        title="Warning"
-      >
-        <p>{localLL.content.usernameChange()}</p>
-        <div className="buttons">
-          <Button
-            onClick={() => warningModals.accept('usernameChange')}
-            text={localLL.buttons.proceed()}
-            styleVariant={ButtonStyleVariant.DELETE}
-          />
-          <Button
-            onClick={() => warningModals.close('usernameChange')}
-            text={localLL.buttons.cancel()}
-          />
-        </div>
-      </ModalWithTitle>
-      <ModalWithTitle
-        className="change-warning-modal"
-        backdrop
-        isOpen={warningModals.emailChange.open}
-        onClose={() => warningModals.close('emailChange')}
-        title="Warning"
-      >
-        <p>{localLL.content.emailChange()}</p>
-        <div className="buttons">
-          <Button
-            onClick={() => warningModals.accept('emailChange')}
-            text={localLL.buttons.proceed()}
-            styleVariant={ButtonStyleVariant.DELETE}
-          />
-          <Button
-            onClick={() => warningModals.close('emailChange')}
-            text={localLL.buttons.cancel()}
-          />
-        </div>
-      </ModalWithTitle>
-    </>
-  );
-};
diff --git a/web/src/pages/users/UserProfile/ProfileDetails/ProfileDetailsForm/hooks/useProfileDetailsWarningModal.tsx b/web/src/pages/users/UserProfile/ProfileDetails/ProfileDetailsForm/hooks/useProfileDetailsWarningModal.tsx
deleted file mode 100644
index 98a6010f8e..0000000000
--- a/web/src/pages/users/UserProfile/ProfileDetails/ProfileDetailsForm/hooks/useProfileDetailsWarningModal.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { createWithEqualityFn } from 'zustand/traditional';
-
-const defaultValues: StoreValues = {
-  emailChange: {
-    open: false,
-    accepted: false,
-  },
-  usernameChange: {
-    open: false,
-    accepted: false,
-  },
-};
-
-export const useProfileDetailsWarningModal = createWithEqualityFn<Store>(
-  (set) => ({
-    ...defaultValues,
-    open: (modal) => set({ [modal]: { open: true, accepted: false } }),
-    close: (modal) => set({ [modal]: { open: false, accepted: false } }),
-    accept: (modal) => set({ [modal]: { open: false, accepted: true } }),
-    reset: () => set(defaultValues),
-  }),
-  Object.is,
-);
-
-type Store = StoreValues & StoreMethods;
-
-type StoreValues = {
-  emailChange: {
-    open: boolean;
-    accepted: boolean;
-  };
-  usernameChange: {
-    open: boolean;
-    accepted: boolean;
-  };
-};
-
-type StoreMethods = {
-  open: (modal: 'usernameChange' | 'emailChange') => void;
-  close: (modal: 'usernameChange' | 'emailChange') => void;
-  accept: (modal: 'usernameChange' | 'emailChange') => void;
-  reset: () => void;
-};