diff --git a/api/src/controllers/projects.contentMapper.controller.ts b/api/src/controllers/projects.contentMapper.controller.ts
index 797d5a9bf..6a22299c4 100644
--- a/api/src/controllers/projects.contentMapper.controller.ts
+++ b/api/src/controllers/projects.contentMapper.controller.ts
@@ -37,6 +37,11 @@ const resetContentType = async (req: Request, res: Response): Promise<void> => {
 //   res.status(200).json(resp);
 // };
 
+const removeContentMapper = async (req: Request, res: Response): Promise<void> => {
+  const resp = await contentMapperService.removeContentMapper(req);
+  res.status(200).json(resp);
+}
+
 const getSingleContentTypes = async (
   req: Request,
   res: Response
@@ -53,5 +58,6 @@ export const contentMapperController = {
   putContentTypeFields,
   resetContentType,
   // removeMapping,
-  getSingleContentTypes
+  getSingleContentTypes,
+  removeContentMapper
 };
diff --git a/api/src/models/contentTypesMapper-lowdb.ts b/api/src/models/contentTypesMapper-lowdb.ts
index 3846c998e..f28d4ad44 100644
--- a/api/src/models/contentTypesMapper-lowdb.ts
+++ b/api/src/models/contentTypesMapper-lowdb.ts
@@ -1,7 +1,7 @@
 import { JSONFile } from "lowdb/node";
 import LowWithLodash from "../utils/lowdb-lodash.utils.js";
 
-interface ContentTypesMapper {
+export interface ContentTypesMapper {
   id: string;
   otherCmsTitle: string;
   otherCmsUid: string;
diff --git a/api/src/routes/contentMapper.routes.ts b/api/src/routes/contentMapper.routes.ts
index 1fc8ba35c..0fed1c01a 100644
--- a/api/src/routes/contentMapper.routes.ts
+++ b/api/src/routes/contentMapper.routes.ts
@@ -41,6 +41,11 @@ router.get(
   "/:projectId/:contentTypeUid",
   asyncRouter(contentMapperController.getSingleContentTypes)
 );
+//remove content mapper
+router.get(
+  "/:orgId/:projectId/content-mapper",
+  asyncRouter(contentMapperController.removeContentMapper)
+);
 
 
 export default router;
diff --git a/api/src/services/contentMapper.service.ts b/api/src/services/contentMapper.service.ts
index c21772457..bd0118c7c 100644
--- a/api/src/services/contentMapper.service.ts
+++ b/api/src/services/contentMapper.service.ts
@@ -21,6 +21,7 @@ import ProjectModelLowdb from "../models/project-lowdb.js";
 import FieldMapperModel from "../models/FieldMapper.js";
 import { v4 as uuidv4 } from "uuid";
 import ContentTypesMapperModelLowdb from "../models/contentTypesMapper-lowdb.js";
+import { ContentTypesMapper } from "../models/contentTypesMapper-lowdb.js";
 
 // Developer service to create dummy contentmapping data
 const putTestData = async (req: Request) => {
@@ -524,7 +525,7 @@ const resetAllContentTypesMapping = async (projectId: string) => {
   try {
     const contentTypes = cData;
     for (const contentType of contentTypes) {
-      if (!isEmpty(contentType.fieldMapping)) {
+      if (contentType &&  !isEmpty(contentType.fieldMapping)) {
         for (const field of contentType.fieldMapping) {
           await FieldMapperModel.read();
           const fieldData = FieldMapperModel.chain
@@ -561,8 +562,10 @@ const resetAllContentTypesMapping = async (projectId: string) => {
           });
         }
       }
+
     }
 
+
     return projectDetails;
   } catch (error: any) {
     logger.error(
@@ -610,7 +613,7 @@ const removeMapping = async (projectId: string) => {
     //TODO: remove fieldMapping ids in ContentTypesMapperModel for each content types
 
     for (const contentType of contentTypes) {
-      if (!isEmpty(contentType.fieldMapping)) {
+      if (contentType && !isEmpty(contentType.fieldMapping)) {
         for (const field of contentType.fieldMapping) {
           await FieldMapperModel.read();
           const fieldIndex = FieldMapperModel.chain
@@ -706,6 +709,93 @@ const getSingleContentTypes = async (req: Request) => {
     schema: res?.data?.content_type?.schema,
   };
 };
+const removeContentMapper = async (req: Request) => {
+  const projectId = req?.params?.projectId;
+  const srcFunc = "removeMapping";
+  await ProjectModelLowdb.read();
+  const projectDetails = ProjectModelLowdb.chain
+    .get("projects")
+    .find({ id: projectId })
+    .value();
+
+  if (isEmpty(projectDetails)) {
+    logger.error(
+      getLogMessage(
+        srcFunc,
+        `${HTTP_TEXTS.PROJECT_NOT_FOUND} projectId: ${projectId}`
+      )
+    );
+    throw new BadRequestError(HTTP_TEXTS.PROJECT_NOT_FOUND);
+  }
+  await ContentTypesMapperModelLowdb.read();
+  const cData: ContentTypesMapper[] = projectDetails?.content_mapper.map((cId: string) => {
+    const contentTypeData: ContentTypesMapper = ContentTypesMapperModelLowdb.chain
+      .get("ContentTypesMappers")
+      .find({ id: cId })
+      .value();
+    return contentTypeData;
+  });
+
+  try {
+    const contentTypes: ContentTypesMapper[] = cData;
+    //TODO: remove fieldMapping ids in ContentTypesMapperModel for each content types
+
+    for (const contentType of contentTypes) {
+      if (contentType && !isEmpty(contentType.fieldMapping)) {
+        for (const field of contentType.fieldMapping) {
+          await FieldMapperModel.read();
+          const fieldIndex = FieldMapperModel.chain
+            .get("field_mapper")
+            .findIndex({ id: field })
+            .value();
+          if (fieldIndex > -1) {
+            await FieldMapperModel.update((fData: any) => {
+              delete fData.field_mapper[fieldIndex];
+            });
+          }
+        }
+      }
+      await ContentTypesMapperModelLowdb.read();
+      if (!isEmpty(contentType?.id)) {
+        const cIndex = ContentTypesMapperModelLowdb.chain
+          .get("ContentTypesMappers")
+          .findIndex({ id: contentType?.id })
+          .value();
+        if (cIndex > -1) {
+          await ContentTypesMapperModelLowdb.update((data: any) => {
+            delete data.ContentTypesMappers[cIndex];
+          });
+        }
+      }
+    }
+
+    await ProjectModelLowdb.read();
+    const projectIndex = ProjectModelLowdb.chain
+      .get("projects")
+      .findIndex({ id: projectId })
+      .value();
+
+    if (projectIndex > -1) {
+      ProjectModelLowdb.update((data: any) => {
+        data.projects[projectIndex].content_mapper = [];
+      });
+    }
+    return projectDetails;
+  } catch (error: any) {
+    logger.error(
+      getLogMessage(
+        srcFunc,
+        `Error occurred while removing the content mapping for the Project [Id: ${projectId}]`,
+        {},
+        error
+      )
+    );
+    throw new ExceptionFunction(
+      error?.message || HTTP_TEXTS.INTERNAL_ERROR,
+      error?.statusCode || error?.status || HTTP_CODES.SERVER_ERROR
+    );
+  }
+};
 
 export const contentMapperService = {
   putTestData,
@@ -715,6 +805,7 @@ export const contentMapperService = {
   updateContentType,
   resetToInitialMapping,
   resetAllContentTypesMapping,
+  removeContentMapper,
   removeMapping,
   getSingleContentTypes
 };
diff --git a/api/src/services/projects.service.ts b/api/src/services/projects.service.ts
index 337f05fa9..d4ce46625 100644
--- a/api/src/services/projects.service.ts
+++ b/api/src/services/projects.service.ts
@@ -25,9 +25,10 @@ import { v4 as uuidv4 } from "uuid";
 
 const getAllProjects = async (req: Request) => {
   const orgId = req?.params?.orgId;
-  const decodedToken = req.body.token_payload;
-  const { user_id = "", region = "" } = decodedToken;
 
+  const decodedToken = req.body.token_payload;
+  const { user_id = "", region = "" } = decodedToken; 
+   
   await ProjectModelLowdb.read();
   const projects = ProjectModelLowdb.chain
     .get("projects")
diff --git a/ui/package-lock.json b/ui/package-lock.json
index d5e165910..d2cab51b3 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@contentstack/json-rte-serializer": "^2.0.5",
-        "@contentstack/venus-components": "1.5.1",
+        "@contentstack/venus-components": "^2.2.4",
         "@reduxjs/toolkit": "^2.2.5",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
@@ -2035,15 +2035,18 @@
       }
     },
     "node_modules/@contentstack/venus-components": {
-      "version": "1.5.1",
-      "resolved": "https://npm.pkg.github.com/download/@contentstack/venus-components/1.5.1/463c96c30d838f3fe4c5c9b47cd152527f0bd367",
-      "integrity": "sha512-wLZPaokr/Q3DHuRGOU1AC9tPrTDitvjDGpcOWuzeexFmWFXE8RRwy8IPLXhDUm7ofYCoi8FD7sDGdJ2bU/eGyA==",
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@contentstack/venus-components/-/venus-components-2.2.4.tgz",
+      "integrity": "sha512-/Dijz5LDSR/UMxJtT0e7AWZnLXFuRBe6JamksOGXHOQQaEKYvye0oaQfSQq8Mjmb+D9WAN5BXOfMRBhzZA+aQQ==",
       "dependencies": {
         "@emotion/css": "^11.1.3",
+        "@testing-library/react-hooks": "^8.0.1",
         "@tippyjs/react": "^4.1.0",
         "array-move": "^3.0.1",
         "axios": "0.25.0",
         "browser-detect": "^0.2.28",
+        "cache": "^3.0.0",
+        "clean": "^4.0.2",
         "collapse-whitespace": "^1.1.7",
         "detect-browser": "^5.3.0",
         "dompurify": "^2.4.1",
@@ -2060,11 +2063,12 @@
         "react-ace": "^9.1.4",
         "react-beautiful-dnd": "^13.0.0",
         "react-color": "^2.19.3",
-        "react-datepicker": "^3.3.0",
-        "react-dnd": "^11.1.3",
+        "react-datepicker": "^4.25.0",
+        "react-dnd-11": "npm:react-dnd@^11.1.3",
         "react-dnd-html5-backend": "^11.1.3",
         "react-dropzone": "^11.2.4",
         "react-infinite-scroll-component": "^6.1.0",
+        "react-input-mask": "^3.0.0-alpha.2",
         "react-mentions": "^4.4.7",
         "react-modal": "^3.11.2",
         "react-redux": "^7.2.1",
@@ -2078,6 +2082,7 @@
         "react-tiktok": "^1.0.0",
         "react-toastify": "6.1.0",
         "react-treebeard": "^3.2.4",
+        "react-virtualized": "^9.22.5",
         "react-virtualized-auto-sizer": "1.0.5",
         "react-window": "^1.8.5",
         "react-window-infinite-loader": "^1.0.5",
@@ -2092,6 +2097,7 @@
         "slate-react": "^0.77.4",
         "storybook-addon-whats-new": "^1.0.3",
         "systemjs": "^6.10.2",
+        "user-event": "^4.0.0",
         "uuid": "^8.3.2"
       },
       "peerDependencies": {
@@ -2152,6 +2158,54 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
+    "node_modules/@contentstack/venus-components/node_modules/@testing-library/react-hooks": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz",
+      "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "react-error-boundary": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
+        "react-test-renderer": "^16.9.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-test-renderer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@contentstack/venus-components/node_modules/@types/react": {
+      "version": "17.0.80",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.80.tgz",
+      "integrity": "sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "^0.16",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@contentstack/venus-components/node_modules/@types/react/node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@contentstack/venus-components/node_modules/axios": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
@@ -2165,25 +2219,6 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
-    "node_modules/@contentstack/venus-components/node_modules/deep-equal": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
-      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
-      "dependencies": {
-        "is-arguments": "^1.1.1",
-        "is-date-object": "^1.0.5",
-        "is-regex": "^1.1.4",
-        "object-is": "^1.1.5",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.5.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/@contentstack/venus-components/node_modules/react-ace": {
       "version": "9.5.0",
       "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-9.5.0.tgz",
@@ -2200,39 +2235,6 @@
         "react-dom": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0"
       }
     },
-    "node_modules/@contentstack/venus-components/node_modules/react-datepicker": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.8.0.tgz",
-      "integrity": "sha512-iFVNEp8DJoX5yEvEiciM7sJKmLGrvE70U38KhpG13XrulNSijeHw1RZkhd/0UmuXR71dcZB/kdfjiidifstZjw==",
-      "dependencies": {
-        "classnames": "^2.2.6",
-        "date-fns": "^2.0.1",
-        "prop-types": "^15.7.2",
-        "react-onclickoutside": "^6.10.0",
-        "react-popper": "^1.3.8"
-      },
-      "peerDependencies": {
-        "react": "^16.9.0 || ^17",
-        "react-dom": "^16.9.0 || ^17"
-      }
-    },
-    "node_modules/@contentstack/venus-components/node_modules/react-datepicker/node_modules/react-popper": {
-      "version": "1.3.11",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
-      "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "@hypnosphi/create-react-context": "^0.3.1",
-        "deep-equal": "^1.1.1",
-        "popper.js": "^1.14.4",
-        "prop-types": "^15.6.1",
-        "typed-styles": "^0.0.7",
-        "warning": "^4.0.2"
-      },
-      "peerDependencies": {
-        "react": "0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
     "node_modules/@contentstack/venus-components/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -3133,19 +3135,6 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz",
       "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw=="
     },
-    "node_modules/@hypnosphi/create-react-context": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
-      "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
-      "dependencies": {
-        "gud": "^1.0.0",
-        "warning": "^4.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": ">=0.14.0"
-      }
-    },
     "node_modules/@icons/material": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
@@ -8040,6 +8029,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/cache": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cache/-/cache-3.0.0.tgz",
+      "integrity": "sha512-sNoM5jithfalxIceo/uFFm5bOlGjux2y8jEvjNb0F/cACWQaMmWuEPTLl6GzLHdFcNsbWBBdqkBd9NyefZ5UQQ==",
+      "dependencies": {
+        "ds": "^1.4.2"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -8213,6 +8210,17 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
+    "node_modules/clean": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/clean/-/clean-4.0.2.tgz",
+      "integrity": "sha512-2LGVh4dNtI16L4UzqDHO6Hbl74YjG1vWvEUU78dgLO4kuyqJZFMNMPBx+EGtYKTFb14e24p+gWXgkabqxc1EUw==",
+      "dependencies": {
+        "async": "^0.9.0",
+        "minimist": "^1.1.0",
+        "mix2": "^1.0.0",
+        "skema": "^1.0.0"
+      }
+    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -8232,6 +8240,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/clean/node_modules/async": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
+      "integrity": "sha512-l6ToIJIotphWahxxHyzK9bnLR6kM4jJIIgLShZeqLY7iboHoGkdgFl7W2/Ivi4SkMJYGKqW8vSuk0uKUj6qsSw=="
+    },
     "node_modules/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -9643,6 +9656,11 @@
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
+    "node_modules/ds": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/ds/-/ds-1.4.2.tgz",
+      "integrity": "sha512-d5nMCjfod+srvE/1Bnt/u+L++6N8KJx3ZAi95AGp0g6RtfuGDNlGciWL/iiwKHsFVBVnA3/HEFUq5SW1NgTQ3Q=="
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -11709,11 +11727,6 @@
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
     },
-    "node_modules/gud": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
-      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
-    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -17126,6 +17139,14 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/make-array": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/make-array/-/make-array-0.1.2.tgz",
+      "integrity": "sha512-bcFmxgZ+OTaMYJp/w6eifElKTcfum7Gi5H7vQ8KzAf9X6swdxkVuilCaG3ZjXr/qJsQT4JJ2Rq9SDYScWEdu9Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -17389,6 +17410,14 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mix2": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/mix2/-/mix2-1.0.5.tgz",
+      "integrity": "sha512-ybWz7nY+WHBBIyliND5eYaJKzkoa+qXRYNTmVqAxSLlFtL/umT2iv+pmyTu1oU7WNkrirwheqR8d9EaKVz0e5g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -18098,16 +18127,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.4.33",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
@@ -19758,6 +19777,23 @@
         "react": "*"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz",
+      "integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.8",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.30.0",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.13.0",
+        "react-popper": "^2.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -19875,7 +19911,8 @@
         "node": ">=8"
       }
     },
-    "node_modules/react-dnd": {
+    "node_modules/react-dnd-11": {
+      "name": "react-dnd",
       "version": "11.1.3",
       "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-11.1.3.tgz",
       "integrity": "sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ==",
@@ -19926,6 +19963,21 @@
         "react": ">= 16.8"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
+      "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -19977,6 +20029,20 @@
         "react": ">=16.0.0"
       }
     },
+    "node_modules/react-input-mask": {
+      "version": "3.0.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-3.0.0-alpha.2.tgz",
+      "integrity": "sha512-9U7qL+mvDMOJcbOFPdt6Vj+zzmCMNnBjhhjGDrL8BGQmymgvMVKhu/oOVfAkl+5VWOsLr+G3EhZOmae5fBcAkA==",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -20034,9 +20100,9 @@
       }
     },
     "node_modules/react-onclickoutside": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
-      "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
+      "version": "6.13.1",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
+      "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
       "funding": {
         "type": "individual",
         "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
@@ -20046,6 +20112,20 @@
         "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
       }
     },
+    "node_modules/react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-property": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
@@ -20412,6 +20492,23 @@
         "react-dom": "^15.3.0 || ^16.0.0"
       }
     },
+    "node_modules/react-virtualized": {
+      "version": "9.22.5",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz",
+      "integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-window": {
       "version": "1.8.10",
       "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
@@ -21443,6 +21540,21 @@
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
     },
+    "node_modules/skema": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/skema/-/skema-1.0.2.tgz",
+      "integrity": "sha512-5LWfF2RSW2B3xfOaY6j49X8aNwsnj9cRVrM5QMF7it+cZvpv5ufiOUT13ps2U52sIbAzs11bdRP6mi5qyg75VQ==",
+      "dependencies": {
+        "async": "^0.9.0",
+        "make-array": "^0.1.2",
+        "mix2": "^1.0.0"
+      }
+    },
+    "node_modules/skema/node_modules/async": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
+      "integrity": "sha512-l6ToIJIotphWahxxHyzK9bnLR6kM4jJIIgLShZeqLY7iboHoGkdgFl7W2/Ivi4SkMJYGKqW8vSuk0uKUj6qsSw=="
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -22784,11 +22896,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/typed-styles": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
-      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
-    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -22972,6 +23079,12 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/user-event": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/user-event/-/user-event-4.0.0.tgz",
+      "integrity": "sha512-M2at0vzLqzrwZNBmtPDRyd+1BaRwU9UTG7sc+MrUZmGviR/Ws8tmXxVvfRvuv7TWWIDsLqbrMvoF1sF7DW4y5w==",
+      "deprecated": "user-event has moved to @testing-library/user-event. Please uninstall user-event and install @testing-library/user-event instead, or use an older version of user-event. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)"
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/ui/src/common/assets/icons.tsx b/ui/src/common/assets/icons.tsx
index ac841d3e9..179668e2e 100644
--- a/ui/src/common/assets/icons.tsx
+++ b/ui/src/common/assets/icons.tsx
@@ -763,3 +763,11 @@ export const SEARCH_ICON = (
     />
   </svg>
 );
+
+export const LOG_OUT = (  
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fillRule="evenodd" clipRule="evenodd" d="M15.9148 7.66475C16.1344 7.44508 16.4906 7.44508 16.7102 7.66475L20.6477 11.6023C20.8674 11.8219 20.8674 12.1781 20.6477 12.3977L16.7102 16.3352C16.4906 16.5549 16.1344 16.5549 15.9148 16.3352C15.6951 16.1156 15.6951 15.7594 15.9148 15.5398L19.4545 12L15.9148 8.46025C15.6951 8.24058 15.6951 7.88442 15.9148 7.66475Z" fill="#475161"/>
+  <path fillRule="evenodd" clipRule="evenodd" d="M9.1875 12C9.1875 11.6893 9.43934 11.4375 9.75 11.4375H20.25C20.5607 11.4375 20.8125 11.6893 20.8125 12C20.8125 12.3107 20.5607 12.5625 20.25 12.5625H9.75C9.43934 12.5625 9.1875 12.3107 9.1875 12Z" fill="#475161"/>
+  <path fillRule="evenodd" clipRule="evenodd" d="M4.5 4.3125C4.45027 4.3125 4.40258 4.33225 4.36742 4.36742C4.33225 4.40258 4.3125 4.45027 4.3125 4.5V19.5C4.3125 19.5497 4.33225 19.5974 4.36742 19.6326C4.40258 19.6677 4.45027 19.6875 4.5 19.6875H9.75C10.0607 19.6875 10.3125 19.9393 10.3125 20.25C10.3125 20.5607 10.0607 20.8125 9.75 20.8125H4.5C4.1519 20.8125 3.81806 20.6742 3.57192 20.4281C3.32578 20.1819 3.1875 19.8481 3.1875 19.5V4.5C3.1875 4.1519 3.32578 3.81806 3.57192 3.57192C3.81806 3.32578 4.1519 3.1875 4.5 3.1875H9.75C10.0607 3.1875 10.3125 3.43934 10.3125 3.75C10.3125 4.06066 10.0607 4.3125 9.75 4.3125H4.5Z" fill="#475161"/>
+  </svg>
+);  
\ No newline at end of file
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/Common/NotificationModal/index.tsx b/ui/src/components/Common/NotificationModal/index.tsx
new file mode 100644
index 000000000..3ea4bddcf
--- /dev/null
+++ b/ui/src/components/Common/NotificationModal/index.tsx
@@ -0,0 +1,38 @@
+
+import {
+  ModalBody,
+  ModalHeader,
+  ModalFooter,
+  ButtonGroup,
+  Button,
+  Paragraph
+} from '@contentstack/venus-components';
+
+interface Props {
+    closeModal: () => void;
+    goBack : () => void;
+}
+
+const NotificationModal = (props:Props) => {
+    return(
+        <>
+        <ModalHeader title={'Save Changes'} closeModal={props?.closeModal} className="text-capitalize" />
+        <ModalBody>
+          <div className='modal-data'>             
+            <Paragraph tagName="p" text={'You have unsaved changes on this page. Do you want to go back without saving?'} variant={"p1"}/>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+        <ButtonGroup>
+            <Button buttonType="light"version={"v2"}  onClick={() => props.closeModal()}> 
+               Cancel
+           </Button>
+            <Button version={"v2"} onClick={()=> {props?.goBack(), props.closeModal()}}>Yes, go back</Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </>
+    )
+
+}
+
+export default NotificationModal;
\ No newline at end of file
diff --git a/ui/src/components/ContentMapper/contentMapper.interface.ts b/ui/src/components/ContentMapper/contentMapper.interface.ts
index c81eba9f5..8fd01e46b 100644
--- a/ui/src/components/ContentMapper/contentMapper.interface.ts
+++ b/ui/src/components/ContentMapper/contentMapper.interface.ts
@@ -26,6 +26,7 @@ export interface FieldTypes {
   label: string;
   value: any;
   id?: string;
+  isDisabled?: boolean;
 }
 export interface TableTypes {
   sortBy: any;
@@ -45,6 +46,7 @@ export interface ContentType {
   updateAt: string;
   id?: string;
   status: string;
+  fieldMapping?: FieldMapType[] | [];
 }
 
 export interface FieldMapType {
diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss
index 5ba1fef7c..11aaa894f 100644
--- a/ui/src/components/ContentMapper/index.scss
+++ b/ui/src/components/ContentMapper/index.scss
@@ -2,6 +2,7 @@
 @import '../../scss/variables';
 
 .content-types-list-wrapper {
+  border-right: 1px solid $color-brand-secondary-lightest;
   display: flex;
   flex-direction: column;
   max-width: 25%;
@@ -26,9 +27,7 @@
   }
 }
 .ct-search-wrapper {
-  align-items: center;
   border-bottom: 1px solid $color-brand-secondary-lightest;
-  display: flex;
   padding: $px-8 $px-12;
   position: relative;
   .Search__v2 {
@@ -62,30 +61,40 @@
 .ct-list {
   border-right: 1px solid $color-brand-secondary-lightest;
   list-style-type: none;
-  margin: 0 0 0 $px-12;
-  padding: 15px 12px 15px 0;
+  padding: 15px 0 15px 0;
   li {
     align-items: center;
-    border: 1px solid transparent;
     cursor: pointer;
     display: flex;
     font-size: $size-font-xl;
     justify-content: space-between;
     line-height: normal;
     min-height: 42px;
-    padding: $px-8 $px-12;
-    &.active-ct {
+    padding: $px-8 $px-4 $px-8 $px-12;
+    &:hover, &.active-ct {
       background-color: $color-brand-white-base;
-      border: 1px solid $color-brand-primary-base;
-      color: $color-brand-primary-base;
+      .cms-title {
+        span {
+          color: $color-brand-primary-base;
+        }
+      }
     }
     .cms-title {
       margin-right: 12px;
-      max-width: 123px;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      max-height: 24px;
+      max-width: 155px;
+      white-space: nowrap;
+      .tippy-wrapper {
+        display: flex;
+      }
+      span {
+        color: $color-font-base;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
     .ct-options {
+      justify-content: flex-end;
       min-width: 150px;
     }
   }
@@ -119,7 +128,11 @@
 }
 .table-wrapper {
   flex: 1;
+  .TablePanel {
+    border-left: 0 none;
+  }
   .Table {
+    border-left: 0 none;
     min-height: inherit;
     .Table__body__column {
       padding: 0 1.25rem;
@@ -131,6 +144,9 @@
       font-size: $size-font-small;
       margin: 0;
     }
+    .EmptyStateWrapper {
+      margin-top: $px-20;
+    }
   }
   .import-cta {
     margin: 0;
@@ -143,7 +159,7 @@
   background-color: $color-brand-white-base;
   display: flex;
   justify-content: space-between;
-  padding: 12px;
+  padding: $px-12;
 }
 .action-component-body {
   display: flex;
@@ -178,18 +194,43 @@ div .table-row {
   align-items: center;
   border: 1px solid $color-stepper-title;
   border-radius: $px-8;
-  color: $color-stepper-title;
+  cursor: pointer;
   display: flex;
-  font-size: $size-font-large;
-  padding: $px-4 $px-8;
+  font-size: $size-font-medium;
+  margin-right: $px-12;
+  padding: $px-3 7px;
+  &.mapped {
+    border: 1px solid $color-brand-draft-base;
+    color: $color-brand-draft-base;
+    &.active-filter {
+      background-color: $color-brand-draft-base;
+      color: $color-brand-white-base;
+    }
+  }
+  &.verified {
+    border: 1px solid $color-brand-success-base;
+    color: $color-brand-success-base;
+    &.active-filter {
+      background-color: $color-brand-success-base;
+      color: $color-brand-white-base;
+    }
+  }
+  &.failed {
+    border: 1px solid $color-brand-fail-base;
+    color: $color-brand-fail-base;
+    &.active-filter {
+      background-color: $color-brand-fail-base;
+      color: $color-brand-white-base;
+    }
+  }
   svg {
-    margin-right: 5px;
+    margin-right: $px-4;
   }
 }
 .filter-wrapper {
   background-color: $color-brand-white-base;
   border-radius: $px-4;
-  box-shadow: 0 4px 30px rgba(0,0,0,.25);
+  box-shadow: 0 $px-4 $px-30 rgba(0,0,0,.25);
   position: absolute;
   right: $px-12;
   top: $px-50;
@@ -209,3 +250,8 @@ div .table-row {
     }
   }
 }
+.no-content {
+  line-height: $line-height-default;
+  padding: $px-12;
+  text-align: center;
+}
diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
index e72a6339f..988b0f455 100644
--- a/ui/src/components/ContentMapper/index.tsx
+++ b/ui/src/components/ContentMapper/index.tsx
@@ -277,11 +277,6 @@ const ContentMapper = () => {
 
     setContentTypes(data?.contentTypes);
     setFilteredContentTypes(data?.contentTypes);
-    setSelectedContentType(data?.contentTypes?.[0]);
-    setTotalCounts(data?.contentTypes?.[0]?.fieldMapping?.length);
-    setOtherCmsTitle(data?.contentTypes?.[0]?.otherCmsTitle);
-    setContentTypeUid(data?.contentTypes?.[0]?.id);
-    fetchFields(data?.contentTypes[0]?.id, searchText || '');
   };
 
   // Method to get fieldmapping
@@ -603,7 +598,6 @@ const ContentMapper = () => {
       'CheckBox': 'enum'
     };
     const OptionsForRow: optionsType[] = [];
-    // let ContentTypeSchema: ContentTypesSchema | undefined;
 
     if (OtherContentType?.label && contentTypesList) {
       const ContentType: any = contentTypesList?.find(
@@ -694,7 +688,13 @@ const ContentMapper = () => {
 
     const OptionValue: FieldTypes =
       OptionsForRow?.length === 0
-        ? { label: 'No matches found', value: 'No matches found' }
+        ? { 
+          label: data?.ContentstackFieldType, 
+          value: data?.ContentstackFieldType, 
+          isDisabled: data?.ContentstackFieldType === 'group' ||
+          data?.ContentstackFieldType === 'text' ||
+          data?.ContentstackFieldType === 'url' 
+        }
         : { label: `${selectedOption} matches`, value: `${selectedOption} matches` };
 
     const adjustedOptions = OptionsForRow.map((option: optionsType) => ({
@@ -713,23 +713,28 @@ const ContentMapper = () => {
             maxWidth="290px"
             isClearable={false}
             options={adjustedOptions}
+            isDisabled={
+              OptionValue?.isDisabled
+            }
           />
         </div>
-        <Icon
-          version="v2"
-          icon="Setting"
-          size="small"
-          onClick={() => {
-            // const value = {
-            //   ValidationRegex: data?.advanced?.ValidationRegex,
-            //   Mandatory: data?.advanced?.mandatory,
-            //   Multiple: data?.advanced?.multiple,
-            //   Unique: data?.advanced?.unique,
-            //   NonLocalizable: data?.advanced?.nonLocalizable
-            // };
-            handleAdvancedSetting(data?.ContentstackFieldType, advancePropertise, data?.uid, data);
-          }}
-        />
+        {!OptionValue?.isDisabled && (
+          <Icon
+            version="v2"
+            icon="Setting"
+            size="small"
+            onClick={() => {
+              // const value = {
+              //   ValidationRegex: data?.advanced?.ValidationRegex,
+              //   Mandatory: data?.advanced?.mandatory,
+              //   Multiple: data?.advanced?.multiple,
+              //   Unique: data?.advanced?.unique,
+              //   NonLocalizable: data?.advanced?.nonLocalizable
+              // };
+              handleAdvancedSetting(data?.ContentstackFieldType, advancePropertise, data?.uid, data);
+            }}
+          />
+        )}
       </div>
     );
   };
@@ -912,16 +917,25 @@ const ContentMapper = () => {
 
   // Function to filter content types as per the status
   const handleContentTypeFilter = (e: React.MouseEvent<HTMLElement>) => {
-    const li_list = document.querySelectorAll('.filter-wrapper li');
+    const li_list = document.querySelectorAll('li.status-wrapper');
     if(li_list) {
       li_list.forEach((ele) => {
-        ele?.classList?.remove('active-filter');
+        const selectedEle = document.querySelector(".active-filter");
+        if (selectedEle && selectedEle !== e?.target) {
+          ele?.classList?.remove('active-filter');
+        }
       })
     }
-    (e?.target as HTMLElement) ?.classList?.add('active-filter');
+    (e?.target as HTMLElement)?.classList?.toggle('active-filter');
+
     const filterVal = (e?.target as HTMLElement)?.innerText;
-    const filteredCT = contentTypes?.filter((ct) => CONTENT_MAPPING_STATUS[ct?.status] === filterVal)
-    setFilteredContentTypes(filteredCT);
+    const filteredCT = contentTypes?.filter((ct) => CONTENT_MAPPING_STATUS[ct?.status] === filterVal);
+
+    if ((e?.target as HTMLElement)?.classList?.contains('active-filter')) {
+      setFilteredContentTypes(filteredCT)
+    } else {
+      setFilteredContentTypes(contentTypes)
+    }
   }
 
   // Function to close filter panel on click outside
@@ -942,6 +956,8 @@ const ContentMapper = () => {
   }
   const tableHeight = calcHeight();
 
+  
+
   return (
     <div className="step-container">
       <div className="d-flex flex-wrap table-container">
@@ -952,52 +968,65 @@ const ContentMapper = () => {
           </div>
 
           <div className='ct-search-wrapper'>
-            <Search
-              placeholder={searchPlaceholder}
-              type="secondary"
-              version="v2"
-              onChange={(search: string) => handleSearch(search)}
-              onClear={true}
-              value={searchContentType}
-              debounceSearch={true}
-            />
-
-            <Button buttonType="light" onClick={handleFilter}>
-              <Icon icon="Filter" version="v2" />
-            </Button>
-            {showFilter && (
-              <div className='filter-wrapper' ref={ref}> 
-                <ul>
+            <div className='d-flex align-items-center pb-3'>
+              <Search
+                placeholder={searchPlaceholder}
+                type="secondary"
+                version="v2"
+                onChange={(search: string) => handleSearch(search)}
+                onClear={true}
+                value={searchContentType}
+                debounceSearch={true}
+              />
+
+              <Button buttonType="light" onClick={handleFilter}>
+                <Icon icon="Filter" version="v2" />
+              </Button>
+              {showFilter && (
+                <div className='filter-wrapper' ref={ref}> 
+                  <ul>
+                    {Object.keys(CONTENT_MAPPING_STATUS).map((key, keyInd) => (
+                      <li key={`${keyInd?.toString()}`} onClick={(e) => handleContentTypeFilter(e)}>{CONTENT_MAPPING_STATUS[key]}</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+            <div className='d-flex align-items-center justify-content-end'>
+              <ul className='d-flex'>
                   {Object.keys(CONTENT_MAPPING_STATUS).map((key, keyInd) => (
-                    <li key={`${keyInd?.toString()}`} onClick={(e) => handleContentTypeFilter(e)}>{CONTENT_MAPPING_STATUS[key]}</li>
+                    <li key={`${keyInd?.toString()}`}  className={`status-wrapper ${CONTENT_MAPPING_STATUS[key]?.toLocaleLowerCase()}`} onClick={(e) => handleContentTypeFilter(e)}>{CONTENT_MAPPING_STATUS[key]}</li>
                   ))}
-                </ul>
-              </div>
-            )}
+              </ul>
+              {contentTypes && validateArray(contentTypes) && contentTypes?.length }
+            </div>
           </div>
 
-          {filteredContentTypes && validateArray(filteredContentTypes) && (
-            <div className='ct-list-wrapper'>
-            <ul className="ct-list">
-              {filteredContentTypes?.map((content: ContentType, index: number) => {
-                const statusText = CONTENT_MAPPING_STATUS[content?.status];
-                const icon = STATUS_ICON_Mapping[content?.status] || '';
-                return (
-                <li
-                  key={`${index.toString()}`}
-                  className={`${active == index ? 'active-ct' : ''}`}
-                  onClick={() => openContentType(index)}
-                  onKeyDown={() => openContentType(index)}
-                >
-                  <span className='cms-title'>{content?.otherCmsTitle}</span>
-                  
-                  <div className='d-flex align-items-center ct-options'>
-                    <span className='status-wrapper'>
-                      {icon && <Icon size="mini" icon={icon} version="v2" />}
-                      {statusText}
-                    </span>
-
-                    {active == index && (
+          {filteredContentTypes && validateArray(filteredContentTypes)
+            ? <div className='ct-list-wrapper'>
+              <ul className="ct-list">
+                {filteredContentTypes?.map((content: ContentType, index: number) => {
+                  const icon = STATUS_ICON_Mapping[content?.status] || '';
+                  return (
+                    <li
+                      key={`${index.toString()}`}
+                      className={`${active == index ? 'active-ct' : ''}`}
+                      onClick={() => openContentType(index)}
+                      onKeyDown={() => openContentType(index)}
+                    >
+                      <div className='cms-title'>
+                        <Tooltip content={content?.otherCmsTitle} position="left">
+                          <span>{content?.otherCmsTitle}</span>
+                        </Tooltip>
+                      </div>
+                      
+                      
+                      <div className='d-flex align-items-center ct-options'>
+                        <span className=''>
+                          {icon && <Icon size="small" icon={icon} fill={icon === 'CheckedCircle' ? '#0469E3' : ''} />}
+                        </span>
+
+                        
                         <Dropdown
                           // version="v2"
                           list={[
@@ -1014,21 +1043,18 @@ const ContentMapper = () => {
                         >
                           <Icon icon="DotsThreeLargeVertical" version="v2" />
                         </Dropdown>
-                        
-                    )}
-                  </div>
-                </li>
-                )
-})}
-            </ul>
+                      </div>
+                    </li>
+                  )
+                })}
+              </ul>
             </div>
-          )}
+            : <div className='no-content'>No Content Types Found.</div>
+          }
         </div>
 
         {/* Content Type Fields */}
         <div className="content-types-fields-wrapper">
-          
-
           <div className="table-wrapper">
             <InfiniteScrollTable
               loading={loading}
@@ -1090,9 +1116,8 @@ const ContentMapper = () => {
             <div className='text-end my-3 mx-3 px-1'>
               <Button
                   className="saveButton"
-                  size="medium"
-                  buttonType="secondary"
                   onClick={handleSaveContentType}
+                  version="v2"
                 >
                 Save
               </Button>
diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
index 5e3a38502..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';
@@ -28,9 +28,6 @@ const defaultStack = {
 };
 
 const LoadStacks = (props: LoadFileFormatProps) => {
-
-  console.log("props", props);
-  
   /****  ALL HOOKS HERE  ****/
   
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
@@ -41,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();
@@ -77,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,
@@ -88,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,
@@ -118,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;
@@ -127,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: {
@@ -139,7 +135,7 @@ const LoadStacks = (props: LoadFileFormatProps) => {
           selectedStack: stackCleared ? DEFAULT_DROPDOWN : { ...data }
         }
       };
-
+      
       dispatch(updateNewMigrationData((newMigrationDataObj)));
       if (!stackCleared) {
         if (props?.handleStepChange) {
@@ -149,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({
@@ -209,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 ">
@@ -298,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>
diff --git a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
index 4838fc988..c146be232 100644
--- a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
@@ -5,21 +5,22 @@ import { Icon, TextInput } from '@contentstack/venus-components';
 import { useDispatch, useSelector } from 'react-redux';
 
 // Utilities
-import { isEmptyString, validateArray } from '../../../utilities/functions';
+import { isEmptyString } from '../../../utilities/functions';
 
 // Services
 import {
-  updateFileFormatData,
-  fileformatConfirmation
+  fileformatConfirmation,
+  updateFileFormatData
 } from '../../../services/api/migration.service';
 
 // Interface
-import { ICardType, defaultCardType } from '../../../components/Common/Card/card.interface';
+import { ICardType} from '../../../components/Common/Card/card.interface';
 
 
 // Components
 import { RootState } from '../../../store';
 import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
+import { getConfig } from '../../../services/api/upload.service';
 
 interface LoadFileFormatProps {
   stepComponentProps: any;
@@ -35,15 +36,17 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
   const dispatch = useDispatch();
 
   const [selectedCard, setSelectedCard] = useState<ICardType>(
-    newMigrationData?.legacy_cms?.selectedFileFormat ?? defaultCardType
+    newMigrationData?.legacy_cms?.selectedFileFormat 
   );
   const [isCheckedBoxChecked, setIsCheckedBoxChecked] = useState<boolean>(
     newMigrationData?.legacy_cms?.isFileFormatCheckboxChecked || true
   );
+  const [fileIcon, setFileIcon]  = useState(newMigrationData?.legacy_cms?.selectedFileFormat?.title);
+  const [isError, setIsError] = useState<boolean>(false);
+  const [error, setError] = useState<string>('');
 
   const { projectId = '' } = useParams();
-  const { allowed_file_formats = [], doc_url = { href: '', title: '' } } =
-    newMigrationData?.legacy_cms?.selectedCms || {};
+
 
   /****  ALL METHODS HERE  ****/
 
@@ -57,9 +60,6 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
           isFileFormatCheckboxChecked: isCheckedBoxChecked
         }
       }));
-      
-
-
       await fileformatConfirmation(selectedOrganisation?.value, projectId, {
         fileformat_confirmation: true
       });
@@ -75,53 +75,87 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
     setIsCheckedBoxChecked(checked);
   };
 
-  /****  ALL USEEffects  HERE  ****/
-  useEffect(() => {
-    if (validateArray(allowed_file_formats)) {
-      const initialFormat = {
-        description: allowed_file_formats?.[0]?.description,
-        group_name: allowed_file_formats?.[0]?.group_name,
-        title: allowed_file_formats?.[0]?.title,
-        fileformat_id: allowed_file_formats?.[0]?.fileformat_id
-      };
-      setSelectedCard(initialFormat);
-      const newMigrationDataObj = {
-        ...newMigrationData,
-        legacy_cms: {
-          ...newMigrationData?.legacy_cms,
-          selectedFileFormat: initialFormat
-        }
-      };
-      dispatch(updateNewMigrationData(newMigrationDataObj));
-      handleBtnClick();
-    }
-  }, [allowed_file_formats]);
+  const getFileExtension = (filePath: string): string => {
+    const ext = filePath.split('.').pop();
+    return ext ? `${ext}` : 'zip';
+  };
 
-  const { file_format_checkbox_text = '' } = migrationData.legacyCMSData;
+  const handleFileFormat = async() =>{
+    const apiRes: any = await getConfig();
+    const cmsType = !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent) ? newMigrationData?.legacy_cms?.selectedCms?.parent : apiRes?.data?.cmsType?.toLowerCase();
+    const filePath = apiRes?.data?.localPath?.toLowerCase();
+    const fileFormat =  getFileExtension(filePath);
+
+    const { all_cms = [] } = migrationData?.legacyCMSData || {}; 
+    let filteredCmsData:any = all_cms;
+    if (cmsType) {
+      filteredCmsData = all_cms?.filter((cms: any) => cms?.parent?.toLowerCase() === cmsType?.toLowerCase());
+    }
+ 
+    const isFormatValid = filteredCmsData[0]?.allowed_file_formats?.find((format:any)=>{ 
+      const isValid = format?.fileformat_id?.toLowerCase() === fileFormat?.toLowerCase();    
+      return isValid;
+    });
+ 
+    if(! isFormatValid){
+      setIsError(true);
+      setError('File format does not support, please add the correct file format.');
+    }
+  
+    const selectedFileFormatObj = {
+      description: "",
+      fileformat_id: fileFormat,
+      group_name: fileFormat,
+      isactive: true,
+      title: fileFormat === 'zip' ? fileFormat?.charAt(0)?.toUpperCase() + fileFormat?.slice(1) : fileFormat?.toUpperCase()
+    }
+    
+    
+    const newMigrationDataObj = {
+      ...newMigrationData,
+      legacy_cms: {
+        ...newMigrationData?.legacy_cms,
+        selectedFileFormat: selectedFileFormatObj
+      }
+    };
+    
+    setFileIcon(fileFormat === 'zip' ? fileFormat?.charAt(0).toUpperCase() + fileFormat.slice(1) : fileFormat?.toUpperCase());
+    dispatch(updateNewMigrationData(newMigrationDataObj));
+    await updateFileFormatData(selectedOrganisation?.value, projectId, {
+      file_format: fileFormat === 'zip' ? fileFormat?.charAt(0)?.toUpperCase() + fileFormat?.slice(1) : fileFormat?.toUpperCase(),
+      file_path: '',
+        is_fileValid: '',
+        awsDetails:{
+          awsRegion: '',
+          bucketName: '',
+          buketKey: ''
+        }
+    });
+  }
+  
+  /****  ALL USEEffects  HERE  ****/
+  useEffect(()=>{
+    handleFileFormat();
+    handleBtnClick();
+  },[]);
 
+  
   return (
-    <div className="row">
-        <div className="service_list_legacy">
-          {validateArray(allowed_file_formats) ? (
-            allowed_file_formats?.map((data: ICardType, index: number) => (
-              <div key={data?.fileformat_id || index}>             
-                <TextInput
-                value={data?.fileformat_id}
-                version="v2"              
-                isReadOnly={true}
-                disabled={true}
-                width="large"
-                placeholder=""
-                prefix={
-                <Icon icon={data?.title} size="medium" version='v2'/>}
-                />
-
-              </div>
-            ))
-          ) : (
-            <>No File formats available</>
-          )}
+    <div className="p-3">
+        <div className="col-12">
+          <TextInput
+          value={fileIcon}
+          version="v2"              
+          isReadOnly={true}
+          disabled={true}
+          width="large"
+          placeholder=""
+          prefix={
+          <Icon icon={fileIcon} size="medium" version='v2'/>}
+          />
+          {isError && <p className="errorMessage">{error}</p>}
         </div>
+        
     </div>
   );
 };
diff --git a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx
index 7947473a7..156c00b2e 100644
--- a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx
@@ -98,7 +98,7 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
       } else if (!isValidPrefix(value)) {
         setIsRestrictedKey(false);
         setIsError(true);
-        setErrorMessage('Affix should not be more than 5 chars');
+        setErrorMessage('Affix should not contain more than 5 characters or fewer than 2.');
       } else {
         setPrefix(value);
         setIsError(false);
@@ -116,9 +116,7 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
         dispatch(updateNewMigrationData(newMigrationDataObj));
   
         setIsError(false);
-  
-        //API call for saving Affix
-        await updateAffixData(selectedOrganisation?.value, projectId, { affix: value });
+
         await affixConfirmation(selectedOrganisation?.value, projectId, {
           affix_confirmation: true
         });
diff --git a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
index 906eb3c88..85d886927 100644
--- a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
@@ -17,7 +17,7 @@ import { DEFAULT_CMS_TYPE, ICMSType, INewMigration } from '../../../context/app/
 
 // Components
 import Card from '../../../components/Common/Card/card';
-import { EmptyState } from '@contentstack/venus-components';
+import { CircularLoader, EmptyState } from '@contentstack/venus-components';
 
 // Style
 import '../legacyCms.scss';
@@ -53,6 +53,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
   );
   const [errorMessage, setErrorMessage] = useState<string>('');
   const [isError, setIsError] = useState<boolean>(false); 
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const { projectId = '' } = useParams();
 
@@ -77,10 +78,10 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
       dispatch(updateNewMigrationData(newMigrationDataObj));
 
       //API call for saving selected CMS
-      await updateLegacyCMSData(selectedOrganisation.value, projectId, { legacy_cms: data?.cms_id });
+      //await updateLegacyCMSData(selectedOrganisation.value, projectId, { legacy_cms: data?.cms_id });
       
-      // Call for Step Change
-      props?.handleStepChange(props?.currentStep, true);
+      // Call for Step Change 
+      props?.handleStepChange(props?.currentStep);
     }
   };
 
@@ -124,6 +125,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
   const filterCMSData = async (searchText: string) => {
     const { all_cms = [] } = migrationData?.legacyCMSData || {}; 
     setSelectedCard(cmsType);
+    setIsLoading(true);
 
     const apiRes: any = await getConfig(); // api call to get cms type from upload service
 
@@ -140,6 +142,15 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
     if (cmstype) {
       filteredCmsData = all_cms.filter((cms: ICMSType) => cms?.parent?.toLowerCase() === cmstype?.toLowerCase());
     }
+    const newMigrationDataObj = {
+      ...newMigrationData,
+      legacy_cms: {
+        ...newMigrationData?.legacy_cms,
+        selectedFileFormat: filteredCmsData[0].allowed_file_formats[0]
+      }
+    };
+
+    dispatch(updateNewMigrationData(newMigrationDataObj));
 
     setCmsData(filteredCmsData)
 
@@ -162,7 +173,6 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
     } else {
       newSelectedCard = DEFAULT_CMS_TYPE;
     }
- 
 
     if (!isEmptyString(newSelectedCard?.title)) {
       setSelectedCard(newSelectedCard);
@@ -180,6 +190,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
       dispatch(updateNewMigrationData(newMigrationDataObj));
       props?.handleStepChange(props?.currentStep);
     }
+    setIsLoading(false);
   };
 
   /****  ALL USEEffects  HERE  ****/
@@ -190,7 +201,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
   useEffect(() => {
     filterCMSData(searchText);
   }, [cmsFilter]);
-
+    
   return (
     <div>
       <div className="col-12">
@@ -202,8 +213,12 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
               />
               </div>
            :
-          (
-            cmsData && validateArray(cmsData) && (
+            isLoading ? (
+              <>
+                <CircularLoader size='small'/>
+              </>
+             ) : 
+            (cmsData && validateArray(cmsData) && (
             <div className="service_list_legacy">
               {cmsData?.map((data: ICMSType) => (
                 <Card
@@ -214,10 +229,9 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
                   idField="cms_id"
                 />
               ))}
-            </div>
-          )
-        )
-        }
+            </div>))
+            } 
+          
       </div>
     </div>
   );
diff --git a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
index 62388a1c0..79d2362fe 100644
--- a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
@@ -4,9 +4,9 @@ import { FileDetails, INewMigration } from '../../../context/app/app.interface';
 import { fileValidation, getConfig } from '../../../services/api/upload.service';
 import { RootState } from '../../../store';
 import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
-import { Button, Paragraph } from '@contentstack/venus-components';
+import { AsyncLoader, Button, Icon, Paragraph, Tooltip } from '@contentstack/venus-components';
 import { isEmptyString } from '../../../utilities/functions';
-import { updateFileFormatData } from '../../../services/api/migration.service';
+import { updateFileFormatData,removeContentMapper } from '../../../services/api/migration.service';
 import { useParams } from 'react-router';
 import { ICardType , defaultCardType} from '../../../components/Common/Card/card.interface';
 
@@ -41,6 +41,14 @@ const FileComponent = ({fileDetails}:Props ) => {
   );
 };
 
+const saveStateToLocalStorage = (state:any, projectId : string) => {
+  sessionStorage.setItem(`uploadProgressState_${projectId}`, JSON.stringify(state));
+};
+
+const getStateFromLocalStorage = (projectId : string) => {
+  const state = sessionStorage.getItem(`uploadProgressState_${projectId}`);
+  return state ? JSON.parse(state) : null;
+};
 
 const LoadUploadFile = (props: LoadUploadFileProps) => {
   /****  ALL HOOKS HERE  ****/
@@ -51,8 +59,8 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
  
   const dispatch = useDispatch();
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [isValidated, setIsValidated] = useState<boolean>(newMigrationData?.legacy_cms?.uploadedFile?.isValidated || false);
-  const [showMessage, setShowMessage] = useState<boolean>(!!newMigrationData?.legacy_cms?.uploadedFile?.isValidated);
+  const [isValidated, setIsValidated] = useState<boolean>(newMigrationData?.legacy_cms?.uploadedFile?.isValidated);
+  const [showMessage, setShowMessage] = useState<boolean>(newMigrationData?.legacy_cms?.uploadedFile?.isValidated);
   const [validationMessgae, setValidationMessage] = useState<string>('');
   const [isValidationAttempted, setIsValidationAttempted] = useState<boolean>(false);
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
@@ -62,6 +70,9 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
   const [fileExtension, setFileExtension] = useState<string>('');
   const [progressPercentage, setProgressPercentage] = useState<number>(0);
   const [showProgress, setShowProgress]= useState<boolean>(false);
+  const [fileFormat, setFileFormat] = useState(newMigrationData?.legacy_cms?.selectedFileFormat?.title);
+  const [processing, setProcessing] = useState('');
+  const [isCancelLoading, setIsCancelLoading] = useState<boolean>(false);
 
   const { projectId = '' } = useParams();
   
@@ -75,101 +86,84 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
     setIsLoading(true);
     setProgressPercentage(30);
     setShowProgress(true);
+    setProcessing('Processing..30%')
 
     const res: any = await fileValidation(projectId);
-    if(res?.status === 200){ 
-      setIsValidated(true);
-      setValidationMessage('Validated');
-      const newMigrationDataObj: INewMigration = {
-        ...newMigrationData,
-        legacy_cms: {
-          ...newMigrationData?.legacy_cms,
-          uploadedFile: {
-            name: res?.data?.localPath,
-            url: res?.data?.localPath,
-            validation: res?.data?.message,
-            isValidated: res?.status == 200 ? true : false,
-            file_details: {
-              isLocalPath: res?.data?.file_details?.isLocalPath,
-              cmsType: res?.data?.file_details?.cmsType,
-              localPath: res?.data?.file_details?.localPath,
-              awsData: {
-                awsRegion: res?.data?.file_details?.awsData?.awsRegion,
-                bucketName: res?.data?.file_details?.awsData?.bucketName,
-                buketKey: res?.data?.file_details?.awsData?.buketKey
-              }
+
+    const newMigrationDataObj: INewMigration = {
+      ...newMigrationData,
+      legacy_cms: {
+        ...newMigrationData?.legacy_cms,
+        uploadedFile: {
+          name: res?.data?.localPath,
+          url: res?.data?.localPath,
+          validation: res?.data?.message,
+          isValidated: res?.status == 200 ? true : false,
+          file_details: {
+            isLocalPath: res?.data?.file_details?.isLocalPath,
+            cmsType: res?.data?.file_details?.cmsType,
+            localPath: res?.data?.file_details?.localPath,
+            awsData: {
+              awsRegion: res?.data?.file_details?.awsData?.awsRegion,
+              bucketName: res?.data?.file_details?.awsData?.bucketName,
+              buketKey: res?.data?.file_details?.awsData?.buketKey
             }
-            
           }
+          
         }
-      };
+      }
+    };
+   
+    dispatch(updateNewMigrationData(newMigrationDataObj));
 
-      await updateFileFormatData(selectedOrganisation?.value, projectId, {
-        file_format: newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id?.toString(),
-        file_path: res?.data?.file_details?.localPath,
-        is_fileValid: res?.status == 200 ? true : false,
-        awsDetails:{
-          awsRegion: res?.data?.file_details?.awsData?.awsRegion,
-          bucketName: res?.data?.file_details?.awsData?.bucketName,
-          buketKey: res?.data?.file_details?.awsData?.buketKey
-        }
-      });
-      
-      dispatch(updateNewMigrationData(newMigrationDataObj));
-      
+    if(res?.status === 200){ 
+      setIsValidated(true);
+      setValidationMessage('Validation is successful');
       
-      if(! isEmptyString(newMigrationData?.legacy_cms?.affix) && ! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) && ! isEmptyString(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id)){
+      if(! isEmptyString(newMigrationData?.legacy_cms?.affix) || ! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) || ! isEmptyString(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id)){
         props.handleStepChange(props?.currentStep, true);
       }
       
     }
-    else{
+    else if(res?.status === 500){
+      setIsValidated(false);
+      setValidationMessage('File not found');
+      setIsValidationAttempted(true);
+      setProgressPercentage(100);
+    
+    }
+    else if(res?.status === 429){
       setIsValidated(false);
+      setValidationMessage('Rate limit exceeded. Please wait and try again.');
+      setIsValidationAttempted(true);
+      setProgressPercentage(100);
+
+    }
+    else{
+      //setIsValidated(false);
       setValidationMessage('Validation Falied');
       setIsValidationAttempted(true);
       setProgressPercentage(100);
-      await updateFileFormatData(selectedOrganisation?.value, projectId, {
-        file_format: newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id?.toString(),
-        file_path: res?.data?.file_details?.localPath,
-        is_fileValid: res?.status == 200 ? true : false,
-        awsDetails:{
-          awsRegion: res?.data?.file_details?.awsData?.awsRegion,
-          bucketName: res?.data?.file_details?.awsData?.bucketName,
-          buketKey: res?.data?.file_details?.awsData?.buketKey
-        }
-      });
-      const newMigrationDataObj: INewMigration = {
-        ...newMigrationData,
-        legacy_cms: {
-          ...newMigrationData?.legacy_cms,
-          uploadedFile: {
-            name: res?.data?.localPath,
-            url: res?.data?.localPath,
-            validation: res?.data?.message,
-            isValidated: res?.status == 200 ? true : false,
-            file_details: {
-              isLocalPath: res?.data?.file_details?.isLocalPath,
-              cmsType: res?.data?.file_details?.cmsType,
-              localPath: res?.data?.file_details?.localPath,
-              awsData: {
-                awsRegion: res?.data?.file_details?.awsData?.awsRegion,
-                bucketName: res?.data?.file_details?.awsData?.bucketName,
-                buketKey: res?.data?.file_details?.awsData?.buketKey
-              }
-            }
-            
-          }
-        }
-      };
-      
-      dispatch(updateNewMigrationData(newMigrationDataObj));
 
     }
 
+    saveStateToLocalStorage({
+      isLoading,
+      isConfigLoading,
+      cmsType,
+      fileDetails,
+      fileExtension,
+      progressPercentage,
+      showProgress,
+      fileFormat,
+      processing
+    }, projectId);
+
     setShowMessage(true);
     setIsLoading(false);
     setProgressPercentage(100);
     setTimeout(() => {
+      setProcessing('Processing ...100%')
       setShowProgress(false); 
     }, 1000);
   
@@ -231,20 +225,19 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
       }
 
         
-    if (res?.data?.localPath !== newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath) {
-      setIsDisabled(false); 
-      setShowMessage(true);
-      setValidationMessage('');
-    }
+    // if (res?.data?.localPath !== newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath) {
+    //   console.log("INNNNNNNNN",res?.data?.localPath, newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath);
       
+    //   setIsDisabled(false); 
+    //   //setShowMessage(true);
+    //   setValidationMessage('');
+    // }
   }
-  else if(! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent?.toLowerCase()) && 
-    newMigrationData?.legacy_cms?.selectedCms?.parent.toLowerCase() !== res?.data?.cmsType.toLowerCase()
-     || fileExtension !== newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id
-    )
-    {  
+  if((! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent?.toLowerCase()) && 
+    newMigrationData?.legacy_cms?.selectedCms?.parent.toLowerCase() !== res?.data?.cmsType.toLowerCase()))
+    {     
       setIsValidated(false);
-      setValidationMessage('Validation Falied');
+      setValidationMessage('file format is not appropriate');
       setIsValidationAttempted(true);
       setShowMessage(true);
       setIsLoading(false);
@@ -255,43 +248,138 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
 
   }
 
-  const allowedFileExtentions = `.${
-    newMigrationData?.legacy_cms?.selectedFileFormat?.title || 'zip'
-  }`;
+  const handleCancelValidation = async() => {
+    setIsCancelLoading(true);
+    const response = await removeContentMapper(selectedOrganisation?.uid || '',projectId);
+
+    if (response?.status === 200) {
+      setIsValidated(false);
+      setValidationMessage('');
+      setShowMessage(false);
+      setIsDisabled(false);
+      setIsValidationAttempted(false);
+      const newMig = {
+        ...newMigrationData,
+        legacy_cms: {
+          ...newMigrationData?.legacy_cms,
+          uploadedFile: {
+            validation: validationMessgae,
+            isValidated: false,
+          }
+        }
+      }
+      dispatch(updateNewMigrationData(newMig));
+    }
+  
+    setIsCancelLoading(false);
+  }
 
   useEffect(() => {
     getConfigDetails();
   }, []);
 
+  useEffect(() => {
+    const savedState = getStateFromLocalStorage(projectId);
+    if (savedState) {
+      setIsLoading(savedState.isLoading);
+      //setIsDisabled(savedState.isDisabled);
+      setIsConfigLoading(savedState.isConfigLoading);
+      setCmsType(savedState.cmsType);
+      setFileDetails(savedState.fileDetails);
+      setFileExtension(savedState.fileExtension);
+      setProgressPercentage(savedState.progressPercentage);
+      setShowProgress(savedState.showProgress);
+      setFileFormat(savedState.fileFormat);
+      setProcessing(savedState.processing);
+    }
+    if (savedState && savedState.isLoading) {
+      handleOnFileUploadCompletion();
+    }
+  },[]);
+
+  useEffect(() => {
+    saveStateToLocalStorage({
+      isLoading,
+      isConfigLoading,
+      cmsType,
+      fileDetails,
+      fileExtension,
+      progressPercentage,
+      showProgress,
+      fileFormat,
+      processing
+    },projectId);
+  }, [
+    isLoading,
+    isConfigLoading,
+    cmsType,
+    fileDetails,
+    fileExtension,
+    progressPercentage,
+    showProgress,
+    fileFormat,
+    processing
+  ]);
+
   useEffect(()=>{
-    if(newMigrationData?.legacy_cms?.uploadedFile?.isValidated){
+    
+    if(newMigrationData?.legacy_cms?.uploadedFile?.isValidated)
+    {   
       setIsValidated(true);
-      setValidationMessage('Validated');
+      setShowMessage(true)
+      setValidationMessage('Validation is successful');
       setIsDisabled(true);
-      props.handleStepChange(props?.currentStep, true);
+      ! isEmptyString(newMigrationData?.legacy_cms?.affix) || ! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) || ! isEmptyString(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id) && props.handleStepChange(props?.currentStep, true);
   
     }
-    else{
-      setIsValidated(false);
-    }
-    
+    // else{
+    //   setIsValidated(false);
+    // }
   },[isValidated,newMigrationData])
 
+  useEffect(()=>{
+    if(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id){
+    setFileFormat(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id);}
+
+  },[newMigrationData?.legacy_cms?.selectedFileFormat]);
+
   const validationClassName = isValidated ? 'success' : 'error';
-  
-  const containerClassName = `validation-container ${isValidationAttempted && !isValidated ? 'error-container pb-2' : ''}`;
 
+  const containerClassName = `validation-container ${isValidationAttempted && !isValidated ? 'error-container pb-2' : ''}`;
+  
   return (
     <div className="row">
       <div className="col-12">
         <div className="col-12">
           <div className={containerClassName}>
             {!isConfigLoading && !isEmptyString(cmsType) ? (
-              <FileComponent fileDetails={fileDetails || {}} />
+              <div className='file-icon-group'>
+                <FileComponent fileDetails={fileDetails || {}} />
+                {(showMessage &&  !isCancelLoading) && 
+                  (<Tooltip content='cancel validation' position='top'>
+                    <Icon icon='CloseNoborder' version='v2' onClick={handleCancelValidation}/>
+
+                  </Tooltip> )
+                }
+                { isCancelLoading &&   
+                  <div style={{justifyContent:'center', alignItems:'center', marginTop:'7px'}}>
+                    <AsyncLoader color='$color-brand-primary-base'/>
+                  </div>
+              }
+              </div>
+              
+
             ) :
               <Paragraph className="pb-2" tagName="p" variant='p1' text={'Please verify the CMS'}/>}
             {showMessage  &&
-              (<Paragraph className={`${validationClassName}` } tagName='p' variant="p2" text={validationMessgae}/>)
+              (
+              <>
+                <Paragraph className={`${validationClassName}` } tagName='p' variant="p2" text={validationMessgae}/>
+              </>
+              )
+            }
+            {showProgress && isLoading && 
+              <Paragraph className='pb-2' tagName='p' variant="p2" text={processing}/>
             }
            
           </div>
diff --git a/ui/src/components/LegacyCms/index.tsx b/ui/src/components/LegacyCms/index.tsx
index fbfe5ad84..6be6040bb 100644
--- a/ui/src/components/LegacyCms/index.tsx
+++ b/ui/src/components/LegacyCms/index.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState , useImperativeHandle} from 'react';
 import { useDispatch,useSelector } from 'react-redux';
 import AutoVerticalStepper from '../Stepper/VerticalStepper/AutoVerticalStepper';
 import { getLegacyCMSSteps } from './StepperSteps';
@@ -33,7 +33,7 @@ type LegacyCMSComponentProps = {
   handleOnAllStepsComplete:(flag : boolean)=>void;
 };
 
-const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted, handleStepChange, handleOnAllStepsComplete }: LegacyCMSComponentProps, ref) => {
+const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted, handleOnAllStepsComplete, }: LegacyCMSComponentProps, ref) => {
   //react-redux apis
   const migrationData = useSelector((state:RootState)=>state?.migration?.migrationData);
   const  newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
@@ -59,6 +59,10 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted
   const handleAllStepsComplete = (flag = false) => {
     handleOnAllStepsComplete(flag);
   };
+
+  useImperativeHandle(ref, () => ({
+    getInternalActiveStepIndex: () => internalActiveStepIndex
+  }));
   
 
   // handle on proceed to destination stack
@@ -148,9 +152,9 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted
             (cms: ICardType) => cms?.fileformat_id === legacyCMSData?.file_format
           )
         : defaultCardType;
-  
+    
       //Make Step 1 Complete
-      if (!isEmptyString(selectedCmsData?.cms_id)) {
+      if (!isEmptyString(selectedCmsData?.cms_id || newMigrationData?.legacy_cms?.selectedCms?.cms_id)) {    
         setInternalActiveStepIndex(0);
       }
   
@@ -177,15 +181,13 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted
               localPath: legacyCMSData?.file_path,
               awsData: legacyCMSData?.awsDetails
             },
-            isValidated: legacyCMSData?.is_fileValid
+            isValidated: legacyCMSData?.is_fileValid || newMigrationData?.legacy_cms?.uploadedFile?.isValidated
           }, //need to add backend data once endpoint exposed.
           affix: legacyCMSData?.affix || newMigrationData?.legacy_cms?.affix || '',
           isFileFormatCheckboxChecked: true, //need to add backend data once endpoint exposed.
           isRestictedKeywordCheckboxChecked: true //need to add backend data once endpoint exposed.
         }
       }))
-      
-  
       setIsLoading(false);
   
       //Check for migration Status and lock.
@@ -202,8 +204,8 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted
     setisValidated(newMigrationData?.legacy_cms?.uploadedFile?.isValidated || false);
   }, [isLoading]);
 
-  useEffect(() => {
-    if (autoVerticalStepper?.current) {
+  useEffect(() => { 
+    if (autoVerticalStepper?.current) {  
       if (internalActiveStepIndex > -1) {
         autoVerticalStepper.current.handleDynamicStepChange(internalActiveStepIndex);
       }
@@ -216,6 +218,25 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted
       }
     }
   }, [internalActiveStepIndex]);  
+
+  useEffect(()=>{
+    if (!isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id)) {    
+      setInternalActiveStepIndex(0);
+    }
+
+    //Make Step 2 complete
+    if (!isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) && !isEmptyString(newMigrationData?.legacy_cms?.affix)) {
+      setInternalActiveStepIndex(1);
+    }
+    if(!isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) && !isEmptyString(newMigrationData?.legacy_cms?.affix) && ! isEmptyString(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id)){
+      setInternalActiveStepIndex(2);
+    }
+    if(!isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) && !isEmptyString(newMigrationData?.legacy_cms?.affix) && ! isEmptyString(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id) && newMigrationData?.legacy_cms?.uploadedFile?.isValidated){
+      setInternalActiveStepIndex(3);
+    }
+
+  },[newMigrationData]);
+
   return (
     <>
       {isLoading ? (
diff --git a/ui/src/components/LegacyCms/legacyCms.scss b/ui/src/components/LegacyCms/legacyCms.scss
index 511eeac2a..275bbf6d8 100644
--- a/ui/src/components/LegacyCms/legacyCms.scss
+++ b/ui/src/components/LegacyCms/legacyCms.scss
@@ -70,10 +70,11 @@
 }
 .validation-container {
   display: flex;
+  flex-direction: column;
+  justify-content: center;
   background-color: $color-base-white-5;
   height: 72px;
   width: 592px;
-  align-items: center;
   margin-left: 20px !important;
   border: 1px solid $color-brand-secondary-lightest;
   border-radius: var(--TermCount, 5px);
@@ -129,4 +130,9 @@
   align-items: center;
   margin-left: 20px !important;
   margin-top: 10px;
-}
\ No newline at end of file
+}
+.file-icon-group{
+  display:flex;
+  flex-direction: row;
+  gap: 30px;
+}
diff --git a/ui/src/components/MainHeader/index.scss b/ui/src/components/MainHeader/index.scss
index fa7155642..a08bd3287 100644
--- a/ui/src/components/MainHeader/index.scss
+++ b/ui/src/components/MainHeader/index.scss
@@ -1,6 +1,21 @@
 @import '../../scss/variables';
 
 .mainheader {
+  [class*="Profile_card"] {
+    [class*="Dropdown__menu__list"] {
+      padding: 0;
+    }
+
+    [class*="Dropdown__menu__list__item"] {
+      pointer-events: none;
+      padding: 0;
+
+      [class*="profile-card__logout"] {
+        pointer-events: all;
+      }
+    }
+  }
+
   background-color: $color-brand-white-base;
   height: 3.5rem;
   justify-content: space-between;
@@ -10,13 +25,16 @@
   display: flex;
   align-items: center;
   z-index: 100;
+
   button {
     border: 0 none;
   }
+
   .logo {
     position: relative;
     text-align: center;
     width: 3.5rem;
+
     a {
       align-items: center;
       display: flex;
@@ -25,32 +43,40 @@
       padding: 0.5rem;
       text-decoration: none;
     }
+
     a:focus {
       border-radius: 5px;
       box-shadow: 0 0 1px $color-brand-primary-base, 0 0 0 4px #bbb4f4;
     }
   }
+
   .organisationWrapper {
     margin-left: 1.063rem;
+
     &:focus {
       box-shadow: none;
     }
-  } 
+  }
+
   .Dropdown {
     &:focus {
       box-shadow: none;
     }
   }
+
   .Dropdown-wrapper {
     padding: 0 18px;
   }
+
   .Dropdown.Dropdown--hover .Dropdown__menu--primary {
     top: 2.5rem;
   }
+
   .organisationWrapper {
     &:focus {
       box-shadow: none;
     }
+
     .Dropdown__header__value {
       color: #475161;
       max-width: 11.1875rem;
@@ -58,14 +84,16 @@
       color: $color-black-222 !important;
       line-height: $line-height-reset;
     }
+
     .Dropdown__menu--primary .Dropdown__menu__list__item,
     .Dropdown__menu--secondary .Dropdown__menu__list__item,
     .Dropdown__menu--tertiary .Dropdown__menu__list__item {
       max-width: 14.5rem;
     }
+
     .Dropdown__header__label {
       line-height: $line-height-reset;
       margin-bottom: 8px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx
index 1061a0712..568bdd8a0 100644
--- a/ui/src/components/MainHeader/index.tsx
+++ b/ui/src/components/MainHeader/index.tsx
@@ -1,7 +1,7 @@
 // Libraries
 import { useEffect, useState } from 'react';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
-import { Dropdown, Tooltip } from '@contentstack/venus-components';
+import { Dropdown, Tooltip} from '@contentstack/venus-components';
 import { useDispatch, useSelector } from 'react-redux';
 
 // Service
@@ -23,6 +23,7 @@ import {
 import { MainHeaderType } from './mainheader.interface';
 import { IDropDown } from '../../context/app/app.interface';
 
+import ProfileCard from '../ProfileHeader';
 // Styles
 import './index.scss';
 
@@ -129,12 +130,12 @@ const MainHeader = () => {
               <Dropdown
                 list={[
                   {
-                    action: handleLogout,
                     default: true,
-                    label: 'Logout'
+                    label: <ProfileCard/>,
                   }
                 ]}
                 type="click"
+                className="Profile_card"
               >
                 <div className="user-short-name flex-v-center flex-h-center">{name}</div>
               </Dropdown>
diff --git a/ui/src/components/MigrationFlowHeader/index.tsx b/ui/src/components/MigrationFlowHeader/index.tsx
index 1b081efcf..7bc9ba9b8 100644
--- a/ui/src/components/MigrationFlowHeader/index.tsx
+++ b/ui/src/components/MigrationFlowHeader/index.tsx
@@ -1,6 +1,6 @@
 // Libraries
-import { useEffect, useState } from 'react';
-import { Button } from '@contentstack/venus-components';
+import { useEffect, useRef, useState } from 'react';
+import { Button, cbModal } from '@contentstack/venus-components';
 import { useDispatch, useSelector } from 'react-redux';
 import { Params, useNavigate, useParams } from 'react-router';
 
@@ -12,23 +12,33 @@ import { getProject } from '../../services/api/project.service';
 
 // Interfaces
 import { DEFAULT_NEW_MIGRATION } from '../../context/app/app.interface';
+import { ModalObj } from '../Modal/modal.interface';
 
 // CSS
 import './index.scss';
+import NotificationModal from '../Common/NotificationModal';
+import { isEmptyString } from '../../utilities/functions';
+import { RootState } from '../../store';
 
 type MigrationFlowHeaderProps = {
   handleOnClick: (event: MouseEvent, handleStepChange: (currentStep: number) => void) => void;
   isLoading: boolean;
+  isCompleted: boolean;
+  legacyCMSRef: React.MutableRefObject<any>; 
 };
 
-const MigrationFlowHeader = ({ handleOnClick, isLoading }: MigrationFlowHeaderProps) => {
+const MigrationFlowHeader = ({ handleOnClick, isLoading, isCompleted , legacyCMSRef}: MigrationFlowHeaderProps) => {
   const [projectName, setProjectName] = useState('');
+  const [currentStep, setCurrentStep] = useState<number>(0);
 
   const navigate = useNavigate();
   const params: Params<string> = useParams();
   const dispatch = useDispatch();
 
   const selectedOrganisation = useSelector((state:any)=>state?.authentication?.selectedOrganisation);
+  const newMigrationData = useSelector((state:RootState)=> state?.migration?.newMigrationData);
+
+  //const legacyCMSRef = useRef<any>(null);
 
   useEffect(() => {
     fetchProject();
@@ -40,6 +50,7 @@ const MigrationFlowHeader = ({ handleOnClick, isLoading }: MigrationFlowHeaderPr
 
     if (response?.status === 200) {
       setProjectName(response?.data?.name);
+      setCurrentStep(response?.data?.current_step);
 
       //Navigate to lastest or active Step
       const url = `/projects/${params?.projectId}/migration/steps/${response?.data?.current_step}`;
@@ -48,6 +59,33 @@ const MigrationFlowHeader = ({ handleOnClick, isLoading }: MigrationFlowHeaderPr
   };
 
   const backNavigation = () => {
+    
+    const goback = () => {
+      dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION))
+      navigate(-1);
+    }
+   
+
+    if (legacyCMSRef.current) {
+      const currentIndex = legacyCMSRef.current.getInternalActiveStepIndex() + 1 ; 
+
+      if(-1 < currentIndex && currentIndex < 4 && ( !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) || !isEmptyString(newMigrationData?.legacy_cms?.affix) )&& currentStep === 1
+        ){
+        return cbModal({
+          component: (props: ModalObj) => (
+            <NotificationModal
+            goBack={goback}
+            {...props}
+            />
+          ),
+          modalProps: {
+            size: 'xsmall',
+            shouldCloseOnOverlayClick: false
+          }
+        });
+      }
+    }
+
     dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION))
     navigate(-1);
   }
diff --git a/ui/src/components/Modal/index.tsx b/ui/src/components/Modal/index.tsx
index 2f4c433b0..3ec3cc865 100644
--- a/ui/src/components/Modal/index.tsx
+++ b/ui/src/components/Modal/index.tsx
@@ -159,7 +159,7 @@ const Modal = (props: ProjectModalProps) => {
                           <Textarea
                             {...input}
                             value={input?.value}
-                            onChange={(event: any): any => {
+                            onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
                               input.onChange(event);
                             }}
                             id="description"
diff --git a/ui/src/components/ProfileHeader/index.scss b/ui/src/components/ProfileHeader/index.scss
new file mode 100644
index 000000000..193fd1886
--- /dev/null
+++ b/ui/src/components/ProfileHeader/index.scss
@@ -0,0 +1,78 @@
+@import '../../scss/variables';
+
+.profile-card {
+  width: 300px;
+  padding: 16px;
+  // background-color: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.profile-card__avatar {
+  margin-bottom: 16px;
+}
+
+.profile-card__initials {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background-color: #2c3e50;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  margin: 12px auto;
+  
+}
+
+.profile-card__details {
+  margin-bottom: 16px;
+}
+
+.profile-card__name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #2c3e50;
+  margin-bottom: 5px;
+}
+
+.profile-card__email {
+  font-size: 14px;
+  color: #7f8c8d;
+  margin-bottom: 5px;
+}
+
+.profile-card__logout {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: #2c3e50;
+  font-size: 14px;
+  height:56px;
+}
+
+.profile-card__logout-icon {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+.profile-card__logout-text {
+  text-decoration: underline;
+}
+
+.profile-gray-background {
+  min-height: 20px;
+  position: absolute;
+  width: 350px;
+  height: 64px;
+  top: 0;
+  left: 0;
+  background-color: #F9F8FF;
+  z-index: 1;
+}
+.profile-card__avatar {
+  z-index: 2;
+  position: relative;
+}
\ No newline at end of file
diff --git a/ui/src/components/ProfileHeader/index.tsx b/ui/src/components/ProfileHeader/index.tsx
new file mode 100644
index 000000000..36c067b1a
--- /dev/null
+++ b/ui/src/components/ProfileHeader/index.tsx
@@ -0,0 +1,40 @@
+// Redux
+import { RootState } from '../../store';
+
+import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import {
+  clearLocalStorage,
+} from '../../utilities/functions';
+// Styles
+import './index.scss';
+import { LOG_OUT } from '../../common/assets';
+const ProfileCard = () => {
+  const user = useSelector((state:RootState)=>state?.authentication?.user);
+  const name = `${user?.first_name?.charAt(0)}${user?.last_name?.charAt(0)}`.toUpperCase() ?? '';
+  const navigate = useNavigate();
+   // Function for Logout
+   const handleLogout = () => {
+    if (clearLocalStorage()) {
+      navigate('/', { replace: true });
+    }
+  };
+  return (
+    <div className="profile-card">
+      <div className='profile-gray-background'/>
+      <div className="profile-card__avatar">
+        <div className="profile-card__initials">{name}</div>
+      </div>
+      <div className="profile-card__details">
+        <div className="profile-card__name">{user?.first_name} {user?.last_name}</div>
+        <div className="profile-card__email">{user?.email}</div>
+      </div>
+      <div className="profile-card__logout" onClick={handleLogout}>
+        <span className="profile-card__logout-icon">{LOG_OUT}</span>
+        <span className="profile-card__logout-text">Log out</span>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileCard;
diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx
index 67d4cafb1..e88129129 100644
--- a/ui/src/pages/Migration/index.tsx
+++ b/ui/src/pages/Migration/index.tsx
@@ -8,7 +8,7 @@ import { RootState } from '../../store';
 import {  updateMigrationData, updateNewMigrationData } from '../../store/slice/migrationDataSlice';
 
 // Services
-import { getMigrationData, updateCurrentStepData, updateLegacyCMSData, updateDestinationStack, createTestStack } from '../../services/api/migration.service';
+import { getMigrationData, updateCurrentStepData, updateLegacyCMSData, updateDestinationStack, createTestStack, updateAffixData, fileformatConfirmation, updateFileFormatData } from '../../services/api/migration.service';
 import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
 
 // Utilities
@@ -47,6 +47,7 @@ const Migration = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const stepperRef = useRef<any>(null);
+  const legacyCMSRef = useRef<any>(null);
 
   const selectedOrganisation = useSelector((state: RootState)=>state?.authentication?.selectedOrganisation);
   const newMigrationData = useSelector((state:RootState)=> state?.migration?.newMigrationData);
@@ -102,6 +103,7 @@ const Migration = () => {
     const steps = [
       {
         data: <LegacyCms
+              ref={legacyCMSRef}
               legacyCMSData={projectData?.legacy_cms}
               projectData={projectData}
               handleStepChange={handleStepChange}
@@ -150,7 +152,7 @@ const Migration = () => {
   };
 
 
-  const handleStepChange = (currentStep: number) => {
+  const handleStepChange = (currentStep: number) => { 
     if (stepperRef?.current) {
       stepperRef.current.handleStepChange(currentStep-1);
     }
@@ -164,7 +166,6 @@ const Migration = () => {
     // handle on proceed to destination stack
     const handleOnClickLegacyCms = async (event: MouseEvent ) => {
       setIsLoading(true);
-
       if(isCompleted){
         event.preventDefault();
   
@@ -172,6 +173,20 @@ const Migration = () => {
       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,
+        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) {
@@ -185,13 +200,37 @@ const Migration = () => {
       else{
         setIsLoading(false);
 
-        Notification({
-          notificationContent: { text: 'Please complete all steps' },
-          type: 'warning'
-        });
+        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 = 'File Format';
+              break;
+            case 3:
+              result = 'Imported File';
+              break;
+            default:
+              result = 'all';
+              break;
+          }
+          Notification({
+            notificationContent: { text: `Please complete ${result} step` },
+            type: 'warning'
+          });
+        }
+
       }
       
     };
+
     // handle on proceed to content mapping
     const handleOnClickDestinationStack = async (event: MouseEvent) => {
       setIsLoading(true);
@@ -271,7 +310,7 @@ const Migration = () => {
 
   return (
     <div className='migration-steps-wrapper'>
-      <MigrationFlowHeader handleOnClick={handleOnClickFunctions[curreentStepIndex]} isLoading={isLoading} />
+      <MigrationFlowHeader handleOnClick={handleOnClickFunctions[curreentStepIndex]} isLoading={isLoading} isCompleted={isCompleted} legacyCMSRef={legacyCMSRef}   />
 
       <div className='steps-wrapper'>
         { projectData &&
diff --git a/ui/src/scss/_variables.scss b/ui/src/scss/_variables.scss
index 50c96918f..7d0474442 100644
--- a/ui/src/scss/_variables.scss
+++ b/ui/src/scss/_variables.scss
@@ -83,6 +83,7 @@ $radii-4: 4px;
 $radii-50: 50%;
 
 $px-2: 0.125rem; // 2px
+$px-3: 0.188rem; // 3px
 $px-4: 0.25rem; // 4px
 $px-5: 0.313rem; //5px
 $px-6: 0.375rem; // 6px
diff --git a/ui/src/services/api/migration.service.ts b/ui/src/services/api/migration.service.ts
index 59e4834ff..ecbf72acf 100644
--- a/ui/src/services/api/migration.service.ts
+++ b/ui/src/services/api/migration.service.ts
@@ -177,3 +177,12 @@ export const fetchExistingContentType = async (projectId: string, contentTypeUid
     return error;
   }
 }
+
+export const removeContentMapper = async(orgId: string, projectId: string) => {
+  try {
+    return await getCall(`${API_VERSION}/mapper/${orgId}/${projectId}/content-mapper`, options);   
+  } catch (error) {
+    return error;
+    
+  }
+}
diff --git a/ui/src/utilities/constants.ts b/ui/src/utilities/constants.ts
index ff8173676..5cc329f5c 100644
--- a/ui/src/utilities/constants.ts
+++ b/ui/src/utilities/constants.ts
@@ -88,14 +88,14 @@ export const isOfflineCMSDataRequired = process.env.REACT_APP_OFFLINE_CMS
   : true;
 
 export const CONTENT_MAPPING_STATUS: ObjectType = {
-  '1': 'Auto-Mapped',
+  '1': 'Mapped',
   '2': 'Verified',
-  '3': 'Mapping Failed'
+  '3': 'Failed'
   // '4': 'Auto-Dump'
 }
 export const STATUS_ICON_Mapping: { [key: string]: string } = {
-  '1': 'Information',
-  '2': 'CheckCircleDark',
-  '3': 'Warning',
-  '4': 'completed'
+  '1': 'CheckedCircle',
+  '2': 'SuccessInverted',
+  '3': 'ErrorInverted',
+  // '4': 'completed'
 };
\ No newline at end of file