diff --git a/next.config.js b/next.config.js
index 8f2715d..0f4fd78 100644
--- a/next.config.js
+++ b/next.config.js
@@ -4,6 +4,20 @@ const nextConfig = {
   swcMinify: true,
   poweredByHeader: false,
   output: 'standalone',
+  async redirects() {
+    return [
+      {
+        source: '/auth/register/:path*',
+        destination: '/auth/register',
+        permanent: true,
+      },
+      {
+        source: '/auth/recoveryPassword/:path*',
+        destination: '/auth/recoveryPassword',
+        permanent: true,
+      },
+    ];
+  },
 };
 
 module.exports = nextConfig;
diff --git a/package.json b/package.json
index 03113a1..edb6e3c 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "ucrm-web-client",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/src/app/auth/auth.api.ts b/src/app/auth/auth.api.ts
index 2b74b32..c1a3bd0 100644
--- a/src/app/auth/auth.api.ts
+++ b/src/app/auth/auth.api.ts
@@ -1,25 +1,25 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { HYDRATE } from 'next-redux-wrapper';
-import { HOST_URL } from '../constants';
-import {
-  GetVerificationCodePayload,
+import type {
+  GetVerifyCodePayload,
   RegisterPayload,
   RegisterResponse,
   LoginPayload,
   LoginResponse,
+  GetRecoveryCodePayload,
+  RecoveryPasswordPayload,
 } from './auth.types';
-import { HTTP_METHODS as HTTP } from '../constants';
+import { HTTP_METHODS as HTTP, AUTH_API_URL } from '../constants';
 
 export const authApi = createApi({
   baseQuery: fetchBaseQuery({
-    baseUrl: HOST_URL + '/users',
+    baseUrl: AUTH_API_URL,
     prepareHeaders: (headers) => {
-      const token = window.localStorage.getItem('token') || '';
+      const token = localStorage.getItem('token') || '';
       headers.set('Authorization', token);
-
       return headers;
     },
-    credentials: 'include',
+    credentials: 'same-origin',
   }),
   reducerPath: 'api/auth',
   extractRehydrationInfo(action, { reducerPath }) {
@@ -28,23 +28,30 @@ export const authApi = createApi({
     }
   },
   endpoints: (builder) => ({
-    getVerificationCode: builder.mutation<GetVerificationCodePayload, void>({
-      query: (data) => ({ url: '/verificationCode', method: HTTP.POST, body: data }),
+    getVerifyCode: builder.mutation<void, GetVerifyCodePayload>({
+      query: (data) => ({ url: '/sendVerifyCode', method: HTTP.POST, body: data }),
     }),
-    register: builder.mutation<RegisterPayload, RegisterResponse>({
+    register: builder.mutation<RegisterResponse, RegisterPayload>({
       query: (data) => ({ url: '/signUp', method: HTTP.POST, body: data }),
     }),
-    login: builder.mutation<LoginPayload, LoginResponse>({
+    login: builder.mutation<LoginResponse, LoginPayload>({
       query: (data) => ({ url: '/signIn', method: HTTP.POST, body: data }),
     }),
+    getRecoveryCode: builder.mutation<void, GetRecoveryCodePayload>({
+      query: (data) => ({ url: '/sendRecoveryCode', method: HTTP.POST, body: data }),
+    }),
+    recoveryPassword: builder.mutation<void, RecoveryPasswordPayload>({
+      query: (data) => ({ url: '/recoveryPassword', method: HTTP.POST, body: data }),
+    }),
   }),
 });
 
 export const {
-  useGetVerificationCodeMutation,
+  useGetVerifyCodeMutation,
   useRegisterMutation,
   useLoginMutation,
+  useGetRecoveryCodeMutation,
+  useRecoveryPasswordMutation,
+  endpoints: { getVerifyCode, register, login, getRecoveryCode, recoveryPassword },
   util: { getRunningOperationPromises },
 } = authApi;
-
-export const { getVerificationCode, register, login } = authApi.endpoints;
diff --git a/src/app/auth/auth.slice.ts b/src/app/auth/auth.slice.ts
index b5c1529..75628c0 100644
--- a/src/app/auth/auth.slice.ts
+++ b/src/app/auth/auth.slice.ts
@@ -1,8 +1,8 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { AuthState } from './auth.types';
+import { createSlice } from '@reduxjs/toolkit';
+import { login, register } from './auth.api';
+import type { AuthState } from './auth.types';
 
 const initialState: AuthState = {
-  isLogin: false,
   token: '',
   user: null,
 };
@@ -11,12 +11,41 @@ const authSlice = createSlice({
   name: 'auth',
   initialState,
   reducers: {
-    logout: (state) => {
-      window.localStorage.removeItem('token');
-      state.isLogin = false;
-      state.token = '';
+    logout: () => {
+      localStorage.removeItem('token');
+      return initialState;
     },
+    takeTokenFromLocalStorage: (state) => {
+      if (!state.token) {
+        state.token = localStorage.getItem('token') || '';
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addMatcher(register.matchFulfilled, (state, { payload: { token, user } }) => {
+        localStorage.setItem('token', token);
+
+        state.token = token;
+        state.user = {
+          id: user.id,
+          email: user.email,
+          avatarUrl: user.avatar_url,
+          createdAt: user.created_at,
+        };
+      })
+      .addMatcher(login.matchFulfilled, (state, { payload: { token, user } }) => {
+        localStorage.setItem('token', token);
+
+        state.token = token;
+        state.user = {
+          id: user.id,
+          email: user.email,
+          avatarUrl: user.avatar_url,
+          createdAt: user.created_at,
+        };
+      });
   },
 });
 
-export const { actions: authAction, reducer: authReducer } = authSlice;
+export const { actions: authActions, reducer: authReducer } = authSlice;
diff --git a/src/app/auth/auth.types.ts b/src/app/auth/auth.types.ts
index 07918b7..d825af3 100644
--- a/src/app/auth/auth.types.ts
+++ b/src/app/auth/auth.types.ts
@@ -1,22 +1,26 @@
 export type Email = string;
 export type Token = string;
 
-export type GetVerificationCodePayload = {
+type CodePayload = {
   email: Email;
 };
 
+export type GetVerifyCodePayload = CodePayload;
+
 type AuthPayload = {
   email: Email;
   password: string;
 };
 
-export type RegisterPayload = AuthPayload & {
-  verificationCode: number;
+type CodeDto = {
+  code: number;
 };
 
+export type RegisterPayload = AuthPayload & CodeDto;
+
 export type UserDto = {
   id: string;
-  created_at: string;
+  created_at: Date;
   email: Email;
   avatar_url: string;
 };
@@ -38,7 +42,10 @@ export type LoginPayload = AuthPayload;
 export type LoginResponse = AuthResponse;
 
 export type AuthState = {
-  isLogin: boolean;
   token: Token;
   user: User | null;
 };
+
+export type GetRecoveryCodePayload = CodePayload;
+
+export type RecoveryPasswordPayload = AuthPayload & CodeDto;
diff --git a/src/app/constants.ts b/src/app/constants.ts
index 9d0336c..2de61f3 100644
--- a/src/app/constants.ts
+++ b/src/app/constants.ts
@@ -1,4 +1,5 @@
 export const HOST_URL = process.env.host || 'http://localhost:8081/api/v1';
+export const AUTH_API_URL = HOST_URL + '/users';
 
 export enum HTTP_METHODS {
   GET = 'GET',
diff --git a/src/app/store.ts b/src/app/store.ts
index 1be4435..ed8e6dc 100644
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -1,6 +1,7 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { createWrapper } from 'next-redux-wrapper';
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
 import { authReducer } from './auth/auth.slice';
 import { authApi } from './auth/auth.api';
 
@@ -14,7 +15,7 @@ const makeStore = () =>
   });
 
 type AppStore = ReturnType<typeof makeStore>;
-type RootState = ReturnType<AppStore['getState']>;
+export type RootState = ReturnType<AppStore['getState']>;
 type AppDispatch = AppStore['dispatch'];
 
 export const useTypedDispatch = () => useDispatch<AppDispatch>();
diff --git a/src/components/CodeInput/CodeInput.tsx b/src/components/CodeInput/CodeInput.tsx
new file mode 100644
index 0000000..ecd112c
--- /dev/null
+++ b/src/components/CodeInput/CodeInput.tsx
@@ -0,0 +1,44 @@
+import { FC, PropsWithChildren, useEffect } from 'react';
+import { Box, TextField, Typography } from '@mui/material';
+import type { TextFieldProps } from '@mui/material';
+import { useTimer } from '@/hooks/useTimer';
+import { LoadingButton } from '../UI/LoadingButton';
+
+interface CodeInputProps {
+  onTimerRestart?: () => void;
+}
+
+export const CodeInput: FC<PropsWithChildren<CodeInputProps & TextFieldProps>> = ({
+  children,
+  onTimerRestart = () => undefined,
+  ...rest
+}) => {
+  const { mins, secs, start, restart, isOver } = useTimer({ expiredTime: 300 });
+
+  const restartTimer = () => {
+    onTimerRestart();
+    restart();
+  };
+
+  useEffect(() => {
+    start();
+  }, [start]);
+
+  return (
+    <>
+      <TextField {...rest} />
+      {!isOver && (
+        <Box>
+          <Typography component="span">
+            You may resend in {mins.toString().padStart(2, '0')}:{secs.toString().padStart(2, '0')}
+          </Typography>
+        </Box>
+      )}
+      {isOver && (
+        <LoadingButton variant="text" onClick={restartTimer}>
+          Resend
+        </LoadingButton>
+      )}
+    </>
+  );
+};
diff --git a/src/components/CodeInput/index.tsx b/src/components/CodeInput/index.tsx
new file mode 100644
index 0000000..c01a31a
--- /dev/null
+++ b/src/components/CodeInput/index.tsx
@@ -0,0 +1 @@
+export { CodeInput } from './CodeInput';
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index f221f5b..4219c68 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,6 +1,7 @@
+import type { FC } from 'react';
 import { Box, Link, Typography } from '@mui/material';
 
-export default function Footer() {
+export const Footer: FC = () => {
   return (
     <Box
       sx={{
@@ -17,4 +18,4 @@ export default function Footer() {
       </Link>
     </Box>
   );
-}
+};
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index db38584..2b70ed7 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,19 +1,23 @@
-import { AppBar, Toolbar, Typography, Button, IconButton } from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
+import type { FC } from 'react';
+import NextLink from 'next/link';
+import { AppBar, Toolbar, Typography } from '@mui/material';
+import { Nav } from './Nav';
 
-export default function Header() {
+export const Header: FC = () => {
   return (
     <AppBar position="static">
       <Toolbar>
-        <IconButton sx={{ mr: 2 }} size="large" edge="start" color="inherit" aria-label="menu">
-          <MenuIcon />
-        </IconButton>
-        <Typography sx={{ flexGrow: 1 }} variant="h6" component="div">
-          UCRM
-        </Typography>
-        <Button color="inherit">Login</Button>
-        <Button color="inherit">Register</Button>
+        <NextLink href="/">
+          <Typography
+            sx={{ marginRight: 'auto', ':hover': { cursor: 'pointer' } }}
+            variant="h6"
+            component="a"
+          >
+            UCRM
+          </Typography>
+        </NextLink>
+        <Nav />
       </Toolbar>
     </AppBar>
   );
-}
+};
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 66a3143..97a1e4e 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,12 +1,13 @@
-import Header from './Header';
-import Footer from './Footer';
+import type { FC, PropsWithChildren } from 'react';
+import { Header } from './Header';
+import { Footer } from './Footer';
 import { Box } from '@mui/material';
 
 interface LayoutProps {
   children: React.ReactNode;
 }
 
-export default function Layout({ children }: LayoutProps) {
+export const Layout: FC<PropsWithChildren<LayoutProps>> = ({ children }) => {
   return (
     <>
       <Header />
@@ -16,4 +17,4 @@ export default function Layout({ children }: LayoutProps) {
       <Footer />
     </>
   );
-}
+};
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
new file mode 100644
index 0000000..35e4b6d
--- /dev/null
+++ b/src/components/Nav.tsx
@@ -0,0 +1,35 @@
+import type { FC } from 'react';
+import NextLink from 'next/link';
+import { Button, Stack } from '@mui/material';
+import { useTypedSelector, useTypedDispatch } from '@/app/store';
+import { authActions } from '@/app/auth/auth.slice';
+
+export const Nav: FC = () => {
+  const dispatch = useTypedDispatch();
+  const logout = () => dispatch(authActions.logout());
+  const isLoggedIn = useTypedSelector((state) => !!state.auth.token);
+
+  return (
+    <Stack direction="row" spacing={2}>
+      {isLoggedIn && (
+        <Button color="inherit" variant="outlined" onClick={logout}>
+          Logout
+        </Button>
+      )}
+      {!isLoggedIn && (
+        <>
+          <NextLink href="/auth/login">
+            <Button color="inherit" variant="text">
+              Login
+            </Button>
+          </NextLink>
+          <NextLink href="/auth/register">
+            <Button color="inherit" variant="outlined">
+              Register
+            </Button>
+          </NextLink>
+        </>
+      )}
+    </Stack>
+  );
+};
diff --git a/src/components/UI/LoadingButton.tsx b/src/components/UI/LoadingButton.tsx
new file mode 100644
index 0000000..8f201a2
--- /dev/null
+++ b/src/components/UI/LoadingButton.tsx
@@ -0,0 +1,39 @@
+import type { FC, PropsWithChildren } from 'react';
+import { Stack, Button, CircularProgress, Box } from '@mui/material';
+import type { SxProps, ButtonProps } from '@mui/material';
+
+interface LoadingButtonProps {
+  children: React.ReactNode;
+  type?: 'button' | 'submit' | 'reset';
+  loading?: boolean;
+  sx?: SxProps;
+}
+
+export const LoadingButton: FC<PropsWithChildren<LoadingButtonProps & ButtonProps>> = ({
+  children,
+  type = 'button',
+  loading = false,
+  sx = {},
+  ...rest
+}) => {
+  return (
+    <Button
+      sx={{
+        color: loading ? 'grey.500' : '',
+        backgroundColor: loading ? 'grey500' : '',
+        appearance: loading ? 'none' : 'auto',
+        cursor: loading ? 'not-allowed' : 'pointer',
+        ...sx,
+      }}
+      disabled={loading}
+      type={type}
+      {...rest}
+    >
+      <Stack direction="row" alignItems="center" spacing={1}>
+        {loading && <CircularProgress color="inherit" size={16} />}
+        {loading && <Box>Pending</Box>}
+        {!loading && <Box>{children}</Box>}
+      </Stack>
+    </Button>
+  );
+};
diff --git a/src/contexts/Root.context.tsx b/src/contexts/Root.context.tsx
new file mode 100644
index 0000000..5633ecb
--- /dev/null
+++ b/src/contexts/Root.context.tsx
@@ -0,0 +1,11 @@
+import type { FC, PropsWithChildren } from 'react';
+import { RegisterProvider } from './auth/Register.context';
+import { RecoveryPasswordProvider } from './auth/RecoveryPassword.context';
+
+export const RootContext: FC<PropsWithChildren> = ({ children }) => (
+  <>
+    <RegisterProvider>
+      <RecoveryPasswordProvider>{children}</RecoveryPasswordProvider>
+    </RegisterProvider>
+  </>
+);
diff --git a/src/contexts/auth/RecoveryPassword.context.tsx b/src/contexts/auth/RecoveryPassword.context.tsx
new file mode 100644
index 0000000..fdb2cbe
--- /dev/null
+++ b/src/contexts/auth/RecoveryPassword.context.tsx
@@ -0,0 +1,39 @@
+import { createContext, useContext, useState } from 'react';
+import type { FC, PropsWithChildren, Dispatch, SetStateAction } from 'react';
+import type { FullRecoveryPasswordData } from '@/schemas/auth/recoveryPassword.schema';
+
+const initialData: FullRecoveryPasswordData = {
+  email: '',
+  code: '',
+  newPassword: '',
+};
+
+type RecoveryPasswordDataPartial = Partial<FullRecoveryPasswordData>;
+type UpdateContext = Dispatch<SetStateAction<RecoveryPasswordDataPartial>>;
+type ResetContext = () => void;
+
+type RecoveryPasswordType = {
+  data: FullRecoveryPasswordData;
+  updateData: UpdateContext;
+  resetData: ResetContext;
+};
+
+const RecoveryPasswordContext = createContext<RecoveryPasswordType>({
+  data: initialData,
+  updateData: () => undefined,
+  resetData: () => undefined,
+});
+
+export const RecoveryPasswordProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [data, setData] = useState(initialData);
+  const updateData: UpdateContext = (newData) => setData((oldData) => ({ ...oldData, ...newData }));
+  const resetData: ResetContext = () => setData(initialData);
+
+  return (
+    <RecoveryPasswordContext.Provider value={{ data, updateData, resetData }}>
+      {children}
+    </RecoveryPasswordContext.Provider>
+  );
+};
+
+export const useRecoveryPasswordContext = () => useContext(RecoveryPasswordContext);
diff --git a/src/contexts/auth/Register.context.tsx b/src/contexts/auth/Register.context.tsx
new file mode 100644
index 0000000..4f71f4d
--- /dev/null
+++ b/src/contexts/auth/Register.context.tsx
@@ -0,0 +1,40 @@
+import { createContext, useContext, useState } from 'react';
+import type { FC, PropsWithChildren, Dispatch, SetStateAction } from 'react';
+import type { FullRegisterData } from '@/schemas/auth/register.schema';
+
+const initialData: FullRegisterData = {
+  email: '',
+  password: '',
+  confirmPassword: '',
+  code: '',
+};
+
+type RegisterDataPartial = Partial<FullRegisterData>;
+type UpdateContext = Dispatch<SetStateAction<RegisterDataPartial>>;
+type ResetContext = () => void;
+
+type RegisterContextType = {
+  data: FullRegisterData;
+  updateData: UpdateContext;
+  resetData: ResetContext;
+};
+
+const RegisterContext = createContext<RegisterContextType>({
+  data: initialData,
+  updateData: () => undefined,
+  resetData: () => undefined,
+});
+
+export const RegisterProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [data, setData] = useState(initialData);
+  const updateData: UpdateContext = (newData) => setData((oldData) => ({ ...oldData, ...newData }));
+  const resetData: ResetContext = () => setData(initialData);
+
+  return (
+    <RegisterContext.Provider value={{ data, updateData, resetData }}>
+      {children}
+    </RegisterContext.Provider>
+  );
+};
+
+export const useRegisterContext = () => useContext(RegisterContext);
diff --git a/src/global.scss b/src/global.scss
index 5496e5a..55d2c75 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -1,11 +1,13 @@
-html {
-  color-scheme: dark;
-}
-
 body {
   height: 100vh;
 }
 
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
 #__next {
   height: 100%;
   display: flex;
diff --git a/src/hooks/useTimer.ts b/src/hooks/useTimer.ts
new file mode 100644
index 0000000..73bb38d
--- /dev/null
+++ b/src/hooks/useTimer.ts
@@ -0,0 +1,64 @@
+import { useState, useRef } from 'react';
+
+const getTime = (ms: number) => {
+  const totalSecs = Math.ceil(ms / 1000);
+
+  const mins = Math.floor((totalSecs % (60 * 60)) / 60);
+  const secs = Math.floor(totalSecs % 60);
+
+  return {
+    secs,
+    mins,
+  };
+};
+
+const getRemainingTime = (ms: number) => {
+  const now = new Date().getTime();
+  const msDiff = ms - now;
+  if (msDiff > 0) return msDiff;
+  return 0;
+};
+
+const getTargetTime = (value: number) => {
+  const now = new Date();
+  now.setSeconds(now.getSeconds() + value);
+  return now.getTime();
+};
+
+interface UseTimerProps {
+  expiredTime: number;
+}
+
+export const useTimer = ({ expiredTime }: UseTimerProps) => {
+  const timerRef = useRef<any>();
+  let targetTime = getTargetTime(expiredTime);
+  const [remainingTime, setRemainingTime] = useState<number>(() => getRemainingTime(targetTime));
+  const [isOver, setIsOver] = useState<boolean>(false);
+
+  const timer = () => {
+    const value = getRemainingTime(targetTime);
+    setRemainingTime(value);
+    if (value <= 0) {
+      setIsOver(true);
+      clearInterval(timerRef.current);
+    }
+  };
+
+  const start = () => {
+    if (!isOver && !timerRef.current) {
+      timerRef.current = setInterval(timer, 1000);
+      setIsOver(false);
+    }
+  };
+
+  const restart = () => {
+    clearInterval(timerRef.current);
+    const newTargetTime = getTargetTime(expiredTime);
+    targetTime = newTargetTime;
+    setRemainingTime(getRemainingTime(newTargetTime));
+    timerRef.current = setInterval(timer, 1000);
+    setIsOver(false);
+  };
+
+  return { ...getTime(remainingTime), start, restart, isOver };
+};
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 10b15b2..d40b7eb 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,8 +1,12 @@
-export default function Custom404() {
+import type { NextPage } from 'next';
+
+const Custom404: NextPage = () => {
   return (
     <div>
       <h1>404</h1>
       <h2>Page Not Found</h2>
     </div>
   );
-}
+};
+
+export default Custom404;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index a986223..169469f 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,13 +1,15 @@
+import { useEffect } from 'react';
 import type { AppProps as NextAppProps } from 'next/app';
 import Head from 'next/head';
-import { Provider as StoreProvider } from 'react-redux';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { CacheProvider, EmotionCache } from '@emotion/react';
+import { CacheProvider, type EmotionCache } from '@emotion/react';
 import { emotionCache as clientEmotionCache } from '@/utils/emotionCache';
-import Layout from '@/components/Layout';
+import { Layout } from '@/components/Layout';
 import { theme } from '@/utils/theme';
-import { wrapper } from '@/app/store';
+import { useTypedDispatch, wrapper } from '@/app/store';
+import { authActions } from '@/app/auth/auth.slice';
+import { RootContext } from '@/contexts/Root.context';
 import '@/global.scss';
 
 interface AppProps extends NextAppProps {
@@ -15,6 +17,13 @@ interface AppProps extends NextAppProps {
 }
 
 function App({ Component, pageProps, emotionCache = clientEmotionCache }: AppProps) {
+  const dispatch = useTypedDispatch();
+
+  useEffect(() => {
+    dispatch(authActions.takeTokenFromLocalStorage());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
       <Head>
@@ -23,10 +32,12 @@ function App({ Component, pageProps, emotionCache = clientEmotionCache }: AppPro
       </Head>
       <CacheProvider value={emotionCache}>
         <ThemeProvider theme={theme}>
-          <CssBaseline enableColorScheme />
-          <Layout>
-            <Component {...pageProps} />
-          </Layout>
+          <RootContext>
+            <CssBaseline enableColorScheme />
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
+          </RootContext>
         </ThemeProvider>
       </CacheProvider>
     </>
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
new file mode 100644
index 0000000..26a4da0
--- /dev/null
+++ b/src/pages/auth/login.tsx
@@ -0,0 +1,87 @@
+import type { NextPage } from 'next';
+import { useRouter } from 'next/router';
+import NextLink from 'next/link';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Container, Stack, TextField, Typography, Link } from '@mui/material';
+import { LoadingButton } from '@/components/UI/LoadingButton';
+import { useLoginMutation } from '@/app/auth/auth.api';
+import { loginSchema, type LoginData } from '@/schemas/auth/login.schema';
+
+const Login: NextPage = () => {
+  const router = useRouter();
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<LoginData>({
+    mode: 'onBlur',
+    resolver: yupResolver(loginSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  });
+  const [login, { isLoading }] = useLoginMutation();
+
+  const onSubmit = async (data: LoginData) => {
+    login(data)
+      .unwrap()
+      .then(() => {
+        router.push('/');
+      })
+      .catch(console.error);
+  };
+
+  return (
+    <>
+      <Container sx={{ height: '100%' }} component="main" maxWidth="xs">
+        <Typography
+          sx={{ margin: 2, textAlign: 'center', fontWeight: 'bold' }}
+          component="h1"
+          variant="h4"
+        >
+          Login
+        </Typography>
+        <Stack spacing={2} component="form" noValidate onSubmit={handleSubmit(onSubmit)}>
+          <Controller
+            name="email"
+            control={control}
+            render={({ field }) => (
+              <TextField
+                required
+                variant="outlined"
+                label="Email"
+                error={!!errors.email}
+                helperText={errors?.email?.message}
+                {...field}
+              />
+            )}
+          />
+          <Controller
+            name="password"
+            control={control}
+            render={({ field }) => (
+              <TextField
+                required
+                variant="outlined"
+                label="Password"
+                error={!!errors.password}
+                helperText={errors?.password?.message}
+                {...field}
+              />
+            )}
+          />
+          <NextLink href="/auth/recoveryPassword">
+            <Link href="">forgot password?</Link>
+          </NextLink>
+          <LoadingButton type="submit" variant="contained" loading={isLoading}>
+            Login
+          </LoadingButton>
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+export default Login;
diff --git a/src/pages/auth/recoveryPassword/code.tsx b/src/pages/auth/recoveryPassword/code.tsx
new file mode 100644
index 0000000..f141b48
--- /dev/null
+++ b/src/pages/auth/recoveryPassword/code.tsx
@@ -0,0 +1,74 @@
+import type { NextPage } from 'next';
+import { useRouter } from 'next/router';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Container, Stack, Button } from '@mui/material';
+import { CodeInput } from '@/components/CodeInput';
+import {
+  recoveryPasswordCodeSchema,
+  type RecoveryPasswordCodeData,
+} from '@/schemas/auth/recoveryPassword.schema';
+import { useRecoveryPasswordContext } from '@/contexts/auth/RecoveryPassword.context';
+import { useGetRecoveryCodeMutation } from '@/app/auth/auth.api';
+
+const RecoveryPassword: NextPage = () => {
+  const router = useRouter();
+  const { data: fullRecoveryPasswordData, updateData } = useRecoveryPasswordContext();
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<RecoveryPasswordCodeData>({
+    mode: 'onBlur',
+    resolver: yupResolver(recoveryPasswordCodeSchema),
+    defaultValues: {
+      code: fullRecoveryPasswordData.code,
+    },
+  });
+  const [getRecoveryCode] = useGetRecoveryCodeMutation();
+
+  const resendCode = () =>
+    getRecoveryCode({ email: fullRecoveryPasswordData.email }).unwrap().catch(console.error);
+
+  const onSubmit = async (data: RecoveryPasswordCodeData) => {
+    console.log(data);
+    updateData(data);
+    router.push('./new');
+  };
+
+  return (
+    <>
+      <Container sx={{ height: '100%' }} component="main" maxWidth="xs">
+        <Stack
+          sx={{ marginTop: 2 }}
+          spacing={2}
+          component="form"
+          noValidate
+          onSubmit={handleSubmit(onSubmit)}
+        >
+          <Controller
+            name="code"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <CodeInput
+                required
+                variant="outlined"
+                label="Verification Code"
+                error={!!errors.code}
+                helperText={errors?.code?.message}
+                value={value}
+                onChange={({ target: { value } }) => onChange(value.replace(/[^0-9]/g, '') || '')}
+                onTimerRestart={resendCode}
+              />
+            )}
+          />
+          <Button type="submit" variant="contained">
+            Next
+          </Button>
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+export default RecoveryPassword;
diff --git a/src/pages/auth/recoveryPassword/index.tsx b/src/pages/auth/recoveryPassword/index.tsx
new file mode 100644
index 0000000..1eab714
--- /dev/null
+++ b/src/pages/auth/recoveryPassword/index.tsx
@@ -0,0 +1,75 @@
+import type { NextPage } from 'next';
+import { useRouter } from 'next/router';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Container, Stack, TextField, Typography } from '@mui/material';
+import { LoadingButton } from '@/components/UI/LoadingButton';
+import {
+  recoveryPasswordEmailSchema,
+  type RecoveryPasswordEmailData,
+} from '@/schemas/auth/recoveryPassword.schema';
+import { useRecoveryPasswordContext } from '@/contexts/auth/RecoveryPassword.context';
+import { useGetRecoveryCodeMutation } from '@/app/auth/auth.api';
+
+const RecoveryPassword: NextPage = () => {
+  const router = useRouter();
+  const { data: fullRecoveryPasswordData, updateData } = useRecoveryPasswordContext();
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<RecoveryPasswordEmailData>({
+    mode: 'onBlur',
+    resolver: yupResolver(recoveryPasswordEmailSchema),
+    defaultValues: {
+      email: fullRecoveryPasswordData.email,
+    },
+  });
+  const [getRecoveryCode, { isLoading }] = useGetRecoveryCodeMutation();
+
+  const onSubmit = async (data: RecoveryPasswordEmailData) => {
+    console.log(data);
+    updateData(data);
+    getRecoveryCode(data)
+      .unwrap()
+      .then(() => {
+        router.push(router.pathname + '/code');
+      })
+      .catch(console.error);
+  };
+
+  return (
+    <>
+      <Container sx={{ height: '100%' }} component="main" maxWidth="xs">
+        <Typography
+          sx={{ margin: 2, textAlign: 'center', fontWeight: 'bold' }}
+          component="h1"
+          variant="h4"
+        >
+          Recovery Password
+        </Typography>
+        <Stack spacing={2} component="form" noValidate onSubmit={handleSubmit(onSubmit)}>
+          <Controller
+            name="email"
+            control={control}
+            render={({ field }) => (
+              <TextField
+                required
+                variant="outlined"
+                label="Email"
+                error={!!errors.email}
+                helperText={errors?.email?.message}
+                {...field}
+              />
+            )}
+          />
+          <LoadingButton type="submit" variant="contained" loading={isLoading}>
+            Next
+          </LoadingButton>
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+export default RecoveryPassword;
diff --git a/src/pages/auth/recoveryPassword/new.tsx b/src/pages/auth/recoveryPassword/new.tsx
new file mode 100644
index 0000000..b1a46a0
--- /dev/null
+++ b/src/pages/auth/recoveryPassword/new.tsx
@@ -0,0 +1,81 @@
+import type { NextPage } from 'next';
+import { useRouter } from 'next/router';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Container, Stack, TextField } from '@mui/material';
+import { LoadingButton } from '@/components/UI/LoadingButton';
+import {
+  recoveryPasswordNewSchema,
+  type RecoveryPasswordNewData,
+} from '@/schemas/auth/recoveryPassword.schema';
+import { useRecoveryPasswordContext } from '@/contexts/auth/RecoveryPassword.context';
+import { useRecoveryPasswordMutation } from '@/app/auth/auth.api';
+
+const RecoveryPassword: NextPage = () => {
+  const router = useRouter();
+  const { data: fullRecoveryPasswordData, updateData, resetData } = useRecoveryPasswordContext();
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<RecoveryPasswordNewData>({
+    mode: 'onBlur',
+    resolver: yupResolver(recoveryPasswordNewSchema),
+    defaultValues: {
+      newPassword: fullRecoveryPasswordData.newPassword,
+    },
+  });
+  const [recoveryPassword, { isLoading }] = useRecoveryPasswordMutation();
+
+  const onSubmit = async (data: RecoveryPasswordNewData) => {
+    console.log(data);
+    updateData(data);
+    const normalizedCode = parseInt(fullRecoveryPasswordData.code, 10);
+    const payload = {
+      email: fullRecoveryPasswordData.email,
+      code: normalizedCode,
+      password: fullRecoveryPasswordData.newPassword,
+    };
+    recoveryPassword(payload)
+      .unwrap()
+      .then(() => {
+        resetData();
+        router.push('/');
+      })
+      .catch(console.error);
+  };
+
+  return (
+    <>
+      <Container sx={{ height: '100%' }} component="main" maxWidth="xs">
+        <Stack
+          sx={{ marginTop: 2 }}
+          spacing={2}
+          component="form"
+          noValidate
+          onSubmit={handleSubmit(onSubmit)}
+        >
+          <Controller
+            name="newPassword"
+            control={control}
+            render={({ field }) => (
+              <TextField
+                required
+                variant="outlined"
+                label="New password"
+                error={!!errors.newPassword}
+                helperText={errors?.newPassword?.message}
+                {...field}
+              />
+            )}
+          />
+          <LoadingButton type="submit" variant="contained" loading={isLoading}>
+            Complete
+          </LoadingButton>
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+export default RecoveryPassword;
diff --git a/src/pages/auth/register/code.tsx b/src/pages/auth/register/code.tsx
new file mode 100644
index 0000000..e69abe1
--- /dev/null
+++ b/src/pages/auth/register/code.tsx
@@ -0,0 +1,84 @@
+import type { NextPage } from 'next';
+import { useRouter } from 'next/router';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Container, Stack } from '@mui/material';
+import { CodeInput } from '@/components/CodeInput';
+import { LoadingButton } from '@/components/UI/LoadingButton';
+import { registerCodeSchema, type RegisterCodeData } from '@/schemas/auth/register.schema';
+import { useRegisterContext } from '@/contexts/auth/Register.context';
+import { useRegisterMutation, useGetVerifyCodeMutation } from '@/app/auth/auth.api';
+
+const Code: NextPage = () => {
+  const router = useRouter();
+  const { data: fullRegisterData, updateData, resetData } = useRegisterContext();
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<RegisterCodeData>({
+    mode: 'onBlur',
+    resolver: yupResolver(registerCodeSchema),
+    defaultValues: {
+      code: fullRegisterData.code,
+    },
+  });
+  const [register, { isLoading }] = useRegisterMutation();
+  const [getVerifyCode] = useGetVerifyCodeMutation();
+
+  const resendCode = () =>
+    getVerifyCode({ email: fullRegisterData.email }).unwrap().catch(console.error);
+
+  const onSubmit = async (data: RegisterCodeData) => {
+    updateData(data);
+    const normalizedCode = parseInt(data.code, 10);
+    const payload = {
+      email: fullRegisterData.email,
+      password: fullRegisterData.password,
+      code: normalizedCode,
+    };
+    register(payload)
+      .unwrap()
+      .then(() => {
+        resetData();
+        router.push('/');
+      })
+      .catch(console.error);
+  };
+
+  return (
+    <>
+      <Container sx={{ height: '100%' }} component="main" maxWidth="xs">
+        <Stack
+          sx={{ marginTop: 2 }}
+          spacing={2}
+          component="form"
+          noValidate
+          onSubmit={handleSubmit(onSubmit)}
+        >
+          <Controller
+            name="code"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <CodeInput
+                required
+                variant="outlined"
+                label="Verification Code"
+                error={!!errors.code}
+                helperText={errors?.code?.message}
+                value={value}
+                onChange={({ target: { value } }) => onChange(value.replace(/[^0-9]/g, '') || '')}
+                onTimerRestart={resendCode}
+              />
+            )}
+          />
+          <LoadingButton type="submit" variant="contained" loading={isLoading}>
+            Complete
+          </LoadingButton>
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+export default Code;
diff --git a/src/pages/auth/register/index.tsx b/src/pages/auth/register/index.tsx
new file mode 100644
index 0000000..1fb63d4
--- /dev/null
+++ b/src/pages/auth/register/index.tsx
@@ -0,0 +1,101 @@
+import type { NextPage } from 'next';
+import { useRouter } from 'next/router';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Container, Stack, Button, TextField, Typography } from '@mui/material';
+import { LoadingButton } from '@/components/UI/LoadingButton';
+import { registerSchema, type RegisterData } from '@/schemas/auth/register.schema';
+import { useRegisterContext } from '@/contexts/auth/Register.context';
+import { useGetVerifyCodeMutation } from '@/app/auth/auth.api';
+
+const Register: NextPage = () => {
+  const router = useRouter();
+  const { data: fullRegisterData, updateData } = useRegisterContext();
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<RegisterData>({
+    mode: 'onBlur',
+    resolver: yupResolver(registerSchema),
+    defaultValues: {
+      email: fullRegisterData.email,
+      password: fullRegisterData.password,
+      confirmPassword: fullRegisterData.password,
+    },
+  });
+  const [getVerifyCode, { isLoading }] = useGetVerifyCodeMutation();
+
+  const onSubmit = async (data: RegisterData) => {
+    updateData(data);
+    getVerifyCode({ email: data.email })
+      .unwrap()
+      .then(() => {
+        router.push(router.pathname + '/code');
+      })
+      .catch(console.error);
+  };
+
+  return (
+    <>
+      <Container sx={{ height: '100%' }} component="main" maxWidth="xs">
+        <Typography
+          sx={{ margin: 2, textAlign: 'center', fontWeight: 'bold' }}
+          component="h1"
+          variant="h4"
+        >
+          Register
+        </Typography>
+        <Stack spacing={2} component="form" noValidate onSubmit={handleSubmit(onSubmit)}>
+          <Controller
+            name="email"
+            control={control}
+            render={({ field }) => (
+              <TextField
+                required
+                variant="outlined"
+                label="Email"
+                error={!!errors.email}
+                helperText={errors?.email?.message}
+                {...field}
+              />
+            )}
+          />
+          <Controller
+            name="password"
+            control={control}
+            render={({ field }) => (
+              <TextField
+                required
+                variant="outlined"
+                label="Password"
+                error={!!errors.password}
+                helperText={errors?.password?.message}
+                {...field}
+              />
+            )}
+          />
+          <Controller
+            name="confirmPassword"
+            control={control}
+            render={({ field }) => (
+              <TextField
+                required
+                variant="outlined"
+                label="Confirm Password"
+                error={!!errors.confirmPassword}
+                helperText={errors?.confirmPassword?.message}
+                {...field}
+              />
+            )}
+          />
+          <LoadingButton type="submit" variant="contained" loading={isLoading}>
+            Next
+          </LoadingButton>
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+export default Register;
diff --git a/src/schemas/auth/login.schema.ts b/src/schemas/auth/login.schema.ts
new file mode 100644
index 0000000..38fc660
--- /dev/null
+++ b/src/schemas/auth/login.schema.ts
@@ -0,0 +1,9 @@
+import * as yup from 'yup';
+import { emailSchema, passwordSchema } from '../shared.schema';
+
+export const loginSchema = yup.object({
+  email: emailSchema,
+  password: passwordSchema,
+});
+type LoginSchema = typeof loginSchema;
+export type LoginData = yup.InferType<LoginSchema>;
diff --git a/src/schemas/auth/recoveryPassword.schema.ts b/src/schemas/auth/recoveryPassword.schema.ts
new file mode 100644
index 0000000..de43965
--- /dev/null
+++ b/src/schemas/auth/recoveryPassword.schema.ts
@@ -0,0 +1,24 @@
+import * as yup from 'yup';
+import { emailSchema, codeSchema, passwordSchema } from '../shared.schema';
+
+export const recoveryPasswordEmailSchema = yup.object({
+  email: emailSchema,
+});
+type RecoveryPasswordEmailSchema = typeof recoveryPasswordEmailSchema;
+export type RecoveryPasswordEmailData = yup.InferType<RecoveryPasswordEmailSchema>;
+
+export const recoveryPasswordCodeSchema = yup.object({
+  code: codeSchema,
+});
+type RecoveryPasswordCodeSchema = typeof recoveryPasswordCodeSchema;
+export type RecoveryPasswordCodeData = yup.InferType<RecoveryPasswordCodeSchema>;
+
+export const recoveryPasswordNewSchema = yup.object({
+  newPassword: passwordSchema,
+});
+type RecoveryPasswordNewSchema = typeof recoveryPasswordNewSchema;
+export type RecoveryPasswordNewData = yup.InferType<RecoveryPasswordNewSchema>;
+
+export type FullRecoveryPasswordData = RecoveryPasswordEmailData &
+  RecoveryPasswordCodeData &
+  RecoveryPasswordNewData;
diff --git a/src/schemas/auth/register.schema.ts b/src/schemas/auth/register.schema.ts
new file mode 100644
index 0000000..d183751
--- /dev/null
+++ b/src/schemas/auth/register.schema.ts
@@ -0,0 +1,21 @@
+import * as yup from 'yup';
+import { emailSchema, passwordSchema, codeSchema } from '../shared.schema';
+
+export const registerSchema = yup.object({
+  email: emailSchema,
+  password: passwordSchema,
+  confirmPassword: yup
+    .string()
+    .required('This field is required')
+    .oneOf([yup.ref('password'), null], 'Passwords must match'),
+});
+type RegisterSchema = typeof registerSchema;
+export type RegisterData = yup.InferType<RegisterSchema>;
+
+export const registerCodeSchema = yup.object({
+  code: codeSchema,
+});
+type RegisterCodeSchema = typeof registerCodeSchema;
+export type RegisterCodeData = yup.InferType<RegisterCodeSchema>;
+
+export type FullRegisterData = RegisterData & RegisterCodeData;
diff --git a/src/schemas/shared.schema.ts b/src/schemas/shared.schema.ts
new file mode 100644
index 0000000..3f99dd7
--- /dev/null
+++ b/src/schemas/shared.schema.ts
@@ -0,0 +1,20 @@
+import * as yup from 'yup';
+
+export const emailSchema = yup
+  .string()
+  .required('This field is required')
+  .email('Email is not valid');
+type EmailSchema = typeof emailSchema;
+export type EmailData = yup.InferType<EmailSchema>;
+
+export const passwordSchema = yup
+  .string()
+  .transform((value) => value || undefined)
+  .required('This field is required')
+  .min(5, 'Password is too short');
+type PasswordSchema = typeof passwordSchema;
+export type PasswordData = yup.InferType<PasswordSchema>;
+
+export const codeSchema = yup.string().required('This field is required');
+type CodeSchema = typeof codeSchema;
+export type CodeData = yup.InferType<CodeSchema>;