diff --git a/packages/account/src/Components/forms/idv-form.tsx b/packages/account/src/Components/forms/idv-form.tsx
index bff0be253e6b..25a2d3e2fae0 100644
--- a/packages/account/src/Components/forms/idv-form.tsx
+++ b/packages/account/src/Components/forms/idv-form.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Form, Field, FormikValues, FormikProps, FormikHandlers } from 'formik';
+import classNames from 'classnames';
+import { Field, FormikValues, FormikProps, FormikHandlers } from 'formik';
+import { ResidenceList } from '@deriv/api-types';
 import { localize, Localize } from '@deriv/translations';
 import { formatInput, IDV_NOT_APPLICABLE_OPTION } from '@deriv/shared';
 import { Autocomplete, DesktopWrapper, Input, MobileWrapper, SelectNative, Text } from '@deriv/components';
-import { getDocumentData, preventEmptyClipboardPaste } from 'Helpers/utils';
-import classNames from 'classnames';
-import { GetSettings, ResidenceList } from '@deriv/api-types';
+import { getDocumentData, preventEmptyClipboardPaste, generatePlaceholderText } from 'Helpers/utils';
 
 type TDocumentList = Array<{
     id: string;
@@ -17,41 +17,50 @@ type TDocumentList = Array<{
 }>;
 
 type TFormProps = {
-    document_list: TDocumentList;
+    document_type: TDocumentList[0];
     document_number: string;
     document_additional: string;
 };
 
 type TIDVForm = {
-    account_settings: GetSettings;
-    residence: string;
-    residence_list: ResidenceList;
+    selected_country: ResidenceList[0];
+    is_from_external: boolean;
     hide_hint?: boolean;
+    class_name?: string;
 } & FormikHandlers &
     FormikProps<TFormProps>;
 
-const IDVForm = ({ errors, touched, values, handleBlur, handleChange, setFieldValue, ...props }: TIDVForm) => {
+const IDVForm = ({
+    errors,
+    touched,
+    values,
+    handleBlur,
+    handleChange,
+    setFieldValue,
+    class_name,
+    ...props
+}: TIDVForm) => {
     const [document_list, setDocumentList] = React.useState<TDocumentList>([]);
     const [document_image, setDocumentImage] = React.useState(null);
-    const [is_doc_selected, setDocSelected] = React.useState(false);
+    const [selected_doc, setSelectedDoc] = React.useState('');
 
-    const { account_settings, residence, residence_list } = props;
-    const citizen = account_settings?.citizen || residence;
+    const { selected_country, is_from_external } = props;
+    // const citizen = account_settings?.citizen || residence;
 
-    const { documents_supported: document_data, has_visual_sample }: any =
-        residence_list.find(residence_data => residence_data.value === citizen)?.identity.services?.idv || {};
+    const { documents_supported: document_data, has_visual_sample } = selected_country?.identity?.services?.idv || {};
+    // residence_list.find(residence_data => residence_data.value === citizen)?.identity.services?.idv || {};
 
     React.useEffect(() => {
         const document_types = Object.keys(document_data);
         if (document_types.length === 0) return;
-        const filtered_documents = ['gh', 'ng'].includes(citizen)
+        const filtered_documents = ['gh', 'ng'].includes(selected_country.value)
             ? document_types.filter(d => d !== 'voter_id')
             : document_types;
 
         setDocumentList([
             ...filtered_documents.map(key => {
                 const { display_name, format } = document_data[key];
-                const { new_display_name, example_format, sample_image } = getDocumentData(citizen, key);
+                const { new_display_name, example_format, sample_image } = getDocumentData(selected_country.value, key);
                 const needs_additional_document = !!document_data[key].additional;
 
                 if (needs_additional_document) {
@@ -111,181 +120,200 @@ const IDVForm = ({ errors, touched, values, handleBlur, handleChange, setFieldVa
     };
 
     return (
-        <Form className='idv-form'>
-            <div className='details-form'>
-                <div className='poi-form-on-signup__fields'>
-                    <div
-                        className={classNames('proof-of-identity__container', {
-                            'proof-of-identity__container--idv': props.hide_hint,
-                        })}
-                    >
+        <React.Fragment>
+            <section className={classNames('idv-form', class_name)}>
+                <div className='details-form'>
+                    <div className='poi-form-on-signup__fields'>
                         <div
-                            className={classNames('proof-of-identity__inner-container', {
-                                'btm-spacer': !props.hide_hint,
+                            className={classNames('proof-of-identity__container', {
+                                'proof-of-identity__container--idv': props.hide_hint,
                             })}
                         >
-                            <div className='proof-of-identity__fieldset-container'>
-                                <fieldset className={classNames({ 'proof-of-identity__fieldset': !props.hide_hint })}>
-                                    <Field name='document'>
-                                        {({ field }: FormikValues) => (
-                                            <React.Fragment>
-                                                <DesktopWrapper>
-                                                    <div className='document-dropdown'>
-                                                        <Autocomplete
+                            <div
+                                className={classNames('proof-of-identity__inner-container', {
+                                    'btm-spacer': !props.hide_hint,
+                                })}
+                            >
+                                <div className='proof-of-identity__fieldset-container'>
+                                    <fieldset
+                                        className={classNames({ 'proof-of-identity__fieldset': !props.hide_hint })}
+                                    >
+                                        <Field name='document'>
+                                            {({ field }: FormikValues) => (
+                                                <React.Fragment>
+                                                    <DesktopWrapper>
+                                                        <div className='document-dropdown'>
+                                                            <Autocomplete
+                                                                {...field}
+                                                                name='document_type'
+                                                                data-lpignore='true'
+                                                                error={touched.document_type && errors.document_type}
+                                                                autoComplete='off'
+                                                                type='text'
+                                                                label={localize('Choose the document type')}
+                                                                list_items={document_list}
+                                                                value={values.document_type.text}
+                                                                onBlur={(e: { target: HTMLInputElement }) => {
+                                                                    handleBlur(e);
+                                                                    if (!getDocument(e.target.value)) {
+                                                                        resetDocumentItemSelected();
+                                                                    }
+                                                                }}
+                                                                onChange={handleChange}
+                                                                onItemSelection={item => {
+                                                                    if (
+                                                                        item.text === 'No results found' ||
+                                                                        !item.text
+                                                                    ) {
+                                                                        setSelectedDoc('');
+                                                                        resetDocumentItemSelected();
+                                                                    } else {
+                                                                        setFieldValue('document_type', item, true);
+                                                                        setSelectedDoc(item.id);
+                                                                        if (has_visual_sample) {
+                                                                            setDocumentImage(item.sample_image || '');
+                                                                        }
+                                                                    }
+                                                                }}
+                                                                required
+                                                            />
+                                                        </div>
+                                                    </DesktopWrapper>
+                                                    <MobileWrapper>
+                                                        <SelectNative
                                                             {...field}
                                                             name='document_type'
-                                                            data-lpignore='true'
                                                             error={touched.document_type && errors.document_type}
-                                                            autoComplete='off'
-                                                            type='text'
                                                             label={localize('Choose the document type')}
+                                                            placeholder={localize('Please select')}
                                                             list_items={document_list}
-                                                            value={values.document_type.text ?? ''}
-                                                            onBlur={(e: { target: HTMLInputElement }) => {
-                                                                handleBlur(e);
-                                                                if (!getDocument(e.target.value)) {
-                                                                    resetDocumentItemSelected();
-                                                                }
-                                                            }}
-                                                            onChange={handleChange}
-                                                            onItemSelection={item => {
-                                                                if (item.text === 'No results found' || !item.text) {
-                                                                    setDocSelected(false);
-                                                                    resetDocumentItemSelected();
-                                                                } else {
-                                                                    setFieldValue('document_type', item, true);
-                                                                    setDocSelected(true);
+                                                            value={values.document_type.text}
+                                                            onChange={e => {
+                                                                handleChange(e);
+                                                                const selected_document = getDocument(e.target.value);
+                                                                if (selected_document) {
+                                                                    setSelectedDoc(selected_document.id);
+                                                                    setFieldValue(
+                                                                        'document_type',
+                                                                        selected_document,
+                                                                        true
+                                                                    );
                                                                     if (has_visual_sample) {
-                                                                        setDocumentImage(item.sample_image || '');
+                                                                        setDocumentImage(
+                                                                            selected_document.sample_image
+                                                                        );
                                                                     }
                                                                 }
                                                             }}
+                                                            use_text={true}
                                                             required
                                                         />
-                                                    </div>
-                                                </DesktopWrapper>
-                                                <MobileWrapper>
-                                                    <SelectNative
-                                                        {...field}
-                                                        name='document_type'
-                                                        error={touched.document_type && errors.document_type}
-                                                        label={localize('Choose the document type')}
-                                                        list_items={document_list}
-                                                        value={values.document_type.text}
-                                                        onChange={e => {
-                                                            handleChange(e);
-                                                            const selected_document = getDocument(e.target.value);
-                                                            if (selected_document) {
-                                                                setDocSelected(true);
-                                                                setFieldValue('document_type', selected_document, true);
-                                                                if (has_visual_sample) {
-                                                                    setDocumentImage(
-                                                                        // eslint-disable-next-line max-len
-                                                                        selected_document.sample_image
-                                                                    );
-                                                                }
-                                                            }
-                                                        }}
-                                                        use_text={true}
-                                                        required
-                                                    />
-                                                </MobileWrapper>
-                                            </React.Fragment>
-                                        )}
-                                    </Field>
-                                </fieldset>
-                                <fieldset
-                                    className={classNames({ 'proof-of-identity__fieldset-input': !props.hide_hint })}
-                                >
-                                    <Field name='document_number'>
-                                        {({ field }: FormikValues) => (
-                                            <React.Fragment>
-                                                <Input
-                                                    {...field}
-                                                    name='document_number'
-                                                    bottom_label={
-                                                        values.document_type &&
-                                                        getExampleFormat(values.document_type.example_format)
-                                                    }
-                                                    disabled={
-                                                        !values.document_type.id ||
-                                                        values.document_type.id === IDV_NOT_APPLICABLE_OPTION.id
-                                                    }
-                                                    error={
-                                                        (touched.document_number && errors.document_number) ||
-                                                        errors.error_message
-                                                    }
-                                                    autoComplete='off'
-                                                    placeholder='Enter your document number'
-                                                    value={values.document_number}
-                                                    onPaste={preventEmptyClipboardPaste}
-                                                    onBlur={handleBlur}
-                                                    onChange={handleChange}
-                                                    onKeyUp={(e: { target: HTMLInputElement }) =>
-                                                        onKeyUp(e, 'document_number')
-                                                    }
-                                                    required
-                                                />
-                                                {values.document_type.additional?.display_name && (
+                                                    </MobileWrapper>
+                                                </React.Fragment>
+                                            )}
+                                        </Field>
+                                    </fieldset>
+                                    <fieldset
+                                        className={classNames({
+                                            'proof-of-identity__fieldset-input': !props.hide_hint,
+                                        })}
+                                    >
+                                        <Field name='document_number'>
+                                            {({ field }: FormikValues) => (
+                                                <React.Fragment>
                                                     <Input
                                                         {...field}
-                                                        name='document_additional'
+                                                        name='document_number'
                                                         bottom_label={
-                                                            values.document_type.additional &&
-                                                            getExampleFormat(
-                                                                values.document_type.additional?.example_format
-                                                            )
+                                                            values.document_type &&
+                                                            getExampleFormat(values.document_type.example_format)
                                                         }
                                                         disabled={
                                                             !values.document_type.id ||
                                                             values.document_type.id === IDV_NOT_APPLICABLE_OPTION.id
                                                         }
                                                         error={
-                                                            (touched.document_additional &&
-                                                                errors.document_additional) ||
+                                                            (touched.document_number && errors.document_number) ||
                                                             errors.error_message
                                                         }
                                                         autoComplete='off'
-                                                        placeholder={`Enter your ${values.document_type.additional?.display_name.toLowerCase()}`}
-                                                        value={values.document_additional}
+                                                        placeholder={generatePlaceholderText(selected_doc)}
+                                                        value={values.document_number}
                                                         onPaste={preventEmptyClipboardPaste}
                                                         onBlur={handleBlur}
                                                         onChange={handleChange}
                                                         onKeyUp={(e: { target: HTMLInputElement }) =>
-                                                            onKeyUp(e, 'document_additional')
+                                                            onKeyUp(e, 'document_number')
                                                         }
                                                         required
                                                     />
-                                                )}
-                                            </React.Fragment>
-                                        )}
-                                    </Field>
-                                </fieldset>
-                            </div>
-                            {document_image && (
-                                <div className='proof-of-identity__sample-container'>
-                                    <Text size='xxs' weight='bold'>
-                                        {localize('Sample:')}
-                                    </Text>
-                                    <div className='proof-of-identity__image-container'>
-                                        <img
-                                            className='proof-of-identity__image'
-                                            src={document_image}
-                                            alt='document sample image'
-                                        />
-                                    </div>
+                                                    {values.document_type.additional?.display_name && (
+                                                        <Input
+                                                            {...field}
+                                                            name='document_additional'
+                                                            bottom_label={
+                                                                values.document_type.additional &&
+                                                                getExampleFormat(
+                                                                    values.document_type.additional?.example_format
+                                                                )
+                                                            }
+                                                            disabled={
+                                                                !values.document_type.id ||
+                                                                values.document_type.id === IDV_NOT_APPLICABLE_OPTION.id
+                                                            }
+                                                            error={
+                                                                (touched.document_additional &&
+                                                                    errors.document_additional) ||
+                                                                errors.error_message
+                                                            }
+                                                            autoComplete='off'
+                                                            placeholder={`Enter your ${values.document_type.additional?.display_name.toLowerCase()}`}
+                                                            value={values.document_additional}
+                                                            onPaste={preventEmptyClipboardPaste}
+                                                            onBlur={handleBlur}
+                                                            onChange={handleChange}
+                                                            onKeyUp={(e: { target: HTMLInputElement }) =>
+                                                                onKeyUp(e, 'document_additional')
+                                                            }
+                                                            required
+                                                        />
+                                                    )}
+                                                </React.Fragment>
+                                            )}
+                                        </Field>
+                                    </fieldset>
                                 </div>
-                            )}
-                            {is_doc_selected && !props.hide_hint && (
-                                <Text className='proof-of-identity__text-spacer' align='center' size='xs'>
-                                    <Localize i18n_default_text='Please ensure all your personal details are the same as in your chosen document. If you wish to update your personal details, go to account settings.' />
-                                </Text>
-                            )}
+                                {document_image && (
+                                    <div className='proof-of-identity__sample-container'>
+                                        <Text size='xxs' weight='bold'>
+                                            {localize('Sample:')}
+                                        </Text>
+                                        <div className='proof-of-identity__image-container'>
+                                            <img
+                                                className='proof-of-identity__image'
+                                                src={document_image}
+                                                alt='document sample image'
+                                            />
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-        </Form>
+            </section>
+            {selected_doc && !props.hide_hint && (
+                <Text
+                    className={classNames('proof-of-identity__text btm-spacer', {
+                        'top-spacer': is_from_external,
+                    })}
+                    align='center'
+                    size='xs'
+                >
+                    <Localize i18n_default_text='Please ensure all your personal details are the same as in your chosen document. If you wish to update your personal details, go to account settings.' />
+                </Text>
+            )}
+        </React.Fragment>
     );
 };
 
diff --git a/packages/account/src/Components/forms/personal-details-form.jsx b/packages/account/src/Components/forms/personal-details-form.jsx
index 201b4b6afd73..050b580d56b6 100644
--- a/packages/account/src/Components/forms/personal-details-form.jsx
+++ b/packages/account/src/Components/forms/personal-details-form.jsx
@@ -92,6 +92,8 @@ const PersonalDetailsForm = ({
         closeRealAccountSignup,
         salutation_list,
         is_rendered_for_onfido,
+        should_close_tooltip,
+        setShouldCloseTooltip,
     } = props;
     const autocomplete_value = 'none';
     const PoiNameDobExampleIcon = PoiNameDobExample;
@@ -99,6 +101,13 @@ const PersonalDetailsForm = ({
     const [is_tax_residence_popover_open, setIsTaxResidencePopoverOpen] = React.useState(false);
     const [is_tin_popover_open, setIsTinPopoverOpen] = React.useState(false);
 
+    React.useEffect(() => {
+        if (should_close_tooltip) {
+            handleToolTipStatus();
+            setShouldCloseTooltip(false);
+        }
+    }, [should_close_tooltip]);
+
     const getLastNameLabel = () => {
         if (is_appstore) return localize('Family name*');
         return is_svg || is_mf ? localize('Last name*') : localize('Last name');
@@ -117,6 +126,15 @@ const PersonalDetailsForm = ({
         );
     };
 
+    const handleToolTipStatus = () => {
+        if (is_tax_residence_popover_open) {
+            setIsTaxResidencePopoverOpen(false);
+        }
+        if (is_tin_popover_open) {
+            setIsTinPopoverOpen(false);
+        }
+    };
+
     const name_dob_clarification_message = (
         <Localize
             i18n_default_text='To avoid delays, enter your <0>name</0> and <0>date of birth</0> exactly as they appear on your identity document.'
@@ -126,7 +144,13 @@ const PersonalDetailsForm = ({
 
     return (
         <div className={classNames({ 'account-form__poi-confirm-example': is_qualified_for_idv })}>
-            <InlineNoteWithIcon message={name_dob_clarification_message} font_size={isMobile() ? 'xxxs' : 'xs'} />
+            {!is_qualified_for_idv ||
+                (is_rendered_for_onfido && (
+                    <InlineNoteWithIcon
+                        message={name_dob_clarification_message}
+                        font_size={isMobile() ? 'xxxs' : 'xs'}
+                    />
+                ))}
             <FormBodySection
                 has_side_note={is_qualified_for_idv || is_rendered_for_onfido}
                 side_note={<PoiNameDobExampleIcon />}
diff --git a/packages/account/src/Components/personal-details/personal-details.jsx b/packages/account/src/Components/personal-details/personal-details.jsx
index dce7eb1824fc..7462876e51bc 100644
--- a/packages/account/src/Components/personal-details/personal-details.jsx
+++ b/packages/account/src/Components/personal-details/personal-details.jsx
@@ -41,8 +41,7 @@ const PersonalDetails = ({
 }) => {
     const { account_status, account_settings, residence, real_account_signup_target } = props;
     const { is_appstore } = React.useContext(PlatformContext);
-    const [is_tax_residence_popover_open, setIsTaxResidencePopoverOpen] = React.useState(false);
-    const [is_tin_popover_open, setIsTinPopoverOpen] = React.useState(false);
+    const [should_close_tooltip, setShouldCloseTooltip] = React.useState(false);
     const [warning_items, setWarningItems] = React.useState({});
     const is_submit_disabled_ref = React.useRef(true);
 
@@ -116,22 +115,7 @@ const PersonalDetails = ({
         return error_data;
     };
 
-    const closeTooltipOnScroll = () => {
-        // Close any open tooltip
-        if (!is_tax_residence_popover_open || !is_tin_popover_open) {
-            setIsTaxResidencePopoverOpen(false);
-            setIsTinPopoverOpen(false);
-        }
-    };
-
-    const handleClickOutside = () => {
-        if (is_tax_residence_popover_open) {
-            setIsTaxResidencePopoverOpen(false);
-        }
-        if (is_tin_popover_open) {
-            setIsTinPopoverOpen(false);
-        }
-    };
+    const closeToolTip = () => setShouldCloseTooltip(true);
 
     /*
     In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form.
@@ -143,6 +127,9 @@ const PersonalDetails = ({
         return example_format ? localize('Example: ') + example_format : '';
     };
 
+    const citizen = account_settings?.citizen || residence;
+    const selected_country = residence_list.find(residence_data => residence_data.value === citizen) || {};
+
     return (
         <Formik
             innerRef={selected_step_ref}
@@ -160,8 +147,9 @@ const PersonalDetails = ({
                             ref={setRef}
                             onSubmit={handleSubmit}
                             autoComplete='off'
-                            onClick={handleClickOutside}
+                            onClick={closeToolTip}
                             data-testid='personal_details_form'
+                            style={{ border: '1px solid red' }}
                         >
                             <Div100vhContainer className='details-form' height_offset='100px' is_disabled={isDesktop()}>
                                 {!is_qualified_for_idv && (
@@ -175,7 +163,7 @@ const PersonalDetails = ({
                                 )}
                                 <ThemedScrollbars
                                     height={height}
-                                    onScroll={closeTooltipOnScroll}
+                                    onScroll={closeToolTip}
                                     testId='dt_personal_details_container'
                                 >
                                     {!is_qualified_for_idv && is_appstore && (
@@ -198,9 +186,7 @@ const PersonalDetails = ({
                                                 <Field name='document'>
                                                     {({ field }) => (
                                                         <IDVForm
-                                                            account_settings={account_settings}
-                                                            residence={residence}
-                                                            residence_list={residence_list}
+                                                            selected_country={selected_country}
                                                             errors={errors}
                                                             touched={touched}
                                                             values={values}
@@ -245,6 +231,8 @@ const PersonalDetails = ({
                                                             salutation_list={salutation_list}
                                                             warning_items={warning_items}
                                                             account_opening_reason_list={account_opening_reason_list}
+                                                            should_close_tooltip={should_close_tooltip}
+                                                            setShouldCloseTooltip={setShouldCloseTooltip}
                                                             {...field}
                                                         />
                                                     </div>
diff --git a/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.jsx b/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.jsx
index d27f75a928ad..56d67e2741da 100644
--- a/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.jsx
+++ b/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.jsx
@@ -1,104 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { Autocomplete, Button, DesktopWrapper, Input, MobileWrapper, Text, SelectNative } from '@deriv/components';
+import { Button, Text } from '@deriv/components';
 import { Formik, Field } from 'formik';
-import { localize, Localize } from '@deriv/translations';
-import { formatInput, WS } from '@deriv/shared';
-import { documentAdditionalError, getRegex, preventEmptyClipboardPaste } from './utils';
+import { localize } from '@deriv/translations';
+import { WS } from '@deriv/shared';
+import { documentAdditionalError, getRegex } from './utils';
 import FormFooter from 'Components/form-footer';
 import BackButtonIcon from 'Assets/ic-poi-back-btn.svg';
 import DocumentSubmitLogo from 'Assets/ic-document-submit-icon.svg';
-import { getDocumentData, generatePlaceholderText } from 'Helpers/utils';
+import IDVForm from 'Components/forms/idv-form';
 
 const IdvDocumentSubmit = ({ handleBack, handleViewComplete, selected_country, is_from_external }) => {
-    const [document_list, setDocumentList] = React.useState([]);
-    const [document_image, setDocumentImage] = React.useState(null);
-    const [is_input_disable, setInputDisable] = React.useState(true);
-    const [selected_doc, setSelectedDoc] = React.useState(null);
-
-    const document_data = selected_country.identity.services.idv.documents_supported;
-
-    const {
-        value: country_code,
-        identity: {
-            services: {
-                idv: { has_visual_sample },
-            },
-        },
-    } = selected_country;
-
-    React.useEffect(() => {
-        // NOTE: This is a temporary filter. Remove after backend handles this from their side
-        const document_types = Object.keys(document_data);
-        const filtered_documents = ['gh', 'ng'].includes(country_code)
-            ? document_types.filter(d => d !== 'voter_id')
-            : document_types;
-
-        setDocumentList(
-            filtered_documents.map(key => {
-                const { display_name, format } = document_data[key];
-                const { new_display_name, example_format, sample_image } = getDocumentData(country_code, key);
-                const needs_additional_document = !!document_data[key].additional;
-
-                if (needs_additional_document) {
-                    return {
-                        id: key,
-                        text: new_display_name || display_name,
-                        additional: {
-                            display_name: document_data[key].additional?.display_name,
-                            format: document_data[key].additional?.format,
-                        },
-                        value: format,
-                        sample_image,
-                        example_format,
-                    };
-                }
-                return {
-                    id: key,
-                    text: new_display_name || display_name,
-                    value: format,
-                    sample_image,
-                    example_format,
-                };
-            })
-        );
-    }, [country_code, document_data]);
-
-    const onKeyUp = (e, document_name, values, setFieldValue) => {
-        const { example_format } =
-            document_name === 'document_number' ? values.document_type : values.document_type.additional;
-        const current_input = example_format.includes('-')
-            ? formatInput(example_format, current_input || e.target.value, '-')
-            : e.target.value;
-        setFieldValue(document_name, current_input, true);
-        validateFields(values);
-    };
-
-    const resetDocumentItemSelected = setFieldValue => {
-        setFieldValue(
-            'document_type',
-            {
-                id: '',
-                text: '',
-                value: '',
-                example_format: '',
-                sample_image: '',
-            },
-            true
-        );
-        setDocumentImage('');
-    };
-
     const initial_form_values = {
         document_type: '',
         document_number: '',
     };
 
-    const getDocument = text => {
-        return document_list.find(d => d.text === text);
-    };
-
     const getExampleFormat = example_format => {
         return example_format ? localize('Example: ') + example_format : '';
     };
@@ -111,8 +28,6 @@ const IdvDocumentSubmit = ({ handleBack, handleViewComplete, selected_country, i
 
         if (!document_type || !document_type.text || !document_type.value) {
             errors.document_type = localize('Please select a document type.');
-        } else {
-            setInputDisable(false);
         }
 
         if (needs_additional_document) {
@@ -145,7 +60,7 @@ const IdvDocumentSubmit = ({ handleBack, handleViewComplete, selected_country, i
             document_number: values.document_number,
             document_additional: values.document_additional || '',
             document_type: values.document_type.id,
-            issuing_country: country_code,
+            issuing_country: selected_country.value,
         };
 
         WS.send(submit_data).then(response => {
@@ -180,161 +95,24 @@ const IdvDocumentSubmit = ({ handleBack, handleViewComplete, selected_country, i
                     <Text className='proof-of-identity__text btm-spacer' size='xs'>
                         {localize('Please select the document type and enter the ID number.')}
                     </Text>
-                    <div className='proof-of-identity__inner-container btm-spacer'>
-                        <div className='proof-of-identity__fieldset-container'>
-                            <fieldset className='proof-of-identity__fieldset'>
-                                <Field name='document'>
-                                    {({ field }) => (
-                                        <React.Fragment>
-                                            <DesktopWrapper>
-                                                <div className='document-dropdown'>
-                                                    <Autocomplete
-                                                        {...field}
-                                                        name='document_type'
-                                                        data-lpignore='true'
-                                                        error={touched.document_type && errors.document_type}
-                                                        autoComplete='off'
-                                                        type='text'
-                                                        label={localize('Choose the document type')}
-                                                        list_items={document_list}
-                                                        value={values.document_type.text ?? ''}
-                                                        onBlur={e => {
-                                                            handleBlur(e);
-                                                            if (!getDocument(e.target.value)) {
-                                                                resetDocumentItemSelected(setFieldValue);
-                                                            }
-                                                        }}
-                                                        onChange={handleChange}
-                                                        onItemSelection={item => {
-                                                            if (item.text === 'No results found' || !item.text) {
-                                                                setSelectedDoc(null);
-                                                                resetDocumentItemSelected(setFieldValue);
-                                                            } else {
-                                                                setFieldValue('document_type', item, true);
-                                                                setSelectedDoc(item.id);
-                                                                if (has_visual_sample) {
-                                                                    setDocumentImage(item.sample_image || '');
-                                                                }
-                                                            }
-                                                        }}
-                                                        required
-                                                    />
-                                                </div>
-                                            </DesktopWrapper>
-                                            <MobileWrapper>
-                                                <SelectNative
-                                                    {...field}
-                                                    name='document_type'
-                                                    error={touched.document_type && errors.document_type}
-                                                    label={localize('Choose the document type')}
-                                                    placeholder={localize('Please select')}
-                                                    list_items={document_list}
-                                                    value={values.document_type.text}
-                                                    onChange={e => {
-                                                        handleChange(e);
-                                                        const selected_document = getDocument(e.target.value);
-                                                        if (selected_document) {
-                                                            setSelectedDoc(selected_document.id);
-                                                            setFieldValue('document_type', selected_document, true);
-                                                            if (has_visual_sample) {
-                                                                setDocumentImage(selected_document.sample_image);
-                                                            }
-                                                        }
-                                                    }}
-                                                    use_text={true}
-                                                    required
-                                                />
-                                            </MobileWrapper>
-                                        </React.Fragment>
-                                    )}
-                                </Field>
-                            </fieldset>
-                            <fieldset className='proof-of-identity__fieldset-input'>
-                                <Field name='document_number'>
-                                    {({ field }) => (
-                                        <React.Fragment>
-                                            <Input
-                                                {...field}
-                                                name='document_number'
-                                                bottom_label={
-                                                    values.document_type &&
-                                                    getExampleFormat(values.document_type.example_format)
-                                                }
-                                                disabled={is_input_disable}
-                                                error={
-                                                    (touched.document_number && errors.document_number) ||
-                                                    errors.error_message
-                                                }
-                                                autoComplete='off'
-                                                placeholder={generatePlaceholderText(selected_doc)}
-                                                value={values.document_number}
-                                                onPaste={preventEmptyClipboardPaste}
-                                                onBlur={handleBlur}
-                                                onChange={handleChange}
-                                                onKeyUp={e => onKeyUp(e, 'document_number', values, setFieldValue)}
-                                                required
-                                            />
-                                            {values.document_type.additional?.display_name && (
-                                                <Input
-                                                    {...field}
-                                                    name='document_additional'
-                                                    bottom_label={
-                                                        values.document_type.additional &&
-                                                        getExampleFormat(
-                                                            values.document_type.additional?.example_format
-                                                        )
-                                                    }
-                                                    disabled={is_input_disable}
-                                                    error={
-                                                        (touched.document_additional && errors.document_additional) ||
-                                                        errors.error_message
-                                                    }
-                                                    autoComplete='off'
-                                                    placeholder={`Enter your ${values.document_type.additional?.display_name.toLowerCase()}`}
-                                                    value={values.document_additional}
-                                                    onPaste={preventEmptyClipboardPaste}
-                                                    onBlur={handleBlur}
-                                                    onChange={handleChange}
-                                                    onKeyUp={e =>
-                                                        onKeyUp(e, 'document_additional', values, setFieldValue)
-                                                    }
-                                                />
-                                            )}
-                                        </React.Fragment>
-                                    )}
-                                </Field>
-                            </fieldset>
-                        </div>
-                        {document_image && (
-                            <div
-                                className={classNames('proof-of-identity__sample-container', {
-                                    'proof-of-identity__sample-container-external': is_from_external,
-                                })}
-                            >
-                                <Text size='xxs' weight='bold'>
-                                    {localize('Sample:')}
-                                </Text>
-                                <div className='proof-of-identity__image-container'>
-                                    <img
-                                        className='proof-of-identity__image'
-                                        src={document_image}
-                                        alt='document sample image'
-                                    />
-                                </div>
-                            </div>
+                    <Field>
+                        {({ field }) => (
+                            <IDVForm
+                                errors={errors}
+                                touched={touched}
+                                values={values}
+                                handleChange={handleChange}
+                                handleBlur={handleBlur}
+                                setFieldValue={setFieldValue}
+                                hide_hint={false}
+                                selected_country={selected_country}
+                                is_from_external={is_from_external}
+                                class_name='idv-layout'
+                                {...field}
+                            />
                         )}
-                    </div>
-                    {selected_doc && (
-                        <Text
-                            className={classNames('proof-of-identity__text btm-spacer', {
-                                'top-spacer': is_from_external,
-                            })}
-                            align='center'
-                            size='xs'
-                        >
-                            <Localize i18n_default_text='Please ensure all your personal details are the same as in your chosen document. If you wish to update your personal details, go to account settings.' />
-                        </Text>
-                    )}
+                    </Field>
+
                     <FormFooter className='proof-of-identity__footer'>
                         <Button className='back-btn' onClick={handleBack} type='button' has_effect large secondary>
                             <BackButtonIcon className='back-btn-icon' /> {localize('Go Back')}
diff --git a/packages/account/src/Components/poi/idv-document-submit/utils.js b/packages/account/src/Components/poi/idv-document-submit/utils.js
deleted file mode 100644
index b9f6ee0feea6..000000000000
--- a/packages/account/src/Components/poi/idv-document-submit/utils.js
+++ /dev/null
@@ -1,177 +0,0 @@
-// [TODO]: Remove duplicated functions from this file and use the ones in Helpers/utils
-
-import { getUrlBase } from '@deriv/shared';
-import { localize } from '@deriv/translations';
-
-export const documentAdditionalError = (document_additional, document_additional_format) => {
-    let error_message = null;
-    if (!document_additional) {
-        error_message = localize('Please enter your document number. ');
-    } else {
-        const format_regex = getRegex(document_additional_format);
-        if (!format_regex.test(document_additional)) {
-            error_message = localize('Please enter the correct format. ');
-        }
-    }
-
-    return error_message;
-};
-
-export const getRegex = target_regex => {
-    const output_regex = regex.find(r => r.regex_string === target_regex);
-    if (output_regex) {
-        return new RegExp(output_regex.value, output_regex.flags);
-    }
-    return new RegExp(target_regex);
-};
-
-export const getDocumentData = (country_code, document_type) => {
-    return (
-        (Object.keys(idv_document_data).includes(country_code) && idv_document_data[country_code][document_type]) || {
-            new_display_name: '',
-            example_format: '',
-            sample_image: '',
-        }
-    );
-};
-
-const getImageLocation = image_name => getUrlBase(`/public/images/common/${image_name}`);
-
-export const preventEmptyClipboardPaste = e => {
-    const clipboardData = (e.clipboardData || window.clipboardData).getData('text');
-    if (clipboardData.length === 0) {
-        e.preventDefault();
-    }
-};
-
-// Unsupported Regex List
-const regex = [
-    {
-        regex_string: '^(?i)G[a-zA-Z0-9]{7,9}$',
-        value: '^G[a-zA-Z0-9]{7,9}$',
-        flags: 'i',
-    },
-];
-
-// Note: Ensure that the object keys matches BE API's keys. This is simply a mapping for FE templates
-const idv_document_data = {
-    ke: {
-        alien_card: {
-            new_display_name: '',
-            example_format: '123456',
-            sample_image: getImageLocation('ke_alien_card.png'),
-        },
-        national_id: {
-            new_display_name: '',
-            example_format: '12345678',
-            sample_image: getImageLocation('ke_national_identity_card.png'),
-        },
-        passport: {
-            new_display_name: '',
-            example_format: 'A12345678',
-            sample_image: getImageLocation('ke_passport.png'),
-        },
-    },
-    za: {
-        national_id: {
-            new_display_name: localize('National ID'),
-            example_format: '1234567890123',
-            sample_image: getImageLocation('za_national_identity_card.png'),
-        },
-        national_id_no_photo: {
-            new_display_name: localize('National ID (No Photo)'),
-            example_format: '1234567890123',
-            sample_image: '',
-        },
-    },
-    ng: {
-        bvn: {
-            new_display_name: localize('Bank Verification Number'),
-            example_format: '12345678901',
-            sample_image: '',
-        },
-        cac: {
-            new_display_name: localize('Corporate Affairs Commission'),
-            example_format: '12345678',
-            sample_image: '',
-        },
-        drivers_license: {
-            new_display_name: '',
-            example_format: 'ABC123456789',
-            sample_image: getImageLocation('ng_drivers_license.png'),
-        },
-        nin: {
-            new_display_name: localize('National Identity Number'),
-            example_format: '12345678901',
-            sample_image: '',
-        },
-        nin_slip: {
-            new_display_name: localize('National Identity Number Slip'),
-            example_format: '12345678901',
-            sample_image: getImageLocation('ng_nin_slip.png'),
-        },
-        tin: {
-            new_display_name: localize('Taxpayer identification number'),
-            example_format: '12345678-1234',
-            sample_image: '',
-        },
-        voter_id: {
-            new_display_name: localize('Voter ID'),
-            example_format: '1234567890123456789',
-            sample_image: getImageLocation('ng_voter_id.png'),
-        },
-    },
-    gh: {
-        drivers_license: {
-            new_display_name: '',
-            example_format: '12345678A1',
-            sample_image: '',
-        },
-        national_id: {
-            new_display_name: localize('National ID'),
-            example_format: 'GHA-123456789-1',
-            sample_image: '',
-        },
-        passport: {
-            new_display_name: localize('Passport'),
-            example_format: 'G1234567',
-            sample_image: '',
-        },
-        ssnit: {
-            new_display_name: localize('Social Security and National Insurance Trust'),
-            example_format: 'C123456789012',
-            sample_image: '',
-        },
-        voter_id: {
-            new_display_name: localize('Voter ID'),
-            example_format: '01234567890',
-            sample_image: '',
-        },
-    },
-    br: {
-        cpf: {
-            new_display_name: localize('CPF'),
-            example_format: '123.456.789-12',
-            sample_image: '',
-        },
-    },
-    ug: {
-        national_id: {
-            new_display_name: localize('National ID'),
-            example_format: 'CM12345678PE1D',
-            sample_image: getImageLocation('ug_national_identity_card.png'),
-        },
-        national_id_no_photo: {
-            new_display_name: localize('National ID (No Photo)'),
-            example_format: 'CM12345678PE1D',
-            sample_image: '',
-        },
-    },
-    zw: {
-        national_id: {
-            new_display_name: localize('National ID'),
-            example_format: '081234567F53',
-            sample_image: getImageLocation('zw_national_identity_card.png'),
-        },
-    },
-};
diff --git a/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx b/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx
index 11a4168a1a72..cfe76d6c5cb0 100644
--- a/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx
+++ b/packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx
@@ -14,14 +14,14 @@ import {
     ThemedScrollbars,
 } from '@deriv/components';
 import { isDesktop, formatInput, isMobile } from '@deriv/shared';
+import DocumentSubmitLogo from 'Assets/ic-document-submit-icon.svg';
 import {
-    documentAdditionalError,
+    generatePlaceholderText,
     getDocumentData,
-    getRegex,
+    documentAdditionalError,
     preventEmptyClipboardPaste,
-} from '../../idv-document-submit/utils';
-import DocumentSubmitLogo from 'Assets/ic-document-submit-icon.svg';
-import { generatePlaceholderText } from 'Helpers/utils';
+    getRegex,
+} from 'Helpers/utils';
 
 type TIdvDocSubmitOnSignup = {
     citizen_data: FormikValues;
diff --git a/packages/account/src/Helpers/__tests__/utils.spec.js b/packages/account/src/Helpers/__tests__/utils.spec.js
deleted file mode 100644
index d2f16512eab7..000000000000
--- a/packages/account/src/Helpers/__tests__/utils.spec.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { generatePlaceholderText } from '../utils';
-
-describe('generatePlaceholderText', () => {
-    it('should return the correct placeholder text for drivers license', () => {
-        expect(generatePlaceholderText('drivers_license')).toEqual('Enter Driver License Reference number');
-    });
-
-    it('should return the correct placeholder text for ssnit', () => {
-        expect(generatePlaceholderText('ssnit')).toEqual('Enter your SSNIT number');
-    });
-
-    it('should return the correct placeholder text for id card', () => {
-        expect(generatePlaceholderText('id_card')).toEqual('Enter your document number');
-    });
-
-    it('should return the correct placeholder text for passport', () => {
-        expect(generatePlaceholderText('passport')).toEqual('Enter your document number');
-    });
-});
diff --git a/packages/account/src/Helpers/__tests__/utils.spec.ts b/packages/account/src/Helpers/__tests__/utils.spec.ts
new file mode 100644
index 000000000000..324ea076a4d8
--- /dev/null
+++ b/packages/account/src/Helpers/__tests__/utils.spec.ts
@@ -0,0 +1,152 @@
+import {
+    generatePlaceholderText,
+    documentAdditionalError,
+    shouldShowIdentityInformation,
+    getDocumentData,
+    getRegex,
+    preventEmptyClipboardPaste,
+} from '../utils';
+
+describe('generatePlaceholderText', () => {
+    it('should return the correct placeholder text for drivers license', () => {
+        expect(generatePlaceholderText('drivers_license')).toEqual('Enter Driver License Reference number');
+    });
+
+    it('should return the correct placeholder text for ssnit', () => {
+        expect(generatePlaceholderText('ssnit')).toEqual('Enter your SSNIT number');
+    });
+
+    it('should return the correct placeholder text for id card', () => {
+        expect(generatePlaceholderText('id_card')).toEqual('Enter your document number');
+    });
+
+    it('should return the correct placeholder text for passport', () => {
+        expect(generatePlaceholderText('passport')).toEqual('Enter your document number');
+    });
+});
+
+describe('documentAdditionalError', () => {
+    it('should set the correct additional document error when format is incorrect', () => {
+        expect(documentAdditionalError('testdoc', '/[a-z]/')).toEqual('Please enter the correct format. ');
+    });
+
+    it('should set the correct additional document error when value is not provided', () => {
+        expect(documentAdditionalError('', '/[a-z]+/')).toEqual('Please enter your document number. ');
+    });
+});
+
+describe('shouldShowIdentityInformation', () => {
+    const mock_data = {
+        account_status: {
+            status: ['skip_idv'],
+        },
+        account_settings: {
+            citizen: 'test',
+        },
+        residence: 'test',
+        residence_list: [
+            {
+                value: 'test',
+                identity: {
+                    services: {
+                        idv: {
+                            is_country_supported: true,
+                        },
+                    },
+                },
+            },
+        ],
+        real_account_signup_target: 'maltainvest',
+    };
+
+    it('should not show IDV if the country is maltainvest', () => {
+        expect(shouldShowIdentityInformation(mock_data)).toBeFalsy();
+    });
+
+    it("should not show IDV if the country dosen't support it", () => {
+        const new_mock_data = {
+            ...mock_data,
+            residence_list: [
+                {
+                    value: 'test',
+                    identity: {
+                        services: {
+                            idv: {
+                                is_country_supported: false,
+                            },
+                        },
+                    },
+                },
+            ],
+            real_account_signup_target: 'svg',
+        };
+        expect(shouldShowIdentityInformation(new_mock_data)).toBeFalsy();
+    });
+
+    it('should show IDV if the country is not maltainvest and supports idv', () => {
+        const new_mock_data = {
+            ...mock_data,
+            account_status: {
+                status: [],
+            },
+            real_account_signup_target: 'svg',
+        };
+        expect(shouldShowIdentityInformation(new_mock_data)).toBeTruthy();
+    });
+
+    it('should not show IDV if the account status has skip_idv status', () => {
+        const new_mock_data = {
+            ...mock_data,
+            real_account_signup_target: 'svg',
+        };
+        expect(shouldShowIdentityInformation(new_mock_data)).toBeFalsy();
+    });
+});
+
+describe('getDocumentData', () => {
+    it('should return the empty document data', () => {
+        expect(getDocumentData('test', 'test')).toEqual({
+            new_display_name: '',
+            example_format: '',
+            sample_image: '',
+        });
+    });
+
+    it('should return correct document data for Zimbabwe', () => {
+        expect(getDocumentData('zw', 'national_id')).toEqual({
+            new_display_name: 'National ID',
+            example_format: '081234567F53',
+            sample_image: '/public/images/common/zw_national_identity_card.png',
+        });
+    });
+});
+
+describe('getRegex', () => {
+    it('should return the correct regex for Zimbabwe', () => {
+        expect(getRegex('^[0-9]{8,9}[a-zA-Z]{1}[0-9]{2}$')).toEqual(/^[0-9]{8,9}[a-zA-Z]{1}[0-9]{2}$/);
+    });
+});
+
+describe('preventEmptyClipboardPaste', () => {
+    it('should not paste any data when clipboard is empty', () => {
+        const event = {
+            clipboardData: {
+                getData: jest.fn(() => ''),
+            },
+            preventDefault: jest.fn(),
+        };
+        preventEmptyClipboardPaste(event);
+        expect(event.preventDefault).toHaveBeenCalled();
+    });
+
+    it('should not paste any data when clipboard is empty', () => {
+        const event = {
+            clipboardData: {
+                getData: jest.fn(() => 'test string'),
+            },
+            preventDefault: jest.fn(),
+        };
+        preventEmptyClipboardPaste(event);
+        expect(event.preventDefault).not.toHaveBeenCalled();
+    });
+});
diff --git a/packages/core/src/sass/account-wizard.scss b/packages/core/src/sass/account-wizard.scss
index c9cd873aeb84..09d9bf43903b 100644
--- a/packages/core/src/sass/account-wizard.scss
+++ b/packages/core/src/sass/account-wizard.scss
@@ -822,7 +822,7 @@
 
 .personal-details-form {
     width: 100%;
-    @include desktop() {
-        padding: 0 1.6rem;
+    @include desktop {
+        padding: 0 16rem;
     }
 }
diff --git a/packages/core/src/sass/app/_common/components/onfido-container.scss b/packages/core/src/sass/app/_common/components/onfido-container.scss
index 00e3d62c2de9..fec944532aa1 100644
--- a/packages/core/src/sass/app/_common/components/onfido-container.scss
+++ b/packages/core/src/sass/app/_common/components/onfido-container.scss
@@ -219,3 +219,15 @@
         }
     }
 }
+
+.idv-layout {
+    width: 60%;
+    .poi-form-on-signup__fields {
+        .proof-of-identity__container {
+            width: 100%;
+        }
+        .proof-of-identity__fieldset {
+            margin-bottom: unset;
+        }
+    }
+}
diff --git a/packages/core/src/sass/real-account-signup.scss b/packages/core/src/sass/real-account-signup.scss
index 6c1a2d12e5db..16f0a2d98aa8 100644
--- a/packages/core/src/sass/real-account-signup.scss
+++ b/packages/core/src/sass/real-account-signup.scss
@@ -168,6 +168,7 @@
 }
 
 .idv-form {
+    display: grid;
     grid-template-rows: unset !important;
 
     .details-form {