diff --git a/backend/apps/authentications/api/serializers.py b/backend/apps/authentications/api/serializers.py
index 40c5867..d4080de 100644
--- a/backend/apps/authentications/api/serializers.py
+++ b/backend/apps/authentications/api/serializers.py
@@ -117,4 +117,4 @@ def validate(self, attrs):
             raise serializers.ValidationError(
                 {"confirm_password": "Passwords do not match."}
             )
-        return attrs
+        return attrs
\ No newline at end of file
diff --git a/backend/apps/authentications/api/views.py b/backend/apps/authentications/api/views.py
index 4923907..5bc029d 100644
--- a/backend/apps/authentications/api/views.py
+++ b/backend/apps/authentications/api/views.py
@@ -168,4 +168,4 @@ def post(self, request):
         return Response(
             APIResponse.get_response(message="User created successfully.", data=data),
             status=status.HTTP_201_CREATED,
-        )
+        )
\ No newline at end of file
diff --git a/backend/core/views.py b/backend/core/views.py
index 14a0985..1e4e945 100644
--- a/backend/core/views.py
+++ b/backend/core/views.py
@@ -6,6 +6,7 @@
 class HealthCheckAPI(APIView):
     permission_classes = (AllowAny,)
 
+    
     def get(self, request):
         status = {"status": "OK"}
         return Response(status)
diff --git a/frontend/.env.example b/frontend/.env.example
new file mode 100644
index 0000000..5934e2e
--- /dev/null
+++ b/frontend/.env.example
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8000
diff --git a/frontend/app/components/HealthCheck.tsx b/frontend/app/components/HealthCheck.tsx
new file mode 100644
index 0000000..1d28f6a
--- /dev/null
+++ b/frontend/app/components/HealthCheck.tsx
@@ -0,0 +1,40 @@
+/**
+ * HealthCheck — presentational component that displays backend health status.
+ *
+ * Receives data as props from the route's clientLoader.
+ * No useEffect, no useState, no fetch — just renders what it's given.
+ */
+
+import { CenteredPageLayout } from "~/components/layout/CenteredPageLayout";
+
+const statusStyles: Record<string, string> = {
+  ok: "text-green-600 dark:text-green-400",
+  error: "text-red-600 dark:text-red-400",
+};
+
+interface HealthCheckProps {
+  ok: boolean;
+  detail: string;
+}
+
+export function HealthCheck({ ok, detail }: HealthCheckProps) {
+  const status = ok ? "ok" : "error";
+
+  return (
+    <CenteredPageLayout maxWidth="max-w-md">
+      <h1 className="mb-4 text-center text-lg font-semibold text-gray-900 dark:text-gray-100">
+        Backend health check
+      </h1>
+
+      <p className={`mb-4 text-center text-sm font-medium ${statusStyles[status]}`}>
+        {ok ? "✅ Backend is healthy" : "❌ Backend unreachable"}
+      </p>
+
+      {detail && (
+        <pre className="overflow-x-auto rounded-lg border border-gray-200 bg-gray-50 p-3 text-left text-xs text-gray-600 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-400">
+          {detail}
+        </pre>
+      )}
+    </CenteredPageLayout>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/components/LoginForm.tsx b/frontend/app/components/LoginForm.tsx
new file mode 100644
index 0000000..450e431
--- /dev/null
+++ b/frontend/app/components/LoginForm.tsx
@@ -0,0 +1,64 @@
+/**
+ * LoginForm — presentational component for the login page.
+ *
+ * All mutation logic lives in the route's clientAction.
+ * This component just renders the form UI and displays errors.
+ */
+
+import { Form, Link } from "react-router";
+import { CenteredPageLayout } from "~/components/layout/CenteredPageLayout";
+import { TextField } from "~/components/ui/TextField";
+
+interface LoginFormProps {
+  error?: string;
+  isSubmitting: boolean;
+}
+
+export function LoginForm({ error, isSubmitting }: LoginFormProps) {
+  return (
+    <CenteredPageLayout>
+      <h1 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">
+        Log in
+      </h1>
+
+      <Form method="post" className="space-y-4">
+        <TextField
+          label="Email"
+          name="email"
+          type="email"
+          required
+          autoComplete="email"
+        />
+        <TextField
+          label="Password"
+          name="password"
+          type="password"
+          required
+          autoComplete="current-password"
+        />
+
+        {error && (
+          <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+        )}
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300"
+        >
+          {isSubmitting ? "Logging in…" : "Log in"}
+        </button>
+      </Form>
+
+      <p className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
+        Don&apos;t have an account?{" "}
+        <Link
+          to="/signup"
+          className="font-semibold text-gray-900 hover:underline dark:text-gray-100"
+        >
+          Sign up
+        </Link>
+      </p>
+    </CenteredPageLayout>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/components/SignupForm.tsx b/frontend/app/components/SignupForm.tsx
new file mode 100644
index 0000000..986bff3
--- /dev/null
+++ b/frontend/app/components/SignupForm.tsx
@@ -0,0 +1,71 @@
+/**
+ * SignupForm — presentational component for the signup page.
+ *
+ * All mutation logic lives in the route's clientAction.
+ * This component just renders the form UI and displays errors.
+ */
+
+import { Form, Link } from "react-router";
+import { CenteredPageLayout } from "~/components/layout/CenteredPageLayout";
+import { TextField } from "~/components/ui/TextField";
+
+interface SignupFormProps {
+  error?: string;
+  isSubmitting: boolean;
+}
+
+export function SignupForm({ error, isSubmitting }: SignupFormProps) {
+  return (
+    <CenteredPageLayout>
+      <h1 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">
+        Sign up
+      </h1>
+
+      <Form method="post" className="space-y-4">
+        <TextField
+          label="Email"
+          name="email"
+          type="email"
+          required
+          autoComplete="email"
+        />
+        <TextField
+          label="Password"
+          name="password"
+          type="password"
+          required
+          autoComplete="new-password"
+        />
+        <TextField
+          label="Confirm password"
+          name="confirm_password"
+          type="password"
+          required
+          autoComplete="new-password"
+        />
+
+        {error && (
+          <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+        )}
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300"
+        >
+          {isSubmitting ? "Signing up…" : "Sign up"}
+        </button>
+      </Form>
+
+      <p className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
+        Already have an account?{" "}
+        <Link
+          to="/login"
+          className="font-semibold text-gray-900 hover:underline dark:text-gray-100"
+        >
+          Log in
+        </Link>
+      </p>
+    </CenteredPageLayout>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/components/layout/CenteredPageLayout.tsx b/frontend/app/components/layout/CenteredPageLayout.tsx
new file mode 100644
index 0000000..aa0cf1f
--- /dev/null
+++ b/frontend/app/components/layout/CenteredPageLayout.tsx
@@ -0,0 +1,26 @@
+/**
+ * Shared page layout — centered card on a full-height background.
+ *
+ * Used by login, signup, health, and any future standalone pages.
+ */
+
+interface CenteredPageLayoutProps {
+  children: React.ReactNode;
+  /** Tailwind max-width class, defaults to "max-w-sm" */
+  maxWidth?: string;
+}
+
+export function CenteredPageLayout({
+  children,
+  maxWidth = "max-w-sm",
+}: CenteredPageLayoutProps) {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center bg-white px-4 dark:bg-gray-950">
+      <div
+        className={`w-full ${maxWidth} rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-800 dark:bg-gray-900`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/components/ui/TextField.tsx b/frontend/app/components/ui/TextField.tsx
new file mode 100644
index 0000000..b9777be
--- /dev/null
+++ b/frontend/app/components/ui/TextField.tsx
@@ -0,0 +1,54 @@
+/**
+ * Reusable text input with proper accessibility.
+ *
+ * - Renders <label htmlFor> + <input id name> for a11y
+ * - Uses name + defaultValue (uncontrolled) so React Router <Form> can read via formData
+ * - Supports an optional error message
+ */
+
+interface TextFieldProps {
+  label: string;
+  name: string;
+  id?: string;
+  type?: React.HTMLInputTypeAttribute;
+  required?: boolean;
+  defaultValue?: string;
+  error?: string;
+  autoComplete?: string;
+}
+
+export function TextField({
+  label,
+  name,
+  id,
+  type = "text",
+  required = false,
+  defaultValue,
+  error,
+  autoComplete,
+}: TextFieldProps) {
+  const fieldId = id ?? name;
+
+  return (
+    <div>
+      <label
+        htmlFor={fieldId}
+        className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300"
+      >
+        {label}
+      </label>
+      <input
+        id={fieldId}
+        name={name}
+        type={type}
+        required={required}
+        defaultValue={defaultValue}
+        autoComplete={autoComplete}
+        className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus:border-gray-100 dark:focus:ring-gray-100"
+      />
+      {error && (
+        <p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/lib/api.ts b/frontend/app/lib/api.ts
new file mode 100644
index 0000000..51db850
--- /dev/null
+++ b/frontend/app/lib/api.ts
@@ -0,0 +1,68 @@
+/**
+ * Shared HTTP client — the only module that calls fetch().
+ *
+ * Every backend response follows the envelope:
+ *   { message, code, data, error }
+ *
+ * apiFetch() unwraps that envelope:
+ *   - On success → returns envelope.data (typed as T)
+ *   - On failure → throws an Error with the backend's message or first error string
+ */
+
+import { API_URL } from "./config";
+import { getAccessToken, refreshAccessToken } from "./auth";
+import type { ApiEnvelope } from "./types";
+
+export interface ApiFetchOptions {
+  method?: string;
+  body?: unknown;
+  /** Attach Authorization: Bearer header when true */
+  auth?: boolean;
+}
+
+export class ApiError extends Error {
+  status: number;
+  errors: Record<string, unknown>;
+
+  constructor(message: string, status: number, errors: Record<string, unknown> = {}) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+    this.errors = errors;
+  }
+}
+
+export async function apiFetch<T = Record<string, unknown>>(
+  path: string,
+  options: ApiFetchOptions = {}
+): Promise<T> {
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+
+  if (options.auth) {
+    let token = getAccessToken();
+    if (!token){
+      token = await refreshAccessToken();
+    }
+    if (token) headers["Authorization"] = `Bearer ${token}`;
+  }
+
+  const res = await fetch(`${API_URL}${path}`, {
+    method: options.method ?? "GET",
+    headers,
+    credentials: "include",
+    body: options.body ? JSON.stringify(options.body) : undefined,
+  });
+
+  const json: ApiEnvelope<T> | null = await res.json().catch(() => null);
+
+  if (!res.ok) {
+    const message =
+      json?.message || `Request failed (${res.status})`;
+    throw new ApiError(message, res.status, json?.error ?? {});
+  }
+
+  // Unwrap the envelope — callers get data directly
+  return json!.data;
+}
\ No newline at end of file
diff --git a/frontend/app/lib/auth.ts b/frontend/app/lib/auth.ts
new file mode 100644
index 0000000..25e7202
--- /dev/null
+++ b/frontend/app/lib/auth.ts
@@ -0,0 +1,102 @@
+/**
+ * Auth service — handles login, signup, and token management.
+ *
+ * Pattern:
+ * - Access token: Saved in-memory (JS variable). Safest route to prevent XSS sniffing.
+ * - Refresh token: Saved in Cookie by using js-cookie. JS has access to it.
+ */
+import Cookies from "js-cookie";
+import { apiFetch } from "./api";
+import type { AuthData, AuthTokens } from "./types";
+
+// ─── Token storage (In-memory) ───────────────────────────────────
+
+let memoryAccessToken: string | null = null;
+
+export function getAccessToken(): string | null {
+  return memoryAccessToken;
+}
+
+export function getRefreshToken(): string | null {
+  const memoryRefreshToken = Cookies.get("memoryRefreshToken");
+  if (memoryRefreshToken){
+    return memoryRefreshToken;
+  }
+  return null;
+}
+
+export function storeTokens(tokens: AuthTokens): void {
+  memoryAccessToken = tokens.access;
+  Cookies.set("memoryRefreshToken", tokens.refresh, {
+    expires: 7,
+    secure: true,
+    sameSite: "strict",
+  });
+}
+
+export function clearTokens(): void {
+  memoryAccessToken = null;
+  Cookies.remove("memoryRefreshToken");
+}
+
+// ─── Auth operations ─────────────────────────────────────────────
+
+/**
+ * Log in with email + password.
+ * Backend will automatically set an HttpOnly cookie for refresh token.
+ */
+export async function login(email: string, password: string): Promise<AuthTokens> {
+  const data = await apiFetch<AuthData>("/auth/token/", {
+    method: "POST",
+    body: { email, password },
+  });
+  return data.token;
+}
+
+/**
+ * Create a new account.
+ * Backend will automatically set an HttpOnly cookie for refresh token.
+ */
+export async function signup(
+  email: string,
+  password: string,
+  confirmPassword: string
+): Promise<AuthTokens> {
+  const data = await apiFetch<AuthData>("/auth/signup/", {
+    method: "POST",
+    body: { email, password, confirm_password: confirmPassword },
+  });
+  return data.token;
+}
+
+
+/**
+ * Attempts to get a fresh access token using the stored refresh token.
+ * Used after a page reload wipes the in-memory access token.
+ */
+
+export async function refreshAccessToken(): Promise<string | null> {
+  const memoryRefreshToken  = getRefreshToken();
+  if (!memoryRefreshToken ) return null;
+  try {
+    const data = await apiFetch<AuthData>("/auth/token/refresh/", {
+      method: "POST",
+      body: { refresh: memoryRefreshToken },
+    });
+    memoryAccessToken = data.token.access;
+    return memoryAccessToken;
+  } catch {
+    clearTokens();
+    return null;
+  }
+}
+
+/**
+ * Returns a valid access token, trying memory first then refresh token.
+ * Used by route loaders to check auth status.
+ */
+export async function getValidAccessToken(): Promise<string | null> {
+  const token = getAccessToken();
+  if (token) return token;
+  return await refreshAccessToken();
+}
\ No newline at end of file
diff --git a/frontend/app/lib/config.ts b/frontend/app/lib/config.ts
new file mode 100644
index 0000000..3e0245c
--- /dev/null
+++ b/frontend/app/lib/config.ts
@@ -0,0 +1,13 @@
+/**
+ * Centralised configuration — the only file that reads import.meta.env.
+ * Every other module imports typed constants from here.
+ */
+
+const raw = import.meta.env.VITE_API_URL;
+if (!raw) {
+  throw new Error(
+    "VITE_API_URL is not set. Copy .env.example → .env.local and fill it in."
+  );
+}
+
+export const API_URL: string = raw;
\ No newline at end of file
diff --git a/frontend/app/lib/health.ts b/frontend/app/lib/health.ts
new file mode 100644
index 0000000..d8022b1
--- /dev/null
+++ b/frontend/app/lib/health.ts
@@ -0,0 +1,22 @@
+/**
+ * Health service — checks backend availability.
+ *
+ * Note: The /healthcheck/ endpoint returns plain text, not the standard
+ * API envelope, so we use raw fetch here instead of apiFetch.
+ */
+
+import { API_URL } from "./config";
+import type { HealthResult } from "./types";
+
+export async function checkBackendHealth(): Promise<HealthResult> {
+  try {
+    const res = await fetch(`${API_URL}/healthcheck/`);
+    const text = await res.text();
+    return { ok: res.ok, detail: text };
+  } catch (err) {
+    return {
+      ok: false,
+      detail: err instanceof Error ? err.message : "Unknown error",
+    };
+  }
+}
diff --git a/frontend/app/lib/types.ts b/frontend/app/lib/types.ts
new file mode 100644
index 0000000..0da2564
--- /dev/null
+++ b/frontend/app/lib/types.ts
@@ -0,0 +1,42 @@
+/**
+ * Shared TypeScript types matching the backend's APIResponse envelope.
+ *
+ * The backend always returns:
+ *   { message: string, code: number, data: T, error: Record<string, unknown> }
+ */
+
+// ---------- API envelope ----------
+
+export interface ApiEnvelope<T = Record<string, unknown>> {
+  message: string;
+  code: number;
+  data: T;
+  error: Record<string, unknown>;
+}
+
+// ---------- Auth ----------
+
+export interface AuthTokens {
+  access: string;
+  refresh: string
+}
+
+export interface UserInfo {
+  id: number;
+  name: string;
+  email: string;
+  is_staff: boolean;
+}
+
+/** Shape returned by both POST /auth/token/ and POST /auth/signup/ */
+export interface AuthData {
+  user: UserInfo;
+  token: AuthTokens;
+}
+
+// ---------- Health ----------
+
+export interface HealthResult {
+  ok: boolean;
+  detail: string;
+}
diff --git a/frontend/app/routes.ts b/frontend/app/routes.ts
index 102b402..f66e06e 100644
--- a/frontend/app/routes.ts
+++ b/frontend/app/routes.ts
@@ -1,3 +1,11 @@
-import { type RouteConfig, index } from "@react-router/dev/routes";
+import { type RouteConfig, layout, index, route } from "@react-router/dev/routes";
 
-export default [index("routes/home.tsx")] satisfies RouteConfig;
+export default [
+  index("routes/home.tsx"),
+  route("login", "routes/login.tsx"),
+  route("signup", "routes/signup.tsx"),
+  layout("routes/protected-layout.tsx", [
+    route("auth", "routes/authenticated.tsx"),
+  ]),
+  route("health", "routes/health.tsx"),
+] satisfies RouteConfig;
diff --git a/frontend/app/routes/authenticated.tsx b/frontend/app/routes/authenticated.tsx
new file mode 100644
index 0000000..9ee9b79
--- /dev/null
+++ b/frontend/app/routes/authenticated.tsx
@@ -0,0 +1,14 @@
+// Temporary cuthentication checking tab
+
+import type { Route } from "./+types/authenticated";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Authenticated" },
+    { name: "description", content: "User is authenticated" },
+  ];
+}
+
+export default function AuthenticatedRoute() {
+  return <p>You are authenticated.</p>;
+}
\ No newline at end of file
diff --git a/frontend/app/routes/health.tsx b/frontend/app/routes/health.tsx
new file mode 100644
index 0000000..253a47d
--- /dev/null
+++ b/frontend/app/routes/health.tsx
@@ -0,0 +1,31 @@
+/**
+ * /health route module
+ *
+ * - clientLoader: fetches health status before render (no loading flash)
+ * - meta: sets browser tab title
+ * - default export: renders HealthCheck with loader data
+ *
+ * Uses clientLoader because the health check runs from the user's browser.
+ */
+
+import { useLoaderData } from "react-router";
+import { checkBackendHealth } from "~/lib/health";
+import { HealthCheck } from "~/components/HealthCheck";
+import type { Route } from "./+types/health";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Health Check" },
+    { name: "description", content: "Backend health status" },
+  ];
+}
+
+export async function clientLoader({}: Route.ClientLoaderArgs) {
+  return await checkBackendHealth();
+}
+
+export default function HealthRoute() {
+  const data = useLoaderData<typeof clientLoader>();
+
+  return <HealthCheck ok={data.ok} detail={data.detail} />;
+}
diff --git a/frontend/app/routes/home.tsx b/frontend/app/routes/home.tsx
index 398e47c..cafa18e 100644
--- a/frontend/app/routes/home.tsx
+++ b/frontend/app/routes/home.tsx
@@ -10,4 +10,4 @@ export function meta({}: Route.MetaArgs) {
 
 export default function Home() {
   return <Welcome />;
-}
+}
\ No newline at end of file
diff --git a/frontend/app/routes/login.tsx b/frontend/app/routes/login.tsx
new file mode 100644
index 0000000..65bcd09
--- /dev/null
+++ b/frontend/app/routes/login.tsx
@@ -0,0 +1,50 @@
+/**
+ * /login route module
+ *
+ * - clientAction: handles form submission (email + password → auth service → redirect)
+ * - meta: sets browser tab title
+ * - default export: renders LoginForm with any action errors
+ *
+ * Uses clientAction (not server action) because storeTokens uses js-cookie (browser-only).
+ */
+
+import { redirect, useActionData, useNavigation } from "react-router";
+import { login, storeTokens } from "~/lib/auth";
+import { LoginForm } from "~/components/LoginForm";
+import type { Route } from "./+types/login";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Log in" },
+    { name: "description", content: "Log in to your account" },
+  ];
+}
+
+export async function clientAction({ request }: Route.ClientActionArgs) {
+  const formData = await request.formData();
+  const email = formData.get("email") as string;
+  const password = formData.get("password") as string;
+
+  try {
+    const tokens = await login(email, password);
+    storeTokens(tokens);
+    return redirect("/auth");
+  } catch (err) {
+    return {
+      error: err instanceof Error ? err.message : "Something went wrong",
+    };
+  }
+}
+
+export default function LoginRoute() {
+  const actionData = useActionData<typeof clientAction>();
+  const navigation = useNavigation();
+  const isSubmitting = navigation.state === "submitting";
+
+  return (
+    <LoginForm
+      error={actionData && "error" in actionData ? actionData.error : undefined}
+      isSubmitting={isSubmitting}
+    />
+  );
+}
diff --git a/frontend/app/routes/protected-layout.tsx b/frontend/app/routes/protected-layout.tsx
new file mode 100644
index 0000000..965d7f2
--- /dev/null
+++ b/frontend/app/routes/protected-layout.tsx
@@ -0,0 +1,21 @@
+// routes/protected-layout.tsx
+import { Navigate, Outlet } from "react-router";
+import type { LoaderFunctionArgs } from "react-router";
+import { getAccessToken, getValidAccessToken } from "~/lib/auth";
+
+export async function clientLoader({ request }: LoaderFunctionArgs) {
+  const token = await getValidAccessToken();
+  if (!token) {
+    throw new Response("Unauthorized", { status: 401 });
+  }
+
+  return { token };
+}
+
+export function ErrorBoundary() {
+  return <Navigate to="/login" replace />;
+}
+
+export default function ProtectedLayout() {
+  return <Outlet />;
+}
\ No newline at end of file
diff --git a/frontend/app/routes/signup.tsx b/frontend/app/routes/signup.tsx
new file mode 100644
index 0000000..317080e
--- /dev/null
+++ b/frontend/app/routes/signup.tsx
@@ -0,0 +1,54 @@
+/**
+ * /signup route module
+ *
+ * - clientAction: handles form submission (email + password + confirm → auth service → redirect)
+ * - meta: sets browser tab title
+ * - default export: renders SignupForm with any action errors
+ */
+
+import { redirect, useActionData, useNavigation } from "react-router";
+import { signup, storeTokens } from "~/lib/auth";
+import { SignupForm } from "~/components/SignupForm";
+import type { Route } from "./+types/signup";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Sign up" },
+    { name: "description", content: "Create a new account" },
+  ];
+}
+
+export async function clientAction({ request }: Route.ClientActionArgs) {
+  const formData = await request.formData();
+  const email = formData.get("email") as string;
+  const password = formData.get("password") as string;
+  const confirmPassword = formData.get("confirm_password") as string;
+
+  // Client-side validation: passwords must match
+  if (password !== confirmPassword) {
+    return { error: "Passwords do not match." };
+  }
+
+  try {
+    const tokens = await signup(email, password, confirmPassword);
+    storeTokens(tokens);
+    return redirect("/login");
+  } catch (err) {
+    return {
+      error: err instanceof Error ? err.message : "Something went wrong",
+    };
+  }
+}
+
+export default function SignupRoute() {
+  const actionData = useActionData<typeof clientAction>();
+  const navigation = useNavigation();
+  const isSubmitting = navigation.state === "submitting";
+
+  return (
+    <SignupForm
+      error={actionData && "error" in actionData ? actionData.error : undefined}
+      isSubmitting={isSubmitting}
+    />
+  );
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f4bd158..c00f7c1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
         "@react-router/node": "^8",
         "@react-router/serve": "^8",
         "isbot": "^5.1.36",
+        "js-cookie": "^3.0.8",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
         "react-router": "^8"
@@ -16,6 +17,7 @@
       "devDependencies": {
         "@react-router/dev": "^8",
         "@tailwindcss/vite": "^4.2.2",
+        "@types/js-cookie": "^3.0.6",
         "@types/node": "^22",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
@@ -1317,6 +1319,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "22.20.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.20.1.tgz",
@@ -2150,6 +2159,12 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.8.tgz",
+      "integrity": "sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 0824000..ed9b83f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "@react-router/node": "^8",
     "@react-router/serve": "^8",
     "isbot": "^5.1.36",
+    "js-cookie": "^3.0.8",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-router": "^8"
@@ -19,6 +20,7 @@
   "devDependencies": {
     "@react-router/dev": "^8",
     "@tailwindcss/vite": "^4.2.2",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^22",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",