diff --git a/src/auth/pages/jwt/Login.tsx b/src/auth/pages/jwt/Login.tsx
index f15ae46..fec6898 100644
--- a/src/auth/pages/jwt/Login.tsx
+++ b/src/auth/pages/jwt/Login.tsx
@@ -17,12 +17,16 @@ const loginSchema = Yup.object().shape({
     .min(3, 'Minimum 3 symbols')
     .max(50, 'Maximum 50 symbols')
     .required('Password is required'),
+  token: Yup.string(),
+  // .max(3, 'Maximum 6 code'),
+  // .required('Token is required'),
   remember: Yup.boolean()
 });
 
 const initialValues = {
   username: '',
   password: '',
+  token: '',
   remember: false
 };
 
@@ -43,7 +47,7 @@ const Login = () => {
 
       try {
         if (!login) throw new Error('JWTProvider is required for this form.');
-        await login(values.username, values.password);
+        await login(values.username, values.password, values.token);
 
         if (values.remember) {
           localStorage.setItem('username', values.username);
@@ -141,6 +145,33 @@ const Login = () => {
             )}
           </div>
 
+          <div className="flex flex-col gap-1">
+            <label className="form-label text-gray-900 ps-2.5">Code Verify</label>
+            <label className="input">
+              <input
+                placeholder="Enter code verify"
+                type="text"
+                inputMode="numeric"
+                autoComplete="off"
+                maxLength={6}
+                {...formik.getFieldProps('token')}
+                className={clsx('form-control', {
+                  'is-invalid': formik.touched.token && formik.errors.token
+                })}
+                onKeyPress={(e) => {
+                  if (!/[0-9]/.test(e.key)) {
+                    e.preventDefault();
+                  }
+                }}
+              />
+            </label>
+            {formik.touched.token && formik.errors.token && (
+              <span role="alert" className="text-danger text-xs mt-1">
+                {formik.errors.token}
+              </span>
+            )}
+          </div>
+
           <div className="flex items-center justify-between gap-1">
             <label className="checkbox-group">
               <input
diff --git a/src/auth/providers/JWTProvider.tsx b/src/auth/providers/JWTProvider.tsx
index 8cba25e..b580279 100644
--- a/src/auth/providers/JWTProvider.tsx
+++ b/src/auth/providers/JWTProvider.tsx
@@ -28,7 +28,7 @@ interface AuthContextProps {
   saveAuth: (auth: AuthModel | undefined) => void;
   currentUser: UserModel | undefined;
   setCurrentUser: Dispatch<SetStateAction<UserModel | undefined>>;
-  login: (email: string, password: string) => Promise<void>;
+  login: (email: string, password: string, token?: string) => Promise<void>;
   requestPasswordResetLink: (email: string) => Promise<void>;
   changePassword: (token: string, password: string, password_confirmation: string) => Promise<void>;
   getUser: () => Promise<AxiosResponse<any> | {}>;
@@ -52,10 +52,10 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
     }
   };
 
-  const login = async (username: string, password: string) => {
+  const login = async (username: string, password: string, token?: string) => {
     try {
       const { data: auth } = await axios
-        .post(LOGIN_URL, { username, password })
+        .post(LOGIN_URL, { username, password, token })
         .then((response) => response.data);
 
       const enhancedAuth: AuthModel = {
@@ -63,7 +63,7 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
         id: auth.user.id,
         role_name: auth.role_name,
         user: auth.user,
-        statusbalance: auth.role?.status_balance ?? null  // SAFE ACCESS
+        statusbalance: auth.role?.status_balance ?? null // SAFE ACCESS
       };
 
       saveAuth(enhancedAuth);
@@ -161,4 +161,4 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
   );
 };
 
-export { AuthContext, AuthProvider };
\ No newline at end of file
+export { AuthContext, AuthProvider };
diff --git a/src/pages/account/home/user-profile/AccountUserProfileContent.tsx b/src/pages/account/home/user-profile/AccountUserProfileContent.tsx
index b971b5e..45cec39 100644
--- a/src/pages/account/home/user-profile/AccountUserProfileContent.tsx
+++ b/src/pages/account/home/user-profile/AccountUserProfileContent.tsx
@@ -1,17 +1,32 @@
 import { BasicSettings, Password } from './blocks';
+import GenerateQr from './blocks/GenerateQr';
 import { PinCode } from './blocks/PinCode';
 import { AccountUserProfileContextProvider } from './hooks';
 
 const AccountUserProfileContent = () => {
   return (
-    <div className="grid gap-5 lg:gap-7.5 xl:w-[38.75rem] mx-auto">
-      <AccountUserProfileContextProvider>
-        {/* <BasicSettings /> */}
-        <Password />
-        <PinCode />
-        {/* Uncomment the line below to enable the Delete Account feature */}
-        {/* <DeleteAccount /> */}
-      </AccountUserProfileContextProvider>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-red-100 rounded-lg">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">Account Settings</h1>
+          <p className="text-gray-600">Manage your security preferences and account settings</p>
+        </div>
+
+        <AccountUserProfileContextProvider>
+          <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
+            {/* Left Column - Security Settings */}
+            <div className="xl:col-span-2 space-y-6">
+              <Password />
+              <PinCode />
+            </div>
+
+            {/* Right Column - MFA Setup */}
+            <div className="xl:col-span-1">
+              <GenerateQr />
+            </div>
+          </div>
+        </AccountUserProfileContextProvider>
+      </div>
     </div>
   );
 };
diff --git a/src/pages/account/home/user-profile/blocks/GenerateQr.tsx b/src/pages/account/home/user-profile/blocks/GenerateQr.tsx
new file mode 100644
index 0000000..a656cb0
--- /dev/null
+++ b/src/pages/account/home/user-profile/blocks/GenerateQr.tsx
@@ -0,0 +1,220 @@
+import { getAuth } from '@/auth';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { RefreshCw, Shield, Smartphone, QrCode } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import clsx from 'clsx';
+
+const API_URL = apiConfig.service_dashboard;
+
+const GenerateQr = () => {
+  const { GetData, PostData } = useCallApi();
+  const parsedUser = getAuth()?.user;
+  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);
+  const [inputToken, setInputToken] = useState('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const getQrCode = async () => {
+    if (!parsedUser?.id) {
+      toast.error('User ID not found');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await GetData(`${API_URL}/user/generate_mfa/${parsedUser.id}`, {});
+      if (response?.status) {
+        setQrCodeUrl(response.data.token_base64);
+        toast.success('QR Code generated successfully');
+      } else {
+        setError('QR Code not found');
+        toast.error(response?.message);
+      }
+    } catch (error) {
+      toast.error('Something went wrong, please try again');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const verifyToken = async () => {
+    if (!parsedUser?.id) {
+      toast.error('User ID not found');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await PostData(`${API_URL}/user/verify_mfa`, {
+        id: parsedUser.id,
+        token: inputToken
+      });
+
+      if (response?.status) {
+        toast.success('Token verified successfully');
+        setInputToken('');
+      } else {
+        toast.error(response?.message);
+      }
+    } catch (error) {
+      toast.error('Something went wrong, please try again');
+    } finally {
+      setIsSubmitting(false);
+      setQrCodeUrl(null);
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition-shadow duration-300 h-fit">
+      <div className="bg-gradient-to-r from-red-600 to-pink-600 px-6 py-4">
+        <div className="flex items-center space-x-3">
+          <div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
+            <Shield className="text-white w-4 h-4" />
+          </div>
+          <h3 className="text-xl font-semibold text-white">Multi-Factor Authentication</h3>
+        </div>
+      </div>
+
+      <div className="p-6">
+        {!qrCodeUrl ? (
+          // Initial Setup State
+          <div className="text-center space-y-6">
+            <div className="w-16 h-16 bg-red-100 rounded-2xl flex items-center justify-center mx-auto">
+              <Smartphone className="w-8 h-8 text-red-600" />
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="text-lg font-semibold text-gray-900">Secure Your Account</h4>
+              <p className="text-gray-600 text-sm leading-relaxed">
+                Add an extra layer of security to your account with multi-factor authentication
+                using your mobile device.
+              </p>
+            </div>
+
+            <div className="bg-gradient-to-r from-red-50 to-pink-50 rounded-xl p-4 border border-red-100">
+              <div className="flex items-start space-x-3">
+                <div className="w-6 h-6 bg-red-600 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                  <span className="text-white text-xs font-bold">1</span>
+                </div>
+                <div className="text-left">
+                  <p className="text-sm font-medium text-gray-900">Download an authenticator app</p>
+                  <p className="text-xs text-gray-600 mt-1">
+                    Google Authenticator{' '}
+                    <a
+                      href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
+                      target="_blank"
+                      className="underline text-red-400 hover:text-red-500"
+                    >
+                      click here
+                    </a>
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <button
+              onClick={getQrCode}
+              disabled={loading}
+              className={clsx(
+                'w-full py-3 px-6 rounded-xl font-medium transition-all duration-200 flex items-center justify-center space-x-2',
+                loading
+                  ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                  : 'bg-gradient-to-r from-red-600 to-pink-600 text-white hover:from-red-700 hover:to-pink-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5'
+              )}
+            >
+              {loading ? (
+                <>
+                  <div className="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin"></div>
+                  <span>Generating QR Code...</span>
+                </>
+              ) : (
+                <>
+                  <QrCode className="w-5 h-5" />
+                  <span>Setup Multi-Factor Authentication</span>
+                </>
+              )}
+            </button>
+          </div>
+        ) : (
+          // QR Code Generated State
+          <div className="space-y-6">
+            <div className="text-center space-y-4">
+              <div className="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto">
+                <QrCode className="w-8 h-8 text-green-600" />
+              </div>
+
+              <div className="space-y-2">
+                <h4 className="text-lg font-semibold text-gray-900">Scan QR Code</h4>
+                <p className="text-gray-600 text-sm">
+                  Open your authenticator app and scan this QR code
+                </p>
+              </div>
+            </div>
+
+            <div className="flex justify-center">
+              <div className="bg-white rounded-2xl p-4 shadow-lg border-2 border-gray-100">
+                <img src={qrCodeUrl} alt="QR Code MFA" className="w-48 h-48 rounded-xl" />
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <label className="block text-sm font-medium text-gray-700">Verification Code</label>
+                <input
+                  type="text"
+                  className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all duration-200 text-center text-lg tracking-widest"
+                  placeholder="000000"
+                  value={inputToken}
+                  onChange={(e) => setInputToken(e.target.value.replace(/\D/g, '').slice(0, 6))}
+                  maxLength={6}
+                />
+                <p className="text-xs text-gray-500">
+                  Enter the 6-digit code from your authenticator app
+                </p>
+              </div>
+
+              <button
+                onClick={verifyToken}
+                disabled={isSubmitting || inputToken.length !== 6}
+                className={clsx(
+                  'w-full py-3 px-6 rounded-xl font-medium transition-all duration-200 flex items-center justify-center space-x-2',
+                  isSubmitting || inputToken.length !== 6
+                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                    : 'bg-gradient-to-r from-red-600 to-orange-600 text-white hover:from-red-700 hover:to-orange-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5'
+                )}
+              >
+                {isSubmitting ? (
+                  <>
+                    <RefreshCw className="w-5 h-5 animate-spin" />
+                    <span>Verifying...</span>
+                  </>
+                ) : (
+                  <>
+                    <Shield className="w-5 h-5" />
+                    <span>Verify & Enable MFA</span>
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div className="mt-4 p-3 bg-red-50 rounded-lg border border-red-200">
+            <p className="text-sm text-red-600 text-center">{error}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default GenerateQr;
diff --git a/src/pages/account/home/user-profile/blocks/Password.tsx b/src/pages/account/home/user-profile/blocks/Password.tsx
index 0e49ec4..218f2bb 100644
--- a/src/pages/account/home/user-profile/blocks/Password.tsx
+++ b/src/pages/account/home/user-profile/blocks/Password.tsx
@@ -6,6 +6,7 @@ import { KeenIcon } from '@/components';
 import clsx from 'clsx';
 
 type PasswordType = 'password' | 'retype_password' | 'current_password';
+
 const Password = () => {
   const { setPassword } = useContext(AccountUserProfileContext);
   const { getUser } = useAuthContext();
@@ -93,103 +94,139 @@ const Password = () => {
   }, []);
 
   return (
-    <div className="card pb-2.5">
-      <div className="card-header" id="password_settings">
-        <h3 className="card-title">Password</h3>
+    <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+      <div className="px-6 py-4 border-b border-gray-100">
+        <h3 className="text-lg font-medium text-gray-900">Change Password</h3>
+        <p className="text-sm text-gray-500 mt-1">
+          Update your password to keep your account secure
+        </p>
       </div>
-      <div className="card-body grid gap-5">
-        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-          <label className="form-label max-w-56">Current Password</label>
-          <div className="input">
+
+      <div className="p-6 space-y-6">
+        {/* Current Password */}
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">Current Password</label>
+          <div className="relative">
             <input
               type={showPassword.current_password ? 'text' : 'password'}
-              className="form-control"
-              placeholder="Current password"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors"
+              placeholder="Enter your current password"
               value={currentPassword}
               onChange={(e) => setCurrentPassword(e.target.value)}
               disabled={isSubmitting}
             />
-            <button className="btn btn-icon" onClick={(e) => togglePassword(e, 'current_password')}>
+            <button
+              type="button"
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+              onClick={(e) => togglePassword(e, 'current_password')}
+            >
               <KeenIcon
-                icon="eye"
-                className={clsx('text-gray-500', { hidden: showPassword.current_password })}
-              />
-              <KeenIcon
-                icon="eye-slash"
-                className={clsx('text-gray-500', { hidden: !showPassword.current_password })}
+                icon={showPassword.current_password ? 'eye-slash' : 'eye'}
+                className="w-4 h-4"
               />
             </button>
           </div>
         </div>
-        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-          <label className="form-label max-w-56">New Password</label>
-          <div className="input">
-            <input
-              className="form-control"
-              placeholder="New password"
-              value={newPassword}
-              onChange={(e) => setNewPassword(e.target.value)}
-              disabled={isSubmitting}
-              type={showPassword.password ? 'text' : 'password'}
-            />
-            <button className="btn btn-icon" onClick={(e) => togglePassword(e, 'password')}>
-              <KeenIcon
-                icon="eye"
-                className={clsx('text-gray-500', { hidden: showPassword.password })}
-              />
-              <KeenIcon
-                icon="eye-slash"
-                className={clsx('text-gray-500', { hidden: !showPassword.password })}
-              />
-            </button>
-          </div>
-        </div>
-        <div className="mb-2.5">
-          <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-            <label className="form-label max-w-56">Confirm New Password</label>
-            <div className="input">
-              <input
-                type={showPassword.retype_password ? 'text' : 'password'}
-                className="form-control"
-                placeholder="Confirm new password"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                disabled={isSubmitting}
-              />
-              <button
-                className="btn btn-icon"
-                onClick={(e) => togglePassword(e, 'retype_password')}
-              >
-                <KeenIcon
-                  icon="eye"
-                  className={clsx('text-gray-500', { hidden: showPassword.retype_password })}
-                />
-                <KeenIcon
-                  icon="eye-slash"
-                  className={clsx('text-gray-500', { hidden: !showPassword.retype_password })}
-                />
-              </button>
-            </div>
-          </div>
-          <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-            <label className="form-label max-w-56 text-white">Confirm New Password</label>
-            {passwordErrors.length > 0 && (
-              <div className="text-xs text-red-500 mt-1 ms-3">
-                {passwordErrors.map((error, index) => (
-                  <p key={index}>{error}</p>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
 
-        <div className="flex justify-end">
+        {/* New Password */}
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">New Password</label>
+          <div className="relative">
+            <input
+              type={showPassword.password ? 'text' : 'password'}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors"
+              placeholder="Enter your new password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              disabled={isSubmitting}
+            />
+            <button
+              type="button"
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+              onClick={(e) => togglePassword(e, 'password')}
+            >
+              <KeenIcon icon={showPassword.password ? 'eye-slash' : 'eye'} className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+
+        {/* Confirm Password */}
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">Confirm New Password</label>
+          <div className="relative">
+            <input
+              type={showPassword.retype_password ? 'text' : 'password'}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors"
+              placeholder="Confirm your new password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              disabled={isSubmitting}
+            />
+            <button
+              type="button"
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+              onClick={(e) => togglePassword(e, 'retype_password')}
+            >
+              <KeenIcon
+                icon={showPassword.retype_password ? 'eye-slash' : 'eye'}
+                className="w-4 h-4"
+              />
+            </button>
+          </div>
+
+          {/* Password Requirements */}
+          {passwordErrors.length > 0 && (
+            <div className="mt-2 space-y-1">
+              {passwordErrors.map((error, index) => (
+                <p key={index} className="text-xs text-red-600 flex items-center">
+                  <span className="w-1 h-1 bg-red-600 rounded-full mr-2"></span>
+                  {error}
+                </p>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Submit Button */}
+        <div className="pt-4">
           <button
-            className="btn btn-primary"
+            type="button"
+            className={clsx(
+              'w-full py-2.5 px-4 rounded-md font-medium transition-all duration-200',
+              isButtonDisabled
+                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                : 'bg-red-600 text-white hover:bg-red-800 active:bg-red-900'
+            )}
             onClick={handleResetPassword}
             disabled={isButtonDisabled}
           >
-            {isSubmitting ? 'Updating...' : 'Update Password'}
+            {isSubmitting ? (
+              <span className="flex items-center justify-center">
+                <svg
+                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                Updating Password...
+              </span>
+            ) : (
+              'Update Password'
+            )}
           </button>
         </div>
       </div>
diff --git a/src/pages/account/home/user-profile/blocks/PinCode.tsx b/src/pages/account/home/user-profile/blocks/PinCode.tsx
index a1def53..a456b6c 100644
--- a/src/pages/account/home/user-profile/blocks/PinCode.tsx
+++ b/src/pages/account/home/user-profile/blocks/PinCode.tsx
@@ -2,6 +2,7 @@ import { useState, useContext, useCallback, MouseEvent } from 'react';
 import { AccountUserProfileContext } from '../hooks';
 import { toast } from 'sonner';
 import { KeenIcon } from '@/components';
+import clsx from 'clsx';
 
 type PasswordType = 'current' | 'new' | 'retype';
 
@@ -16,12 +17,12 @@ const PinCode = () => {
   const [showPassword, setShowPassword] = useState({
     current: false,
     new: false,
-    retype: false,
+    retype: false
   });
 
   // Fungsi hanya angka, maksimal 6 digit
   const handleNumericInput = (value: string) => {
-    return value.replace(/\D/g, '').slice(0, 100);
+    return value.replace(/\D/g, '').slice(0, 6);
   };
 
   const handleResetPassword = useCallback(async () => {
@@ -37,7 +38,7 @@ const PinCode = () => {
       await setPincode({
         currentpincode: currentPincode,
         newpincode: newPincode,
-        retypepincode: retypePincode,
+        retypepincode: retypePincode
       });
 
       setCurrentPincode('');
@@ -57,13 +58,10 @@ const PinCode = () => {
 
   const isButtonDisabled = isSubmitting || !currentPincode || !newPincode || !retypePincode;
 
-  const togglePassword = useCallback(
-    (event: MouseEvent<HTMLButtonElement>, key: PasswordType) => {
-      event.preventDefault();
-      setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
-    },
-    []
-  );
+  const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: PasswordType) => {
+    event.preventDefault();
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
 
   const handleRetypeChange = (value: string) => {
     const numericValue = handleNumericInput(value);
@@ -76,105 +74,146 @@ const PinCode = () => {
   };
 
   return (
-    <div className="card pb-2.5">
-      <div className="card-header" id="password_settings">
-        <h3 className="card-title">Pin Code</h3>
+    <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+      <div className="px-6 py-4 border-b border-gray-100">
+        <h3 className="text-lg font-medium text-gray-900">Change Pin Code</h3>
+        <p className="text-sm text-gray-500 mt-1">
+          Update your 6-digit pin code for additional security
+        </p>
       </div>
-      <div className="card-body grid gap-5">
+
+      <div className="p-6 space-y-6">
         {/* Current Pin Code */}
-        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-          <label className="form-label max-w-56">Current Pin Code</label>
-          <div className="input relative">
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">Current Pin Code</label>
+          <div className="relative">
             <input
-              className="form-control pr-10"
-              placeholder="Current Pin Code"
+              type={showPassword.current ? 'text' : 'password'}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors text-center text-lg tracking-widest"
+              placeholder="• • • • • •"
               value={currentPincode}
               onChange={(e) => setCurrentPincode(handleNumericInput(e.target.value))}
               disabled={isSubmitting}
-              type={showPassword.current ? 'text' : 'password'}
+              maxLength={6}
             />
             <button
-              className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
-              onClick={(e) => togglePassword(e, 'current')}
               type="button"
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+              onClick={(e) => togglePassword(e, 'current')}
             >
-              <KeenIcon
-                icon={showPassword.current ? 'eye-slash' : 'eye'}
-                className="text-gray-500"
-              />
+              <KeenIcon icon={showPassword.current ? 'eye-slash' : 'eye'} className="w-4 h-4" />
             </button>
           </div>
         </div>
 
         {/* New Pin Code */}
-        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-          <label className="form-label max-w-56">New Pin Code</label>
-          <div className="input relative">
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">New Pin Code</label>
+          <div className="relative">
             <input
-              className="form-control pr-10"
-              placeholder="New Pin Code"
+              type={showPassword.new ? 'text' : 'password'}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors text-center text-lg tracking-widest"
+              placeholder="• • • • • •"
               value={newPincode}
               onChange={(e) => {
                 const value = handleNumericInput(e.target.value);
                 setNewPincode(value);
                 if (retypePincode) {
-                  setErrorRetype(value !== retypePincode ? 'New Pin Code and Retype Pin Code do not match.' : '');
+                  setErrorRetype(
+                    value !== retypePincode ? 'New Pin Code and Retype Pin Code do not match.' : ''
+                  );
                 }
               }}
               disabled={isSubmitting}
-              type={showPassword.new ? 'text' : 'password'}
+              maxLength={6}
             />
             <button
-              className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
-              onClick={(e) => togglePassword(e, 'new')}
               type="button"
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+              onClick={(e) => togglePassword(e, 'new')}
             >
-              <KeenIcon
-                icon={showPassword.new ? 'eye-slash' : 'eye'}
-                className="text-gray-500"
-              />
+              <KeenIcon icon={showPassword.new ? 'eye-slash' : 'eye'} className="w-4 h-4" />
             </button>
           </div>
+          <p className="text-xs text-gray-500">Enter 6 digits only</p>
         </div>
 
         {/* Retype Pin Code */}
-        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-          <label className="form-label max-w-56">Retype Pin Code</label>
-          <div className="input relative w-full">
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">Confirm New Pin Code</label>
+          <div className="relative">
             <input
-              className={`form-control pr-10 ${errorRetype ? 'border-red-500' : ''}`}
-              placeholder="Retype Pin Code"
+              type={showPassword.retype ? 'text' : 'password'}
+              className={clsx(
+                'w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:border-transparent transition-colors text-center text-lg tracking-widest',
+                errorRetype
+                  ? 'border-red-300 focus:ring-red-500'
+                  : 'border-gray-300 focus:ring-red-500'
+              )}
+              placeholder="• • • • • •"
               value={retypePincode}
               onChange={(e) => handleRetypeChange(e.target.value)}
               disabled={isSubmitting}
-              type={showPassword.retype ? 'text' : 'password'}
+              maxLength={6}
             />
             <button
-              className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
-              onClick={(e) => togglePassword(e, 'retype')}
               type="button"
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+              onClick={(e) => togglePassword(e, 'retype')}
             >
-              <KeenIcon
-                icon={showPassword.retype ? 'eye-slash' : 'eye'}
-                className="text-gray-500"
-              />
+              <KeenIcon icon={showPassword.retype ? 'eye-slash' : 'eye'} className="w-4 h-4" />
             </button>
           </div>
+
+          {/* Error message */}
+          {errorRetype && (
+            <p className="text-xs text-red-600 flex items-center mt-1">
+              <span className="w-1 h-1 bg-red-600 rounded-full mr-2"></span>
+              {errorRetype}
+            </p>
+          )}
         </div>
 
-        {/* Error message under Retype */}
-        {errorRetype && (
-          <div className="text-red-500 text-sm -mt-4 ml-[calc(14rem+10px)]">{errorRetype}</div>
-        )}
-
-        {/* Submit button */}
-        <div className="flex justify-end">
+        {/* Submit Button */}
+        <div className="pt-4">
           <button
-            className="btn btn-primary"
+            type="button"
+            className={clsx(
+              'w-full py-2.5 px-4 rounded-md font-medium transition-all duration-200',
+              isButtonDisabled
+                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                : 'bg-red-600 text-white hover:bg-red-800 active:bg-red-900'
+            )}
             onClick={handleResetPassword}
             disabled={isButtonDisabled}
           >
-            {isSubmitting ? 'Updating...' : 'Update Pin Code'}
+            {isSubmitting ? (
+              <span className="flex items-center justify-center">
+                <svg
+                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                Updating Pin Code...
+              </span>
+            ) : (
+              'Update Pin Code'
+            )}
           </button>
         </div>
       </div>
diff --git a/src/pages/members/manage-members/blocks/DetailMember.tsx b/src/pages/members/manage-members/blocks/DetailMember.tsx
index f99c569..d8c8e0c 100644
--- a/src/pages/members/manage-members/blocks/DetailMember.tsx
+++ b/src/pages/members/manage-members/blocks/DetailMember.tsx
@@ -213,7 +213,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                 </DialogHeader>
                 <DialogBody ref={parentRef}>
                     <div className="flex flex-col">
-                        <form>
+                        {/* <form> */}
                         {alert.show && (<Alert variant="danger"><h3>{alert.message}</h3></Alert>)}
 
                         {/* <div className="card-body grid gap-5"> */}
@@ -299,7 +299,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                                 </Button>
                             </div>
                         </div>
-                        </form>
+                        {/* </form> */}
                     </div>
                 </DialogBody>
             </DialogContent>
diff --git a/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx b/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
index b9bf885..58200ad 100644
--- a/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
+++ b/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
@@ -188,44 +188,50 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
     [handleEditDialog, handleDeleteDialog]
   );
 
+  // Fungsi helper untuk mengumpulkan semua parent nodes
+  const collectParents = (data: any[]) => {
+    const parentsList: any[] = [];
+
+    const traverse = (items: any[]) => {
+      items.forEach((item) => {
+        // Jika item memiliki children, maka dia adalah parent
+        if (item.children && item.children.length > 0) {
+          if (!parentsList.find((p) => p.id === item.id)) {
+            parentsList.push({ id: item.id, name: item.name });
+          }
+          // Rekursi untuk children
+          traverse(item.children);
+        }
+      });
+    };
+
+    traverse(data);
+    return parentsList;
+  };
+
   const flattenChildren = (parent: any, parentIdx: number, depth = 0, parentName = '') => {
     let result: any[] = [];
 
-    if (parent.id_parent === null) {
-      if (!parents.find((el: any) => el.id === parent.id))
-        setParents((el: any) => [...el, { id: parent.id, name: parent.name }]);
-
-      result.push({
-        id: parent.id,
-        module: parent.module,
-        parentName: parentName || parent.name,
-        name: parent.name,
-        link: parent.link,
-        id_parent: parent.id_parent,
-        status: parent.status,
-        order_number: parent.order_number
-      });
-    }
+    // Selalu tambahkan item saat ini ke result (baik parent maupun child)
+    result.push({
+      id: parent.id,
+      module: parent.module,
+      parentName: parentName,
+      name: parent.name,
+      link: parent.link,
+      id_parent: parent.id_parent,
+      status: parent.status,
+      order_number: parent.order_number
+    });
 
+    // Jika tidak ada children, return result
     if (!parent.children || parent.children.length === 0) {
       return result;
     }
 
+    // Proses children secara rekursif
     const childrenFlattened = parent.children.flatMap((child: any, childIdx: number) => {
-      if (child.children && child.children.length > 0) {
-        return flattenChildren(child, parentIdx * 100 + childIdx, depth + 1, child.name);
-      }
-
-      return {
-        id: child.id,
-        module: parent.module,
-        parentName: parentName || parent.name,
-        name: child.name,
-        link: child.link,
-        id_parent: child.id_parent,
-        status: child.status,
-        order_number: parent.order_number
-      };
+      return flattenChildren(child, parentIdx * 100 + childIdx, depth + 1, parent.name);
     });
 
     return [...result, ...childrenFlattened];
@@ -237,7 +243,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
       filter = filter.length === 0 ? {} : { name: { like: `%${filter[0].value?.toLowerCase()}%` } };
 
       const query: any = {
-        limit:100,
+        limit: 100,
         page: 1,
         with_deleted: false,
         order_field: sorting[0].id,
@@ -254,15 +260,22 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
       if (query.filter && query.filter.length > 0) {
         return { data: response?.data.list, totalCount: response?.data.total_count };
       } else {
+        // Reset parents array
+        setParents([]);
+
+        // Kumpulkan semua parents terlebih dahulu
+        const allParents = collectParents(response?.data.list || []);
+        setParents(allParents);
+
+        // Transform data dengan flatten
         const transformedData = response?.data.list.flatMap((row: any, parentIdx: number) =>
           flattenChildren(row, parentIdx)
         );
 
         const total_count = transformedData.length;
 
-        // **Pagination di frontend saja (tanpa hit API ulang)**
+        // Pagination di frontend
         const paginatedData = transformedData.slice(page * limit, (page + 1) * limit);
-        const totalPages = Math.ceil(total_count / limit);
 
         return { data: paginatedData, totalCount: total_count };
       }