diff --git a/apps/api/src/app/mapping/mapping.controller.ts b/apps/api/src/app/mapping/mapping.controller.ts
index 1b566940e..97c55d459 100644
--- a/apps/api/src/app/mapping/mapping.controller.ts
+++ b/apps/api/src/app/mapping/mapping.controller.ts
@@ -13,10 +13,9 @@ import {
   DoMapping,
   GetMappings,
   FinalizeUpload,
-  ReanameFileHeadings,
-  DoMappingCommand,
   UpdateMappings,
   ValidateMapping,
+  ReanameFileHeadings,
 } from './usecases';
 
 @Controller('/mapping')
@@ -56,13 +55,11 @@ export class MappingController {
     ]);
 
     if (uploadInformation.status === UploadStatusEnum.UPLOADED) {
-      await this.doMapping.execute(
-        DoMappingCommand.create({
-          headings: uploadInformation.headings,
-          _templateId: uploadInformation._templateId,
-          _uploadId: uploadId,
-        })
-      );
+      await this.doMapping.execute({
+        headings: uploadInformation.headings,
+        _templateId: uploadInformation._templateId,
+        _uploadId: uploadId,
+      });
     }
 
     return this.getMappings.execute(uploadId);
diff --git a/apps/api/src/app/mapping/usecases/do-mapping/do-mapping.command.ts b/apps/api/src/app/mapping/usecases/do-mapping/do-mapping.command.ts
index 726a5fced..8ae2dc58a 100644
--- a/apps/api/src/app/mapping/usecases/do-mapping/do-mapping.command.ts
+++ b/apps/api/src/app/mapping/usecases/do-mapping/do-mapping.command.ts
@@ -1,16 +1,5 @@
-import { IsArray, IsDefined, IsMongoId } from 'class-validator';
-import { BaseCommand } from '@shared/commands/base.command';
-
-export class DoMappingCommand extends BaseCommand {
-  @IsDefined()
-  @IsMongoId()
+export class DoMappingCommand {
   _uploadId: string;
-
-  @IsDefined()
-  @IsMongoId()
   _templateId: string;
-
-  @IsDefined()
-  @IsArray()
   headings: string[];
 }
diff --git a/apps/api/src/app/review/usecases/do-review/base-review.usecase.ts b/apps/api/src/app/review/usecases/do-review/base-review.usecase.ts
index cab846e38..b6e6b2d3e 100644
--- a/apps/api/src/app/review/usecases/do-review/base-review.usecase.ts
+++ b/apps/api/src/app/review/usecases/do-review/base-review.usecase.ts
@@ -31,6 +31,7 @@ interface IBatchItem {
 interface IRunData {
   extra: any;
   uploadId: string;
+  headerRow: number;
   headings: string[];
   csvFileStream: any;
   dataStream: Writable;
@@ -392,6 +393,7 @@ export class BaseReview {
     headings,
     dateFormats,
     dataStream,
+    headerRow,
     uniqueCombinations,
     numberColumnHeadings,
     validationErrorMessages,
@@ -408,7 +410,7 @@ export class BaseReview {
           totalRecords++;
           const record = results.data;
 
-          if (totalRecords >= 1) {
+          if (totalRecords > headerRow) {
             const recordObj: {
               checkRecord: Record<string, unknown>;
               passRecord: Record<string, unknown>;
@@ -574,8 +576,9 @@ export class BaseReview {
     validator,
     uploadId,
     extra,
-    csvFileStream,
+    headerRow,
     dateFormats,
+    csvFileStream,
     uniqueCombinations,
     numberColumnHeadings,
     validationErrorMessages,
@@ -598,7 +601,7 @@ export class BaseReview {
               checkRecord: Record<string, unknown>;
               passRecord: Record<string, unknown>;
             } = this.formatRecord({ headings, multiSelectColumnHeadings, record, numberColumnHeadings });
-            if (recordsCount >= 1) {
+            if (recordsCount > headerRow) {
               const validationResultItem = this.validateRecord({
                 index: recordsCount,
                 checkRecord: recordObj.checkRecord,
diff --git a/apps/api/src/app/review/usecases/do-review/do-review.usecase.ts b/apps/api/src/app/review/usecases/do-review/do-review.usecase.ts
index bddb1663f..b92211c42 100644
--- a/apps/api/src/app/review/usecases/do-review/do-review.usecase.ts
+++ b/apps/api/src/app/review/usecases/do-review/do-review.usecase.ts
@@ -139,6 +139,7 @@ export class DoReview extends BaseReview {
         numberColumnHeadings,
         multiSelectColumnHeadings,
         validationErrorMessages,
+        headerRow: uploadInfo.headerRow,
       });
 
       await this.processBatches({
@@ -185,6 +186,7 @@ export class DoReview extends BaseReview {
         numberColumnHeadings,
         validationErrorMessages,
         multiSelectColumnHeadings,
+        headerRow: uploadInfo.headerRow,
       });
       response.invalidRecords = invalidRecords;
       response.totalRecords = totalRecords;
diff --git a/apps/api/src/app/upload/dtos/set-header.dto.ts b/apps/api/src/app/upload/dtos/set-header.dto.ts
new file mode 100644
index 000000000..e960f84fb
--- /dev/null
+++ b/apps/api/src/app/upload/dtos/set-header.dto.ts
@@ -0,0 +1,18 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { IsArray, IsNumber, IsOptional } from 'class-validator';
+
+export class SetHeaderDto {
+  @ApiProperty({
+    description: 'Index of the header row',
+  })
+  @IsOptional()
+  @IsNumber()
+  index?: number;
+
+  @ApiProperty({
+    description: 'Headings of the header row',
+    type: [String],
+  })
+  @IsArray()
+  headings: string[];
+}
diff --git a/apps/api/src/app/upload/upload.controller.ts b/apps/api/src/app/upload/upload.controller.ts
index 1652890ae..ec46a3b7a 100644
--- a/apps/api/src/app/upload/upload.controller.ts
+++ b/apps/api/src/app/upload/upload.controller.ts
@@ -11,6 +11,7 @@ import {
   Get,
   Param,
   Post,
+  Put,
   Query,
   Res,
   UploadedFile,
@@ -21,15 +22,18 @@ import { ApiTags, ApiSecurity, ApiConsumes, ApiOperation, ApiParam, ApiQuery, Ap
 
 import { GetUpload, GetAsset } from './usecases';
 import { JwtAuthGuard } from '@shared/framework/auth.gaurd';
-import { getAssetMimeType, validateNotFound } from '@shared/helpers/common.helper';
 import { validateUploadStatus } from '@shared/helpers/upload.helpers';
 import { PaginationResponseDto } from '@shared/dtos/pagination-response.dto';
 import { ValidateMongoId } from '@shared/validations/valid-mongo-id.validation';
 import { ValidateTemplate } from '@shared/validations/valid-template.validation';
 import { ValidImportFile } from '@shared/validations/valid-import-file.validation';
+import { getAssetMimeType, validateNotFound } from '@shared/helpers/common.helper';
 
+import { SetHeaderDto } from './dtos/set-header.dto';
 import { UploadRequestDto } from './dtos/upload-request.dto';
 import {
+  SetHeaderRow,
+  GetPreviewRows,
   TerminateUpload,
   MakeUploadEntry,
   GetUploadColumns,
@@ -46,6 +50,8 @@ export class UploadController {
   constructor(
     private getAsset: GetAsset,
     private getUpload: GetUpload,
+    private setHeaderRow: SetHeaderRow,
+    private getPreviewRows: GetPreviewRows,
     private terminateUpload: TerminateUpload,
     private makeUploadEntry: MakeUploadEntry,
     private getUploadColumns: GetUploadColumns,
@@ -151,6 +157,27 @@ export class UploadController {
     content.pipe(res);
   }
 
+  @Get(':uploadId/preview')
+  @ApiOperation({
+    summary: 'Get rows of the uploaded file',
+  })
+  async getPreviewRowsRoute(@Param('uploadId') uploadId: string) {
+    const uploadData = await this.getUploadProcessInfo.execute(uploadId);
+
+    // throw error if upload information not found
+    validateNotFound(uploadData, 'upload');
+
+    return this.getPreviewRows.execute((uploadData._uploadedFileId as unknown as FileEntity).path);
+  }
+
+  @Put(':uploadId/header')
+  @ApiOperation({
+    summary: 'Set header row of the uploaded file',
+  })
+  async setHeaderRowRoute(@Param('uploadId') uploadId: string, @Body() body: SetHeaderDto) {
+    await this.setHeaderRow.execute(uploadId, body);
+  }
+
   @Get(':uploadId/rows/valid')
   @ApiOperation({
     summary: 'Get valid rows of the uploaded file',
diff --git a/apps/api/src/app/upload/usecases/get-preview-rows/get-preview-rows.usecase.ts b/apps/api/src/app/upload/usecases/get-preview-rows/get-preview-rows.usecase.ts
new file mode 100644
index 000000000..b3485917e
--- /dev/null
+++ b/apps/api/src/app/upload/usecases/get-preview-rows/get-preview-rows.usecase.ts
@@ -0,0 +1,26 @@
+import * as Papa from 'papaparse';
+import { Injectable } from '@nestjs/common';
+import { StorageService } from '@impler/services';
+
+@Injectable()
+export class GetPreviewRows {
+  constructor(private storageServie: StorageService) {}
+
+  async execute(_uploadedFilePath: string) {
+    const csvFileStream = await this.storageServie.getFileStream(_uploadedFilePath);
+
+    return new Promise((resolve, reject) => {
+      Papa.parse(csvFileStream, {
+        dynamicTyping: false,
+        skipEmptyLines: true,
+        preview: 15,
+        complete({ data }) {
+          resolve(data);
+        },
+        error(error) {
+          reject(error);
+        },
+      });
+    });
+  }
+}
diff --git a/apps/api/src/app/upload/usecases/index.ts b/apps/api/src/app/upload/usecases/index.ts
index 9da9548ca..b2dd20b13 100644
--- a/apps/api/src/app/upload/usecases/index.ts
+++ b/apps/api/src/app/upload/usecases/index.ts
@@ -1,6 +1,8 @@
 import { GetAsset } from './get-asset/get-asset.usecase';
 import { GetUploadColumns } from './get-columns/get-columns.usecase';
+import { SetHeaderRow } from './set-header-row/set-header-row.usecase';
 import { GetUpload } from '@shared/usecases/get-upload/get-upload.usecase';
+import { GetPreviewRows } from './get-preview-rows/get-preview-rows.usecase';
 import { TerminateUpload } from './terminate-upload/terminate-upload.usecase';
 import { MakeUploadEntry } from './make-upload-entry/make-upload-entry.usecase';
 import { PaginateFileContent } from './paginate-file-content/paginate-file-content.usecase';
@@ -8,8 +10,10 @@ import { GetOriginalFileContent } from './get-original-file-content/get-original
 import { GetUploadProcessInformation } from './get-upload-process-info/get-upload-process-info.usecase';
 
 export const USE_CASES = [
+  GetPreviewRows,
   GetAsset,
   GetUpload,
+  SetHeaderRow,
   TerminateUpload,
   MakeUploadEntry,
   GetUploadColumns,
@@ -20,8 +24,10 @@ export const USE_CASES = [
 ];
 
 export {
+  GetPreviewRows,
   GetAsset,
   GetUpload,
+  SetHeaderRow,
   MakeUploadEntry,
   TerminateUpload,
   GetUploadColumns,
diff --git a/apps/api/src/app/upload/usecases/set-header-row/set-header-row.usecase.ts b/apps/api/src/app/upload/usecases/set-header-row/set-header-row.usecase.ts
new file mode 100644
index 000000000..5bc43fe0f
--- /dev/null
+++ b/apps/api/src/app/upload/usecases/set-header-row/set-header-row.usecase.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@nestjs/common';
+import { UploadRepository } from '@impler/dal';
+import { ISetHeaderData } from '@impler/shared';
+
+@Injectable()
+export class SetHeaderRow {
+  constructor(private uploadRepository: UploadRepository) {}
+
+  async execute(_uploadId: string, data: ISetHeaderData) {
+    return this.uploadRepository.update(
+      { _id: _uploadId },
+      {
+        $set: {
+          headings: data.headings,
+          headerRow: typeof data.index !== 'undefined' ? data.index : -1,
+        },
+      }
+    );
+  }
+}
diff --git a/apps/widget/src/components/Common/Container/Container.tsx b/apps/widget/src/components/Common/Container/Container.tsx
index d108a55e7..0e9e46510 100644
--- a/apps/widget/src/components/Common/Container/Container.tsx
+++ b/apps/widget/src/components/Common/Container/Container.tsx
@@ -208,9 +208,9 @@ export function Container({ children }: PropsWithChildren<{}>) {
               styles: {
                 root: {
                   borderRadius: 'var(--border-radius)',
-                  backgroundColor: `var(--secondary-background)`,
+                  backgroundColor: `var(--stepper-background)`,
                   '&:hover': {
-                    backgroundColor: `var(--secondary-background-hover)`,
+                    backgroundColor: `var(--secondary-background)`,
                   },
                 },
               },
diff --git a/apps/widget/src/components/Common/Footer/Footer.tsx b/apps/widget/src/components/Common/Footer/Footer.tsx
index 7177df030..8850de555 100644
--- a/apps/widget/src/components/Common/Footer/Footer.tsx
+++ b/apps/widget/src/components/Common/Footer/Footer.tsx
@@ -85,6 +85,21 @@ export function Footer({
               {texts['PHASE0-1'].GENERATE_TEMPLATE}
             </Button>
           ),
+          [PhasesEnum.SELECT_HEADER]: (
+            <>
+              <Button
+                loading={secondaryButtonLoading}
+                disabled={secondaryButtonDisabled}
+                onClick={onPrevClick}
+                variant="outline"
+              >
+                {texts.SELECT_HEADER.FILE_DONT_HAVE_HEADERS}
+              </Button>
+              <Button loading={primaryButtonLoading} disabled={primaryButtonDisabled} onClick={onNextClick}>
+                {texts.SELECT_HEADER.CONFIRM_AND_CONTINUE}
+              </Button>
+            </>
+          ),
           [PhasesEnum.MAPPING]: (
             <>
               <Button
diff --git a/apps/widget/src/components/Common/Heading/Heading.tsx b/apps/widget/src/components/Common/Heading/Heading.tsx
index 54d73379d..9f0de89e6 100644
--- a/apps/widget/src/components/Common/Heading/Heading.tsx
+++ b/apps/widget/src/components/Common/Heading/Heading.tsx
@@ -18,6 +18,9 @@ export function Heading({ active, title, mode, hasImageUpload, texts, onClose }:
     {
       label: texts.STEPPER_TITLES.UPLOAD_FILE,
     },
+    {
+      label: texts.STEPPER_TITLES.SELECT_HEADER,
+    },
     {
       label: texts.STEPPER_TITLES.MAP_COLUMNS,
     },
diff --git a/apps/widget/src/components/Common/Table/HandsonTable.styles.min.css b/apps/widget/src/components/Common/Table/HandsonTable.styles.min.css
index c41541525..eaf65dbf6 100644
--- a/apps/widget/src/components/Common/Table/HandsonTable.styles.min.css
+++ b/apps/widget/src/components/Common/Table/HandsonTable.styles.min.css
@@ -3,7 +3,7 @@
     border-color: var(--border-color) !important;
 }
 .handsontable th {
-    background-color: var(--secondary-background) !important;
+    background-color: var(--stepper-background) !important;
     border-color: var(--border-color) !important;
 }
 .htCore thead tr th {
diff --git a/apps/widget/src/components/Common/Table/Table.tsx b/apps/widget/src/components/Common/Table/Table.tsx
index e51e8f9fa..c68e8378d 100644
--- a/apps/widget/src/components/Common/Table/Table.tsx
+++ b/apps/widget/src/components/Common/Table/Table.tsx
@@ -164,6 +164,7 @@ interface TableProps {
   width?: string | number;
   selectEnabled?: boolean;
   afterRender?: () => void;
+  beforePaste?: () => void;
   columnDefs: HotItemSchema[];
   data?: Record<string, any>[];
   columnDescriptions?: string[];
@@ -181,6 +182,7 @@ export const Table = forwardRef<HotTableClass, TableProps>(
       headings,
       columnDefs,
       data,
+      beforePaste,
       columnDescriptions,
       allChecked,
       onRowCheck,
@@ -278,6 +280,7 @@ export const Table = forwardRef<HotTableClass, TableProps>(
         columns={columnDefs}
         colHeaders={headings}
         rowHeaders={rowHeaders}
+        beforePaste={beforePaste}
         afterRender={afterRender}
         minSpareRows={minSpareRows}
         fixedColumnsLeft={frozenColumns}
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase1/AutoImportPhase1.tsx b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase1/AutoImportPhase1.tsx
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase1/AutoImportPhase1.tsx
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase1/AutoImportPhase1.tsx
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase1/index.ts b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase1/index.ts
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase1/index.ts
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase1/index.ts
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase2/AutoImportPhase2.tsx b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase2/AutoImportPhase2.tsx
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase2/AutoImportPhase2.tsx
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase2/AutoImportPhase2.tsx
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase2/MappingHeading/MappingHeading.tsx b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase2/MappingHeading/MappingHeading.tsx
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase2/MappingHeading/MappingHeading.tsx
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase2/MappingHeading/MappingHeading.tsx
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase2/MappingHeading/Styles.tsx b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase2/MappingHeading/Styles.tsx
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase2/MappingHeading/Styles.tsx
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase2/MappingHeading/Styles.tsx
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase2/MappingHeading/index.ts b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase2/MappingHeading/index.ts
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase2/MappingHeading/index.ts
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase2/MappingHeading/index.ts
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase2/Styles.tsx b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase2/Styles.tsx
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase2/Styles.tsx
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase2/Styles.tsx
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase2/index.ts b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase2/index.ts
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase2/index.ts
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase2/index.ts
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase3/AutoImportPhase3.tsx b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/AutoImportPhase3.tsx
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase3/AutoImportPhase3.tsx
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/AutoImportPhase3.tsx
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase3/CollapsibleExplanationTable.tsx b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/CollapsibleExplanationTable.tsx
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase3/CollapsibleExplanationTable.tsx
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/CollapsibleExplanationTable.tsx
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase3/CronScheduleInputTextBox.tsx b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/CronScheduleInputTextBox.tsx
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase3/CronScheduleInputTextBox.tsx
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/CronScheduleInputTextBox.tsx
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase3/TooltipBadge.tsx b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/TooltipBadge.tsx
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase3/TooltipBadge.tsx
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/TooltipBadge.tsx
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase3/index.ts b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/index.ts
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase3/index.ts
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/index.ts
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase4/AutoImportPhase4.tsx b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase4/AutoImportPhase4.tsx
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase4/AutoImportPhase4.tsx
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase4/AutoImportPhase4.tsx
diff --git a/apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase4/index.ts b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase4/index.ts
similarity index 100%
rename from apps/widget/src/components/widget/Phases/AutoImportPhases/AutoImportPhase4/index.ts
rename to apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase4/index.ts
diff --git a/apps/widget/src/components/widget/Phases/Phase0-1/Phase0-1.tsx b/apps/widget/src/components/widget/Phases/ImageImport/ImageUpload.tsx
similarity index 94%
rename from apps/widget/src/components/widget/Phases/Phase0-1/Phase0-1.tsx
rename to apps/widget/src/components/widget/Phases/ImageImport/ImageUpload.tsx
index e2da4fb8a..4da432f9b 100644
--- a/apps/widget/src/components/widget/Phases/Phase0-1/Phase0-1.tsx
+++ b/apps/widget/src/components/widget/Phases/ImageImport/ImageUpload.tsx
@@ -11,15 +11,15 @@ import { colors, variables } from '@config';
 import { logAmplitudeEvent } from '@amplitude';
 import { FileDropzone } from '@ui/FileDropzone';
 import { Footer } from 'components/Common/Footer';
-import { usePhase01 } from '@hooks/Phase0-1/usePhase01';
+import { useImageUpload } from '@hooks/ImageUpload/useImageUpload';
 import { ImageWithIndicator } from '@ui/ImageWithIndicator';
 
-interface Phase01Props {
+interface ImageUploadProps {
   goToUpload: () => void;
   texts: typeof WIDGET_TEXTS;
 }
 
-export function Phase01({ goToUpload, texts }: Phase01Props) {
+export function ImageUpload({ goToUpload, texts }: ImageUploadProps) {
   const [showAlert, setShowAlert] = useLocalStorage<boolean>({
     key: variables.SHOW_IMAGE_ALERT_STORAGE_KEY,
     defaultValue: true,
@@ -33,7 +33,7 @@ export function Phase01({ goToUpload, texts }: Phase01Props) {
     onRemoveImage,
     isDownloadInProgress,
     onGenerateTemplateClick,
-  } = usePhase01({ goToUpload });
+  } = useImageUpload({ goToUpload });
   const wrapperRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
   const [containerHeight, setContainerHeight] = useState<number>(200);
 
diff --git a/apps/widget/src/components/widget/Phases/ImageImport/index.ts b/apps/widget/src/components/widget/Phases/ImageImport/index.ts
new file mode 100644
index 000000000..c3d6179dc
--- /dev/null
+++ b/apps/widget/src/components/widget/Phases/ImageImport/index.ts
@@ -0,0 +1 @@
+export * from './ImageUpload';
diff --git a/apps/widget/src/components/widget/Phases/Phase1-2/Phase1-2.tsx b/apps/widget/src/components/widget/Phases/ManualEntryImport/DataGrid.tsx
similarity index 88%
rename from apps/widget/src/components/widget/Phases/Phase1-2/Phase1-2.tsx
rename to apps/widget/src/components/widget/Phases/ManualEntryImport/DataGrid.tsx
index f45cebbe7..f741904fd 100644
--- a/apps/widget/src/components/widget/Phases/Phase1-2/Phase1-2.tsx
+++ b/apps/widget/src/components/widget/Phases/ManualEntryImport/DataGrid.tsx
@@ -8,12 +8,13 @@ import { MANUAL_ENTRY_LIMIT } from '@config';
 import { WIDGET_TEXTS } from '@impler/client';
 import { Table } from 'components/Common/Table';
 import { Footer } from 'components/Common/Footer';
-import { usePhase12 } from '@hooks/Phase1-2/usePhase12';
+import { LoadingOverlay } from '@ui/LoadingOverlay';
 import { SegmentedControl } from '@ui/SegmentedControl';
+import { useDataGrid } from '@hooks/DataGrid/useDataGrid';
 import { useCompleteImport } from '@hooks/useCompleteImport';
 import { FindReplaceModal } from 'components/widget/modals/FindReplace';
 import { numberFormatter, replaceVariablesInString } from '@impler/shared';
-import { useBatchedUpdateRecord } from '@hooks/Phase1-2/useBatchUpdateRecords';
+import { useBatchedUpdateRecord } from '@hooks/DataGrid/useBatchUpdateRecords';
 
 interface IPhase12Props {
   onPrevClick: () => void;
@@ -21,7 +22,7 @@ interface IPhase12Props {
   texts: typeof WIDGET_TEXTS;
 }
 
-export function Phase12({ onNextClick, onPrevClick, texts }: IPhase12Props) {
+export function DataGrid({ onNextClick, onPrevClick, texts }: IPhase12Props) {
   const tableRef = useRef<HotTableClass>(null);
   const {
     type,
@@ -39,8 +40,15 @@ export function Phase12({ onNextClick, onPrevClick, texts }: IPhase12Props) {
     isReviewDataLoading,
     showFindReplaceModal,
     setShowFindReplaceModal,
-  } = usePhase12({ limit: MANUAL_ENTRY_LIMIT });
-  const { updateRecord } = useBatchedUpdateRecord({ onUpdate: reReviewData });
+    isTemplateColumnsLoading,
+  } = useDataGrid({ limit: MANUAL_ENTRY_LIMIT });
+  const [isPasteLoading, setIsPasteLoading] = useState<boolean>(false);
+  const { updateRecord } = useBatchedUpdateRecord({
+    onUpdate: () => {
+      reReviewData();
+      setIsPasteLoading(false);
+    },
+  });
   const tableWrapperRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
   const { completeImport, isCompleteImportLoading } = useCompleteImport({ onNext: onNextClick });
   const [tableWrapperDimensions, setTableWrapperDimentions] = useState({
@@ -57,6 +65,8 @@ export function Phase12({ onNextClick, onPrevClick, texts }: IPhase12Props) {
 
   return (
     <>
+      <LoadingOverlay visible={isTemplateColumnsLoading || isPasteLoading} />
+
       <Stack ref={tableWrapperRef} style={{ flexGrow: 1 }} spacing="xs" align="flex-start">
         <Flex direction="row" justify="space-between" w="100%">
           <SegmentedControl
@@ -95,6 +105,7 @@ export function Phase12({ onNextClick, onPrevClick, texts }: IPhase12Props) {
           headings={headings}
           selectEnabled={false}
           columnDefs={columnDefs}
+          beforePaste={() => setIsPasteLoading(true)}
           onValueChange={(row, prop, oldVal, newVal) => {
             const name = String(prop).replace('record.', '');
 
diff --git a/apps/widget/src/components/widget/Phases/ManualEntryImport/index.ts b/apps/widget/src/components/widget/Phases/ManualEntryImport/index.ts
new file mode 100644
index 000000000..8bbb546ce
--- /dev/null
+++ b/apps/widget/src/components/widget/Phases/ManualEntryImport/index.ts
@@ -0,0 +1 @@
+export * from './DataGrid';
diff --git a/apps/widget/src/components/widget/Phases/Phase0-1/index.ts b/apps/widget/src/components/widget/Phases/Phase0-1/index.ts
deleted file mode 100644
index 8e8c1c310..000000000
--- a/apps/widget/src/components/widget/Phases/Phase0-1/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Phase0-1';
diff --git a/apps/widget/src/components/widget/Phases/Phase1-2/index.ts b/apps/widget/src/components/widget/Phases/Phase1-2/index.ts
deleted file mode 100644
index 0d5a42c39..000000000
--- a/apps/widget/src/components/widget/Phases/Phase1-2/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Phase1-2';
diff --git a/apps/widget/src/components/widget/Phases/Phase1/ManualEntryView/ManualEntryView.tsx b/apps/widget/src/components/widget/Phases/Phase1/ManualEntryView/ManualEntryView.tsx
index b37b78ecc..0f32811b5 100644
--- a/apps/widget/src/components/widget/Phases/Phase1/ManualEntryView/ManualEntryView.tsx
+++ b/apps/widget/src/components/widget/Phases/Phase1/ManualEntryView/ManualEntryView.tsx
@@ -23,7 +23,7 @@ export function ManaulEntryView({
 }: ManaulEntryViewProps) {
   return (
     <Box
-      bg="var(--secondary-background)"
+      bg="var(--stepper-background)"
       style={{ borderRadius: 'var(--border-radius)' }}
       pt="sm"
       pl="sm"
@@ -50,7 +50,11 @@ export function ManaulEntryView({
           pl="xs"
           pt="xs"
           bg="var(--primary-background)"
-          style={{ borderTopLeftRadius: 'var(--border-radius)', overflow: 'hidden' }}
+          style={{
+            overflow: 'hidden',
+            boxShadow: '-1px 3px 11px 0px #00000014',
+            borderTopLeftRadius: 'var(--border-radius)',
+          }}
         >
           <Table>
             <thead style={{ backgroundColor: 'var(--secondary-background-hover)' }}>
diff --git a/apps/widget/src/components/widget/Phases/Phase2/Phase2.tsx b/apps/widget/src/components/widget/Phases/Phase2/Phase2.tsx
index e0cf6f91b..1c997ec33 100644
--- a/apps/widget/src/components/widget/Phases/Phase2/Phase2.tsx
+++ b/apps/widget/src/components/widget/Phases/Phase2/Phase2.tsx
@@ -20,7 +20,17 @@ const defaulWrappertHeight = 200;
 export function Phase2({ onPrevClick, onNextClick, texts }: IPhase2Props) {
   const { classes } = useStyles();
   const [wrapperHeight, setWrapperHeight] = useState(defaulWrappertHeight);
-  const { headings, mappings, control, onSubmit, onFieldSelect, isInitialDataLoaded, isMappingFinalizing } = usePhase2({
+  const {
+    headings,
+    mappings,
+    control,
+    onSubmit,
+    validateUniqueHeadings,
+    isInitialDataLoaded,
+    isMappingFinalizing,
+    isUploadInfoLoading,
+  } = usePhase2({
+    texts,
     goNext: onNextClick,
   });
   const wrapperRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
@@ -35,7 +45,7 @@ export function Phase2({ onPrevClick, onNextClick, texts }: IPhase2Props) {
 
   return (
     <>
-      <LoadingOverlay visible={!isInitialDataLoaded || isMappingFinalizing} />
+      <LoadingOverlay visible={!isInitialDataLoaded || isMappingFinalizing || isUploadInfoLoading} />
       <div style={{ flexGrow: 1 }} ref={wrapperRef}>
         {/* Heading */}
         <MappingHeading texts={texts} ref={titlesRef} />
@@ -49,10 +59,13 @@ export function Phase2({ onPrevClick, onNextClick, texts }: IPhase2Props) {
           {Array.isArray(mappings) &&
             mappings.map((mappingItem, index) => (
               <Controller
+                control={control}
                 key={mappingItem.key}
                 name={`mappings.${index}.columnHeading`}
-                control={control}
-                render={({ field }) => (
+                rules={{
+                  required: mappingItem.isRequired ? texts.PHASE2.FIELD_REQUIRED_MSG : false,
+                }}
+                render={({ field, fieldState }) => (
                   <MappingItem
                     key={mappingItem.key}
                     options={headings}
@@ -61,12 +74,13 @@ export function Phase2({ onPrevClick, onNextClick, texts }: IPhase2Props) {
                     value={field.value}
                     onChange={(value) => {
                       field.onChange(value);
-                      onFieldSelect();
+                      validateUniqueHeadings();
                     }}
+                    ref={field.ref}
+                    error={fieldState.error?.message}
                     mappingNotDoneText={texts.PHASE2.MAPPING_NOT_DONE_TEXT}
                     mappingDoneText={texts.PHASE2.MAPPING_DONE_TEXT}
                     mappingPlaceholder={texts.PHASE2.MAPPING_FIELD_PLACEHOLDER}
-                    ref={field.ref}
                   />
                 )}
               />
diff --git a/apps/widget/src/components/widget/Phases/Phase4/Styles.tsx b/apps/widget/src/components/widget/Phases/Phase4/Styles.tsx
index c855b762f..3e0d05b7c 100644
--- a/apps/widget/src/components/widget/Phases/Phase4/Styles.tsx
+++ b/apps/widget/src/components/widget/Phases/Phase4/Styles.tsx
@@ -1,9 +1,8 @@
-/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+import React from 'react';
 import { colors } from '@config';
 import { createStyles, MantineTheme } from '@mantine/core';
-import React from 'react';
 
-export const getWrapperStyles = (theme: MantineTheme): React.CSSProperties => ({
+const getWrapperStyles = (): React.CSSProperties => ({
   flexDirection: 'column',
   textAlign: 'center',
   alignItems: 'center',
@@ -14,7 +13,7 @@ export const getWrapperStyles = (theme: MantineTheme): React.CSSProperties => ({
   gap: 0,
 });
 
-export const getCheckIconStyles = (theme: MantineTheme): React.CSSProperties => ({
+const getCheckIconStyles = (theme: MantineTheme): React.CSSProperties => ({
   backgroundColor: colors.success,
   color: colors.white,
   borderRadius: '100%',
@@ -26,25 +25,25 @@ export const getCheckIconStyles = (theme: MantineTheme): React.CSSProperties =>
   },
 });
 
-export const getTitleStyles = (theme: MantineTheme): React.CSSProperties => ({
+const getTitleStyles = (theme: MantineTheme): React.CSSProperties => ({
   fontSize: theme.fontSizes.xl,
   [`@media (min-width: ${theme.breakpoints.md}px)`]: {
     fontSize: 30,
   },
 });
 
-export const getSubTitleStyles = (theme: MantineTheme): React.CSSProperties => ({
+const getSubTitleStyles = (theme: MantineTheme): React.CSSProperties => ({
   fontSize: theme.fontSizes.lg,
   [`@media (min-width: ${theme.breakpoints.md}px)`]: {
     fontSize: 25,
   },
 });
 
-export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
+export default createStyles((theme: MantineTheme): Record<string, any> => {
   return {
     subTitle: getSubTitleStyles(theme),
     title: getTitleStyles(theme),
-    wrapper: getWrapperStyles(theme),
+    wrapper: getWrapperStyles(),
     check: getCheckIconStyles(theme),
   };
 });
diff --git a/apps/widget/src/components/widget/Phases/SelectHeader/SelectHeader.styles.tsx b/apps/widget/src/components/widget/Phases/SelectHeader/SelectHeader.styles.tsx
new file mode 100644
index 000000000..ce4f7c4e3
--- /dev/null
+++ b/apps/widget/src/components/widget/Phases/SelectHeader/SelectHeader.styles.tsx
@@ -0,0 +1,40 @@
+import { createStyles, MantineTheme } from '@mantine/core';
+
+export default createStyles((theme: MantineTheme): Record<string, any> => {
+  return {
+    table: {
+      overflow: 'auto',
+      borderSpacing: 0,
+      borderCollapse: 'separate',
+      borderRadius: 'var(--border-radius)',
+    },
+    row: {
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: '#DFE2FF',
+      },
+    },
+    selectedRow: {
+      backgroundColor: '#DFE2FF',
+      fontWeight: 700, // Bold font weight for selected row
+      '&:hover': {
+        backgroundColor: '#DFE2FF',
+      },
+    },
+    aboveSelectedRow: {
+      backgroundColor: '#F3F4F6',
+      color: 'var(--label-color)',
+      fontWeight: 300, // Lighter font weight for rows above selected
+    },
+    cell: {
+      textWrap: 'nowrap',
+      border: `1px solid ${theme.colors.gray[3]}`,
+      padding: theme.spacing.xs,
+      backgroundColor: 'transparent',
+    },
+    radioCell: {
+      width: '40px',
+      textAlign: 'center',
+    },
+  };
+});
diff --git a/apps/widget/src/components/widget/Phases/SelectHeader/SelectHeader.tsx b/apps/widget/src/components/widget/Phases/SelectHeader/SelectHeader.tsx
new file mode 100644
index 000000000..778b688bb
--- /dev/null
+++ b/apps/widget/src/components/widget/Phases/SelectHeader/SelectHeader.tsx
@@ -0,0 +1,84 @@
+import { useEffect, useRef, useState } from 'react';
+import { Alert, Radio, Stack, Table } from '@mantine/core';
+
+import { Warning } from '@icons';
+import { colors } from '@config';
+import { PhasesEnum } from '@types';
+import useStyles from './SelectHeader.styles';
+import { WIDGET_TEXTS } from '@impler/client';
+import { Footer } from 'components/Common/Footer';
+import { LoadingOverlay } from '@ui/LoadingOverlay';
+import { useSelectHeader } from '@hooks/SelectHeader/useSelectHeader';
+
+interface ISelectHeaderProps {
+  onNext: () => void;
+  texts: typeof WIDGET_TEXTS;
+}
+
+export function SelectHeader({ texts, onNext }: ISelectHeaderProps) {
+  const { classes, cx } = useStyles();
+  const [selectedRow, setSelectedRow] = useState<number>(0);
+  const tableWrapperRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+  const [tableWrapperDimensions, setTableWrapperDimentions] = useState({
+    height: 200,
+    width: 500,
+  });
+  const { previewRows, isPreviewRowsLoading, setHeaderRow, isSetHeaderRowLoading } = useSelectHeader({ onNext });
+
+  const handleRowClick = (index: number) => {
+    setSelectedRow(index);
+  };
+
+  useEffect(() => {
+    //  setting wrapper height
+    setTableWrapperDimentions({
+      height: tableWrapperRef.current.getBoundingClientRect().height,
+      width: tableWrapperRef.current.getBoundingClientRect().width,
+    });
+  }, []);
+
+  return (
+    <>
+      <LoadingOverlay visible={isPreviewRowsLoading} />
+
+      <Alert color="yellow" icon={<Warning fill={colors.yellow} />}>
+        {texts.SELECT_HEADER.INFO}
+      </Alert>
+
+      <Stack style={{ flexGrow: 1, overflow: 'auto' }} ref={tableWrapperRef} h={tableWrapperDimensions.height + 'px'}>
+        <Table withBorder withColumnBorders className={classes.table}>
+          <tbody>
+            {previewRows?.map((element, indexOuter) => (
+              <tr
+                key={indexOuter}
+                className={cx(
+                  classes.row,
+                  { [classes.selectedRow]: selectedRow === indexOuter },
+                  { [classes.aboveSelectedRow]: selectedRow !== null && indexOuter < selectedRow }
+                )}
+                onClick={() => handleRowClick(indexOuter)}
+              >
+                <td className={cx(classes.cell, classes.radioCell)}>
+                  <Radio onChange={() => handleRowClick(indexOuter)} checked={selectedRow === indexOuter} />
+                </td>
+                {element.map((elementData, indexInner) => (
+                  <td key={indexInner} className={classes.cell}>
+                    {elementData}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      </Stack>
+
+      <Footer
+        active={PhasesEnum.SELECT_HEADER}
+        primaryButtonLoading={isSetHeaderRowLoading}
+        secondaryButtonLoading={isSetHeaderRowLoading}
+        onPrevClick={() => setHeaderRow({ index: -1, headings: previewRows?.[selectedRow] || [] })}
+        onNextClick={() => setHeaderRow({ index: selectedRow, headings: previewRows?.[selectedRow] || [] })}
+      />
+    </>
+  );
+}
diff --git a/apps/widget/src/components/widget/Phases/SelectHeader/index.ts b/apps/widget/src/components/widget/Phases/SelectHeader/index.ts
new file mode 100644
index 000000000..3625d925a
--- /dev/null
+++ b/apps/widget/src/components/widget/Phases/SelectHeader/index.ts
@@ -0,0 +1 @@
+export * from './SelectHeader';
diff --git a/apps/widget/src/components/widget/Widget.tsx b/apps/widget/src/components/widget/Widget.tsx
index 2e7e02130..e0dda10a4 100644
--- a/apps/widget/src/components/widget/Widget.tsx
+++ b/apps/widget/src/components/widget/Widget.tsx
@@ -14,16 +14,17 @@ import { logAmplitudeEvent, resetAmplitude } from '@amplitude';
 import { IImportConfig, TemplateModeEnum } from '@impler/shared';
 
 import { Phase0 } from './Phases/Phase0';
-import { Phase01 } from './Phases/Phase0-1';
 import { Phase1 } from './Phases/Phase1';
-import { Phase12 } from './Phases/Phase1-2';
 import { Phase2 } from './Phases/Phase2';
 import { Phase3 } from './Phases/Phase3';
 import { Phase4 } from './Phases/Phase4';
-import { AutoImportPhase1 } from './Phases/AutoImportPhases/AutoImportPhase1';
-import { AutoImportPhase2 } from './Phases/AutoImportPhases/AutoImportPhase2';
-import { AutoImportPhase3 } from './Phases/AutoImportPhases/AutoImportPhase3';
-import { AutoImportPhase4 } from './Phases/AutoImportPhases/AutoImportPhase4';
+import { ImageUpload } from './Phases/ImageImport';
+import { SelectHeader } from './Phases/SelectHeader';
+import { DataGrid } from './Phases/ManualEntryImport';
+import { AutoImportPhase1 } from './Phases/AutoImport/AutoImportPhase1';
+import { AutoImportPhase2 } from './Phases/AutoImport/AutoImportPhase2';
+import { AutoImportPhase3 } from './Phases/AutoImport/AutoImportPhase3';
+import { AutoImportPhase4 } from './Phases/AutoImport/AutoImportPhase4';
 
 export function Widget() {
   const defaultDataCount = 0;
@@ -121,15 +122,15 @@ export function Widget() {
         }
       : flow === FlowsEnum.MANUAL_ENTRY
       ? {
-          [PhasesEnum.MANUAL_ENTRY]: <Phase12 texts={texts} onPrevClick={onUploadResetClick} onNextClick={onClose} />,
+          [PhasesEnum.MANUAL_ENTRY]: <DataGrid texts={texts} onPrevClick={onUploadResetClick} onNextClick={onClose} />,
         }
       : {
-          [PhasesEnum.IMAGE_UPLOAD]: <Phase01 texts={texts} goToUpload={() => setPhase(PhasesEnum.UPLOAD)} />,
+          [PhasesEnum.IMAGE_UPLOAD]: <ImageUpload texts={texts} goToUpload={() => setPhase(PhasesEnum.UPLOAD)} />,
           [PhasesEnum.UPLOAD]: (
             <Phase1
               texts={texts}
               hasImageUpload={hasImageUpload}
-              onNextClick={() => setPhase(PhasesEnum.MAPPING)}
+              onNextClick={() => setPhase(PhasesEnum.SELECT_HEADER)}
               onManuallyEnterData={() => {
                 setFlow(FlowsEnum.MANUAL_ENTRY);
                 setPhase(PhasesEnum.MANUAL_ENTRY);
@@ -137,6 +138,7 @@ export function Widget() {
               generateImageTemplate={() => setPhase(PhasesEnum.IMAGE_UPLOAD)}
             />
           ),
+          [PhasesEnum.SELECT_HEADER]: <SelectHeader texts={texts} onNext={() => setPhase(PhasesEnum.MAPPING)} />,
           [PhasesEnum.MAPPING]: (
             <Phase2 texts={texts} onNextClick={() => setPhase(PhasesEnum.REVIEW)} onPrevClick={onUploadResetClick} />
           ),
diff --git a/apps/widget/src/config/colors.config.ts b/apps/widget/src/config/colors.config.ts
index fe5e98c85..53440291c 100644
--- a/apps/widget/src/config/colors.config.ts
+++ b/apps/widget/src/config/colors.config.ts
@@ -11,6 +11,7 @@ export const colors = {
   light: '#F2F9FE',
   white: '#FFFFFF',
   gray: '#ebebeb',
+  yellow: '#F7B801',
   // lightGray: '#EFEFEF',
   lightGray: '#F8F8F8',
 
diff --git a/apps/widget/src/design-system/MappingItem/MappingItem.style.ts b/apps/widget/src/design-system/MappingItem/MappingItem.style.ts
index 9bb75ce7e..fd38859c2 100644
--- a/apps/widget/src/design-system/MappingItem/MappingItem.style.ts
+++ b/apps/widget/src/design-system/MappingItem/MappingItem.style.ts
@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 import { createStyles, MantineTheme } from '@mantine/core';
 import { colors } from '../../config/colors.config';
 
-export const getRootStyles = (theme: MantineTheme): React.CSSProperties => ({
+const getRootStyles = (theme: MantineTheme): React.CSSProperties => ({
   justifyContent: 'space-between',
   width: '100%',
   [`@media (max-width: ${theme.breakpoints.md}px)`]: {
@@ -12,21 +11,22 @@ export const getRootStyles = (theme: MantineTheme): React.CSSProperties => ({
   },
 });
 
-export const getSelectionRootStyles = (theme: MantineTheme): React.CSSProperties => ({
+const getSelectionWrapperStyles = (theme: MantineTheme): React.CSSProperties => ({
+  width: '70%',
+  [`@media (max-width: ${theme.breakpoints.md}px)`]: {
+    width: '100%',
+  },
+});
+
+const getSelectionRootStyles = (): React.CSSProperties => ({
   borderColor: 'var(--border-color)',
   borderWidth: 1,
   borderStyle: 'solid',
   borderRadius: 'var(--border-radius)',
   padding: 0,
-  [`@media (max-width: ${theme.breakpoints.md}px)`]: {
-    width: '100%',
-  },
-  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
-    width: '70%',
-  },
 });
 
-export const getHeadingStyles = (theme: MantineTheme) => ({
+const getHeadingStyles = (theme: MantineTheme) => ({
   padding: theme.spacing.xs,
   backgroundColor: colors.light,
   display: 'flex',
@@ -55,7 +55,7 @@ export const getSelectStyles = (theme: MantineTheme, height: number): React.CSSP
   cursor: 'pointer',
 });
 
-export const getSelectRootStyles = (theme: MantineTheme): React.CSSProperties => ({
+export const getSelectRootStyles = (): React.CSSProperties => ({
   width: '50%',
 });
 
@@ -68,18 +68,19 @@ export const getStatusTextStyles = (theme: MantineTheme): React.CSSProperties =>
   },
 });
 
-export const getRequiredStyles = (theme: MantineTheme): React.CSSProperties => ({
-  color: 'red',
+export const getRequiredStyles = (): React.CSSProperties => ({
+  color: 'var(--error-color)',
 });
 
-export default createStyles((theme: MantineTheme, params: { height: number }, getRef): Record<string, any> => {
+export default createStyles((theme: MantineTheme, params: { height: number }): Record<string, any> => {
   return {
     root: getRootStyles(theme),
     statusText: getStatusTextStyles(theme),
-    selectionRoot: getSelectionRootStyles(theme),
-    selectRoot: getSelectRootStyles(theme),
+    selectionWrapper: getSelectionWrapperStyles(theme),
+    selectionRoot: getSelectionRootStyles(),
+    selectRoot: getSelectRootStyles(),
     select: getSelectStyles(theme, params.height),
     heading: getHeadingStyles(theme),
-    required: getRequiredStyles(theme),
+    required: getRequiredStyles(),
   };
 });
diff --git a/apps/widget/src/design-system/MappingItem/MappingItem.tsx b/apps/widget/src/design-system/MappingItem/MappingItem.tsx
index 44345bb8b..8cd924b97 100644
--- a/apps/widget/src/design-system/MappingItem/MappingItem.tsx
+++ b/apps/widget/src/design-system/MappingItem/MappingItem.tsx
@@ -1,4 +1,4 @@
-import { Group, Select, Text } from '@mantine/core';
+import { Group, Select, Stack, Text } from '@mantine/core';
 import React, { useEffect, useRef, useState } from 'react';
 import useStyles from './MappingItem.style';
 import { ChevronDown, GreenCheck } from '../../icons';
@@ -10,32 +10,35 @@ interface IOption {
 }
 
 interface IMappingItem {
+  value?: string;
+  error?: string;
   heading: string;
   required?: boolean;
-  options: IOption[] | string[];
-  value?: string;
-  mappingPlaceholder: string;
   size?: 'sm' | 'md';
   searchable?: boolean;
   mappingDoneText: string;
+  mappingPlaceholder: string;
   mappingNotDoneText: string;
+  options: IOption[] | string[];
   onChange?: (value: any) => void;
 }
 
 export const MappingItem = React.forwardRef<HTMLInputElement, IMappingItem>((props: IMappingItem, ref) => {
   const {
+    value,
+    error,
     heading,
     options,
     required,
-    value,
     onChange,
-    mappingPlaceholder,
     size = 'xs',
+    mappingDoneText,
+    mappingPlaceholder,
     searchable = true,
     mappingNotDoneText,
-    mappingDoneText,
   } = props;
   const defaultGroupHeight = 45;
+  const isMapped = value && !error;
   const groupRef = useRef<HTMLDivElement>(null);
   const [groupHeight, setGroupHeight] = useState<number>(defaultGroupHeight);
   const { classes } = useStyles({ height: groupHeight });
@@ -46,27 +49,34 @@ export const MappingItem = React.forwardRef<HTMLInputElement, IMappingItem>((pro
 
   return (
     <Group className={classes.root} noWrap>
-      <Group className={classes.selectionRoot} align="stretch" noWrap>
-        <Text size={size} className={classes.heading} ref={groupRef}>
-          {heading}
-          {required ? <span className={classes.required}>&nbsp;*</span> : null}
-        </Text>
-        <Select
-          placeholder={mappingPlaceholder}
-          value={value}
-          data={options}
-          classNames={{ root: classes.selectRoot, input: classes.select }}
-          rightSection={<ChevronDown />}
-          clearable
-          searchable={searchable}
-          dropdownComponent="div"
-          onChange={(selectedValue) => onChange && onChange(selectedValue)}
-          ref={ref}
-        />
-      </Group>
-      <Text size={size} color={value ? 'black' : 'gray'} className={classes.statusText}>
-        {value ? <GreenCheck /> : null}
-        {value ? mappingDoneText : mappingNotDoneText}
+      <Stack className={classes.selectionWrapper} spacing={0}>
+        <Group className={classes.selectionRoot} align="stretch" noWrap>
+          <Text size={size} className={classes.heading} ref={groupRef}>
+            {heading}
+            {required ? <span className={classes.required}>&nbsp;*</span> : null}
+          </Text>
+          <Select
+            placeholder={mappingPlaceholder}
+            value={value}
+            data={options}
+            classNames={{ root: classes.selectRoot, input: classes.select }}
+            rightSection={<ChevronDown />}
+            clearable
+            searchable={searchable}
+            dropdownComponent="div"
+            onChange={(selectedValue) => onChange && onChange(selectedValue)}
+            ref={ref}
+          />
+        </Group>
+        {error ? (
+          <Text size="xs" color="var(--error-color)">
+            {error}
+          </Text>
+        ) : null}
+      </Stack>
+      <Text size={size} color={isMapped ? 'black' : 'gray'} className={classes.statusText}>
+        {isMapped ? <GreenCheck /> : null}
+        {isMapped ? mappingDoneText : mappingNotDoneText}
       </Text>
     </Group>
   );
diff --git a/apps/widget/src/hooks/Phase1-2/useBatchUpdateRecords.ts b/apps/widget/src/hooks/DataGrid/useBatchUpdateRecords.ts
similarity index 100%
rename from apps/widget/src/hooks/Phase1-2/useBatchUpdateRecords.ts
rename to apps/widget/src/hooks/DataGrid/useBatchUpdateRecords.ts
diff --git a/apps/widget/src/hooks/Phase1-2/usePhase12.ts b/apps/widget/src/hooks/DataGrid/useDataGrid.ts
similarity index 85%
rename from apps/widget/src/hooks/Phase1-2/usePhase12.ts
rename to apps/widget/src/hooks/DataGrid/useDataGrid.ts
index 7015e899b..cd617c4bf 100644
--- a/apps/widget/src/hooks/Phase1-2/usePhase12.ts
+++ b/apps/widget/src/hooks/DataGrid/useDataGrid.ts
@@ -17,44 +17,49 @@ import {
   ColumnDelimiterEnum,
   ReviewDataTypesEnum,
 } from '@impler/shared';
-import { IUpload } from '@impler/client';
+import { useUploadInfo } from '@hooks/useUploadInfo';
 
-interface IUsePhase3Props {
+interface IDataGridProps {
   limit: number;
 }
 
-export function usePhase12({ limit }: IUsePhase3Props) {
+export function useDataGrid({ limit }: IDataGridProps) {
   const { api } = useAPIState();
-  const { uploadInfo, setUploadInfo } = useAppState();
+  const { uploadInfo, data } = useAppState();
+  const { fetchUploadInfo } = useUploadInfo({
+    enabled: false,
+  });
   const [columns, setColumns] = useState<IOption[]>([]);
   const [headings, setHeadings] = useState<string[]>([]);
   const [frozenColumns, setFrozenColumns] = useState<number>(2);
   const [columnDefs, setColumnDefs] = useState<HotItemSchema[]>([]);
   const [type, setType] = useState<ReviewDataTypesEnum>(ReviewDataTypesEnum.ALL);
   const [showFindReplaceModal, setShowFindReplaceModal] = useState<boolean | undefined>(undefined);
-  const [reviewData, setReviewData] = useState<IRecordExtended[]>([
-    {
-      index: 1,
-      isValid: false,
-      record: {},
-      updated: {},
-    },
-  ]);
-
-  const { data: templateColumns } = useQuery<unknown, IErrorObject, IColumn[], [string, string]>(
-    [`columns:${uploadInfo._id}`, uploadInfo._id],
-    () => api.getColumns(uploadInfo._id)
-  );
-  const { refetch: fetchUploadInfo } = useQuery<IUpload, IErrorObject, IUpload, [string]>(
-    [`getUpload:${uploadInfo._id}`],
-    () => api.getUpload(uploadInfo._id),
-    {
-      enabled: false,
-      onSuccess(data) {
-        setUploadInfo(data);
-      },
-    }
+  const [reviewData, setReviewData] = useState<IRecordExtended[]>(
+    data
+      ? JSON.parse(data).map((record: Record<string, any>, index: number) => ({
+          index,
+          record,
+          updated: {},
+          isValid: false,
+        }))
+      : [
+          {
+            index: 1,
+            isValid: false,
+            record: {},
+            updated: {},
+          },
+        ]
   );
+
+  const { data: templateColumns, isLoading: isTemplateColumnsLoading } = useQuery<
+    unknown,
+    IErrorObject,
+    IColumn[],
+    [string, string]
+  >([`columns:${uploadInfo._id}`, uploadInfo._id], () => api.getColumns(uploadInfo._id));
+
   const { mutate: refetchReviewData, isLoading: isReviewDataLoading } = useMutation<
     IReviewData,
     IErrorObject,
@@ -177,6 +182,7 @@ export function usePhase12({ limit }: IUsePhase3Props) {
     isReviewDataLoading,
     showFindReplaceModal,
     setShowFindReplaceModal,
+    isTemplateColumnsLoading,
     totalRecords: uploadInfo.totalRecords ?? undefined,
     invalidRecords: uploadInfo.invalidRecords ?? undefined,
   };
diff --git a/apps/widget/src/hooks/Phase0-1/usePhase01.ts b/apps/widget/src/hooks/ImageUpload/useImageUpload.ts
similarity index 97%
rename from apps/widget/src/hooks/Phase0-1/usePhase01.ts
rename to apps/widget/src/hooks/ImageUpload/useImageUpload.ts
index b12e4e156..839b785be 100644
--- a/apps/widget/src/hooks/Phase0-1/usePhase01.ts
+++ b/apps/widget/src/hooks/ImageUpload/useImageUpload.ts
@@ -10,11 +10,11 @@ import { captureError, getObjectId } from '@util';
 import { useTemplates } from '@hooks/useTemplates';
 import { useImplerState } from '@store/impler.context';
 
-interface UsePhase01Props {
+interface ImageUploadProps {
   goToUpload: () => void;
 }
 
-export function usePhase01({ goToUpload }: UsePhase01Props) {
+export function useImageUpload({ goToUpload }: ImageUploadProps) {
   const { setImportId, setImageSchema } = useAppState();
   const { templateId } = useImplerState();
   const imageSchemaRef = useRef<Map<string, Set<string>>>(new Map());
diff --git a/apps/widget/src/hooks/Phase2/usePhase2.ts b/apps/widget/src/hooks/Phase2/usePhase2.ts
index a522c50ad..a84d1b021 100644
--- a/apps/widget/src/hooks/Phase2/usePhase2.ts
+++ b/apps/widget/src/hooks/Phase2/usePhase2.ts
@@ -4,16 +4,18 @@ import { logAmplitudeEvent } from '@amplitude';
 import { useQuery, useMutation } from '@tanstack/react-query';
 
 import { notifier } from '@util';
-import { IUpload } from '@impler/client';
+import { IUpload, WIDGET_TEXTS } from '@impler/client';
 import { useAPIState } from '@store/api.context';
 import { useAppState } from '@store/app.context';
-import { IMapping, IErrorObject, IMappingFinalize } from '@impler/shared';
+import { useUploadInfo } from '@hooks/useUploadInfo';
+import { IMapping, IErrorObject, IMappingFinalize, replaceVariablesInString } from '@impler/shared';
 
 interface IUsePhase2Props {
   goNext: () => void;
+  texts: typeof WIDGET_TEXTS;
 }
 
-export function usePhase2({ goNext }: IUsePhase2Props) {
+export function usePhase2({ goNext, texts }: IUsePhase2Props) {
   const { api } = useAPIState();
   const { uploadInfo, setUploadInfo } = useAppState();
   const [headings, setHeadings] = useState<
@@ -23,7 +25,9 @@ export function usePhase2({ goNext }: IUsePhase2Props) {
       disabled?: boolean;
     }[]
   >(uploadInfo.headings.map((heading) => ({ value: heading, label: heading })));
-  const { getValues, control, reset, handleSubmit } = useForm<{ mappings: IMappingFinalize[] }>();
+  const { reset, control, setError, getValues, clearErrors, handleSubmit } = useForm<{
+    mappings: IMappingFinalize[];
+  }>();
   const {
     isFetched,
     isLoading,
@@ -38,13 +42,6 @@ export function usePhase2({ goNext }: IUsePhase2Props) {
           totalRecords: uploadInfo.totalRecords,
           mappedKeys: mappingsResponse.filter((mapping) => mapping.columnHeading).length, // count how many keys are mapped
         });
-        setHeadings(
-          uploadInfo.headings.map((heading) => ({
-            value: heading,
-            label: heading,
-            disabled: mappingsResponse.some((mapping) => mapping.columnHeading === heading),
-          }))
-        );
         reset({
           mappings: mappingsResponse.map((mapping) => ({
             key: mapping.key,
@@ -59,6 +56,17 @@ export function usePhase2({ goNext }: IUsePhase2Props) {
       enabled: !!uploadInfo?._id,
     }
   );
+  const { isUploadInfoLoading } = useUploadInfo({
+    enabled: true,
+    onNext(data) {
+      setHeadings(
+        data.headings.map((heading) => ({
+          value: heading,
+          label: heading,
+        }))
+      );
+    },
+  });
   const { isLoading: isMappingFinalizing, mutate: finalizeMapping } = useMutation<
     IUpload,
     IErrorObject,
@@ -78,28 +86,41 @@ export function usePhase2({ goNext }: IUsePhase2Props) {
     }
   );
   const onFinalizeMapping = (data: { mappings: IMappingFinalize[] }) => {
-    finalizeMapping(data.mappings);
+    const hasUnqieuHeadingErrors = validateUniqueHeadings();
+    if (!hasUnqieuHeadingErrors) finalizeMapping(data.mappings);
   };
-  const onFieldSelect = () => {
+  const validateUniqueHeadings = () => {
+    let hasErrors = false;
     const newMappings = getValues('mappings');
-    const finalizedFields = newMappings.reduce((acc: string[], mappingItem) => {
-      if (mappingItem.columnHeading) acc.push(mappingItem.columnHeading);
+    const valuesMap = new Map<string, number>();
+    newMappings.forEach((mapping) => {
+      if (mapping.columnHeading) valuesMap.set(mapping.columnHeading, (valuesMap.get(mapping.columnHeading) || 0) + 1);
+    });
+    newMappings.forEach((mapping, idx) => {
+      if ((valuesMap.get(mapping.columnHeading) || 0) > 1) {
+        setError(`mappings.${idx}.columnHeading`, {
+          type: 'custom',
+          message: replaceVariablesInString(texts.PHASE2.ALREADY_MAPPED_MSG, {
+            field: mapping.name,
+            column: mapping.columnHeading,
+          }),
+        });
+        hasErrors = true;
+      } else {
+        clearErrors(`mappings.${idx}.columnHeading`);
+      }
+    });
 
-      return acc;
-    }, []);
-    const newHeadings = [...headings].map((mappingItem) => ({
-      ...mappingItem,
-      disabled: finalizedFields.includes(mappingItem.value),
-    }));
-    setHeadings(newHeadings);
+    return hasErrors;
   };
 
   return {
     control,
     mappings,
     headings,
-    onFieldSelect,
     isMappingFinalizing,
+    isUploadInfoLoading,
+    validateUniqueHeadings,
     isInitialDataLoaded: isFetched && !isLoading,
     onSubmit: handleSubmit(onFinalizeMapping),
   };
diff --git a/apps/widget/src/hooks/Phase3/usePhase3.tsx b/apps/widget/src/hooks/Phase3/usePhase3.tsx
index c410e79cd..d8fba27fd 100644
--- a/apps/widget/src/hooks/Phase3/usePhase3.tsx
+++ b/apps/widget/src/hooks/Phase3/usePhase3.tsx
@@ -21,6 +21,7 @@ import { IUpload } from '@impler/client';
 import { SelectEditor } from './SelectEditor';
 import { MultiSelectEditor } from './MultiSelectEditor';
 import { useCompleteImport } from '@hooks/useCompleteImport';
+import { useUploadInfo } from '@hooks/useUploadInfo';
 
 interface IUsePhase3Props {
   onNext: (uploadData: IUpload, importedData?: Record<string, any>[]) => void;
@@ -137,19 +138,14 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
       enabled: !!uploadInfo?._id,
     }
   );
-  const { refetch: fetchUploadInfo } = useQuery<IUpload, IErrorObject, IUpload, [string]>(
-    [`getUpload:${uploadInfo._id}`],
-    () => api.getUpload(uploadInfo._id),
-    {
-      enabled: false,
-      onSuccess(data) {
-        setUploadInfo(data);
-        if (data.invalidRecords === variables.baseIndex && data.totalRecords) {
-          setShowAllDataValidModal(true);
-        }
-      },
-    }
-  );
+  const { fetchUploadInfo } = useUploadInfo({
+    enabled: false,
+    onNext: (data) => {
+      if (data.invalidRecords === variables.baseIndex && data.totalRecords) {
+        setShowAllDataValidModal(true);
+      }
+    },
+  });
   const { mutate: refetchReviewData, isLoading: isReviewDataLoading } = useMutation<
     IReviewData,
     IErrorObject,
@@ -197,7 +193,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
     IErrorObject,
     void,
     [string, string]
-  >([`review`, uploadInfo._id], () => api.doReivewData(uploadInfo._id), {
+  >([`re-review`, uploadInfo._id], () => api.doReivewData(uploadInfo._id), {
     cacheTime: 0,
     staleTime: 0,
     enabled: !!uploadInfo._id,
diff --git a/apps/widget/src/hooks/SelectHeader/useSelectHeader.ts b/apps/widget/src/hooks/SelectHeader/useSelectHeader.ts
new file mode 100644
index 000000000..cc7109186
--- /dev/null
+++ b/apps/widget/src/hooks/SelectHeader/useSelectHeader.ts
@@ -0,0 +1,35 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+
+import { IUpload } from '@impler/client';
+import { useAPIState } from '@store/api.context';
+import { useAppState } from '@store/app.context';
+import { IErrorObject, ISetHeaderData } from '@impler/shared';
+
+interface IUseSelectHeaderProps {
+  onNext: () => void;
+}
+
+export function useSelectHeader({ onNext }: IUseSelectHeaderProps) {
+  const { api } = useAPIState();
+  const { uploadInfo } = useAppState();
+
+  const { data: previewRows, isLoading: isPreviewRowsLoading } = useQuery<unknown, IErrorObject, string[][]>(
+    ['preview', uploadInfo._id],
+    () => api.getDataPreview(uploadInfo._id) as Promise<string[][]>
+  );
+
+  const { mutate: setHeaderRow, isLoading: isSetHeaderRowLoading } = useMutation<IUpload, IErrorObject, ISetHeaderData>(
+    ['set-header', uploadInfo._id],
+    (setHeaderData) => api.setHeaderRow(uploadInfo._id, setHeaderData) as Promise<IUpload>,
+    {
+      onSuccess: onNext,
+    }
+  );
+
+  return {
+    previewRows,
+    setHeaderRow,
+    isPreviewRowsLoading,
+    isSetHeaderRowLoading,
+  };
+}
diff --git a/apps/widget/src/hooks/useUploadInfo.ts b/apps/widget/src/hooks/useUploadInfo.ts
new file mode 100644
index 000000000..21ece239c
--- /dev/null
+++ b/apps/widget/src/hooks/useUploadInfo.ts
@@ -0,0 +1,29 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { IUpload } from '@impler/client';
+import { IErrorObject } from '@impler/shared';
+import { useAppState } from '@store/app.context';
+import { useAPIState } from '@store/api.context';
+
+interface IUseUploadInfoProps {
+  enabled?: boolean;
+  onNext?: (data: IUpload) => void;
+}
+export const useUploadInfo = ({ onNext, enabled = true }: IUseUploadInfoProps) => {
+  const { api } = useAPIState();
+  const { setUploadInfo, uploadInfo } = useAppState();
+  const { refetch: fetchUploadInfo, isLoading: isUploadInfoLoading } = useQuery<
+    IUpload,
+    IErrorObject,
+    IUpload,
+    [string]
+  >([`getUpload:${uploadInfo._id}`], () => api.getUpload(uploadInfo._id), {
+    enabled,
+    onSuccess(data) {
+      onNext?.(data);
+      setUploadInfo(data);
+    },
+  });
+
+  return { fetchUploadInfo, isUploadInfoLoading };
+};
diff --git a/apps/widget/src/types/component.types.ts b/apps/widget/src/types/component.types.ts
index 733d94492..82ba3b5e2 100644
--- a/apps/widget/src/types/component.types.ts
+++ b/apps/widget/src/types/component.types.ts
@@ -23,9 +23,10 @@ export enum PhasesEnum {
 
   IMAGE_UPLOAD = 1,
   UPLOAD = 2,
-  MAPPING = 3,
-  REVIEW = 4,
-  COMPLETE = 5,
+  SELECT_HEADER = 3,
+  MAPPING = 4,
+  REVIEW = 5,
+  COMPLETE = 6,
 
   CONFIGURE = 1,
   MAPCOLUMNS = 2,
diff --git a/apps/widget/src/util/api/api.service.ts b/apps/widget/src/util/api/api.service.ts
index 533b2ea72..c22a68429 100644
--- a/apps/widget/src/util/api/api.service.ts
+++ b/apps/widget/src/util/api/api.service.ts
@@ -12,6 +12,7 @@ import {
   IUserJobMapping,
   IUserJob,
   IColumn,
+  ISetHeaderData,
 } from '@impler/shared';
 import { IUpload } from '@impler/client';
 import { HttpClient } from './api.client';
@@ -137,6 +138,14 @@ export class ApiService {
     return this.httpClient.get(`/upload/${uploadId}`) as Promise<IUpload>;
   }
 
+  async getDataPreview(uploadId: string) {
+    return this.httpClient.get(`/upload/${uploadId}/preview`) as Promise<string[][]>;
+  }
+
+  async setHeaderRow(uploadId: string, data: ISetHeaderData) {
+    return this.httpClient.put(`/upload/${uploadId}/header`, data) as Promise<IUpload>;
+  }
+
   async terminateUpload(uploadId: string) {
     return this.httpClient.delete(`/upload/${uploadId}`) as Promise<IUpload>;
   }
diff --git a/libs/dal/src/repositories/upload/upload.entity.ts b/libs/dal/src/repositories/upload/upload.entity.ts
index a0876271a..446f5a9e9 100644
--- a/libs/dal/src/repositories/upload/upload.entity.ts
+++ b/libs/dal/src/repositories/upload/upload.entity.ts
@@ -40,4 +40,6 @@ export class UploadEntity {
   customRecordFormat: string;
 
   customChunkFormat: string;
+
+  headerRow: number;
 }
diff --git a/libs/dal/src/repositories/upload/upload.schema.ts b/libs/dal/src/repositories/upload/upload.schema.ts
index 9efe2efa4..66bf156a0 100644
--- a/libs/dal/src/repositories/upload/upload.schema.ts
+++ b/libs/dal/src/repositories/upload/upload.schema.ts
@@ -54,6 +54,10 @@ const uploadSchema = new Schema(
       type: Boolean,
       default: false,
     },
+    headerRow: {
+      type: Number,
+      default: 0,
+    },
   },
   { ...schemaOptions }
 );
diff --git a/libs/shared/src/types/index.ts b/libs/shared/src/types/index.ts
index de84bf816..97569229b 100644
--- a/libs/shared/src/types/index.ts
+++ b/libs/shared/src/types/index.ts
@@ -13,3 +13,4 @@ export * from './template';
 export * from './import-job/import-job.types';
 export * from './user-job/user-job.types';
 export * from './bilablemetric-code/billablemetriccode.types';
+export * from './select-header';
diff --git a/libs/shared/src/types/select-header/index.ts b/libs/shared/src/types/select-header/index.ts
new file mode 100644
index 000000000..175b8847a
--- /dev/null
+++ b/libs/shared/src/types/select-header/index.ts
@@ -0,0 +1 @@
+export * from './select-header.types';
diff --git a/libs/shared/src/types/select-header/select-header.types.ts b/libs/shared/src/types/select-header/select-header.types.ts
new file mode 100644
index 000000000..690085b50
--- /dev/null
+++ b/libs/shared/src/types/select-header/select-header.types.ts
@@ -0,0 +1,4 @@
+export interface ISetHeaderData {
+  index?: number;
+  headings: string[];
+}
diff --git a/libs/shared/src/types/upload/upload.types.ts b/libs/shared/src/types/upload/upload.types.ts
index 755a5fddd..8fa647454 100644
--- a/libs/shared/src/types/upload/upload.types.ts
+++ b/libs/shared/src/types/upload/upload.types.ts
@@ -4,6 +4,7 @@ export enum UploadStatusEnum {
   'UPLOADED' = 'Uploaded',
   'MAPPING' = 'Mapping',
   'MAPPED' = 'Mapped',
+  'SELECT_HEADER' = 'Select Header',
   'REVIEWING' = 'Reviewing',
   'REVIEWED' = 'Reviewed',
   'CONFIRMED' = 'Confirmed',
diff --git a/packages/client/src/config/texts.config.ts b/packages/client/src/config/texts.config.ts
index 27f38d3ef..f826c026b 100644
--- a/packages/client/src/config/texts.config.ts
+++ b/packages/client/src/config/texts.config.ts
@@ -20,6 +20,7 @@ export const WIDGET_TEXTS = {
     UPLOAD_FILE: 'Upload',
     MAP_COLUMNS: 'Map Columns',
     REVIEW_DATA: 'Review',
+    SELECT_HEADER: 'Select Header',
     COMPLETE_IMPORT: 'Complete',
     CONFIGURE_JOB: 'Configure',
     SCHEDULE_JOB: 'Schedule',
@@ -62,6 +63,11 @@ export const WIDGET_TEXTS = {
     INCOMPLETE_TEMPLATE_MSG:
       'This import does not have any columns. Please try again after some time!',
   },
+  SELECT_HEADER: {
+    FILE_DONT_HAVE_HEADERS: 'File does not have headers',
+    CONFIRM_AND_CONTINUE: 'Confirm selection and Continue',
+    INFO: 'Select Header Row from the table. Rows above the header will not be imported. Click on row to change selection.',
+  },
   'PHASE1-2': {
     ENTER_DATA: 'Manually enter your data',
     RECOMMANDED_LIMIT: 'Recommanded upto {records} records',
@@ -74,6 +80,8 @@ export const WIDGET_TEXTS = {
     MAPPING_NOT_DONE_TEXT: 'Not Mapped',
     MAPPING_DONE_TEXT: 'Mapping Successful',
     MAPPING_FIELD_PLACEHOLDER: 'Select Field',
+    FIELD_REQUIRED_MSG: 'This field is required',
+    ALREADY_MAPPED_MSG: '{field} is already mapped to {column}',
   },
   PHASE3: {
     COMPLETE: 'Complete',