diff --git a/src/_components/navigation/_components/MobileUsersProfile.svelte b/src/_components/navigation/_components/MobileUsersProfile.svelte
index 926450a..6e9ebc8 100644
--- a/src/_components/navigation/_components/MobileUsersProfile.svelte
+++ b/src/_components/navigation/_components/MobileUsersProfile.svelte
@@ -107,7 +107,7 @@
 				</a>
 				<a
 					rel="external"
-					href="/sign-up"
+					href="/signup"
 					class="mb-1 ml-1 mt-4 block w-full flex-grow rounded-md bg-that-orange py-2 text-center text-sm font-semibold text-white">
 					Sign Up
 				</a>
diff --git a/src/_components/navigation/_components/UserProfile.svelte b/src/_components/navigation/_components/UserProfile.svelte
index bbd5a1f..e0f8754 100644
--- a/src/_components/navigation/_components/UserProfile.svelte
+++ b/src/_components/navigation/_components/UserProfile.svelte
@@ -134,7 +134,7 @@
 						</a>
 						<a
 							rel="external"
-							href="/sign-up"
+							href="/signup"
 							class="block cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
 							Sign Up
 						</a>
diff --git a/src/routes/(root)/sign-up/+server.js b/src/routes/(root)/sign-up/+server.js
deleted file mode 100644
index 1c1f3c6..0000000
--- a/src/routes/(root)/sign-up/+server.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { redirect, error } from '@sveltejs/kit';
-import * as Sentry from '@sentry/sveltekit';
-
-export async function GET({ fetch, locals }) {
-	let _url = '/';
-	try {
-		const session = await locals.getSession();
-		if (!session?.user) {
-			const tokenCall = await fetch('/auth/csrf');
-			const csrfTokenResponse = await new Response(tokenCall.body).json();
-			const csrfToken = csrfTokenResponse.csrfToken;
-
-			const qparams = new URLSearchParams();
-			qparams.append('screen_hint', 'signup');
-
-			const formData = new URLSearchParams();
-			formData.append('redirect', 'false');
-			formData.append('csrfToken', csrfToken);
-			formData.append('callbackUrl', '/my/profiles');
-
-			const signInRequest = await fetch('/auth/signin/auth0?' + qparams.toString(), {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/x-www-form-urlencoded',
-					'X-Auth-Return-Redirect': '1'
-				},
-				body: formData.toString()
-			});
-
-			const signInResponse = await new Response(signInRequest.body).json();
-			if (signInResponse?.url) {
-				_url = signInResponse.url;
-			}
-		}
-	} catch (err) {
-		Sentry.setContext('error', { err });
-		throw error(500, 'Authentication Sign-up Error');
-	}
-
-	if (_url) {
-		throw redirect(302, _url);
-	}
-}
diff --git a/src/routes/(root)/signup/+page.server.js b/src/routes/(root)/signup/+page.server.js
new file mode 100644
index 0000000..198eff1
--- /dev/null
+++ b/src/routes/(root)/signup/+page.server.js
@@ -0,0 +1,45 @@
+import { redirect, error } from '@sveltejs/kit';
+import * as Sentry from '@sentry/sveltekit';
+
+export const actions = {
+	default: async ({ locals, fetch }) => {
+		let _url = '/';
+		try {
+			const session = await locals.getSession();
+			if (!session?.user) {
+				const tokenCall = await fetch('/auth/csrf');
+				const csrfTokenResponse = await new Response(tokenCall.body).json();
+				const csrfToken = csrfTokenResponse.csrfToken;
+
+				const qparams = new URLSearchParams();
+				qparams.append('screen_hint', 'signup');
+
+				const formData = new URLSearchParams();
+				formData.append('redirect', 'false');
+				formData.append('csrfToken', csrfToken);
+				formData.append('callbackUrl', '/my/profiles');
+
+				const signInRequest = await fetch('/auth/signin/auth0?' + qparams.toString(), {
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/x-www-form-urlencoded',
+						'X-Auth-Return-Redirect': '1'
+					},
+					body: formData.toString()
+				});
+
+				const signInResponse = await new Response(signInRequest.body).json();
+				if (signInResponse?.url) {
+					_url = signInResponse.url;
+				}
+			}
+		} catch (err) {
+			Sentry.setContext('error', { err });
+			throw error(500, 'Authentication Sign-up Error');
+		}
+
+		if (_url) {
+			throw redirect(302, _url);
+		}
+	}
+};
diff --git a/src/routes/(root)/signup/+page.svelte b/src/routes/(root)/signup/+page.svelte
index 18c770a..24b2ead 100644
--- a/src/routes/(root)/signup/+page.svelte
+++ b/src/routes/(root)/signup/+page.svelte
@@ -5,6 +5,7 @@
 	import Seo from '$components/Seo.svelte';
 	import { Standard as StandardLink } from '$elements/links';
 	import Newsletter from '$components/newsletter/Short.svelte';
+	import { ChevronsRight } from 'lucide-svelte';
 
 	import WelcomeQuote from '../support/_components/_WelcomeQuote.svelte';
 
@@ -40,24 +41,27 @@
 					<ol class="overflow-hidden">
 						<li class="relative pb-10" in:fade={{ delay: 100, duration: 500 }}>
 							<div class="absolute left-12 top-4 ml-0.5 mt-0.5 h-full w-1 bg-thatOrange-500" />
-
-							<!-- Complete Step -->
-							<!-- todo how do we redirect after login? -->
-							<a rel="external" href="/sign-up" class="group relative flex items-center p-3">
-								<span class="flex h-20 items-center">
-									<span
-										class="relative z-10 flex h-20 w-20 items-center justify-center rounded-full bg-white p-3 ring-4 ring-thatOrange-500 group-hover:bg-thatOrange-500 group-hover:text-white">
-										<span class="text-5xl font-extrabold">1</span>
-									</span>
-								</span>
-								<span class="ml-4 flex min-w-0 flex-col items-start">
-									<span class="text-xl font-semibold uppercase tracking-wide"
-										>Create Your Login</span>
-									<span class="text-lg text-gray-500">
-										You will need an account to create or join any activities.
-									</span>
-								</span>
-							</a>
+							<form method="POST">
+								<button type="submit" class="group relative flex p-3">
+									<div class="flex h-20">
+										<span
+											class="relative z-10 flex h-20 w-20 items-center justify-center rounded-full bg-white p-3 ring-4 ring-thatOrange-500 group-hover:bg-thatOrange-500 group-hover:text-white">
+											<span class="text-5xl font-extrabold">1</span>
+										</span>
+									</div>
+									<div class="ml-4 min-w-0">
+										<p class="text-left text-xl font-semibold uppercase tracking-wide">
+											Create Your Login
+										</p>
+										<p class="flex text-left text-lg text-gray-500">
+											You will need an account to create or join any activities.
+										</p>
+									</div>
+									<div class="flex h-20 flex-col justify-center text-thatOrange-500">
+										<ChevronsRight />
+									</div>
+								</button>
+							</form>
 						</li>
 						<li class="relative pb-10" in:fade={{ delay: 300, duration: 500 }}>
 							<div class="absolute left-12 top-4 ml-0.5 mt-0.5 h-full w-1 bg-thatOrange-500" />
@@ -76,6 +80,9 @@
 										Tell everyone a bit about who you are and where to find you on the internet.
 									</span>
 								</span>
+								<div class="flex h-20 flex-col justify-center text-thatOrange-500">
+									<ChevronsRight />
+								</div>
 							</a>
 						</li>
 						<li class="relative pb-10" in:fade={{ delay: 500, duration: 500 }}>
@@ -92,6 +99,9 @@
 										We've put together a few words on how to get started with THAT.
 									</span>
 								</span>
+								<div class="flex h-20 flex-col justify-center text-thatOrange-500">
+									<ChevronsRight />
+								</div>
 							</a>
 						</li>
 					</ol>