diff --git a/apps/api/src/app/auth/services/auth.service.ts b/apps/api/src/app/auth/services/auth.service.ts
index 5f8d28f28..f70183f28 100644
--- a/apps/api/src/app/auth/services/auth.service.ts
+++ b/apps/api/src/app/auth/services/auth.service.ts
@@ -170,13 +170,13 @@ export class AuthService {
 
   async apiKeyAuthenticate(apiKey: string) {
     const environment = await this.environmentRepository.findByApiKey(apiKey);
-    if (!environment) throw new UnauthorizedException('API Key not found');
+    if (!environment) throw new UnauthorizedException('API Key not found!');
 
     const key = environment.apiKeys.find((i) => i.key === apiKey);
-    if (!key) throw new UnauthorizedException('API Key not found');
+    if (!key) throw new UnauthorizedException('API Key not found!');
 
     const user = await this.getUser({ _id: key._userId });
-    if (!user) throw new UnauthorizedException('User not found');
+    if (!user) throw new UnauthorizedException('User not found!');
 
     return this.getSignedToken(
       {
diff --git a/apps/api/src/app/common/common.controller.ts b/apps/api/src/app/common/common.controller.ts
index ec2e232de..05b1892ca 100644
--- a/apps/api/src/app/common/common.controller.ts
+++ b/apps/api/src/app/common/common.controller.ts
@@ -20,11 +20,12 @@ export class CommonController {
   @ApiOperation({
     summary: 'Check if request is valid (Checks Auth)',
   })
-  async isRequestValid(@Body() body: ValidRequestDto): Promise<boolean> {
+  async isRequestValid(@Body() body: ValidRequestDto): Promise<{ success: boolean }> {
     return this.validRequest.execute(
       ValidRequestCommand.create({
         projectId: body.projectId,
         templateId: body.templateId,
+        schema: body.schema,
       })
     );
   }
diff --git a/apps/api/src/app/common/dtos/Schema.dto.ts b/apps/api/src/app/common/dtos/Schema.dto.ts
new file mode 100644
index 000000000..a8e335629
--- /dev/null
+++ b/apps/api/src/app/common/dtos/Schema.dto.ts
@@ -0,0 +1,114 @@
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+import {
+  IsArray,
+  IsBoolean,
+  IsOptional,
+  IsString,
+  IsEnum,
+  IsNumber,
+  ValidateIf,
+  IsNotEmpty,
+  Validate,
+  ArrayMinSize,
+} from 'class-validator';
+import { Type } from 'class-transformer';
+import { ColumnTypesEnum, Defaults } from '@impler/shared';
+import { IsValidRegex } from '@shared/framework/is-valid-regex.validator';
+
+export class SchemaDto {
+  @ApiProperty({
+    description: 'Name of the column',
+    type: 'string',
+  })
+  @IsString()
+  name: string;
+
+  @ApiProperty({
+    description: 'Key of the column',
+  })
+  @IsNotEmpty({ message: "'key' should not empty" })
+  @IsString({ message: "'key' must be a string" })
+  key: string;
+
+  @ApiProperty({
+    description: 'Alternative possible keys of the column',
+    type: Array<string>,
+  })
+  @IsArray()
+  @IsOptional()
+  @Type(() => Array<string>)
+  alternateKeys: string[];
+
+  @ApiPropertyOptional({
+    description: 'While true, it Indicates column value should exists in data',
+  })
+  @IsBoolean({ message: "'isRequired' must be boolean" })
+  @IsOptional()
+  isRequired = false;
+
+  @ApiPropertyOptional({
+    description: 'While true, it Indicates column value should be unique in data',
+  })
+  @IsBoolean({ message: "'isUnique' must be boolean" })
+  @IsOptional()
+  isUnique = false;
+
+  @ApiProperty({
+    description: 'Specifies the type of column',
+    enum: ColumnTypesEnum,
+  })
+  @IsEnum(ColumnTypesEnum, {
+    message: `entered type must be one of ${Object.values(ColumnTypesEnum).join(', ')}`,
+  })
+  type: ColumnTypesEnum;
+
+  @ApiPropertyOptional({
+    description: 'Regex if type is Regex',
+  })
+  @Validate(IsValidRegex, {
+    message: 'Invalid regex pattern',
+  })
+  @IsNotEmpty({
+    message: "'regex' should not empty, when type is Regex",
+  })
+  @ValidateIf((object) => object.type === ColumnTypesEnum.REGEX)
+  regex: string;
+
+  @ApiPropertyOptional({
+    description: 'Description of Regex',
+  })
+  @ValidateIf((object) => object.type === ColumnTypesEnum.REGEX)
+  @IsString()
+  @IsOptional()
+  regexDescription: string;
+
+  @ApiPropertyOptional({
+    description: 'List of possible values for column if type is Select',
+  })
+  @ValidateIf((object) => object.type === ColumnTypesEnum.SELECT, {
+    message: "'selectValues' should not empty, when type is Select",
+  })
+  @IsArray({ message: "'selectValues' must be an array, when type is Select" })
+  @ArrayMinSize(1, { message: "'selectValues' should not empty, when type is Select" })
+  @Type(() => Array)
+  @IsOptional()
+  selectValues: string[] = [];
+
+  @ApiPropertyOptional({
+    description: 'List of date formats for column if type is Date',
+  })
+  @ValidateIf((object) => object.type === ColumnTypesEnum.DATE, {
+    message: "'dateFormats' should not empty, when type is Date",
+  })
+  @Type(() => Array<string>)
+  @IsArray({ message: "'dateFormats' must be an array, when type is Date" })
+  @ArrayMinSize(1, { message: "'dateFormats' must not be empty, when type is Date" })
+  dateFormats: string[] = Defaults.DATE_FORMATS;
+
+  @ApiProperty({
+    description: 'Sequence of column',
+  })
+  @IsNumber()
+  @IsOptional()
+  sequence: number;
+}
diff --git a/apps/api/src/app/common/dtos/valid.dto.ts b/apps/api/src/app/common/dtos/valid.dto.ts
index 0a3af57b0..9686d561f 100644
--- a/apps/api/src/app/common/dtos/valid.dto.ts
+++ b/apps/api/src/app/common/dtos/valid.dto.ts
@@ -1,18 +1,25 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { IsDefined, IsOptional, IsString, IsMongoId } from 'class-validator';
+import { IsDefined, IsOptional, IsMongoId } from 'class-validator';
 
 export class ValidRequestDto {
   @ApiProperty({
     description: 'Id of the project',
   })
-  @IsMongoId()
+  @IsMongoId({
+    message: 'Invalid project id',
+  })
   @IsDefined()
   projectId: string;
 
   @ApiProperty({
     description: 'ID of the template',
   })
-  @IsString()
+  @IsMongoId({
+    message: 'Invalid template id',
+  })
   @IsOptional()
   templateId?: string;
+
+  @IsOptional()
+  schema?: string;
 }
diff --git a/apps/api/src/app/common/usecases/valid-request/valid-request.command.ts b/apps/api/src/app/common/usecases/valid-request/valid-request.command.ts
index 58aa649f8..93e1bcdb2 100644
--- a/apps/api/src/app/common/usecases/valid-request/valid-request.command.ts
+++ b/apps/api/src/app/common/usecases/valid-request/valid-request.command.ts
@@ -9,4 +9,7 @@ export class ValidRequestCommand extends BaseCommand {
   @IsString()
   @IsOptional()
   templateId: string;
+
+  @IsOptional()
+  schema: string;
 }
diff --git a/apps/api/src/app/common/usecases/valid-request/valid-request.usecase.ts b/apps/api/src/app/common/usecases/valid-request/valid-request.usecase.ts
index 3f19c7369..76ec97b2c 100644
--- a/apps/api/src/app/common/usecases/valid-request/valid-request.usecase.ts
+++ b/apps/api/src/app/common/usecases/valid-request/valid-request.usecase.ts
@@ -1,31 +1,93 @@
-import { Injectable } from '@nestjs/common';
+import { Injectable, HttpStatus, HttpException, UnauthorizedException } from '@nestjs/common';
 import { ProjectRepository, TemplateRepository } from '@impler/dal';
 import { ValidRequestCommand } from './valid-request.command';
 import { DocumentNotFoundException } from '@shared/exceptions/document-not-found.exception';
 import { APIMessages } from '@shared/constants';
+import { plainToClass } from 'class-transformer';
+import { validate } from 'class-validator';
+import { SchemaDto } from 'app/common/dtos/Schema.dto';
 
 @Injectable()
 export class ValidRequest {
   constructor(private projectRepository: ProjectRepository, private templateRepository: TemplateRepository) {}
 
-  async execute(command: ValidRequestCommand) {
-    if (command.templateId) {
-      const templateCount = await this.templateRepository.count({
-        _id: command.templateId,
-        _projectId: command.projectId,
-      });
-      if (!templateCount) {
-        throw new DocumentNotFoundException('Template', command.templateId, APIMessages.PROJECT_WITH_TEMPLATE_MISSING);
+  async execute(command: ValidRequestCommand): Promise<{ success: boolean }> {
+    try {
+      if (command.projectId) {
+        const projectCount = await this.projectRepository.count({
+          _id: command.projectId,
+        });
+
+        if (!projectCount) {
+          throw new DocumentNotFoundException('Project', command.projectId, APIMessages.INCORRECT_KEYS_FOUND);
+        }
       }
-    } else {
-      const projectCount = await this.projectRepository.count({
-        _id: command.projectId,
-      });
-      if (!projectCount) {
-        throw new DocumentNotFoundException('Project', command.projectId);
+
+      if (command.templateId) {
+        const templateCount = await this.templateRepository.count({
+          _id: command.templateId,
+          _projectId: command.projectId,
+        });
+
+        if (!templateCount) {
+          throw new DocumentNotFoundException('Template', command.templateId, APIMessages.INCORRECT_KEYS_FOUND);
+        }
       }
-    }
 
-    return true;
+      if (command.schema) {
+        const parsedSchema: SchemaDto = JSON.parse(command.schema);
+
+        const errors: string[] = [];
+        if (!Array.isArray(parsedSchema)) {
+          throw new DocumentNotFoundException(
+            'Schema',
+            command.schema,
+            'Invalid schema input. An array of objects is expected.'
+          );
+        }
+
+        for (const item of parsedSchema) {
+          const columnDto = plainToClass(SchemaDto, item);
+          const validationErrors = await validate(columnDto);
+
+          // eslint-disable-next-line no-magic-numbers
+          if (validationErrors.length > 0) {
+            errors.push(
+              `Schema Error : ${validationErrors
+                .map((err) => {
+                  return Object.values(err.constraints);
+                })
+                .join(', ')}`
+            );
+
+            throw new DocumentNotFoundException('Schema', command.schema, errors.toString());
+          }
+        }
+      }
+
+      return { success: true };
+    } catch (error) {
+      if (error instanceof DocumentNotFoundException) {
+        throw new HttpException(
+          {
+            message: error.message,
+            errorCode: error.getStatus(),
+          },
+          HttpStatus.NOT_FOUND
+        );
+      }
+
+      if (error instanceof UnauthorizedException) {
+        throw new HttpException(
+          {
+            message: APIMessages.INVALID_AUTH_TOKEN,
+            errorCode: error.getStatus(),
+          },
+          HttpStatus.NOT_FOUND
+        );
+      }
+
+      throw new HttpException('Internal Server Error', HttpStatus.INTERNAL_SERVER_ERROR);
+    }
   }
 }
diff --git a/apps/api/src/app/shared/constants.ts b/apps/api/src/app/shared/constants.ts
index 170a18acf..ef75a8cac 100644
--- a/apps/api/src/app/shared/constants.ts
+++ b/apps/api/src/app/shared/constants.ts
@@ -24,6 +24,8 @@ export const APIMessages = {
   INCORRECT_LOGIN_CREDENTIALS: 'Incorrect email or password provided',
   OPERATION_NOT_ALLOWED: `You're not allowed to perform this action.`,
   EMAIL_ALREADY_EXISTS: 'Email already exists',
+  INCORRECT_KEYS_FOUND: 'Invalid keys found! Please check and correct them from web',
+  INVALID_AUTH_TOKEN: 'Invalid authentication token',
 };
 
 export const CONSTANTS = {
diff --git a/apps/web/pages/imports/[id].tsx b/apps/web/pages/imports/[id].tsx
index 6d2db3fa9..03b9230b0 100644
--- a/apps/web/pages/imports/[id].tsx
+++ b/apps/web/pages/imports/[id].tsx
@@ -65,6 +65,7 @@ export default function ImportDetails({ template }: ImportDetailProps) {
         </Group>
         <Group spacing="xs">
           <Button
+            // eslint-disable-next-line no-magic-numbers
             disabled={!isImplerInitiated || columns?.length === 0}
             color="green"
             onClick={() => showWidget({ colorScheme })}
@@ -127,11 +128,11 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     const templateId = context.params?.id as string | undefined;
     const authenticationToken = context.req.cookies[CONSTANTS.AUTH_COOKIE_NAME];
     if (!templateId || !authenticationToken) throw new Error();
-
     const template = await commonApi<ITemplate>(API_KEYS.TEMPLATE_DETAILS as any, {
       parameters: [templateId],
       cookie: `${CONSTANTS.AUTH_COOKIE_NAME}=${authenticationToken}`,
     });
+
     if (!template) throw new Error();
 
     return {
diff --git a/apps/widget/src/components/App.tsx b/apps/widget/src/components/App.tsx
index dcdd2b3f3..3ccaceeaf 100644
--- a/apps/widget/src/components/App.tsx
+++ b/apps/widget/src/components/App.tsx
@@ -49,7 +49,7 @@ export function App() {
       <Router basename={CONTEXT_PATH}>
         <Routes>
           <Route
-            path="/:projectId"
+            path="/widget"
             element={
               <AppShell>
                 <WidgetShell>
diff --git a/apps/widget/src/components/Common/Container/Container.tsx b/apps/widget/src/components/Common/Container/Container.tsx
index 96e340eb2..53b1227f1 100644
--- a/apps/widget/src/components/Common/Container/Container.tsx
+++ b/apps/widget/src/components/Common/Container/Container.tsx
@@ -1,9 +1,6 @@
 import * as WebFont from 'webfontloader';
 import { Global } from '@emotion/react';
-import { useParams } from 'react-router-dom';
-import { logAmplitudeEvent } from '@amplitude';
 import { MantineProvider } from '@mantine/core';
-import { useQueryClient } from '@tanstack/react-query';
 import { Notifications } from '@mantine/notifications';
 import { useEffect, useState, PropsWithChildren } from 'react';
 
@@ -11,20 +8,21 @@ import { Provider } from '../Provider';
 import { ApiService } from '@impler/client';
 import { MessageHandlerDataType } from '@types';
 import { generateShades, ParentWindow } from '@util';
-import { useAuthentication } from '@hooks/useAuthentication';
-import { IInitPayload, IShowPayload, EventTypesEnum } from '@impler/shared';
+import { IShowPayload, EventTypesEnum } from '@impler/shared';
 import { API_URL, colors, mantineConfig, variables } from '@config';
 
 let api: ApiService;
 
 export function Container({ children }: PropsWithChildren<{}>) {
   if (!api) api = new ApiService(API_URL);
-  const queryClient = useQueryClient();
-  const { projectId = '' } = useParams<{ projectId: string }>();
+  const [secondaryPayload, setSecondaryPayload] = useState<IShowPayload>({
+    uuid: '',
+    host: '',
+    projectId: '',
+    accessToken: '',
+    primaryColor: colors.primary,
+  });
   const [showWidget, setShowWidget] = useState<boolean>(false);
-  const [primaryPayload, setPrimaryPayload] = useState<IInitPayload>();
-  const [secondaryPayload, setSecondaryPayload] = useState<IShowPayload>({ host: '', primaryColor: colors.primary });
-  const { isAuthenticated, refetch } = useAuthentication({ api, projectId });
 
   useEffect(() => {
     WebFont.load({
@@ -35,11 +33,6 @@ export function Container({ children }: PropsWithChildren<{}>) {
   }, []);
 
   useEffect(() => {
-    if (process.env.NODE_ENV === 'test') {
-      // eslint-disable-next-line
-      (window as any).initHandler = messageEventHandler;
-    }
-
     window.addEventListener('message', messageEventHandler);
 
     ParentWindow.Ready();
@@ -48,28 +41,15 @@ export function Container({ children }: PropsWithChildren<{}>) {
   }, []);
 
   function messageEventHandler({ data }: { data?: MessageHandlerDataType }) {
-    if (
-      data &&
-      data.type === EventTypesEnum.INIT_IFRAME &&
-      JSON.stringify(data.value) !== JSON.stringify(primaryPayload)
-    ) {
-      setPrimaryPayload(data.value);
-      if (data.value?.accessToken) {
+    if (data && data.type === EventTypesEnum.SHOW_WIDGET) {
+      if (data.value.accessToken) {
         api.setAuthorizationToken(data.value.accessToken);
       }
-      refetch();
-    }
-    if (data && data.type === EventTypesEnum.SHOW_WIDGET) {
-      queryClient.resetQueries();
-      queryClient.invalidateQueries();
-      logAmplitudeEvent('OPEN', { hasExtra: data.value.extra !== undefined });
-      setSecondaryPayload({ ...data.value, primaryColor: data.value.primaryColor || colors.primary });
       setShowWidget(true);
+      setSecondaryPayload({ ...data.value, primaryColor: data.value.primaryColor || colors.primary });
     }
   }
 
-  if (!isAuthenticated) return null;
-
   return (
     <>
       <Global
@@ -133,11 +113,11 @@ export function Container({ children }: PropsWithChildren<{}>) {
           // api
           api={api}
           // impler-context
-          projectId={projectId}
           data={secondaryPayload.data}
+          extra={secondaryPayload?.extra}
+          projectId={secondaryPayload.projectId}
           templateId={secondaryPayload.templateId}
           authHeaderValue={secondaryPayload?.authHeaderValue}
-          extra={secondaryPayload?.extra}
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           primaryColor={secondaryPayload.primaryColor!}
         >
diff --git a/apps/widget/src/components/Common/Heading/Heading.tsx b/apps/widget/src/components/Common/Heading/Heading.tsx
index ba5a525dc..475560388 100644
--- a/apps/widget/src/components/Common/Heading/Heading.tsx
+++ b/apps/widget/src/components/Common/Heading/Heading.tsx
@@ -9,6 +9,9 @@ interface IHeadingProps {
 }
 
 const Steps = [
+  {
+    label: TEXTS.STEPS.VALIDATE,
+  },
   {
     label: TEXTS.STEPS.UPLOAD,
   },
@@ -28,10 +31,17 @@ export function Heading({ active, title }: IHeadingProps) {
 
   return (
     <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
-      <Group style={{ justifyContent: 'space-between' }} mb="lg">
-        <Title order={3}>{title}</Title>
-        <Stepper active={active} steps={Steps} primaryColor={theme.colors.primary[variables.colorIndex]} />
-      </Group>
+      {
+        // eslint-disable-next-line no-magic-numbers
+        active === 0 ? (
+          <></>
+        ) : (
+          <Group style={{ justifyContent: 'space-between' }} mb="lg">
+            <Title order={3}>{title}</Title>
+            <Stepper active={active} steps={Steps} primaryColor={theme.colors.primary[variables.colorIndex]} />
+          </Group>
+        )
+      }
     </MediaQuery>
   );
 }
diff --git a/apps/widget/src/components/widget/Phases/Phase0/Phase0.tsx b/apps/widget/src/components/widget/Phases/Phase0/Phase0.tsx
new file mode 100644
index 000000000..800c96c59
--- /dev/null
+++ b/apps/widget/src/components/widget/Phases/Phase0/Phase0.tsx
@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { Alert } from '@mantine/core';
+import { LoadingOverlay } from '@ui/LoadingOverlay';
+import { usePhase0 } from '@hooks/Phase0/usePhase0';
+
+interface IPhase0Props {
+  onValidationSuccess: () => void;
+}
+
+export function Phase0(props: IPhase0Props) {
+  const { onValidationSuccess: goNext } = props;
+  const { isLoading, error, handleValidate, isWidgetOpened } = usePhase0({
+    goNext,
+  });
+
+  useEffect(() => {
+    if (isWidgetOpened) handleValidate();
+  }, [isWidgetOpened]);
+
+  if (isLoading) return <LoadingOverlay visible={isLoading} />;
+
+  if (error)
+    return (
+      <Alert
+        color="yellow"
+        style={{
+          textAlign: 'center',
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%,-50%)',
+          maxWidth: '100%',
+          border: '.1rem solid #FFC300',
+        }}
+      >
+        {error.message}
+      </Alert>
+    );
+
+  return null;
+}
diff --git a/apps/widget/src/components/widget/Phases/Phase0/index.ts b/apps/widget/src/components/widget/Phases/Phase0/index.ts
new file mode 100644
index 000000000..8fef562ab
--- /dev/null
+++ b/apps/widget/src/components/widget/Phases/Phase0/index.ts
@@ -0,0 +1 @@
+export * from './Phase0';
diff --git a/apps/widget/src/components/widget/Widget.tsx b/apps/widget/src/components/widget/Widget.tsx
index 42dd710b5..4b06abee3 100644
--- a/apps/widget/src/components/widget/Widget.tsx
+++ b/apps/widget/src/components/widget/Widget.tsx
@@ -14,11 +14,12 @@ import { PromptModal } from './Phases/PromptModal';
 import { Layout } from 'components/Common/Layout';
 import { PhasesEum, PromptModalTypesEnum } from '@types';
 import { logAmplitudeEvent, resetAmplitude } from '@amplitude';
+import { Phase0 } from './Phases/Phase0';
 
 export function Widget() {
   const defaultDataCount = 0;
+  const [phase, setPhase] = useState<PhasesEum>(PhasesEum.VALIDATE);
   const { terminateUpload } = useWidget();
-  const [phase, setPhase] = useState<PhasesEum>(PhasesEum.UPLOAD);
   const [dataCount, setDataCount] = useState<number>(defaultDataCount);
   const [promptContinueAction, setPromptContinueAction] = useState<PromptModalTypesEnum>();
   const { showWidget, setShowWidget, reset: resetAppState, uploadInfo, templateInfo, title } = useAppState();
@@ -38,7 +39,7 @@ export function Widget() {
     setPromptContinueAction(undefined);
   };
   const onClose = () => {
-    if ([PhasesEum.UPLOAD, PhasesEum.COMPLETE].includes(phase)) closeWidget();
+    if ([PhasesEum.VALIDATE, PhasesEum.UPLOAD, PhasesEum.COMPLETE].includes(phase)) closeWidget();
     else setPromptContinueAction(PromptModalTypesEnum.CLOSE);
   };
   const closeWidget = () => {
@@ -51,7 +52,7 @@ export function Widget() {
   };
   const resetProgress = () => {
     resetAppState();
-    setPhase(PhasesEum.UPLOAD);
+    setPhase(PhasesEum.VALIDATE);
   };
   const onComplete = (uploadData: IUpload) => {
     setDataCount(uploadData.totalRecords);
@@ -60,6 +61,7 @@ export function Widget() {
   };
 
   const PhaseView = {
+    [PhasesEum.VALIDATE]: <Phase0 onValidationSuccess={() => setPhase(PhasesEum.UPLOAD)} />,
     [PhasesEum.UPLOAD]: <Phase1 onNextClick={() => setPhase(PhasesEum.MAPPING)} />,
     [PhasesEum.MAPPING]: <Phase2 onNextClick={() => setPhase(PhasesEum.REVIEW)} onPrevClick={onUploadResetClick} />,
     [PhasesEum.REVIEW]: <Phase3 onNextClick={onComplete} onPrevClick={onUploadResetClick} />,
diff --git a/apps/widget/src/config/texts.config.ts b/apps/widget/src/config/texts.config.ts
index 51fdfaeb8..2b0625cf6 100644
--- a/apps/widget/src/config/texts.config.ts
+++ b/apps/widget/src/config/texts.config.ts
@@ -1,11 +1,13 @@
 export const TEXTS = {
   TITLES: {
+    VALIDATE: 'Validate',
     UPLOAD: 'Upload',
     MAPPING: 'Mapping',
     REVIEW: 'Review',
     COMPLETE: 'Complete',
   },
   STEPS: {
+    VALIDATE: 'Validate',
     UPLOAD: 'Upload',
     MAPPING: 'Mapping',
     REVIEW: 'Review',
diff --git a/apps/widget/src/hooks/Phase0/usePhase0.ts b/apps/widget/src/hooks/Phase0/usePhase0.ts
new file mode 100644
index 000000000..725dac5b8
--- /dev/null
+++ b/apps/widget/src/hooks/Phase0/usePhase0.ts
@@ -0,0 +1,42 @@
+import { IErrorObject } from '@impler/shared';
+import { useAPIState } from '@store/api.context';
+import { useAppState } from '@store/app.context';
+import { useImplerState } from '@store/impler.context';
+import { useMutation } from '@tanstack/react-query';
+
+interface IUsePhase0Props {
+  goNext: () => void;
+}
+
+export function usePhase0({ goNext }: IUsePhase0Props) {
+  const { api } = useAPIState();
+  const AppContext = useAppState();
+  const { projectId, templateId } = useImplerState();
+
+  const {
+    error,
+    isLoading,
+    mutate: checkIsRequestvalid,
+  } = useMutation<boolean, IErrorObject, any, string[]>(
+    ['valid'],
+    () => api.checkIsRequestvalid(projectId, templateId, AppContext.schema) as Promise<boolean>,
+    {
+      onSuccess(valid) {
+        if (valid) {
+          goNext();
+        }
+      },
+    }
+  );
+
+  const handleValidate = async () => {
+    return checkIsRequestvalid({ projectId, templateId, schema: AppContext.schema });
+  };
+
+  return {
+    error,
+    isLoading,
+    handleValidate,
+    isWidgetOpened: AppContext.showWidget,
+  };
+}
diff --git a/apps/widget/src/hooks/Phase1/usePhase1.ts b/apps/widget/src/hooks/Phase1/usePhase1.ts
index ac1f2f477..e9317edcb 100644
--- a/apps/widget/src/hooks/Phase1/usePhase1.ts
+++ b/apps/widget/src/hooks/Phase1/usePhase1.ts
@@ -38,25 +38,23 @@ export function usePhase1({ goNext }: IUsePhase1Props) {
     data: dataTemplates,
     isFetched,
     isLoading,
-  } = useQuery<ITemplate[], IErrorObject, ITemplate[], string[]>(['templates'], () => api.getTemplates(projectId), {
-    onSuccess(templatesResponse) {
-      setTemplates(
-        templatesResponse.map((item) => ({
-          label: item.name,
-          value: item._id,
-        }))
-      );
-      if (templateId) {
-        const foundTemplate = templatesResponse.find((templateItem) => templateItem._id === templateId);
-        if (foundTemplate) {
-          setTemplateInfo(foundTemplate);
-        }
-      }
-    },
-    onError(error: IErrorObject) {
-      notifier.showError({ message: error.message, title: error.error });
-    },
-  });
+  } = useQuery<ITemplate[], IErrorObject, ITemplate[], string[]>(
+    ['templates', projectId],
+    () => api.getTemplates(projectId),
+    {
+      onSuccess(templatesResponse) {
+        setTemplates(
+          templatesResponse.map((item) => ({
+            label: item.name,
+            value: item._id,
+          }))
+        );
+      },
+      onError(error: IErrorObject) {
+        notifier.showError({ message: error.message, title: error.error });
+      },
+    }
+  );
   const { isLoading: isUploadLoading, mutate: submitUpload } = useMutation<IUpload, IErrorObject, IUploadValues>(
     ['upload'],
     (values: any) => api.uploadFile(values),
@@ -109,8 +107,14 @@ export function usePhase1({ goNext }: IUsePhase1Props) {
   } = useForm<IFormvalues>();
 
   useEffect(() => {
-    if (templateId) setValue('templateId', templateId);
-  }, [templateId]);
+    if (templateId) {
+      setValue('templateId', templateId);
+      const foundTemplate = dataTemplates?.find((templateItem) => templateItem._id === templateId);
+      if (foundTemplate) {
+        setTemplateInfo(foundTemplate);
+      }
+    }
+  }, [templateId, dataTemplates]);
 
   const findTemplate = (): ITemplate | undefined => {
     let foundTemplate: ITemplate | undefined;
diff --git a/apps/widget/src/hooks/useAuthentication.ts b/apps/widget/src/hooks/useAuthentication.ts
deleted file mode 100644
index b0af7c98d..000000000
--- a/apps/widget/src/hooks/useAuthentication.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useState } from 'react';
-import { ApiService } from '@impler/client';
-import { IErrorObject } from '@impler/shared';
-import { logger, ParentWindow } from '@util';
-import { useQuery } from '@tanstack/react-query';
-
-interface IUseAuthenticationProps {
-  api: ApiService;
-  projectId: string;
-}
-export function useAuthentication({ api, projectId }: IUseAuthenticationProps) {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const { refetch } = useQuery<Boolean, IErrorObject, any, string[]>(
-    ['valid'],
-    () => api.checkIsRequestvalid(projectId) as Promise<boolean>,
-    {
-      enabled: false,
-      retry: 0,
-      onSuccess(isValid) {
-        if (isValid) {
-          setIsAuthenticated(true);
-          ParentWindow.AuthenticationValid();
-        }
-      },
-      onError(err) {
-        logger.logError(logger.ErrorTypesEnum.INVALID_PROPS, err.message);
-        ParentWindow.AuthenticationError(err.message);
-      },
-    }
-  );
-
-  return {
-    isAuthenticated,
-    refetch,
-  };
-}
diff --git a/apps/widget/src/types/component.types.ts b/apps/widget/src/types/component.types.ts
index bcb3579c0..5c6616f4a 100644
--- a/apps/widget/src/types/component.types.ts
+++ b/apps/widget/src/types/component.types.ts
@@ -1,10 +1,9 @@
-import { IInitPayload, IShowPayload } from '@impler/shared';
+import { IShowPayload } from '@impler/shared';
 import { EventTypesEnum } from '@impler/shared';
 
 export type MessageHandlerDataType =
   | {
       type: EventTypesEnum.INIT_IFRAME;
-      value: IInitPayload;
     }
   | {
       type: EventTypesEnum.SHOW_WIDGET;
@@ -17,6 +16,7 @@ export enum PromptModalTypesEnum {
 }
 
 export enum PhasesEum {
+  VALIDATE,
   UPLOAD,
   MAPPING,
   REVIEW,
diff --git a/libs/embed/src/embed.ts b/libs/embed/src/embed.ts
index 7f34174e0..96d73efd2 100644
--- a/libs/embed/src/embed.ts
+++ b/libs/embed/src/embed.ts
@@ -4,7 +4,7 @@
 //
 
 import { EventTypesEnum } from './shared/eventTypes';
-import { UnmountedError, AuthenticationError } from './shared/errors';
+import { UnmountedError } from './shared/errors';
 import { IFRAME_URL } from './shared/resources';
 
 const WEASL_WRAPPER_ID = 'impler-container';
@@ -12,9 +12,7 @@ const IFRAME_ID = 'impler-iframe-element';
 const WRAPPER_CLASS_NAME = 'wrapper-impler-widget';
 
 class Impler {
-  public projectId: string | unknown;
-
-  private i18n?: Record<string, unknown>;
+  private projectId: string = '';
 
   private onloadFunc: (b: any) => void;
 
@@ -22,29 +20,32 @@ class Impler {
 
   private widgetVisible = false;
 
-  private listeners: { [key: string]: (data: any) => void } = {};
+  private listeners: {
+    [key: string]: { [key: string]: (data: any) => void };
+  } = {};
 
   private initPayload: any;
 
-  private isWidgetReady: boolean = false;
-
-  private isAuthenticated: boolean = false;
+  private activeWidgetId: string | undefined;
 
-  private authenticationError?: string;
+  private isWidgetReady: boolean = false;
 
   constructor(onloadFunc = function () {}) {
     this.onloadFunc = onloadFunc;
     this.widgetVisible = false;
   }
 
-  on = (name: string, cb: (data: any) => void) => {
-    this.listeners[name] = cb;
+  on = (name: string, cb: (data: any) => void, id: string = '1') => {
+    if (!this.listeners[id]) this.listeners[id] = {};
+    this.listeners[id][name] = cb;
   };
 
-  init = (projectId: string, payload: any) => {
-    this.projectId = projectId;
-    this.initPayload = payload;
-    this.initializeIframe(projectId);
+  init = (widgetOrProjectId: string = '1', initPayload: { accessToken: string }) => {
+    if (initPayload) {
+      this.projectId = widgetOrProjectId;
+      this.initPayload = initPayload;
+    }
+    this.initializeIframe(widgetOrProjectId);
     this.mountIframe();
   };
 
@@ -74,11 +75,18 @@ class Impler {
     if (elem) {
       elem.style.visibility = 'visible';
     }
+    if (payload.uuid) {
+      this.activeWidgetId = payload.uuid;
+    } else {
+      this.activeWidgetId = '1';
+    }
 
     this.iframe?.contentWindow?.postMessage(
       {
         type: EventTypesEnum.SHOW_WIDGET,
         value: {
+          projectId: this.projectId,
+          ...(this.initPayload || {}),
           ...payload,
           host: location.host,
         },
@@ -87,12 +95,12 @@ class Impler {
     );
   };
 
+  isReady = () => this.isWidgetReady;
+
   // PRIVATE METHODS
   ensureMounted = () => {
     if (!document.getElementById(IFRAME_ID)) {
       throw new UnmountedError('impler.init needs to be called first');
-    } else if (!this.isAuthenticated) {
-      throw new AuthenticationError(this.authenticationError || `You're not authenticated to access the widget`);
     }
   };
 
@@ -102,46 +110,36 @@ class Impler {
       switch (event.data.type) {
         case EventTypesEnum.WIDGET_READY:
           this.isWidgetReady = true;
-          this.iframe?.contentWindow?.postMessage(
-            {
-              type: EventTypesEnum.INIT_IFRAME,
-              value: this.initPayload,
-            },
-            '*'
-          );
-          this.postMessageToContentWindow(EventTypesEnum.WIDGET_READY);
+          if (typeof this.listeners === 'object') {
+            Object.keys(this.listeners).forEach((id) => {
+              this.postMessageToContentWindow(EventTypesEnum.WIDGET_READY, id);
+            });
+          }
           break;
         case EventTypesEnum.CLOSE_WIDGET:
           this.hideWidget();
-          this.postMessageToContentWindow(event.data.type);
-          break;
-        case EventTypesEnum.AUTHENTICATION_VALID:
-          this.isAuthenticated = true;
-          this.authenticationError = undefined;
+          this.postMessageToContentWindow(event.data.type, this.activeWidgetId!);
           break;
-        case EventTypesEnum.AUTHENTICATION_ERROR:
-          this.isAuthenticated = false;
-          this.authenticationError = event.data.value?.message;
         default:
           this.postMessageToContentWindow(event.data.type, event.data.value);
       }
     }
   };
 
-  postMessageToContentWindow(type: EventTypesEnum, value?: any): void {
-    if (!this.listeners['message']) {
+  postMessageToContentWindow(type: EventTypesEnum, id: string, value?: any): void {
+    if (!this.listeners[id]?.['message']) {
       return;
     }
-    this.listeners['message']({ type, value });
+    this.listeners[id]['message']({ type, value });
   }
 
-  initializeIframe = (projectId: string) => {
+  initializeIframe = (id: string) => {
     let iframe: HTMLIFrameElement;
     if (!document.getElementById(IFRAME_ID)) {
       const iframe = document.createElement('iframe');
 
       iframe.style.backgroundColor = 'transparent';
-      iframe.src = `${IFRAME_URL}/${projectId}?`;
+      iframe.src = `${IFRAME_URL}/widget?id=${id}`;
       iframe.id = IFRAME_ID;
       iframe.style.border = 'none';
       iframe.style.position = 'fixed';
@@ -159,32 +157,6 @@ class Impler {
       iframe = document.getElementById(IFRAME_ID) as HTMLIFrameElement;
       this.iframe = iframe;
     }
-    if (this.isWidgetReady) {
-      this.iframe?.contentWindow?.postMessage(
-        {
-          type: EventTypesEnum.INIT_IFRAME,
-          value: this.initPayload,
-        },
-        '*'
-      );
-      this.postMessageToContentWindow(EventTypesEnum.WIDGET_READY);
-    }
-  };
-
-  runPriorCalls = () => {
-    const allowedCalls: string[] = [];
-    const priorCalls =
-      window.impler && window.impler._c && typeof window.impler._c === 'object' ? window.impler._c : [];
-    priorCalls.forEach((call: string[]) => {
-      const method: any = call[0];
-      const args = call[1];
-      if (allowedCalls.includes(method)) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        (this[method as any] as any).apply(this, args);
-      }
-    });
-    this.onloadFunc.call(window.impler, window.impler);
   };
 
   mountIframe = () => {
@@ -218,4 +190,5 @@ export default ((window: any) => {
   (window as any).impler.init = impler.init;
   (window as any).impler.on = impler.on;
   (window as any).impler.show = impler.showWidget;
+  (window as any).impler.isReady = impler.isReady;
 })(window);
diff --git a/libs/embed/src/shared/errors.ts b/libs/embed/src/shared/errors.ts
index 79eccc2f2..cb4f904fd 100644
--- a/libs/embed/src/shared/errors.ts
+++ b/libs/embed/src/shared/errors.ts
@@ -6,29 +6,3 @@ export class UnmountedError extends Error {
     this.message = message;
   }
 }
-
-export class ResponseError extends Error {
-  data: any;
-  constructor(message = '', data = {}, ...args: any) {
-    super(message, ...(args as []));
-    this.name = 'ResponseError';
-    this.message = message;
-    this.data = data;
-  }
-}
-
-export class DomainVerificationError extends Error {
-  constructor(message = '', ...args: any) {
-    super(message, ...(args as []));
-    this.name = 'DomainVerificationError';
-    this.message = message;
-  }
-}
-
-export class AuthenticationError extends Error {
-  constructor(message: string, ...args: any) {
-    super(message, ...(args as []));
-    this.name = 'AuthenticationError';
-    this.message = message;
-  }
-}
diff --git a/libs/shared/src/types/widget/widget.types.ts b/libs/shared/src/types/widget/widget.types.ts
index 6b1ac7956..995622607 100644
--- a/libs/shared/src/types/widget/widget.types.ts
+++ b/libs/shared/src/types/widget/widget.types.ts
@@ -1,6 +1,3 @@
-export interface IInitPayload {
-  accessToken?: string;
-}
 export interface IShowPayload {
   host: string;
   extra?: string;
@@ -12,6 +9,9 @@ export interface IShowPayload {
   schema?: string;
   data?: Record<string, string | any>[];
   output?: string;
+  projectId: string;
+  accessToken: string;
+  uuid: string;
 }
 export interface IOption {
   value: string;
diff --git a/packages/client/src/api/api.service.ts b/packages/client/src/api/api.service.ts
index c3228488c..ad8e0cb40 100644
--- a/packages/client/src/api/api.service.ts
+++ b/packages/client/src/api/api.service.ts
@@ -43,8 +43,16 @@ export class ApiService {
     this.isAuthenticated = false;
   }
 
-  async checkIsRequestvalid(projectId: string, template?: string) {
-    return this.httpClient.post(`/common/valid`, { projectId, template });
+  async checkIsRequestvalid(
+    projectId: string,
+    templateId?: string,
+    schema?: string
+  ) {
+    return this.httpClient.post(`/common/valid`, {
+      projectId,
+      templateId,
+      schema,
+    });
   }
 
   async getImportConfig(projectId: string) {
diff --git a/packages/react/src/hooks/useImpler.ts b/packages/react/src/hooks/useImpler.ts
index 303b927b8..07053bd60 100644
--- a/packages/react/src/hooks/useImpler.ts
+++ b/packages/react/src/hooks/useImpler.ts
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
-import { logError } from '../utils/logger';
 import { EventTypesEnum, IShowPayload, IUpload } from '@impler/shared';
+
+import { logError } from '../utils/logger';
 import { EventCalls, UploadTemplateData, UploadData, ISchemaItem } from '../components/button/Button.types';
 
 interface ShowWidgetProps {
@@ -37,14 +38,12 @@ export function useImpler({
   onUploadStart,
   onUploadTerminate,
 }: UseImplerProps) {
+  const [uuid] = useState(generateUuid());
   const [isImplerInitiated, setIsImplerInitiated] = useState(false);
 
   const onEventHappen = useCallback(
     (eventData: EventCalls) => {
       switch (eventData.type) {
-        case EventTypesEnum.WIDGET_READY:
-          setIsImplerInitiated(true);
-          break;
         case EventTypesEnum.UPLOAD_STARTED:
           if (onUploadStart) onUploadStart(eventData.value);
           break;
@@ -62,25 +61,40 @@ export function useImpler({
     [onUploadComplete, onUploadStart, onUploadTerminate, onWidgetClose]
   );
 
-  const initWidget = useCallback(() => {
-    if (window.impler) {
-      window.impler.init(projectId, { accessToken });
-      window.impler.on('message', onEventHappen);
-    }
-  }, [accessToken, onEventHappen, projectId]);
+  useEffect(() => {
+    const readyCheckInterval = setInterval(() => {
+      if (window.impler && window.impler.isReady()) {
+        setIsImplerInitiated(true);
+        clearInterval(readyCheckInterval);
+      }
+    }, 1000);
+
+    return () => {
+      clearInterval(readyCheckInterval);
+    };
+  }, []);
 
   useEffect(() => {
     if (!window.impler) logError('IMPLER_UNDEFINED_ERROR');
-    else if (!projectId) logError('PROJECTID_NOT_SPECIFIED');
-    else initWidget();
-  }, [accessToken, templateId, initWidget]);
+    else {
+      window.impler.init(uuid);
+      window.impler.on('message', onEventHappen, uuid);
+    }
+  }, []);
+
+  function generateUuid() {
+    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+  }
 
   const showWidget = async ({ colorScheme, data, schema, output }: ShowWidgetProps) => {
-    if (isImplerInitiated) {
+    if (window.impler && isImplerInitiated) {
       const payload: IShowPayload = {
+        uuid,
         templateId,
         data,
         host: '',
+        projectId,
+        accessToken,
       };
       if (Array.isArray(schema) && schema.length > 0) {
         payload.schema = JSON.stringify(schema);
@@ -110,9 +124,7 @@ export function useImpler({
           payload.authHeaderValue = authHeaderValue;
         }
       }
-      if (window.impler && isImplerInitiated) {
-        window.impler.show(payload);
-      }
+      window.impler.show(payload);
     }
   };