diff --git a/web/components/buttons/sign-up-button.tsx b/web/components/buttons/sign-up-button.tsx
index 67eee9e3..b8ed7fcc 100644
--- a/web/components/buttons/sign-up-button.tsx
+++ b/web/components/buttons/sign-up-button.tsx
@@ -1,12 +1,15 @@
 import clsx from 'clsx'
 
-import { firebaseLogin } from 'web/lib/firebase/users'
-import { Button } from './button'
-import { Col } from '../layout/col'
-import { Row } from 'web/components/layout/row'
+import {firebaseLogin} from 'web/lib/firebase/users'
+import {Button} from './button'
+import {Col} from '../layout/col'
+import {Row} from 'web/components/layout/row'
+
+import {ButtonHTMLAttributes} from "react"
+import {FcGoogle} from "react-icons/fc"
 
 export const SidebarSignUpButton = (props: { className?: string }) => {
-  const { className } = props
+  const {className} = props
 
   return (
     <Col className={clsx('mt-4', className)}>
@@ -43,3 +46,29 @@ export const GoogleSignInButton = (props: { onClick: () => any }) => {
     </Button>
   )
 }
+
+type GoogleButtonProps = {
+  onClick: () => void
+  isLoading?: boolean
+} & ButtonHTMLAttributes<HTMLButtonElement>
+
+export function GoogleButton({onClick, isLoading = false, ...props}: GoogleButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={isLoading}
+      className={clsx(
+        "w-full flex items-center justify-center gap-2 py-2 px-4 border border-gray-300",
+        "rounded-full shadow-sm text-sm font-medium",
+        "hover:bg-canvas-25 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+        "disabled:opacity-70 disabled:cursor-not-allowed"
+      )}
+      {...props}
+    >
+      <FcGoogle className="w-5 h-5"/>
+      {isLoading ? "Loading..." : "Google"}
+    </button>
+  )
+}
+
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index 8d90e9d4..55afc42b 100644
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -9,7 +9,7 @@ export default function Document() {
         <link rel="icon" href={ENV_CONFIG.faviconPath} />
         <Script src="/init-theme.js" strategy="beforeInteractive" />
       </Head>
-      <body className="bg-canvas-0 text-ink-1000">
+      <body className="body-bg text-ink-1000">
         <Main />
         <NextScript />
       </body>
diff --git a/web/pages/register.tsx b/web/pages/register.tsx
index be511d01..c6669bf3 100644
--- a/web/pages/register.tsx
+++ b/web/pages/register.tsx
@@ -14,6 +14,7 @@ import {getLoverRow} from "common/love/lover";
 import {db} from "web/lib/supabase/db";
 import Router from "next/router";
 import {useUser} from "web/hooks/use-user";
+import {GoogleButton} from "web/components/buttons/sign-up-button";
 
 
 export default function RegisterPage() {
@@ -109,8 +110,8 @@ function RegisterComponent() {
 
   return (
     <LovePage trackPageView={'register'}>
-      <div className="flex items-center justify-center min-h-screen px-4 sm:px-6 lg:px-8">
-        <div className="max-w-md w-full">
+      <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-md w-full space-y-8">
           {registrationSuccess ? (
             <div className="text-center">
               <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
@@ -164,7 +165,7 @@ function RegisterComponent() {
                 <div className="flex justify-center mb-6">
                   <FavIcon className="dark:invert"/>
                 </div>
-                <h2 className="text-center text-3xl font-extrabold ">
+                <h2 className="mt-6 text-center text-3xl font-extrabold ">
                   Get Started
                 </h2>
               </div>
@@ -215,7 +216,7 @@ function RegisterComponent() {
                   <div className="text-red-500 text-sm text-center">{error}</div>
                 )}
 
-                <div className="space-y-2">
+                <div className="space-y-4">
                   <button
                     type="submit"
                     disabled={isLoading}
@@ -229,22 +230,14 @@ function RegisterComponent() {
                       <div className="w-full border-t border-gray-300"></div>
                     </div>
                     <div className="relative flex justify-center text-sm">
-                      <span className="px-2 bg-canvas-50 text-gray-500">Or sign up with</span>
+                      <span className="px-2 body-bg text-gray-500">Or sign up with</span>
                     </div>
                   </div>
-
-                  <button
-                    type="button"
-                    onClick={signupThenMaybeRedirectToSignup}
-                    disabled={isLoading}
-                    className="w-full flex items-center justify-center gap-2 py-2 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium hover: focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-70 disabled:cursor-not-allowed"
-                  >
-                    <FcGoogle className="w-5 h-5"/>
-                    Google
-                  </button>
+                  <GoogleButton onClick={signupThenMaybeRedirectToSignup} isLoading={isLoading} />
                 </div>
               </form>
-              <div className="text-center text-sm mt-2 customlink">
+              <div className="my-8" />
+              <div className="text-center customlink">
                 <p className="">
                   Already have an account?{' '}
                   <Link href="/signin">
diff --git a/web/pages/signin.tsx b/web/pages/signin.tsx
index f4f851e0..f44a2567 100644
--- a/web/pages/signin.tsx
+++ b/web/pages/signin.tsx
@@ -3,7 +3,6 @@
 import {useSearchParams} from "next/navigation";
 import {Suspense, useEffect, useState} from "react";
 import Link from "next/link";
-import {FcGoogle} from "react-icons/fc";
 import {auth, firebaseLogin} from "web/lib/firebase/users";
 import FavIcon from "web/public/FavIcon";
 
@@ -13,6 +12,7 @@ import {db} from "web/lib/supabase/db";
 import Router from "next/router";
 import {LovePage} from "web/components/love-page";
 import {useUser} from "web/hooks/use-user";
+import {GoogleButton} from "web/components/buttons/sign-up-button";
 
 export default function LoginPage() {
   return (
@@ -171,25 +171,19 @@ function RegisterComponent() {
                   <div className="w-full border-t border-gray-300"></div>
                 </div>
                 <div className="relative flex justify-center text-sm">
-                  <span className="px-2 bg-canvas-50 text-gray-500">Or continue with</span>
+                  <span className="px-2 body-bg text-gray-500">Or continue with</span>
                 </div>
               </div>
-
-              <button
-                type="button"
-                onClick={handleGoogleSignIn}
-                disabled={isLoading}
-                className="w-full flex items-center justify-center gap-2 py-2 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium  hover: focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-70 disabled:cursor-not-allowed"
-              >
-                <FcGoogle className="w-5 h-5"/>
-                Google
-              </button>
+              <GoogleButton onClick={handleGoogleSignIn} isLoading={isLoading}/>
             </div>
           </form>
           <div className="text-center customlink">
-            <Link href="/register">
-              No account? Register.
-            </Link>
+            <p className="">
+              No account?{' '}
+              <Link href="/register">
+                Register
+              </Link>
+            </p>
           </div>
         </div>
       </div>
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 88a5ef17..d6825673 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -294,4 +294,8 @@ ul {
 
 .sidebar-nav {
     font-family: "Inter", sans-serif; /* clean and legible */
+}
+
+.body-bg {
+    background-color: rgb(var(--color-canvas-0));
 }
\ No newline at end of file
