diff --git a/btr-web/btr-common-components/components/bcros/section/index.vue b/btr-web/btr-common-components/components/bcros/section/index.vue
index 5d575de9..74a79e07 100644
--- a/btr-web/btr-common-components/components/bcros/section/index.vue
+++ b/btr-web/btr-common-components/components/bcros/section/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    :id="id"
     class="w-full"
     :class="[
       showSectionHasErrors ? 'border-l-[3px] border-red-500' : '',
@@ -73,6 +74,7 @@
 <script setup lang="ts">
 const slots = useSlots()
 const props = defineProps({
+  id: { type: String, required: false, default: undefined },
   showSectionHasErrors: { type: Boolean, required: false, default: false },
   sectionTitle: { type: String, required: false, default: undefined },
   sectionTitleIcon: { type: String, required: false, default: undefined },
diff --git a/btr-web/btr-main-app/components/individual-person/add-new/index.vue b/btr-web/btr-main-app/components/individual-person/add-new/index.vue
index 30b6dc62..32e6bb2c 100644
--- a/btr-web/btr-main-app/components/individual-person/add-new/index.vue
+++ b/btr-web/btr-main-app/components/individual-person/add-new/index.vue
@@ -93,6 +93,7 @@
 
       <!--  section: type of interest or control of shares -->
       <BcrosSection
+        id="control-of-shares"
         :show-section-has-errors="false"
         :section-title="$t('sectionTitles.controlOfShares')"
         :border="editMode"
@@ -107,6 +108,7 @@
 
       <!--  section: type of interest or control of votes -->
       <BcrosSection
+        id="control-of-votes"
         :show-section-has-errors="false"
         :section-title="$t('sectionTitles.controlOfVotes')"
         :border="editMode"
@@ -121,6 +123,7 @@
 
       <!--  section: control of majority of directors  -->
       <BcrosSection
+        id="control-of-directors"
         :show-section-has-errors="false"
         :section-title="$t('sectionTitles.controlOfMajorityOfDirectors')"
         :border="editMode"
@@ -135,6 +138,7 @@
 
       <!--  section: other reasons  -->
       <BcrosSection
+        id="control-other"
         :show-section-has-errors="hasErrors(['otherReasons'])"
         :section-title="$t('sectionTitles.otherReasons')"
         rounded-bot
@@ -166,6 +170,7 @@
 
       <!--  section: effective dates -->
       <BcrosSection
+        id="effective-dates"
         :show-section-has-errors="hasErrors(['effectiveDates'])"
         :section-title="$t('sectionTitles.effectiveDates')"
         rounded-bot
@@ -217,6 +222,7 @@
 
       <!--  section: individual details address, mailing address  -->
       <BcrosSection
+        id="address"
         :show-section-has-errors="hasErrors(['address.'])"
         :section-title="$t('labels.lastKnownAddress')"
         :border="editMode"
@@ -224,7 +230,6 @@
       >
         <div class="flex-col w-full">
           <BcrosInputsAddress
-            id="addNewPersonLastKnownAddress"
             v-model="inputFormSi.address"
             name="address"
             :is-editing="isEditing"
@@ -248,6 +253,7 @@
       </BcrosSection>
       <BcrosSection
         v-if="showMailingAddress"
+        id="mailing-address"
         class="-mt-1 pt-0"
         :show-section-has-errors="hasErrors(['address.'])"
         :section-title="$t('labels.mailingAddress')"
@@ -256,7 +262,6 @@
       >
         <div class="flex-col w-full">
           <BcrosInputsAddress
-            id="addNewPersonLastKnownAddress"
             v-model="inputFormSi.mailingAddress.address"
             name="mailingAddress.address"
             :is-editing="isEditing"
@@ -274,6 +279,7 @@
 
       <!--  section: individual details phoneNumber; phone number  -->
       <BcrosSection
+        id="phone-number"
         :show-section-has-errors="hasErrors(['phoneNumber'])"
         :section-title="$t('sectionTitles.phoneNumber')"
         :border="editMode"
@@ -288,6 +294,7 @@
         />
       </BcrosSection>
       <BcrosSection
+        id="birth-date"
         :show-section-has-errors="hasErrors([InputFieldsE.BIRTH_DATE])"
         :section-title="$t('labels.birthdate')"
         :border="editMode"
@@ -311,6 +318,7 @@
 
       <!--  section: citizenship or PR  -->
       <BcrosSection
+        id="citizenships"
         :show-section-has-errors="hasErrors(['citizenships'])"
         :section-title="$t('sectionTitles.citizenshipOrPR')"
         :border="editMode"
@@ -327,6 +335,7 @@
 
       <!--  section: tax details  -->
       <BcrosSection
+        id="tax-details"
         :show-section-has-errors="hasErrors(['tax.'])"
         :section-title="$t('sectionTitles.taxDetails')"
         :border="editMode"
@@ -351,6 +360,7 @@
         </div>
       </BcrosSection>
       <bcrosSection
+        id="tax-residency"
         :show-section-has-errors="hasErrors(['isTaxResident'])"
         :section-title="$t('labels.taxResidency')"
         :border="editMode"
@@ -388,6 +398,7 @@
 
       <!--  section: unable to obtain or confirm  -->
       <BcrosSection
+        id="missing-info"
         :show-section-has-errors="hasErrors(['missingInfo'])"
         :section-title="$t('sectionTitles.unableToObtainOrConfirmInformation')"
         rounded-top
@@ -479,6 +490,16 @@ const props = defineProps<{
 const t = useNuxtApp().$i18n.t
 const bcrosAccount = useBcrosAccount()
 
+const { scrollToAnchor } = useAnchorScroll({
+  toAnchor: {
+    target: document.documentElement,
+    scrollOptions: {
+      behavior: 'smooth',
+      offsetTop: -20 // Add extra space above the anchor
+    }
+  }
+})
+
 const isEditing = ref(false)
 
 const emailFieldUuid = getRandomUuid()
@@ -748,6 +769,27 @@ function handleDoneButtonClick () {
     errors = res.error.issues.map(issue => ({ message: issue.message, path: issue.path.join('.') }))
     console.error(errors)
     addIndividualForm.value.setErrors(errors)
+
+    // find the top section with error
+    const topErrorSection = errors.reduce((topSection, error) => {
+      const path = error.path.split('.')
+      let section: string = path[0]
+      if (section === 'name') {
+        section += '.' + path[1]
+      }
+      if (!topSection) {
+        return section
+      }
+
+      return errorSectionMap[topSection]?.position < errorSectionMap[section]?.position ? topSection : section
+    }, null as string | null)
+
+    // autoscroll to the top error
+    const topId = errorSectionMap[topErrorSection as string]?.sectionId
+
+    if (topId) {
+      scrollToAnchor(topId)
+    }
   } else if (isEditing.value) {
     emits('update', { index: props.index, updatedSI: inputFormSi })
   } else {
diff --git a/btr-web/btr-main-app/nuxt.config.ts b/btr-web/btr-main-app/nuxt.config.ts
index 5df267e0..d4125d78 100644
--- a/btr-web/btr-main-app/nuxt.config.ts
+++ b/btr-web/btr-main-app/nuxt.config.ts
@@ -1,5 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  modules: [
+    'nuxt-anchorscroll'
+  ],
   extends: [
     '../btr-layouts',
     '../btr-common-components'
diff --git a/btr-web/btr-main-app/package.json b/btr-web/btr-main-app/package.json
index 095d9789..105d1f8a 100644
--- a/btr-web/btr-main-app/package.json
+++ b/btr-web/btr-main-app/package.json
@@ -34,6 +34,7 @@
     "@nuxtjs/i18n": "^8.2.0",
     "@testing-library/vue": "^8.0.2",
     "@vitest/coverage-v8": "^1.3.1",
+    "nuxt-anchorscroll": "^1.0.5",
     "vite": "5.2.0-beta.1",
     "vitest": "1.3.1",
     "vitest-environment-nuxt": "^1.0.0"
diff --git a/btr-web/btr-main-app/pnpm-lock.yaml b/btr-web/btr-main-app/pnpm-lock.yaml
index c2726416..465c3790 100644
--- a/btr-web/btr-main-app/pnpm-lock.yaml
+++ b/btr-web/btr-main-app/pnpm-lock.yaml
@@ -25,6 +25,9 @@ devDependencies:
   '@vitest/coverage-v8':
     specifier: ^1.3.1
     version: 1.6.0(vitest@1.3.1)
+  nuxt-anchorscroll:
+    specifier: ^1.0.5
+    version: 1.0.5(rollup@4.17.2)
   vite:
     specifier: 5.2.0-beta.1
     version: 5.2.0-beta.1
@@ -2457,6 +2460,15 @@ packages:
       path-key: 4.0.0
     dev: true
 
+  /nuxt-anchorscroll@1.0.5(rollup@4.17.2):
+    resolution: {integrity: sha512-/bWnhceVr+Pvf64RY/Qwz0QPhDf4RD7cXY6L28DA0oauXiVzQ1VQuujte5dUAZydbdM9XvpXk/YVJNu1+7+1jw==}
+    dependencies:
+      '@nuxt/kit': 3.11.2(rollup@4.17.2)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
   /nypm@0.3.8:
     resolution: {integrity: sha512-IGWlC6So2xv6V4cIDmoV0SwwWx7zLG086gyqkyumteH2fIgCAM4nDVFB2iDRszDvmdSVW9xb1N+2KjQ6C7d4og==}
     engines: {node: ^14.16.0 || >=16.10.0}
diff --git a/btr-web/btr-main-app/utils/error-section-map.ts b/btr-web/btr-main-app/utils/error-section-map.ts
new file mode 100644
index 00000000..79e35a8a
--- /dev/null
+++ b/btr-web/btr-main-app/utils/error-section-map.ts
@@ -0,0 +1,18 @@
+export const errorSectionMap = {
+  'name.fullName': { sectionId: 'individual-person-full-name', position: 1 },
+  'name.preferredName': { sectionId: 'individual-person-preferred-name', position: 2 },
+  controlOfShares: { sectionId: 'control-of-shares', position: 3 },
+  controlOfVotes: { sectionId: 'control-of-votes', position: 4 },
+  controlOfDirectors: { sectionId: 'control-of-directors', position: 5 },
+  controlOther: { sectionId: 'control-other', position: 6 },
+  effectiveDates: { sectionId: 'effective-dates', position: 7 },
+  email: { sectionId: 'individual-person-email', position: 8 },
+  address: { sectionId: 'address', position: 9 },
+  mailingAddress: { sectionId: 'mailing-address', position: 10 },
+  // reserve position 11 for the phone number section
+  birthDate: { sectionId: 'birth-date', position: 12 },
+  citizenships: { sectionId: 'citizenships', position: 13 },
+  tax: { sectionId: 'tax-details', position: 14 },
+  isTaxResident: { sectionId: 'tax-residency', position: 15 },
+  missingInfoReason: { sectionId: 'missing-info', position: 16 }
+} as Record<string, { sectionId: string, position: number }>