From 5fde30bda7b3a3a64106b59be70b5b3bf0f81470 Mon Sep 17 00:00:00 2001
From: Sayali Joshi <sayali.joshi@contentstack.com>
Date: Thu, 27 Mar 2025 15:10:55 +0530
Subject: [PATCH] [CMG-576] - UX suggestions from Docs team

---
 ui/src/cmsData/content_mapping.json           |   2 +-
 .../components/Common/AddStack/addStack.scss  |  11 +
 .../components/Common/AddStack/addStack.tsx   | 275 +++++++++---------
 ui/src/components/ContentMapper/index.scss    |  12 +-
 ui/src/components/ContentMapper/index.tsx     | 110 ++++---
 .../Actions/LoadLanguageMapper.tsx            |   2 +-
 .../DestinationStack/Actions/LoadStacks.tsx   | 131 +++++----
 .../DestinationStack/DestinationStack.scss    |  25 +-
 ui/src/components/DestinationStack/index.tsx  |  40 ---
 ui/src/pages/Migration/index.tsx              |   2 +-
 ui/src/utilities/constants.ts                 |   2 +-
 11 files changed, 293 insertions(+), 319 deletions(-)

diff --git a/ui/src/cmsData/content_mapping.json b/ui/src/cmsData/content_mapping.json
index cdf747030..9c267310b 100644
--- a/ui/src/cmsData/content_mapping.json
+++ b/ui/src/cmsData/content_mapping.json
@@ -143,7 +143,7 @@
     "_version": 3
   },
   "table_search_placeholder": "Search fields",
-  "search_placeholder": "Search content models",
+  "search_placeholder": "Search...",
   "tags": [],
   "title": "Content Mapping",
   "updated_at": "2024-01-25T12:13:32.967Z",
diff --git a/ui/src/components/Common/AddStack/addStack.scss b/ui/src/components/Common/AddStack/addStack.scss
index d768305c2..7ccf3e539 100644
--- a/ui/src/components/Common/AddStack/addStack.scss
+++ b/ui/src/components/Common/AddStack/addStack.scss
@@ -1,3 +1,5 @@
+@import '../../../scss/App.scss';
+
 /**
  * Styles for the ReactModal__add-stack class.
  */
@@ -26,3 +28,12 @@
 .ReactModal__Overlay .ReactModal__Content .ReactModal__Content__body.selectWrapperBody {
   overflow: visible;
 }
+.stack-creation-warning {
+  color: $color-font-base;
+  font-size: $size-font-large;
+  margin-left: .5rem;
+  margin-top: .5rem;
+  .imp-text {
+    font-weight: $font-weight-semi-bold;
+  }
+}
diff --git a/ui/src/components/Common/AddStack/addStack.tsx b/ui/src/components/Common/AddStack/addStack.tsx
index 7fc397374..2d0c78417 100644
--- a/ui/src/components/Common/AddStack/addStack.tsx
+++ b/ui/src/components/Common/AddStack/addStack.tsx
@@ -150,163 +150,162 @@ const AddStack = (props: any): JSX.Element => {
           }}
           render={({ handleSubmit }): JSX.Element => {
             return (
-              <>
-                <div className="ReactModal__add-stack">
-                  <form onSubmit={handleSubmit}>
-                    <ModalHeader title={addStackCMSData?.title} closeModal={props?.closeModal} />
-                    <ModalBody className="no-scroll selectWrapperBody">
-                      <Field>
-                        <ReactFinalField name="name" type="input">
-                          {({ input, meta }): JSX.Element => {
-                            return (
-                              <>
+              <div className="ReactModal__add-stack">
+                <form onSubmit={handleSubmit}>
+                  <ModalHeader title={addStackCMSData?.title} closeModal={props?.closeModal} />
+                  <ModalBody className="no-scroll selectWrapperBody">
+                    <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: React.ChangeEvent<HTMLInputElement>): void => {
+                                  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, meta }): JSX.Element => {
+                          return (
+                            <div className="input-description">
+                              <Field>
                                 <FieldLabel
-                                  required
-                                  testId="cs-stack-create-title"
+                                  testId="cs-stack-create-description"
                                   version="v2"
-                                  error={meta?.error && meta?.touched && true}
-                                  htmlFor="name"
+                                  htmlFor="description"
                                 >
-                                  {addStackCMSData?.stack_name}
+                                  {addStackCMSData?.stack_description}
                                 </FieldLabel>
-                                <TextInput
-                                  testId="cs-stack-create-title-input"
+                                <Textarea
+                                  testId="cs-stack-create-description-input"
                                   version="v2"
+                                  className="Description-field"
                                   {...input}
-                                  onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
+                                  name="description"
+                                  onChange={(
+                                    event: React.ChangeEvent<HTMLInputElement>
+                                  ): void => {
                                     input?.onChange(event);
                                   }}
-                                  name="name"
-                                  autoComplete="off"
-                                  type="text"
-                                  placeholder={addStackCMSData?.stack_name_placeholder}
+                                  placeholder={addStackCMSData?.stack_description_placeholder}
                                   error={(meta?.error || meta?.submitError) && meta?.touched}
                                 />
                                 {meta?.error && meta?.touched && (
                                   <ValidationMessage
                                     version="v2"
-                                    testId="cs-stack-create-title-validation"
+                                    testId="cs-stack-create-description-validation"
                                   >
                                     {meta?.error}
                                   </ValidationMessage>
                                 )}
-                              </>
-                            );
-                          }}
-                        </ReactFinalField>
-                      </Field>
-                      <Field>
-                        <ReactFinalField name={'description'} type="textarea">
-                          {({ input, meta }): JSX.Element => {
-                            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: React.ChangeEvent<HTMLInputElement>
-                                    ): void => {
-                                      input?.onChange(event);
-                                    }}
-                                    placeholder={addStackCMSData?.stack_description_placeholder}
-                                    error={(meta?.error || meta?.submitError) && meta?.touched}
-                                  />
-                                  {meta?.error && meta?.touched && (
-                                    <ValidationMessage
-                                      version="v2"
-                                      testId="cs-stack-create-description-validation"
-                                    >
-                                      {meta?.error}
-                                    </ValidationMessage>
-                                  )}
-                                </Field>
-                              </div>
-                            );
-                          }}
-                        </ReactFinalField>
-                      </Field>
-                      <Field>
-                        <ReactFinalField name={'locale'}>
-                          {({ input, meta }): JSX.Element => {
-                            return (
-                              <>
-                                <FieldLabel
-                                  required
-                                  testId="cs-stack-create-language"
+                              </Field>
+                            </div>
+                          );
+                        }}
+                      </ReactFinalField>
+                    </Field>
+                    <Field>
+                      <ReactFinalField name={'locale'}>
+                        {({ input, meta }): JSX.Element => {
+                          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: React.ChangeEvent<HTMLInputElement>): void => {
+                                  input?.onChange(event);
+                                }}
+                                name="locale"
+                                width="300px"
+                                options={allLocales}
+                                maxMenuHeight={200}
+                                isClearable={true}
+                                version={'v2'}
+                                placeholder={addStackCMSData?.stack_locale_description}
+                              />
+                              <div className="stack-creation-warning"><span className='imp-text'>Important:</span> The master language cannot be changed after the stack has been created.</div>
+                              {meta?.error && meta?.touched && (
+                                <ValidationMessage
+                                  testId="cs-stack-create-language-validation"
                                   version="v2"
-                                  error={meta?.error && meta?.touched && true}
-                                  htmlFor="locale"
                                 >
-                                  {addStackCMSData?.stack_locales}
-                                </FieldLabel>
-                                <Select
-                                  value={input?.value}
-                                  isSearchable={true}
-                                  onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
-                                    input?.onChange(event);
-                                  }}
-                                  name="locale"
-                                  width="300px"
-                                  options={allLocales}
-                                  maxMenuHeight={200}
-                                  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>
-              </>
+                                  {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/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss
index 3becf3592..fa2f9f237 100644
--- a/ui/src/components/ContentMapper/index.scss
+++ b/ui/src/components/ContentMapper/index.scss
@@ -156,11 +156,17 @@
       padding: 0 1.25rem;
     }
     .cms-field {
-      text-transform: capitalize;
+      // text-transform: capitalize;
+      // overflow: hidden;
+      // text-overflow: ellipsis;
+      // white-space: nowrap;
+      // width: 445px;
+
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
       overflow: hidden;
       text-overflow: ellipsis;
-      white-space: nowrap;
-      width: 445px;
     }
     .InstructionText {
       font-size: $size-font-small;
diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
index ccb98a2d3..58e295454 100644
--- a/ui/src/components/ContentMapper/index.tsx
+++ b/ui/src/components/ContentMapper/index.tsx
@@ -13,7 +13,8 @@ import {
   cbModal,
   InstructionText,
   CircularLoader,
-  EmptyState
+  EmptyState,
+  OutlineTag
 } from '@contentstack/venus-components';
 
 // Services
@@ -262,8 +263,8 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
   );
 
   const [otherContentType, setOtherContentType] = useState<FieldTypes>({
-    label: contentTypeMapped?.[otherCmsTitle] ?? `Select ${isContentType ? 'Content Type' : 'Global Field'} from Existing Stack`,
-    value: contentTypeMapped?.[otherCmsTitle] ?? `Select ${isContentType ? 'Content Type' : 'Global Field'} from Existing Stack`,
+    label: contentTypeMapped?.[otherCmsTitle] ?? `Select ${isContentType ? 'Content Type' : 'Global Field'} from Destination Stack`,
+    value: contentTypeMapped?.[otherCmsTitle] ?? `Select ${isContentType ? 'Content Type' : 'Global Field'} from Destination Stack`,
   });
   const [otherCmsUid, setOtherCmsUid] = useState<string>(contentTypes?.[0]?.otherCmsUid);
 
@@ -321,7 +322,7 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
   // Make title and url field non editable
   useEffect(() => {
     tableData?.forEach((field) => {
-      if (field?.otherCmsField !== 'title' && field?.otherCmsField !== 'url') {
+      if (field?.backupFieldType !== 'text' && field?.backupFieldType !== 'url') {
         field._canSelect = true;
       }
     });
@@ -331,21 +332,14 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
     const mappedContentType = contentModels && contentModels?.find((item)=> item?.uid === newMigrationData?.content_mapping?.content_type_mapping?.[selectedContentType?.contentstackUid || '']);
     // if (contentTypeMapped && otherCmsTitle  ) {
       
-      if (mappedContentType?.uid) {
-        setOtherContentType({
-          id: mappedContentType?.uid,
-          label: mappedContentType?.title,
-          value: mappedContentType?.title
-        });
-        setIsContentDeleted(false);
-      } 
-      // else {
-      //   setOtherContentType({
-      //     label: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Existing Stack`,
-      //     value: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Existing Stack`
-      //   });
-      // }
-    // }
+    if (mappedContentType?.uid) {
+      setOtherContentType({
+        id: mappedContentType?.uid,
+        label: mappedContentType?.title,
+        value: mappedContentType?.title
+      });
+      setIsContentDeleted(false);
+    } 
   }, [contentTypeMapped, otherCmsTitle, contentModels]);
 
   useEffect(()=>{
@@ -762,8 +756,8 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
       setSelectedContentType(filteredContentTypes?.[i]);
       setIsContentType(filteredContentTypes?.[i]?.type === "content_type");
       setOtherContentType({ 
-        label: mappedContentType?.title ?? `Select ${filteredContentTypes?.[i]?.type === "content_type" ? 'Content Type' : 'Global Field'} from existing stack`, 
-        value: mappedContentType?.title ?? `Select ${filteredContentTypes?.[i]?.type === "content_type" ? 'Content Type' : 'Global Field'} from existing stack`,
+        label: mappedContentType?.title ?? `Select ${filteredContentTypes?.[i]?.type === "content_type" ? 'Content Type' : 'Global Field'} from Destination Stack`, 
+        value: mappedContentType?.title ?? `Select ${filteredContentTypes?.[i]?.type === "content_type" ? 'Content Type' : 'Global Field'} from Destination Stack`,
         
       });
   }
@@ -806,7 +800,12 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
   const accessorCall = (data: FieldMapType) => {
     return (
       <div>
-        <Tooltip content={data?.otherCmsField} position='bottom'><div className="cms-field">{data?.otherCmsField}</div></Tooltip>
+        <div className='d-flex align-items-center'>
+          <div className={`${data?.backupFieldType === 'text' || data?.backupFieldType === 'url' ? `cms-field w-auto` : `cms-field`}`}>{data?.otherCmsField}</div>
+          {(data?.backupFieldType === 'text' || data?.backupFieldType === 'url') && (
+            <OutlineTag content='Default Field' className="ml-10" />
+          )}
+        </div>
         <InstructionText>
           Type: {data?.otherCmsType}
           <br />
@@ -1797,8 +1796,8 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
         setExistingField({});
         setContentTypeSchema([]);
         setOtherContentType({
-          label: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Existing Stack`,
-          value: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Existing Stack`
+          label: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Destination Stack`,
+          value: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Destination Stack`
         });
    
         if (status === 200) {
@@ -1897,8 +1896,8 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
         setExistingField({});
         setContentTypeSchema([]);
         setOtherContentType({
-          label: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Existing Stack`,
-          value: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Existing Stack`
+          label: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Destination Stack`,
+          value: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Destination Stack`
         });
    
         if (status === 200) {
@@ -2069,8 +2068,8 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
         return err;
       }
       setOtherContentType({
-        label: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Existing Stack`,
-        value: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Existing Stack`
+        label: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Destination Stack`,
+        value: `Select ${isContentType ? 'Content Type' : 'Global Field'} from Destination Stack`
 
       });
     }
@@ -2202,8 +2201,7 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
         {/* Content Types List */}
         <div className="content-types-list-wrapper">
           <div className="content-types-list-header d-flex align-items-center justify-content-between">
-            {contentTypesHeading && <h2>{contentTypesHeading}</h2> }
-            {contentTypes &&  count }
+            {contentTypesHeading && <h2>{`${contentTypesHeading} (${contentTypes &&  count})`}</h2> }
           </div>
 
           <div className='ct-search-wrapper'>
@@ -2337,36 +2335,35 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
                 component: (
                   <div className='d-flex align-items-center'>
                     {!isNewStack && (
-                      <Tooltip content={'Fetch content type'} position="left">
-                        <Button buttonType="light" icon={onlyIcon ? "v2-FetchTemplate" : ''}
-                         version="v2" onlyIcon={true} onlyIconHoverColor={'primary'} 
-                         size='small' onClick={handleFetchContentType}>
-                        </Button>
-                        
-                      </Tooltip>
+                      <>
+                        <div className="d-flex justify-content-end ml-8">
+                          <Select
+                            value={otherContentType}
+                            onChange={handleDropDownChange}
+                            options={adjustedOption}
+                            width="440px"
+                            maxWidth="440px"
+                            placeholder={otherContentType?.label}
+                            isSearchable
+                            version="v2"
+                            isDisabled={newMigrationData?.project_current_step > 4}
+                          />
+                        </div>
+
+                        <Tooltip content={'Fetch content types from destination stack'} position="left">
+                          <Button buttonType="light" icon={onlyIcon ? "v2-FetchTemplate" : ''}
+                          version="v2" onlyIcon={true} onlyIconHoverColor={'primary'} 
+                          size='small' onClick={handleFetchContentType}>
+                          </Button>
+                        </Tooltip>
+                      </>
                     )}
 
-                    <Tooltip content={'Reset to default mapping'} position="left">
-                       <Button buttonType="light" icon={onlyIcon ? "v2-Restore" : ''} 
+                    <Tooltip content={'Reset to system mapping'} position="left">
+                       <Button buttonType="light" icon={onlyIcon ? "v2-ResetReverse" : ''} 
                        version="v2" onlyIcon={true} onlyIconHoverColor={'primary'} 
                        size='small' onClick={handleResetContentType}></Button>
                     </Tooltip>
-
-                    {!isNewStack && (
-                      <div className="d-flex justify-content-end ml-8">
-                        <Select
-                          value={otherContentType}
-                          onChange={handleDropDownChange}
-                          options={adjustedOption}
-                          width="440px"
-                          maxWidth="440px"
-                          placeholder={otherContentType?.label}
-                          isSearchable
-                          version="v2"
-                          isDisabled={newMigrationData?.project_current_step > 4}
-                        />
-                      </div>
-                    )}
                   </div>
                 ),
                 showExportCta: true
@@ -2378,7 +2375,8 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
                 plural: `${totalCounts === 0 ? 'Count' : ''}`
               }}
             />
-            <div className='text-end my-2 mx-3 px-1 py-1'>
+            <div className='d-flex align-items-center justify-content-between my-2 mx-3 px-1 py-1'>
+              <div>Total Fields: <strong>{totalCounts}</strong></div>
               <Button
                 className="saveButton"
                 onClick={handleSaveContentType}
diff --git a/ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx b/ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx
index 1488c2d92..b11acc40c 100644
--- a/ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx
+++ b/ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx
@@ -475,7 +475,7 @@ const LanguageMapper = () => {
   };
 
   return (
-    <div className="mini-table">
+    <div>
       {isLoading ? (
         <CircularLoader size="small"></CircularLoader>
       ) : (
diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
index 8981fc543..4f45110e5 100644
--- a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
+++ b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
@@ -27,6 +27,7 @@ import { createStacksInOrg, getAllStacksInOrg, getStackLocales } from '../../../
 
 // Components
 import AddStack from '../../../components/Common/AddStack/addStack';
+import LanguageMapper from '../Actions/LoadLanguageMapper';
 
 interface LoadFileFormatProps {
   stepComponentProps?: () => {};
@@ -292,66 +293,82 @@ const LoadStacks = (props: LoadFileFormatProps) => {
 
   return (
     <div className="">
-      <div className="action-summary-wrapper ">
-        <div>
-          <div className="row">
-            <div className="col-12">
-              <div className="Dropdown-wrapper p-0 active ">
-                <Select
-                  className="stackselect"
-                  value={selectedStack}
-                  options={allStack}
-                  onChange={handleDropdownChange('stacks')}
-                  isSearchable={true}
-                  // placeholder='Select a stack'
-                  placeholder={placeholder}
-                  isClearable={allStack?.length > 0 && !emptyStackValue}
-                  // hideSelectedOptions={true}
-                  isDisabled={newMigrationData?.project_current_step > 2}
-                  error={isLoading ? false : !!isError}
-                  width="600px"
-                  hasAddOption={true}
-                  // menuIsOpen
-                  version="v2"
-                  addOptionText={
-                    <div className="createStack" onClick={handleCreateNewStack}>
-                      + Create a new stack
-                    </div>
-                  }
-                />
-                {isError && !isLoading && <div className="errorMessage">{errorMessage}</div>}
-              </div>
-            </div>
-            <div className="col-12">
-              <label className="title" htmlFor="master_locale">Master Locale <span className='asterisk_input'></span>
-              </label>
-              <Tooltip
-                content="Master Locale is auto-selected based on the chosen stack."
-                position="right"
-              >
-                <Icon icon="Information" version="v2" size="small"></Icon>
-              </Tooltip>
-            </div>
-            <div className="col-12 pb-2" id="master_locale">
-              <TextInput 
-                id="master_locale"
-                aria-label="master_locale"
-                version={'v2'}
-                placeholder={
-                  selectedStack?.master_locale
-                    ? ''
-                    : 'Master Locale will be set after stack selection'
-                }
-                value={selectedStack?.master_locale}
-                width="600px"
-                className="orgInput"
-                isReadOnly
-                disabled
-              />
-            </div>
+      <div className="row">
+        <div className="col-12">
+          <div className="Dropdown-wrapper p-0 active ">
+            <Select
+              className="stackselect"
+              value={selectedStack}
+              options={allStack}
+              onChange={handleDropdownChange('stacks')}
+              isSearchable={true}
+              // placeholder='Select a stack'
+              placeholder={placeholder}
+              isClearable={allStack?.length > 0 && !emptyStackValue}
+              // hideSelectedOptions={true}
+              isDisabled={newMigrationData?.project_current_step > 2}
+              error={isLoading ? false : !!isError}
+              width="600px"
+              hasAddOption={true}
+              // menuIsOpen
+              version="v2"
+              addOptionText={
+                <div className="createStack" onClick={handleCreateNewStack}>
+                  + Create a new stack
+                </div>
+              }
+            />
+            {isError && !isLoading && <div className="errorMessage">{errorMessage}</div>}
           </div>
         </div>
+        <div className="col-12">
+          <label className="title" htmlFor="master_locale">Master Locale <span className='asterisk_input'></span>
+          </label>
+          <Tooltip
+            content="Master Locale is auto-selected based on the chosen stack."
+            position="right"
+          >
+            <Icon icon="Information" version="v2" size="small"></Icon>
+          </Tooltip>
+        </div>
+        <div className="col-12 pb-2" id="master_locale">
+          <TextInput 
+            id="master_locale"
+            aria-label="master_locale"
+            version={'v2'}
+            placeholder={
+              selectedStack?.master_locale
+                ? ''
+                : 'Master Locale will be set after stack selection'
+            }
+            value={selectedStack?.master_locale}
+            width="600px"
+            className="orgInput"
+            isReadOnly
+            disabled
+          />
+        </div>
       </div>
+
+      {newMigrationData?.destination_stack?.selectedStack?.value && (
+        <div className="language-mapper">
+          <div className="info-lang">
+            <div className="stackTitle language-title">Language Mapping</div>
+            <Tooltip
+              content={`Match your source CMS languages with Contentstack to ensure a seamless migration`}
+              position="right"
+            >
+              <Icon
+                className="language-title"
+                icon="Information"
+                version="v2"
+                size="small"
+              ></Icon>
+            </Tooltip>
+          </div>
+          <LanguageMapper />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/ui/src/components/DestinationStack/DestinationStack.scss b/ui/src/components/DestinationStack/DestinationStack.scss
index 9633bbac0..1e97a1b2c 100644
--- a/ui/src/components/DestinationStack/DestinationStack.scss
+++ b/ui/src/components/DestinationStack/DestinationStack.scss
@@ -51,7 +51,7 @@
 
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: 80vh;
+  max-height: 65vh;
   .migration-vertical-stepper {
     padding: 24px 30px;
     border: 1px solid $color-brand-secondary-lightest;
@@ -207,25 +207,8 @@
   //padding-bottom: 50px;
 }
 .language-mapper {
-  //padding-top:20px;
   margin-top: 16px;
-  //padding: 24px 30px;
-  // height: 150px;
-  border: 1px solid $color-brand-secondary-lightest;
-  border-radius: 4px;
-  background-color: $color-brand-white-base;
-  white-space: nowrap;
-  //z-index: 999 !important;
-  // min-height: auto;
-  // max-height: none;
-  // overflow: visible;
-  // flex-grow: 1;
-  height: auto;
-  margin-bottom: 120px;
-  //padding:  24px 30px, 24px, 30px;
-  gap: 24px;
-  //margin-bottom: 40px;
-  //padding: 10px 50px;
+  
   .table-content-section {
     .Field {
       &.Field--full {
@@ -246,13 +229,13 @@
     padding: 10px 20px;
   }
   .field-label {
-    padding: 10px 10px;
+    padding: 10px 0;
   }
 }
 
 .language-title {
   margin-top: 20px;
-  //margin-left: 2px;
+  padding-bottom: 0;
 }
 .info-lang {
   display: flex;
diff --git a/ui/src/components/DestinationStack/index.tsx b/ui/src/components/DestinationStack/index.tsx
index 7d7033674..2ba0d6b14 100644
--- a/ui/src/components/DestinationStack/index.tsx
+++ b/ui/src/components/DestinationStack/index.tsx
@@ -14,7 +14,6 @@ import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
 import { RootState } from '../../store';
 import { updateMigrationData } from '../../store/slice/migrationDataSlice';
 import { AutoVerticalStepperRef } from '../LegacyCms';
-import LanguageMapper from './Actions/LoadLanguageMapper';
 
 type DestinationStackComponentProps = {
   isCompleted: boolean;
@@ -121,45 +120,6 @@ const DestinationStackComponent = ({
               />
             </div>
           </div>
-          <div className="row">
-            <div className="col-12">
-              <div className="info-lang">
-                <div className="stackTitle language-title">Language configuration</div>
-                <Tooltip
-                  content={`Define language mappings between Contentstack and ${newMigrationData?.legacy_cms?.selectedCms?.parent} for smooth content transfer. Each mapping aligns a WordPress source language with its Contentstack equivalent.`}
-                  position="right"
-                >
-                  <Icon
-                    className="language-title"
-                    icon="Information"
-                    version="v2"
-                    size="small"
-                  ></Icon>
-                </Tooltip>
-              </div>
-              <HelpText
-                data-test-id="cs-paragraph-tag"
-                className="contentMapWrapper-heading p1 regular help-text"
-              >
-                Contentstack and {newMigrationData?.legacy_cms?.selectedCms?.parent} Languages
-                Mapping
-              </HelpText>
-
-              {newMigrationData?.destination_stack?.selectedStack?.value ? (
-                <div className="language-mapper">
-                  <LanguageMapper />
-                </div>
-              ) : (
-                <Info
-                  className="info-language-mapper info-tag"
-                  icon={<Icon icon="Information" version="v2" size="small"></Icon>}
-                  version="v2"
-                  content="Please select the stack to proceed with language mapping"
-                  type="light"
-                />
-              )}
-            </div>
-          </div>
         </div>
       )}
     </>
diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx
index 455c7195e..c49bd7b6a 100644
--- a/ui/src/pages/Migration/index.tsx
+++ b/ui/src/pages/Migration/index.tsx
@@ -339,7 +339,7 @@ const Migration = () => {
           />
         ),
         id: '2',
-        title: 'Select Destination Stack'
+        title: 'Configure Destination Stack'
       },
       {
         data: <ContentMapper ref={saveRef} handleStepChange={handleStepChange} />,
diff --git a/ui/src/utilities/constants.ts b/ui/src/utilities/constants.ts
index a9ca0d86b..148fef0c1 100644
--- a/ui/src/utilities/constants.ts
+++ b/ui/src/utilities/constants.ts
@@ -98,7 +98,7 @@ export const isOfflineCMSDataRequired = process.env.REACT_APP_OFFLINE_CMS
 
 export const CONTENT_MAPPING_STATUS: ObjectType = {
   '1': 'Mapped',
-  '2': 'Verified',
+  '2': 'Updated',
   '3': 'Failed',
   '4': 'All'
   // '4': 'Auto-Dump'