diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index 952f4817c..b0663de89 100644
--- a/src/lib/layout/index.ts
+++ b/src/lib/layout/index.ts
@@ -7,3 +7,4 @@ export { default as Notification } from './notification.svelte';
 export { default as Notifications } from './notifications.svelte';
 export { default as Shell } from './shell.svelte';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
+export { default as Unauthenticated } from './unauthenticated.svelte';
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
new file mode 100644
index 000000000..45088962e
--- /dev/null
+++ b/src/lib/layout/unauthenticated.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+    import AppwriteLogo from '$lib/images/appwrite.svg';
+    import LoginLight from '$lib/images/login/login-light-mode.svg';
+    import LoginDark from '$lib/images/login/login-dark-mode.svg';
+
+    const technologies = [
+        'js',
+        'flutter',
+        'apple',
+        'android',
+        'node_js',
+        'php',
+        'python',
+        'ruby',
+        'dart',
+        'kotlin',
+        'swift'
+    ];
+</script>
+
+<main class="grid-1-1 is-full-page" id="main">
+    <section class="grid-1-1-col-1 u-flex u-flex-vertical">
+        <div
+            class="container u-margin-block-start-40"
+            style="--p-container-max-size: var(--container-size-medium);">
+            <a href="/">
+                <img src={AppwriteLogo} width="196" height="47" class="u-block" alt="Appwrite" />
+            </a>
+        </div>
+
+        <div class="u-margin-block-start-auto" />
+
+        <div
+            class="container u-margin-block-start-20"
+            style="--p-container-max-size: var(--container-size-large);">
+            <img src={LoginLight} alt="" class="u-only-light" />
+            <img src={LoginDark} alt="" class="u-only-dark" />
+        </div>
+
+        <div class="u-margin-block-start-auto" />
+
+        <div
+            class="container u-text-color-light-gray is-only-desktop"
+            style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
+            <p>Integrate with your favourite technologies</p>
+            <ul
+                class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 ">
+                {#each technologies as tech}
+                    <li>
+                        <span
+                            class={`icon-${tech} u-font-size-32`}
+                            aria-hidden="true"
+                            aria-label={tech} />
+                    </li>
+                {/each}
+            </ul>
+        </div>
+        <div class="u-margin-block-start-40" />
+    </section>
+    <section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
+        <div class="container u-flex u-flex-vertical u-cross-center">
+            <div class="u-margin-block-start-auto" />
+
+            <div class="u-max-width-500 u-width-full-line">
+                <h1 class="heading-level-3 u-margin-block-start-auto"><slot name="title" /></h1>
+                <div class="u-margin-block-start-40">
+                    <slot />
+                </div>
+
+                <ul class="inline-links is-center is-with-sep u-margin-block-start-32">
+                    <slot name="links" />
+                </ul>
+            </div>
+
+            <div class="u-margin-block-start-auto" />
+            <p class="u-max-width-500 u-width-full-line u-margin-block-start-24">
+                version 0.15.2.402
+            </p>
+            <div class="u-margin-block-start-40" />
+        </div>
+    </section>
+</main>
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
index a3691f57d..1efd8040d 100644
--- a/src/routes/login.svelte
+++ b/src/routes/login.svelte
@@ -12,9 +12,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
-    import AppwriteLogo from '$lib/images/appwrite.svg';
-    import LoginLight from '$lib/images/login/login-light-mode.svg';
-    import LoginDark from '$lib/images/login/login-dark-mode.svg';
+    import { Unauthenticated } from '$lib/layout';
 
     let mail: string, pass: string;
 
@@ -34,112 +32,45 @@
             });
         }
     };
-
-    const technologies = [
-        'js',
-        'flutter',
-        'apple',
-        'android',
-        'node_js',
-        'php',
-        'python',
-        'ruby',
-        'dart',
-        'kotlin',
-        'swift'
-    ];
 </script>
 
 <svelte:head>
     <title>Appwrite - Sign in</title>
 </svelte:head>
 
-<main class="grid-1-1 is-full-page" id="main">
-    <section class="grid-1-1-col-1 u-flex u-flex-vertical">
-        <div
-            class="container u-margin-block-start-40"
-            style="--p-container-max-size: var(--container-size-medium);">
-            <a href="/">
-                <img src={AppwriteLogo} width="196" height="47" class="u-block" alt="Appwrite" />
-            </a>
-        </div>
-
-        <div class="u-margin-block-start-auto" />
-
-        <div
-            class="container u-margin-block-start-20"
-            style="--p-container-max-size: var(--container-size-large);">
-            <img src={LoginLight} alt="" class="u-only-light" />
-            <img src={LoginDark} alt="" class="u-only-dark" />
-        </div>
-
-        <div class="u-margin-block-start-auto" />
-
-        <div
-            class="container u-text-color-light-gray"
-            style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
-            <p>Integrate with your favourite technologies</p>
-            <ul
-                class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1">
-                {#each technologies as tech}
-                    <li>
-                        <span
-                            class={`icon-${tech} u-font-size-32`}
-                            aria-hidden="true"
-                            aria-label={tech} />
-                    </li>
-                {/each}
-            </ul>
-        </div>
-        <div class="u-margin-block-start-40" />
-    </section>
-    <section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
-        <div class="container u-flex u-flex-vertical u-cross-center">
-            <div class="u-margin-block-start-auto" />
-
-            <div class="u-max-width-500 u-width-full-line">
-                <h1 class="heading-level-3 u-margin-block-start-auto">Sign In</h1>
-                <div class="u-margin-block-start-40">
-                    <Form on:submit={login}>
-                        <FormList>
-                            <InputEmail
-                                id="email"
-                                label="Email"
-                                placeholder="Email"
-                                showLabel={false}
-                                autofocus={true}
-                                required={true}
-                                bind:value={mail} />
-                            <InputPassword
-                                id="password"
-                                label="Password"
-                                placeholder="Password"
-                                showLabel={false}
-                                required={true}
-                                meter={false}
-                                bind:value={pass} />
-                            <FormItem>
-                                <Button fullWidth submit>Sign in</Button>
-                            </FormItem>
-                        </FormList>
-                    </Form>
-                </div>
-
-                <ul class="inline-links is-center is-with-sep u-margin-block-start-32">
-                    <li class="inline-links-item">
-                        <a href="#/"><span class="text">Forgot Password?</span></a>
-                    </li>
-                    <li class="inline-links-item">
-                        <a href={`${base}/register`}><span class="text">Sign Up</span></a>
-                    </li>
-                </ul>
-            </div>
-
-            <div class="u-margin-block-start-auto" />
-            <p class="u-max-width-500 u-width-full-line u-margin-block-start-24">
-                version 0.15.2.402
-            </p>
-            <div class="u-margin-block-start-40" />
-        </div>
-    </section>
-</main>
+<Unauthenticated>
+    <svelte:fragment slot="title">Sign in</svelte:fragment>
+    <svelte:fragment>
+        <Form on:submit={login}>
+            <FormList>
+                <InputEmail
+                    id="email"
+                    label="Email"
+                    placeholder="Email"
+                    showLabel={false}
+                    autofocus={true}
+                    required={true}
+                    bind:value={mail} />
+                <InputPassword
+                    id="password"
+                    label="Password"
+                    placeholder="Password"
+                    showLabel={false}
+                    required={true}
+                    meter={false}
+                    showPasswordButton={true}
+                    bind:value={pass} />
+                <FormItem>
+                    <Button fullWidth submit>Sign in</Button>
+                </FormItem>
+            </FormList>
+        </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`}><span class="text">Sign Up</span></a>
+        </li>
+    </svelte:fragment>
+</Unauthenticated>
diff --git a/src/routes/recover.svelte b/src/routes/recover.svelte
new file mode 100644
index 000000000..f638f29d1
--- /dev/null
+++ b/src/routes/recover.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { Button, Form, FormItem, FormList, InputEmail } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { user } from '$lib/stores/user';
+    import { Unauthenticated } from '$lib/layout';
+
+    let mail: string;
+    const recover = async () => {
+        try {
+            await sdkForConsole.account.createRecovery(mail, `${base}`);
+            user.fetchUser();
+            addNotification({
+                type: 'success',
+                message: 'We have sent you an email with a password reset link'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<svelte:head>
+    <title>Appwrite - Recover</title>
+</svelte:head>
+
+<Unauthenticated>
+    <svelte:fragment slot="title">Password Recovery</svelte:fragment>
+    <svelte:fragment>
+        <Form on:submit={recover}>
+            <FormList>
+                <InputEmail
+                    id="email"
+                    label="Email"
+                    placeholder="Email"
+                    autofocus={true}
+                    required={true}
+                    bind:value={mail} />
+
+                <FormItem>
+                    <Button fullWidth submit>Recover</Button>
+                </FormItem>
+            </FormList>
+        </Form></svelte:fragment>
+    <svelte:fragment slot="links">
+        <li class="inline-links-item">
+            <a href={`${base}/login`}><span class="text">Sign in</span></a>
+        </li>
+        <li class="inline-links-item">
+            <a href={`${base}/register`}><span class="text">Sign Up</span></a>
+        </li>
+    </svelte:fragment>
+</Unauthenticated>
diff --git a/src/routes/register.svelte b/src/routes/register.svelte
index 14a9281cd..af0b7498e 100644
--- a/src/routes/register.svelte
+++ b/src/routes/register.svelte
@@ -11,6 +11,8 @@
     } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
+    import { Unauthenticated } from '$lib/layout';
+    import FormList from '$lib/elements/forms/formList.svelte';
 
     let name: string, mail: string, pass: string;
 
@@ -29,27 +31,44 @@
 </script>
 
 <svelte:head>
-    <title>Register</title>
+    <title>Appwrite - Sign up</title>
 </svelte:head>
 
-<h1>Register</h1>
+<Unauthenticated>
+    <svelte:fragment slot="title">Sign up</svelte:fragment>
+    <svelte:fragment>
+        <Form on:submit={register}>
+            <FormList>
+                <InputText
+                    id="name"
+                    label="Name"
+                    placeholder="Your name"
+                    autofocus={true}
+                    bind:value={name} />
+                <InputEmail
+                    id="email"
+                    label="Email"
+                    placeholder="Your email"
+                    required={true}
+                    bind:value={mail} />
+                <InputPassword
+                    id="password"
+                    label="Password"
+                    placeholder="Your password"
+                    required={true}
+                    showPasswordButton={true}
+                    bind:value={pass} />
 
-<Form on:submit={register}>
-    <InputText id="name" label="Name" placeholder="John Doe" autofocus={true} bind:value={name} />
-    <InputEmail
-        id="email"
-        label="Email"
-        placeholder="test@example.com"
-        required={true}
-        bind:value={mail} />
-    <InputPassword
-        id="password"
-        label="Password"
-        placeholder="********"
-        required={true}
-        bind:value={pass} />
-
-    <FormItem><Button submit>Register</Button></FormItem>
-</Form>
-
-<a href={`${base}/login`}>Login</a>
+                <FormItem>
+                    <Button fullWidth submit>Sign up</Button></FormItem>
+            </FormList>
+        </Form>
+    </svelte:fragment>
+    <svelte:fragment slot="links">
+        <li class="inline-links-item">
+            <span class="text">
+                Already got an account? <a class="link" href={`${base}/login`}>Sign in</a>
+            </span>
+        </li>
+    </svelte:fragment>
+</Unauthenticated>