diff --git a/apps/frontend/app/auth/layout.tsx b/apps/frontend/app/auth/layout.tsx
new file mode 100644
index 0000000..271b593
--- /dev/null
+++ b/apps/frontend/app/auth/layout.tsx
@@ -0,0 +1,7 @@
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="w-full max-w-md p-8 bg-white rounded-xl shadow">{children}</div>
+    </main>
+  );
+}
diff --git a/apps/frontend/app/auth/login/page.tsx b/apps/frontend/app/auth/login/page.tsx
new file mode 100644
index 0000000..5099a8f
--- /dev/null
+++ b/apps/frontend/app/auth/login/page.tsx
@@ -0,0 +1 @@
+export { LoginPage as default } from 'pages/login';
diff --git a/apps/frontend/app/auth/register/page.tsx b/apps/frontend/app/auth/register/page.tsx
new file mode 100644
index 0000000..7210324
--- /dev/null
+++ b/apps/frontend/app/auth/register/page.tsx
@@ -0,0 +1 @@
+export { RegisterPage as default } from 'pages/register';
diff --git a/apps/frontend/next-env.d.ts b/apps/frontend/next-env.d.ts
index c05d9f7..cdb6b7b 100644
--- a/apps/frontend/next-env.d.ts
+++ b/apps/frontend/next-env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
-import './.next/types/routes.d.ts';
+import './.next/dev/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/frontend/src/pages/login/index.ts b/apps/frontend/src/pages/login/index.ts
new file mode 100644
index 0000000..270ae4d
--- /dev/null
+++ b/apps/frontend/src/pages/login/index.ts
@@ -0,0 +1 @@
+export { default as LoginPage } from './ui/LoginPage';
diff --git a/apps/frontend/src/pages/login/model/loginSchema.ts b/apps/frontend/src/pages/login/model/loginSchema.ts
new file mode 100644
index 0000000..079bc1c
--- /dev/null
+++ b/apps/frontend/src/pages/login/model/loginSchema.ts
@@ -0,0 +1,8 @@
+import { z } from 'zod';
+
+export const formSchema = z.object({
+  email: z.email('Неверный формат email'),
+  password: z.string().min(6, 'Минимум 6 символов').max(32, 'Слишком длинный пароль'),
+});
+
+export type FormState = z.infer<typeof formSchema>;
diff --git a/apps/frontend/src/pages/login/ui/LoginForm.tsx b/apps/frontend/src/pages/login/ui/LoginForm.tsx
new file mode 100644
index 0000000..bf72783
--- /dev/null
+++ b/apps/frontend/src/pages/login/ui/LoginForm.tsx
@@ -0,0 +1,55 @@
+'use client';
+import Link from 'next/link';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { formSchema, FormState } from '../model/loginSchema';
+import { Field, FieldDescription, FieldLabel, Button, Input } from 'shared/ui';
+
+export function LoginForm() {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(formSchema),
+    mode: 'onChange',
+  });
+  const onSubmit = (data: FormState): void => {
+    console.log(data);
+    reset();
+  };
+  return (
+    <form className="space-y-6 mb-4" onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col space-y-4">
+        <Field>
+          <FieldLabel htmlFor="email">Почта</FieldLabel>
+          <Input type="email" {...register('email')} id="email" placeholder="example@company.com" />
+          {errors.email && (
+            <FieldDescription className="text-red-500">{errors.email.message}</FieldDescription>
+          )}
+        </Field>
+        <Field className="grid gap-2">
+          <div className="flex items-center">
+            <FieldLabel htmlFor="password">Пароль</FieldLabel>
+            <Link
+              href="/auth/reset-password"
+              className="ml-auto text-sm underline-offset-4 hover:underline text-muted-foreground"
+            >
+              Забыли пароль?
+            </Link>
+          </div>
+
+          <Input id="password" type="password" placeholder="********" {...register('password')} />
+
+          {errors.password && (
+            <FieldDescription className="text-red-500 text-sm">
+              {errors.password.message}
+            </FieldDescription>
+          )}
+        </Field>
+      </div>
+      <Button className="w-full bg-blue-600 text-white py-2 rounded">Войти</Button>
+    </form>
+  );
+}
diff --git a/apps/frontend/src/pages/login/ui/LoginPage.tsx b/apps/frontend/src/pages/login/ui/LoginPage.tsx
new file mode 100644
index 0000000..120a3c9
--- /dev/null
+++ b/apps/frontend/src/pages/login/ui/LoginPage.tsx
@@ -0,0 +1,21 @@
+'use client';
+import { LoginForm } from './LoginForm';
+import Link from 'next/link';
+export default function LoginPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold mb-2"># Task-tracker</h1>
+
+      <h2 className="text-lg font-medium mb-4">С возвращением</h2>
+      <LoginForm />
+      <div className="flex flex-col justify-center items-center gap-10">
+        <div className="flex gap-2">
+          <p className="text-gray-500">Нет аккаунта?</p>
+          <Link className="text-blue-700" href="/auth/register">
+            Зарегистрироваться
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/pages/register/index.ts b/apps/frontend/src/pages/register/index.ts
new file mode 100644
index 0000000..4498c04
--- /dev/null
+++ b/apps/frontend/src/pages/register/index.ts
@@ -0,0 +1 @@
+export { default as RegisterPage } from './ui/RegisterPage';
diff --git a/apps/frontend/src/pages/register/model/registerSchema.ts b/apps/frontend/src/pages/register/model/registerSchema.ts
new file mode 100644
index 0000000..7bed4e8
--- /dev/null
+++ b/apps/frontend/src/pages/register/model/registerSchema.ts
@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+export const formSchema = z.object({
+  email: z.email('Неверный формат email'),
+  name: z.string().min(2, 'Слишком короткое имя').max(15, 'Слишком длинное имя'),
+  password: z.string().min(6, 'Минимум 6 символов').max(32, 'Слишком длинный пароль'),
+});
+
+export type FormState = z.infer<typeof formSchema>;
diff --git a/apps/frontend/src/pages/register/ui/RegisterForm.tsx b/apps/frontend/src/pages/register/ui/RegisterForm.tsx
new file mode 100644
index 0000000..612438b
--- /dev/null
+++ b/apps/frontend/src/pages/register/ui/RegisterForm.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Input } from 'shared/ui/input';
+import { formSchema, FormState } from '../model/registerSchema';
+import { Field, FieldDescription, FieldLabel } from 'shared/ui/field';
+import { Button } from 'shared/ui';
+
+export function RegisterForm() {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(formSchema),
+    mode: 'onChange',
+  });
+  const onSubmit = (data: FormState): void => {
+    console.log(data);
+    reset();
+  };
+  return (
+    <form className="space-y-6 mb-4" onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col space-y-4">
+        <Field>
+          <FieldLabel htmlFor="email">Почта</FieldLabel>
+          <Input type="email" {...register('email')} id="email" placeholder="example@company.com" />
+          {errors.email && (
+            <FieldDescription className="text-red-500">{errors.email.message}</FieldDescription>
+          )}
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="name">Имя</FieldLabel>
+          <Input id="name" type="text" placeholder="example" {...register('name')} />
+          {errors.name && (
+            <FieldDescription className="text-red-500 text-sm">
+              {errors.name.message}
+            </FieldDescription>
+          )}
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="password">Пароль</FieldLabel>
+          <Input id="password" type="password" placeholder="*********" {...register('password')} />
+          {errors.password && (
+            <FieldDescription className="text-red-500">{errors.password.message}</FieldDescription>
+          )}
+        </Field>
+      </div>
+      <Button className="w-full bg-blue-600 text-white py-2 rounded">Зарегистрироваться</Button>
+    </form>
+  );
+}
diff --git a/apps/frontend/src/pages/register/ui/RegisterPage.tsx b/apps/frontend/src/pages/register/ui/RegisterPage.tsx
new file mode 100644
index 0000000..8d3a162
--- /dev/null
+++ b/apps/frontend/src/pages/register/ui/RegisterPage.tsx
@@ -0,0 +1,12 @@
+'use client';
+import { RegisterForm } from './RegisterForm';
+
+export default function RegisterPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold mb-2"># Task-tracker</h1>
+      <h2 className="text-lg font-medium mb-4">С возвращением</h2>
+      <RegisterForm />
+    </div>
+  );
+}
diff --git a/apps/frontend/src/shared/ui/field.tsx b/apps/frontend/src/shared/ui/field.tsx
new file mode 100644
index 0000000..4bef5e0
--- /dev/null
+++ b/apps/frontend/src/shared/ui/field.tsx
@@ -0,0 +1,222 @@
+import { useMemo } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from 'shared/lib';
+import { Label } from 'shared/ui/label';
+import { Separator } from 'shared/ui/separator';
+
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLegend({
+  className,
+  variant = 'legend',
+  ...props
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+const fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-destructive', {
+  variants: {
+    orientation: {
+      vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
+      horizontal:
+        'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+      responsive:
+        'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+    },
+  },
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+});
+
+function Field({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        'text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
+        'last:mt-0 nth-last-2:-mt-1',
+        '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<'div'> & {
+  errors?: Array<{ message?: string } | undefined>;
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (!errors?.length) {
+      return null;
+    }
+
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn('text-sm font-normal text-destructive', className)}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+};
diff --git a/apps/frontend/src/shared/ui/index.ts b/apps/frontend/src/shared/ui/index.ts
index d1dd940..3293e46 100644
--- a/apps/frontend/src/shared/ui/index.ts
+++ b/apps/frontend/src/shared/ui/index.ts
@@ -1,3 +1,7 @@
 export * from './alert-dialog';
 export * from './button';
 export * from './card';
+export * from './field';
+export * from './input';
+export * from './label';
+export * from './separator';
diff --git a/apps/frontend/src/shared/ui/input.tsx b/apps/frontend/src/shared/ui/input.tsx
new file mode 100644
index 0000000..045827f
--- /dev/null
+++ b/apps/frontend/src/shared/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { cn } from 'shared/lib';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/apps/frontend/src/shared/ui/label.tsx b/apps/frontend/src/shared/ui/label.tsx
new file mode 100644
index 0000000..cba4f8b
--- /dev/null
+++ b/apps/frontend/src/shared/ui/label.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Label as LabelPrimitive } from 'radix-ui';
+
+import { cn } from 'shared/lib';
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/apps/frontend/src/shared/ui/separator.tsx b/apps/frontend/src/shared/ui/separator.tsx
new file mode 100644
index 0000000..21281a5
--- /dev/null
+++ b/apps/frontend/src/shared/ui/separator.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+
+import { cn } from 'shared/lib';
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };