diff --git a/.gitignore b/.gitignore
index 43fd509..52a7334 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,4 +40,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-scripts/git-multipush.ts
\ No newline at end of file
+scripts/git-multipush.ts
+/app/debug/
\ No newline at end of file
diff --git a/app/(clear)/login/page.tsx b/app/(clear)/log-in/page.tsx
similarity index 100%
rename from app/(clear)/login/page.tsx
rename to app/(clear)/log-in/page.tsx
diff --git a/bun.lock b/bun.lock
index 3adee64..58682e5 100644
--- a/bun.lock
+++ b/bun.lock
@@ -13,6 +13,7 @@
         "next-themes": "^0.4.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "zod": "^4.0.5",
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -1467,6 +1468,8 @@
 
     "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
 
+    "zod": ["zod@4.0.5", "", {}, "sha512-/5UuuRPStvHXu7RS+gmvRf4NXrNxpSllGwDnCBcJZtQsKrviYXm54yDGV2KYNLT5kq0lHGcl7lqWJLgSaG+tgA=="],
+
     "@commitlint/config-validator/ajv": ["ajv@8.17.1", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g=="],
 
     "@commitlint/load/chalk": ["chalk@5.4.1", "", {}, "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w=="],
diff --git a/features/auth/ui/LoginForm.tsx b/features/auth/ui/LoginForm.tsx
new file mode 100644
index 0000000..74a2dfb
--- /dev/null
+++ b/features/auth/ui/LoginForm.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { Card, CardBody, CardHeader, Input } from "@heroui/react";
+import React from "react";
+
+const LoginForm = () => {
+  return (
+    <Card
+      className="min-w-[30vw]"
+      shadow="none"
+      classNames={{ base: "outline-1 outline-neutral-400" }}
+    >
+      <CardHeader className="mt-2 justify-center">
+        <h1 className="text-2xl font-medium text-center">Welcome Back</h1>
+      </CardHeader>
+      <CardBody className="px-4">
+        <Input
+          label="Email"
+          variant="bordered"
+          classNames={{
+            input: "focus:outline-none text-md",
+            label: "mb-1",
+          }}
+        />
+      </CardBody>
+    </Card>
+  );
+};
+
+export default LoginForm;
diff --git a/package.json b/package.json
index cc24472..7b10d41 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "next": "15.3.5",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "zod": "^4.0.5"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
diff --git a/shared/lib/backendApi.ts b/shared/lib/backendApi.ts
new file mode 100644
index 0000000..f6a2fb9
--- /dev/null
+++ b/shared/lib/backendApi.ts
@@ -0,0 +1,21 @@
+export const API_BASE_URL =
+  process.env.MAIN_BACKEND_API_URL ?? "http://localhost";
+
+const apiFetch = async <T = unknown>(
+  path: string,
+  init?: RequestInit
+): Promise<T> => {
+  const res = await fetch(`${API_BASE_URL}${path}`, {
+    ...init,
+    headers: {
+      "Content-Type": "application/json",
+      ...init?.headers,
+    },
+    cache: "no-store",
+  });
+
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+};
+
+export default apiFetch;