diff --git a/src/App.svelte b/src/App.svelte
index 9c477de..816e543 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -15,6 +15,7 @@
 	import bg from '$lib/assets/sparrowLogoBackground.svg';
 	import ExternalNavigation from './routing/ExternalNavigation.svelte';
 	import constants from '$lib/utils/constants';
+	import VerifyEmail from './pages/Auth/verify-email/VerifyEmail.svelte';
 	export let url = '/';
 </script>
 
@@ -27,6 +28,7 @@
 	<Route path="/register" component={RegisterPage} />
 	<Route path="/update/password/:id" component={UpdatePassword} />
 	<Route path="/reset/password/:id/:code" component={ResetPassword} />
+	<Route path="/verify/email/:id" component={VerifyEmail} />
 	<Route path="/redirect" component={OauthRedirect} />
 	<Route path="/support">
 		<ExternalNavigation to={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`}/>
diff --git a/src/lib/services/auth.service.ts b/src/lib/services/auth.service.ts
index cad9bce..158b9ba 100644
--- a/src/lib/services/auth.service.ts
+++ b/src/lib/services/auth.service.ts
@@ -58,4 +58,18 @@ const resetPassword = async (changePasswordBody: resetPasswordPostBody) => {
 	return response;
 };
 
-export { registerUser, loginUser, forgotPassword, loginWithGoogle, verifyEmail, resetPassword, getUser };
+const sendUserEmailVerification = async (emailInfo: EmailPostBody) => {
+	const response = await makeRequest('POST', `${apiUrl}/api/user/send-user-verification-email`, {
+		body: emailInfo
+	});
+	return response;
+};
+
+const verifyUserEmail = async (verifyInfo: verifyPostbody) => {
+	const response = await makeRequest('POST', `${apiUrl}/api/user/verify-user-email`, {
+		body: verifyInfo
+	});
+	return response;
+};
+
+export { registerUser, loginUser, forgotPassword, loginWithGoogle, verifyEmail, resetPassword, getUser, sendUserEmailVerification, verifyUserEmail };
diff --git a/src/pages/Auth/entry-point/EntryPoint.svelte b/src/pages/Auth/entry-point/EntryPoint.svelte
index 6369a98..25528ad 100644
--- a/src/pages/Auth/entry-point/EntryPoint.svelte
+++ b/src/pages/Auth/entry-point/EntryPoint.svelte
@@ -45,103 +45,111 @@
 		loadingMessage={redirectRules.loadingMessage}
 	/>
 {:else}
-<BgContainer>
-	<div class="text-white d-flex justify-content-center align-items-center bg-sparrowPrimaryColor" style="height: 60px; width: 60px; border-radius: 6px;">
-		<img src={sparrowicon} alt="" class="" />
-	</div>
-	<p
-		class="container-header pt-4 pb-4 sparrow-fs-28 sparrow-fw-600 text-whiteColor text-center ms-2 me-2"
-		style="letter-spacing: 0.05rem;"
-	>
-		Welcome to Sparrow!
-	</p>
-	<form
-		class="login-form w-100 text-whiteColor ps-1 pe-1 mb-2"
-		novalidate
-		on:submit|preventDefault={async () => {
-			isEmailTouched = true;
-			validationErrors = await handleEntryValidation(entryCredentials);
-			if (!validationErrors?.email) {
-				entryLoader = true;
-				const response = await handleEntry(entryCredentials);
-				if (response.isSuccessful) {
-		
-					 if (response?.data?.registeredWith === 'email' || response?.data?.registeredWith === 'google') {
-						// registered with email
-						isEntry = true;
-						redirectRules.title = `Redirecting to your account...`;
-						redirectRules.description = `${entryCredentials?.email} has been previously used to login via email account.`;
-						redirectRules.loadingMessage = `Please wait while we are redirecting you to your email account....`;
-						setTimeout(() => {
-							navigate(`/login/${entryCredentials?.email}`);
-						}, 1000)
+	<BgContainer>
+		<div
+			class="text-white d-flex justify-content-center align-items-center bg-sparrowPrimaryColor"
+			style="height: 60px; width: 60px; border-radius: 6px;"
+		>
+			<img src={sparrowicon} alt="" class="" />
+		</div>
+		<p
+			class="container-header pt-4 pb-4 sparrow-fs-28 sparrow-fw-600 text-whiteColor text-center ms-2 me-2"
+			style="letter-spacing: 0.05rem;"
+		>
+			Welcome to Sparrow!
+		</p>
+		<form
+			class="login-form w-100 text-whiteColor ps-1 pe-1 mb-2"
+			novalidate
+			on:submit|preventDefault={async () => {
+				isEmailTouched = true;
+				validationErrors = await handleEntryValidation(entryCredentials);
+				if (!validationErrors?.email) {
+					entryLoader = true;
+					const response = await handleEntry(entryCredentials);
+					if (response.isSuccessful) {
+						if (
+							response?.data?.registeredWith === 'email' ||
+							response?.data?.registeredWith === 'google'
+						) {
+							// registered with email
+							isEntry = true;
+							redirectRules.title = `Redirecting to your account...`;
+							redirectRules.description = `${entryCredentials?.email} has been previously used to login via email account.`;
+							redirectRules.loadingMessage = `Please wait while we are redirecting you to your email account....`;
+							setTimeout(() => {
+								navigate(`/login/${entryCredentials?.email}`);
+							}, 1000);
+						} else {
+							navigate(`/register/${entryCredentials?.email}`);
+						}
 					} else {
-						navigate(`/register/${entryCredentials?.email}`);
+						notifications.error(response?.message);
 					}
-				} else {
-					notifications.error(response?.message);
+					entryLoader = false;
 				}
-				entryLoader = false;
-			}
-		}}
-	>
-		<p class="card-subtitle sparrow-fs-20 sparrow-fw-500 mb-3">Sign In or Create an Account</p>
-		<div class="mb-3">
-			<label for="exampleInputEmail1" class="form-label text-lightGray sparrow-fs-14 d-flex">Email<p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p></label>
-			<!-- <img src={starIcon} alt="" class="mb-3" style="width: 7px;" /> -->
-			<input
-				type="email"
-				class="form-control sparrow-fs-16 border:{validationErrors?.email && isEmailTouched
-					? '3px'
-					: '1px'} solid {validationErrors?.email && isEmailTouched
-					? 'border-error'
-					: 'border-default'}"
-				id="exampleInputEmail1"
-				aria-describedby="emailHelp"
-				placeholder="Please enter your Email ID"
-				autocorrect="off"
-				autocapitalize="none"
-				autocomplete="off"
-				bind:value={entryCredentials.email}
-				on:blur={async () => {
-					isEmailTouched = true;
-					validationErrors = await handleEntryValidation(entryCredentials);
-				}}
-				on:input={async () => {
-					validationErrors = await handleEntryValidation(entryCredentials);
-				}}
-			/>
+			}}
+		>
+			<p class="card-subtitle sparrow-fs-20 sparrow-fw-500 mb-3">Sign In or Create an Account</p>
+			<div class="mb-3">
+				<label for="exampleInputEmail1" class="form-label text-lightGray sparrow-fs-14 d-flex"
+					>Email
+					<p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p></label
+				>
+				<!-- <img src={starIcon} alt="" class="mb-3" style="width: 7px;" /> -->
+				<input
+					type="email"
+					class="form-control sparrow-fs-16 border:{validationErrors?.email && isEmailTouched
+						? '3px'
+						: '1px'} solid {validationErrors?.email && isEmailTouched
+						? 'border-error'
+						: 'border-default'}"
+					id="exampleInputEmail1"
+					aria-describedby="emailHelp"
+					placeholder="Please enter your Email ID"
+					autocorrect="off"
+					autocapitalize="none"
+					autocomplete="off"
+					bind:value={entryCredentials.email}
+					on:blur={async () => {
+						isEmailTouched = true;
+						validationErrors = await handleEntryValidation(entryCredentials);
+					}}
+					on:input={async () => {
+						validationErrors = await handleEntryValidation(entryCredentials);
+					}}
+				/>
 
-			{#if validationErrors?.email && isEmailTouched}
-				<small class="form-text text-dangerColor"> {validationErrors?.email}</small>
-			{/if}
-		</div>
+				{#if validationErrors?.email && isEmailTouched}
+					<small class="form-text text-dangerColor"> {validationErrors?.email}</small>
+				{/if}
+			</div>
 
-		<div class="mb-1 ">
-			<Button
-						disable={entryLoader}
-						title={"Continue"}
-						buttonClassProp={"w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16"}
-						type={"primary-gradient"}
-						loader={entryLoader}
-				  	/>
-		</div>
-	</form>
-	<Oauth />
-	<SupportHelp />
-</BgContainer>
+			<div class="mb-1">
+				<Button
+					disable={entryLoader}
+					title={'Continue'}
+					buttonClassProp={'w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16'}
+					type={'primary-gradient'}
+					loader={entryLoader}
+				/>
+			</div>
+		</form>
+		<Oauth />
+		<SupportHelp />
+	</BgContainer>
 {/if}
 
 <style>
 	.btn-primary {
 		background: var(--primary-color);
 	}
-	.btn-primary:hover{
-		background: var( --primary-btn-color-hover)
+	.btn-primary:hover {
+		background: var(--primary-btn-color-hover);
+	}
+	.btn-primary:active {
+		background: var(--button-pressed);
 	}
-    .btn-primary:active{
-	    background:var(--button-pressed)
-    }
 	input {
 		background-color: transparent !important;
 	}
diff --git a/src/pages/Auth/login-page/LoginPage.svelte b/src/pages/Auth/login-page/LoginPage.svelte
index 9cb92f6..74df352 100644
--- a/src/pages/Auth/login-page/LoginPage.svelte
+++ b/src/pages/Auth/login-page/LoginPage.svelte
@@ -66,118 +66,94 @@
 		loadingMessage={redirectRules.loadingMessage}
 	/>
 {:else}
-<BgContainer>
-	<div class="text-white d-flex justify-content-center align-items-center bg-sparrowPrimaryColor" style="height: 60px; width: 60px; border-radius: 6px;">
-		<img src={sparrowicon} alt="" class="" />
-	</div>
-	<p
-		class="container-header pt-4 pb-4 sparrow-fs-28 sparrow-fw-600 text-whiteColor text-center ms-2 me-2"
-		style="letter-spacing: 0.05rem;"
-	>
-		Welcome to Sparrow!
-	</p>
-	<form
-		class="login-form w-100 text-whiteColor ps-1 pe-1 gap-16 mb-2"
-		novalidate
-		on:submit|preventDefault={async () => {
-			isPasswordTouched = true;
-			isEmailTouched = true;
-			validationErrors = await handleLoginValidation(loginCredentials);
-			if (!validationErrors?.email && !validationErrors?.password) {
-				loginLoader = true;
-				const result = await handleLogin(loginCredentials);
-				if (result.isSuccessful) {
-					
-					const response = result.data;
-					isLogin = true;
-					const accessToken = response?.accessToken?.token;
-					const refreshToken = response?.refreshToken?.token;
-					const sparrowRedirect = `sparrow://?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response)}&event=login`;
-					setTimeout(() => {
-						let data = JSON.parse(window.atob(accessToken?.split('.')[1]));
-						redirectRules.title = `Welcome back ${data.name}`;
-						redirectRules.description = `Redirecting you to desktop app...`;
-						redirectRules.message = `If the application does not open automatically,
+	<BgContainer>
+		<div
+			class="text-white d-flex justify-content-center align-items-center bg-sparrowPrimaryColor"
+			style="height: 60px; width: 60px; border-radius: 6px;"
+		>
+			<img src={sparrowicon} alt="" class="" />
+		</div>
+		<p
+			class="container-header pt-4 pb-4 sparrow-fs-28 sparrow-fw-600 text-whiteColor text-center ms-2 me-2"
+			style="letter-spacing: 0.05rem;"
+		>
+			Welcome to Sparrow!
+		</p>
+		<form
+			class="login-form w-100 text-whiteColor ps-1 pe-1 gap-16 mb-2"
+			novalidate
+			on:submit|preventDefault={async () => {
+				isPasswordTouched = true;
+				isEmailTouched = true;
+				validationErrors = await handleLoginValidation(loginCredentials);
+				if (!validationErrors?.email && !validationErrors?.password) {
+					loginLoader = true;
+					const result = await handleLogin(loginCredentials);
+					if (result.isSuccessful) {
+						const response = result.data;
+						if (response?.isEmailVerified) {
+							isLogin = true;
+							const accessToken = response?.accessToken?.token;
+							const refreshToken = response?.refreshToken?.token;
+							const sparrowRedirect = `sparrow://?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response)}&event=login`;
+							setTimeout(() => {
+								let data = JSON.parse(window.atob(accessToken?.split('.')[1]));
+								redirectRules.title = `Welcome back ${data.name}`;
+								redirectRules.description = `Redirecting you to desktop app...`;
+								redirectRules.message = `If the application does not open automatically,
 						please click below.`;
-						redirectRules.loadingMessage = '';
-						redirectRules.isSpinner = false;
-						navigate(sparrowRedirect);
-						redirectRules.buttonClick = () => {
-							navigate(sparrowRedirect);
-						};
-					}, 1000);
-				} else {
-					const response = result.message;
-					if (
-						response === 'Could not authenticate. Please try again.' ||
-						response === 'password must be longer than or equal to 8 characters'
-					) {
-						authenticationError = true;
+								redirectRules.loadingMessage = '';
+								redirectRules.isSpinner = false;
+								navigate(sparrowRedirect);
+								redirectRules.buttonClick = () => {
+									navigate(sparrowRedirect);
+								};
+							}, 1000);
+						} else {
+							localStorage.setItem(`timer-verify-${loginCredentials.email}`, new Date().getTime());
+							notifications.success('Verification code has been sent to your registered Email ID.');
+							navigate(`/verify/email/${loginCredentials.email}`);
+						}
 					} else {
-						notifications.error(response);
+						const response = result.message;
+						if (
+							response === 'Could not authenticate. Please try again.' ||
+							response === 'password must be longer than or equal to 8 characters'
+						) {
+							authenticationError = true;
+						} else {
+							notifications.error(response);
+						}
 					}
+					loginLoader = false;
 				}
-				loginLoader = false;
-			}
-		}}
-	>
-		<p class="card-subtitle sparrow-fs-20 sparrow-fw-500 mb-3">Sign In</p>
-		<div class="mb-3">
-			<label for="exampleInputEmail1" class="form-label text-lightGray sparrow-fs-14 d-flex">Email<p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p> </label>
-			<!-- <img src={starIcon} alt="" class="mb-3" style="width: 7px;" /> -->
-			<input
-				type="email"
-				class="form-control sparrow-fs-16 border:{(validationErrors?.email && isEmailTouched) ||
-				authenticationError
-					? '3px'
-					: '1px'} solid {(validationErrors?.email && isEmailTouched) || authenticationError
-					? 'border-error'
-					: 'border-default'}"
-				id="exampleInputEmail1"
-				aria-describedby="emailHelp"
-				placeholder="Please enter your registered Email ID"
-				autocomplete="off"
-				autocorrect="off"
-				autocapitalize="none"
-				disabled={id? true: false}
-				bind:value={loginCredentials.email}
-				on:blur={async () => {
-					isEmailTouched = true;
-					validationErrors = await handleLoginValidation(loginCredentials);
-				}}
-				on:input={async () => {
-					validationErrors = await handleLoginValidation(loginCredentials);
-					authenticationError = false;
-				}}
-			/>
-
-			{#if validationErrors?.email && isEmailTouched}
-				<small class="form-text text-dangerColor"> {validationErrors?.email}</small>
-			{/if}
-		</div>
-
-		<div class="mb-4">
-			<label for="exampleInputPassword1" class="form-label text-lightGray sparrow-fs-14 d-flex">Password<p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p></label>
-			<!-- <img src={starIcon} alt="" class="mb-3" style="width: 7px;" /> -->
-			<div class="d-flex position-relative">
+			}}
+		>
+			<p class="card-subtitle sparrow-fs-20 sparrow-fw-500 mb-3">Sign In</p>
+			<div class="mb-3">
+				<label for="exampleInputEmail1" class="form-label text-lightGray sparrow-fs-14 d-flex"
+					>Email
+					<p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p>
+				</label>
+				<!-- <img src={starIcon} alt="" class="mb-3" style="width: 7px;" /> -->
 				<input
-					type="password"
-					autocomplete="off"
-					id="exampleInputPassword1"
-					placeholder="Please enter your Password"
-					autocorrect="off"
-					autocapitalize="none"
-					bind:value={loginCredentials.password}
-					class="form-control sparrow-fs-16 pe-5 border:{(validationErrors?.password &&
-						isPasswordTouched) ||
+					type="email"
+					class="form-control sparrow-fs-16 border:{(validationErrors?.email && isEmailTouched) ||
 					authenticationError
 						? '3px'
-						: '1px'} solid {(validationErrors?.password && isPasswordTouched) ||
-					authenticationError
+						: '1px'} solid {(validationErrors?.email && isEmailTouched) || authenticationError
 						? 'border-error'
 						: 'border-default'}"
+					id="exampleInputEmail1"
+					aria-describedby="emailHelp"
+					placeholder="Please enter your registered Email ID"
+					autocomplete="off"
+					autocorrect="off"
+					autocapitalize="none"
+					disabled={id ? true : false}
+					bind:value={loginCredentials.email}
 					on:blur={async () => {
-						isPasswordTouched = true;
+						isEmailTouched = true;
 						validationErrors = await handleLoginValidation(loginCredentials);
 					}}
 					on:input={async () => {
@@ -185,47 +161,87 @@
 						authenticationError = false;
 					}}
 				/>
-				<button
-					type="button"
-					on:click={togglePasswordVisibility}
-					class="border-0 position-absolute eye-icon d-flex align-items-center"
-				>
-					{#if isPasswordVisible}
-						<img src={eyeShow} alt="eye-show" />
-					{:else}
-						<img src={eyeHide} alt="eye-hie" />
-					{/if}
-				</button>
+
+				{#if validationErrors?.email && isEmailTouched}
+					<small class="form-text text-dangerColor"> {validationErrors?.email}</small>
+				{/if}
 			</div>
 
-			{#if validationErrors?.password && isPasswordTouched}
-				<small class="form-text text-dangerColor">{validationErrors?.password}</small>
-			{:else if authenticationError}
-				<small class="form-text text-dangerColor"
-					>The email and password combination you entered appears to be incorrect. Please try
-					again.</small
+			<div class="mb-4">
+				<label for="exampleInputPassword1" class="form-label text-lightGray sparrow-fs-14 d-flex"
+					>Password
+					<p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p></label
 				>
-			{/if}
-		</div>
-		<div class="d-flex mb-4 align-items-center justify-content-end">
-			<Link to="/forgot/password" class="text-decoration-none text-primaryColor sparrow-fs-12 sparrow-fw-500"
-				>Forgot Password?</Link
-			>
-		</div>
+				<!-- <img src={starIcon} alt="" class="mb-3" style="width: 7px;" /> -->
+				<div class="d-flex position-relative">
+					<input
+						type="password"
+						autocomplete="off"
+						id="exampleInputPassword1"
+						placeholder="Please enter your Password"
+						autocorrect="off"
+						autocapitalize="none"
+						bind:value={loginCredentials.password}
+						class="form-control sparrow-fs-16 pe-5 border:{(validationErrors?.password &&
+							isPasswordTouched) ||
+						authenticationError
+							? '3px'
+							: '1px'} solid {(validationErrors?.password && isPasswordTouched) ||
+						authenticationError
+							? 'border-error'
+							: 'border-default'}"
+						on:blur={async () => {
+							isPasswordTouched = true;
+							validationErrors = await handleLoginValidation(loginCredentials);
+						}}
+						on:input={async () => {
+							validationErrors = await handleLoginValidation(loginCredentials);
+							authenticationError = false;
+						}}
+					/>
+					<button
+						type="button"
+						on:click={togglePasswordVisibility}
+						class="border-0 position-absolute eye-icon d-flex align-items-center"
+					>
+						{#if isPasswordVisible}
+							<img src={eyeShow} alt="eye-show" />
+						{:else}
+							<img src={eyeHide} alt="eye-hie" />
+						{/if}
+					</button>
+				</div>
 
-		<div class="mb-1">
-			<Button
-						disable={loginLoader}
-						title={"Sign In"}
-						buttonClassProp={"w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16"}
-						type={"primary-gradient"}
-						loader={loginLoader}
-				  	/>
-		</div>
-	</form>
-	<Oauth />
-	<SupportHelp />
-</BgContainer>
+				{#if validationErrors?.password && isPasswordTouched}
+					<small class="form-text text-dangerColor">{validationErrors?.password}</small>
+				{:else if authenticationError}
+					<small class="form-text text-dangerColor"
+						>The email and password combination you entered appears to be incorrect. Please try
+						again.</small
+					>
+				{/if}
+			</div>
+			<div class="d-flex mb-4 align-items-center justify-content-end">
+				<Link
+					to="/forgot/password"
+					class="text-decoration-none text-primaryColor sparrow-fs-12 sparrow-fw-500"
+					>Forgot Password?</Link
+				>
+			</div>
+
+			<div class="mb-1">
+				<Button
+					disable={loginLoader}
+					title={'Sign In'}
+					buttonClassProp={'w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16'}
+					type={'primary-gradient'}
+					loader={loginLoader}
+				/>
+			</div>
+		</form>
+		<Oauth />
+		<SupportHelp />
+	</BgContainer>
 {/if}
 
 <style>
@@ -235,15 +251,15 @@
 		background-color: transparent;
 	}
 
-	.btn-primary{
+	.btn-primary {
 		background: var(--primary-color);
 	}
-	.btn-primary:hover{
-		background: var( --primary-btn-color-hover)
+	.btn-primary:hover {
+		background: var(--primary-btn-color-hover);
+	}
+	.btn-primary:active {
+		background: var(--button-pressed);
 	}
-	.btn-primary:active{
-	   background:var(--button-pressed)
-    }
 	input {
 		background-color: transparent !important;
 	}
diff --git a/src/pages/Auth/register-page/RegisterPage.svelte b/src/pages/Auth/register-page/RegisterPage.svelte
index b209ca8..f6fa2bf 100644
--- a/src/pages/Auth/register-page/RegisterPage.svelte
+++ b/src/pages/Auth/register-page/RegisterPage.svelte
@@ -132,22 +132,9 @@
 					const response = await handleRegister(userData);
 					if (response.isSuccessful) {
 						isRegistered = true;
-						const accessToken = response?.data.accessToken?.token;
-						const refreshToken = response?.data.refreshToken?.token;
-						const sparrowRedirect = `sparrow://?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response.data)}&event=register`;
-						setTimeout(() => {
-							let data = JSON.parse(window.atob(accessToken?.split('.')[1]));
-							redirectRules.title = `Welcome ${data.name.split(' ')[0]}`;
-							redirectRules.description = `Redirecting you to desktop app...`;
-							redirectRules.message = `If the application does not open automatically,
-						please click below.`;
-							redirectRules.loadingMessage = '';
-							redirectRules.isSpinner = false;
-							navigate(sparrowRedirect);
-							redirectRules.buttonClick = () => {
-								navigate(sparrowRedirect);
-							};
-						}, 5000);
+						localStorage.setItem(`timer-verify-${userData.email}`, new Date().getTime());
+						notifications.success("Verification code has been sent to your registered Email ID.");
+						navigate(`/verify/email/${userData.email}`);
 					} else {
 						if (
 							response.message ===
diff --git a/src/pages/Auth/verify-email/VerifyEmail.svelte b/src/pages/Auth/verify-email/VerifyEmail.svelte
new file mode 100644
index 0000000..ad4c2dc
--- /dev/null
+++ b/src/pages/Auth/verify-email/VerifyEmail.svelte
@@ -0,0 +1,557 @@
+<script lang="ts">
+	import lineIcon from '$lib/assets/line.svg';
+	import starIcon from '$lib/assets/starIcon.svg';
+	import { errorMessageText, isLoading, username } from '$lib/store/auth.store';
+	import { handleVerifyEmail, isSuccessfulResponse } from './verify-email';
+	import sparrowicon from '$lib/assets/logoSparrowSquare.svg';
+	import { writable } from 'svelte/store';
+	import { onDestroy, onMount } from 'svelte';
+	import { Link, navigate } from 'svelte-navigator';
+	import { notifications } from '$lib/components/toast-notification/ToastNotification';
+	import { forgotPassword, sendUserEmailVerification } from '$lib/services/auth.service';
+	import Spinner from '$lib/components/transition/Spinner.svelte';
+	import Button from '$lib/components/button/Button.svelte';
+	import AngleUp from '$lib/assets/angle-up.svelte';
+	import BgContainer from '$lib/components/bgContainer/BgContainer.svelte';
+	import Redirect from '../redirect/Redirect.svelte';
+	export let id: string;
+
+	let seconds = 60;
+	const verifyString = writable('');
+	let verifyLength: string = '';
+	let isRegistered = false;
+	let redirectRules = {
+		title: 'Welcome to Sparrow!',
+		description: 'Bridging Frontend and Backend Development.',
+		message: `Easily document and manage APIs for seamless collaboration between frontend and backend teams. Get started now to simplify your development workflows.`,
+		isSpinner: true,
+		buttonText: 'Open Desktop App',
+		buttonClick: () => {},
+		loadingMessage: 'Please wait while we sign you in....'
+	};
+
+	let timer: number;
+	const calculateRemainingTime = () => {
+		const currentTime = new Date().getTime();
+		const storedTime = parseInt(localStorage.getItem(`timer-verify-${id}`));
+		if (storedTime) {
+			const elapsedTime = storedTime ? Math.floor((currentTime - storedTime) / 1000) : 0;
+			const remainingTime = Math.max(60 - elapsedTime, 0);
+			return remainingTime;
+		} else {
+			return 0;
+		}
+	};
+	const startTimer = () => {
+		clearInterval(timer);
+		timer = setInterval(() => {
+			seconds = calculateRemainingTime();
+			if (seconds === 0) clearInterval(timer);
+		}, 1000);
+	};
+
+	onMount(() => {
+		seconds = calculateRemainingTime();
+		startTimer();
+	});
+	onDestroy(() => clearInterval(timer));
+
+	let verifyCodeCredential = {
+		email: id || '',
+		verificationCode: ''
+	};
+
+	let verifyCode: string = '';
+
+	let validationErrors;
+
+	let verificationCode1: string = '';
+	let verificationCode2: string = '';
+	let verificationCode3: string = '';
+	let verificationCode4: string = '';
+	let verificationCode5: string = '';
+	let verificationCode6: string = '';
+
+	let emailText: string = id || '';
+
+	const handleVerificationCode = () => {
+		verifyCode =
+			verificationCode1 +
+			verificationCode2 +
+			verificationCode3 +
+			verificationCode4 +
+			verificationCode5 +
+			verificationCode6;
+		verifyCodeCredential.verificationCode = verifyCode;
+
+		if (verifyCode.length === 6) {
+			verifyString.set(verifyCode);
+		}
+	};
+
+	verifyString.subscribe((value) => {
+		if (value) {
+			verifyLength = value;
+		}
+	});
+
+	let isLoadingPage: boolean;
+	isLoading.subscribe((value) => {
+		isLoadingPage = value;
+	});
+
+	let verificationCodeError: boolean;
+	isSuccessfulResponse.subscribe((value) => {
+		verificationCodeError = value;
+	});
+
+	let errorMessage: string = '';
+	errorMessageText.subscribe((value) => {
+		if (value) {
+			errorMessage = value;
+		}
+	});
+	let resentCodeLoader = false;
+	const handleResend = async () => {
+		resentCodeLoader = true;
+		const response = await sendUserEmailVerification({ email: id });
+		if (response.isSuccessful) {
+			notifications.success('Verification code sent successfully');
+			localStorage.setItem(`timer-verify-${id}`, new Date().getTime());
+			startTimer();
+		} else {
+			notifications.error(response.message);
+		}
+		resentCodeLoader = false;
+	};
+	const onCodeInput = () => {
+		errorMessageText.set('');
+		isSuccessfulResponse.set(false);
+	};
+	let verifyCodeLoader = false;
+	onDestroy(() => {
+		onCodeInput();
+	});
+
+	function handlePaste(event: ClipboardEvent) {
+		event.preventDefault();
+		const clipboardData = event?.clipboardData || window?.clipboardData;
+		const pastedText = clipboardData.getData('text').trim().slice(0, 6); // Considering you have 6 input fields
+		verificationCode1 = '';
+		verificationCode2 = '';
+		verificationCode3 = '';
+		verificationCode4 = '';
+		verificationCode5 = '';
+		verificationCode6 = '';
+		// Update the values in the array
+		const otpInputs = pastedText.split('');
+
+		// Update the input fields
+		if (otpInputs[0]) {
+			verificationCode1 = otpInputs[0];
+		} else {
+			document.getElementById('verificationCode1')?.focus();
+			onCodeInput();
+			handleVerificationCode();
+			return;
+		}
+		if (otpInputs[1]) {
+			verificationCode2 = otpInputs[1];
+		} else {
+			document.getElementById('verificationCode2')?.focus();
+			onCodeInput();
+			handleVerificationCode();
+			return;
+		}
+		if (otpInputs[2]) {
+			verificationCode3 = otpInputs[2];
+		} else {
+			document.getElementById('verificationCode3')?.focus();
+			onCodeInput();
+			handleVerificationCode();
+			return;
+		}
+		if (otpInputs[3]) {
+			verificationCode4 = otpInputs[3];
+		} else {
+			document.getElementById('verificationCode4')?.focus();
+			onCodeInput();
+			handleVerificationCode();
+			return;
+		}
+		if (otpInputs[4]) {
+			verificationCode5 = otpInputs[4];
+		} else {
+			document.getElementById('verificationCode5')?.focus();
+			onCodeInput();
+			handleVerificationCode();
+			return;
+		}
+		if (otpInputs[5]) {
+			verificationCode6 = otpInputs[5];
+		} else {
+			document.getElementById('verificationCode6')?.focus();
+			onCodeInput();
+			handleVerificationCode();
+			return;
+		}
+		document.getElementById('verificationCode6')?.focus();
+		onCodeInput();
+		handleVerificationCode();
+	}
+</script>
+
+{#if isRegistered}
+	<Redirect
+		title={redirectRules.title}
+		description={redirectRules.description}
+		message={redirectRules.message}
+		isSpinner={redirectRules.isSpinner}
+		buttonText={redirectRules.buttonText}
+		buttonClick={redirectRules.buttonClick}
+		loadingMessage={redirectRules.loadingMessage}
+	/>
+{:else}
+	<BgContainer>
+		<p
+			class="container-header pb-3 sparrow-fs-36 text-whiteColor ms-2 me-2 sparrow-fw-500 w-100 text-left"
+			style="letter-spacing: 0.05em;"
+		>
+			Welcome to Sparrow!
+		</p>
+		<div class="login-form text-lightGray ps-1 pe-1 gap-16">
+			<div class="d-flex flex-column align-items-left mb-2">
+				<div class="d-flex align-items-center justify-content-start mb-3 gap-2">
+					<a
+						class="border-0 bg-transparent font-monospace"
+						style="transform: rotate(-90deg);"
+						href="/init"
+					>
+						<AngleUp color="var(--sparrow-text-color)" height={20} width={20} />
+					</a>
+					<p class="text-whiteColor sparrow-fs-14 sparrow-fw-500 mb-0">Go back</p>
+				</div>
+
+				<div class="sparrow-fs-14 sparrow-fs-300">
+					<p>
+						Check your inbox for the verification code sent to <span
+							class="sparrow-fw-700 text-whiteColor cursor-pointer">{emailText}</span
+						> and enter it below to proceed.
+					</p>
+					{#if seconds > 0}
+						<div class="d-flex flex-column">
+							<div class="d-flex align-items-center mb-2">
+								<p class="mb-1 sparrow-fs-14">Verification Code</p>
+								<img src={starIcon} alt="" class="mb-2 ms-1" style="width: 7px;" />
+							</div>
+							<div
+								class="d-flex mb-2 align-items-center justify-content-start"
+								style="padding: 6px, 12px, 6px, 12px;border-radius: 4px;border: 1px;gap:8px"
+							>
+								<input
+									type="text"
+									autocorrect="off"
+									autocapitalize="none"
+									autocomplete="off"
+									id="verificationCode1"
+									class="form-control text-center rounded fs-5 border:{verificationCodeError ===
+									true
+										? '3px'
+										: '1px'} solid {verificationCodeError === true
+										? 'border-error'
+										: 'border-default'}"
+									style="width:48px;height:36px;border-none"
+									bind:value={verificationCode1}
+									on:click={(e) => {
+										e.target.select();
+									}}
+									on:input={(e) => {
+										if (verificationCode1.length === 1) {
+											document.getElementById('verificationCode2')?.focus();
+											document.getElementById('verificationCode2')?.select();
+										} else if (e.inputType === 'insertText' && verificationCode1.length > 1) {
+											verificationCode1 = verificationCode1.charAt(1);
+											document.getElementById('verificationCode2')?.focus();
+											document.getElementById('verificationCode2')?.select();
+										}
+										onCodeInput();
+									}}
+									on:input={handleVerificationCode}
+									on:paste={handlePaste}
+								/>
+								<img src={lineIcon} alt="" />
+								<input
+									type="text"
+									autocorrect="off"
+									autocapitalize="none"
+									autocomplete="off"
+									id="verificationCode2"
+									style="width:48px;height:36px;"
+									class="form-control text-center rounded fs-5 border:{verificationCodeError ===
+									true
+										? '3px'
+										: '1px'} solid {verificationCodeError === true
+										? 'border-error'
+										: 'border-default'}"
+									bind:value={verificationCode2}
+									on:click={(e) => {
+										e.target.select();
+									}}
+									on:input={(e) => {
+										if (verificationCode2.length === 1) {
+											document.getElementById('verificationCode3')?.focus();
+											document.getElementById('verificationCode3')?.select();
+										} else if (e.inputType === 'insertText' && verificationCode2.length > 1) {
+											verificationCode2 = verificationCode2.charAt(1);
+											document.getElementById('verificationCode3')?.focus();
+											document.getElementById('verificationCode3')?.select();
+										}
+										onCodeInput();
+									}}
+									on:keydown={(e) => {
+										if (e.key === 'Backspace' && verificationCode2.length === 0) {
+											document.getElementById('verificationCode1')?.focus();
+										}
+									}}
+									on:input={handleVerificationCode}
+									on:paste={handlePaste}
+								/>
+								<img src={lineIcon} alt="" />
+								<input
+									type="text"
+									autocorrect="off"
+									autocapitalize="none"
+									autocomplete="off"
+									id="verificationCode3"
+									style="width:48px;height:36px;"
+									class="form-control text-center rounded fs-5 border:{verificationCodeError ===
+									true
+										? '3px'
+										: '1px'} solid {verificationCodeError === true
+										? 'border-error'
+										: 'border-default'}"
+									bind:value={verificationCode3}
+									on:click={(e) => {
+										e.target.select();
+									}}
+									on:input={(e) => {
+										if (verificationCode3.length === 1) {
+											document.getElementById('verificationCode4')?.focus();
+											document.getElementById('verificationCode4')?.select();
+										} else if (e.inputType === 'insertText' && verificationCode3.length > 1) {
+											verificationCode3 = verificationCode3.charAt(1);
+
+											document.getElementById('verificationCode4')?.focus();
+											document.getElementById('verificationCode4')?.select();
+										}
+										onCodeInput();
+									}}
+									on:keydown={(e) => {
+										if (e.key === 'Backspace' && verificationCode3.length === 0) {
+											document.getElementById('verificationCode2')?.focus();
+										}
+									}}
+									on:input={handleVerificationCode}
+									on:paste={handlePaste}
+								/>
+								<img src={lineIcon} alt="" />
+								<input
+									type="text"
+									autocorrect="off"
+									autocapitalize="none"
+									autocomplete="off"
+									id="verificationCode4"
+									style="width:48px;height:36px;"
+									class="form-control text-center rounded fs-5 border:{verificationCodeError ===
+									true
+										? '3px'
+										: '1px'} solid {verificationCodeError === true
+										? 'border-error'
+										: 'border-default'}"
+									bind:value={verificationCode4}
+									on:click={(e) => {
+										e.target.select();
+									}}
+									on:input={(e) => {
+										if (verificationCode4.length === 1) {
+											document.getElementById('verificationCode5')?.focus();
+											document.getElementById('verificationCode5')?.select();
+										} else if (e.inputType === 'insertText' && verificationCode4.length > 1) {
+											verificationCode4 = verificationCode4.charAt(1);
+
+											document.getElementById('verificationCode5')?.focus();
+											document.getElementById('verificationCode5')?.select();
+										}
+										onCodeInput();
+									}}
+									on:keydown={(e) => {
+										if (e.key === 'Backspace' && verificationCode4.length === 0) {
+											document.getElementById('verificationCode3')?.focus();
+										}
+									}}
+									on:input={handleVerificationCode}
+									on:paste={handlePaste}
+								/>
+								<img src={lineIcon} alt="" />
+								<input
+									type="text"
+									autocorrect="off"
+									autocapitalize="none"
+									autocomplete="off"
+									id="verificationCode5"
+									style="width:48px;height:36px; "
+									class="form-control text-center rounded fs-5 border:{verificationCodeError ===
+									true
+										? '3px'
+										: '1px'} solid {verificationCodeError === true
+										? 'border-error'
+										: 'border-default'}"
+									bind:value={verificationCode5}
+									on:click={(e) => {
+										e.target.select();
+									}}
+									on:input={(e) => {
+										if (verificationCode5.length === 1) {
+											document.getElementById('verificationCode6')?.focus();
+											document.getElementById('verificationCode6')?.select();
+										} else if (e.inputType === 'insertText' && verificationCode5.length > 1) {
+											verificationCode5 = verificationCode5.charAt(1);
+											document.getElementById('verificationCode6')?.focus();
+											document.getElementById('verificationCode6')?.select();
+										}
+										onCodeInput();
+									}}
+									on:keydown={(e) => {
+										if (e.key === 'Backspace' && verificationCode5.length === 0) {
+											document.getElementById('verificationCode4')?.focus();
+										}
+									}}
+									on:input={handleVerificationCode}
+									on:paste={handlePaste}
+								/>
+								<img src={lineIcon} alt="" />
+								<input
+									type="text"
+									autocorrect="off"
+									autocapitalize="none"
+									autocomplete="off"
+									id="verificationCode6"
+									style="width:48px;height:36px;"
+									class="form-control text-center rounded fs-5 border:{verificationCodeError ===
+									true
+										? '3px'
+										: '1px'} solid {verificationCodeError === true
+										? 'border-error'
+										: 'border-default'}"
+									bind:value={verificationCode6}
+									on:click={(e) => {
+										e.target.select();
+									}}
+									on:input={(e) => {
+										if (verificationCode6.length > 1) {
+											verificationCode6 = verificationCode6.charAt(1);
+										}
+										onCodeInput();
+									}}
+									on:keydown={(e) => {
+										if (e.key === 'Backspace' && verificationCode6.length === 0) {
+											document.getElementById('verificationCode5')?.focus();
+										}
+									}}
+									on:input={handleVerificationCode}
+									on:paste={handlePaste}
+								/>
+							</div>
+							{#if verificationCodeError === true}
+								<small class="form-text text-dangerColor">
+									{errorMessage === 'Unauthorized Access'
+										? 'You have entered the wrong code. Please check again.'
+										: errorMessage}
+								</small>
+							{/if}
+						</div>
+					{/if}
+
+					{#if seconds > 0}
+						<p class="my-4">
+							The code will expire in <span class="text-dangerColor">{seconds} seconds</span>
+						</p>
+					{:else}
+						<p class="my-4 text-dangerColor">Verification code expired</p>
+					{/if}
+					{#if !(seconds > 0)}
+						<p>Please enter the verification code within the specified timeframe.</p>
+					{/if}
+				</div>
+				{#if seconds > 0}
+					<Button
+						disable={verifyCodeLoader}
+						title={'Verify'}
+						buttonClassProp={'w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16'}
+						type={'primary'}
+						loader={verifyCodeLoader}
+						onClick={async () => {
+							verifyCodeLoader = true;
+							let response = await handleVerifyEmail(verifyCodeCredential);
+							if (response?.isSuccessful) {
+								isRegistered = true;
+								const accessToken = response?.data.accessToken?.token;
+								const refreshToken = response?.data.refreshToken?.token;
+								const sparrowRedirect = `sparrow://?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response.data)}&event=register`;
+								setTimeout(() => {
+									let data = JSON.parse(window.atob(accessToken?.split('.')[1]));
+									redirectRules.title = `Welcome ${data.name.split(' ')[0]}`;
+									redirectRules.description = `Redirecting you to desktop app...`;
+									redirectRules.message = `If the application does not open automatically,
+						please click below.`;
+									redirectRules.loadingMessage = '';
+									redirectRules.isSpinner = false;
+									navigate(sparrowRedirect);
+									redirectRules.buttonClick = () => {
+										navigate(sparrowRedirect);
+									};
+								}, 5000);
+							}
+
+							verifyCodeLoader = false;
+						}}
+					/>
+				{:else}
+					<Button
+						onClick={() => {
+							handleResend();
+						}}
+						title={'Try again'}
+						buttonClassProp={'w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16'}
+						type={'primary'}
+					/>
+				{/if}
+			</div>
+
+			{#if seconds > 0}
+				<div class="d-flex gap-3 align-items-center mt-3">
+					<p style="font-size: 13px;" class="mb-0">Didn’t received the code?</p>
+					{#if !resentCodeLoader}
+						<span
+							on:click={handleResend}
+							style="font-size: 13px;"
+							class="cursor-pointer text-decoration-none text-primaryColor fw-bold"
+							>Resend
+						</span>
+					{:else}
+						<Spinner size={'12px'} />
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</BgContainer>
+{/if}
+
+<style>
+	input {
+		background-color: var(--blackColor);
+	}
+	.cursor-pointer {
+		cursor: pointer;
+	}
+</style>
diff --git a/src/pages/Auth/verify-email/verify-email.ts b/src/pages/Auth/verify-email/verify-email.ts
new file mode 100644
index 0000000..315174b
--- /dev/null
+++ b/src/pages/Auth/verify-email/verify-email.ts
@@ -0,0 +1,23 @@
+import { verifyUserEmail } from '$lib/services/auth.service';
+import { errorMessageText } from '$lib/store/auth.store';
+import type { verifyPostbody } from '$lib/utils/dto';
+export const isSuccessfulResponse = writable(false);
+
+import { writable } from 'svelte/store';
+
+export const handleVerifyEmail = async (verifyCodeCredential: verifyPostbody) => {
+	const response = await verifyUserEmail(verifyCodeCredential);
+	if (response.isSuccessful) {
+        errorMessageText.set("");
+	} else {
+		isSuccessfulResponse.set(true);
+		if (response.message === 'verificationCode should not be empty') {
+			errorMessageText.set('Please enter the 6-digit verification code.');
+		}
+
+		if (response.message === 'Wrong Code') {
+			errorMessageText.set('You have entered wrong code, Please check again.');
+		}
+	}
+	return response;
+};