diff --git a/src/lib/profiles.ts b/src/lib/profiles.ts
index 805bc06eb..4cd8d764e 100644
--- a/src/lib/profiles.ts
+++ b/src/lib/profiles.ts
@@ -7,6 +7,7 @@ type Profile = {
     hasStorage: boolean;
     hasSites: boolean;
     hasProjectProgressBars: boolean;
+    hasFullPageSignup: boolean;
 };
 
 export const ConsoleCloudProfile: Profile = {
@@ -17,7 +18,8 @@ export const ConsoleCloudProfile: Profile = {
     hasMessages: true,
     hasStorage: true,
     hasSites: true,
-    hasProjectProgressBars: true
+    hasProjectProgressBars: true,
+    hasFullPageSignup: false
 };
 
 export const ConsoleSelfhostedProfile: Profile = {
@@ -28,7 +30,8 @@ export const ConsoleSelfhostedProfile: Profile = {
     hasMessages: true,
     hasStorage: true,
     hasSites: true,
-    hasProjectProgressBars: true
+    hasProjectProgressBars: true,
+    hasFullPageSignup: false
 };
 
 export const StudioProfile: Profile = {
@@ -39,5 +42,6 @@ export const StudioProfile: Profile = {
     hasMessages: true,
     hasStorage: true,
     hasSites: true,
-    hasProjectProgressBars: false
+    hasProjectProgressBars: false,
+    hasFullPageSignup: true
 };
diff --git a/src/routes/(public)/(guest)/login/+page.svelte b/src/routes/(public)/(guest)/login/+page.svelte
index fda23c7b4..d26f31b42 100644
--- a/src/routes/(public)/(guest)/login/+page.svelte
+++ b/src/routes/(public)/(guest)/login/+page.svelte
@@ -7,12 +7,13 @@
     import { Unauthenticated } from '$lib/layout';
     import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { isCloud } from '$lib/system';
+    import { consoleProfile, isCloud } from '$lib/system';
     import { page } from '$app/state';
     import { OAuthProvider } from '@appwrite.io/console';
     import { redirectTo } from '$routes/store';
     import { user } from '$lib/stores/user';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Card, Modal } from '@appwrite.io/pink-svelte';
+    import DesktopLight from './assets/desktop-light.png';
 
     let mail: string, pass: string, disabled: boolean;
 
@@ -82,43 +83,109 @@
     <title>Sign in - Appwrite</title>
 </svelte:head>
 
-<Unauthenticated coupon={data?.couponData} campaign={data?.campaign}>
-    <svelte:fragment slot="title">Sign in</svelte:fragment>
-    <svelte:fragment>
-        <Form onSubmit={login}>
-            <Layout.Stack>
-                <InputEmail
-                    id="email"
-                    label="Email"
-                    placeholder="Email"
-                    autofocus={true}
-                    required={true}
-                    bind:value={mail} />
-                <InputPassword
-                    id="password"
-                    label="Password"
-                    placeholder="Password"
-                    required={true}
-                    bind:value={pass} />
-                <Button fullWidth submit {disabled}>Sign in</Button>
-                {#if isCloud}
-                    <span class="with-separators eyebrow-heading-3">or</span>
-                    <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
-                        <span class="icon-github" aria-hidden="true"></span>
-                        <span class="text">Sign in with GitHub</span>
-                    </Button>
-                {/if}
-            </Layout.Stack>
-        </Form>
-    </svelte:fragment>
-    <svelte:fragment slot="links">
-        <li class="inline-links-item">
-            <a href={`${base}/recover`}><span class="text">Forgot Password?</span></a>
-        </li>
-        <li class="inline-links-item">
-            <a href={`${base}/register${page?.url?.search ?? ''}`}>
-                <span class="text">Sign Up</span>
-            </a>
-        </li>
-    </svelte:fragment>
-</Unauthenticated>
+{#if consoleProfile.hasFullPageSignup}
+    <main class="full-page-signup">
+        <Modal title="Sign in" open dismissible={false}>
+            <Form onSubmit={login}>
+                <Layout.Stack>
+                    <InputEmail
+                        id="email"
+                        label="Email"
+                        placeholder="Email"
+                        autofocus={true}
+                        required={true}
+                        bind:value={mail} />
+                    <InputPassword
+                        id="password"
+                        label="Password"
+                        placeholder="Password"
+                        required={true}
+                        bind:value={pass} />
+                    <Button fullWidth submit {disabled}>Sign in</Button>
+                    {#if isCloud}
+                        <span class="with-separators eyebrow-heading-3">or</span>
+                        <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
+                            <span class="icon-github" aria-hidden="true"></span>
+                            <span class="text">Sign in with GitHub</span>
+                        </Button>
+                    {/if}
+                    <Layout.Stack direction="row" justifyContent="flex-start">
+                        <a href={`${base}/recover`}><span class="text">Forgot Password?</span></a>
+                        <a href={`${base}/register${page?.url?.search ?? ''}`}>
+                            <span class="text">Sign Up</span>
+                        </a>
+                    </Layout.Stack>
+                </Layout.Stack>
+            </Form>
+        </Modal>
+    </main>
+    <div class="overlay-image" style:background-image={`url('${DesktopLight}');`}></div>
+{:else}
+    <Unauthenticated coupon={data?.couponData} campaign={data?.campaign}>
+        <svelte:fragment slot="title">Sign in</svelte:fragment>
+        <svelte:fragment>
+            <Form onSubmit={login}>
+                <Layout.Stack>
+                    <InputEmail
+                        id="email"
+                        label="Email"
+                        placeholder="Email"
+                        autofocus={true}
+                        required={true}
+                        bind:value={mail} />
+                    <InputPassword
+                        id="password"
+                        label="Password"
+                        placeholder="Password"
+                        required={true}
+                        bind:value={pass} />
+                    <Button fullWidth submit {disabled}>Sign in</Button>
+                    {#if isCloud}
+                        <span class="with-separators eyebrow-heading-3">or</span>
+                        <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
+                            <span class="icon-github" aria-hidden="true"></span>
+                            <span class="text">Sign in with GitHub</span>
+                        </Button>
+                    {/if}
+                </Layout.Stack>
+            </Form>
+        </svelte:fragment>
+        <svelte:fragment slot="links">
+            <li class="inline-links-item">
+                <a href={`${base}/recover`}><span class="text">Forgot Password?</span></a>
+            </li>
+            <li class="inline-links-item">
+                <a href={`${base}/register${page?.url?.search ?? ''}`}>
+                    <span class="text">Sign Up</span>
+                </a>
+            </li>
+        </svelte:fragment>
+    </Unauthenticated>
+{/if}
+
+<style lang="scss">
+    .full-page-signup {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        z-index: 3;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        div {
+            width: 600px;
+        }
+    }
+
+    .overlay-image {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        filter: blur(4px);
+        background-size: cover;
+    }
+</style>
diff --git a/src/routes/(public)/(guest)/login/assets/desktop-light.png b/src/routes/(public)/(guest)/login/assets/desktop-light.png
new file mode 100644
index 000000000..cc4ae8911
Binary files /dev/null and b/src/routes/(public)/(guest)/login/assets/desktop-light.png differ
diff --git a/src/routes/(public)/(guest)/register/+page.svelte b/src/routes/(public)/(guest)/register/+page.svelte
index f9b0084bc..0525c7f6a 100644
--- a/src/routes/(public)/(guest)/register/+page.svelte
+++ b/src/routes/(public)/(guest)/register/+page.svelte
@@ -15,11 +15,12 @@
     import { Dependencies } from '$lib/constants';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { ID, OAuthProvider } from '@appwrite.io/console';
-    import { isCloud } from '$lib/system';
+    import { consoleProfile, isCloud } from '$lib/system';
     import { page } from '$app/state';
     import { redirectTo } from '$routes/store';
     import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
-    import { Layout, Link, Typography } from '@appwrite.io/pink-svelte';
+    import { Layout, Link, Modal, Typography } from '@appwrite.io/pink-svelte';
+    import DesktopLight from '../login/assets/desktop-light.png';
 
     export let data;
 
@@ -84,58 +85,143 @@
     <title>Sign up - Appwrite</title>
 </svelte:head>
 
-<Unauthenticated coupon={data?.couponData} campaign={data?.campaign}>
-    <svelte:fragment slot="title">Sign up</svelte:fragment>
-    <svelte:fragment>
-        <Form onSubmit={register}>
-            <Layout.Stack>
-                <InputText
-                    id="name"
-                    label="Name"
-                    placeholder="Your name"
-                    autofocus
-                    required
-                    bind:value={name} />
-                <InputEmail
-                    id="email"
-                    label="Email"
-                    placeholder="Your email"
-                    required
-                    bind:value={mail} />
-                <InputPassword
-                    id="password"
-                    label="Password"
-                    placeholder="Your password"
-                    helper="Password must be at least 8 characters long"
-                    required
-                    bind:value={pass} />
-                <InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
-                    By registering, you agree that you have read, understand, and acknowledge our <Link.Anchor
-                        href="https://appwrite.io/privacy"
-                        target="_blank"
-                        rel="noopener noreferrer">
-                        Privacy Policy</Link.Anchor>
-                    and accept our
-                    <Link.Anchor
-                        href="https://appwrite.io/terms"
-                        target="_blank"
-                        rel="noopener noreferrer">General Terms of Use</Link.Anchor
-                    >.</InputChoice>
-                <Button fullWidth submit {disabled}>Sign up</Button>
-                {#if isCloud}
-                    <span class="with-separators eyebrow-heading-3">or</span>
-                    <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
-                        <span class="icon-github" aria-hidden="true"></span>
-                        <span class="text">Sign up with GitHub</span>
-                    </Button>
-                {/if}
-            </Layout.Stack>
-        </Form>
-    </svelte:fragment>
-    <svelte:fragment slot="links">
-        <Typography.Text variant="m-400">
-            Already got an account? <Link.Anchor href={`${base}/login${page?.url?.search ?? ''}`}
-                >Sign in</Link.Anchor>
-        </Typography.Text>
-    </svelte:fragment>
-</Unauthenticated>
+{#if consoleProfile.hasFullPageSignup}
+    <main class="full-page-signup">
+        <Modal title="Sign up" open dismissible={false}>
+            <Form onSubmit={register}>
+                <Layout.Stack>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="Your name"
+                        autofocus
+                        required
+                        bind:value={name} />
+                    <InputEmail
+                        id="email"
+                        label="Email"
+                        placeholder="Your email"
+                        required
+                        bind:value={mail} />
+                    <InputPassword
+                        id="password"
+                        label="Password"
+                        placeholder="Your password"
+                        helper="Password must be at least 8 characters long"
+                        required
+                        bind:value={pass} />
+                    <InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
+                        By registering, you agree that you have read, understand, and acknowledge
+                        our <Link.Anchor
+                            href="https://appwrite.io/privacy"
+                            target="_blank"
+                            rel="noopener noreferrer">
+                            Privacy Policy</Link.Anchor>
+                        and accept our
+                        <Link.Anchor
+                            href="https://appwrite.io/terms"
+                            target="_blank"
+                            rel="noopener noreferrer">General Terms of Use</Link.Anchor
+                        >.</InputChoice>
+                    <Button fullWidth submit {disabled}>Sign up</Button>
+                    {#if isCloud}
+                        <span class="with-separators eyebrow-heading-3">or</span>
+                        <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
+                            <span class="icon-github" aria-hidden="true"></span>
+                            <span class="text">Sign up with GitHub</span>
+                        </Button>
+                    {/if}
+                    <Typography.Text variant="m-400">
+                        Already got an account? <Link.Anchor
+                            href={`${base}/login${page?.url?.search ?? ''}`}>Sign in</Link.Anchor>
+                    </Typography.Text>
+                </Layout.Stack>
+            </Form>
+        </Modal>
+    </main>
+    <div class="overlay-image" style:background-image={`url('${DesktopLight}');`}></div>
+{:else}
+    <Unauthenticated coupon={data?.couponData} campaign={data?.campaign}>
+        <svelte:fragment slot="title">Sign up</svelte:fragment>
+        <svelte:fragment>
+            <Form onSubmit={register}>
+                <Layout.Stack>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="Your name"
+                        autofocus
+                        required
+                        bind:value={name} />
+                    <InputEmail
+                        id="email"
+                        label="Email"
+                        placeholder="Your email"
+                        required
+                        bind:value={mail} />
+                    <InputPassword
+                        id="password"
+                        label="Password"
+                        placeholder="Your password"
+                        helper="Password must be at least 8 characters long"
+                        required
+                        bind:value={pass} />
+                    <InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
+                        By registering, you agree that you have read, understand, and acknowledge
+                        our <Link.Anchor
+                            href="https://appwrite.io/privacy"
+                            target="_blank"
+                            rel="noopener noreferrer">
+                            Privacy Policy</Link.Anchor>
+                        and accept our
+                        <Link.Anchor
+                            href="https://appwrite.io/terms"
+                            target="_blank"
+                            rel="noopener noreferrer">General Terms of Use</Link.Anchor
+                        >.</InputChoice>
+                    <Button fullWidth submit {disabled}>Sign up</Button>
+                    {#if isCloud}
+                        <span class="with-separators eyebrow-heading-3">or</span>
+                        <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
+                            <span class="icon-github" aria-hidden="true"></span>
+                            <span class="text">Sign up with GitHub</span>
+                        </Button>
+                    {/if}
+                </Layout.Stack>
+            </Form>
+        </svelte:fragment>
+        <svelte:fragment slot="links">
+            <Typography.Text variant="m-400">
+                Already got an account? <Link.Anchor
+                    href={`${base}/login${page?.url?.search ?? ''}`}>Sign in</Link.Anchor>
+            </Typography.Text>
+        </svelte:fragment>
+    </Unauthenticated>
+{/if}
+
+<style lang="scss">
+    .full-page-signup {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        z-index: 3;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        div {
+            width: 600px;
+        }
+    }
+
+    .overlay-image {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        filter: blur(4px);
+        background-size: cover;
+    }
+</style>