diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
index 0706e10b..34667041 100644
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -1 +1,2 @@
 export * from "./error-page";
+export * from "./login-form";
diff --git a/apps/web/src/pages/login-form.tsx b/apps/web/src/pages/login-form.tsx
new file mode 100644
index 00000000..5575e3b1
--- /dev/null
+++ b/apps/web/src/pages/login-form.tsx
@@ -0,0 +1,58 @@
+import { Button } from "@repo/shadcn-ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@repo/shadcn-ui/components/card";
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@repo/shadcn-ui/components/field";
+import { Input } from "@repo/shadcn-ui/components/input";
+import { cn } from "@repo/shadcn-ui/lib/utils";
+
+export function LoginForm({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle>Login to your account</CardTitle>
+          <CardDescription>Enter your email below to login to your account</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor='email'>Email</FieldLabel>
+                <Input id='email' type='email' placeholder='m@example.com' required />
+              </Field>
+              <Field>
+                <div className='flex items-center'>
+                  <FieldLabel htmlFor='password'>Password</FieldLabel>
+                  <a
+                    // biome-ignore lint/a11y/useValidAnchor: <explanation>
+                    href='#'
+                    className='ml-auto inline-block text-sm underline-offset-4 hover:underline'
+                  >
+                    Forgot your password?
+                  </a>
+                </div>
+                <Input id='password' type='password' required />
+              </Field>
+              <Field>
+                <Button type='submit'>Login</Button>
+                <Button variant='outline' type='button'>
+                  Login with Google
+                </Button>
+                <FieldDescription className='text-center'>
+                  Don&apos;t have an account?{" "}
+                  {/** biome-ignore lint/a11y/useValidAnchor: <explanation> */}
+                  <a href='#'>Sign up</a>
+                </FieldDescription>
+              </Field>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/web/src/routes/app-routes.tsx b/apps/web/src/routes/app-routes.tsx
index 745c612a..4284531e 100644
--- a/apps/web/src/routes/app-routes.tsx
+++ b/apps/web/src/routes/app-routes.tsx
@@ -1,8 +1,8 @@
-import { ModuleRoutes } from "@/components/module-routes";
 import { IModuleClient } from "@erp/core/client";
 import { AppLayout } from "@repo/rdx-ui/components";
-import { Navigate, Route, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
-import { ErrorPage } from "../pages";
+import { createBrowserRouter, createRoutesFromElements, Navigate, Route } from "react-router-dom";
+import { ModuleRoutes } from "@/components/module-routes";
+import { ErrorPage, LoginForm } from "../pages";
 import { modules } from "../register-modules"; // Aquí ca
 
 function groupModulesByLayout(modules: IModuleClient[]) {
@@ -37,6 +37,7 @@ export const getAppRouter = () => {
         {/* Auth Layout */}
         <Route path='/auth'>
           <Route index element={<Navigate to='login' />} />
+          <Route path='login' element={<LoginForm />} />
           <Route path='*' element={<ModuleRoutes modules={grouped.auth} params={params} />} />
         </Route>