diff --git a/html/template/sync/signup.html b/html/template/sync/signup.html
index 8e71e36d..25665d3f 100644
--- a/html/template/sync/signup.html
+++ b/html/template/sync/signup.html
@@ -41,7 +41,7 @@
 						<p class="text-muted">Join us today to get started</p>
 					</div>
 
-					<form method="POST" action="/signup">
+					<form method="POST" action="/api/signup">
 						<div class="mb-3">
 							<label for="name" class="form-label">Display Name</label>
 							<input type="text" class="form-control" name="name" required />
diff --git a/ts/AppSync.vue b/ts/AppSync.vue
index 6d0dee43..a8579379 100644
--- a/ts/AppSync.vue
+++ b/ts/AppSync.vue
@@ -2,22 +2,4 @@
 	<router-view />
 </template>
 
-<script setup lang="ts">
-import { onMounted } from "vue";
-import { useSessionStore } from "@/store/session";
-import { Session } from "@/type/api";
-import { router } from "@/router";
-
-const session = useSessionStore();
-onMounted(() => {
-	session
-		.get()
-		.then((session: Session) => {
-			console.log("session loaded by AppSync", session);
-		})
-		.catch((e) => {
-			console.log("root session not loaded", e);
-			router.push("/signin");
-		});
-});
-</script>
+<script setup lang="ts"></script>
diff --git a/ts/router.ts b/ts/router.ts
index 6933f818..191d42a7 100644
--- a/ts/router.ts
+++ b/ts/router.ts
@@ -30,6 +30,7 @@ import ReviewRoot from "@/view/review/Root.vue";
 import ReviewSite from "@/view/review/Site.vue";
 import Signin from "@/view/Signin.vue";
 import Signout from "@/view/Signout.vue";
+import Signup from "@/view/Signup.vue";
 import Sudo from "@/view/Sudo.vue";
 import { apiClient } from "@/client";
 
@@ -182,6 +183,11 @@ const routes: RouteRecordRaw[] = [
 		name: "Signout",
 		path: "/signout",
 	},
+	{
+		component: Signup,
+		name: "Signup",
+		path: "/signup",
+	},
 	// Catch-all route - must be last
 	{
 		path: "/:pathMatch(.*)*",
@@ -197,7 +203,7 @@ export const router = createRouter({
 
 // Global navigation guard
 router.beforeEach(async (to, from) => {
-	if (to.fullPath == "/signin") {
+	if (to.fullPath == "/signin" || to.fullPath == "/signup") {
 		return;
 	}
 	const storeSession = useSessionStore();
diff --git a/ts/view/Authenticated.vue b/ts/view/Authenticated.vue
index 774fc273..7f3afb3e 100644
--- a/ts/view/Authenticated.vue
+++ b/ts/view/Authenticated.vue
@@ -19,9 +19,24 @@
 	</div>
 </template>
 <script setup lang="ts">
+import { onMounted } from "vue";
+
+import Sidebar from "@/components/layout/Sidebar.vue";
+import MainContent from "@/components/layout/MainContent.vue";
+import { Session } from "@/type/api";
+import { router } from "@/router";
 import { useSessionStore } from "@/store/session";
 
 const session = useSessionStore();
-import Sidebar from "@/components/layout/Sidebar.vue";
-import MainContent from "@/components/layout/MainContent.vue";
+onMounted(() => {
+	session
+		.get()
+		.then((session: Session) => {
+			console.log("session loaded by Authenticated", session);
+		})
+		.catch((e) => {
+			console.log("root session not loaded", router);
+			router.push("/signin");
+		});
+});
 </script>
diff --git a/ts/view/Signup.vue b/ts/view/Signup.vue
new file mode 100644
index 00000000..dd20955f
--- /dev/null
+++ b/ts/view/Signup.vue
@@ -0,0 +1,231 @@
+<style scoped>
+.register-container {
+	max-width: 900px;
+	margin: 0 auto;
+}
+.register-box {
+	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+	border-radius: 10px;
+	overflow: hidden;
+}
+.register-form-section {
+	padding: 40px;
+}
+.register-info-section {
+	padding: 40px;
+	background-color: #f8f9fa;
+}
+.register-header {
+	margin-bottom: 25px;
+}
+.logo-area {
+	text-align: center;
+	margin-bottom: 30px;
+}
+</style>
+<template>
+	<div
+		class="container min-vh-100 d-flex align-items-center justify-content-center py-5"
+	>
+		<div class="register-container">
+			<div class="row register-box g-0">
+				<!-- Left side: Registration Form -->
+				<div class="col-md-6 register-form-section">
+					<div class="register-header">
+						<h2>Create an Account</h2>
+						<p class="text-muted">Join us today to get started</p>
+					</div>
+
+					<!-- Error message display -->
+					<div v-if="errorMessage" class="alert alert-danger" role="alert">
+						{{ errorMessage }}
+					</div>
+
+					<div class="mb-3">
+						<label for="name" class="form-label">Display Name</label>
+						<input
+							type="text"
+							class="form-control"
+							:disalbel="isLoading"
+							name="name"
+							required
+							v-model="formData.name"
+						/>
+					</div>
+
+					<div class="mb-3">
+						<label for="username" class="form-label">Username</label>
+						<input
+							class="form-control"
+							:disabled="isLoading"
+							name="username"
+							required
+							type="username"
+							v-model="formData.username"
+						/>
+					</div>
+
+					<div class="mb-3">
+						<label for="password" class="form-label">Password</label>
+						<input
+							type="password"
+							class="form-control"
+							name="password"
+							required
+							v-model="formData.password"
+						/>
+					</div>
+
+					<div class="mb-3 form-check">
+						<input
+							type="checkbox"
+							class="form-check-input"
+							:disabled="isLoading"
+							name="terms"
+							required
+							v-model="formData.terms"
+						/>
+						<label class="form-check-label" for="terms"
+							>I agree to the <a href="#">Terms of Service</a> and
+							<a href="#">Privacy Policy</a></label
+						>
+					</div>
+
+					<div class="d-grid gap-2">
+						<ButtonLoading
+							@click="handleRegister()"
+							text="Register"
+							variant="primary"
+							:loading="isLoading"
+							:disabled="
+								!(formData.name && formData.username && formData.password)
+							"
+						/>
+					</div>
+
+					<div class="mt-3 text-center">
+						<p>
+							Already have an account?
+							<RouterLink to="/signin">Sign in</RouterLink>
+						</p>
+					</div>
+				</div>
+
+				<!-- Right side: Account Information -->
+				<div class="col-md-6 register-info-section">
+					<div>
+						<div class="logo-area">
+							<img src="/static/img/nidus-logo-256-transparent.png" />
+						</div>
+
+						<div class="mb-4">
+							<h5>Who should register?</h5>
+							<p>
+								This platform is designed for professionals who need to manage
+								projects and collaborate with team members. Whether you're a
+								freelancer, small business owner, or part of a larger
+								organization, our tools can help streamline your workflow.
+							</p>
+						</div>
+
+						<div class="mb-4">
+							<h5>What happens after registration?</h5>
+							<p>
+								After you register with your email, you'll receive a
+								confirmation message with instructions to complete your account
+								setup. You'll then have access to all features and can customize
+								your workspace based on your specific needs.
+							</p>
+						</div>
+
+						<div class="mb-3">
+							<small class="text-muted"
+								>For any questions about account types or registration, please
+								contact our support team at support@yourproduct.com</small
+							>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+import ButtonLoading from "@/components/common/ButtonLoading.vue";
+const router = useRouter();
+
+// Form data
+const formData = ref({
+	name: "",
+	username: "",
+	password: "",
+	terms: false,
+});
+
+// UI state
+const isLoading = ref(false);
+const errorMessage = ref("");
+
+// Handle form submission
+const handleRegister = async () => {
+	console.log("registering", formData.value.terms);
+	// Clear previous errors
+	errorMessage.value = "";
+
+	// Client-side validation
+	if (
+		!formData.value.name ||
+		!formData.value.username ||
+		!formData.value.password
+	) {
+		errorMessage.value = "Please fill in all required fields";
+		return;
+	}
+
+	if (!formData.value.terms) {
+		errorMessage.value =
+			"You must agree to the Terms of Service and Privacy Policy";
+		return;
+	}
+
+	isLoading.value = true;
+
+	try {
+		const response = await fetch("/api/signup", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({
+				username: formData.value.username,
+				name: formData.value.name,
+				password: formData.value.password,
+				terms: formData.value.terms,
+			}),
+		});
+
+		if (!response.ok) {
+			const errorData = await response
+				.json()
+				.catch(() => ({ error: "Registration failed" }));
+			throw new Error(
+				errorData.error || `HTTP error! status: ${response.status}`,
+			);
+		}
+
+		// Redirect to the path returned by the backend (default: "/")
+		router.push("/_/dash");
+	} catch (error) {
+		console.error("Registration error:", error);
+		errorMessage.value =
+			error instanceof Error
+				? error.message
+				: "An unexpected error occurred during registration";
+	} finally {
+		isLoading.value = false;
+	}
+};
+</script>