diff --git a/app/composables/api/profile/useProfile.api.ts b/app/composables/api/profile/useProfile.api.ts
index 0712a7f74..4b1b9185c 100644
--- a/app/composables/api/profile/useProfile.api.ts
+++ b/app/composables/api/profile/useProfile.api.ts
@@ -4,6 +4,7 @@ import type {
   ProfileDTO,
   EditProfileDTO,
   DeleteProfileDTO,
+  ChangePasswordDTO,
 } from '@/types'
 
 const loadingGetItemById = ref(false)
@@ -11,11 +12,13 @@ const loadingEditItem = ref(false)
 const loadingDeleteItem = ref(false)
 const loadingCancelDeleteItem = ref(false)
 const loadingChangeGroup = ref(false)
+const loadingChangePassword = ref(false)
 const NAME = 'Profile'
 
 export const useProfile = () => {
   const { $toast } = useNuxtApp()
   const auth = useAuth()
+  const { handleApiResponseError, handleApiCatchError, createApiFailure } = useApiErrorHandler()
 
   const getItemById = async (id: string) => {
     loadingGetItemById.value = true
@@ -304,7 +307,33 @@ export const useProfile = () => {
     }
   }
 
+  const changePassword = async (item: ChangePasswordDTO) => {
+    try {
+      loadingChangePassword.value = true
+      const response = await useApiService.put<
+        ApiResult<boolean>
+      >('/api/v1/users/password', { ...item })
+
+      if (response.status == 1) {
+        $toast.success('Password changed successfully')
+      }
+      else {
+        handleApiResponseError(response)
+      }
+
+      return response
+    }
+    catch (err: unknown) {
+      handleApiCatchError(err)
+
+      return createApiFailure<boolean>(err, false)
+    }
+    finally {
+      loadingChangePassword.value = false
+    }
+  }
+
   return {
-    getItemById, loadingGetItemById, editItem, loadingEditItem, deleteItem, loadingDeleteItem, cancelDeleteItem, loadingCancelDeleteItem, changeGroup, loadingChangeGroup,
+    getItemById, loadingGetItemById, editItem, loadingEditItem, deleteItem, loadingDeleteItem, cancelDeleteItem, loadingCancelDeleteItem, changeGroup, loadingChangeGroup, changePassword, loadingChangePassword,
   }
 }
diff --git a/app/composables/useValidationRules.ts b/app/composables/useValidationRules.ts
index f32eaf089..e403abbac 100644
--- a/app/composables/useValidationRules.ts
+++ b/app/composables/useValidationRules.ts
@@ -107,11 +107,11 @@ export const useValidationRules = () => {
     || 'Password must contain uppercase, lowercase, number and special character'
 
   // Confirmation validation
-  const matches = (target: Ref<string> | string, fieldName = 'field') =>
+  const matches = (target: Ref<string> | string, fieldName = 'field', message?: string) =>
     (v: string) => {
       const targetValue
         = typeof target === 'string' ? target : target.value
-      return v === targetValue || `Must match ${fieldName}`
+      return v === targetValue || message || `Must match ${fieldName}`
     }
 
   // Array validation
diff --git a/app/pages/user/edit-pass.vue b/app/pages/user/edit-pass.vue
index f6a6dfe0d..349c8feb7 100644
--- a/app/pages/user/edit-pass.vue
+++ b/app/pages/user/edit-pass.vue
@@ -3,7 +3,7 @@
     <v-row>
       <v-col
         cols="12"
-        class="pl-5 text-h4 teal--text"
+        class="pl-5 text-h4 text-grey700"
       >
         <v-icon
           large
@@ -25,7 +25,7 @@
           label="Current password"
           outlined
           rounded="lg"
-          color="#FFB600"
+          color="primary"
           :append-inner-icon="
             showCurrentPassword ? 'md:visibility' : 'md:visibility_off'
           "
@@ -46,7 +46,7 @@
           label="New password"
           outlined
           rounded="lg"
-          color="#FFB600"
+          color="primary"
           :append-inner-icon="
             showNewPassword ? 'md:visibility' : 'md:visibility_off'
           "
@@ -67,7 +67,7 @@
           label="Repeat new password"
           outlined
           rounded="lg"
-          color="#FFB600"
+          color="primary"
           :append-inner-icon="
             showRepeatNewPassword ? 'md:visibility' : 'md:visibility_off'
           "
@@ -91,7 +91,7 @@
           class="text-h5 font-weight-bold"
           color="success"
           :disabled="!isFormValid"
-          :loading="loading"
+          :loading="loadingChangePassword"
           @click="updatePassword"
         >
           Submit
@@ -146,17 +146,6 @@
 </template>
 
 <script setup lang="ts">
-interface ApiError {
-  response?: {
-    status?: number
-    data?: {
-      message?: string
-      [key: string]: unknown
-    }
-  }
-  message?: string
-  [key: string]: unknown
-}
 definePageMeta({
   layout: 'dashboard-layout',
 })
@@ -165,9 +154,16 @@ useSeoMeta({
   title: 'Change Password',
 })
 
-const { $dayjs, $toast } = useNuxtApp()
+const { $dayjs } = useNuxtApp()
 const router = useRouter()
 const { user } = useUser()
+const { changePassword, loadingChangePassword } = useProfile()
+const {
+  required,
+  minLength,
+  pattern,
+  matches,
+} = useValidationRules()
 
 const showCurrentPassword = ref(false)
 const currentPassword = ref('')
@@ -178,23 +174,19 @@ const newPassword = ref('')
 const showRepeatNewPassword = ref(false)
 const repeatNewPassword = ref('')
 
-const loading = ref(false)
-
-const requiredRule = (v: string) => !!v || 'This field is required'
+const requiredRule = required
 
 const passwordRules = [
-  (v: string) => !!v || 'Password is required',
-  (v: string) => v.length >= 8 || 'Minimum 8 characters',
-  (v: string) =>
-    /[A-Z]/.test(v) || 'Must include at least one uppercase letter',
-  (v: string) =>
-    /[a-z]/.test(v) || 'Must include at least one lowercase letter',
-  (v: string) => /\d/.test(v) || 'Must include at least one number',
+  required,
+  minLength(8),
+  pattern(/[A-Z]/, 'Must include at least one uppercase letter'),
+  pattern(/[a-z]/, 'Must include at least one lowercase letter'),
+  pattern(/\d/, 'Must include at least one number'),
 ]
 
 const repeatPasswordRules = [
-  (v: string) => !!v || 'Repeat password is required',
-  (v: string) => v === newPassword.value || 'Passwords do not match',
+  required,
+  matches(newPassword, 'passwords', 'Passwords do not match'),
 ]
 
 const currentTime = ref($dayjs())
@@ -236,25 +228,15 @@ const isFormValid = computed(() => {
 const updatePassword = async () => {
   if (!isFormValid.value) return
 
-  try {
-    loading.value = true
+  const response = await changePassword({
+    oldpass: currentPassword.value,
+    newpass: newPassword.value,
+    repeat_newpass: repeatNewPassword.value,
+  })
 
-    const payload = {
-      oldpass: currentPassword.value,
-      newpass: newPassword.value,
-      repeat_newpass: repeatNewPassword.value,
-    }
-    await useApiService.put('/api/v1/users/password', payload)
-    $toast.success('Password changed successfully')
+  if (response?.succeeded) {
     router.push('/user')
   }
-  catch (err: unknown) {
-    const error = err as ApiError
-    $toast.error(error?.response?.data?.message || 'Failed to change password')
-  }
-  finally {
-    loading.value = false
-  }
 }
 </script>
 
diff --git a/app/pages/user/profile/index.vue b/app/pages/user/profile/index.vue
index 5b29ea386..414e387c7 100644
--- a/app/pages/user/profile/index.vue
+++ b/app/pages/user/profile/index.vue
@@ -1,313 +1,357 @@
 <template>
   <v-container class="w-100 d-flex flex-column">
-    <v-row>
-      <v-col
-        cols="12"
-        class="d-flex"
-      >
-        <v-file-input
-          ref="avatarInputRef"
-          v-model="userInformation.avatarFile"
-          class="d-none"
-          accept="image/png,image/webp,image/jpeg"
-          @change="uploadAvatar"
-        />
-
-        <v-skeleton-loader
-          v-if="userDataLoading"
-          width="72"
-          height="72"
-          class="rounded-circle"
-        />
-        <img
-          v-if="userInformation.avatarUrl && !userDataLoading"
-          width="72"
-          height="72"
-          class="pointer rounded-pill"
-          :src="userInformation.avatarUrl"
-          @click="changeUserAvatar"
+    <v-form
+      v-model="isFormValid"
+      class="w-100 d-flex flex-column"
+    >
+      <v-row>
+        <v-col
+          cols="12"
+          class="d-flex"
         >
-        <v-btn
-          v-if="!userInformation.avatarUrl && !userDataLoading"
-          class="d-flex pointer rounded-pill"
-          variant="outlined"
-          size="x-large"
-          icon
-          density="default"
-          @click="changeUserAvatar"
-        >
-          <v-icon size="36">
-            md:person
-          </v-icon>
-        </v-btn>
-        <div class="pa-3">
-          <p
-            class="text-h5 pointer"
+          <v-file-input
+            ref="avatarInputRef"
+            v-model="userInformation.avatarFile"
+            class="d-none"
+            accept="image/png,image/webp,image/jpeg"
+            @change="uploadAvatar"
+          />
+
+          <v-skeleton-loader
+            v-if="userDataLoading"
+            width="72"
+            height="72"
+            class="rounded-circle"
+          />
+          <img
+            v-if="userInformation.avatarUrl && !userDataLoading"
+            width="72"
+            height="72"
+            class="pointer rounded-pill"
+            :src="userInformation.avatarUrl"
+            @click="changeUserAvatar"
+          >
+          <v-btn
+            v-if="!userInformation.avatarUrl && !userDataLoading"
+            class="d-flex pointer rounded-pill"
+            variant="outlined"
+            size="x-large"
+            icon
+            density="default"
             @click="changeUserAvatar"
           >
-            <v-icon size="small">
-              md:edit
+            <v-icon size="36">
+              md:person
             </v-icon>
-            Edit
-          </p>
-          <span class="text-h5"> Help to pick profile pic </span>
-        </div>
-      </v-col>
-      <v-col cols="12">
-        <v-skeleton-loader
-          v-if="userDataLoading"
-          width="200"
-          height="20"
-          class="rounded-pill"
-        />
-        <div
-          v-else
-          class="text-h6 text-sm-h5 text-grey700"
+          </v-btn>
+          <div class="pa-3">
+            <p
+              class="text-h5 pointer"
+              @click="changeUserAvatar"
+            >
+              <v-icon size="small">
+                md:edit
+              </v-icon>
+              Edit
+            </p>
+            <span class="text-h5"> Help to pick profile pic </span>
+          </div>
+        </v-col>
+        <v-col cols="12">
+          <v-skeleton-loader
+            v-if="userDataLoading"
+            width="200"
+            height="20"
+            class="rounded-pill"
+          />
+          <div
+            v-else
+            class="text-h6 text-sm-h5 text-grey700"
+          >
+            Want to see your public profile?
+            <NuxtLink
+              v-if="userInformation.handle"
+              :to="`/profile/${userInformation.handle}`"
+              class="text-primary font-weight-bold text-decoration-none"
+            >
+              Open your profile page
+            </NuxtLink>
+          </div>
+        </v-col>
+      </v-row>
+
+      <!-- Personal Information -->
+      <v-row>
+        <v-col
+          cols="12"
+          class="pl-5 text-h4 text-grey700"
         >
-          Want to see your public profile?
-          <NuxtLink
-            v-if="userInformation.handle"
-            :to="`/profile/${userInformation.handle}`"
-            class="text-primary font-weight-bold text-decoration-none"
+          <v-icon
+            large
+            color="primary"
           >
-            Open your profile page
-          </NuxtLink>
-        </div>
-      </v-col>
-    </v-row>
-
-    <!-- Personal Information -->
-    <v-row>
-      <v-col
-        cols="12"
-        class="pl-5 text-h4 teal--text"
-      >
-        <v-icon
-          large
-          color="primary"
+            md:person_outlined
+          </v-icon>
+          <span class="font-weight-bold"> Your personal information </span>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="4"
         >
-          md:person_outlined
-        </v-icon>
-        <span class="font-weight-bold"> Your personal information </span>
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="4"
-      >
-        <v-text-field
-          v-model="userInformation.firstName"
-          density="compact"
-          variant="outlined"
-          :rules="firstNameRules"
-          label="First name"
-          outlined
-          rounded="lg"
-          color="#FFB600"
+          <v-text-field
+            v-model="userInformation.firstName"
+            density="compact"
+            variant="outlined"
+            :rules="firstNameRules"
+            label="First name"
+            outlined
+            rounded="lg"
+            color="primary"
+          >
+            <template #prepend-inner>
+              <v-progress-circular
+                v-if="userDataLoading"
+                indeterminate
+                size="20"
+                color="primary"
+                class="mr-2"
+              />
+            </template>
+          </v-text-field>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="4"
         >
-          <template #prepend-inner>
-            <v-progress-circular
-              v-if="userDataLoading"
-              indeterminate
-              size="20"
-              color="#ffb300"
-              class="mr-2"
-            />
-          </template>
-        </v-text-field>
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="4"
-      >
-        <v-text-field
-          v-model="userInformation.lastName"
-          density="compact"
-          variant="outlined"
-          label="Last name"
-          outlined
-          rounded="lg"
-          color="#FFB600"
+          <v-text-field
+            v-model="userInformation.lastName"
+            density="compact"
+            variant="outlined"
+            label="Last name"
+            outlined
+            rounded="lg"
+            color="primary"
+          >
+            <template #prepend-inner>
+              <v-progress-circular
+                v-if="userDataLoading"
+                indeterminate
+                size="20"
+                color="primary"
+                class="mr-2"
+              />
+            </template>
+          </v-text-field>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="4"
         >
-          <template #prepend-inner>
-            <v-progress-circular
-              v-if="userDataLoading"
-              indeterminate
-              size="20"
-              color="#ffb300"
-              class="mr-2"
-            />
-          </template>
-        </v-text-field>
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="4"
-      >
-        <CommonCustomSelectField
-          label="Gender"
-          :items="genderList"
-          :selected-item="userInformation.gender"
-          :has-search="false"
-          :loading="userDataLoading"
-          @change-selected-item="(item : SelectOption) => userInformation.gender = item"
-        />
-      </v-col>
-    </v-row>
-
-    <!-- Location Details -->
-    <v-row>
-      <v-col
-        cols="12"
-        class="pl-5 text-h4 teal--text"
-      >
-        <v-icon
-          large
-          color="primary"
+          <common-gombo-box
+            v-model="userInformation.gender"
+            label="Gender"
+            :items="genderList"
+            :data-loading="userDataLoading"
+            :has-search="false"
+            density="compact"
+            rounded="lg"
+            base-color="grey500"
+            color="primary"
+          />
+        </v-col>
+      </v-row>
+
+      <!-- Location Details -->
+      <v-row>
+        <v-col
+          cols="12"
+          class="pl-5 text-h4 text-grey700"
         >
-          md:location_on_outlined
-        </v-icon>
-        <span class="font-weight-bold"> Location details </span>
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="4"
-      >
-        <CommonCustomSelectField
-          label="Country"
-          :items="countries"
-          :selected-item="userInformation.country"
-          :loading="countryLoading || userDataLoading"
-          @change-selected-item="countyChange"
-        />
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="4"
-      >
-        <CommonCustomSelectField
-          label="State"
-          :items="states"
-          :selected-item="userInformation.state"
-          :loading="stateLoading || userDataLoading"
-          :disabled="!userInformation.country"
-          @change-selected-item="stateChange"
-        />
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="4"
-      >
-        <CommonCustomSelectField
-          label="City"
-          :items="cities"
-          :selected-item="userInformation.city"
-          :loading="cityLoading || userDataLoading"
-          :disabled="!userInformation.state"
-          @change-selected-item="cityChange"
-        />
-      </v-col>
-    </v-row>
-
-    <!-- School Profile -->
-    <v-row>
-      <v-col
-        cols="12"
-        class="pl-5 text-h4 teal--text"
-      >
-        <v-icon
-          large
-          color="primary"
+          <v-icon
+            large
+            color="primary"
+          >
+            md:location_on_outlined
+          </v-icon>
+          <span class="font-weight-bold"> Location details </span>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="4"
         >
-          md:school_outlined
-        </v-icon>
-        <span class="font-weight-bold"> School Profile </span>
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="4"
-      >
-        <CommonCustomSelectField
-          label="Board"
-          :items="boards"
-          :selected-item="userInformation.board"
-          :loading="boardLoading || userDataLoading"
-          @change-selected-item="boardChange"
-        />
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="4"
-      >
-        <CommonCustomSelectField
-          label="Grade"
-          :items="grades"
-          :selected-item="userInformation.grade"
-          :loading="gradeLoading || userDataLoading"
-          :disabled="!userInformation.board"
-          @change-selected-item="(item : SelectOption) => userInformation.grade = item"
-        />
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="4"
-      >
-        <CommonCustomSelectField
-          label="School"
-          :items="schools"
-          :selected-item="userInformation.school"
-          :loading="schoolLoading || userDataLoading"
-          :disabled="!userInformation.city"
-          @change-selected-item="(item : SelectOption) => userInformation.school = item"
-        />
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-divider class="my-3" />
-      <v-col
-        cols="12"
-        md="6"
-        class="pb-0 d-flex justify-center justify-md-end"
-      >
-        <v-btn
-          flat
-          rounded="lg"
-          width="250"
-          class="text-h5 font-weight-bold"
-          color="success"
-          :loading="submitLoading"
-          :disabled="!isFormValid"
-          @click="submitData"
+          <common-gombo-box
+            v-model="userInformation.country"
+            label="Country"
+            :items="countries"
+            :data-loading="loadingCountries || userDataLoading"
+            density="compact"
+            rounded="lg"
+            base-color="grey500"
+            color="primary"
+            @update:model-value="countyChange"
+          />
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="4"
         >
-          Submit
-        </v-btn>
-      </v-col>
-      <v-col
-        cols="12"
-        md="6"
-        class="d-flex justify-center justify-md-start"
-      >
-        <v-btn
-          flat
-          rounded="lg"
-          width="250"
-          class="text-h5 font-weight-bold"
-          color="error"
-          to="/user"
+          <common-gombo-box
+            v-model="userInformation.state"
+            label="State"
+            :items="states"
+            :data-loading="loadingStates || loadingCountries || userDataLoading"
+            :disabled="!userInformation.country"
+            density="compact"
+            rounded="lg"
+            base-color="grey500"
+            color="primary"
+            @update:model-value="stateChange"
+          />
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="4"
         >
-          Discard
-        </v-btn>
-      </v-col>
-    </v-row>
+          <common-gombo-box
+            v-model="userInformation.city"
+            label="City"
+            :items="cities"
+            :data-loading="loadingCities || loadingStates || loadingCountries || userDataLoading"
+            :disabled="!userInformation.state"
+            density="compact"
+            rounded="lg"
+            base-color="grey500"
+            color="primary"
+            @update:model-value="cityChange"
+          />
+        </v-col>
+      </v-row>
+
+      <!-- School Profile -->
+      <v-row>
+        <v-col
+          cols="12"
+          class="pl-5 text-h4 text-grey700"
+        >
+          <v-icon
+            large
+            color="primary"
+          >
+            md:school_outlined
+          </v-icon>
+          <span class="font-weight-bold"> School Profile </span>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="4"
+        >
+          <common-gombo-box
+            v-model="userInformation.board"
+            label="Board"
+            :items="boards.map((board) => ({
+              id: board.code,
+              title: board.title,
+            }))"
+            :data-loading="loadingBoards || userDataLoading"
+            density="compact"
+            rounded="lg"
+            base-color="grey500"
+            color="primary"
+            @update:model-value="boardChange"
+          />
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="4"
+        >
+          <common-gombo-box
+            v-model="userInformation.grade"
+            label="Grade"
+            :items="grades.map((grade) => ({
+              id: grade.id,
+              title: grade.title,
+            }))"
+            :data-loading="loadingGrade || loadingBoards || userDataLoading"
+            :disabled="!userInformation.board"
+            density="compact"
+            rounded="lg"
+            base-color="grey500"
+            color="primary"
+          />
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="4"
+        >
+          <common-gombo-box
+            v-model="userInformation.school"
+            label="School"
+            :items="schools.map((school) => ({
+              id: school.id,
+              title: school.name,
+            }))"
+            :data-loading="loadingSchools || loadingCities || loadingStates || loadingCountries || userDataLoading"
+            :disabled="!userInformation.city"
+            :infinite-loading="true"
+            :loading-more="loadingMoreSchool"
+            :has-more-items="hasMoreItemsSchool"
+            density="compact"
+            rounded="lg"
+            base-color="grey500"
+            color="primary"
+            @load-more="loadMoreSchool"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-divider class="my-3" />
+
+        <v-col
+          cols="12"
+          md="6"
+          class="pb-0 d-flex justify-center justify-md-end"
+        >
+          <v-btn
+            flat
+            rounded="lg"
+            width="250"
+            class="text-h5 font-weight-bold"
+            color="success"
+            :loading="loadingEditItem"
+            :disabled="!isFormValid"
+            @click="submitData"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+        <v-col
+          cols="12"
+          md="6"
+          class="d-flex justify-center justify-md-start"
+        >
+          <v-btn
+            flat
+            rounded="lg"
+            width="250"
+            class="text-h5 font-weight-bold"
+            color="error"
+            to="/user"
+          >
+            Discard
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-form>
 
     <CommonCropperDialog
       v-model="showCropperDialog"
@@ -319,60 +363,28 @@
 </template>
 
 <script setup lang="ts">
-interface SelectOption {
-  id: number | string
-  title?: string
-  name?: string
+import type { EditProfileDTO, Gender, User } from '@/types'
+
+type SelectValue = number | string
+interface SelectItem {
+  id: SelectValue
+  title: string
 }
+
 interface UserProfileUI {
   avatarFile: File | null
   avatarUrl: string | null
   handle: string
   firstName: string
   lastName: string
-  gender: SelectOption | null
-  country: SelectOption | null
-  state: SelectOption | null
-  city: SelectOption | null
-  board: SelectOption | null
-  grade: SelectOption | null
-  school: SelectOption | null
-}
-interface UserProfileDTO {
-  userName: string
-  handle: string | null
-  firstName: string
-  lastName: string
-  countryId: number | null
-  stateId: number | null
-  cityId: number | null
-  schoolId: number | null
-  referralId: string | null
-  gender: string | null
-  board: number | null
-  grade: number | null
-  avatarUri: string | null
-}
-
-interface ApiResponse<T> {
-  data: T
-  succeeded: boolean
-  errors: {
-    message: string
-    code: string
-    reference: string
-    info: string
-    value: string
-  }[]
+  gender: SelectValue
+  country: SelectValue
+  state: SelectValue
+  city: SelectValue
+  board: SelectValue
+  grade: SelectValue
+  school: SelectValue
 }
-type ListFields
-  = | 'gender'
-    | 'country'
-    | 'state'
-    | 'city'
-    | 'board'
-    | 'grade'
-    | 'school'
 
 // Define page meta
 definePageMeta({
@@ -385,6 +397,50 @@ useSeoMeta({
 })
 
 const { $toast } = useNuxtApp()
+const {
+  required,
+  minLength,
+  maxLength,
+  alphabetic,
+} = useValidationRules()
+const {
+  user: currentUser,
+  getProfile,
+  setUser,
+} = useUser()
+const { editItem, loadingEditItem } = useProfile()
+const {
+  countries,
+  states,
+  cities,
+  loadingCountries,
+  loadingStates,
+  loadingCities,
+  getCountries,
+  getStates,
+  getCities,
+  resetCountries,
+  resetStates,
+  resetCities,
+} = useLocation()
+const {
+  loadingGetData: loadingBoards,
+  data: boards,
+  getData: getBoards,
+  resetBoards,
+  getGrades,
+  grades,
+  loadingGrade,
+  resetGrades,
+} = useBoard()
+const {
+  loadingGetData: loadingSchools,
+  data: schools,
+  getData: getSchools,
+  resetData: resetSchools,
+  loadingMore: loadingMoreSchool,
+  hasMoreItems: hasMoreItemsSchool,
+} = useSchool()
 
 const userInformation = ref<UserProfileUI>({
   avatarFile: null,
@@ -392,102 +448,25 @@ const userInformation = ref<UserProfileUI>({
   handle: '',
   firstName: '',
   lastName: '',
-  gender: null,
-  country: null,
-  state: null,
-  city: null,
-  board: null,
-  grade: null,
-  school: null,
+  gender: '',
+  country: '',
+  state: '',
+  city: '',
+  board: '',
+  grade: '',
+  school: '',
 })
+
 const userDataLoading = ref(true)
+const isFormValid = ref(false)
+const pageSchool = ref(1)
+const pageSizeSchool = 50
 
-const firstNameRules = [
-  (v: string) => !!v || 'First name is required',
-  (v: string) => v.length >= 2 || 'First name must be at least 2 characters',
-  (v: string) => v.length <= 50 || 'First name must be less than 50 characters',
-  (v: string) =>
-    /^[a-zA-Z\s]+$/.test(v) || 'First name can only contain letters and spaces',
-]
-// const lastNameRules = [
-//   (v: string) => !!v || "Last name is required",
-//   (v: string) => v.length >= 2 || "Last name must be at least 2 characters",
-//   (v: string) => v.length <= 50 || "Last name must be less than 50 characters",
-//   (v: string) =>
-//     /^[a-zA-Z\s]+$/.test(v) || "Last name can only contain letters and spaces",
-// ];
-
-const genderList = ref<SelectOption[]>([
+const genderList = ref<SelectItem[]>([
   { id: 'Male', title: 'Male' },
   { id: 'Female', title: 'Female' },
 ])
-
-// Location Info
-const countries = ref<SelectOption[]>([])
-const countryLoading = ref(true)
-const states = ref<SelectOption[]>([])
-const stateLoading = ref(true)
-const cities = ref<SelectOption[]>([])
-const cityLoading = ref(true)
-
-const handleChange = async (
-  field: ListFields,
-  value: SelectOption | null,
-  firstInitialize: boolean,
-  resetFields: ListFields[],
-  fetchType?: keyof typeof locationConfig,
-) => {
-  userInformation.value[field] = value
-
-  if (!firstInitialize) {
-    resetFields.forEach((f) => {
-      userInformation.value[f] = null
-      if (f === 'state') states.value = []
-      if (f === 'city') cities.value = []
-      if (f === 'school') schools.value = []
-      if (f === 'grade') grades.value = []
-    })
-    if (value && fetchType) {
-      await getFilterList({ 'PagingDto.PageFilter.Size': 10000 }, fetchType)
-    }
-  }
-}
-
-const countyChange = async (item: SelectOption, firstInitilize: boolean) => {
-  await handleChange(
-    'country',
-    item,
-    firstInitilize,
-    ['state', 'city', 'school'],
-    'states',
-  )
-}
-
-const stateChange = async (item: SelectOption, firstInitilize: boolean) => {
-  await handleChange(
-    'state',
-    item,
-    firstInitilize,
-    ['city', 'school'],
-    'cities',
-  )
-}
-
-const cityChange = async (item: SelectOption, firstInitilize: boolean) => {
-  await handleChange('city', item, firstInitilize, ['school'], 'school')
-}
-
-// School Info
-const boards = ref<SelectOption[]>([])
-const boardLoading = ref(true)
-const grades = ref<SelectOption[]>([])
-const gradeLoading = ref(true)
-const schools = ref<SelectOption[]>([])
-const schoolLoading = ref(true)
-
-const boardChange = async (item: SelectOption, firstInitilize: boolean) => {
-  await handleChange('board', item, firstInitilize, ['grade'], 'grade')
-}
+const firstNameRules = [required, minLength(2), maxLength(50), alphabetic]
 
 const avatarInputRef = ref<HTMLInputElement | null>(null)
 const cropAvatarUrl = ref('')
@@ -519,60 +498,110 @@ const confirmCrop = (dataCroped: Blob) => {
   userInformation.value.avatarFile = file
 }
 
+const toOptionalNumber = (value: SelectValue) => value ? Number(value) : undefined
+
+const setUserInformation = (user: User) => {
+  userInformation.value = {
+    ...userInformation.value,
+    avatarUrl: user.avatarUri || null,
+    handle: user.handle ?? '',
+    firstName: user.firstName ?? '',
+    lastName: user.lastName ?? '',
+    gender: user.gender ?? '',
+    country: user.countryId ?? '',
+    state: user.stateId ?? '',
+    city: user.cityId ?? '',
+    board: user.board ?? '',
+    grade: user.grade ?? '',
+    school: user.schoolId ?? '',
+  }
+}
+
+const fetchSchoolList = async (append = false) => {
+  if (!userInformation.value.city) return
+
+  await getSchools(
+    {
+      page: pageSchool.value,
+      pageSize: pageSizeSchool,
+      countryId: toOptionalNumber(userInformation.value.country),
+      stateId: toOptionalNumber(userInformation.value.state),
+      cityId: toOptionalNumber(userInformation.value.city),
+    },
+    { append },
+  )
+}
+
+const countyChange = async (countryId: SelectValue) => {
+  userInformation.value.state = ''
+  userInformation.value.city = ''
+  userInformation.value.school = ''
+  resetStates()
+  resetCities()
+  resetSchools()
+  pageSchool.value = 1
+
+  if (countryId) {
+    await getStates(countryId)
+  }
+}
+
+const stateChange = async (stateId: SelectValue) => {
+  userInformation.value.city = ''
+  userInformation.value.school = ''
+  resetCities()
+  resetSchools()
+  pageSchool.value = 1
+
+  if (stateId) {
+    await getCities(stateId)
+  }
+}
+
+const cityChange = async (cityId: SelectValue) => {
+  userInformation.value.school = ''
+  resetSchools()
+  pageSchool.value = 1
+
+  if (cityId) {
+    await fetchSchoolList()
+  }
+}
+
+const boardChange = async (boardId: SelectValue) => {
+  userInformation.value.grade = ''
+  resetGrades()
+
+  if (boardId) {
+    await getGrades(boardId)
+  }
+}
+
+const loadMoreSchool = async () => {
+  pageSchool.value += 1
+  await fetchSchoolList(true)
+}
+
 const getUserInfo = async () => {
   try {
     userDataLoading.value = true
-    const { data } = await useApiService.get<ApiResponse<UserProfileDTO>>(
-      '/api/v2/identities/profiles',
-    )
-    userDataLoading.value = false
-    const {
-      gender,
-      handle,
-      firstName,
-      lastName,
-      avatarUri,
-      countryId,
-      stateId,
-      cityId,
-      board,
-      grade,
-      schoolId,
-    } = data
-    userInformation.value = {
-      ...userInformation.value,
-      gender: gender ? { id: gender, title: gender } : null,
-      handle: handle ?? '',
-      firstName,
-      lastName,
-      avatarUrl: avatarUri || null,
-      country: countryId ? { id: countryId } : null,
-      state: stateId ? { id: stateId } : null,
-      city: cityId ? { id: cityId } : null,
-      board: board ? { id: board } : null,
-      grade: grade ? { id: grade } : null,
-      school: schoolId ? { id: schoolId } : null,
+    const profileResponse = await getProfile()
+    const profile = profileResponse.data?.data
+
+    if (!profile) {
+      $toast.error('Failed to load user information')
+      return
     }
 
-    const filterPromises: Promise<void>[] = []
-    if (countryId)
-      filterPromises.push(
-        getFilterList({ 'PagingDto.PageFilter.Size': 10000 }, 'states'),
-      )
-    if (stateId)
-      filterPromises.push(
-        getFilterList({ 'PagingDto.PageFilter.Size': 10000 }, 'cities'),
-      )
-    if (cityId)
-      filterPromises.push(
-        getFilterList({ 'PagingDto.PageFilter.Size': 10000 }, 'school'),
-      )
-    if (board)
-      filterPromises.push(
-        getFilterList({ 'PagingDto.PageFilter.Size': 10000 }, 'grade'),
-      )
-
-    await Promise.allSettled(filterPromises)
+    setUserInformation(profile)
+    setUser(profile)
+
+    await Promise.allSettled([
+      profile.countryId ? getStates(profile.countryId) : Promise.resolve(),
+      profile.stateId ? getCities(profile.stateId) : Promise.resolve(),
+      profile.board ? getGrades(profile.board) : Promise.resolve(),
+      profile.cityId ? fetchSchoolList() : Promise.resolve(),
+    ])
   }
   catch (err: unknown) {
     const error = err as { response?: { data?: { message?: string } } }
@@ -582,159 +611,56 @@ const getUserInfo = async () => {
   }
   finally {
     userDataLoading.value = false
-    countryLoading.value = false
-    stateLoading.value = false
-    cityLoading.value = false
-    boardLoading.value = false
-    gradeLoading.value = false
-    schoolLoading.value = false
-  }
-}
-
-const locationConfig = {
-  countries: {
-    endpoint: () => '/api/v2/locations/countries',
-    loading: countryLoading,
-    valueRef: countries,
-  },
-  states: {
-    endpoint: () =>
-      `/api/v2/locations/states/${userInformation.value.country?.id}`,
-    loading: stateLoading,
-    valueRef: states,
-  },
-  cities: {
-    endpoint: () =>
-      `/api/v2/locations/cities/${userInformation.value.state?.id}`,
-    loading: cityLoading,
-    valueRef: cities,
-  },
-  board: {
-    endpoint: () => '/api/v1/types/list',
-    loading: boardLoading,
-    valueRef: boards,
-  },
-  grade: {
-    endpoint: () =>
-      `/api/v1/types/list/?type=base&section_id=${userInformation.value.board?.id}`,
-    loading: gradeLoading,
-    valueRef: grades,
-  },
-  school: {
-    endpoint: () => '/api/v2/schools',
-    loading: schoolLoading,
-    valueRef: schools,
-  },
-}
-
-const getFilterList = async (
-  params: Record<string, string | number>,
-  type: keyof typeof locationConfig,
-) => {
-  try {
-    const config = locationConfig[type]
-    if (!config) return
-
-    config.loading.value = true
-    if (type === 'school') {
-      params.CityId = userInformation.value.city?.id as string
-    }
-    const response = await useApiService.get<
-      ApiResponse<SelectOption[] | { list: SelectOption[] }>
-    >(config.endpoint(), params, { public: true })
-
-    config.loading.value = false
-    if (type === 'school') {
-      const list = (response.data as { list: SelectOption[] }).list || []
-      config.valueRef.value = list.map((item: SelectOption) => ({
-        id: item.id,
-        title: item.name,
-      }))
-    }
-    else if ((response.data as { list: SelectOption[] }).list) {
-      config.valueRef.value = (response.data as { list: SelectOption[] }).list
-    }
-    else {
-      config.valueRef.value = response.data as SelectOption[]
-    }
-  }
-  catch (err) {
-    console.error('Error fetching location data:', err)
-    locationConfig[type].loading.value = false
   }
 }
 
 onMounted(async () => {
-  await getFilterList({ 'PagingDto.PageFilter.Size': 250 }, 'countries')
-  await getFilterList({ type: 'section' }, 'board')
+  await getCountries()
+  await getBoards()
   await getUserInfo()
 })
 
-const submitLoading = ref(false)
-
-const isFormValid = computed(() => {
-  const info = userInformation.value
-
-  const firstName = info.firstName?.trim() || ''
-  const isFirstNameValid = firstNameRules.every(
-    rule => rule(firstName) === true,
-  )
-  return isFirstNameValid
+onUnmounted(() => {
+  resetCountries()
+  resetStates()
+  resetCities()
+  resetBoards()
+  resetGrades()
+  resetSchools()
 })
 
 const submitData = async () => {
   if (isFormValid.value) {
-    submitLoading.value = true
-    try {
-      const profilePayload = new FormData()
-
-      if (userInformation.value.city?.id)
-        profilePayload.append('CityId', String(userInformation.value.city.id))
-
-      if (userInformation.value.school?.id)
-        profilePayload.append(
-          'SchoolId',
-          String(userInformation.value.school.id),
-        )
-
-      if (userInformation.value.firstName)
-        profilePayload.append('FirstName', userInformation.value.firstName)
-
-      if (userInformation.value.lastName)
-        profilePayload.append('LastName', userInformation.value.lastName)
-
-      if (userInformation.value.gender?.id)
-        profilePayload.append(
-          'Gender',
-          String(userInformation.value.gender.id),
-        )
-
-      if (userInformation.value.board?.id)
-        profilePayload.append('Board', String(userInformation.value.board.id))
-
-      if (userInformation.value.grade?.id)
-        profilePayload.append('Grade', String(userInformation.value.grade.id))
-
-      if (userInformation.value.avatarFile)
-        profilePayload.append('Avatar', userInformation.value.avatarFile)
-
-      const profileResponse = await useApiService.put<ApiResponse<unknown>>(
-        '/api/v2/identities/profiles',
-        profilePayload,
-      )
-      if (profileResponse?.succeeded) {
-        $toast.success('Profile updated successfully')
-      }
-      else {
-        $toast.error('Failed to update profile')
-      }
+    const data: EditProfileDTO = {
+      cityId: toOptionalNumber(userInformation.value.city),
+      schoolId: toOptionalNumber(userInformation.value.school),
+      firstName: userInformation.value.firstName,
+      lastName: userInformation.value.lastName,
+      board: toOptionalNumber(userInformation.value.board),
+      grade: toOptionalNumber(userInformation.value.grade),
+      gender: userInformation.value.gender as Gender,
     }
-    catch (err: unknown) {
-      const error = err as { response?: { data?: { message?: string } } }
-      $toast.error(error.response?.data?.message || 'Failed to update profile')
+
+    if (userInformation.value.avatarFile) {
+      data.avatar = userInformation.value.avatarFile
     }
-    finally {
-      submitLoading.value = false
+
+    const response = await editItem(data)
+
+    if (response?.succeeded && currentUser.value) {
+      setUser({
+        ...currentUser.value,
+        firstName: userInformation.value.firstName,
+        lastName: userInformation.value.lastName,
+        countryId: toOptionalNumber(userInformation.value.country) ?? 0,
+        stateId: toOptionalNumber(userInformation.value.state) ?? 0,
+        cityId: toOptionalNumber(userInformation.value.city) ?? 0,
+        schoolId: toOptionalNumber(userInformation.value.school) ?? 0,
+        board: toOptionalNumber(userInformation.value.board) ?? 0,
+        grade: toOptionalNumber(userInformation.value.grade) ?? 0,
+        gender: userInformation.value.gender as Gender,
+        avatarUri: userInformation.value.avatarUrl ?? '',
+      })
     }
   }
 }
diff --git a/app/types/profile/index.ts b/app/types/profile/index.ts
index a5cdd8657..96822e470 100644
--- a/app/types/profile/index.ts
+++ b/app/types/profile/index.ts
@@ -43,3 +43,9 @@ export interface DeleteProfileDTO {
   username: string
   password: string
 }
+
+export interface ChangePasswordDTO {
+  oldpass: string
+  newpass: string
+  repeat_newpass: string
+}