diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index a8e4d256d..6e841111b 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -12,9 +12,7 @@ import './scss/App.scss';
 function App() {
   return (
     <ErrorBoundary>
-      <Suspense>
-      {/* <Suspense fallback={<FullPageLoader resourceName="Migration" />}> */}
-
+      <Suspense fallback={<FullPageLoader resourceName="Migration" />}>
         <AppContextProvider>
           <AppLayout>
             <AppRouter />
diff --git a/ui/src/components/Common/AddStack/addStack.tsx b/ui/src/components/Common/AddStack/addStack.tsx
index 2f3b9a15e..d53755f05 100644
--- a/ui/src/components/Common/AddStack/addStack.tsx
+++ b/ui/src/components/Common/AddStack/addStack.tsx
@@ -42,9 +42,9 @@ const AddStack = (props: any): JSX.Element => {
   const onSubmit = async (formData: any) => {
     setIsProcessing(true);
     const resp = await props.onSubmit({
-      name: formData?.name || props.defaultValues.name,
-      description: formData?.description || props.defaultValues.description,
-      locale: formData?.locale?.value || props.defaultValues.locale
+      name: formData?.name || props?.defaultValues?.name,
+      description: formData?.description || props?.defaultValues?.description,
+      locale: formData?.locale?.value || props?.defaultValues?.locale
     });
 
     if (resp) {
@@ -61,7 +61,7 @@ const AddStack = (props: any): JSX.Element => {
 
   useEffect(() => {
     //check if offline CMS data field is set to true, if then read data from cms data file.
-    getCMSDataFromFile(CS_ENTRIES.ADD_STACK)
+    getCMSDataFromFile(CS_ENTRIES?.ADD_STACK)
       .then((data: AddStackCMSData) => {
         //Check for null
         if (!data) {
@@ -80,172 +80,182 @@ const AddStack = (props: any): JSX.Element => {
   }, []);
 
   return (
-    <FinalForm
-      onSubmit={onSubmit}
-      keepDirtyOnReinitialize={true}
-      validate={(values): any => {
-        const errors: any = {};
-        if (!values.name || values.name.trim().lenght < 1) {
-          errors.name = 'Stack name required';
-        }
-        if (!values.locale || values.locale === '') {
-          errors.locale = 'Required';
-        }
-        return errors;
-      }}
-      initialValues={{
-        locale: { label: 'English - United States', value: 'en-us' }
-      }}
-      render={({ handleSubmit }): JSX.Element => {
-        return (
-          <>
-            <div className="ReactModal__add-stack">
-              <form onSubmit={handleSubmit}>
-                <ModalHeader title={addStackCMSData?.title} closeModal={props.closeModal} />
-                <ModalBody className="no-scroll">
-                  <Field>
-                    <ReactFinalField name="name" type="input">
-                      {({ input, meta }): JSX.Element => {
-                        return (
-                          <>
-                            <FieldLabel
-                              required
-                              testId="cs-stack-create-title"
-                              version="v2"
-                              error={meta.error && meta.touched && true}
-                              htmlFor="name"
-                            >
-                              {addStackCMSData.stack_name}
-                            </FieldLabel>
-                            <TextInput
-                              testId="cs-stack-create-title-input"
-                              version="v2"
-                              {...input}
-                              onChange={(event: any): any => {
-                                input.onChange(event);
-                              }}
-                              name="name"
-                              autoComplete="off"
-                              type="text"
-                              placeholder={addStackCMSData.stack_name_placeholder}
-                              error={(meta.error || meta.submitError) && meta.touched}
-                            />
-                            {meta.error && meta.touched && (
-                              <ValidationMessage
-                                version="v2"
-                                testId="cs-stack-create-title-validation"
-                              >
-                                {meta.error}
-                              </ValidationMessage>
-                            )}
-                          </>
-                        );
-                      }}
-                    </ReactFinalField>
-                  </Field>
-                  <Field>
-                    <ReactFinalField name={'description'} type="textarea">
-                      {({ input }): any => {
-                        return (
-                          <div className="input-description">
-                            <Field>
-                              <FieldLabel
-                                testId="cs-stack-create-description"
-                                version="v2"
-                                htmlFor="description"
-                              >
-                                {addStackCMSData.stack_description}
-                              </FieldLabel>
-                              <Textarea
-                                testId="cs-stack-create-description-input"
-                                version="v2"
-                                className="Description-field"
-                                {...input}
-                                name="description"
-                                onChange={(event: any): any => {
-                                  input.onChange(event);
-                                }}
-                                placeholder={addStackCMSData.stack_description_placeholder}
-                              />
-                            </Field>
-                          </div>
-                        );
-                      }}
-                    </ReactFinalField>
-                  </Field>
-                  <Field>
-                    <ReactFinalField name={'locale'}>
-                      {({ input, meta }): any => {
-                        return (
-                          <>
-                            <FieldLabel
-                              required
-                              testId="cs-stack-create-language"
-                              version="v2"
-                              error={meta.error && meta.touched && true}
-                              htmlFor="locale"
-                            >
-                              {addStackCMSData.stack_locales}
-                            </FieldLabel>
-                            <Select
-                              value={input.value}
-                              isSearchable={true}
-                              onChange={(event: any): any => {
-                                input.onChange(event);
-                              }}
-                              name="locale"
-                              width="300px"
-                              options={props.locales}
-                              isClearable={true}
-                              version={'v2'}
-                              placeholder={addStackCMSData.stack_locale_description}
-                            />
-                            {meta.error && meta.touched && (
-                              <ValidationMessage
-                                testId="cs-stack-create-language-validation"
-                                version="v2"
-                              >
-                                {meta.error}
-                              </ValidationMessage>
-                            )}
-                          </>
-                        );
-                      }}
-                    </ReactFinalField>
-                  </Field>
-                </ModalBody>
-                <ModalFooter>
-                  <ButtonGroup>
-                    <Button
-                      aria-label="Cancel"
-                      version="v2"
-                      testId="cs-cancel-create-stack"
-                      buttonType="tertiary"
-                      onClick={(): any => {
-                        props.closeModal();
-                      }}
-                    >
-                      {addStackCMSData.secondary_cta.title}
-                    </Button>
-                    <Button
-                      aria-label="Create New Stack"
-                      version="v2"
-                      testId="cs-create-stack"
-                      buttonType="primary"
-                      name="submit"
-                      type="submit"
-                      loading={isProcessing}
-                    >
-                      {addStackCMSData.primary_cta.title}
-                    </Button>
-                  </ButtonGroup>
-                </ModalFooter>
-              </form>
-            </div>
-          </>
-        );
-      }}
-    />
+    <>
+      {isLoading ? (
+        <div className="row">
+          <div className="col-12 text-center ">
+            <CircularLoader />
+          </div>
+        </div>
+      ) : (
+        <FinalForm
+          onSubmit={onSubmit}
+          keepDirtyOnReinitialize={true}
+          validate={(values): any => {
+            const errors: any = {};
+            if (!values?.name || values?.name?.trim().lenght < 1) {
+              errors.name = 'Stack name required';
+            }
+            if (!values?.locale || values?.locale === '') {
+              errors.locale = 'Required';
+            }
+            return errors;
+          }}
+          initialValues={{
+            locale: { label: 'English - United States', value: 'en-us' }
+          }}
+          render={({ handleSubmit }): JSX.Element => {
+            return (
+              <>
+                <div className="ReactModal__add-stack">
+                  <form onSubmit={handleSubmit}>
+                    <ModalHeader title={addStackCMSData?.title} closeModal={props?.closeModal} />
+                    <ModalBody className="no-scroll">
+                      <Field>
+                        <ReactFinalField name="name" type="input">
+                          {({ input, meta }): JSX.Element => {
+                            return (
+                              <>
+                                <FieldLabel
+                                  required
+                                  testId="cs-stack-create-title"
+                                  version="v2"
+                                  error={meta?.error && meta?.touched && true}
+                                  htmlFor="name"
+                                >
+                                  {addStackCMSData?.stack_name}
+                                </FieldLabel>
+                                <TextInput
+                                  testId="cs-stack-create-title-input"
+                                  version="v2"
+                                  {...input}
+                                  onChange={(event: any): any => {
+                                    input?.onChange(event);
+                                  }}
+                                  name="name"
+                                  autoComplete="off"
+                                  type="text"
+                                  placeholder={addStackCMSData?.stack_name_placeholder}
+                                  error={(meta?.error || meta?.submitError) && meta?.touched}
+                                />
+                                {meta?.error && meta?.touched && (
+                                  <ValidationMessage
+                                    version="v2"
+                                    testId="cs-stack-create-title-validation"
+                                  >
+                                    {meta?.error}
+                                  </ValidationMessage>
+                                )}
+                              </>
+                            );
+                          }}
+                        </ReactFinalField>
+                      </Field>
+                      <Field>
+                        <ReactFinalField name={'description'} type="textarea">
+                          {({ input }): any => {
+                            return (
+                              <div className="input-description">
+                                <Field>
+                                  <FieldLabel
+                                    testId="cs-stack-create-description"
+                                    version="v2"
+                                    htmlFor="description"
+                                  >
+                                    {addStackCMSData?.stack_description}
+                                  </FieldLabel>
+                                  <Textarea
+                                    testId="cs-stack-create-description-input"
+                                    version="v2"
+                                    className="Description-field"
+                                    {...input}
+                                    name="description"
+                                    onChange={(event: any): any => {
+                                      input?.onChange(event);
+                                    }}
+                                    placeholder={addStackCMSData?.stack_description_placeholder}
+                                  />
+                                </Field>
+                              </div>
+                            );
+                          }}
+                        </ReactFinalField>
+                      </Field>
+                      <Field>
+                        <ReactFinalField name={'locale'}>
+                          {({ input, meta }): any => {
+                            return (
+                              <>
+                                <FieldLabel
+                                  required
+                                  testId="cs-stack-create-language"
+                                  version="v2"
+                                  error={meta?.error && meta?.touched && true}
+                                  htmlFor="locale"
+                                >
+                                  {addStackCMSData?.stack_locales}
+                                </FieldLabel>
+                                <Select
+                                  value={input?.value}
+                                  isSearchable={true}
+                                  onChange={(event: any): any => {
+                                    input?.onChange(event);
+                                  }}
+                                  name="locale"
+                                  width="300px"
+                                  options={props?.locales}
+                                  isClearable={true}
+                                  version={'v2'}
+                                  placeholder={addStackCMSData?.stack_locale_description}
+                                />
+                                {meta?.error && meta?.touched && (
+                                  <ValidationMessage
+                                    testId="cs-stack-create-language-validation"
+                                    version="v2"
+                                  >
+                                    {meta?.error}
+                                  </ValidationMessage>
+                                )}
+                              </>
+                            );
+                          }}
+                        </ReactFinalField>
+                      </Field>
+                    </ModalBody>
+                    <ModalFooter>
+                      <ButtonGroup>
+                        <Button
+                          aria-label="Cancel"
+                          version="v2"
+                          testId="cs-cancel-create-stack"
+                          buttonType="tertiary"
+                          onClick={(): any => {
+                            props?.closeModal();
+                          }}
+                        >
+                          {addStackCMSData?.secondary_cta?.title}
+                        </Button>
+                        <Button
+                          aria-label="Create New Stack"
+                          version="v2"
+                          testId="cs-create-stack"
+                          buttonType="primary"
+                          name="submit"
+                          type="submit"
+                          loading={isProcessing}
+                        >
+                          {addStackCMSData?.primary_cta?.title}
+                        </Button>
+                      </ButtonGroup>
+                    </ModalFooter>
+                  </form>
+                </div>
+              </>
+            );
+          }}
+        />
+      )}
+    </>
   );
 };
 
diff --git a/ui/src/components/Common/FileUpload/index.tsx b/ui/src/components/Common/FileUpload/index.tsx
index 6b58f02a4..1945e9955 100644
--- a/ui/src/components/Common/FileUpload/index.tsx
+++ b/ui/src/components/Common/FileUpload/index.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, DragEvent, useRef, useState } from 'react';
-// import { InfoModal } from '@contentstack/venus-components';
+import { InfoModal } from '@contentstack/venus-components';
 import { IFile } from '../../../context/app/app.interface';
-// import Upload from './upload';
+import Upload from './upload';
 import './fileupload.scss';
 
 type FileUploadProps = {
@@ -27,24 +27,24 @@ const FileUpload = (props: FileUploadProps) => {
 
     const filesArray = Array.from(filesList);
 
-    // InfoModal({
-    //   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //   // @ts-ignore
-    //   component: (props: any) => (
-    //     <Upload
-    //       fileList={filesArray}
-    //       {...props}
-    //       onCloseAfterUpload={onCloseAfterUpload}
-    //       projectId={props?.projectId}
-    //     />
-    //   ),
-    //   modalProps: {
-    //     targetNodeOrId: targetRef.current,
-
-    //     onClose: handleSetUploadModalFalse
-    //   },
-    //   alignment: 'bottom-right'
-    // });
+    InfoModal({
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      component: (props: any) => (
+        <Upload
+          fileList={filesArray}
+          {...props}
+          onCloseAfterUpload={onCloseAfterUpload}
+          projectId={props?.projectId}
+        />
+      ),
+      modalProps: {
+        targetNodeOrId: targetRef.current,
+
+        onClose: handleSetUploadModalFalse
+      },
+      alignment: 'bottom-right'
+    });
 
     setIsDragOver(false);
   };
diff --git a/ui/src/components/ContentMapper/contentMapper.interface.ts b/ui/src/components/ContentMapper/contentMapper.interface.ts
index f6766980f..0a85ad55f 100644
--- a/ui/src/components/ContentMapper/contentMapper.interface.ts
+++ b/ui/src/components/ContentMapper/contentMapper.interface.ts
@@ -55,7 +55,8 @@ export interface FieldMapType {
   otherCmsType: string;
   uid: string;
   id: string;
-  _invalid?: boolean;
+  _canFreezeCheckbox?: boolean;
+  _canSelect?: boolean;
 }
 
 export interface ItemStatus {
diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
index f278bdca7..554d2fcd7 100644
--- a/ui/src/components/ContentMapper/index.tsx
+++ b/ui/src/components/ContentMapper/index.tsx
@@ -143,8 +143,8 @@ const ContentMapper = () => {
     stackStatus();
 
     tableData?.forEach((field) => {
-      if (field?.otherCmsField === 'title' || field?.otherCmsField === 'url') {
-        field._invalid = true;
+      if (field?.otherCmsField === 'title') {
+        field._canFreezeCheckbox = true;
       }
     });
   }, []);
@@ -400,6 +400,7 @@ const ContentMapper = () => {
             maxWidth="290px"
             isClearable={false}
             options={option}
+            isDisabled={data?.otherCmsField === 'title' || data?.otherCmsField === 'url'}
           />
         </div>
         <Icon
@@ -637,7 +638,7 @@ const ContentMapper = () => {
   if (!IsEmptyStack) {
     columns?.push({
       disableSortBy: true,
-      Header: `Contentstack: ${newMigrationData?.destination_stack?.selectedStack?.label}`,
+      Header: `Contentstack: ${OtherContentType?.label ?? ''}`,
       // accessor: 'ct_field',
       accessor: SelectAccessorOfColumn,
       id: 'contentstack_field',
@@ -664,7 +665,17 @@ const ContentMapper = () => {
     value: item?.title
   }));
 
-  // console.log("==============", contentTypesList);
+  const [SelectedAssets, updateSelectedAssets] = useState({});
+  const [resetRowSelection, updateResetRowSelection] = useState(false);
+
+  const onRowSelectProp = [
+    {
+      label: 'Log selected Items',
+      cb: (data: any) => {
+        updateResetRowSelection(true)
+      }
+    }
+  ]
 
   return (
     <div className="step-container">
@@ -771,10 +782,7 @@ const ContentMapper = () => {
                 ),
                 showExportCta: true
               }}
-              rowDisableProp={{
-                key: '_invalid',
-                value: true
-              }}
+              v2Features={{ key: 'canFreezeCheckbox', value: true }}
             />
           </div>
 
diff --git a/ui/src/components/DestinationStack/index.tsx b/ui/src/components/DestinationStack/index.tsx
index 39bbbdb54..538011d71 100644
--- a/ui/src/components/DestinationStack/index.tsx
+++ b/ui/src/components/DestinationStack/index.tsx
@@ -2,7 +2,7 @@ import { useContext, useEffect, useRef, useState } from 'react';
 import AutoVerticalStepper from '../Stepper/VerticalStepper/AutoVerticalStepper';
 import { getDestinationStackSteps } from './StepperSteps';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Button } from '@contentstack/venus-components';
+import { Button, CircularLoader } from '@contentstack/venus-components';
 //import { getEntries } from '../../services/contentstackSDK';
 import { CS_ENTRIES, PROJECT_STATUS } from '../../utilities/constants';
 import { AppContext } from '../../context/app/app.context';
@@ -34,6 +34,7 @@ const DestinationStackComponent = ({
   projectData
 }: DestinationStackComponentProps) => {
   /** ALL HOOKS HERE */
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const [isCompleted, setIsCompleted] = useState<boolean>(false);
   const [isMigrationLocked, setIsMigrationLocked] = useState<boolean>(false);
   const [stepperKey, setStepperKey] = useState<string>('v-mig-destination-step');
@@ -144,6 +145,7 @@ const DestinationStackComponent = ({
       //Check for null
       if (!data) {
         updateMigrationData({ destinationStackData: DEFAULT_DESTINATION_STACK_DATA });
+        setIsLoading(false);
         return;
       }
 
@@ -156,6 +158,8 @@ const DestinationStackComponent = ({
 
       updateMigrationData({ destinationStackData: destinationStackDataMapped });
 
+      setIsLoading(false);
+
       //Check for migration Status and lock.
       // Status where Migration is to be Locked:
       setIsMigrationLocked(
@@ -168,7 +172,7 @@ const DestinationStackComponent = ({
 
   useEffect(() => {
     setStepperKey('destination-Vertical-stepper');
-  }, []);
+  }, [isLoading]);
 
   useEffect(() => {
     updateDestinationStackData();
@@ -190,34 +194,44 @@ const DestinationStackComponent = ({
   }, [internalActiveStepIndex]);
 
   return (
-    <div className="destination-stack-container">
-      <div className="row">
-        <div className="col-12">
-          <AutoVerticalStepper
-            key={stepperKey}
-            steps={getDestinationStackSteps(
-              isCompleted,
-              isMigrationLocked,
-              migrationData?.destinationStackData?.all_steps
-            )}
-            ref={autoVerticalStepperComponent}
-            isEdit={!isMigrationLocked}
-            handleOnAllStepsComplete={handleOnAllStepsComplete}
-          />
+    <>
+      {isLoading ? (
+        <div className="row">
+          <div className="col-12 text-center center-align">
+            <CircularLoader />
+          </div>
         </div>
-        {isCompleted && !isMigrationLocked ? (
-          <div className="col-12">
-            <div className="pl-40">
-              <Button version="v2" onClick={handleOnClick}>
-                {migrationData?.destinationStackData?.cta}
-              </Button>
+      ) : (
+        <div className="destination-stack-container">
+          <div className="row">
+            <div className="col-12">
+              <AutoVerticalStepper
+                key={stepperKey}
+                steps={getDestinationStackSteps(
+                  isCompleted,
+                  isMigrationLocked,
+                  migrationData?.destinationStackData?.all_steps
+                )}
+                ref={autoVerticalStepperComponent}
+                isEdit={!isMigrationLocked}
+                handleOnAllStepsComplete={handleOnAllStepsComplete}
+              />
             </div>
+            {isCompleted && !isMigrationLocked ? (
+              <div className="col-12">
+                <div className="pl-40">
+                  <Button version="v2" onClick={handleOnClick}>
+                    {migrationData?.destinationStackData?.cta}
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
           </div>
-        ) : (
-          <></>
-        )}
-      </div>
-    </div>
+        </div>
+      )}
+    </>
   );
 };
 
diff --git a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
index a1be998e1..48fa0877d 100644
--- a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
@@ -159,7 +159,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
           <Search
             className="service_list_search_bar"
             width="full"
-            placeholder="Search for connectors"
+            placeholder="Search for CMS"
             debounceSearch
             onClear
             version="v2"
diff --git a/ui/src/components/LegacyCms/index.tsx b/ui/src/components/LegacyCms/index.tsx
index bc5e9b7d8..5a95d995b 100644
--- a/ui/src/components/LegacyCms/index.tsx
+++ b/ui/src/components/LegacyCms/index.tsx
@@ -2,7 +2,7 @@ import { useContext, useEffect, useRef, useState } from 'react';
 import AutoVerticalStepper from '../Stepper/VerticalStepper/AutoVerticalStepper';
 import { getLegacyCMSSteps } from './StepperSteps';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Button } from '@contentstack/venus-components';
+import { Button, CircularLoader } from '@contentstack/venus-components';
 // import { getEntries } from '../../services/contentstackSDK';
 import { CS_ENTRIES, PROJECT_STATUS } from '../../utilities/constants';
 import { AppContext } from '../../context/app/app.context';
@@ -39,6 +39,7 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
   /** ALL HOOKS HERE */
   const [isCompleted, setIsCompleted] = useState<boolean>(false);
   const [isMigrationLocked, setIsMigrationLocked] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const [internalActiveStepIndex, setInternalActiveStepIndex] = useState<number>(-1);
   const [stepperKey, setStepperKey] = useState<string>('v-mig-step');
   const { projectId = '' } = useParams();
@@ -76,6 +77,8 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
   /********** ALL USEEFFECT HERE *************/
   useEffect(() => {
     const fetchCMSData = async () => {
+      setIsLoading(true);
+
       //check if offline CMS data field is set to true, if then read data from cms data file.
       const data = await getCMSDataFromFile(CS_ENTRIES.LEGACY_CMS);
 
@@ -85,6 +88,7 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
       //Check for null
       if (!data) {
         updateMigrationData({ legacyCMSData: DEFAULT_LEGACY_CMS_DATA });
+        setIsLoading(false);
         return;
       }
 
@@ -169,6 +173,8 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
         }
       });
 
+      setIsLoading(false);
+
       //Check for migration Status and lock.
       // Status where Migration is to be Locked:
       setIsMigrationLocked(
@@ -183,7 +189,7 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
   useEffect(() => {
     setStepperKey('legacy-Vertical-stepper');
     setisValidated(newMigrationData?.legacy_cms?.uploadedFile?.isValidated || false);
-  }, []);
+  }, [isLoading]);
 
   useEffect(() => {
     if (autoVerticalStepper?.current) {
@@ -201,39 +207,52 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
   }, [internalActiveStepIndex]);
 
   return (
-    <div className="legacy-cms-container">
-      <div className="row">
-        <div className="col-12">
-          <AutoVerticalStepper
-            ref={autoVerticalStepper}
-            key={stepperKey}
-            steps={getLegacyCMSSteps(
-              isCompleted,
-              isMigrationLocked,
-              migrationData.legacyCMSData.all_steps
-            )}
-            isEdit={!isMigrationLocked}
-            handleOnAllStepsComplete={handleOnAllStepsComplete}
-            stepComponentProps={{
-              handleDeleteFile: handleOnClickDeleteUploadedFile
-            }}
-          />
-        </div>
-        {isCompleted && !isMigrationLocked ? (
-          <div className="col-12">
-            <div className="pl-40">
-              <Button version="v2"
-               disabled={! newMigrationData?.legacy_cms?.uploadedFile?.isValidated} 
-               onClick={handleOnClick}>
-                {migrationData?.legacyCMSData?.cta}
-              </Button>
+    <>
+      {isLoading 
+        ? (
+          <div className="row">
+            <div className="col-12 text-center center-align">
+              <CircularLoader />
             </div>
           </div>
-        ) : (
-          <></>
-        )}
-      </div>
-    </div>
+        ) 
+        : (
+          <div className="legacy-cms-container">
+            <div className="row">
+              <div className="col-12">
+                <AutoVerticalStepper
+                  ref={autoVerticalStepper}
+                  key={stepperKey}
+                  steps={getLegacyCMSSteps(
+                    isCompleted,
+                    isMigrationLocked,
+                    migrationData.legacyCMSData.all_steps
+                  )}
+                  isEdit={!isMigrationLocked}
+                  handleOnAllStepsComplete={handleOnAllStepsComplete}
+                  stepComponentProps={{
+                    handleDeleteFile: handleOnClickDeleteUploadedFile
+                  }}
+                />
+              </div>
+              {isCompleted && !isMigrationLocked ? (
+                <div className="col-12">
+                  <div className="pl-40">
+                    <Button version="v2"
+                    disabled={! newMigrationData?.legacy_cms?.uploadedFile?.isValidated} 
+                    onClick={handleOnClick}>
+                      {migrationData?.legacyCMSData?.cta}
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <></>
+              )}
+            </div>
+          </div>
+        )
+      }
+    </>
   );
 };
 
diff --git a/ui/src/pages/Home/index.tsx b/ui/src/pages/Home/index.tsx
index fb91a105d..a0897b2cf 100644
--- a/ui/src/pages/Home/index.tsx
+++ b/ui/src/pages/Home/index.tsx
@@ -33,17 +33,15 @@ const Home = () => {
   const { cta, description, heading } = data;
 
   return (
-    <div className="container">
-      <div className="d-flex vh-100 align-items-center justify-content-center flex-column">
-        {heading && <Heading tagName="h0" text={heading} className="pb-2" />}
-        {description && <p className="pb-5">{parse(description)}</p>}
-
-        {cta && cta?.title && (
-          <Link to={cta?.url as string} className="btn primary-btn">
-            <Button version="v2">{cta?.title}</Button>
-          </Link>
-        )}
-      </div>
+    <div className="d-flex vh-100 align-items-center justify-content-center flex-column">
+      {heading && <Heading tagName="h0" text={heading} className="pb-2" />}
+      {description && <p className="pb-4">{parse(description)}</p>}
+
+      {cta && cta?.title && (
+        <Link to={cta?.url as string} className="btn primary-btn pb-0">
+          <Button version="v2">{cta?.title}</Button>
+        </Link>
+      )}
     </div>
   );
 };
diff --git a/ui/src/pages/Login/index.tsx b/ui/src/pages/Login/index.tsx
index ea9ead7a5..dd8abd536 100644
--- a/ui/src/pages/Login/index.tsx
+++ b/ui/src/pages/Login/index.tsx
@@ -9,12 +9,13 @@ import {
   Heading,
   ValidationMessage,
   Paragraph,
-  Link
+  Link,
+  Notification
 } from '@contentstack/venus-components';
 import { Field as FinalField, Form as FinalForm } from 'react-final-form';
 
 // Utilities
-import { LOGIN_SUCCESSFUL_MESSAGE, TFA_MESSAGE, CS_ENTRIES } from '../../utilities/constants';
+import { LOGIN_SUCCESSFUL_MESSAGE, TFA_MESSAGE, TFA_VIA_SMS_MESSAGE, CS_ENTRIES } from '../../utilities/constants';
 import {
   failtureNotification,
   clearMarks,
@@ -85,7 +86,7 @@ const Login: FC<IProps> = (props: any) => {
   }, []);
 
   // ************* send SMS token ************
-  const sendSMS = async (): Promise<void> => {
+  const sendSMS = async () => {
     const userAuth = {
       user: {
         email: loginStates?.user?.email,
@@ -94,14 +95,25 @@ const Login: FC<IProps> = (props: any) => {
       }
     };
 
-    requestSMSToken(userAuth?.user)
-      .then((res: UserRes) => {
-        if (res?.message === LOGIN_SUCCESSFUL_MESSAGE) {
-          setLoginStates((prev) => ({ ...prev, submitted: true }));
-        }
-      })
-      .catch((err: string) => console.error(err));
-  };
+    await requestSMSToken(userAuth?.user)
+    .then((res: UserRes) => {
+      if (res?.status === 200 && res?.data?.notice === TFA_VIA_SMS_MESSAGE) {
+        Notification({
+          notificationContent: { text: res?.data?.notice },
+          type: 'success'
+        });
+      }
+      
+      if (res?.message === LOGIN_SUCCESSFUL_MESSAGE) {
+        setLoginStates((prev) => ({ ...prev, submitted: true }));
+      }
+
+      if (res?.status === 422) {
+        failtureNotification(res?.data?.error_message as string);
+      }
+    })
+    .catch((err: string) => console.error(err)); 
+ };
 
   // ************* Login submit ************
   const onSubmit = async (values: User) => {
diff --git a/ui/src/pages/Login/login.interface.ts b/ui/src/pages/Login/login.interface.ts
index ed2f2bfda..42e6b2408 100644
--- a/ui/src/pages/Login/login.interface.ts
+++ b/ui/src/pages/Login/login.interface.ts
@@ -78,6 +78,13 @@ export interface User {
 
 export interface UserRes {
   message?: string;
+  status?: number;
+  data?: Response;
+}
+
+interface Response {
+  notice?: string;
+  error_message?: string;
 }
 
 export interface SmsToken {
diff --git a/ui/src/pages/RegionalLogin/index.tsx b/ui/src/pages/RegionalLogin/index.tsx
index 5703eb59e..ad41b173b 100644
--- a/ui/src/pages/RegionalLogin/index.tsx
+++ b/ui/src/pages/RegionalLogin/index.tsx
@@ -59,18 +59,17 @@ const RegionalLogin = () => {
   const { description, heading, regions } = data;
 
   return (
-    <>
-      <div className="pb-6">
-        <div className="container mx-auto text-center">
+    <div className='d-flex vh-100 align-items-center justify-content-center flex-column'>
+      <div className="container mx-auto">
+        <div className='text-center'>
           {heading && <Heading tagName="h0" text={heading} className="pb-2" />}
           {description && description != '' && (
             <div className="textStone600 pt-3">{parse(description as string)}</div>
           )}
         </div>
-      </div>
-      <div className="container">
+
         <div className="mw-1100 mx-auto">
-          <div className="row">
+          <div className="row pt-6">
             {regions &&
               validateArray(regions) &&
               regions?.map((region, index) => (
@@ -115,7 +114,9 @@ const RegionalLogin = () => {
           </div>
         </div>
       </div>
-    </>
+    
+      
+    </div>
   );
 };
 
diff --git a/ui/src/utilities/constants.ts b/ui/src/utilities/constants.ts
index c79765dee..cff090a1d 100644
--- a/ui/src/utilities/constants.ts
+++ b/ui/src/utilities/constants.ts
@@ -1,4 +1,4 @@
-export const BASE_API_URL = 'http://localhost:5000/';
+export const BASE_API_URL = process.env.REACT_APP_BASE_API_URL;
 export const assetsRelativeUrl = 'v3/assets';
 export const WEBSITE_BASE_URL = process.env.REACT_APP_WEBSITE_BASE_URL;
 export const TOKEN_KEY = 'access_token';
@@ -10,6 +10,7 @@ export const AUTH_ROUTES = `${API_VERSION}/auth`;
 
 export const LOGIN_SUCCESSFUL_MESSAGE = 'Login Successful.';
 export const TFA_MESSAGE = 'Please login using the Two-Factor verification Token';
+export const TFA_VIA_SMS_MESSAGE = 'Two-Factor Authentication Token sent via SMS.';
 
 export const API_METHOD = {
   GET: 'GET',
diff --git a/ui/src/utilities/functions.ts b/ui/src/utilities/functions.ts
index aed3e2021..7035f1e39 100644
--- a/ui/src/utilities/functions.ts
+++ b/ui/src/utilities/functions.ts
@@ -1,4 +1,5 @@
 import { Notification } from '@contentstack/venus-components';
+import { WEBSITE_BASE_URL } from './constants';
 
 export const Locales = {
   en: 'en-us',
@@ -28,17 +29,17 @@ export const validateImage = (image: any) => image && image?.url;
 export const validateLink = (link: any) => link && link?.url;
 
 export const imageWithSiteDomainUrl = (url: string) => {
-  if (process?.env?.WEBSITE_BASE_URL && url?.indexOf('https://images.contentstack.io') > -1) {
-    return url.replace('https://images.contentstack.io', process.env.WEBSITE_BASE_URL);
+  if (WEBSITE_BASE_URL && url?.indexOf('https://images.contentstack.io') > -1) {
+    return url.replace('https://images.contentstack.io', WEBSITE_BASE_URL);
   }
-  if (process?.env?.WEBSITE_BASE_URL && url?.indexOf('https://assets.contentstack.io/') > -1) {
-    return url.replace('https://assets.contentstack.io', process.env.WEBSITE_BASE_URL);
+  if (WEBSITE_BASE_URL && url?.indexOf('https://assets.contentstack.io/') > -1) {
+    return url.replace('https://assets.contentstack.io', WEBSITE_BASE_URL);
   }
   return url;
 };
 
 export const addDomainInPath = (path: string) => {
-  return `${process.env.REACT_APP_WEBSITE_BASE_URL}${path}`;
+  return `${WEBSITE_BASE_URL}${path}`;
 };
 
 export const failtureNotification = (errorMessage: string) => {