diff --git a/package.json b/package.json
index a8aaefe..9513009 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sparrow-auth",
-	"version": "2.31.0",
+	"version": "2.32.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
diff --git a/src/App.svelte b/src/App.svelte
index a242847..212f6f6 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -90,9 +90,9 @@
 
 	<!-- Support page that opens the user's default email client with a pre-filled support email -->
 	{#if constants.APP_EDITION === AppEdition.MANAGED}
-	 <Route path="/support">
-		 <ExternalNavigation to={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`}/>
-	 </Route>
+		<Route path="/support">
+			<ExternalNavigation to={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`} />
+		</Route>
 	{/if}
 
 	<!-- Wildcard route that redirects any unmatched paths to the entry point page -->
diff --git a/src/lib/components/button/Button.svelte b/src/lib/components/button/Button.svelte
index d66a22b..56dad0d 100644
--- a/src/lib/components/button/Button.svelte
+++ b/src/lib/components/button/Button.svelte
@@ -120,7 +120,7 @@
 	}
 
 	.custom-btn-primary {
-		height: 44px;
+		height: 36px;
 		font-weight: 400;
 		background-color: white;
 		color: black;
diff --git a/src/lib/services/auth.service.ts b/src/lib/services/auth.service.ts
index 144052b..80eefa0 100644
--- a/src/lib/services/auth.service.ts
+++ b/src/lib/services/auth.service.ts
@@ -101,40 +101,72 @@ const verifyMagicCode = async (verifyInfo: MagicCodeVerifyBody) => {
 	return response;
 };
 
-const updateOccaisonalUpdatesStatus = async (occaisonalUpdates: OccaisonalUpdatesBody) => { 
-	const response = await makeRequest('POST', `${apiUrl}/aoi/user/update-occasional-updates-status`, { 
-		body: occaisonalUpdates
-	})
-	return response;
-}
-
-const acceptTeamInvite = async (teamId: string, inviteId: string) => { 
-	const response = await makeRequest('POST', `${apiUrl}/api/team/${teamId}/invite/user/accept/${inviteId}`, { 
-		body: {}
-	})
-	return response;
-}
-
-const resendInviteTeam = async (teamId:string, inviteId:string)=>{
-	const response = await makeRequest('POST',`${apiUrl}/api/team/${teamId}/resend-invite/${inviteId}`,{})
-	return response;
-}
-
- 
-export { 
-	registerUser, 
-	loginUser, 
-	forgotPassword, 
-	loginWithGoogle, 
-	verifyEmail, 
-	resetPassword, 
-	getUser, 
-	sendUserEmailVerification, 
+const updateOccaisonalUpdatesStatus = async (occaisonalUpdates: OccaisonalUpdatesBody) => {
+	const response = await makeRequest(
+		'POST',
+		`${apiUrl}/aoi/user/update-occasional-updates-status`,
+		{
+			body: occaisonalUpdates
+		}
+	);
+	return response;
+};
+
+const acceptTeamInvite = async (teamId: string, inviteId: string) => {
+	const response = await makeRequest(
+		'POST',
+		`${apiUrl}/api/team/${teamId}/invite/user/accept/${inviteId}`,
+		{
+			body: {}
+		}
+	);
+	return response;
+};
+
+const resendInviteTeam = async (teamId: string, inviteId: string) => {
+	const response = await makeRequest(
+		'POST',
+		`${apiUrl}/api/team/${teamId}/resend-invite/${inviteId}`,
+		{}
+	);
+	return response;
+};
+
+const getConfig = async (hubUrl: string) => {
+	const response = await makeRequest('GET', `${hubUrl}/api/team/config`);
+	return response;
+};
+
+const getSelfHostUser = async (baseUrl: string, email: string) => {
+	const response = await makeRequest('GET', `${baseUrl}/api/user/email/${email}`);
+
+	return response;
+};
+
+const selfHostLoginUser = async (baseUrl: string, userInfo: loginUserPostBody) => {
+	const response = await makeRequest('POST', `${baseUrl}/api/auth/login`, {
+		body: userInfo
+	});
+	return response;
+};
+
+export {
+	registerUser,
+	loginUser,
+	forgotPassword,
+	loginWithGoogle,
+	verifyEmail,
+	resetPassword,
+	getUser,
+	sendUserEmailVerification,
 	verifyUserEmail,
 	sendMagicCodeEmail,
 	verifyMagicCode,
 	updateOccaisonalUpdatesStatus,
 	acceptTeamInvite,
 	resendInviteTeam,
-	registerVerifiedUser
+	registerVerifiedUser,
+	getConfig,
+	getSelfHostUser,
+	selfHostLoginUser
 };
diff --git a/src/pages/Auth/entry-point/EntryPoint.ViewModel.ts b/src/pages/Auth/entry-point/EntryPoint.ViewModel.ts
index 673d0fa..142b521 100644
--- a/src/pages/Auth/entry-point/EntryPoint.ViewModel.ts
+++ b/src/pages/Auth/entry-point/EntryPoint.ViewModel.ts
@@ -1,15 +1,27 @@
-import { getUser, loginUser } from '$lib/services/auth.service';
+import { getConfig, getUser, loginUser } from '$lib/services/auth.service';
 import type { loginUserPostBody } from '$lib/utils/dto';
 import { checkValidation, entrySchema } from '$lib/utils/validation';
 import { navigate } from 'svelte-navigator';
 
 //---------------- Handle Login ------------------//
 export const handleEntry = async (entryCredentials) => {
-	return  await getUser(entryCredentials.email);
+	return await getUser(entryCredentials.email);
 };
 
 //------------------------- Handle Login Validation -----------------//
 export const handleEntryValidation = async (entryCredentials) => {
-	const { errorObject : response } = await checkValidation(entrySchema, entryCredentials);
-    return response;
+	const { errorObject: response } = await checkValidation(entrySchema, entryCredentials);
+	return response;
+};
+
+// Get Config deatils of backend
+export const handleGetConfig = async (hubUrl: string) => {
+	hubUrl = hubUrl.trim();
+
+	//if hubUrl end with / then remove it
+	if (hubUrl.endsWith('/')) {
+		hubUrl = hubUrl.slice(0, -1);
+	}
+	const response = await getConfig(hubUrl);
+	return response;
 };
diff --git a/src/pages/Auth/entry-point/EntryPoint.svelte b/src/pages/Auth/entry-point/EntryPoint.svelte
index 14bbec2..5585add 100644
--- a/src/pages/Auth/entry-point/EntryPoint.svelte
+++ b/src/pages/Auth/entry-point/EntryPoint.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { handleEntryValidation, handleEntry } from './EntryPoint.ViewModel';
+	import { handleEntryValidation, handleEntry, handleGetConfig } from './EntryPoint.ViewModel';
 	import { sendMagicCodeEmail } from '$lib/services/auth.service';
 	import sparrowicon from '$lib/assets/logoSparrowSquare.svg';
 	import { navigate } from 'svelte-navigator';
@@ -40,6 +40,9 @@
 	let entryLoader = false;
 	let isSubmitting = false; // Add this new state variable
 	let showContinueButton = false;
+	let hubUrlError: string = '';
+	let hubUrlTouched: boolean = false;
+	let hubUrl: string = '';
 	onMount(() => {
 		// Check the query parameters in the URL
 		const urlParams = new URLSearchParams(window.location.search);
@@ -284,6 +287,97 @@
 				<div class="d-flex justify-content-center mt-4">
 					<CloudCube />
 				</div>
+				<!-- <form
+					class="login-form w-100 text-whiteColor ps-1 pe-1 mb-2 mt-4"
+					novalidate
+					on:submit|preventDefault={async () => {
+						isSubmitting = true;
+						hubUrlTouched = true;
+						hubUrlError = hubUrl.trim() === '' ? 'Self Host URL is required.' : '';
+						if (hubUrlError === '') {
+							entryLoader = true;
+							const response = await handleGetConfig(hubUrl);
+							if (response?.isSuccessful && response?.data?.identityUrl) {
+								// if (
+								// 	response?.data?.registeredWith === 'email' ||
+								// 	response?.data?.registeredWith === 'google'
+								// ) {
+								// Send magic code before redirecting
+								// sessionStorage.setItem(`selfhost-backendurl`, response?.data?.appUrl);
+								// sessionStorage.setItem(`selfhost-adminurl`, response?.data?.identityUrl);
+								// navigate(response?.data?.identityUrl);
+								let redirectSource = localStorage.getItem('source');
+								if(redirectSource === "desktop"){
+                                    window.location.href = response?.data?.identityUrl + `/init?source=desktop`;
+								}
+								else if(redirectSource === "admin"){
+                                    window.location.href = response?.data?.identityUrl + `/init?source=admin`;
+								}
+								else{
+									window.location.href = response?.data?.identityUrl + `/init?source=web`;
+								}
+								// 	await handleMagicCodeAndRedirect(entryCredentials?.email);
+								// } else {
+								// 	// New user - redirect to registration
+								// 	navigate(`/register/${entryCredentials?.email}`);
+								// }
+							} 
+							else if(response?.message.startsWith('Cannot GET') || response?.message === "Internal server error"){
+								notifications.error('Self Host URL entered is invalid.');
+							}
+							else {
+								notifications.error(response?.message || 'Self Host URL entered is invalid.');
+							}
+							entryLoader = false;
+						}
+						isSubmitting = false;
+					}}
+				>					
+					<div class="mb-3 mt-4">
+						<label for="exampleInputHubUrl1" class="form-label text-Gray sparrow-fs-14 d-flex"
+							>Self Host URL
+							<p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p></label
+						>
+
+						<div class="d-flex position-relative mt-1">
+							<input
+								type="huburl"
+								class="form-control sparrow-fs-16 border:{hubUrlError && hubUrlTouched
+									? '3px'
+									: '1px'} solid {hubUrlError && hubUrlTouched ? 'border-error' : 'border-default'}"
+								id="exampleInputHubUrl1"
+								aria-describedby="emailHelp"
+								placeholder="Enter Self Host URL"
+								autocorrect="off"
+								autocapitalize="none"
+								autocomplete="off"
+								bind:value={hubUrl}
+								on:blur={async () => {
+									hubUrlTouched = true;
+									hubUrlError = hubUrl.trim() === '' ? 'Self Host URL is required.' : '';
+								}}
+								on:input={async () => {
+									hubUrlError = hubUrl.trim() === '' ? 'Self Host URL is required.' : '';
+								}}
+							/>
+
+						</div>
+
+						{#if hubUrlError && hubUrlTouched}
+							<small class="form-text text-dangerColor"> {hubUrlError}</small>
+						{/if}
+					</div>
+					<div class="mb-3">
+						<Button
+							disable={entryLoader || isSubmitting}
+							loader={entryLoader || isSubmitting}
+							title={'Continue'}
+							buttonClassProp={'w-100 align-items-center d-flex justify-content-center sparrow-fs-16'}
+							type={'primary'}
+						/>
+					</div>
+				</form> -->
+				<!-- </div> -->
 				<div class="self-hosting-container">
 					<p class="d-flex justify-content-center text-center" style="margin: 0px; color:#ffffff;">
 						Self Hosting is Coming Soon!
@@ -292,7 +386,7 @@
 						class="d-flex justify-content-center text-center"
 						style="margin: 0px; color:#9B9DA1; font-size:12px;"
 					>
-						Gain full control of your deployment with our upcoming self-hosting feature. Stay tuned!
+						Gain full control of your deployment with our self-hosting feature.
 					</p>
 				</div>
 			</div>
diff --git a/src/pages/Auth/login-page/LoginPage.svelte b/src/pages/Auth/login-page/LoginPage.svelte
index da4fe5a..caf48d0 100644
--- a/src/pages/Auth/login-page/LoginPage.svelte
+++ b/src/pages/Auth/login-page/LoginPage.svelte
@@ -16,6 +16,7 @@
 	import Button from '$lib/components/button/Button.svelte';
 	import BgContainer from '$lib/components/bgContainer/BgContainer.svelte';
 	import AiSparkle from '$lib/assets/AiSparkle.svelte';
+	import { AppEdition } from '$lib/utils/enums/enums';
 
 	export let id;
 
@@ -111,7 +112,7 @@
 							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&method=email`;
+							const sparrowRedirect = `sparrow://?selfhostBackendUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.API_URL : ""}&selfhostAdminUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_ADMIN_URL : ""}&selfhostWebUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_WEB_URL : ""}&accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response)}&event=login&method=email`;
 							const sparrowWebRedirect =
 								constants.SPARROW_WEB_URL +
 								`?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response)}&event=login&method=email`;
diff --git a/src/pages/Auth/oauth-redirect/OauthRedirect.svelte b/src/pages/Auth/oauth-redirect/OauthRedirect.svelte
index 12984ac..c747e2a 100644
--- a/src/pages/Auth/oauth-redirect/OauthRedirect.svelte
+++ b/src/pages/Auth/oauth-redirect/OauthRedirect.svelte
@@ -5,6 +5,7 @@
 	import constants from '$lib/utils/constants';
 	import RegisterRedirectComponent from '../redirect/RegisterRedirectComponent.svelte';
 	import { notifications } from '$lib/components/toast-notification/ToastNotification';
+	import { AppEdition } from '$lib/utils/enums/enums';
 
 	let redirctSource = localStorage.getItem('source');
 
@@ -21,7 +22,7 @@
 		accessToken = urlParams.get('accessToken') as string;
 		refreshToken = urlParams.get('refreshToken') as string;
 		source = urlParams.get('source') as string;
-		sparrowRedirect = `sparrow://?accessToken=${accessToken}&refreshToken=${refreshToken}&event=${source}&method=google`;
+		sparrowRedirect = `sparrow://?selfhostBackendUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.API_URL : ""}&selfhostAdminUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_ADMIN_URL : ""}&selfhostWebUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_WEB_URL : ""}&accessToken=${accessToken}&refreshToken=${refreshToken}&event=${source}&method=google`;
 		sparrowWebRedirect =
 			constants.SPARROW_WEB_URL +
 			`?accessToken=${accessToken}&refreshToken=${refreshToken}&event=${source}&method=google`;
diff --git a/src/pages/Auth/plans/Plans.svelte b/src/pages/Auth/plans/Plans.svelte
index 5807aaa..b3a5db5 100644
--- a/src/pages/Auth/plans/Plans.svelte
+++ b/src/pages/Auth/plans/Plans.svelte
@@ -4,6 +4,7 @@
 	import constants from '$lib/utils/constants';
 	import { notifications } from '$lib/components/toast-notification/ToastNotification';
 	import Redirect from '../redirect/Redirect.svelte';
+	import { AppEdition } from '$lib/utils/enums/enums';
 
 	const location = useLocation();
 	let redirctSource = localStorage.getItem('source');
@@ -153,7 +154,7 @@
 			return;
 		} else if (plan.title === 'Community') {
 			isRegistered = true;
-			const sparrowRedirect = `sparrow://?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${response}&event=register&method=email`;
+			const sparrowRedirect = `sparrow://?selfhostBackendUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.API_URL : ""}&selfhostAdminUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_ADMIN_URL : ""}&selfhostWebUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_WEB_URL : ""}&accessToken=${accessToken}&refreshToken=${refreshToken}&response=${response}&event=register&method=email`;
 			const sparrowWebRedirect =
 				constants.SPARROW_WEB_URL +
 				`?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${response}&event=register&method=email`;
diff --git a/src/pages/Auth/self-host-login-page/SelfHostLoginPage.svelte b/src/pages/Auth/self-host-login-page/SelfHostLoginPage.svelte
new file mode 100644
index 0000000..3e34f57
--- /dev/null
+++ b/src/pages/Auth/self-host-login-page/SelfHostLoginPage.svelte
@@ -0,0 +1,322 @@
+<script lang="ts">
+	import { Link, navigate } from 'svelte-navigator';
+	import { isLoading, isResponseError } from '$lib/store/auth.store';
+	import googleLogo from '$lib/assets/googlelogo.svg';
+	import eyeHide from '$lib/assets/eye-hide.svg';
+	import eyeShow from '$lib/assets/eye-show.svg';
+	import { handleLogin, handleLoginValidation } from './self-host-login-page';
+	import sparrowicon from '$lib/assets/logoSparrowSquare.svg';
+	import LoginLoader from '$lib/components/transition/LoginLoader.svelte';
+	import Redirect from '../redirect/Redirect.svelte';
+	import constants from '$lib/utils/constants';
+	import SupportHelp from '$lib/components/help/SupportHelp.svelte';
+	import Oauth from '$lib/components/o-auth/Oauth.svelte';
+	import starIcon from '$lib/assets/starIcon.svg';
+	import { notifications } from '$lib/components/toast-notification/ToastNotification';
+	import Button from '$lib/components/button/Button.svelte';
+	import BgContainer from '$lib/components/bgContainer/BgContainer.svelte';
+	import AiSparkle from '$lib/assets/AiSparkle.svelte';
+	import { AppEdition } from '$lib/utils/enums/enums';
+
+	export let id;
+
+	let isEmailTouched = false;
+	let isPasswordTouched = false;
+	let isLogin = false;
+	let authenticationError = false;
+
+	//---------------- Login Validation --------------------//
+	let validationErrors: any = {};
+
+	//------------ login Credentials ---------------//
+	let loginCredentials = {
+		email: id || '',
+		password: ''
+	};
+
+	let isPasswordVisible = false;
+
+	const togglePasswordVisibility = () => {
+		isPasswordVisible = !isPasswordVisible;
+		const passwordInput = document.getElementById(
+			'exampleInputPassword1'
+		) as HTMLInputElement | null;
+		if (passwordInput) {
+			passwordInput.type = isPasswordVisible ? 'text' : 'password';
+		}
+	};
+
+	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: () => {},
+		copyLink: () => {},
+		loadingMessage: 'Please wait while we sign you in....'
+	};
+	let loginLoader = false;
+
+	let redirctSource = localStorage.getItem('source');
+	let flow = localStorage.getItem('flow');
+</script>
+
+{#if isLogin}
+	<Redirect
+		title={redirectRules.title}
+		description={redirectRules.description}
+		message={redirectRules.message}
+		isSpinner={redirectRules.isSpinner}
+		buttonText={redirectRules.buttonText}
+		buttonClick={redirectRules.buttonClick}
+		copyLink={redirectRules.copyLink}
+		loadingMessage={redirectRules.loadingMessage}
+	/>
+{:else}
+	<BgContainer>
+		<div class="d-flex align-items-start gap-2">
+			<div
+				class="text-white d-flex justify-content-center align-items-center bg-sparrowPrimaryColor"
+				style="height: 23px; width: 23px; border-radius: 6px;"
+			>
+				<img height="20px" width="20px" src={sparrowicon} alt="" class="" />
+			</div>
+			<p style="font-weight:500;">Sparrow</p>
+		</div>
+
+		<div style="display: flex ; flex-direction:column; align-items:center;">
+			<p
+				class="container-header sparrow-fw-600 text-whiteColor text-center ms-2 me-2 mb-1"
+				style="font-size:24px; font-weight: 400; padding-top:20px; line-height:28px; text-align:center;"
+			>
+				Welcome Back!
+			</p>
+			<p class="" style="color: lightGray; font-size:12px; margin-bottom:15%;">
+				Let’s get back to work
+			</p>
+		</div>
+		<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://?selfhostBackendUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.API_URL : ""}&selfhostAdminUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_ADMIN_URL : ""}&selfhostWebUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_WEB_URL : ""}&accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response)}&event=login&method=email&isSelfHostLogin=true&backendUrl=${btoa(
+							sessionStorage.getItem(`selfhost-backendurl`) || ''
+						)}&adminUrl=${btoa(sessionStorage.getItem(`selfhost-adminurl`) || '')}`;
+						const sparrowWebRedirect =
+							constants.SPARROW_WEB_URL +
+							`?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response)}&event=login&method=email`;
+						let sparrowAdminRedirect =
+							constants.SPARROW_ADMIN_URL +
+							`?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response)}&event=login&method=email`;
+						if (flow === 'standard') {
+							sparrowAdminRedirect = sparrowAdminRedirect + '&flow=standard';
+						}
+						// if (redirctSource === 'desktop') {
+						let data = JSON.parse(window.atob(accessToken?.split('.')[1]));
+						let firstName = data.name;
+						firstName = firstName.split(' ')[0];
+						firstName = firstName.length > 11 ? firstName.substring(0, 5) + '...' : firstName;
+						redirectRules.title = `Welcome Back ${firstName}`;
+						setTimeout(() => {
+							redirectRules.description = `Redirecting you to desktop app...`;
+							redirectRules.message = `the link if the application does not open automatically.`;
+							redirectRules.loadingMessage = '';
+							redirectRules.isSpinner = false;
+							navigate(sparrowRedirect);
+							redirectRules.buttonClick = () => {
+								navigate(sparrowRedirect);
+							};
+							redirectRules.copyLink = () => {
+								if (navigator.clipboard) {
+									notifications.success('Link copied to clipboard.');
+									return navigator.clipboard.writeText(sparrowRedirect);
+								}
+							};
+						}, 1000);
+						// } else if (redirctSource === 'admin') {
+						// 	navigate(sparrowAdminRedirect);
+						// } else {
+						// 	navigate(sparrowWebRedirect);
+						// }
+						// } 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 {
+						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;
+				}
+			}}
+		>
+			<!-- <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 ID
+					<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">
+					<input
+						type="password"
+						autocomplete="off"
+						id="exampleInputPassword1"
+						placeholder="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;
+						}}
+						maxlength="32"
+					/>
+					<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>
+
+				{#if validationErrors?.password && isPasswordTouched}
+					<small class="form-text text-dangerColor">{validationErrors?.password}</small>
+				{:else if authenticationError}
+					<small class="form-text text-dangerColor"
+						>Invalid email ID or password. Please enter your valid email ID and password.</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={'Continue'}
+					buttonClassProp={'w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16'}
+					type={'primary'}
+					loader={loginLoader}
+				/>
+			</div>
+		</form>
+		<div class="d-flex align-items-start">
+			<p
+				class="d-flex justify-content-center text-center"
+				style="margin: 0px; color:#9B9DA1; font-size:12px;"
+			>
+				Gain full control of your deployment with our self-hosting feature.
+			</p>
+		</div>
+		<!-- <Oauth /> -->
+		<div style="margin-top: 24px;">
+			<SupportHelp />
+		</div>
+	</BgContainer>
+{/if}
+
+<style>
+	.eye-icon {
+		right: 5px;
+		top: 50%;
+		transform: translateY(-50%);
+		background-color: transparent;
+	}
+
+	.btn-primary {
+		background: var(--primary-color);
+	}
+	.btn-primary:hover {
+		background: var(--primary-btn-color-hover);
+	}
+	.btn-primary:active {
+		background: var(--button-pressed);
+	}
+	input {
+		background-color: transparent !important;
+	}
+	input:disabled {
+		opacity: 0.5;
+	}
+</style>
diff --git a/src/pages/Auth/self-host-login-page/self-host-login-page.ts b/src/pages/Auth/self-host-login-page/self-host-login-page.ts
new file mode 100644
index 0000000..beb1ed5
--- /dev/null
+++ b/src/pages/Auth/self-host-login-page/self-host-login-page.ts
@@ -0,0 +1,28 @@
+import { loginUser, selfHostLoginUser } from '$lib/services/auth.service';
+import type { loginUserPostBody } from '$lib/utils/dto';
+import { checkValidation, loginSchema } from '$lib/utils/validation';
+import { navigate } from 'svelte-navigator';
+
+//------------------------------Navigation-------------------------------//
+export const navigateToRegister = () => {
+	navigate('/register');
+};
+
+//---------------- Handle Login ------------------//
+export const handleLogin = async (loginCredentials: loginUserPostBody) => {
+	const baseUrl = sessionStorage.getItem('selfhost-backendurl') || '';
+	if (!baseUrl) {
+		return { isSuccessful: false, message: 'Self Host URL not found. Please try again.' };
+	}
+	return await selfHostLoginUser(baseUrl, loginCredentials);
+};
+
+//------------------------- Handle Login Validation -----------------//
+export const handleLoginValidation = async (loginCredentials: loginUserPostBody) => {
+	const { isError, errorObject } = await checkValidation(loginSchema, loginCredentials);
+	if (isError) {
+		return errorObject;
+	}
+
+	return;
+};
diff --git a/src/pages/Auth/self-host-password-login/SelfHostPasswordLogin.ViewModel.ts b/src/pages/Auth/self-host-password-login/SelfHostPasswordLogin.ViewModel.ts
new file mode 100644
index 0000000..fedd667
--- /dev/null
+++ b/src/pages/Auth/self-host-password-login/SelfHostPasswordLogin.ViewModel.ts
@@ -0,0 +1,17 @@
+import { getSelfHostUser, getUser } from '$lib/services/auth.service';
+import { checkValidation, entrySchema } from '$lib/utils/validation';
+
+//---------------- Handle Login ------------------//
+export const handleEntry = async (entryCredentials) => {
+	const baseUrl = sessionStorage.getItem('selfhost-backendurl') || '';
+	if (!baseUrl) {
+		return { isSuccessful: false, message: 'Self Host URL not found. Please try again.' };
+	}
+	return await getSelfHostUser(baseUrl, entryCredentials.email);
+};
+
+//------------------------- Handle Login Validation -----------------//
+export const handleEntryValidation = async (entryCredentials) => {
+	const { errorObject: response } = await checkValidation(entrySchema, entryCredentials);
+	return response;
+};
diff --git a/src/pages/Auth/self-host-password-login/SelfHostPasswordLogin.svelte b/src/pages/Auth/self-host-password-login/SelfHostPasswordLogin.svelte
new file mode 100644
index 0000000..b89a15a
--- /dev/null
+++ b/src/pages/Auth/self-host-password-login/SelfHostPasswordLogin.svelte
@@ -0,0 +1,277 @@
+<script lang="ts">
+	import { handleEntryValidation, handleEntry } from './SelfHostPasswordLogin.ViewModel';
+	import { sendMagicCodeEmail } from '$lib/services/auth.service';
+	import sparrowicon from '$lib/assets/logoSparrowSquare.svg';
+	import { navigate } from 'svelte-navigator';
+	import SupportHelp from '$lib/components/help/SupportHelp.svelte';
+	import { notifications } from '$lib/components/toast-notification/ToastNotification';
+	import Oauth from '$lib/components/o-auth/Oauth.svelte';
+	import Button from '$lib/components/button/Button.svelte';
+	import BgContainer from '$lib/components/bgContainer/BgContainer.svelte';
+	import { onMount } from 'svelte';
+	import AiSparkle from '$lib/assets/AiSparkle.svelte';
+	import Spinner from '$lib/components/transition/Spinner.svelte';
+	import CircleTick from '$lib/assets/CircleTick.svelte';
+	import constants from '$lib/utils/constants';
+	import { AppEdition } from '$lib/utils/enums/enums';
+	let isEmailTouched = false;
+	//---------------- Login Validation --------------------//
+	let validationErrors: any = {};
+	//------------ login Credentials ---------------//
+	let entryCredentials: {
+		email: string;
+	} = {
+		email: ''
+	};
+	let isEntry = false;
+
+	let redirectRules = {
+		title: 'Redirecting to your account...',
+		description: '',
+		message: ``,
+		isSpinner: true,
+		buttonText: 'Open Desktop App',
+		buttonClick: () => {},
+		loadingMessage: 'Please wait while we are redirecting you to your email account....'
+	};
+	let entryLoader = false;
+	let isSubmitting = false; // Add this new state variable
+	let showContinueButton = false;
+	// onMount(() => {
+	// 	// Check the query parameters in the URL
+	// 	const urlParams = new URLSearchParams(window.location.search);
+	// 	const source = urlParams.get('source'); // Get 'source' from query param
+	// 	if (source === 'web') {
+	// 		localStorage.setItem('source', 'web');
+	// 	} else {
+	// 		localStorage.setItem('source', 'desktop');
+	// 	}
+	// });
+
+	let emailExists = false;
+
+	const checkEmailExistenceOnInput = async (email) => {
+		if (!email) return;
+
+		isEmailTouched = true;
+		entryLoader = true;
+		showContinueButton = false;
+		emailExists = false; // Reset before the check starts
+		try {
+			const response = await handleEntry({ email }); // Reuse the same `handleEntry` function
+			if (response.isSuccessful) {
+				// Check if the email is registered
+				showContinueButton = true;
+				emailExists =
+					response?.data?.registeredWith === 'email' || response?.data?.registeredWith === 'google';
+			} else {
+				showContinueButton = false;
+				emailExists = false; // Email not registered
+			}
+		} catch (error) {
+			showContinueButton = false;
+			emailExists = false; // Handle errors gracefully
+		}
+		entryLoader = false;
+	};
+
+	const handleMagicCodeAndRedirect = async (email: string) => {
+		try {
+			const magicCodeResponse = await sendMagicCodeEmail({ email });
+			if (magicCodeResponse.isSuccessful) {
+				navigate(`/verify-magic-code/${email}`); // Updated this line
+				notifications.success('Magic code is sent to your email ID.');
+			} else {
+				if (magicCodeResponse?.message === 'Cooldown Active') {
+					navigate('/cool-down-active');
+				} else {
+					notifications.error(magicCodeResponse?.message);
+				}
+			}
+		} catch (error) {
+			notifications.error('Failed to send magic code to your email ID. Please try again.');
+		}
+	};
+
+	let checkTimeout;
+</script>
+
+<BgContainer>
+	<div class="d-flex align-items-start gap-2">
+		<div
+			class="text-white d-flex justify-content-center align-items-center bg-sparrowPrimaryColor"
+			style="height: 23px; width: 23px; border-radius: 6px;"
+		>
+			<img height="20px" width="20px" src={sparrowicon} alt="" class="" />
+		</div>
+		<p style="font-weight:500;">Sparrow</p>
+	</div>
+
+	<div style="display: flex ; flex-direction:column; align-items:center;">
+		<p
+			class="container-header sparrow-fw-600 text-whiteColor text-center ms-2 me-2 mb-1"
+			style="font-size:24px; font-weight: 400; padding-top:20px; line-height:28px; text-align:center;"
+		>
+			Welcome to Sparrow
+		</p>
+		<p class="" style="color: lightGray; font-size:12px; margin-bottom:15%;">
+			Let’s get back to work
+		</p>
+	</div>
+
+	<!-- <Oauth /> -->
+
+	<!-- <div class="divider w-100">
+			<span class="line"></span>
+			<span class="text" style="color:var(--editor-angle-bracket)">Or</span>
+			<span class="line"></span>
+		</div> -->
+
+	<form
+		class="login-form w-100 text-whiteColor ps-1 pe-1 mb-2"
+		novalidate
+		on:submit|preventDefault={async () => {
+			isSubmitting = true;
+			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'
+					) {
+						// Send magic code before redirecting
+						navigate(`/selfhost-login/${entryCredentials?.email}`);
+					} else {
+						// else if (constants.APP_EDITION === AppEdition.SELFHOSTED) {
+						notifications.error('User account not registered.');
+						// }
+					}
+				} else {
+					notifications.error(response?.message);
+				}
+				entryLoader = false;
+			}
+			isSubmitting = 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-Gray sparrow-fs-14 d-flex"
+				>Email ID
+				<p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p></label
+			>
+
+			<div class="d-flex position-relative mt-1">
+				<input
+					type="email"
+					class="form-control pe-5 sparrow-fs-16 border:{validationErrors?.email && isEmailTouched
+						? '3px'
+						: '1px'} solid {validationErrors?.email && isEmailTouched
+						? 'border-error'
+						: 'border-default'}"
+					id="exampleInputEmail1"
+					aria-describedby="emailHelp"
+					placeholder="Enter your email address"
+					autocorrect="off"
+					autocapitalize="none"
+					autocomplete="off"
+					bind:value={entryCredentials.email}
+					on:blur={async () => {
+						isEmailTouched = true;
+						validationErrors = await handleEntryValidation(entryCredentials);
+						clearTimeout(checkTimeout);
+						checkTimeout = setTimeout(
+							() => checkEmailExistenceOnInput(entryCredentials.email),
+							1000
+						);
+					}}
+					on:input={async () => {
+						validationErrors = await handleEntryValidation(entryCredentials);
+						clearTimeout(checkTimeout);
+						checkTimeout = setTimeout(
+							() => checkEmailExistenceOnInput(entryCredentials.email),
+							1000
+						);
+					}}
+				/>
+
+				<button
+					type="button"
+					on:click={() => {}}
+					class=" border-0 position-absolute eye-icon d-flex align-items-center"
+				>
+					{#if entryLoader}
+						<Spinner size={'16px'} />
+					{:else if emailExists}
+						<CircleTick height={'16px'} width={'16px'} />
+					{/if}
+				</button>
+			</div>
+
+			{#if validationErrors?.email && isEmailTouched}
+				<small class="form-text text-dangerColor"> {validationErrors?.email}</small>
+			{/if}
+		</div>
+
+		<div>
+			<Button
+				disable={entryLoader || isSubmitting}
+				title={'Continue'}
+				buttonClassProp={'w-100 align-items-center d-flex justify-content-center sparrow-fs-16'}
+				type={'primary'}
+			/>
+		</div>
+	</form>
+
+	<div class="d-flex align-items-start mt-2">
+		<p
+			class="d-flex justify-content-center text-center"
+			style="margin: 0px; color:#9B9DA1; font-size:12px;"
+		>
+			Gain full control of your deployment with our self-hosting feature.
+		</p>
+	</div>
+	<div style="margin-top: 24px;">
+		<SupportHelp />
+	</div>
+</BgContainer>
+
+<style>
+	.eye-icon {
+		right: 5px;
+		top: 50%;
+		transform: translateY(-50%);
+		background-color: transparent;
+	}
+
+	input {
+		background-color: transparent !important;
+	}
+
+	.divider {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 14px 0;
+		font-family: Arial, sans-serif;
+	}
+
+	.divider .line {
+		width: 111px;
+		height: 1px;
+		background: linear-gradient(to right, #62636c00, #bfc0d2);
+	}
+
+	.divider .line:last-child {
+		background: linear-gradient(to left, #62636c00, #bfc0d2);
+	}
+
+	.divider .text {
+		margin: 0 3px;
+		color: #bfc0d2;
+		font-size: 14px;
+	}
+</style>
diff --git a/src/pages/Auth/team-invite-acceptance/TeamInviteAcceptance.svelte b/src/pages/Auth/team-invite-acceptance/TeamInviteAcceptance.svelte
index bd40f1e..e18948f 100644
--- a/src/pages/Auth/team-invite-acceptance/TeamInviteAcceptance.svelte
+++ b/src/pages/Auth/team-invite-acceptance/TeamInviteAcceptance.svelte
@@ -30,7 +30,7 @@
      const sparrowRedirect = `sparrow://`;
   
 
-    //  sparrow://?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response)}&event=login&method=email`;
+    //  sparrow://?selfhostBackendUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.API_URL : ""}&selfhostAdminUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_ADMIN_URL : ""}&selfhostWebUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_WEB_URL : ""}&accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response)}&event=login&method=email`;
      
      const  buttonClick = () => {
         navigate(sparrowRedirect);
diff --git a/src/pages/Auth/update-password/UpdatePassword.svelte b/src/pages/Auth/update-password/UpdatePassword.svelte
index 474d958..8bbd386 100644
--- a/src/pages/Auth/update-password/UpdatePassword.svelte
+++ b/src/pages/Auth/update-password/UpdatePassword.svelte
@@ -16,6 +16,7 @@
 
 	import CircleCheck from '$lib/assets/CircleCheck.svelte';
 	import AiSparkle from '$lib/assets/AiSparkle.svelte';
+	import { AppEdition } from '$lib/utils/enums/enums';
 	export let id: string;
 
 	let seconds = 300; // Changed from 600 to 300 (5 minutes)
@@ -585,7 +586,7 @@
 							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&method=email`;
+							const sparrowRedirect = `sparrow://?selfhostBackendUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.API_URL : ""}&selfhostAdminUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_ADMIN_URL : ""}&selfhostWebUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_WEB_URL : ""}&accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response.data)}&event=register&method=email`;
 							const sparrowWebRedirect =
 								constants.SPARROW_WEB_URL +
 								`?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response)}&event=register&method=email`;
diff --git a/src/pages/Auth/verify-email/VerifyEmail.svelte b/src/pages/Auth/verify-email/VerifyEmail.svelte
index 464f7cd..4aed161 100644
--- a/src/pages/Auth/verify-email/VerifyEmail.svelte
+++ b/src/pages/Auth/verify-email/VerifyEmail.svelte
@@ -609,7 +609,7 @@
 							);
 						}
 
-						// const sparrowRedirect = `sparrow://?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response.data)}&event=register&method=email`;
+						// const sparrowRedirect = `sparrow://?selfhostBackendUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.API_URL : ""}&selfhostAdminUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_ADMIN_URL : ""}&selfhostWebUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_WEB_URL : ""}&accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response.data)}&event=register&method=email`;
 						// const sparrowWebRedirect =
 						// 	constants.SPARROW_WEB_URL +
 						// 	`?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response)}&event=register&method=email`;
diff --git a/src/pages/Auth/verify-magic-code/VerifyMagicCode.svelte b/src/pages/Auth/verify-magic-code/VerifyMagicCode.svelte
index 36a2301..a912169 100644
--- a/src/pages/Auth/verify-magic-code/VerifyMagicCode.svelte
+++ b/src/pages/Auth/verify-magic-code/VerifyMagicCode.svelte
@@ -15,6 +15,7 @@
 
 	import CircleCheck from '$lib/assets/CircleCheck.svelte';
 	import { handleVerifyUserEmail, isSuccessfulResponseMagicCode } from './verify-magic-code';
+	import { AppEdition } from '$lib/utils/enums/enums';
 	export let id: string;
 	export let name: string = '';
 
@@ -596,7 +597,7 @@
 								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=login&method=code`;
+								const sparrowRedirect = `sparrow://?selfhostBackendUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.API_URL : ""}&selfhostAdminUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_ADMIN_URL : ""}&selfhostWebUrl=${constants.APP_EDITION === AppEdition.SELFHOSTED ? constants.SPARROW_WEB_URL : ""}&accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response.data)}&event=login&method=code`;
 								const sparrowWebRedirect =
 									constants.SPARROW_WEB_URL +
 									`?accessToken=${accessToken}&refreshToken=${refreshToken}&response=${JSON.stringify(response)}&event=login&method=code`;