diff --git a/packages/bbui/src/Layout/Layout.svelte b/packages/bbui/src/Layout/Layout.svelte
index acd064a16..504db4113 100644
--- a/packages/bbui/src/Layout/Layout.svelte
+++ b/packages/bbui/src/Layout/Layout.svelte
@@ -6,10 +6,11 @@
   export let gap = "M"
   export let noGap = false
   export let alignContent = "normal"
+  export let justifyItems = "stretch"
 </script>
 
 <div
-  style="align-content:{alignContent};"
+  style="align-content:{alignContent};justify-items:{justifyItems};"
   class:horizontal
   class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
     paddingY} gap-{!noGap && gap}"
diff --git a/packages/bbui/src/Typography/Body.svelte b/packages/bbui/src/Typography/Body.svelte
index b18400862..ec32e5414 100644
--- a/packages/bbui/src/Typography/Body.svelte
+++ b/packages/bbui/src/Typography/Body.svelte
@@ -4,9 +4,11 @@
   export let size = "M"
   export let serif = false
   export let noPadding = false
+  export let textAlign
 </script>
 
 <p
+    style="{textAlign ? `text-align:${textAlign}` : ``}"
   class:noPadding
   class="spectrum-Body spectrum-Body--size{size}"
   class:spectrum-Body--serif={serif}
diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte
index 6e0c15870..72f3ba2a8 100644
--- a/packages/bbui/src/Typography/Heading.svelte
+++ b/packages/bbui/src/Typography/Heading.svelte
@@ -3,8 +3,14 @@
 
   // Sizes
   export let size = "M"
+  export let textAlign
+  export let noPadding = false
 </script>
 
-<h1 class="spectrum-Heading spectrum-Heading--size{size}">
+<h1
+  style="{textAlign ? `text-align:${textAlign}` : ``}"
+  class:noPadding
+  class="spectrum-Heading spectrum-Heading--size{size}"
+>
   <slot />
 </h1>
diff --git a/packages/builder/assets/google-logo.png b/packages/builder/assets/google-logo.png
new file mode 100644
index 000000000..371a6aee2
Binary files /dev/null and b/packages/builder/assets/google-logo.png differ
diff --git a/packages/builder/src/components/common/users/PasswordRepeatInput.svelte b/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
new file mode 100644
index 000000000..f1cb6bb82
--- /dev/null
+++ b/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
@@ -0,0 +1,43 @@
+<script>
+  import { Layout, Input } from "@budibase/bbui"
+  import {
+    createValidationStore,
+    requiredValidator,
+  } from "../../../helpers/validation"
+
+  export let password
+  export let error
+
+  const [firstPassword, passwordError, firstTouched] = createValidationStore(
+    "",
+    requiredValidator
+  )
+  const [repeatPassword, _, repeatTouched] = createValidationStore(
+    "",
+    requiredValidator
+  )
+
+  $: password = $firstPassword
+  $: error =
+    !$firstPassword ||
+    !$firstTouched ||
+    !$repeatTouched ||
+    $firstPassword !== $repeatPassword
+</script>
+
+<Layout gap="XS" noPadding>
+  <Input
+    label="Password"
+    type="password"
+    error={$firstTouched && $passwordError}
+    bind:value={$firstPassword}
+  />
+  <Input
+    label="Repeat Password"
+    type="password"
+    error={$repeatTouched &&
+      $firstPassword !== $repeatPassword &&
+      "Passwords must match"}
+    bind:value={$repeatPassword}
+  />
+</Layout>
diff --git a/packages/builder/src/components/login/ForgotForm.svelte b/packages/builder/src/components/login/ForgotForm.svelte
new file mode 100644
index 000000000..afadf9f4c
--- /dev/null
+++ b/packages/builder/src/components/login/ForgotForm.svelte
@@ -0,0 +1,60 @@
+<script>
+  import {
+    Input,
+    Button,
+    Layout,
+    Body,
+    Heading,
+    notifications,
+  } from "@budibase/bbui"
+  import { auth } from "stores/backend"
+
+  let email = ""
+
+  async function forgot() {
+    try {
+      await auth.forgotPassword(email)
+      notifications.success("Email sent - please check your inbox")
+    } catch (err) {
+      notifications.error("Unable to send reset password link")
+    }
+  }
+</script>
+
+<div class="login">
+  <div class="main">
+    <Layout>
+      <Layout noPadding justifyItems="center">
+        <img src="https://i.imgur.com/ZKyklgF.png" />
+      </Layout>
+      <Layout gap="XS" noPadding>
+        <Heading textAlign="center">Forgotten your password?</Heading>
+        <Body size="S" textAlign="center">
+          No problem! Just enter your account's email address and we'll send
+          you a link to reset it.
+        </Body>
+        <Input label="Email" bind:value={email} />
+      </Layout>
+      <Button cta on:click={forgot} disabled={!email}>Reset your password</Button>
+    </Layout>
+  </div>
+</div>
+
+<style>
+  .login {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .main {
+    width: 300px;
+  }
+
+  img {
+    width: 48px;
+  }
+</style>
diff --git a/packages/builder/src/components/login/GoogleButton.svelte b/packages/builder/src/components/login/GoogleButton.svelte
new file mode 100644
index 000000000..13f365205
--- /dev/null
+++ b/packages/builder/src/components/login/GoogleButton.svelte
@@ -0,0 +1,43 @@
+<script>
+  import { Link } from "@budibase/bbui"
+  import GoogleLogo from "/assets/google-logo.png"
+</script>
+
+<div class="outer">
+  <Link target="_blank" href="/api/admin/auth/google">
+    <div class="inner">
+      <img src={GoogleLogo} alt="google icon" />
+      <p>Sign in with Google</p>
+    </div>
+  </Link>
+</div>
+
+<style>
+  .outer {
+    border: 1px solid #494949;
+    border-radius: 4px;
+    width: 100%;
+    background-color: var(--background-alt);
+  }
+  .inner {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--spacing-xs);
+    padding-bottom: var(--spacing-xs);
+  }
+  .inner img {
+    width: 18px;
+    margin: 3px 10px 3px 3px;
+  }
+  .inner p {
+    margin: 0;
+  }
+  .outer :global(a) {
+    text-decoration: none;
+    font-weight: 500;
+    font-size: var(--font-size-m);
+    color: #fff;
+  }
+</style>
diff --git a/packages/builder/src/components/login/LoginForm.svelte b/packages/builder/src/components/login/LoginForm.svelte
index f6f4f314c..df7892396 100644
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@@ -2,11 +2,15 @@
   import { goto } from "@roxi/routify"
   import {
     notifications,
-    Link,
     Input,
-    Modal,
-    ModalContent,
+    Button,
+    Divider,
+    ActionButton,
+    Layout,
+    Body,
+    Heading,
   } from "@budibase/bbui"
+  import GoogleButton from "./GoogleButton.svelte"
   import { auth } from "stores/backend"
 
   let username = ""
@@ -27,33 +31,50 @@
   }
 </script>
 
-<Modal fixed>
-  <ModalContent
-    size="M"
-    title="Log In"
-    onConfirm={login}
-    confirmText="Log In"
-    showCancelButton={false}
-    showCloseIcon={false}
-  >
-    <Input label="Email" bind:value={username} />
-    <Input label="Password" type="password" on:change bind:value={password} />
-    <div class="footer" slot="footer">
-      <Link target="_blank" href="/api/admin/auth/google">
-        Sign In With Google
-      </Link>
-    </div>
-  </ModalContent>
-</Modal>
+<div class="login">
+  <div class="main">
+    <Layout>
+      <Layout noPadding justifyItems="center">
+        <img src="https://i.imgur.com/ZKyklgF.png" />
+        <Heading>Sign in to Budibase</Heading>
+      </Layout>
+      <GoogleButton />
+      <Layout gap="XS" noPadding>
+        <Divider noGrid />
+        <Body size="S" textAlign="center">Sign in with email</Body>
+        <Input label="Email" bind:value={username} />
+        <Input
+          label="Password"
+          type="password"
+          on:change
+          bind:value={password}
+        />
+      </Layout>
+      <Layout gap="S" noPadding>
+        <Button cta on:click={login}>Sign in to Budibase</Button>
+        <ActionButton quiet on:click={() => $goto("./forgot")}>
+          Forgot password?
+        </ActionButton>
+      </Layout>
+    </Layout>
+  </div>
+</div>
 
 <style>
-  .footer {
+  .login {
+    width: 100%;
+    height: 100%;
     display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
   }
-  .footer :global(a) {
-    margin-right: var(--spectrum-global-dimension-static-size-200);
+
+  .main {
+    width: 300px;
+  }
+
+  img {
+    width: 48px;
   }
 </style>
diff --git a/packages/builder/src/components/login/ResetForm.svelte b/packages/builder/src/components/login/ResetForm.svelte
new file mode 100644
index 000000000..4ae19b1ab
--- /dev/null
+++ b/packages/builder/src/components/login/ResetForm.svelte
@@ -0,0 +1,58 @@
+<script>
+  import { Button, Layout, Body, Heading, notifications } from "@budibase/bbui"
+  import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
+  import { params, goto } from "@roxi/routify"
+  import { auth } from "stores/backend"
+
+  const resetCode = $params["?code"]
+  let password, error
+
+  async function reset() {
+    try {
+      await auth.resetPassword(password, resetCode)
+      notifications.success("Password reset successfully")
+      // send them to login if reset successful
+      $goto("./login")
+    } catch (err) {
+      notifications.error("Unable to reset password")
+    }
+
+  }
+</script>
+
+<div class="login">
+  <div class="main">
+    <Layout>
+      <Layout noPadding justifyItems="center">
+        <img src="https://i.imgur.com/ZKyklgF.png" />
+      </Layout>
+      <Layout gap="XS" noPadding>
+        <Heading textAlign="center">Reset your password</Heading>
+        <Body size="S" textAlign="center">
+          Please enter the new password you'd like to use.
+        </Body>
+        <PasswordRepeatInput bind:password bind:error />
+      </Layout>
+      <Button cta on:click={reset} disabled={error || !resetCode}>Reset your password</Button>
+    </Layout>
+  </div>
+</div>
+
+<style>
+  .login {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .main {
+    width: 260px;
+  }
+
+  img {
+    width: 48px;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/_layout.svelte b/packages/builder/src/pages/builder/_layout.svelte
index 0a5a88168..fccfe0f23 100644
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte"
-  import { page, goto } from "@roxi/routify"
+  import { goto, isActive } from "@roxi/routify"
   import { auth } from "stores/backend"
   import { admin } from "stores/portal"
 
@@ -23,10 +23,11 @@
   // Redirect to log in at any time if the user isn't authenticated
   $: {
     if (
-      !$page.path.includes("/builder/invite") &&
       loaded &&
       hasAdminUser &&
-      !$auth.user
+      !$auth.user &&
+      !$isActive("./auth") &&
+      !$isActive("./invite")
     ) {
       $goto("./auth/login")
     }
diff --git a/packages/builder/src/pages/builder/auth/forgot.svelte b/packages/builder/src/pages/builder/auth/forgot.svelte
new file mode 100644
index 000000000..59f048c4c
--- /dev/null
+++ b/packages/builder/src/pages/builder/auth/forgot.svelte
@@ -0,0 +1,5 @@
+<script>
+  import ForgotForm from "components/login/ForgotForm.svelte"
+</script>
+
+<ForgotForm />
diff --git a/packages/builder/src/pages/builder/auth/reset.svelte b/packages/builder/src/pages/builder/auth/reset.svelte
new file mode 100644
index 000000000..4cb949921
--- /dev/null
+++ b/packages/builder/src/pages/builder/auth/reset.svelte
@@ -0,0 +1,5 @@
+<script>
+  import ResetForm from "components/login/ResetForm.svelte"
+</script>
+
+<ResetForm />
diff --git a/packages/builder/src/pages/builder/invite/index.svelte b/packages/builder/src/pages/builder/invite/index.svelte
index 85316dc00..2f2a77851 100644
--- a/packages/builder/src/pages/builder/invite/index.svelte
+++ b/packages/builder/src/pages/builder/invite/index.svelte
@@ -1,29 +1,15 @@
 <script>
-  import {
-    Layout,
-    Heading,
-    Body,
-    Input,
-    Button,
-    notifications,
-  } from "@budibase/bbui"
+  import { Layout, Heading, Body, Button, notifications } from "@budibase/bbui"
   import { goto, params } from "@roxi/routify"
-  import { createValidationStore, requiredValidator } from "helpers/validation"
+  import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
   import { users } from "stores/portal"
 
-  const [password, passwordError, passwordTouched] = createValidationStore(
-    "",
-    requiredValidator
-  )
-  const [repeat, _, repeatTouched] = createValidationStore(
-    "",
-    requiredValidator
-  )
   const inviteCode = $params["?code"]
+  let password, error
 
   async function acceptInvite() {
     try {
-      const res = await users.acceptInvite(inviteCode, $password)
+      const res = await users.acceptInvite(inviteCode, password)
       if (!res) {
         throw new Error(res.message)
       }
@@ -40,33 +26,15 @@
     <Layout gap="XS">
       <img src="https://i.imgur.com/ZKyklgF.png" />
     </Layout>
-    <div class="center">
-      <Layout gap="XS">
-        <Heading size="M">Accept Invitation</Heading>
-        <Body size="M">Please enter a password to setup your user.</Body>
-      </Layout>
-    </div>
     <Layout gap="XS">
-      <Input
-        label="Password"
-        type="password"
-        error={$passwordTouched && $passwordError}
-        bind:value={$password}
-      />
-      <Input
-        label="Repeat Password"
-        type="password"
-        error={$repeatTouched &&
-          $password !== $repeat &&
-          "Passwords must match"}
-        bind:value={$repeat}
-      />
+      <Heading textAlign="center" size="M">Accept Invitation</Heading>
+      <Body textAlign="center" size="S"
+        >Please enter a password to setup your user.</Body
+      >
+      <PasswordRepeatInput bind:error bind:password />
     </Layout>
     <Layout gap="S">
-      <Button
-        disabled={!$passwordTouched || !$repeatTouched || $password !== $repeat}
-        cta
-        on:click={acceptInvite}>Accept invite</Button
+      <Button disabled={error} cta on:click={acceptInvite}>Accept invite</Button
       >
     </Layout>
   </div>
@@ -87,9 +55,6 @@
     justify-content: flex-start;
     align-items: stretch;
   }
-  .center {
-    text-align: center;
-  }
   img {
     width: 40px;
     margin: 0 auto;
diff --git a/packages/builder/src/stores/backend/auth.js b/packages/builder/src/stores/backend/auth.js
index c86836ae0..40420657e 100644
--- a/packages/builder/src/stores/backend/auth.js
+++ b/packages/builder/src/stores/backend/auth.js
@@ -33,6 +33,25 @@ export function createAuthStore() {
       await response.json()
       store.update(state => ({ ...state, user: null }))
     },
+    forgotPassword: async email => {
+      const response = await api.post(`/api/admin/auth/reset`, {
+        email,
+      })
+      if (response.status !== 200) {
+        throw "Unable to send email with reset link"
+      }
+      await response.json()
+    },
+    resetPassword: async (password, code) => {
+      const response = await api.post(`/api/admin/auth/reset/update`, {
+        password,
+        resetCode: code,
+      })
+      if (response.status !== 200) {
+        throw "Unable to reset password"
+      }
+      await response.json()
+    },
     createUser: async user => {
       const response = await api.post(`/api/admin/users`, user)
       if (response.status !== 200) {
diff --git a/packages/worker/src/api/controllers/admin/auth.js b/packages/worker/src/api/controllers/admin/auth.js
index 7298d726b..5304ac85d 100644
--- a/packages/worker/src/api/controllers/admin/auth.js
+++ b/packages/worker/src/api/controllers/admin/auth.js
@@ -54,10 +54,13 @@ exports.reset = async ctx => {
   }
   try {
     const user = await getGlobalUserByEmail(email)
-    await sendEmail(email, EmailTemplatePurpose.PASSWORD_RECOVERY, {
-      user,
-      subject: "{{ company }} platform password reset",
-    })
+    // only if user exists, don't error though if they don't
+    if (user) {
+      await sendEmail(email, EmailTemplatePurpose.PASSWORD_RECOVERY, {
+        user,
+        subject: "{{ company }} platform password reset",
+      })
+    }
   } catch (err) {
     // don't throw any kind of error to the user, this might give away something
   }
diff --git a/packages/worker/src/api/controllers/auth.js b/packages/worker/src/api/controllers/auth.js
deleted file mode 100644
index 153f7f852..000000000
--- a/packages/worker/src/api/controllers/auth.js
+++ /dev/null
@@ -1,93 +0,0 @@
-const authPkg = require("@budibase/auth")
-const { google } = require("@budibase/auth/src/middleware")
-const { Configs } = require("../../constants")
-const CouchDB = require("../../db")
-const { clearCookie } = authPkg.utils
-const { Cookies } = authPkg.constants
-const { passport } = authPkg.auth
-
-const GLOBAL_DB = authPkg.StaticDatabases.GLOBAL.name
-
-exports.authenticate = async (ctx, next) => {
-  return passport.authenticate("local", async (err, user) => {
-    if (err) {
-      return ctx.throw(403, "Unauthorized")
-    }
-
-    const expires = new Date()
-    expires.setDate(expires.getDate() + 1)
-
-    if (!user) {
-      return ctx.throw(403, "Unauthorized")
-    }
-
-    ctx.cookies.set(Cookies.Auth, user.token, {
-      expires,
-      path: "/",
-      httpOnly: false,
-      overwrite: true,
-    })
-
-    delete user.token
-
-    ctx.body = { user }
-  })(ctx, next)
-}
-
-exports.logout = async ctx => {
-  clearCookie(ctx, Cookies.Auth)
-  ctx.body = { message: "User logged out" }
-}
-
-/**
- * The initial call that google authentication makes to take you to the google login screen.
- * On a successful login, you will be redirected to the googleAuth callback route.
- */
-exports.googlePreAuth = async (ctx, next) => {
-  const db = new CouchDB(GLOBAL_DB)
-  const config = await authPkg.db.getScopedFullConfig(db, {
-    type: Configs.GOOGLE,
-    group: ctx.query.group,
-  })
-  const strategy = await google.strategyFactory(config)
-
-  return passport.authenticate(strategy, {
-    scope: ["profile", "email"],
-  })(ctx, next)
-}
-
-exports.googleAuth = async (ctx, next) => {
-  const db = new CouchDB(GLOBAL_DB)
-
-  const config = await authPkg.db.getScopedFullConfig(db, {
-    type: Configs.GOOGLE,
-    group: ctx.query.group,
-  })
-  const strategy = await google.strategyFactory(config)
-
-  return passport.authenticate(
-    strategy,
-    { successRedirect: "/", failureRedirect: "/error" },
-    async (err, user) => {
-      if (err) {
-        return ctx.throw(403, "Unauthorized")
-      }
-
-      const expires = new Date()
-      expires.setDate(expires.getDate() + 1)
-
-      if (!user) {
-        return ctx.throw(403, "Unauthorized")
-      }
-
-      ctx.cookies.set(Cookies.Auth, user.token, {
-        expires,
-        path: "/",
-        httpOnly: false,
-        overwrite: true,
-      })
-
-      ctx.redirect("/")
-    }
-  )(ctx, next)
-}
diff --git a/packages/worker/src/utilities/email.js b/packages/worker/src/utilities/email.js
index 8d383b385..179f662a9 100644
--- a/packages/worker/src/utilities/email.js
+++ b/packages/worker/src/utilities/email.js
@@ -117,6 +117,10 @@ async function getSmtpConfiguration(db, groupId = null) {
  * @return {Promise<boolean>} returns true if there is a configuration that can be used.
  */
 exports.isEmailConfigured = async (groupId = null) => {
+  // when "testing" simply return true
+  if (TEST_MODE) {
+    return true
+  }
   const db = new CouchDB(GLOBAL_DB)
   const config = await getSmtpConfiguration(db, groupId)
   return config != null
diff --git a/packages/worker/src/utilities/templates.js b/packages/worker/src/utilities/templates.js
index 5e712eea1..86436a2f2 100644
--- a/packages/worker/src/utilities/templates.js
+++ b/packages/worker/src/utilities/templates.js
@@ -35,7 +35,7 @@ exports.getSettingsTemplateContext = async (purpose, code = null) => {
     case EmailTemplatePurpose.PASSWORD_RECOVERY:
       context[InternalTemplateBindings.RESET_CODE] = code
       context[InternalTemplateBindings.RESET_URL] = checkSlashesInUrl(
-        `${URL}/reset?code=${code}`
+        `${URL}/builder/auth/reset?code=${code}`
       )
       break
     case EmailTemplatePurpose.INVITATION: