diff --git a/api/.DS_Store b/api/.DS_Store
deleted file mode 100644
index 43f2c405..00000000
Binary files a/api/.DS_Store and /dev/null differ
diff --git a/api/src/config/dev.config.ts b/api/src/config/dev.config.ts
index cdd2363d..64c42480 100644
--- a/api/src/config/dev.config.ts
+++ b/api/src/config/dev.config.ts
@@ -3,12 +3,14 @@ export const devConfig = {
     NA: "https://stag-api.csnonprod.com/v3",
     EU: "https://stag-eu-api.csnonprod.com/v3",
     AZURE_NA: "https://stag-azure-na-api.csnonprod.com/v3",
+    GCP_NA: "https://stag-gcp-na-api.csnonprod.com/v3",
   },
   CS_URL: {
     NA: "https://app.contentstack.com/#!",
     EU: "https://eu-app.contentstack.com/#!",
     AZURE_NA: "https://azure-na-app.contentstack.com/#!",
     AZURE_EU: "https://azure-eu-app.contentstack.com/#!",
+    GCP_NA: "https://gcp-na-app.contentstack.com/#!",
   },
   LOG_FILE_PATH:
     process.platform === "win32" ? ".\\combine.log" : "./combine.log", // Replace with the actual path to your log file
diff --git a/api/src/config/index.ts b/api/src/config/index.ts
index 11f43c75..12b3e538 100644
--- a/api/src/config/index.ts
+++ b/api/src/config/index.ts
@@ -25,12 +25,14 @@ export type ConfigType = {
     EU: string;
     AZURE_NA: string;
     AZURE_EU?: string;
+    GCP_NA?: string;
   };
   CS_URL: {
     NA: string;
     EU: string;
     AZURE_NA: string;
     AZURE_EU?: string;
+    GCP_NA?: string;
   };
 };
 
diff --git a/api/src/config/prod.config.ts b/api/src/config/prod.config.ts
index 7a49fdbd..a873b12a 100644
--- a/api/src/config/prod.config.ts
+++ b/api/src/config/prod.config.ts
@@ -4,12 +4,14 @@ export const prodConfig = {
     EU: "https://eu-api.contentstack.com/v3",
     AZURE_NA: "https://azure-na-api.contentstack.com/v3",
     AZURE_EU: "https://azure-eu-api.contentstack.com/v3",
+    GCP_NA: "https://gcp-na-api.contentstack.com/v3",
   },
   CS_URL: {
     NA: "https://app.contentstack.com/#!",
     EU: "https://eu-app.contentstack.com/#!",
     AZURE_NA: "https://azure-na-app.contentstack.com/#!",
     AZURE_EU: "https://azure-eu-app.contentstack.com/#!",
+    GCP_NA: "https://gcp-na-app.contentstack.com/#!",
   },
   LOG_FILE_PATH:
     process.platform === "win32" ? ".\\combine.log" : "./combine.log", // Replace with the actual path to your log file
diff --git a/api/src/constants/index.ts b/api/src/constants/index.ts
index 19e712e4..b99b19b9 100644
--- a/api/src/constants/index.ts
+++ b/api/src/constants/index.ts
@@ -1,4 +1,4 @@
-export const CS_REGIONS = ["NA", "EU", "AZURE_NA", "AZURE_EU"];
+export const CS_REGIONS = ["NA", "EU", "AZURE_NA", "AZURE_EU", "GCP_NA"];
 export const MODULES = [
   "Project",
   "Migration",
diff --git a/api/src/validators/index.ts b/api/src/validators/index.ts
index f0b862fb..c63f1a39 100644
--- a/api/src/validators/index.ts
+++ b/api/src/validators/index.ts
@@ -27,7 +27,7 @@ export default (route: string = "") =>
       affix: affixValidator,
       affix_confirmation_validator: affixConfirmationValidator,
       fileformat_confirmation_validator: fileformatConfirmationValidator,
-      stack: stackValidator
+      stack: stackValidator,
     };
 
     const validator = appValidators[route as keyof typeof appValidators];
diff --git a/api/src/validators/project.validator.ts b/api/src/validators/project.validator.ts
index 2df47ac1..33da05d7 100644
--- a/api/src/validators/project.validator.ts
+++ b/api/src/validators/project.validator.ts
@@ -6,6 +6,7 @@ import { VALIDATION_ERRORS } from "../constants/index.js";
  *
  * @returns {Object} The validation schema for the project data.
  */
+
 export default checkSchema({
   name: {
     in: "body",
diff --git a/api/src/validators/stack.validator.ts b/api/src/validators/stack.validator.ts
index 9938217b..c993c656 100644
--- a/api/src/validators/stack.validator.ts
+++ b/api/src/validators/stack.validator.ts
@@ -37,10 +37,10 @@ export default checkSchema({
     isLength: {
       errorMessage: VALIDATION_ERRORS.LENGTH_LIMIT.replace("$", "Description"),
       options: {
-        min: 1,
+        min: 0,
         max: 512,
       },
       bail: true,
     },
   },
-});
\ No newline at end of file
+});
diff --git a/ui/src/cmsData/add_stack.json b/ui/src/cmsData/add_stack.json
index 1c0c0206..77daf4fc 100644
--- a/ui/src/cmsData/add_stack.json
+++ b/ui/src/cmsData/add_stack.json
@@ -9,7 +9,7 @@
   "secondary_cta": { "title": "Cancel" },
   "stack_description": "Description",
   "stack_description_placeholder": "Enter a description",
-  "stack_locale_description": "Select a Language",
+  "stack_locale_description": "Select a language",
   "stack_locales": "Set Master Language",
   "stack_name": "Name",
   "stack_name_placeholder": "Enter stack Name",
diff --git a/ui/src/cmsData/region_login.json b/ui/src/cmsData/region_login.json
index 1d0ecbd4..6b1d5ce1 100644
--- a/ui/src/cmsData/region_login.json
+++ b/ui/src/cmsData/region_login.json
@@ -2,7 +2,7 @@
   "title": "Account Login",
   "url": "/region-login",
   "heading": "Account Login",
-  "description": "Please select Contentstack <strong>North America (AWS or Azure)</strong> or Contentstack <strong>Europe (AWS or Azure)</strong> to continue.",
+  "description": "Please select Contentstack <strong>North America (AWS, Azure or GCP)</strong> or Contentstack <strong>Europe (AWS or Azure)</strong> to continue.",
   "regions": [
     {
       "service_icon": {
@@ -50,6 +50,34 @@
       "cta": { "title": "Continue", "url": "/login" },
       "_metadata": { "uid": "cs77a3bf15c456afbb" }
     },
+    {
+      "service_icon": {
+          "uid": "blt57dafa9c1472b46f",
+          "created_at": "2024-07-29T10:57:59.058Z",
+          "updated_at": "2024-07-29T10:57:59.058Z",
+          "created_by": "blt181afddb6080e3df",
+          "updated_by": "blt181afddb6080e3df",
+          "content_type": "image/svg+xml",
+          "file_size": "1622",
+          "tags": [],
+          "filename": "google-cloud_1.svg",
+          "url": "https://images.contentstack.io/v3/assets/bltd3620ec6418ad3ad/blt57dafa9c1472b46f/66a775b7d14106640a554ec7/google-cloud_1.svg",
+          "ACL": [],
+          "is_dir": false,
+          "parent_uid": null,
+          "_version": 1,
+          "title": "google-cloud_1.svg"
+      },
+      "service_title": "Google Cloud Platform",
+      "region_title": "North America",
+      "cta": {
+          "title": "Continue",
+          "url": "/login"
+      },
+      "_metadata": {
+          "uid": "cs14bce3c329a87986"
+      }
+    },
     {
       "service_icon": {
         "uid": "bltbe45879eac0025d8",
diff --git a/ui/src/components/AdvancePropertise/advanceProperties.interface.ts b/ui/src/components/AdvancePropertise/advanceProperties.interface.ts
index 3c5be031..0e5a15db 100644
--- a/ui/src/components/AdvancePropertise/advanceProperties.interface.ts
+++ b/ui/src/components/AdvancePropertise/advanceProperties.interface.ts
@@ -149,20 +149,82 @@ export interface Props {
   handleToggle?: (field: string, value: boolean, checkBoxChanged: boolean) => void;
 }
 
+/**
+ * Represents the state type for advanced properties.
+ */
 export interface StateType {
+  /**
+   * The minimum number of characters allowed.
+   */
   minChars?: string;
+
+  /**
+   * The maximum number of characters allowed.
+   */
   maxChars?: number;
+
+  /**
+   * The minimum range allowed.
+   */
   minRange?: number;
+
+  /**
+   * The maximum range allowed.
+   */
   maxRange?: number;
+
+  /**
+   * The minimum size allowed.
+   */
   minSize?: string;
+
+  /**
+   * The maximum size allowed.
+   */
   maxSize?: number;
+
+  /**
+   * The default value.
+   */
   defaultValue?: string;
+
+  /**
+   * The validation regular expression.
+   */
   validationRegex?: string;
+
+  /**
+   * The title.
+   */
   title?: string;
+
+  /**
+   * The URL.
+   */
   url?: string;
+
+  /**
+   * Indicates if the field is mandatory.
+   */
   mandatory?: boolean;
+
+  /**
+   * Indicates if only images are allowed.
+   */
   allowImagesOnly?: boolean;
+
+  /**
+   * Indicates if the field is non-localizable.
+   */
   nonLocalizable?: boolean;
+
+  /**
+   * Indicates if the object should be embedded.
+   */
   embedObject?: boolean;
+
+  /**
+   * Indicates if the assets should be embedded.
+   */
   embedAssests?: boolean;
 }
\ No newline at end of file
diff --git a/ui/src/components/Common/ProgressBar/index.tsx b/ui/src/components/Common/ProgressBar/index.tsx
index f15ae7d4..47ecd2e1 100644
--- a/ui/src/components/Common/ProgressBar/index.tsx
+++ b/ui/src/components/Common/ProgressBar/index.tsx
@@ -2,28 +2,56 @@ import React from 'react'
 import './progressBar.scss'
 import cn from 'classnames'
 
-
+/**
+ * Props for the ProgressBar component.
+ */
 type ProgressBarProps = {
+  /**
+   * The percentage value for the progress.
+   */
   percentage: number
+  /**
+   * The color of the progress bar.
+   */
   color?: string
   /**
-   * Height of the Progress bar in pixel
+   * The height of the progress bar in pixels.
    */
   height?: number
   /**
-   * Border radius in pixel
+   * The border radius of the progress bar in pixels.
    */
   borderRadius?: number
+  /**
+   * The type of progress bar. Can be 'bar' or 'circle'.
+   */
   type?: 'bar' | 'circle',
+  /**
+   * The stroke width of the circle progress bar.
+   */
   stroke?: number
+  /**
+   * The radius of the circle progress bar.
+   */
   radius?: number | undefined
+  /**
+   * The background color of the circle progress bar.
+   */
   bgColor?: string
 }
 
+/**
+ * Interface for defining CSS styles.
+ */
 type IStyle = {
   [key: string]: string
 }
 
+/**
+ * A customizable progress bar component.
+ * @param props - The props for the ProgressBar component.
+ * @returns The rendered ProgressBar component.
+ */
 const ProgressBar = (props: ProgressBarProps) => {
   const { percentage, color, height, borderRadius, type, radius, stroke, bgColor } = props
 
diff --git a/ui/src/components/Common/SaveChangesModal/index.tsx b/ui/src/components/Common/SaveChangesModal/index.tsx
index 42207bde..e0b76001 100644
--- a/ui/src/components/Common/SaveChangesModal/index.tsx
+++ b/ui/src/components/Common/SaveChangesModal/index.tsx
@@ -14,6 +14,7 @@ interface Props {
   saveContentType: () => void;
   openContentType?: () => void;
   changeStep?: () => void;
+  dropdownStateChange: () => void;
 }
 
 const SaveChangesModal = (props: Props) => {
@@ -37,6 +38,7 @@ const SaveChangesModal = (props: Props) => {
           </Button>
           <Button buttonType="secondary"version={"v2"}  onClick={() => {
             props.closeModal(); 
+            props?.dropdownStateChange();
             props.openContentType?.();
             props.isopen(false);
             props?.changeStep?.();
@@ -45,6 +47,7 @@ const SaveChangesModal = (props: Props) => {
             Don&apos;t Save
           </Button>
           <Button version={"v2"} onClick={() => { 
+            props?.dropdownStateChange();
             props.saveContentType(); 
             props.closeModal(); 
             props.openContentType?.();
diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
index d3a3f774..2030ef4b 100644
--- a/ui/src/components/ContentMapper/index.tsx
+++ b/ui/src/components/ContentMapper/index.tsx
@@ -63,6 +63,7 @@ import SaveChangesModal from '../Common/SaveChangesModal';
 import './index.scss';
 import { MigrationResponse } from '../../services/api/service.interface';
 import { schemaType } from '../SchemaModal/schemaModal.interface';
+import useBlockNavigation from '../../hooks/userNavigation';
 const dummy_obj:any = {
   'single_line_text':{
     label : 'Single Line Textbox',
@@ -294,9 +295,8 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
       .catch((err) => {
         console.error(err);
       });
-
-    fetchExistingContentTypes();
     stackStatus();
+    fetchExistingContentTypes();
   }, []);
 
   // Make title and url field non editable
@@ -357,7 +357,6 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
       ...newMigrationData,
       content_mapping: {
         ...newMigrationData?.content_mapping,
-        // content_type_mapping: contentTypeMapped,
         isDropDownChanged: isDropDownChanged,
         otherCmsTitle: otherCmsTitle,
       }
@@ -366,25 +365,8 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
     dispatch(updateNewMigrationData((newMigrationDataObj)));
   }, [isDropDownChanged]);
 
-  useEffect(()=>{ 
-    const handlePopState = (event: PopStateEvent) => {
-      event.preventDefault();
-      window.history.pushState(null, '', window.location.href);
-      handleOpenContentType();
-      
-    };
-
-    if(isModalOpen || isDropDownChanged){
-      window.history.pushState(null, '', window.location.href);
-    }
-    window.history.pushState(null, '', window.location.href);
-    window.addEventListener('popstate',handlePopState);
-    return () => {
-      window.removeEventListener('popstate', handlePopState);
-    };
-
-  },[isModalOpen]);
 
+  useBlockNavigation(isModalOpen);
   // Method to fetch content types
   const fetchContentTypes = async (searchText: string) => {
     const { data } = await getContentTypes(projectId || '', 0, 5000, searchContentType || ''); //org id will always present
@@ -403,8 +385,8 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
   // Get the stack status if it is empty or not
   const stackStatus = async () => {
     const contentTypeCount = await getStackStatus(
-      projectData?.org_id,
-      projectData?.destination_stack_id
+      projectData?.org_id || selectedOrganisation?.value,
+      projectData?.destination_stack_id || newMigrationData?.destination_stack?.selectedStack?.value
     );
 
     if (contentTypeCount?.data?.contenttype_count > 0) {
@@ -494,10 +476,9 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
   };
 
   // Method to change the content type
-  const handleOpenContentType = async (i = 0) => {
+  const handleOpenContentType = (i = 0) => {
     if (isDropDownChanged) {
       setIsModalOpen(true);
-      handleDropdownState();
       return cbModal({
         component: (props: ModalObj) => (
           <SaveChangesModal
@@ -506,6 +487,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
             otherCmsTitle={otherCmsTitle}
             saveContentType={handleSaveContentType}
             openContentType={() => openContentType(i)}
+            dropdownStateChange={handleDropdownState}
           />
         ),
         modalProps: {
@@ -519,8 +501,6 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
   };
 
   const openContentType = (i: number) => {
-    // setIsModalOpen(false);
-
     setActive(i);
     const otherTitle = contentTypes?.[i]?.otherCmsTitle;
     setOtherCmsTitle(otherTitle);
@@ -674,7 +654,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
       }));
 
       if (option?.length === 1 && option?.[0]?.label === initialOption?.label) {
-        option = [{ label: "No option available", value: "No option available" }];
+        option = [];
       }
       
     } else {
@@ -936,6 +916,11 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
   const SelectAccessorOfColumn = (data: FieldMapType) => {
     // Fetch options for the current row from dummy_obj based on backupFieldType( empty stack options)
     const OptionsForEachRow = dummy_obj?.[data?.backupFieldType]?.options;
+
+    const initialOption = {
+      label: dummy_obj?.[data?.ContentstackFieldType]?.label,
+      value: dummy_obj?.[data?.ContentstackFieldType]?.label,
+    };
   
     const fieldsOfContentstack: Mapping = {
       'Single Line Textbox': 'text',
@@ -1017,13 +1002,17 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
         label,
         value,
       }));
+
+      if (option?.length === 1 && option?.[0]?.label === initialOption?.label) {
+        option = [];
+      }
     } else {
       option = [{ label: OptionsForEachRow, value: OptionsForEachRow }];
     }
     
     const OptionValue: any =
       OptionsForRow.length === 1 &&
-      (OptionsForRow[0]?.value?.uid === 'url' || OptionsForRow[0]?.value?.uid === 'title' || OptionsForRow[0]?.value?.data_type === 'group')
+      (OptionsForRow[0]?.value?.uid === 'url' || OptionsForRow[0]?.value?.uid === 'title' || OptionsForRow[0]?.value?.data_type === 'group' || OptionsForRow[0]?.value?.data_type === 'reference')
         ? {
           label: OptionsForRow[0]?.value?.display_name,
           value: OptionsForRow[0]?.value,
@@ -1036,9 +1025,17 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
             value: dummy_obj[data?.ContentstackFieldType]?.label,
             isDisabled: data?.ContentstackFieldType === 'text' ||
               data?.ContentstackFieldType === 'group' ||
-              data?.ContentstackFieldType === 'url'
+              data?.ContentstackFieldType === 'url' ||
+              data?.otherCmsType === "reference"
           }
-          : {
+          : OptionsForRow.length === 1 &&
+          (OptionsForRow[0]?.value?.uid !== 'url' || OptionsForRow[0]?.value?.uid !== 'title' || OptionsForRow[0]?.value?.data_type !== 'group' || OptionsForRow[0]?.value?.data_type !== 'reference')
+            ? {
+              label: OptionsForRow[0]?.label,
+              value: OptionsForRow[0]?.value,
+              isDisabled: false
+            }
+            : {
             label: `${selectedOption} matches`,
             value: `${selectedOption} matches`,
             isDisabled: false
@@ -1051,7 +1048,6 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
         isDisabled: selectedOptions.includes(option?.label ?? '')
       }));
   
-  
     return (
       <div className="table-row">
         <div className="select">
@@ -1088,8 +1084,6 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
   
 
   const handleSaveContentType = async () => {
-    // setIsModalOpen(false);
-    
     const orgId = selectedOrganisation?.uid;
     const projectID = projectId;
 
@@ -1099,15 +1093,17 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
       selectedContentType?.otherCmsUid &&
       OtherContentType?.label
     ) {
-      setcontentTypeMapped((prevSelected) => ({
-        ...prevSelected,
+      const updatedValue = {
         [otherCmsTitle]: OtherContentType?.label
-      }));
+      }
+      
+      setcontentTypeMapped(updatedValue);
 
       const newMigrationDataObj: INewMigration = {
         ...newMigrationData,
         content_mapping: {
-          content_type_mapping: contentTypeMapped
+          ...newMigrationData?.content_mapping,
+          content_type_mapping: updatedValue
         }
       };
 
diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
index b3d62546..19032ace 100644
--- a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
+++ b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
@@ -59,6 +59,7 @@ const LoadStacks = (props: LoadFileFormatProps) => {
   const [isError, setIsError] = useState<boolean>(false);
   const [errorMessage, setErrorMessage] = useState<string>('');
   const { projectId = '' }: Params<string> = useParams();
+  const [placeholder, setPlaceholder] = useState<string>('Select a stack');
   // console.log("......newMigrationData",newMigrationData)
   const newMigrationDataRef = useRef(newMigrationData);
 
@@ -75,12 +76,13 @@ const LoadStacks = (props: LoadFileFormatProps) => {
   const handleOnSave = async (data: Stack) => {
     if (isSaving) return false;
     setIsSaving(true);
-
+  
     if (isEmptyString(data?.name) || isEmptyString(data?.locale)) {
       setIsSaving(false);
       return false;
     }
-    //Post data to backend
+  
+    // Post data to backend
     const resp = await createStacksInOrg(selectedOrganisation?.value, {
       ...data,
       master_locale: data?.locale
@@ -88,10 +90,10 @@ const LoadStacks = (props: LoadFileFormatProps) => {
     setIsSaving(false);
     
     if (resp.status === 201) {
-      if ( newMigrationData?.destination_stack?.stackArray?.length > 0 ) {
-        //fetch all Stacks
+      if (newMigrationData?.destination_stack?.stackArray?.length > 0) {
         await fetchData();  
       }
+  
       const newCreatedStack: IDropDown = {
         label: resp?.data?.stack?.name,
         value: resp?.data?.stack?.api_key,
@@ -100,43 +102,54 @@ const LoadStacks = (props: LoadFileFormatProps) => {
         created_at: resp?.data?.stack?.created_at,
         uid: resp?.data?.stack?.api_key
       };
-
-      setSelectedStack(newCreatedStack);      
-      setAllStack((prevState) => [...prevState, newCreatedStack]);
+  
+      setSelectedStack(newCreatedStack);
+      
+      const updatedStackArray = [newCreatedStack, ...allStack];
+      updatedStackArray.sort(
+        (a: IDropDown, b: IDropDown) =>
+          new Date(b?.created_at)?.getTime() - new Date(a?.created_at)?.getTime()
+      );
+      
+      setAllStack(updatedStackArray);
+  
       const newMigrationDataObj: INewMigration = {
         ...newMigrationData,
         destination_stack: {
           ...newMigrationData.destination_stack,
           selectedStack: newCreatedStack,
-          stackArray: allStack
+          stackArray: updatedStackArray
         }
       };
-
-      dispatch(updateNewMigrationData((newMigrationDataObj)));
-
-      //API call for saving selected CMS
+  
+      // console.log("Updating newMigrationData:", newMigrationDataObj);
+      dispatch(updateNewMigrationData(newMigrationDataObj));
+  
+      // API call for saving selected CMS
       if (resp?.data?.stack?.api_key) {
         updateDestinationStack(selectedOrganisation?.value, projectId, {
           stack_api_key: resp?.data?.stack?.api_key
         });
       }
-      //call for Step Change
-
+  
+      // call for Step Change
       props.handleStepChange(props?.currentStep, true);
       
       return true;
     }
     return false;
   };
+  
   /****  ALL METHODS HERE  ****/
 
   //Handle Legacy cms selection
   const handleDropdownChange = (name: string) => (data: IDropDown) => {
-    const stackCleared = data?.value === '' || data?.value === null || data === null;  
+    const stackCleared = data?.value === '' || data?.value === null || data === null || data === undefined;
     if (stackCleared === true) {
       setIsError(true);
       setErrorMessage("Please select a stack");
-    }
+      setPlaceholder('Please select a stack');
+    } 
         
     if (name === 'stacks' && data?.value != '+ Create a new Stack') {
       setSelectedStack(() => ({ ...data }));
@@ -144,11 +157,11 @@ const LoadStacks = (props: LoadFileFormatProps) => {
         ...newMigrationData,
         destination_stack: {
           ...newMigrationData?.destination_stack,
-          selectedStack: stackCleared ? DEFAULT_DROPDOWN : { ...data }
+          selectedStack: { ...data }
         }
       };
       
-      dispatch(updateNewMigrationData((newMigrationDataObj)));
+      dispatch(updateNewMigrationData(newMigrationDataObj));
       if (!stackCleared) {
         setIsError(false)
         if (props?.handleStepChange) {
@@ -252,19 +265,21 @@ const LoadStacks = (props: LoadFileFormatProps) => {
               <div className="Dropdown-wrapper p-0 active ">
                 <Select
                   className="stackselect"
-                  version={'v2'}
+                  value={selectedStack}
                   options={allStack}
                   onChange={handleDropdownChange('stacks')}
-                  value={selectedStack}
                   isSearchable={true}
+                  // placeholder='Select a stack'
+                  placeholder={placeholder}
+
                   isClearable={newMigrationData?.destination_stack?.stackArray?.length > 0 && !emptyStackValue ? true : false }
                   // hideSelectedOptions={true}
                   isDisabled={props?.stepComponentProps?.isSummary || false}
-                  placeholder={'Select a stack'}
                   error={isLoading ? false : isError ? true : false }
                   width="600px"
                   hasAddOption={true}
                   // menuIsOpen
+                  version='v2'
                   addOptionText={
                   <div className='createStack' onClick={handleCreateNewStack}>
                     + Create a new Stack
@@ -295,4 +310,4 @@ const LoadStacks = (props: LoadFileFormatProps) => {
   );
 };
 
-export default LoadStacks;
+export default LoadStacks;
\ No newline at end of file
diff --git a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
index 78b6091d..f6b7356d 100644
--- a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
@@ -75,8 +75,10 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
   };
 
   const getFileExtension = (filePath: string): string => {
-    const ext = filePath.split('.').pop();
-    return ext ? `${ext}` : 'zip';
+    const fileName = filePath?.split('/')?.pop();
+    const ext = fileName?.split('.')?.pop();
+    const validExtensionRegex = /\.(pdf|zip|xml|json)$/i;
+    return ext && validExtensionRegex?.test(`.${ext}`) ? `${ext}` : 'zip';
   };
 
   const handleFileFormat = async() =>{
diff --git a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
index 3c9ea52d..d920cdd7 100644
--- a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
@@ -187,7 +187,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
           selectedCms: newSelectedCard
         }
       };
-      await updateLegacyCMSData(selectedOrganisation.value, projectId, { legacy_cms: newSelectedCard?.cms_id });
+      //await updateLegacyCMSData(selectedOrganisation.value, projectId, { legacy_cms: newSelectedCard?.cms_id });
       dispatch(updateNewMigrationData(newMigrationDataObj));
       props?.handleStepChange(props?.currentStep);
     }
diff --git a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
index be2521a3..d0360bc3 100644
--- a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
@@ -193,8 +193,10 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
   };
 
   const getFileExtension = (filePath: string): string => {
-    const ext = filePath.split('.').pop();
-    return ext ? `${ext}` : '';
+    const fileName = filePath?.split('/')?.pop();
+    const ext = fileName?.split('.')?.pop();
+    const validExtensionRegex = /\.(pdf|zip|xml|json)$/i;
+    return ext && validExtensionRegex?.test(`.${ext}`) ? `${ext}` : 'zip';
   };
 
   //function to get config details
diff --git a/ui/src/components/LegacyCms/index.tsx b/ui/src/components/LegacyCms/index.tsx
index c2149009..d71d8377 100644
--- a/ui/src/components/LegacyCms/index.tsx
+++ b/ui/src/components/LegacyCms/index.tsx
@@ -183,7 +183,7 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted
               awsData: legacyCMSData?.awsDetails,
               isLocalPath: legacyCMSData?.is_localPath
             },
-            isValidated: legacyCMSData?.is_fileValid || newMigrationData?.legacy_cms?.uploadedFile?.isValidated,
+            isValidated: legacyCMSData?.is_fileValid ,
           }, //need to add backend data once endpoint exposed.
           affix: legacyCMSData?.affix || '',
           isFileFormatCheckboxChecked: true, //need to add backend data once endpoint exposed.
diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx
index 71efbf71..61987708 100644
--- a/ui/src/components/MainHeader/index.tsx
+++ b/ui/src/components/MainHeader/index.tsx
@@ -32,6 +32,7 @@ import NotificationModal from '../Common/NotificationModal';
 
 // Styles
 import './index.scss';
+import useBlockNavigation from '../../hooks/userNavigation';
 
 const MainHeader = () => {
   const user = useSelector((state:RootState)=>state?.authentication?.user);
@@ -95,26 +96,28 @@ const MainHeader = () => {
     setDataInLocalStorage('organization', data?.value);
   };
 
-  useEffect(()=>{ 
-    const handlePopState = (event: PopStateEvent) => {
-      event.preventDefault();
-      window.history.pushState(null, '', window.location.href);
-      handleonClick();
+  // useEffect(()=>{ 
+  //   const handlePopState = (event: PopStateEvent) => {
+  //     event.preventDefault();
+  //     window.history.pushState(null, '', window.location.href);
+  //     handleonClick();
       
-    };
-    if(isModalOpen){
-      window.history.pushState(null, '', window.location.href);
-
-    }
-    window.history.pushState(null, '', window.location.href);
-    window.addEventListener('popstate',handlePopState);
- 
-
-    return () => {
-      window.removeEventListener('popstate', handlePopState);
-    };
-
-  },[isModalOpen,newMigrationData]);
+  //   };
+  //   if(isModalOpen){
+  //     window.history.pushState(null, '', window.location.href);
+
+  //   }
+  //   window.history.pushState(null, '', window.location.href);
+  //   window.addEventListener('popstate',handlePopState);
+  //   console.log("href ::::::", window.location.href);
+    
+
+  //   return () => {
+  //     window.removeEventListener('popstate', handlePopState);
+  //   };
+
+  // },[isModalOpen,newMigrationData]);
+    useBlockNavigation(isModalOpen);
 
 
   const handleonClick = async () => { 
diff --git a/ui/src/components/Modal/index.tsx b/ui/src/components/Modal/index.tsx
index 3ec3cc86..5144e6f8 100644
--- a/ui/src/components/Modal/index.tsx
+++ b/ui/src/components/Modal/index.tsx
@@ -34,7 +34,8 @@ const Modal = (props: ProjectModalProps) => {
       secondary_cta: secondaryCta,
       title
     },
-    selectedOrg
+    selectedOrg,
+    isOpen
   } = props;
 
   const [inputValue, setInputValue] = useState<boolean>(false);
@@ -78,8 +79,11 @@ const Modal = (props: ProjectModalProps) => {
     <>
       <ModalHeader
         title={title}
-        closeModal={closeModal}
+        closeModal={()=>{
+          closeModal();
+          isOpen(false)}}
         closeIconTestId="cs-default-header-close"
+       
       />
 
       <FinalForm
@@ -190,7 +194,7 @@ const Modal = (props: ProjectModalProps) => {
                 {((primaryCta && primaryCta?.title) ?? (secondaryCta && secondaryCta?.title)) && (
                   <ButtonGroup>
                     {secondaryCta && secondaryCta?.title && (
-                      <Button buttonType={secondaryCta?.theme} onClick={() => closeModal()} size="large" className="baseColorButton">
+                      <Button buttonType={secondaryCta?.theme} onClick={() => {closeModal();isOpen(false);}} size="large" className="baseColorButton">
                         {secondaryCta?.title}
                       </Button>
                     )}
diff --git a/ui/src/components/Modal/modal.interface.ts b/ui/src/components/Modal/modal.interface.ts
index aeba5d27..113f4434 100644
--- a/ui/src/components/Modal/modal.interface.ts
+++ b/ui/src/components/Modal/modal.interface.ts
@@ -9,6 +9,7 @@ export interface ProjectModalProps {
   modalData: ModalType;
   selectedOrg: IDropDown;
   closeModal: () => void;
+  isOpen : (flag:boolean) => void;
 }
 export interface SettingsModalProps {
   selectedOrg: IDropDown;
diff --git a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
index 8698448d..901a13a9 100644
--- a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
+++ b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
@@ -8,6 +8,7 @@ import { useSelector } from 'react-redux';
 import { RootState } from '../../../store';
 import SaveChangesModal from '../../../components/Common/SaveChangesModal';
 import { ModalObj } from '../../../components/Modal/modal.interface'; 
+import useBlockNavigation from '../../../hooks/userNavigation';
 
 export enum StepStatus {
     ACTIVE = "ACTIVE",
@@ -44,6 +45,8 @@ const HorizontalStepper = forwardRef(
         const { steps, className, emptyStateMsg, stepComponentProps, hideTabView, testId } = props;
         const [showStep, setShowStep] = useState(0);
         const [stepsCompleted, setStepsCompleted] = useState<number[]>([]);
+        const [isModalOpen, setIsModalOpen] = useState(false);
+
         const { stepId } = useParams<{ stepId: any }>();
 
         const navigate = useNavigate();
@@ -52,8 +55,8 @@ const HorizontalStepper = forwardRef(
         const newMigrationData = useSelector((state:RootState)=> state?.migration?.newMigrationData);
 
         const handleSaveCT = props?.handleSaveCT
-        const handleDropdownChange = props?.changeDropdownState
-
+        const handleDropdownChange = props?.changeDropdownState;
+        useBlockNavigation(isModalOpen);
 
         useEffect(() => {
             const stepIndex = parseInt(stepId, 10) - 1;
@@ -87,12 +90,9 @@ const HorizontalStepper = forwardRef(
             }
         }));
 
-        const [isModalOpen, setIsModalOpen] = useState(false);
-
         const handleTabStep = (idx: number) => {
             if (newMigrationData?.content_mapping?.isDropDownChanged) {
                 setIsModalOpen(true);
-                handleDropdownChange();
                 return cbModal({
                     component: (props: ModalObj) => (
                     <SaveChangesModal
@@ -101,6 +101,7 @@ const HorizontalStepper = forwardRef(
                         otherCmsTitle={newMigrationData?.content_mapping?.otherCmsTitle}
                         saveContentType={handleSaveCT}
                         changeStep={() => setTabStep(idx)}
+                        dropdownStateChange={handleDropdownChange}
                     />
                     ),
                     modalProps: {
@@ -120,9 +121,7 @@ const HorizontalStepper = forwardRef(
                 navigate(url, { replace: true });
             }
         }
-
         
-
         const StepsTitleCreator: React.FC = () => (
             <div className="stepper stepper-position">
                 {steps?.map(({ id, title }, idx: number) => {
diff --git a/ui/src/hooks/userNavigation.tsx b/ui/src/hooks/userNavigation.tsx
new file mode 100644
index 00000000..58e8bfef
--- /dev/null
+++ b/ui/src/hooks/userNavigation.tsx
@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const useBlockNavigation = (isModalOpen: boolean) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const initialPathnameRef = useRef(location.pathname);
+
+  useEffect(() => {
+    const handlePopState = (event: PopStateEvent) => {
+      if (isModalOpen) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        window.history.replaceState(null, '', window.location.pathname);
+        navigate(location.pathname);
+      }
+    };
+
+    if (isModalOpen) {
+      initialPathnameRef.current = location.pathname;
+      window.history.pushState(null, '', window.location.pathname);
+      window.addEventListener('popstate', handlePopState);
+    } else {
+      window.removeEventListener('popstate', handlePopState);
+    }
+
+    return () => {
+      window.removeEventListener('popstate', handlePopState);
+    };
+  }, [isModalOpen, navigate, location.pathname]);
+
+  useEffect(() => {
+    if (!isModalOpen) {
+      initialPathnameRef.current = location.pathname;
+    }
+  }, [isModalOpen, location.pathname]);
+};
+
+export default useBlockNavigation;
diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx
index 5fd4822c..8b65bc9c 100644
--- a/ui/src/pages/Migration/index.tsx
+++ b/ui/src/pages/Migration/index.tsx
@@ -146,15 +146,14 @@ const Migration = () => {
      ]
      return steps;
   }
-  const handleClick = () => {
 
+  const handleClick = () => {
     // Call handleStepChange function
     const x : string | undefined= params.stepId 
     const currentStep : number = parseInt(x || '');  
     stepperRef?.current?.handleStepChange(currentStep-1);
   };
 
-
   const handleStepChange = (currentStep: number) => { 
     if (stepperRef?.current) {
       stepperRef.current.handleStepChange(currentStep-1);
@@ -166,146 +165,155 @@ const Migration = () => {
     setIsCompleted(flag);
   };
 
-    // handle on proceed to destination stack
-    const handleOnClickLegacyCms = async (event: MouseEvent ) => {
-      setIsLoading(true);
-      if(isCompleted){
-        event.preventDefault();
-  
-      //Update Data in backend
-      await updateLegacyCMSData(selectedOrganisation?.value, projectId, {
-        legacy_cms: newMigrationData?.legacy_cms?.selectedCms?.cms_id
-      });
-      await updateAffixData(selectedOrganisation?.value, projectId, { affix: newMigrationData?.legacy_cms?.affix });
-      await fileformatConfirmation(selectedOrganisation?.value, projectId, {
-        fileformat_confirmation: true
-      });     
-      await updateFileFormatData(selectedOrganisation?.value, projectId, {
-        file_format: newMigrationData?.legacy_cms?.selectedCms?.allowed_file_formats[0]?.fileformat_id?.toString() ,
-        file_path: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath,
-        is_fileValid: newMigrationData?.legacy_cms?.uploadedFile?.isValidated,
-        is_localPath: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.isLocalPath,
-        awsDetails:{
-          awsRegion: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.awsData?.awsRegion,
-          bucketName: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.awsData?.bucketName,
-          buketKey: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.awsData?.buketKey
-        }
-      });
-      const res = await updateCurrentStepData(selectedOrganisation.value, projectId);
-      handleStepChange(1);
-      if (res) {
-        setIsLoading(false);
-
-        const url = `/projects/${projectId}/migration/steps/2`;
-        navigate(url, { replace: true });
-      }
+  // handle on proceed to destination stack
+  const handleOnClickLegacyCms = async (event: MouseEvent ) => {
+    setIsLoading(true);
+    if(isCompleted){
+      event.preventDefault();
 
+    //Update Data in backend
+    await updateLegacyCMSData(selectedOrganisation?.value, projectId, {
+      legacy_cms: newMigrationData?.legacy_cms?.selectedCms?.cms_id
+    });
+    await updateAffixData(selectedOrganisation?.value, projectId, { affix: newMigrationData?.legacy_cms?.affix });
+    await fileformatConfirmation(selectedOrganisation?.value, projectId, {
+      fileformat_confirmation: true
+    });     
+    await updateFileFormatData(selectedOrganisation?.value, projectId, {
+      file_format: newMigrationData?.legacy_cms?.selectedCms?.allowed_file_formats[0]?.fileformat_id?.toString() ,
+      file_path: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath,
+      is_fileValid: newMigrationData?.legacy_cms?.uploadedFile?.isValidated,
+      is_localPath: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.isLocalPath,
+      awsDetails:{
+        awsRegion: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.awsData?.awsRegion,
+        bucketName: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.awsData?.bucketName,
+        buketKey: newMigrationData?.legacy_cms?.uploadedFile?.file_details?.awsData?.buketKey
       }
-      else{
-        setIsLoading(false);
+    });
+    const res = await updateCurrentStepData(selectedOrganisation.value, projectId);
+    handleStepChange(1);
+    if (res) {
+      setIsLoading(false);
 
-        if (legacyCMSRef?.current) {
-          const currentIndex = legacyCMSRef?.current?.getInternalActiveStepIndex() + 1;                
-          let result;
-          switch (currentIndex ) {
-            case 0:
-              result = 'CMS';
-              break;
-            case 1:
-              result = 'Enter Affix';
-              break;
-            case 2:
-              result = 'Imported File';
-              break;
-          }
-          if (currentIndex !== 3 || currentIndex !== 4) {
-            Notification({
-              notificationContent: { text: `Please complete ${result} step` },
-              type: 'warning'
-            });
-          }
-        }
+      const url = `/projects/${projectId}/migration/steps/2`;
+      navigate(url, { replace: true });
+    }
 
-      }
-      
-    };
+    }
+    else{
+      setIsLoading(false);
 
-    // handle on proceed to content mapping
-    const handleOnClickDestinationStack = async (event: MouseEvent) => {
-      setIsLoading(true);
-
-      if(isCompleted && !isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value)){
-        event?.preventDefault();
-        //Update Data in backend
-        await updateDestinationStack(selectedOrganisation?.value, projectId, {
-          stack_api_key: newMigrationData?.destination_stack?.selectedStack?.value
-        });
-        handleStepChange(2);
-        const res = await updateCurrentStepData(selectedOrganisation?.value, projectId);
-        if (res) {
-          setIsLoading(false);
-          const url = `/projects/${projectId}/migration/steps/3`;
-          navigate(url, { replace: true });
+      if (legacyCMSRef?.current) {
+        const currentIndex = legacyCMSRef?.current?.getInternalActiveStepIndex() + 1;                
+        let result;
+        switch (currentIndex ) {
+          case 0:
+            result = 'CMS';
+            break;
+          case 1:
+            result = 'Enter Affix';
+            break;
+          case 2:
+            result = 'Imported File';
+            break;
+        }
+        if (currentIndex !== 3 || currentIndex !== 4) {
+          Notification({
+            notificationContent: { text: `Please complete ${result} step` },
+            type: 'warning'
+          });
         }
-      } else{
-        setIsLoading(false);
-        Notification({
-          notificationContent: { text: 'Please select a stack to proceed further' },
-          type: 'warning'
-        });
       }
-    };
 
-    const handleOnClickContentMapper = async (event: MouseEvent) => {
-      setIsLoading(true);
+    }
+    
+  };
 
-      event.preventDefault();
+  // handle on proceed to content mapping
+  const handleOnClickDestinationStack = async (event: MouseEvent) => {
+    setIsLoading(true);
 
-      const data = {
-        name: newMigrationData?.destination_stack?.selectedStack?.label,
-        description: 'test migration stack',
-        master_locale: newMigrationData?.destination_stack?.selectedStack?.master_locale
-      };
-
-      const res = await createTestStack(
-        newMigrationData?.destination_stack?.selectedOrg?.value,
-        projectId,
-        data
-      );
-
-      const newMigrationDataObj: INewMigration = {
-        ...newMigrationData,
-        test_migration: { stack_link: res?.data?.data?.url, stack_api_key: res?.data?.data?.data?.stack?.api_key }
-      };
-  
-      dispatch(updateNewMigrationData((newMigrationDataObj)));
-      if (res?.status) {
+    if(isCompleted && !isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value)){
+      event?.preventDefault();
+      //Update Data in backend
+      await updateDestinationStack(selectedOrganisation?.value, projectId, {
+        stack_api_key: newMigrationData?.destination_stack?.selectedStack?.value
+      });
+      handleStepChange(2);
+      const res = await updateCurrentStepData(selectedOrganisation?.value, projectId);
+      if (res) {
         setIsLoading(false);
-
-        const url = `/projects/${projectId}/migration/steps/4`;
+        const url = `/projects/${projectId}/migration/steps/3`;
         navigate(url, { replace: true });
-
-        await updateCurrentStepData(selectedOrganisation.value, projectId);
-        handleStepChange(3);
       }
+    } else{
+      setIsLoading(false);
+      Notification({
+        notificationContent: { text: 'Please select a stack to proceed further' },
+        type: 'warning'
+      });
     }
+  };
+
+  const handleOnClickContentMapper = async (event: MouseEvent) => {
+    setIsLoading(true);
 
-    const handleOnClickTestMigration = async () => {
+    event.preventDefault();
+
+    const data = {
+      name: newMigrationData?.destination_stack?.selectedStack?.label,
+      description: 'test migration stack',
+      master_locale: newMigrationData?.destination_stack?.selectedStack?.master_locale
+    };
+
+    const res = await createTestStack(
+      newMigrationData?.destination_stack?.selectedOrg?.value,
+      projectId,
+      data
+    );
+
+    const newMigrationDataObj: INewMigration = {
+      ...newMigrationData,
+      test_migration: { stack_link: res?.data?.data?.url, stack_api_key: res?.data?.data?.data?.stack?.api_key }
+    };
+
+    dispatch(updateNewMigrationData((newMigrationDataObj)));
+    if (res?.status) {
       setIsLoading(false);
 
-      const url = `/projects/${projectId}/migration/steps/5`;
+      const url = `/projects/${projectId}/migration/steps/4`;
       navigate(url, { replace: true });
 
       await updateCurrentStepData(selectedOrganisation.value, projectId);
-      handleStepChange(4);
+      handleStepChange(3);
     }
+  }
 
-    const handleOnClickFunctions = [
-      handleOnClickLegacyCms, 
-      handleOnClickDestinationStack,
-      handleOnClickContentMapper,
-      handleOnClickTestMigration 
-    ];
+  const handleOnClickTestMigration = async () => {
+    setIsLoading(false);
+
+    const url = `/projects/${projectId}/migration/steps/5`;
+    navigate(url, { replace: true });
+
+    await updateCurrentStepData(selectedOrganisation.value, projectId);
+    handleStepChange(4);
+  }
+
+  const handleOnClickFunctions = [
+    handleOnClickLegacyCms, 
+    handleOnClickDestinationStack,
+    handleOnClickContentMapper,
+    handleOnClickTestMigration 
+  ];
+
+  const changeDropdownState = () =>{
+    const newMigrationDataObj: INewMigration = {
+      ...newMigrationData,
+      content_mapping: { ...newMigrationData?.content_mapping, isDropDownChanged: false }
+    };
+
+    dispatch(updateNewMigrationData((newMigrationDataObj)));
+  }
 
   return (
     <div className='migration-steps-wrapper'>
@@ -313,7 +321,7 @@ const Migration = () => {
 
       <div className='steps-wrapper'>
         { projectData &&
-          <HorizontalStepper ref={stepperRef} steps={createStepper(projectData, handleClick)} handleSaveCT={saveRef?.current?.handleSaveContentType} changeDropdownState={saveRef?.current?.handleDropdownState } />
+          <HorizontalStepper ref={stepperRef} steps={createStepper(projectData, handleClick)} handleSaveCT={saveRef?.current?.handleSaveContentType} changeDropdownState={changeDropdownState } />
         }     
       </div>
     </div>
diff --git a/ui/src/pages/Projects/index.tsx b/ui/src/pages/Projects/index.tsx
index bfc9f6fc..2ba3960b 100644
--- a/ui/src/pages/Projects/index.tsx
+++ b/ui/src/pages/Projects/index.tsx
@@ -34,6 +34,7 @@ import { NO_PROJECTS, NO_PROJECTS_SEARCH } from '../../common/assets';
 // styles
 import './index.scss';
 import { getUserDetails } from '../../store/slice/authSlice';
+import useBlockNavigation from '../../hooks/userNavigation';
 
 
 const Projects = () => {
@@ -60,6 +61,7 @@ const Projects = () => {
   const [allProjects, setAllProjects] = useState<ProjectsObj[]>([]);
   const [loadStatus, setLoadStatus] = useState(true);
   const [searchText, setSearchText] = useState(search);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   useEffect(()=>{
     dispatch(getUserDetails());
@@ -132,9 +134,11 @@ const Projects = () => {
   const onClose = () => {
     fetchProjects();
   };
-
+  useBlockNavigation(isModalOpen)
   // Function for open modal
   const openModal = () => {
+    setIsModalOpen(true);
+    
     cbModal({
       component: (props: ModalObj) => (
         <Modal
@@ -142,6 +146,7 @@ const Projects = () => {
             createProjectModal && validateObject(createProjectModal) ? createProjectModal : {}
           }
           selectedOrg={selectedOrganisation}
+          isOpen={setIsModalOpen}
           {...props}
         />
       ),
diff --git a/ui/src/pages/RegionalLogin/index.scss b/ui/src/pages/RegionalLogin/index.scss
index 2e8ad1f3..1a4bce16 100644
--- a/ui/src/pages/RegionalLogin/index.scss
+++ b/ui/src/pages/RegionalLogin/index.scss
@@ -31,7 +31,7 @@
   word-wrap: break-word;
   background-color: $color-base-white-5;
   background-clip: border-box;
-  border-radius: 0.5rem;
+  border-radius: 20px;
   &:hover {
     border: 3px solid #7c4dff;
     [class*='link-arrow'] {
@@ -45,21 +45,23 @@
   }
   .cardBody {
     color: $color-font-black;
+    display: flex;
     flex: 1 1 auto;
-    padding: 1.25rem 1.25rem;
+    flex-direction: column;
+    padding: 1.25rem 1.25rem 17px;
     h2 {
       font-size: 1.25rem;
       font-weight: 700;
       letter-spacing: 0;
     }
     p {
-      color: $color-font-black;
+      color: $color-font-gray;
     }
   }
   .CardFooter {
     background-color: rgba(0, 0, 0, 0);
     border-top: 0 solid rgba(34, 34, 34, 0.125);
-    padding: 0.625rem 1.25rem;
+    padding:  0 1.25rem 0.625rem;
     .stretched-link {
       line-height: $line-height-default;
     }
diff --git a/ui/src/pages/RegionalLogin/index.tsx b/ui/src/pages/RegionalLogin/index.tsx
index 2af72a93..9a9416cb 100644
--- a/ui/src/pages/RegionalLogin/index.tsx
+++ b/ui/src/pages/RegionalLogin/index.tsx
@@ -48,6 +48,9 @@ const RegionalLogin = () => {
       case regionName === 'Europe' && serviceName === 'Microsoft Azure':
         loginUrl = `/login?region=${REGIONS.AZURE_EU}`;
         break;
+      case regionName === 'North America' && serviceName === 'Google Cloud Platform':
+        loginUrl = `/login?region=${REGIONS.GCP_NA}`;
+        break;
       default:
         loginUrl = `/login?region=${REGIONS.NA}`;
         break;
@@ -63,52 +66,50 @@ const RegionalLogin = () => {
         <div className="text-center mt-4">
           {heading && <h1>{heading}</h1>}
           {description && description != '' && (
-            <div className="textStone600 pt-3">{parse(description)}</div>
+            <div className="textStone600 pt-3 lh-condensed">{parse(description)}</div>
           )}
         </div>
 
-        <div className="mw-1100 mx-auto">
-          <div className="row pt-6">
-            {regions &&
-              validateArray(regions) &&
-              regions?.map((region, index) => (
-                <div key={`${index.toString()}`} className="col-md-6 col-lg-3 mb-4">
-                  <div className="card h-100">
-                    <div className="cardBody">
-                      <div className="mb-4 d-flex align-items-center">
-                        {region?.service_icon?.url && (
-                          <img
-                            src={region?.service_icon?.url}
-                            className="thumb me-2"
-                            alt={region?.service_icon?.title}
-                          />
-                        )}
-                        {region?.service_title && (
-                          <p className="mb-0 body-6 fw-bold">{region?.service_title}</p>
-                        )}
-                      </div>
-                      {region?.region_title && <h2 className="py-2">{region?.region_title}</h2>}
+        <div className="row pt-6 justify-content-center">
+          {regions &&
+            validateArray(regions) &&
+            regions?.map((region, index) => (
+              <div key={`${index.toString()}`} className="col-md-4 col-lg-2 mb-4">
+                <div className="card h-100">
+                  <div className="cardBody">
+                    <div className="d-flex align-items-center flex-grow-1">
+                      {region?.service_icon?.url && (
+                        <img
+                          src={region?.service_icon?.url}
+                          className="thumb me-2"
+                          alt={region?.service_icon?.title}
+                        />
+                      )}
+                      {region?.service_title && (
+                        <p className="mb-0 body-6 fw-bold">{region?.service_title}</p>
+                      )}
                     </div>
-                    {region?.cta?.title && (
-                      <div className="CardFooter pb-3">
-                        <a
-                          // href={loginUrl}
-                          className="body-4 fw-bold stretched-link"
-                          onClick={() =>
-                            loginClick(
-                              region?.region_title as string,
-                              region?.service_title as string
-                            )
-                          }
-                        >
-                          <span className="link-basic-icon link-arrow">{region?.cta?.title}</span>
-                        </a>
-                      </div>
-                    )}
+                    {region?.region_title && <h2 className="pt-3">{region?.region_title}</h2>}
                   </div>
+                  {region?.cta?.title && (
+                    <div className="CardFooter pb-3">
+                      <a
+                        // href={loginUrl}
+                        className="body-4 fw-bold stretched-link"
+                        onClick={() =>
+                          loginClick(
+                            region?.region_title as string,
+                            region?.service_title as string
+                          )
+                        }
+                      >
+                        <span className="link-basic-icon link-arrow">{region?.cta?.title}</span>
+                      </a>
+                    </div>
+                  )}
                 </div>
-              ))}
-          </div>
+              </div>
+            ))}
         </div>
       </div>
     </div>
diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss
index 486af9c0..4e749a23 100644
--- a/ui/src/scss/App.scss
+++ b/ui/src/scss/App.scss
@@ -340,6 +340,9 @@ h2 {
 .mb-30 {
   margin-bottom: $space-30;
 }
+.lh-condensed {
+  line-height: 1.3;
+}
 .migration-steps-wrapper {
   border-top: 1px solid $color-brand-secondary-lightest;
   margin-top: 3.5rem;
diff --git a/ui/src/utilities/constants.ts b/ui/src/utilities/constants.ts
index 98529d75..01cdf591 100644
--- a/ui/src/utilities/constants.ts
+++ b/ui/src/utilities/constants.ts
@@ -25,7 +25,8 @@ export const REGIONS = {
   NA: 'NA',
   AZURE_NA: 'AZURE_NA',
   EU: 'EU',
-  AZURE_EU: 'AZURE_EU'
+  AZURE_EU: 'AZURE_EU',
+  GCP_NA: 'GCP_NA',
 };
 
 export const HEADERS = {
diff --git a/uplaode-api/migration-sitecore/libs/reference.js b/uplaode-api/migration-sitecore/libs/reference.js
index 898c560d..d4f3ba13 100644
--- a/uplaode-api/migration-sitecore/libs/reference.js
+++ b/uplaode-api/migration-sitecore/libs/reference.js
@@ -96,9 +96,9 @@ function ExtractRef() {
                   otherCmsType: "reference",
                   contentstackField: newKey,
                   contentstackFieldUid: uidCorrector({ uid: newKey }),
-                  ContentstackFieldType: "global_field",
+                  ContentstackFieldType: "refernce",
                   isDeleted: false,
-                  backupFieldType: "global_field",
+                  backupFieldType: "reference",
                   refrenceTo: key,
                 }
                 contentType.fieldMapping.push(schemaObject)