diff --git a/packages/builder/src/components/login/GoogleButton.svelte b/packages/builder/src/components/login/GoogleButton.svelte
index ef2c5ce81..67aca57df 100644
--- a/packages/builder/src/components/login/GoogleButton.svelte
+++ b/packages/builder/src/components/login/GoogleButton.svelte
@@ -1,25 +1,17 @@
 <script>
-  import { Link } from "@budibase/bbui"
+  import { ActionButton } from "@budibase/bbui"
   import GoogleLogo from "/assets/google-logo.png"
+  import { goto } from "@roxi/routify"
 </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>
+<ActionButton on:click={() => goto("/api/admin/auth/google")}>
+  <div class="inner">
+    <img src={GoogleLogo} alt="google icon" />
+    <div>Sign in with Google</div>
+  </div>
+</ActionButton>
 
 <style>
-  .outer {
-    border: 1px solid #494949;
-    border-radius: 4px;
-    width: 100%;
-    background-color: var(--background-alt);
-  }
-
   .inner {
     display: flex;
     flex-direction: row;
@@ -33,15 +25,4 @@
     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 f13988dba..1e6e83111 100644
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@@ -1,5 +1,5 @@
 <script>
-  import {goto} from "@roxi/routify"
+  import { goto } from "@roxi/routify"
   import {
     notifications,
     Input,
@@ -11,7 +11,7 @@
     Heading,
   } from "@budibase/bbui"
   import GoogleButton from "./GoogleButton.svelte"
-  import {auth} from "stores/backend"
+  import { auth } from "stores/backend"
 
   let username = ""
   let password = ""
@@ -37,22 +37,22 @@
 
 <div class="login">
   <div class="main">
-    <Layout noPadding>
+    <Layout>
       <Layout noPadding justifyItems="center">
         <img src="https://i.imgur.com/ZKyklgF.png" />
         <Heading>Sign in to Budibase</Heading>
       </Layout>
-      <div class="sso">
-        <GoogleButton />
-      </div>
+      <GoogleButton />
       <Divider noGrid />
       <Layout gap="XS" noPadding>
         <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>
-      <Button cta on:click={login}>Sign in to Budibase</Button>
-      <ActionButton quiet on:click={forgot}>Forgot Password?</ActionButton>
+      <Layout gap="S" noPadding>
+        <Button cta on:click={login}>Sign in to Budibase</Button>
+        <ActionButton quiet on:click={forgot}>Forgot password?</ActionButton>
+      </Layout>
     </Layout>
   </div>
 </div>
@@ -71,22 +71,7 @@
     width: 260px;
   }
 
-  .center {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
   img {
     width: 48px;
   }
-
-  .sso {
-    width: 100%;
-  }
-
-  .login-buttons :global(>*) {
-    width: 100%;
-  }
 </style>
