diff --git a/client/src/apis/users/users.ts b/client/src/apis/users/users.ts
index 839f24fb8..1fbdf1812 100644
--- a/client/src/apis/users/users.ts
+++ b/client/src/apis/users/users.ts
@@ -23,11 +23,11 @@ class Users {
 		}
 	}
 
-	public async getUserByID(id: number) {
-        // Request to get user based on his user id.
+	public async getUserByID(id: number): Promise<UserInterface> {
+		// Request to get user based on his user id.
 		try {
 			return await (
-				await http.get(`/users?id=${id}`)
+				await http.get(`/users/${id}`)
 			).data.results;
 		} catch (error) {
 			throw new Error(error.response.data.message);
@@ -125,7 +125,7 @@ class Users {
 		}
 	}
 
-	async updateProfile(registerData: registeringData) {
+	async updateProfile(registerData: UserInterface) {
 		// Update user profile
 		try {
 			return await (
diff --git a/client/src/componants/dashboard/GreatAndHint.svelte b/client/src/componants/dashboard/GreatAndHint.svelte
index bdfead3fc..6f6e06da2 100644
--- a/client/src/componants/dashboard/GreatAndHint.svelte
+++ b/client/src/componants/dashboard/GreatAndHint.svelte
@@ -6,9 +6,9 @@
 </script>
 
 <strong>
-Hello
+Hey
 <span class="text-primary">
-    {$UserStore.full_name}!,
+    {$UserStore.full_name.length > 2 ? $UserStore.full_name : 'There'}!,
 </span>
 {header}
 </strong>
diff --git a/client/src/componants/dashboard/Tabs.svelte b/client/src/componants/dashboard/Tabs.svelte
index 94b691ae7..e2951f1da 100644
--- a/client/src/componants/dashboard/Tabs.svelte
+++ b/client/src/componants/dashboard/Tabs.svelte
@@ -7,6 +7,7 @@
   import VacationBalance from "../vacations/VacationBalance.svelte"
   import UserVacationBalance from "../vacations/UserVacationBalance.svelte"
   import GreatAndHint from "./GreatAndHint.svelte"
+  import UpdateProfile from '../settings/UpdateProfile.svelte';
   let date: Date = new Date();
 </script>
 
@@ -38,7 +39,7 @@
         aria-selected="false"
         >Update User Vacation Balance</a
       >
-      <a
+      <!-- RFNV1.0 <a
         class="nav-link navtab mb-2"
         id="v-tabs-home-tab"
         data-mdb-toggle="tab"
@@ -47,8 +48,8 @@
         aria-controls="v-tabs-home"
         aria-selected="true"
         >Evaluation Form</a
-      >
-      <a
+      > -->
+      <!-- RFNV1.0 <a
         class="nav-link navtab mb-2"
         id="v-tabs-user-eval-tab"
         data-mdb-toggle="tab"
@@ -57,8 +58,8 @@
         aria-controls="v-tabs-user-eval"
         aria-selected="false"
         >User Evaluation Form</a
-      >
-      <a
+      > -->
+      <!-- RFNV1.0 <a
         class="nav-link navtab mb-2"
         id="v-tabs-user-docs-tab"
         data-mdb-toggle="tab"
@@ -67,7 +68,7 @@
         aria-controls="v-tabs-user-docs"
         aria-selected="false"
         >User Documents</a
-      >
+      > -->
       <a
         class="nav-link navtab mb-2"
         id="v-tabs-office-tab"
@@ -88,6 +89,17 @@
         aria-selected="false"
         >Add new user</a
       >
+      <a
+        class="nav-link navtab mb-2"
+        id="v-tabs-update-user-tab"
+        data-mdb-toggle="tab"
+        href="#v-tabs-update-user"
+        role="tab"
+        aria-controls="v-tabs-update-user"
+        aria-selected="false"
+        >
+        Update user profile
+      </a>
     </div>
   </div>
   <div class="col-9">
@@ -115,13 +127,13 @@
       >
         <div class="height-100">
           <GreatAndHint 
-            header={"tThis is the user balance of year " + date.getFullYear()}
+            header={"This is the user balance of year " + date.getFullYear()}
             hint={"The user also has an old balance object, we reset this old balance values to zeros on the first day of march month every year as a cron job, you can always check and if you find these values not zeros after `1/3/*years` you can delete all old balances by checking the checkbox below."} 
           />
           <UserVacationBalance />
         </div>
       </div>
-      <div
+      <!-- RFNV1.0 <div
       class="tab-pane fade"
       id="v-tabs-home"
       role="tabpanel"
@@ -134,8 +146,8 @@
         />
         <Evaluation />
       </div>
-    </div>
-    <div
+    </div> -->
+    <!-- RFNV1.0 <div
       class="tab-pane fade"
       id="v-tabs-user-eval"
       role="tabpanel"
@@ -148,8 +160,8 @@
         />
         <UserEvaluation />
       </div>
-    </div>
-    <div
+    </div> -->
+    <!-- RFNV1.0 <div
       class="tab-pane fade"
       id="v-tabs-user-docs"
       role="tabpanel"
@@ -162,7 +174,7 @@
         />
         <UserDocuments />
       </div>
-    </div>
+    </div> -->
     <div
       class="tab-pane fade"
       id="v-tabs-office"
@@ -191,6 +203,20 @@
         <Register />
       </div>
     </div>
+    <div
+      class="tab-pane fade"
+      id="v-tabs-update-user"
+      role="tabpanel"
+      aria-labelledby="v-tabs-update-user-tab"
+    >
+      <div class="height-100">
+        <GreatAndHint 
+          header={"Update user profile"}
+          hint={"You can update the user information using this form."} 
+        />
+        <UpdateProfile />
+      </div>
+    </div>
     </div>
   </div>
 </div>
diff --git a/client/src/componants/settings/ChangePassword.svelte b/client/src/componants/settings/ChangePassword.svelte
index 83b34826d..8e0096d92 100644
--- a/client/src/componants/settings/ChangePassword.svelte
+++ b/client/src/componants/settings/ChangePassword.svelte
@@ -22,7 +22,7 @@
 <div class="card">
     <div class="card-body">
         <div class="row">
-            <div class="col-6">
+            <div class="col-12">
                 <div class="form-outline">
                     <Input
                         type="password"
@@ -37,7 +37,7 @@
                     /> 
                 </div>
             </div>
-            <div class="col-6">
+            <div class="col-12">
                 <div class="form-outline">
                     <Input
                         type="password"
diff --git a/client/src/componants/settings/ColorPicker.svelte b/client/src/componants/settings/ColorPicker.svelte
index a4da7c245..a4a9aa2c8 100644
--- a/client/src/componants/settings/ColorPicker.svelte
+++ b/client/src/componants/settings/ColorPicker.svelte
@@ -4,7 +4,7 @@
 
 </script>
 
-<ColorInput bind:color className={"input"} title={color.toHexString()} showAlphaSlider />
+<ColorInput bind:color title={color.toHexString()} showAlphaSlider />
 
 <svelte:head>
     <style>
diff --git a/client/src/componants/settings/Forms/UpdateUserProfileForm.svelte b/client/src/componants/settings/Forms/UpdateUserProfileForm.svelte
new file mode 100644
index 000000000..e189b4dee
--- /dev/null
+++ b/client/src/componants/settings/Forms/UpdateUserProfileForm.svelte
@@ -0,0 +1,400 @@
+<script lang="ts">
+  import Input from '../../ui/Input.svelte';
+  import Submit from '../../ui/Button.svelte';
+  import MultiSelect from '../../ui/select/MultiSelect.svelte';
+  import { UserStore } from '../../../utils/stores';
+  import type { SelectOptionType, UserInterface } from '../../../utils/types';
+  import { 
+      validateBirthday,
+      validateEmail,
+      validateName,
+      validatePhoneNumber,
+      validateTelegramLink,
+  } from '../../../utils/validations';
+  import { TeamChoice, GenderChoice, UserTypeChoice } from '../../../utils/choices';
+  import LocationSelect from '../../ui/select/LocationSelect.svelte';
+  import PeopleSelect from '../../ui/select/UsersMultiSelect.svelte';
+  import SelectImage from '../../ui/select/SelectImage.svelte';
+  import ColorPicker from '../ColorPicker.svelte';
+  import { Color } from 'color-picker-svelte'
+  import RegisterDataService from '../../../apis/users/users';
+  import RemoveImage from '../RemoveImage.svelte';
+
+  export let isLoading: boolean = false;
+  export let isError: boolean = false;
+  
+  export let user: UserInterface;
+  // RFNV0.1 let defaultNetSalary: number;
+  // RFNV0.1 let defaultGrossSalary: number;
+
+  let image: HTMLImageElement;
+  
+  let color = new Color(user.background_color)
+  let removeImage: boolean = false;
+
+  let teamSelectOptions: SelectOptionType[] = TeamChoice;
+  let genderSelectOptions: SelectOptionType[] = GenderChoice;
+  let userTypeOptions: SelectOptionType[] = UserTypeChoice;
+
+  let teamSelected: SelectOptionType[] = [{"label": user.team, "value": user.team}];
+  let genderSelected: SelectOptionType[] = [{"label": user.gender, "value": user.gender}];
+  let userTypeSelected: SelectOptionType[] = [{"label": user.user_type, "value": user.user_type}];
+  let locationSelected: SelectOptionType[] = [{"label": user.location.name, "value": user.location.id}];
+  let reportingToSelected: SelectOptionType[] = [];
+
+
+  // RFNV0.1 if (user.salary.current_salary){
+  //   defaultNetSalary = +user.salary.current_salary.net[0];
+  // } else {
+  //   defaultNetSalary = 0
+  // }
+
+  // RFNV0.1 if (user.salary.current_salary){
+  //   defaultGrossSalary = +user.salary.current_salary.gross[0];
+  // } else {
+  //   defaultGrossSalary = 0
+  // }
+
+  let isErrorfName: null | boolean,
+    isErrorlName: null | boolean,
+    isErrormail: null | boolean,
+    isErrorMobile: null | boolean,
+    isErrorJobTitle: null | boolean,
+    isErrorAddress: null | boolean,
+    isErrorLink: null | boolean,
+    isErrorSocialNumber: null | boolean,
+    isErrorUserType: null | boolean,
+    isErrorLocation: null | boolean,
+    isErrorSuperuser: null | boolean,
+    isErrorBirthday: null | boolean
+  = null;
+
+  $: submitDisabled = 
+    isErrorBirthday == true ||
+    isErrorLink == true ||
+    isErrorJobTitle == true ||
+    isErrorMobile == true ||
+    isErrorSocialNumber == true ||
+    isErrorlName == true ||
+    isErrorfName == true ||
+    isErrorAddress == true ||
+    isErrorLocation == true ||
+
+    locationSelected.length < 1 ||
+    genderSelected.length < 1 ||
+    teamSelected.length < 1 ||
+    userTypeSelected.length < 1
+
+  for (let i in user.reporting_to) {
+    reportingToSelected.push({"label": user.reporting_to[i].full_name, "value": user.reporting_to[i].id});
+  }
+
+</script>
+
+<div class="card">
+  <div class="card-body">
+      <div class="row">
+          <div class="col-6">
+              <div class="form-outline">
+                  <Input
+                      type="text"
+                      label={'First Name'}
+                      bind:value={ user.first_name }
+                      handleInput={validateName}
+                      size={150}
+                      errorMessage="Invalid Name"
+                      hint={'please enter a valid first name'}
+                      placeholder={'Enter first name'}
+                      bind:isError={isErrorfName}
+                  /> 
+              </div>
+          </div>
+          <div class="col-6">
+              <div class="form-outline">
+                  <Input
+                      type="text"
+                      label={'Last Name'}
+                      bind:value={ user.last_name }
+                      handleInput={validateName}
+                      size={150}
+                      errorMessage="Invalid Name"
+                      hint={'please enter a valid last name'}
+                      placeholder={'Enter last name'}
+                      bind:isError={isErrorlName}
+                  /> 
+              </div>
+          </div>
+          {#if $UserStore.user_type == "Admin"}
+              <div class="col-6">
+                  <div class="form-outline">
+                      <Input
+                          type="text"
+                          label={'Email'}
+                          bind:value={ user.email }
+                          handleInput={validateEmail}
+                          size={150}
+                          errorMessage="Invalid email address"
+                          hint={'please enter a valid email address'}
+                          placeholder={'Enter email address'}
+                          bind:isError={isErrormail}
+                      /> 
+                  </div>
+              </div>
+              <div class="col-6">
+                  <div class="form-outline">
+                      <Input
+                          type="text"
+                          label={'Social insurance number'}
+                          bind:value={user.social_insurance_number}
+                          handleInput={() => {
+                              return false;
+                          }}
+                          size={150}
+                          errorMessage="Social insurance number isinvalid"
+                          hint={'please write a valid Social insurance number'}
+                          placeholder={'please fill Social insurance number here'}
+                          bind:isError={isErrorSocialNumber}
+                      />
+                  </div>
+              </div>
+              <!-- <div class="col-6">
+                <div class="form-outline">
+                  <Input
+                    type="number"
+                    label={'Net Current Salary'}
+                    bind:value={ defaultNetSalary }
+                    handleInput={validateSalary}
+                    size={20}
+                    errorMessage="invalid salary value"
+                    hint={'please enter the net current salary for the employee'}
+                    placeholder={'Enter the net current salary'}
+                    bind:isError={isErrorCurrentNetSalary}
+                  />
+                </div>
+              </div> -->
+              <!-- <div class="col-6">
+                <div class="form-outline">
+                  <Input
+                    type="number"
+                    label={'Gross Current Salary'}
+                    bind:value={ defaultGrossSalary }
+                    handleInput={validateSalary}
+                    size={20}
+                    errorMessage="invalid salary value"
+                    hint={'please enter the gross current salary for the employee'}
+                    placeholder={'Enter the gross current salary'}
+                    bind:isError={isErrorCurrentGrossSalary}
+                  />
+                </div>
+              </div> -->
+              <div class="col-6">
+                  <div class="form-outline">
+                      <MultiSelect
+                        bind:options={teamSelectOptions}
+                        bind:selected={teamSelected}
+                        isLabel={true}
+                        label="Team"
+                        placeholder="Select team"
+                        removeAllTitle="Remove all teams"
+                        multiple={false}
+                      />
+                  </div>
+              </div>
+              <div class="col-6">
+                  <div class="form-outline">
+                      <MultiSelect
+                        bind:options={genderSelectOptions}
+                        bind:selected={genderSelected}
+                        isLabel={true}
+                        label="Gender"
+                        placeholder="Select gender"
+                        removeAllTitle="Remove gender"
+                        multiple={false}
+                      />
+                  </div>
+              </div>
+              <div class="col-6">
+                  <div class="form-outline">
+                      <MultiSelect
+                        bind:options={userTypeOptions}
+                        bind:selected={userTypeSelected}
+                        isLabel={true}
+                        label="User Type"
+                        placeholder="Select user type"
+                        removeAllTitle="Remove user type"
+                        multiple={false}
+                        bind:isError={isErrorUserType}
+                      />
+                  </div>
+              </div>
+              <div class="col-6">
+                  <div class="form-outline">
+                      <LocationSelect
+                          mylabel= {"Location"}
+                          bind:isError={isErrorLocation}
+                          bind:selected={locationSelected}
+                          isTop={true}
+                      />
+                  </div>
+              </div>
+              <div class="col-6">
+                  <div class="form-outline">
+                      <PeopleSelect
+                          multiple={true}
+                          mylabel= {"Reporting to"}
+                          bind:isError={isErrorSuperuser}
+                          bind:selected={reportingToSelected}
+                          isTop={true}
+                      />
+                  </div>
+              </div>
+          {/if}
+          <div class="col-6">
+              <div class="form-outline">
+                  <Input
+                      type="tel"
+                      label={'Mobile Number'}
+                      bind:value={ user.mobile_number }
+                      handleInput={validatePhoneNumber}
+                      size={150}
+                      errorMessage="Invalid Mobile Number"
+                      hint={'please enter a valid mobile number in range(10, 15) digits'}
+                      placeholder={'01234567890'}
+                      bind:isError={isErrorMobile}
+                  />
+              </div>
+          </div>
+          <div class="col-6">
+              <div class="form-outline">
+                  <Input
+                      type="text"
+                      label={'Role'}
+                      bind:value={ user.job_title }
+                      handleInput={() => {
+                          return false;
+                      }}
+                      size={150}
+                      errorMessage="Role is invalid"
+                      hint={'please write a valid role'}
+                      placeholder={'please fill role here'}
+                      bind:isError={isErrorJobTitle}
+                  />
+              </div>
+          </div>
+          <div class="col-6">
+              <div class="form-outline">
+                  <Input
+                      type="text"
+                      label={'Address'}
+                      bind:value={ user.address }
+                      handleInput={() => {
+                          return false;
+                      }}
+                      size={150}
+                      errorMessage="Address is invalid"
+                      hint={'please write a valid address'}
+                      placeholder={'please put the address here'}
+                      bind:isError={isErrorAddress}
+                  />
+              </div>
+          </div>
+          <div class="col-6">
+              <div class="form-outline">
+                  <Input
+                      type="text"
+                      label={'Telegram User Name'}
+                      bind:value={ user.telegram_link }
+                      handleInput={validateTelegramLink}
+                      size={150}
+                      errorMessage="Invalid Link"
+                      hint={'please enter a valid Telegram username link'}
+                      placeholder={'Enter telegram link e.g: @username'}
+                      bind:isError={isErrorLink}
+                  />
+              </div>
+          </div>
+          <div class="col-6">
+              <div class="form-outline">
+                  <Input
+                      type="date"
+                      label={'Birthday date'}
+                      bind:value={ user.birthday }
+                      handleInput={validateBirthday}
+                      size={150}
+                      errorMessage="Invalid birthdate"
+                      hint={'please enter a valid birthday date'}
+                      placeholder={'Enter birthday date'}
+                      bind:isError={isErrorBirthday}
+                  />
+              </div>
+          </div>
+          <div class="col-6 mt-3">
+              <div class="form-outline">
+                  <div class="row">
+                      <div class="col-4 d-flex align-items-center">Background Logo color</div>
+                      <div class="col-8">
+                          <ColorPicker bind:color/>
+                      </div>
+                  </div>
+              </div>
+          </div>
+          {#if user.image.includes("profile_image") }
+              <div class="col-6 mt-3">
+                  <RemoveImage on:message={(event) => {
+                      removeImage = event.detail.text
+                  }} buttonBackgraound={user.background_color} label={"Clear Profile Image"}/>
+              </div>
+          {/if}
+          <div class="col-6">
+              <div class="row">
+                  <div class="col-6 mt-3">
+                      <!-- svelte-ignore a11y-label-has-associated-control -->
+                      <label>Profile Image</label>
+                  </div>
+                  <div class="col-6">
+                      <div class="form-outline mt-3">
+                          <SelectImage bind:image styleOnRow={"flex-direction: column;"}/>
+                      </div>
+                  </div>
+              </div>
+          </div>
+          <div class="col-12">
+              <div class="form-outline mt-4  d-flex justify-content-center">
+                  <Submit
+                      width={'15'}
+                      successMessage={'Profile Updated!'}
+                      errorMessage={'Profile updates failed!'}
+                      label="Submit"
+                      onClick={async () => {
+                          isLoading = true;
+                          for (var i in reportingToSelected) {
+                              user.reporting_to[i]=reportingToSelected[i].value;
+                          }
+                          user.background_color = color.toHexString()
+                          user.team = teamSelected[0].value;
+                          user.location = locationSelected[0].value;
+                          user.gender = genderSelected[0].value;
+                          user.user_type = userTypeSelected[0].value;
+                          user.remove_image = removeImage
+                          if (image != undefined){
+                            user.image = image.src
+                          } else {
+                            user.image = ""
+                          }
+                          try {
+                            await RegisterDataService.updateProfile(user);                            
+                          } catch (error) {
+                            isError = true;
+                          } finally {
+                            isLoading = false;
+                          }
+                          return isError;
+                      }}
+                  className=""
+                  bind:disabled={submitDisabled}
+                />
+              </div>
+          </div>
+      </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/client/src/componants/settings/Settings.svelte b/client/src/componants/settings/Settings.svelte
index 8b92b0c25..5038c0f50 100644
--- a/client/src/componants/settings/Settings.svelte
+++ b/client/src/componants/settings/Settings.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import UpdateProfile from "./UpdateProfile.svelte"
+  // import UpdateProfile from "./UpdateProfile.svelte"
   import ChangePassword from "./ChangePassword.svelte"
-  import { UserStore } from "../../utils/stores"
-  import AddtionalInfo from "./AddtionalInfo.svelte";
+  // import { UserStore } from "../../utils/stores"
+  // import AddtionalInfo from "./AddtionalInfo.svelte";
 </script>
 
 <div class="container mt-5 pt-5 height-100">
   <div class="card p-2 mb-3">
     <ul class="nav mt-4 nav-tabs nav-fill mb-3" id="ex1" role="tablist">
-      <li class="nav-item" role="presentation">
+      <!-- <li RFNV1.0 class="nav-item" role="presentation">
         <a
           class="nav-link navlink active"
           id="ex2-tab-1"
@@ -19,10 +19,10 @@
           aria-selected="true"
           >Update Profile</a
         >
-      </li>
+      </li> -->
       <li class="nav-item" role="presentation">
         <a
-          class="nav-link navlink"
+          class="nav-link navlink active"
           id="ex2-tab-2"
           data-mdb-toggle="tab"
           href="#ex2-tabs-2"
@@ -32,7 +32,7 @@
           >Change Password</a
         >
       </li>
-      <li class="nav-item" role="presentation">
+      <!-- <li RFNV1.0 class="nav-item" role="presentation">
         <a
           class="nav-link navlink"
           id="ex2-tab-2"
@@ -43,34 +43,34 @@
           aria-selected="false"
           >Additional information</a
         >
-      </li>
+      </li> -->
     </ul>
   </div>
   <div class="tab-content" id="ex2-content">
-    <div
+    <!-- <div
       class="tab-pane show active"
       id="ex2-tabs-1"
       role="tabpanel"
       aria-labelledby="ex2-tab-1"
     >
       <UpdateProfile user={$UserStore}/>
-    </div>
+    </div> -->
     <div
-      class="tab-pane"
+      class="tab-pane show active"
       id="ex2-tabs-2"
       role="tabpanel"
       aria-labelledby="ex2-tab-2"
     >
       <ChangePassword />
     </div>
-    <div
+    <!-- RFNV1.0 <div
       class="tab-pane"
       id="ex2-tabs-3"
       role="tabpanel"
       aria-labelledby="ex2-tab-3"
     >
       <AddtionalInfo />
-    </div>
+    </div> -->
   </div>
 </div>
 
diff --git a/client/src/componants/settings/UpdateProfile.svelte b/client/src/componants/settings/UpdateProfile.svelte
index b83259def..bbe303946 100644
--- a/client/src/componants/settings/UpdateProfile.svelte
+++ b/client/src/componants/settings/UpdateProfile.svelte
@@ -1,390 +1,64 @@
 <script lang="ts">
-    import Input from '../ui/Input.svelte';
     import Submit from '../ui/Button.svelte';
-    import MultiSelect from '../ui/select/MultiSelect.svelte';
-    import { UserStore } from '../../utils/stores';
-    import type { SelectOptionType } from '../../utils/types';
-    import { 
-        validateBirthday,
-        validateEmail,
-        validateName,
-        validatePhoneNumber,
-        validateSalary,
-        validateTelegramLink,
-    } from '../../utils/validations';
-    import { TeamChoice, GenderChoice, UserTypeChoice } from '../../utils/choices';
-    import LocationSelect from '../ui/select/LocationSelect.svelte';
+    import type { SelectOptionType, UserInterface } from '../../utils/types';
     import PeopleSelect from '../ui/select/UsersMultiSelect.svelte';
-    import SelectImage from '../ui/select/SelectImage.svelte';
-    import ColorPicker from './ColorPicker.svelte';
-    import { Color } from 'color-picker-svelte'
-    import RegisterDataService from '../../apis/users/users';
-    import RemoveImage from './RemoveImage.svelte';
-    export let user: any;
-    export let isLoading: boolean = false;
-    export let isError: boolean = false;
-
-    let defaultNetSalary: number;
-    let defaultGrossSalary: number;
-    let image: HTMLImageElement;
-    let color = new Color(user.background_color)
-    let removeImage: boolean = false;
-
-    if (user.salary.current_salary){
-        defaultNetSalary = +user.salary.current_salary.net[0];
-    } else {
-        defaultNetSalary = 0
-    }
-
-    if (user.salary.current_salary){
-        defaultGrossSalary = +user.salary.current_salary.gross[0];
-    } else {
-        defaultGrossSalary = 0
-    }
+    import Users from "../../apis/users/users"
+    import UpdateUserProfileForm from './Forms/UpdateUserProfileForm.svelte';
 
-    let isErrorfName: null | boolean,
-        isErrorlName: null | boolean,
-        isErrormail: null | boolean,
-        isErrorMobile: null | boolean,
-        isErrorJobTitle: null | boolean,
-        isErrorAddress: null | boolean,
-        isErrorLink: null | boolean,
-        isErrorSocialNumber: null | boolean,
-        isErrorUserType: null | boolean,
-        isErrorLocation: null | boolean,
-        isErrorSuperuser: null | boolean,
-        isErrorCurrentNetSalary: null | boolean,
-        isErrorCurrentGrossSalary: null | boolean,
-        isErrorBirthday: null | boolean
-    = null;
 
-    $: submitDisabled = 
-        isErrorCurrentGrossSalary == true || isErrorCurrentNetSalary == true ||
-        isErrorBirthday == true || isErrorLink == true ||
-        isErrorJobTitle == true || isErrorMobile == true ||
-        isErrorSocialNumber == true || isErrorlName == true || isErrorfName == true ||
-        isErrorAddress == true 
-
-    let teamSelectOptions: SelectOptionType[] = TeamChoice;
-    let genderSelectOptions: SelectOptionType[] = GenderChoice;
-    let userTypeOptions: SelectOptionType[] = UserTypeChoice;
-
-    let teamSelected: SelectOptionType[] = [{"label": user.team, "value": user.team}];
-    let genderSelected: SelectOptionType[] = [{"label": user.gender, "value": user.gender}];
-    let userTypeSelected: SelectOptionType[] = [{"label": user.user_type, "value": user.user_type}];
-    let locationSelected: SelectOptionType[] = [{"label": user.location.name, "value": user.location.name}];
-    let reportingToSelected: SelectOptionType[] = [];
+    export let isLoading: boolean = false;
+    export let isError: boolean = false;
+    let isErrorUserSelected: boolean = false;
+    
+    let userSelected: SelectOptionType[] = [];
+    
+    let user: UserInterface;
+    $: submitDisabled = userSelected.length == 0;
 
-    for (let i in user.reporting_to) {
-        reportingToSelected.push({"label": user.reporting_to[i].full_name, "value": user.reporting_to[i].id});
+    async function loadUserBalance(){
+        const userID = userSelected[0].value;        
+        const _user: UserInterface = await Users.getUserByID(userID);
+        if (_user){            
+            user = _user
+        }
     }
 
 </script>
 
-<div class="card">
-    <div class="card-body">
-        <div class="row">
-            <div class="col-6">
-                <div class="form-outline">
-                    <Input
-                        type="text"
-                        label={'First Name'}
-                        bind:value={ user.first_name }
-                        handleInput={validateName}
-                        size={150}
-                        errorMessage="Invalid Name"
-                        hint={'please enter a valid first name'}
-                        placeholder={'Enter first name'}
-                        bind:isError={isErrorfName}
-                    /> 
-                </div>
-            </div>
-            <div class="col-6">
-                <div class="form-outline">
-                    <Input
-                        type="text"
-                        label={'Last Name'}
-                        bind:value={ user.last_name }
-                        handleInput={validateName}
-                        size={150}
-                        errorMessage="Invalid Name"
-                        hint={'please enter a valid last name'}
-                        placeholder={'Enter last name'}
-                        bind:isError={isErrorlName}
-                    /> 
-                </div>
-            </div>
-            {#if $UserStore.user_type == "Admin"}
-                <div class="col-6">
-                    <div class="form-outline">
-                        <Input
-                            type="text"
-                            label={'Email'}
-                            bind:value={ user.email }
-                            handleInput={validateEmail}
-                            size={150}
-                            errorMessage="Invalid email address"
-                            hint={'please enter a valid email address'}
-                            placeholder={'Enter email address'}
-                            bind:isError={isErrormail}
-                        /> 
-                    </div>
-                </div>
-                <div class="col-6">
-                    <div class="form-outline">
-                        <Input
-                            type="text"
-                            label={'Social insurance number'}
-                            bind:value={user.social_insurance_number}
-                            handleInput={() => {
-                                return false;
+{#if !user}
+    <div class="card">
+        <div class="card-body">
+            <div class="row">
+                <PeopleSelect
+                    mylabel= {"User"}
+                    placeholder= {"Select User..."}
+                    bind:isError={isErrorUserSelected}
+                    bind:selected={userSelected}
+                    isTop={true}
+                    multiple={false}
+                />
+                <div class="col-12">
+                    <div class="form-outline mt-4  d-flex justify-content-center">
+                        <Submit
+                            width={'25'}
+                            successMessage={'Profile Updated!'}
+                            errorMessage={'Profile updates failed!'}
+                            label="Load user"
+                            onClick={async () => {
+                                isLoading = true;
+                                await loadUserBalance();
+                                isLoading = false;
+                                
+                                return isError;
                             }}
-                            size={150}
-                            errorMessage="Social insurance number isinvalid"
-                            hint={'please write a valid Social insurance number'}
-                            placeholder={'please fill Social insurance number here'}
-                            bind:isError={isErrorSocialNumber}
-                        />
-                    </div>
-                </div>
-                <div class="col-6">
-                    <div class="form-outline">
-                        <Input
-                            type="number"
-                            label={'Net Current Salary'}
-                            bind:value={ defaultNetSalary }
-                            handleInput={validateSalary}
-                            size={20}
-                            errorMessage="invalid salary value"
-                            hint={'please enter the net current salary for the employee'}
-                            placeholder={'Enter the net current salary'}
-                            bind:isError={isErrorCurrentNetSalary}
-                        />
-                    </div>
-                </div>
-                <div class="col-6">
-                    <div class="form-outline">
-                        <Input
-                            type="number"
-                            label={'Gross Current Salary'}
-                            bind:value={ defaultGrossSalary }
-                            handleInput={validateSalary}
-                            size={20}
-                            errorMessage="invalid salary value"
-                            hint={'please enter the gross current salary for the employee'}
-                            placeholder={'Enter the gross current salary'}
-                            bind:isError={isErrorCurrentGrossSalary}
-                        />
-                    </div>
-                </div>
-                <div class="col-6">
-                    <div class="form-outline">
-                        <MultiSelect
-                          bind:options={teamSelectOptions}
-                          bind:selected={teamSelected}
-                          isLabel={true}
-                          label="Team"
-                          placeholder="Select team"
-                          removeAllTitle="Remove all teams"
-                          multiple={false}
-                        />
-                    </div>
-                </div>
-                <div class="col-6">
-                    <div class="form-outline">
-                        <MultiSelect
-                          bind:options={genderSelectOptions}
-                          bind:selected={genderSelected}
-                          isLabel={true}
-                          label="Gender"
-                          placeholder="Select gender"
-                          removeAllTitle="Remove gender"
-                          multiple={false}
-                        />
-                    </div>
-                </div>
-                <div class="col-6">
-                    <div class="form-outline">
-                        <MultiSelect
-                          bind:options={userTypeOptions}
-                          bind:selected={userTypeSelected}
-                          isLabel={true}
-                          label="User Type"
-                          placeholder="Select user type"
-                          removeAllTitle="Remove user type"
-                          multiple={false}
-                          bind:isError={isErrorUserType}
-                        />
-                    </div>
-                </div>
-                <div class="col-6">
-                    <div class="form-outline">
-                        <LocationSelect
-                            mylabel= {"Location"}
-                            bind:isError={isErrorLocation}
-                            bind:selected={locationSelected}
-                            isTop={true}
-                        />
-                    </div>
-                </div>
-                <div class="col-6">
-                    <div class="form-outline">
-                        <PeopleSelect
-                            multiple={true}
-                            mylabel= {"Reporting to"}
-                            bind:isError={isErrorSuperuser}
-                            bind:selected={reportingToSelected}
-                            isTop={true}
-                        />
-                    </div>
-                </div>
-            {/if}
-            <div class="col-6">
-                <div class="form-outline">
-                    <Input
-                        type="tel"
-                        label={'Mobile Number'}
-                        bind:value={ user.mobile_number }
-                        handleInput={validatePhoneNumber}
-                        size={150}
-                        errorMessage="Invalid Mobile Number"
-                        hint={'please enter a valid mobile number in range(10, 15) digits'}
-                        placeholder={'01234567890'}
-                        bind:isError={isErrorMobile}
-                    />
-                </div>
-            </div>
-            <div class="col-6">
-                <div class="form-outline">
-                    <Input
-                        type="text"
-                        label={'Job Title'}
-                        bind:value={ user.job_title }
-                        handleInput={() => {
-                            return false;
-                        }}
-                        size={150}
-                        errorMessage="job title is invalid"
-                        hint={'please write a valid job title'}
-                        placeholder={'please fill job title here'}
-                        bind:isError={isErrorJobTitle}
-                    />
-                </div>
-            </div>
-            <div class="col-6">
-                <div class="form-outline">
-                    <Input
-                        type="text"
-                        label={'Address'}
-                        bind:value={ user.address }
-                        handleInput={() => {
-                            return false;
-                        }}
-                        size={150}
-                        errorMessage="Address is invalid"
-                        hint={'please write a valid address'}
-                        placeholder={'please put the address here'}
-                        bind:isError={isErrorAddress}
-                    />
-                </div>
-            </div>
-            <div class="col-6">
-                <div class="form-outline">
-                    <Input
-                        type="text"
-                        label={'Telegram User Name'}
-                        bind:value={ user.telegram_link }
-                        handleInput={validateTelegramLink}
-                        size={150}
-                        errorMessage="Invalid Link"
-                        hint={'please enter a valid Telegram username link'}
-                        placeholder={'Enter telegram link e.g: @username'}
-                        bind:isError={isErrorLink}
-                    />
-                </div>
-            </div>
-            <div class="col-6">
-                <div class="form-outline">
-                    <Input
-                        type="date"
-                        label={'Birthday date'}
-                        bind:value={ user.birthday }
-                        handleInput={validateBirthday}
-                        size={150}
-                        errorMessage="Invalid birthdate"
-                        hint={'please enter a valid birthday date'}
-                        placeholder={'Enter birthday date'}
-                        bind:isError={isErrorBirthday}
+                        className=""
+                        bind:disabled={submitDisabled}
                     />
-                </div>
-            </div>
-            <div class="col-6 mt-3">
-                <div class="form-outline">
-                    <div class="row">
-                        <div class="col-4 d-flex align-items-center">Background Logo color</div>
-                        <div class="col-8">
-                            <ColorPicker bind:color/>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {#if user.image.includes("profile_image") }
-                <div class="col-6 mt-3">
-                    <RemoveImage on:message={(event) => {
-                        removeImage = event.detail.text
-                    }} buttonBackgraound={user.background_color} label={"Clear Profile Image"}/>
-                </div>
-            {/if}
-            <div class="col-6">
-                <div class="row">
-                    <div class="col-6 mt-3">
-                        <!-- svelte-ignore a11y-label-has-associated-control -->
-                        <label>Profile Image</label>
-                    </div>
-                    <div class="col-6">
-                        <div class="form-outline mt-3">
-                            <SelectImage bind:image styleOnRow={"flex-direction: column;"}/>
-                        </div>
                     </div>
                 </div>
             </div>
-            <div class="col-12">
-                <div class="form-outline mt-4  d-flex justify-content-center">
-                    <Submit
-                        width={'15'}
-                        successMessage={'Profile Updated!'}
-                        errorMessage={'Profile updates failed!'}
-                        label="Submit"
-                        onClick={async () => {
-                            isLoading = true;
-                            for (var i in reportingToSelected) {
-                                user.reporting_to[i]=reportingToSelected[i].value;
-                            }
-                            user.background_color = color.toHexString()
-                            user.team = teamSelected[0].value;
-                            user.location = locationSelected[0].value;
-                            user.gender = genderSelected[0].value;
-                            user.user_type = userTypeSelected[0].value;
-                            user.remove_image = removeImage
-                            if (image != undefined){
-                                user.image = image.src
-                            } else {
-                                user.image = ""
-                            }
-                            try {
-                                await RegisterDataService.updateProfile(user);
-                            } catch (error) {
-                                isError = true;
-                            } finally {
-                                isLoading = false;
-                            }
-                            return isError;
-                        }}
-                    className=""
-                    bind:disabled={submitDisabled}
-                  />
-                </div>
-            </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+{:else}
+    <UpdateUserProfileForm user={user} />
+{/if}
\ No newline at end of file
diff --git a/client/src/componants/vacations/VacationBalance.svelte b/client/src/componants/vacations/VacationBalance.svelte
index 41eb24492..60459e92f 100644
--- a/client/src/componants/vacations/VacationBalance.svelte
+++ b/client/src/componants/vacations/VacationBalance.svelte
@@ -6,5 +6,5 @@
 </script>
 
 <div class="container">
-    <AdminBalance user={$user}/>
+    <AdminBalance />
 </div>
\ No newline at end of file
diff --git a/client/src/utils/choices.ts b/client/src/utils/choices.ts
index 270dca0d8..8bfe7aa18 100644
--- a/client/src/utils/choices.ts
+++ b/client/src/utils/choices.ts
@@ -28,16 +28,20 @@ export const GenderChoice = [
 
 export const TeamChoice = [
     {
-        label: TeamEnum.Accounting,
-        value: TeamEnum.Accounting
+        label: TeamEnum.BusinessDevelopment,
+        value: TeamEnum.BusinessDevelopment
     },
     {
         label: TeamEnum.Development,
         value: TeamEnum.Development
     },
     {
-        label: TeamEnum.Management,
-        value: TeamEnum.Management
+        label: TeamEnum.HRAndFinance,
+        value: TeamEnum.HRAndFinance
+    },
+    {
+        label: TeamEnum.QA,
+        value: TeamEnum.QA
     },
     {
         label: TeamEnum.Marketing,
@@ -48,9 +52,9 @@ export const TeamChoice = [
         value: TeamEnum.Operations
     },
     {
-        label: TeamEnum.QA,
-        value: TeamEnum.QA
-    }
+        label: TeamEnum.Support,
+        value: TeamEnum.Support
+    },
 ];
 
 export const weekendHolidaysChoices =  [
diff --git a/client/src/utils/enums.ts b/client/src/utils/enums.ts
index 8934c6659..7c74efe10 100644
--- a/client/src/utils/enums.ts
+++ b/client/src/utils/enums.ts
@@ -48,12 +48,13 @@ export enum WeekendHolidaysEnum{
 };
 
 export enum TeamEnum{
+    BusinessDevelopment = "Business Development",
     Development = "Development",
-    Operations  = "Operations",
-    Marketing   = "Marketing",
-    Management  = "Management",
-    Accounting  = "Accounting",
-    QA          = "Q&A"
+    HRAndFinance = "HR & Finance",
+    QA = "QA",
+    Marketing = "Marketing",
+    Operations = "Operations",
+    Support = "Support",
 };
 
 export enum GenderEnum{
diff --git a/client/src/utils/types.ts b/client/src/utils/types.ts
index bfbd18bf7..a6b81c64a 100644
--- a/client/src/utils/types.ts
+++ b/client/src/utils/types.ts
@@ -35,6 +35,7 @@ export interface GeneralUserInterface {
   reporting_to: TeamType[];
   location: OfficeType;
   user_type: UserType;
+  remove_image?: boolean;
 }
 
 export interface SupervisorViewInterface extends GeneralUserInterface {
diff --git a/server/cshr/migrations/0069_alter_user_team.py b/server/cshr/migrations/0069_alter_user_team.py
new file mode 100644
index 000000000..fd57c7e67
--- /dev/null
+++ b/server/cshr/migrations/0069_alter_user_team.py
@@ -0,0 +1,29 @@
+# Generated by Django 4.1.2 on 2023-10-30 07:40
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("cshr", "0068_remove_offcialdocument_applying_user_and_more"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="user",
+            name="team",
+            field=models.CharField(
+                choices=[
+                    ("Business Development", "Businessdevelopment"),
+                    ("Development", "Development"),
+                    ("HR & Finance", "Hrandfinance"),
+                    ("QA", "Qa"),
+                    ("Marketing", "Marketing"),
+                    ("Operations", "Operations"),
+                    ("Support", "Support"),
+                ],
+                max_length=20,
+            ),
+        ),
+    ]
diff --git a/server/cshr/models/users.py b/server/cshr/models/users.py
index eb56195eb..ac73d2c32 100644
--- a/server/cshr/models/users.py
+++ b/server/cshr/models/users.py
@@ -12,15 +12,13 @@
 
 class TEAM(models.TextChoices):
     """enum class for team options"""
-
-    # Dev-QA-Ops-Marketing-Management-Accounting
-
-    DEV = "Development"
-    QA = "Quality assurance"
-    OPS = "Operations"
-    MARKETING = "Marketing"
-    MANAGEMENT = "Management"
-    ACCOUNTING = "Accounting"
+    BusinessDevelopment = "Business Development"
+    Development = "Development"
+    HRAndFinance = "HR & Finance"
+    QA = "QA"
+    Marketing = "Marketing"
+    Operations = "Operations"
+    Support = "Support"
 
 
 class USER_TYPE(models.TextChoices):
diff --git a/server/cshr/serializers/users.py b/server/cshr/serializers/users.py
index b3d1c7eaa..218a0fe6e 100644
--- a/server/cshr/serializers/users.py
+++ b/server/cshr/serializers/users.py
@@ -62,12 +62,17 @@ class Meta:
         model = User
         fields = [
             "id",
+            "first_name",
+            "last_name",
             "full_name",
             "email",
             "gender",
             "team",
             "image",
             "telegram_link",
+            "social_insurance_number",
+            "mobile_number",
+            "reporting_to",
             "birthday",
             "location",
             "skills",
@@ -77,6 +82,7 @@ class Meta:
             "job_title",
             "address",
             "user_type",
+            "background_color",
         ]
 
     def get_user_certificates(self, obj):
diff --git a/server/cshr/services/office.py b/server/cshr/services/office.py
index 39463b0f1..85999c749 100644
--- a/server/cshr/services/office.py
+++ b/server/cshr/services/office.py
@@ -9,3 +9,9 @@ def get_office_by_id(id: str) -> Office:
         return Office.objects.get(id=int(id))
     except Office.DoesNotExist:
         return None
+
+def get_office_by_name(name: str) -> Office:
+    try:
+        return Office.objects.get(name=name)
+    except Office.DoesNotExist:
+        return None
diff --git a/server/cshr/views/users.py b/server/cshr/views/users.py
index 33108d84f..1dd9888a0 100644
--- a/server/cshr/views/users.py
+++ b/server/cshr/views/users.py
@@ -9,6 +9,7 @@
     IsUser,
     UserIsAuthenticated,
 )
+from server.cshr.services.office import get_office_by_id, get_office_by_name
 from server.cshr.utils.validations import Validator
 from server.cshr.api.response import CustomResponse
 from server.cshr.serializers.users import (
@@ -185,7 +186,7 @@ def get(self, request: Request) -> Response:
 
 
 class UpdateUserProfileUserAPIView(GenericAPIView):
-    permission_classes = [IsUser | IsAdmin | IsSupervisor]
+    permission_classes = [ IsAdmin ]
     serializer_class = UpdateUserSerializer
 
     def put(self, request: Request, id: str, format=None) -> Response:
@@ -196,10 +197,15 @@ def put(self, request: Request, id: str, format=None) -> Response:
         remove_image: bool = request.data.get("remove_image")
         if request.data.get("image") == "":
             request.data["image"] = user.image if user.image else None
-
+            
         serializer = self.get_serializer(user, data=request.data, partial=True)
         if serializer.is_valid():
-            serializer.save()
+            office = get_office_by_id(request.data.get("location"))
+            serializer.save(
+                team=request.data.get("team"),
+                gender=request.data.get("gender"),
+                location=office,
+            )
             if remove_image:
                 user.image.delete()
                 user.save()