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 0000000000..98128ebd94
--- /dev/null
+++ b/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
@@ -0,0 +1,39 @@
+<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>
\ No newline at end of file
diff --git a/packages/builder/src/pages/builder/invite/index.svelte b/packages/builder/src/pages/builder/invite/index.svelte
index 85316dc008..c6a0f3fa04 100644
--- a/packages/builder/src/pages/builder/invite/index.svelte
+++ b/packages/builder/src/pages/builder/invite/index.svelte
@@ -3,27 +3,19 @@
     Layout,
     Heading,
     Body,
-    Input,
     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,31 +32,14 @@
     <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}
+        disabled={error}
         cta
         on:click={acceptInvite}>Accept invite</Button
       >
@@ -87,9 +62,6 @@
     justify-content: flex-start;
     align-items: stretch;
   }
-  .center {
-    text-align: center;
-  }
   img {
     width: 40px;
     margin: 0 auto;
