diff --git a/package.json b/package.json
index ea5e3b2a5..99425220a 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "1.0.0-next.7",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3114ccc",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9bf8175",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4fed4ac14..55532d290 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: 1.0.0-next.7
         version: 1.0.0-next.7(svelte@4.2.19)
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3114ccc
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3114ccc(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9bf8175
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9bf8175(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -223,8 +223,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3114ccc0b95c9d94385c06730b7aeaef7b4a81fc':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3114ccc0b95c9d94385c06730b7aeaef7b4a81fc}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@9bf8175bdcd6ed9f4614a76521d80963e75171cb':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@9bf8175bdcd6ed9f4614a76521d80963e75171cb}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -232,8 +232,8 @@ packages:
   '@appwrite.io/pink-icons@0.25.0':
     resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3114ccc':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3114ccc}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9bf8175':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9bf8175}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4087,15 +4087,15 @@ snapshots:
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3114ccc0b95c9d94385c06730b7aeaef7b4a81fc(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@9bf8175bdcd6ed9f4614a76521d80963e75171cb(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
   '@appwrite.io/pink-icons@0.25.0': {}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3114ccc(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9bf8175(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3114ccc0b95c9d94385c06730b7aeaef7b4a81fc(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@9bf8175bdcd6ed9f4614a76521d80963e75171cb(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/svelte': 0.83.0(svelte@4.2.19)
       pretty-bytes: 6.1.1
diff --git a/src/routes/(public)/auth/+layout.svelte b/src/routes/(public)/auth/+layout.svelte
index 24921622c..a51b92215 100644
--- a/src/routes/(public)/auth/+layout.svelte
+++ b/src/routes/(public)/auth/+layout.svelte
@@ -1,10 +1,64 @@
 <script>
     import { Container } from '$lib/layout';
+    import { app } from '$lib/stores/app';
     import { loading } from '$routes/store';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     loading.set(false);
 </script>
 
-<Container>
-    <slot />
-</Container>
+<div class="auth-bg">
+    <div>
+        <Container>
+            <slot />
+        </Container>
+    </div>
+    <footer>
+        <!-- TODO: change text style to eyebrow -->
+        <Typography.Text size="s" color="--color-fgColor-neutral-secondary">
+            POWERED BY
+        </Typography.Text>
+        {#if $app.themeInUse === 'dark'}
+            <img
+                src="/console/images/appwrite-logo-dark.svg"
+                width="120"
+                height="22"
+                alt="Appwrite Logo" />
+        {:else}
+            <img
+                src="/console/images/appwrite-logo-light.svg"
+                width="120"
+                height="22"
+                alt="Appwrite Logo" />
+        {/if}
+    </footer>
+</div>
+
+<style lang="scss">
+    .auth-bg {
+        position: fixed;
+        background: var(--color-bgcolor-neutral-primary, #fff);
+        background-size: cover;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        justify-content: space-between;
+        div {
+            flex: 1;
+            display: flex;
+            align-items: center;
+        }
+        footer {
+            padding: 2rem 1rem;
+            display: flex;
+            gap: 0.5rem;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+</style>
diff --git a/src/routes/(public)/auth/preview/+page.svelte b/src/routes/(public)/auth/preview/+page.svelte
index d65c1672f..9f82172eb 100644
--- a/src/routes/(public)/auth/preview/+page.svelte
+++ b/src/routes/(public)/auth/preview/+page.svelte
@@ -1,227 +1,28 @@
 <script lang="ts">
-    import { invalidate } from '$app/navigation';
+    import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Card } from '$lib/components';
-    import Modal from '$lib/components/modal.svelte';
-    import { Dependencies } from '$lib/constants';
-    import { Link } from '$lib/elements';
-    import {
-        Button,
-        Form,
-        InputChoice,
-        InputEmail,
-        InputPassword,
-        InputText
-    } from '$lib/elements/forms';
-    import { logout } from '$lib/helpers/logout';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { user } from '$lib/stores/user';
-    import { isCloud } from '$lib/system';
-    import { redirectTo } from '$routes/store';
-    import { ID, OAuthProvider } from '@appwrite.io/console';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Spinner, Typography } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
 
-    export let data;
+    onMount(async () => {
+        //check if user has access
+        //if not, redirect to login
 
-    let state: 'register' | 'login' | 'authenticated' = 'login';
-    let hasAccess = false;
-    let mail: string;
-    let pass: string;
-    let terms = false;
-    let name: string;
-
-    onMount(() => {
-        if (data?.account?.$id) {
-            //Check if they have access
-
-            state = 'authenticated';
-        }
+        //simulate login
+        setTimeout(() => {
+            goto(`${base}/auth/preview/access`);
+        }, 3000);
     });
-
-    async function login() {
-        try {
-            await sdk.forConsole.account.createEmailPasswordSession(mail, pass);
-            await invalidate(Dependencies.ACCOUNT);
-            trackEvent(Submit.AccountLogin);
-            if ($user) {
-                addNotification({
-                    type: 'success',
-                    message: 'Successfully logged in.'
-                });
-            }
-            if ($redirectTo) {
-                window.location.href = $redirectTo;
-                return;
-            }
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.AccountLogin);
-        }
-    }
-
-    async function register() {
-        try {
-            await sdk.forConsole.account.create(ID.unique(), mail, pass, name ?? '');
-            await sdk.forConsole.account.createEmailPasswordSession(mail, pass);
-
-            if ($redirectTo) {
-                window.location.href = $redirectTo;
-                return;
-            }
-
-            await invalidate(Dependencies.ACCOUNT);
-            trackEvent(Submit.AccountCreate);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.AccountCreate);
-        }
-    }
-
-    function onGithubAuth() {
-        let url = window.location.origin;
-
-        if ($page.url.searchParams) {
-            const redirect = $page.url.searchParams.get('redirect');
-            $page.url.searchParams.delete('redirect');
-            if (redirect) {
-                url = `${redirect}${$page.url.search}`;
-            } else {
-                url = `${base}${$page.url.search ?? ''}`;
-            }
-        }
-        sdk.forConsole.account.createOAuth2Session(
-            OAuthProvider.Github,
-            window.location.origin + url,
-            window.location.origin,
-            ['read:user', 'user:email']
-        );
-    }
-
-    async function handleSubmit() {
-        if (state === 'login') {
-            await login();
-        } else if (state === 'register') {
-            await register();
-        }
-    }
-
-    async function requestAccess() {
-        //TODO: Implement request access
-    }
-
-    $: console.log(data);
 </script>
 
-<Modal
-    title={state === 'authenticated' ? 'Request access' : 'Sign up or log in to view this preview'}
-    dismissible={false}
-    show
-    hideFooter={state !== 'authenticated'}>
-    <Form onSubmit={handleSubmit}>
-        <Layout.Stack gap="l">
-            {#if state === 'login'}
-                <InputEmail
-                    id="email"
-                    label="Email"
-                    placeholder="Email"
-                    autofocus
-                    required
-                    bind:value={mail} />
-                <InputPassword
-                    id="password"
-                    label="Password"
-                    placeholder="Password"
-                    required
-                    meter={false}
-                    showPasswordButton
-                    bind:value={pass} />
-                <Button size="m" fullWidth submit>Sign in</Button>
-                {#if isCloud}
-                    <span class="with-separators eyebrow-heading-3">or</span>
-                    <Button size="m" secondary fullWidth on:click={onGithubAuth}>
-                        <span class="icon-github" aria-hidden="true" />
-                        <span class="text">Sign in with GitHub</span>
-                    </Button>
-                {/if}
-                <Button size="m" text fullWidth on:click={() => (state = 'register')}>
-                    Sign up instead
-                </Button>
-            {:else if state === 'register'}
-                <InputText
-                    id="name"
-                    label="Name"
-                    placeholder="Your name"
-                    autofocus
-                    required
-                    bind:value={name} />
-                <InputEmail
-                    id="email"
-                    label="Email"
-                    placeholder="Email"
-                    required
-                    bind:value={mail} />
-                <InputPassword
-                    id="password"
-                    label="Password"
-                    placeholder="Password"
-                    required
-                    meter={false}
-                    showPasswordButton
-                    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 <a
-                        class="link"
-                        href="https://appwrite.io/privacy"
-                        target="_blank"
-                        rel="noopener noreferrer">
-                        Privacy Policy</a>
-                    and accept our
-                    <a
-                        class="link"
-                        href="https://appwrite.io/terms"
-                        target="_blank"
-                        rel="noopener noreferrer">General Terms of Use</a
-                    >.</InputChoice>
-                <Button size="m" fullWidth submit>Sign up</Button>
-                {#if isCloud}
-                    <span class="with-separators eyebrow-heading-3">or</span>
-                    <Button size="m" secondary fullWidth on:click={onGithubAuth}>
-                        <span class="icon-github" aria-hidden="true" />
-                        <span class="text">Continue with GitHub</span>
-                    </Button>
-                {/if}
-                <Button size="m" text fullWidth on:click={() => (state = 'login')}>
-                    Sign in instead
-                </Button>
-            {:else if state === 'authenticated'}
-                <Card isTile>
-                    <Layout.Stack gap="xxs">
-                        <p>
-                            You're signed in as <b>{data.account.email}</b>
-                        </p>
-                        <Link
-                            size="s"
-                            on:click={() => {
-                                logout();
-                                state = 'login';
-                            }}>Swith account</Link>
-                    </Layout.Stack>
-                </Card>
-            {/if}
-        </Layout.Stack>
-    </Form>
+<svelte:head>
+    <title>Preview - Appwrite</title>
+</svelte:head>
 
-    <svelte:fragment slot="footer">
-        <Button>Request access</Button>
-    </svelte:fragment>
-</Modal>
+<Layout.Stack alignItems="center" justifyContent="center">
+    <Layout.Stack direction="row" alignItems="center" justifyContent="center">
+        <Spinner size="l" />
+        <Typography.Text>Authenticating...</Typography.Text>
+    </Layout.Stack>
+    <Typography.Title>Please wait while we authenticate you</Typography.Title>
+</Layout.Stack>
diff --git a/src/routes/(public)/auth/preview/+page.ts b/src/routes/(public)/auth/preview/+page.ts
index 87603f585..c13cb1228 100644
--- a/src/routes/(public)/auth/preview/+page.ts
+++ b/src/routes/(public)/auth/preview/+page.ts
@@ -1,7 +1,14 @@
+import { base } from '$app/paths';
+import { redirect } from '@sveltejs/kit';
+
 export const load = async ({ parent }) => {
     const { account } = await parent();
 
-    return {
-        account
-    };
+    if (!account) {
+        redirect(303, `${base}/auth/preview/access`);
+    } else {
+        return {
+            account
+        };
+    }
 };
diff --git a/src/routes/(public)/auth/preview/access/+page.svelte b/src/routes/(public)/auth/preview/access/+page.svelte
new file mode 100644
index 000000000..b64444ed5
--- /dev/null
+++ b/src/routes/(public)/auth/preview/access/+page.svelte
@@ -0,0 +1,245 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Card } from '$lib/components';
+    import Modal from '$lib/components/modal.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { Link } from '$lib/elements';
+    import {
+        Button,
+        Form,
+        InputChoice,
+        InputEmail,
+        InputPassword,
+        InputText
+    } from '$lib/elements/forms';
+    import { logout } from '$lib/helpers/logout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { user } from '$lib/stores/user';
+    import { isCloud } from '$lib/system';
+    import { redirectTo } from '$routes/store';
+    import { ID, OAuthProvider } from '@appwrite.io/console';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+    import BGDark from './bg_dark.jpg';
+    import BGLight from './bg_light.jpg';
+    import { app } from '$lib/stores/app.js';
+
+    export let data;
+
+    let state: 'register' | 'login' | 'authenticated' = 'login';
+    let mail: string;
+    let pass: string;
+    let terms = false;
+    let name: string;
+
+    onMount(() => {
+        if (data?.account?.$id) {
+            state = 'authenticated';
+        }
+    });
+
+    async function login() {
+        try {
+            await sdk.forConsole.account.createEmailPasswordSession(mail, pass);
+            await invalidate(Dependencies.ACCOUNT);
+            trackEvent(Submit.AccountLogin);
+            if ($user) {
+                addNotification({
+                    type: 'success',
+                    message: 'Successfully logged in.'
+                });
+            }
+            if ($redirectTo) {
+                window.location.href = $redirectTo;
+                return;
+            }
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.AccountLogin);
+        }
+    }
+
+    async function register() {
+        try {
+            await sdk.forConsole.account.create(ID.unique(), mail, pass, name ?? '');
+            await sdk.forConsole.account.createEmailPasswordSession(mail, pass);
+
+            if ($redirectTo) {
+                window.location.href = $redirectTo;
+                return;
+            }
+
+            await invalidate(Dependencies.ACCOUNT);
+            trackEvent(Submit.AccountCreate);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.AccountCreate);
+        }
+    }
+
+    function onGithubAuth() {
+        let url = window.location.origin;
+
+        if ($page.url.searchParams) {
+            const redirect = $page.url.searchParams.get('redirect');
+            $page.url.searchParams.delete('redirect');
+            if (redirect) {
+                url = `${redirect}${$page.url.search}`;
+            } else {
+                url = `${base}${$page.url.search ?? ''}`;
+            }
+        }
+        sdk.forConsole.account.createOAuth2Session(
+            OAuthProvider.Github,
+            window.location.origin + url,
+            window.location.origin,
+            ['read:user', 'user:email']
+        );
+    }
+
+    async function handleSubmit() {
+        if (state === 'login') {
+            await login();
+        } else if (state === 'register') {
+            await register();
+        }
+    }
+
+    async function requestAccess() {
+        //TODO: Implement request access
+    }
+
+    $: console.log(data);
+</script>
+
+{#if $app.themeInUse === 'dark'}
+    <img class="preview-img" src={BGDark} alt="background" aria-hidden="true" />
+{:else}
+    <img class="preview-img" src={BGLight} alt="background" aria-hidden="true" />
+{/if}
+
+<svelte:head>
+    <title>Preview access - Appwrite</title>
+</svelte:head>
+
+<Modal
+    title={state === 'authenticated' ? 'Request access' : 'Sign up or log in to view this preview'}
+    dismissible={false}
+    show
+    hideFooter={state !== 'authenticated'}>
+    <Form onSubmit={handleSubmit}>
+        <Layout.Stack gap="l">
+            {#if state === 'login'}
+                <InputEmail
+                    id="email"
+                    label="Email"
+                    placeholder="Email"
+                    autofocus
+                    required
+                    bind:value={mail} />
+                <InputPassword
+                    id="password"
+                    label="Password"
+                    placeholder="Password"
+                    required
+                    bind:value={pass} />
+                <Button size="m" fullWidth submit>Sign in</Button>
+                {#if isCloud}
+                    <span class="with-separators eyebrow-heading-3">or</span>
+                    <Button size="m" secondary fullWidth on:click={onGithubAuth}>
+                        <span class="icon-github" aria-hidden="true" />
+                        <span class="text">Sign in with GitHub</span>
+                    </Button>
+                {/if}
+                <Button size="m" text fullWidth on:click={() => (state = 'register')}>
+                    Sign up instead
+                </Button>
+            {:else if state === 'register'}
+                <InputText
+                    id="name"
+                    label="Name"
+                    placeholder="Your name"
+                    autofocus
+                    required
+                    bind:value={name} />
+                <InputEmail
+                    id="email"
+                    label="Email"
+                    placeholder="Email"
+                    required
+                    bind:value={mail} />
+                <InputPassword
+                    id="password"
+                    label="Password"
+                    placeholder="Password"
+                    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 <a
+                        class="link"
+                        href="https://appwrite.io/privacy"
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        Privacy Policy</a>
+                    and accept our
+                    <a
+                        class="link"
+                        href="https://appwrite.io/terms"
+                        target="_blank"
+                        rel="noopener noreferrer">General Terms of Use</a
+                    >.</InputChoice>
+                <Button size="m" fullWidth submit>Sign up</Button>
+                {#if isCloud}
+                    <span class="with-separators eyebrow-heading-3">or</span>
+                    <Button size="m" secondary fullWidth on:click={onGithubAuth}>
+                        <span class="icon-github" aria-hidden="true" />
+                        <span class="text">Continue with GitHub</span>
+                    </Button>
+                {/if}
+                <Button size="m" text fullWidth on:click={() => (state = 'login')}>
+                    Sign in instead
+                </Button>
+            {:else if state === 'authenticated'}
+                <Card isTile>
+                    <Layout.Stack gap="xxs">
+                        <p>
+                            You're signed in as <b>{data.account.email}</b>
+                        </p>
+                        <Link
+                            size="s"
+                            on:click={() => {
+                                logout();
+                                state = 'login';
+                            }}>Swith account</Link>
+                    </Layout.Stack>
+                </Card>
+            {/if}
+        </Layout.Stack>
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button on:click={requestAccess}>Request access</Button>
+    </svelte:fragment>
+</Modal>
+
+<style lang="scss">
+    .preview-img {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: top left;
+    }
+</style>
diff --git a/src/routes/(public)/auth/preview/access/+page.ts b/src/routes/(public)/auth/preview/access/+page.ts
new file mode 100644
index 000000000..87603f585
--- /dev/null
+++ b/src/routes/(public)/auth/preview/access/+page.ts
@@ -0,0 +1,7 @@
+export const load = async ({ parent }) => {
+    const { account } = await parent();
+
+    return {
+        account
+    };
+};
diff --git a/src/routes/(public)/auth/preview/access/bg_dark.jpg b/src/routes/(public)/auth/preview/access/bg_dark.jpg
new file mode 100644
index 000000000..1fbbdc128
Binary files /dev/null and b/src/routes/(public)/auth/preview/access/bg_dark.jpg differ
diff --git a/src/routes/(public)/auth/preview/access/bg_light.jpg b/src/routes/(public)/auth/preview/access/bg_light.jpg
new file mode 100644
index 000000000..febb1bab8
Binary files /dev/null and b/src/routes/(public)/auth/preview/access/bg_light.jpg differ