diff --git a/src/api/loginApi.js b/src/api/loginApi.js
index 2685876..fb0903b 100644
--- a/src/api/loginApi.js
+++ b/src/api/loginApi.js
@@ -38,7 +38,12 @@ export const userApi = {
     }
   },
 
-  update_password: async (userId, currentPassword, updatedPassword, confirmedPassword) => {
+  update_password: async (
+    userId,
+    currentPassword,
+    updatedPassword,
+    confirmedPassword
+  ) => {
     const request = {
       user_id: userId,
       current_password: currentPassword,
@@ -51,7 +56,7 @@ export const userApi = {
       {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(request)
+        body: JSON.stringify(request),
       }
     );
 
diff --git a/src/components/ProfileForm.css b/src/components/ProfileForm.css
index 31bd471..7abcd2f 100644
--- a/src/components/ProfileForm.css
+++ b/src/components/ProfileForm.css
@@ -1,41 +1,95 @@
 .profile-form {
-  max-width: 400px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+  width: 100%;
+  max-width: 420px;
   margin: 0 auto;
-  padding: 20px;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  background-color: #ffffff;
 }
 
 .profile-form h2 {
+  color: #333;
+  font-size: 28px;
+  font-weight: 600;
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
 }
 
 .profile-form form {
-  display: flex;
-  flex-direction: column;
+  margin-bottom: 25px;
 }
 
 .profile-form div {
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 
 .profile-form label {
-  font-weight: bold;
-  margin-bottom: 5px;
   display: block;
+  color: #555;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 6px;
 }
 
 .profile-form input[type='text'],
-.profile-form input[type='tel'] {
+.profile-form input[type='tel'],
+.profile-form input[type='password'] {
   width: 100%;
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  padding: 12px 16px;
+  border: 2px solid #e1e5e9;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.profile-form input[type='text']:focus,
+.profile-form input[type='tel']:focus,
+.profile-form input[type='password']:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
 .profile-form input[readonly] {
-  background-color: #f9f9f9;
+  background-color: #f9fafb;
+  cursor: not-allowed;
+}
+
+.profile-form button[type='submit'] {
+  width: 100%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 10px;
+}
+
+.profile-form button[type='submit']:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+
+.profile-form button[type='button'] {
+  width: 100%;
+  background: #f1f5f9;
+  color: #334155;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 10px;
+}
+
+.profile-form button[type='button']:hover {
+  background: #e2e8f0;
 }
diff --git a/src/components/ProfileForm.jsx b/src/components/ProfileForm.jsx
index d53c5a1..9a8521b 100644
--- a/src/components/ProfileForm.jsx
+++ b/src/components/ProfileForm.jsx
@@ -9,7 +9,7 @@ import './ProfileForm.css';
 const ProfileForm = () => {
   const navigate = useNavigate();
   const [activeView, setActiveView] = useState('profile');
-  const [subView, setSubView] = useState('details'); // Add this state for toggling
+  const [subView, setSubView] = useState('details');
   const [formData, setFormData] = useState({
     firstname: '',
     lastname: '',
@@ -18,12 +18,11 @@ const ProfileForm = () => {
     createdDate: new Date().toISOString().split('T')[0],
     lastLoginDate: new Date().toISOString().split('T')[0],
   });
-  
-  // Add password state
+
   const [passwordData, setPasswordData] = useState({
     currentPassword: '',
     newPassword: '',
-    confirmNewPassword: ''
+    confirmNewPassword: '',
   });
 
   useEffect(() => {
@@ -55,12 +54,11 @@ const ProfileForm = () => {
     setFormData({ ...formData, [name]: value });
   };
 
-  // Add password change handler
   const handlePasswordChange = (e) => {
     const { name, value } = e.target;
-    setPasswordData(prev => ({
+    setPasswordData((prev) => ({
       ...prev,
-      [name]: value
+      [name]: value,
     }));
   };
 
@@ -72,35 +70,8 @@ const ProfileForm = () => {
     }
   };
 
-  const validateForm = () => {
-    const newErrors = {};
-
-    // Password validation
-    if (!passwordData.currentPassword) {
-      newErrors.currentPassword = 'Current Password is required';
-    }
-
-    // Confirm password validation
-    if (passwordData.newPassword !== passwordData.confirmNewPassword) {
-      newErrors.confirmNewPassword = 'Passwords do not match';
-    }
-
-    return newErrors;
-  };
-
-  // Add password submit handler
   const handlePasswordSubmit = async (e) => {
     e.preventDefault();
-    // You can add your password update logic here
-    console.log('Password update requested:', passwordData);
-
-    const validationErrors = validateForm();
-
-    if (Object.keys(validationErrors).length > 0) {
-      setErrors(validationErrors);
-      setIsLoading(false);
-      return;
-    }
 
     try {
       const userId = tokenService.getUserId();
@@ -108,24 +79,29 @@ const ProfileForm = () => {
       const newPassword = passwordData.newPassword;
       const confirmNewPassword = passwordData.confirmNewPassword;
 
-      const response = await userApi.update_password(userId, currentPassword, newPassword, confirmNewPassword);
+      const response = await userApi.update_password(
+        userId,
+        currentPassword,
+        newPassword,
+        confirmNewPassword
+      );
       if (response) {
         console.log('Successfully updated password');
       } else {
         console.error('Error updating password');
       }
     } catch (error) {
+      console.error('Login error:', error);
     } finally {
     }
   };
 
-  // Render password change form
   const renderPasswordForm = () => (
     <div className="profile-form">
       <h2>Change Password</h2>
       <form onSubmit={handlePasswordSubmit}>
         <div>
-          <label htmlFor="currentPassword">Current Password:</label>
+          <label htmlFor="currentPassword">Current Password</label>
           <input
             type="password"
             id="currentPassword"
@@ -136,7 +112,7 @@ const ProfileForm = () => {
           />
         </div>
         <div>
-          <label htmlFor="newPassword">New Password:</label>
+          <label htmlFor="newPassword">New Password</label>
           <input
             type="password"
             id="newPassword"
@@ -147,7 +123,7 @@ const ProfileForm = () => {
           />
         </div>
         <div>
-          <label htmlFor="confirmNewPassword">Confirm New Password:</label>
+          <label htmlFor="confirmNewPassword">Confirm New Password</label>
           <input
             type="password"
             id="confirmNewPassword"
@@ -165,22 +141,12 @@ const ProfileForm = () => {
     </div>
   );
 
-  // Render profile details form
   const renderProfileForm = () => (
     <div className="profile-form">
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <h2>User Profile</h2>
-        <button 
-          type="button" 
-          onClick={() => setSubView('password')}
-          style={{ marginBottom: '15px' }}
-        >
-          Change Password
-        </button>
-      </div>
+      <h2>User Profile</h2>
       <form>
         <div>
-          <label htmlFor="firstname">First Name:</label>
+          <label htmlFor="firstname">First Name</label>
           <input
             type="text"
             id="firstname"
@@ -191,7 +157,7 @@ const ProfileForm = () => {
           />
         </div>
         <div>
-          <label htmlFor="lastname">Last Name:</label>
+          <label htmlFor="lastname">Last Name</label>
           <input
             type="text"
             id="lastname"
@@ -202,7 +168,7 @@ const ProfileForm = () => {
           />
         </div>
         <div>
-          <label htmlFor="phone">Phone:</label>
+          <label htmlFor="phone">Phone</label>
           <input
             type="tel"
             id="phone"
@@ -213,7 +179,7 @@ const ProfileForm = () => {
           />
         </div>
         <div>
-          <label htmlFor="username">Username:</label>
+          <label htmlFor="username">Username</label>
           <input
             type="text"
             id="username"
@@ -224,28 +190,32 @@ const ProfileForm = () => {
           />
         </div>
         <div>
-          <label htmlFor="createdDate">Created Date:</label>
+          <label htmlFor="createdDate">Created Date</label>
           <input
             type="text"
             id="createdDate"
             name="createdDate"
             value={formData.createdDate}
-            onChange={handleChange}
             readOnly
           />
         </div>
         <div>
-          <label htmlFor="lastLoginDate">Last Login Date:</label>
+          <label htmlFor="lastLoginDate">Last Login Date</label>
           <input
             type="text"
             id="lastLoginDate"
             name="lastLoginDate"
             value={formData.lastLoginDate}
-            onChange={handleChange}
             readOnly
           />
         </div>
       </form>
+
+      <div>
+        <button type="button" onClick={() => setSubView('password')}>
+          Change Password
+        </button>
+      </div>
     </div>
   );
 
@@ -278,7 +248,7 @@ const ProfileForm = () => {
         </div>
       </nav>
 
-      {/* Main Content - Toggle between views */}
+      {/* Main Content */}
       {subView === 'details' ? renderProfileForm() : renderPasswordForm()}
     </div>
   );