diff --git a/ui/src/components/Common/AddStack/addStack.tsx b/ui/src/components/Common/AddStack/addStack.tsx
index cb842f5e6..0c44f7865 100644
--- a/ui/src/components/Common/AddStack/addStack.tsx
+++ b/ui/src/components/Common/AddStack/addStack.tsx
@@ -19,30 +19,32 @@ import {
 
 // Services
 import { getCMSDataFromFile } from '../../../cmsData/cmsSelector';
-import { getAllLocales } from '../../../services/api/user.service';
-
 
 // Utilities
 import { CS_ENTRIES } from '../../../utilities/constants';
-import { validateObject } from '../../../utilities/functions';
-
 
 // Interface
-import { AddStackCMSData, defaultAddStackCMSData, AddStackProps, StackData, Response, Stack, Errors } from './addStack.interface';
-import { IDropDown } from '../../../context/app/app.interface';
-
+import { AddStackCMSData, defaultAddStackCMSData } from './addStack.interface';
 
 // Styles
 import './addStack.scss';
+import { getAllLocales } from '../../../services/api/user.service';
+import { validateObject } from '../../../utilities/functions';
+import { IDropDown } from '../../../context/app/app.interface';
+export interface Stack {
+  name: string;
+  description: string;
+  locale: string;
+}
 
-const AddStack = (props: AddStackProps): JSX.Element => {
+const AddStack = (props: any): JSX.Element => {
   const [isProcessing, setIsProcessing] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [allLocales, setAllLocales] = useState<IDropDown[]>([]);
   const [addStackCMSData, setAddStackCMSData] = useState<AddStackCMSData>(defaultAddStackCMSData);
-  const onSubmit = async (formData: StackData) => {
+  const onSubmit = async (formData: any) => {
     setIsProcessing(true);
-    const resp = props?.onSubmit({
+    const resp = await props?.onSubmit({
       name: formData?.name || props?.defaultValues?.name,
       description: formData?.description || props?.defaultValues?.description,
       locale: formData?.locale?.value || props?.defaultValues?.locale
@@ -74,14 +76,14 @@ const AddStack = (props: AddStackProps): JSX.Element => {
         setAddStackCMSData(data);
         setIsLoading(false);
       })
-      .catch((err: string) => {
+      .catch((err: any) => {
         console.error(err);
         setIsLoading(false);
       });
 
     //fetch all locales
     getAllLocales(props?.selectedOrganisation)
-      .then((response: Response) => {
+      .then((response: any) => {
         const rawMappedLocalesMapped =
           validateObject(response?.data) && response?.data?.locales
             ? Object?.keys(response?.data?.locales)?.map((key) => ({
@@ -95,7 +97,7 @@ const AddStack = (props: AddStackProps): JSX.Element => {
             : [];
         setAllLocales(rawMappedLocalesMapped);
       })
-      .catch((err: string) => {
+      .catch((err: any) => {
         console.error(err);
       });
     //org id will always be there
@@ -112,16 +114,12 @@ const AddStack = (props: AddStackProps): JSX.Element => {
         <FinalForm
           onSubmit={onSubmit}
           keepDirtyOnReinitialize={true}
-          validate={(values): Stack => {
-            const errors: Errors = {
-              name: '',
-              description: '',
-              locale: ''
-            };
-            if (!values?.name || values?.name?.trim().length < 1) {
+          validate={(values): any => {
+            const errors: any = {};
+            if (!values?.name || values?.name?.trim().lenght < 1) {
               errors.name = 'Stack name required';
             }
-            if (!values?.locale) {
+            if (!values?.locale || values?.locale === '') {
               errors.locale = 'Required';
             }
             return errors;
@@ -154,7 +152,7 @@ const AddStack = (props: AddStackProps): JSX.Element => {
                                   testId="cs-stack-create-title-input"
                                   version="v2"
                                   {...input}
-                                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                                  onChange={(event: any): any => {
                                     input?.onChange(event);
                                   }}
                                   name="name"
@@ -178,7 +176,7 @@ const AddStack = (props: AddStackProps): JSX.Element => {
                       </Field>
                       <Field>
                         <ReactFinalField name={'description'} type="textarea">
-                          {({ input }) => {
+                          {({ input }): any => {
                             return (
                               <div className="input-description">
                                 <Field>
@@ -195,10 +193,11 @@ const AddStack = (props: AddStackProps): JSX.Element => {
                                     className="Description-field"
                                     {...input}
                                     name="description"
-                                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                                    onChange={(event: any): any => {
                                       input?.onChange(event);
-                                    } }
-                                    placeholder={addStackCMSData?.stack_description_placeholder} />
+                                    }}
+                                    placeholder={addStackCMSData?.stack_description_placeholder}
+                                  />
                                 </Field>
                               </div>
                             );
@@ -207,7 +206,7 @@ const AddStack = (props: AddStackProps): JSX.Element => {
                       </Field>
                       <Field>
                         <ReactFinalField name={'locale'}>
-                          {({ input, meta }) => {
+                          {({ input, meta }): any => {
                             return (
                               <>
                                 <FieldLabel
@@ -222,7 +221,7 @@ const AddStack = (props: AddStackProps): JSX.Element => {
                                 <Select
                                   value={input?.value}
                                   isSearchable={true}
-                                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                                  onChange={(event: any): any => {
                                     input?.onChange(event);
                                   }}
                                   name="locale"
@@ -254,7 +253,7 @@ const AddStack = (props: AddStackProps): JSX.Element => {
                           version="v2"
                           testId="cs-cancel-create-stack"
                           buttonType="tertiary"
-                          onClick={() => { 
+                          onClick={(): any => {
                             props?.closeModal();
                           }}
                         >
@@ -284,4 +283,4 @@ const AddStack = (props: AddStackProps): JSX.Element => {
   );
 };
 
-export default AddStack;
+export default AddStack;
\ No newline at end of file
diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
index cb95bfefa..636046cde 100644
--- a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
+++ b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { AsyncSelect, cbModal } from '@contentstack/venus-components';
+import { AsyncSelect, cbModal, TextInput } from '@contentstack/venus-components';
 import { DEFAULT_DROPDOWN, IDropDown, INewMigration } from '../../../context/app/app.interface';
 import { isEmptyString, validateArray } from '../../../utilities/functions';
 import { createStacksInOrg, getAllStacksInOrg } from '../../../services/api/stacks.service';
@@ -38,13 +38,14 @@ const LoadStacks = (props: LoadFileFormatProps) => {
     !isEmptyString(newMigrationData?.destination_stack?.selectedOrg?.value)
       ? newMigrationData?.destination_stack?.selectedStack
       : DEFAULT_DROPDOWN
-  );
+  );  
 
   const [allStack, setAllStack] = useState<IDropDown[]>([]);
   const [allLocales, setAllLocales] = useState<IDropDown[]>([]);
-
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const [isLoading, setisLoading] = useState<boolean>(false);
+  const [isError, setIsError] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>('');
 
 
   const { projectId = '' }: Params<string> = useParams();
@@ -74,9 +75,6 @@ const LoadStacks = (props: LoadFileFormatProps) => {
     setIsSaving(false);
 
     if (resp.status === 201) {
-      //fetch all Stacks
-      fetchData();
-
       const newCreatedStack: IDropDown = {
         label: resp?.data?.stack?.name,
         value: resp?.data?.stack?.api_key,
@@ -85,8 +83,10 @@ const LoadStacks = (props: LoadFileFormatProps) => {
         created_at: resp?.data?.stack?.created_at,
         uid: resp?.data?.stack?.api_key
       };
-
+      // setAllStack((prevStacks) => [...prevStacks, newCreatedStack]);
       setSelectedStack(newCreatedStack);
+      setisLoading(false)
+      // loadMoreOptions({search: ''})
 
       const newMigrationDataObj: INewMigration = {
         ...newMigrationData,
@@ -115,6 +115,7 @@ const LoadStacks = (props: LoadFileFormatProps) => {
 
   /****  ALL METHODS HERE  ****/
   const [placeholder, setPlaceholder] = useState('Select a stack');
+  const [asyncMount, setAsyncMount] = useState(true)
   //Handle Legacy cms selection
   const handleDropdownChange = (name: string) => (data: IDropDown) => {
     const stackCleared = data?.value === '' || data?.value === null || data === null;
@@ -124,11 +125,9 @@ const LoadStacks = (props: LoadFileFormatProps) => {
     if (stackCleared === true) {
       setPlaceholder('Select a stack');
     }
-    
-    
+        
     if (name === 'stacks' && data?.value != '+ Create a new Stack') {
       setSelectedStack(() => ({ ...data }));
-
       const newMigrationDataObj: INewMigration = {
         ...newMigrationData,
         destination_stack: {
@@ -136,7 +135,7 @@ const LoadStacks = (props: LoadFileFormatProps) => {
           selectedStack: stackCleared ? DEFAULT_DROPDOWN : { ...data }
         }
       };
-
+      
       dispatch(updateNewMigrationData((newMigrationDataObj)));
       if (!stackCleared) {
         if (props?.handleStepChange) {
@@ -146,50 +145,12 @@ const LoadStacks = (props: LoadFileFormatProps) => {
     }
   };
 
-  const fetchData = async () => {
-    setisLoading(true);
-    const stackData = await getAllStacksInOrg(
-      newMigrationData?.destination_stack?.selectedOrg?.value,''
-    ); //org id will always be there
-
-    const stackArray = validateArray(stackData?.data?.stacks)
-      ? stackData?.data?.stacks?.map((stack: StackResponse) => ({
-          label: stack?.name,
-          value: stack?.api_key,
-          uid: stack?.api_key,
-          master_locale: stack?.master_locale,
-          locales: stack?.locales,
-          created_at: stack?.created_at
-        }))
-      : [];
-    stackArray.sort(
-      (a: IDropDown, b: IDropDown) =>
-        new Date(b?.created_at)?.getTime() - new Date(a?.created_at)?.getTime()
-    );
-
-    setAllStack(stackArray);
-
-    //Set selected Stack
-    const selectedStackData = validateArray(stackArray)
-      ? stackArray.find(
-          (stack: IDropDown) =>
-            stack?.value === newMigrationData?.destination_stack?.selectedStack?.value
-        )
-      : DEFAULT_DROPDOWN;
-
-    setSelectedStack(selectedStackData);
-
-    const newMigrationDataObj: INewMigration = {
-      ...newMigrationData,
-      destination_stack: {
-        ...newMigrationData?.destination_stack,
-        selectedStack: selectedStackData
-      }
-    };
-
-    dispatch(updateNewMigrationData((newMigrationDataObj)));
-    setisLoading(false);
-  };
+  const resetAsyncSelect = () => {
+    setAsyncMount(false)
+    setTimeout(() => {
+      setAsyncMount(true)
+    }, 10);
+  }
 
   const handleCreateNewStack = () => {
     cbModal({
@@ -206,88 +167,84 @@ const LoadStacks = (props: LoadFileFormatProps) => {
         />
       ),
       modalProps: {
-        onClose: () => {
+        shouldCloseOnOverlayClick: true,
+        shouldCloseOnEscape: true,
+        onOpen: () => {
           return;
         },
-        onOpen: () => {
+        onClose: () => {
+          resetAsyncSelect();
           return;
         }
       }
     });
   };
-
+  
   const loadMoreOptions: any = async ({
     search,
   }: {
     search: string;
   }) => {
-    const stackData = await getAllStacksInOrg(
-      selectedOrganisation?.value, search
-    ); //org id will always be there
-
-    const stackArray = validateArray(stackData?.data?.stacks)
-      ? stackData?.data?.stacks?.map((stack: StackResponse) => ({
-          label: stack?.name,
-          value: stack?.api_key,
-          uid: stack?.api_key,
-          master_locale: stack?.master_locale,
-          locales: stack?.locales,
-          created_at: stack?.created_at
-        }))
-      : [];
-
-    stackArray.sort((a: IDropDown, b: IDropDown) => {
-      new Date(b?.created_at)?.getTime() - new Date(a?.created_at)?.getTime();
-    });
-
     const addLabel = {
-      label:  "+ Create a new Stack",
+      label: "+ Create a new Stack",
       value: "+ Create a new Stack",
       uid: '',
       master_locale: '',
       locales: '',
-      created_at: '' 
+      created_at: ''
+    };
+  
+    try {
+      setisLoading(true);
+
+      const stackData = await getAllStacksInOrg(selectedOrganisation?.value, search); // org id will always be there
+      
+      if (stackData?.status === 200) {
+        const stackArray = validateArray(stackData?.data?.stacks)
+          ? stackData?.data?.stacks?.map((stack: StackResponse) => ({
+              label: stack?.name,
+              value: stack?.api_key,
+              uid: stack?.api_key,
+              master_locale: stack?.master_locale,
+              locales: stack?.locales,
+              created_at: stack?.created_at,
+            }))
+          : [];
+  
+        if (stackData?.data?.stacks.length === 0) {
+          setIsError(true);
+          setErrorMessage("Please create new stack there is no stack available");
+        } else {
+          stackArray.sort((a: IDropDown, b: IDropDown) => {
+            return new Date(b?.created_at).getTime() - new Date(a?.created_at).getTime();
+          });
+  
+          stackArray.push(addLabel);
+        }
+        return { options: stackArray };
+      } else {
+        setIsError(true);
+        setErrorMessage("Failed to load stacks");
+      }
+    } catch (error) {
+      setIsError(true);
+      setErrorMessage("An error occurred while fetching stacks");
+    } finally {
+      setisLoading(false);
     }
-    stackArray.push(addLabel)
-
-    setAllStack(stackArray);
-
-    // //Set selected Stack
-    // const selectedStackData = validateArray(stackArray)
-    //   ? stackArray.find(
-    //       (stack: IDropDown) =>{
-    //         console.log("stack :::", selectedStack?.value)
-            
-    //         return stack?.value === selectedStack?.value}
-    //     )
-    //   : DEFAULT_DROPDOWN;
+  };
 
-    // setSelectedStack(selectedStackData);
-    // console.log("inload more ::::", selectedStackData);
-    
+  const emptyStackValue = selectedStack?.value === undefined || selectedStack?.value === '' || selectedStack?.value === null
 
-    // const newMigrationDataObj: INewMigration = {
-    //   ...newMigrationData,
-    //   destination_stack: {
-    //     ...newMigrationData?.destination_stack,
-    //     selectedStack: selectedStackData
-    //   }
-    // };
 
-    // dispatch(updateNewMigrationData((newMigrationDataObj)));
+  useEffect(()=>{
+    if(emptyStackValue) {
+      setIsError(true)
+      setErrorMessage("Please select a stack")
+    }
+  }) 
 
-    return { options: stackArray };
-  };
   
-  const emptyStackValue = selectedStack?.value === undefined || selectedStack?.value === '' || selectedStack?.value === null
-
-  const onBlurDropdown = () => {
-    if (!isEmptyString(selectedStack?.value)) {
-      if (props?.handleStepChange) {
-        props?.handleStepChange(props?.currentStep, true);
-      }
-    }
-  };
   return (
     <div className="">
       <div className="action-summary-wrapper ">
@@ -295,32 +252,42 @@ const LoadStacks = (props: LoadFileFormatProps) => {
           <div className="row">
             <div className="col-12">
                 <div className="Dropdown-wrapper p-0 active ">
+                  {asyncMount ? 
                   <AsyncSelect
                     version={'v2'}
                     loadMoreOptions={loadMoreOptions}
                     onChange={handleDropdownChange('stacks')}
-                    onBlur={onBlurDropdown}
                     canEditOption={true}
                     value={selectedStack}
+                    
                     isSearchable={true}
                     isClearable={!emptyStackValue ? true : false }
                     width="600px"
                     isDisabled={props?.stepComponentProps?.isSummary || false}
+                    hideSelectedOptions={true}
                     placeholder={placeholder}
                     limit={10}
                     updateOption={()=> undefined}
-                    error={emptyStackValue ? true : false}
-                  />
+                    error={isLoading ? false : emptyStackValue ? true : false }
+                    defaultOptions={true}
+                    debounceTimeout={0}
+                  />: null
+                  }
                 </div>
-                {emptyStackValue && <div className='errorMessage'>Please select a stack</div>}
-            </div>
+                {(emptyStackValue && !isLoading) && <div className='errorMessage'>{errorMessage}</div>}
+            </div> 
             <div className="col-12">
               <label className="title">Master Locale</label>
             </div>
             <div className="col-12 pb-2">
-              <div className="stackselect locale-container">
-                <span>{selectedStack?.master_locale}</span>
-              </div>
+              <TextInput 
+                version={'v2'}
+                value={selectedStack?.master_locale || 'Locale'}
+                width="600px"
+                className="orgInput"
+                isReadOnly
+                disabled
+              />
             </div>
           </div>
         </div>