diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..5bc539d
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,47 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["@typescript-eslint", "react", "prettier", "react-hooks"],
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "comma-dangle": ["error", "only-multiline"],
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "prettier/prettier": ["error", { "endOfLine": "auto" }],
+    "@typescript-eslint/interface-name-prefix": "off",
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-var-reqiures": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "root": true
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..93a5548
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,107 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Package-lock
+package-lock.json
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..df07c23
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,11 @@
+# Ignore artifacts:
+build
+coverage
+
+# Ignore all HTML files:
+*.html
+
+# Ignore all eslint and prettier files:
+*.json
+*.prettierignore
+*.eslintrc
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..c651400
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,9 @@
+{
+  "endOfLine": "auto",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "arrowParens": "always"
+}
diff --git a/SetUpBackend.md b/SetUpBackend.md
new file mode 100644
index 0000000..1bc3ba9
--- /dev/null
+++ b/SetUpBackend.md
@@ -0,0 +1,29 @@
+# Setup backend locally
+
+1. Go to https://github.com/vitaly-sazonov/kanban-rest
+2. Clone this repo to your pc
+3. Install git and NodeJS, if you don't have them
+4. Install Docker Desktop for Windows (or another OS), than reboot
+https://docs.docker.com/desktop/windows/install/
+5. Open Docker and install WSL 2 based engine, than reboot
+6. Open Docker and wait few seconds for the daemon to start. (you always need to run docker daemon for backend)
+7. Write in gitbash\console in kanban-rest directory "docker-compose up" to start backend
+
+# Deploy backend
+1. Open cmd\gitbash:
+git clone https://github.com/vitaly-sazonov/kanban-rest
+git switch source
+heroku create --region eu
+heroku addons:create heroku-postgresql:hobby-dev
+heroku config:set NPM_CONFIG_PRODUCTION=false
+heroku config:set LOG_CONSOLE=false
+heroku config:set LOG_ERR_LEVEL=warn
+heroku config:set LOG_INFO_LEVEL=info
+heroku config:set JWT_SECRET_KEY=secret-key
+heroku config:set SALT_SIZE=10
+heroku config:set USE_FASTIFY=true
+heroku git:remote -a bublikbackend
+git push heroku source:master
+
+# Deployed backend url
+https://bublikbackend.herokuapp.com/
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d2ecb65
--- /dev/null
+++ b/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "project-management-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.8.1",
+    "@types/react-beautiful-dnd": "^13.1.2",
+    "jwt-decode": "^3.1.2",
+    "react": "^18.1.0",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-dom": "^18.1.0",
+    "react-hook-form": "^7.31.1",
+    "react-redux": "^8.0.1",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "cross-env HTTPS=true react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/user-event": "^14.1.1",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.30",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
+    "cross-env": "^7.0.3",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-prettier": "^4.0.0",
+    "prettier": "2.6.0",
+    "sass": "^1.51.0",
+    "typescript": "^4.6.4"
+  }
+}
diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 0000000..78f7f20
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1 @@
+/*  /index.html  200
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..bda0479
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..86d126e
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="project-management-app"
+    />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Project Management App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..1f2f141
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..e9e57dc
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.scss b/src/App.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/App.test.tsx b/src/App.test.tsx
new file mode 100644
index 0000000..7fe2a47
--- /dev/null
+++ b/src/App.test.tsx
@@ -0,0 +1,50 @@
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import { store } from './app/store';
+
+import { App } from './App';
+import { Header } from './components/layout/header/Header';
+import { Footer } from './components/layout/footer/Footer';
+
+describe('Layout', () => {
+  // it('Header', () => {
+  //   render(
+  //     <MemoryRouter>
+  //       <Header />
+  //     </MemoryRouter>
+  //   );
+
+  //   const HEADER = screen.getByTestId('header');
+  //   expect(HEADER).toBeInTheDocument();
+
+  //   const HEADER_BTNS = screen.getAllByTestId('PrimaryButton');
+  //   expect(HEADER_BTNS.length).toBe(2);
+  // });
+
+  it('Footer', () => {
+    render(
+      <MemoryRouter>
+        <Footer />
+      </MemoryRouter>
+    );
+
+    const FOOTER = screen.getByTestId('footer');
+    expect(FOOTER).toBeInTheDocument();
+  });
+});
+
+describe('Welcome page', () => {
+  it('Welcome page', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <App />
+        </MemoryRouter>
+      </Provider>
+    );
+
+    const WELCOME_PAGE = screen.getByTestId('welcomepage');
+    expect(WELCOME_PAGE).toBeInTheDocument();
+  });
+});
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..cd6f912
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,68 @@
+import { FC } from 'react';
+import { Routes, Route } from 'react-router-dom';
+
+import { Layout } from './components/layout/Layout';
+import { WelcomePage } from './pages/welcomePage/WelcomePage';
+import { Boards } from './pages/boards/Boards';
+import { Board } from './pages/board/Board';
+import { NotFound } from './pages/notfound/NotFound';
+import { PATHS } from './shared/constants/routes';
+
+import './App.scss';
+import RequireAuth from './components/requireAuth/RequireAuth';
+import SignIn from './pages/signIn/SignIn';
+import SignUp from './pages/signUp/SignUp';
+import { UserProfile } from './pages';
+
+const App: FC = () => {
+  return (
+    <Routes>
+      <Route path={PATHS.main} element={<Layout />}>
+        <Route index element={<WelcomePage />} />
+        <Route
+          path={PATHS.boards}
+          element={
+            <RequireAuth needAuth={true}>
+              <Boards />
+            </RequireAuth>
+          }
+        />
+        <Route
+          path={PATHS.board}
+          element={
+            <RequireAuth needAuth={true}>
+              <Board />
+            </RequireAuth>
+          }
+        />
+        <Route
+          path={PATHS.userProfile}
+          element={
+            <RequireAuth needAuth={true}>
+              <UserProfile />
+            </RequireAuth>
+          }
+        />
+        <Route
+          path={PATHS.signIn}
+          element={
+            <RequireAuth needAuth={false}>
+              <SignIn />
+            </RequireAuth>
+          }
+        />
+        <Route
+          path={PATHS.signUp}
+          element={
+            <RequireAuth needAuth={false}>
+              <SignUp />
+            </RequireAuth>
+          }
+        />
+        <Route path={PATHS.notFound} element={<NotFound />} />
+      </Route>
+    </Routes>
+  );
+};
+
+export { App };
diff --git a/src/app/RtkQuery.ts b/src/app/RtkQuery.ts
new file mode 100644
index 0000000..db895af
--- /dev/null
+++ b/src/app/RtkQuery.ts
@@ -0,0 +1,307 @@
+import {
+  BaseQueryFn,
+  FetchArgs,
+  createApi,
+  fetchBaseQuery,
+  FetchBaseQueryError,
+} from '@reduxjs/toolkit/query/react';
+import { saveTokenToLS } from '../features/ls-load-save';
+import { logoutUser } from '../reducers/auth';
+import { setEmptyUser } from '../reducers/userReducer';
+import { BoardType, SigninType, SignupType, ColumnType, TaskType, FileType } from './apiTypes';
+import { RootState } from './store';
+
+const baseQuery = fetchBaseQuery({
+  baseUrl: 'https://bublikbackend2.herokuapp.com/',
+  prepareHeaders: (headers, { getState }) => {
+    const token = (getState() as RootState).authStorage.userToken;
+
+    if (token) {
+      headers.set('authorization', `Bearer ${token}`);
+    }
+
+    return headers;
+  },
+});
+
+const baseQueryAuth: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (
+  args,
+  api,
+  extraOptions
+) => {
+  const result = await baseQuery(args, api, extraOptions);
+  if (result.error && result.error.status === 401) {
+    api.dispatch(logoutUser());
+    api.dispatch(setEmptyUser());
+    saveTokenToLS('');
+  }
+  return result;
+};
+
+export const apiUser = createApi({
+  reducerPath: 'apiUser',
+  tagTypes: [
+    'User',
+    'UserUpdate',
+    'TaskUpdate',
+    'TaskDelete',
+    'TaskPost',
+    'Board',
+    'Column',
+    'Task',
+  ],
+  baseQuery: baseQueryAuth,
+  endpoints: (build) => ({
+    //USERS
+    getUsers: build.query({
+      query: () => `users`,
+      providesTags: ['UserUpdate', 'TaskUpdate'],
+    }),
+    getUserById: build.query({
+      query: (userId: string) => {
+        return {
+          url: `users/${userId}`,
+        };
+      },
+      providesTags: ['UserUpdate'],
+    }),
+    updateUser: build.mutation({
+      query(data: { userId: string; body: SignupType }) {
+        const { userId, body } = data;
+        return {
+          url: `users/${userId}`,
+          method: 'PUT',
+          body,
+        };
+      },
+      invalidatesTags: ['User', 'UserUpdate'],
+    }),
+    deleteUser: build.mutation({
+      query(userId: string) {
+        return {
+          url: `users/${userId}`,
+          method: 'DELETE',
+        };
+      },
+      invalidatesTags: ['User', 'UserUpdate'],
+    }),
+
+    //SIGN
+    signup: build.mutation({
+      query(body: SignupType) {
+        return {
+          url: `signup`,
+          method: 'POST',
+          body,
+        };
+      },
+      invalidatesTags: ['User', 'UserUpdate'],
+    }),
+    signin: build.mutation({
+      query(body: SigninType) {
+        return {
+          url: `signin`,
+          method: 'POST',
+          body,
+        };
+      },
+      invalidatesTags: ['User'],
+    }),
+
+    //BOARDS
+    getBoards: build.query({
+      query: () => `boards`,
+      providesTags: ['Board'],
+    }),
+    getBoardsById: build.query({
+      query: (boardId: string) => {
+        return {
+          url: `boards/${boardId}`,
+        };
+      },
+      providesTags: ['Board'],
+    }),
+    postBoard: build.mutation({
+      query(body: BoardType) {
+        return {
+          url: `boards`,
+          method: 'POST',
+          body,
+        };
+      },
+      invalidatesTags: ['Board'],
+    }),
+    updateBoard: build.mutation({
+      query(data: { boardId: string; body: BoardType }) {
+        const { boardId, body } = data;
+        return {
+          url: `boards/${boardId}`,
+          method: 'PUT',
+          body,
+        };
+      },
+      invalidatesTags: ['Board'],
+    }),
+    deleteBoard: build.mutation({
+      query(boardId: string) {
+        return {
+          url: `boards/${boardId}`,
+          method: 'DELETE',
+        };
+      },
+      invalidatesTags: ['Board'],
+    }),
+
+    //COLUMNS
+    getColumns: build.query({
+      query: (data: { boardId?: string }) => {
+        const { boardId } = data;
+        return {
+          url: `boards/${boardId}/columns`,
+        };
+      },
+      providesTags: ['Column'],
+    }),
+    getColumnById: build.query({
+      query: (data: { columnId: string; boardId: string }) => {
+        const { columnId, boardId } = data;
+        return {
+          url: `boards/${boardId}/columns/${columnId}`,
+        };
+      },
+      providesTags: ['Column'],
+    }),
+    postColumn: build.mutation({
+      query(data: { boardId: string; body: ColumnType }) {
+        const { boardId, body } = data;
+        return {
+          url: `boards/${boardId}/columns`,
+          method: 'POST',
+          body,
+        };
+      },
+      invalidatesTags: ['Column'],
+    }),
+    updateColumn: build.mutation({
+      query: (data: { columnId: string; boardId: string; body: ColumnType }) => {
+        const { columnId, boardId, body } = data;
+        return {
+          url: `boards/${boardId}/columns/${columnId}`,
+          method: 'PUT',
+          body,
+        };
+      },
+      invalidatesTags: ['Column'],
+    }),
+    deleteColumn: build.mutation({
+      query(data: { columnId: string; boardId: string }) {
+        const { columnId, boardId } = data;
+        return {
+          url: `boards/${boardId}/columns/${columnId}`,
+          method: 'DELETE',
+        };
+      },
+      invalidatesTags: ['Column'],
+    }),
+
+    //TASKS
+    getTasks: build.query({
+      query(data: { columnId: string; boardId: string }) {
+        const { columnId, boardId } = data;
+        return {
+          url: `boards/${boardId}/columns/${columnId}/tasks`,
+        };
+      },
+      providesTags: ['Task', 'TaskDelete', 'TaskPost', 'TaskUpdate'],
+    }),
+    getTaskById: build.query({
+      query: (data: { columnId: string; boardId: string; taskId: string }) => {
+        const { columnId, boardId, taskId } = data;
+        return {
+          url: `boards/${boardId}/columns/${columnId}/tasks/${taskId}`,
+        };
+      },
+      providesTags: ['Task'],
+    }),
+    postTask: build.mutation({
+      query(data: { boardId: string; columnId: string; body: TaskType }) {
+        const { boardId, columnId, body } = data;
+        return {
+          url: `boards/${boardId}/columns/${columnId}/tasks`,
+          method: 'POST',
+          body,
+        };
+      },
+      invalidatesTags: ['TaskPost'],
+    }),
+    updateTask: build.mutation({
+      query: (data: { columnId: string; boardId: string; taskId: string; task: TaskType }) => {
+        const { columnId, boardId, taskId, task } = data;
+        const body = { ...task, columnId, boardId };
+        return {
+          url: `boards/${boardId}/columns/${columnId}/tasks/${taskId}`,
+          method: 'PUT',
+          body,
+        };
+      },
+      invalidatesTags: ['TaskUpdate'],
+    }),
+    deleteTask: build.mutation({
+      query(data: { columnId: string; boardId: string; taskId: string }) {
+        const { columnId, boardId, taskId } = data;
+        return {
+          url: `boards/${boardId}/columns/${columnId}/tasks/${taskId}`,
+          method: 'DELETE',
+        };
+      },
+      invalidatesTags: ['TaskDelete'],
+    }),
+
+    //FILE
+    postFile: build.mutation({
+      query(body: FileType) {
+        return {
+          url: `file`,
+          method: 'POST',
+          body,
+        };
+      },
+      // invalidatesTags: ['File'],
+    }),
+    getFile: build.query({
+      query: (data: { taskId: string }) => {
+        const { taskId } = data;
+        return {
+          url: `file/${taskId}`,
+        };
+      },
+      // providesTags: ['File'],
+    }),
+  }),
+});
+
+export const {
+  useGetUsersQuery,
+  useGetUserByIdQuery,
+  useUpdateUserMutation,
+  useDeleteUserMutation,
+  useSigninMutation,
+  useSignupMutation,
+  useDeleteBoardMutation,
+  useGetBoardsByIdQuery,
+  useGetBoardsQuery,
+  usePostBoardMutation,
+  useUpdateBoardMutation,
+  useDeleteColumnMutation,
+  useGetColumnByIdQuery,
+  useGetColumnsQuery,
+  usePostColumnMutation,
+  useUpdateColumnMutation,
+  useGetTasksQuery,
+  useGetTaskByIdQuery,
+  useDeleteTaskMutation,
+  usePostTaskMutation,
+  useUpdateTaskMutation,
+  useGetFileQuery,
+  usePostFileMutation,
+} = apiUser;
diff --git a/src/app/apiTypes.ts b/src/app/apiTypes.ts
new file mode 100644
index 0000000..a8f1343
--- /dev/null
+++ b/src/app/apiTypes.ts
@@ -0,0 +1,32 @@
+export type SigninType = {
+  login: string;
+  password: string;
+};
+
+export type SignupType = {
+  name: string;
+  login: string;
+  password: string;
+};
+
+export type BoardType = {
+  title: string;
+  description: string;
+};
+
+export type ColumnType = {
+  title: string;
+  order?: number;
+};
+
+export type TaskType = {
+  title: string;
+  order?: number;
+  description: string;
+  userId: string;
+};
+
+export type FileType = {
+  taskId: string;
+  file: string;
+};
diff --git a/src/app/hooks.ts b/src/app/hooks.ts
new file mode 100644
index 0000000..520e84e
--- /dev/null
+++ b/src/app/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/src/app/store.ts b/src/app/store.ts
new file mode 100644
index 0000000..60b8198
--- /dev/null
+++ b/src/app/store.ts
@@ -0,0 +1,26 @@
+import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
+import { apiUser } from './RtkQuery';
+import authSlice from '../reducers/auth';
+import userSlice from '../reducers/userReducer';
+import langSlice from '../reducers/langReducer';
+import { localStorageMiddleware } from '../middleware/ls-middleware';
+
+export const store = configureStore({
+  reducer: {
+    authStorage: authSlice,
+    userStorage: userSlice,
+    langStorage: langSlice,
+    [apiUser.reducerPath]: apiUser.reducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(apiUser.middleware, localStorageMiddleware),
+});
+
+export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType<typeof store.getState>;
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>;
diff --git a/src/components/boardColumn/BoardColumn.scss b/src/components/boardColumn/BoardColumn.scss
new file mode 100644
index 0000000..31ed959
--- /dev/null
+++ b/src/components/boardColumn/BoardColumn.scss
@@ -0,0 +1,107 @@
+@import '../../sass/Constants.scss';
+
+.board__column-container {
+  display: flex;
+  row-gap: $base;
+}
+
+.board__column {
+  display: flex;
+  flex-direction: column;
+  row-gap: $base * 2;
+  flex-basis: 26%;
+  min-width: $base * 50;
+  overflow: auto;
+  max-height: 65vh;
+  margin-right: 0.063rem;
+  padding: $base * 2.2 0 $base * 2.2 $base * 2.2;
+  border-top: 0.5rem solid $color-purple-09;
+  border-radius: $base * 2;
+  background-color: $color-white-07;
+  box-shadow: 0.063rem 0.063rem 0.063rem $color-dark-05, 0 0 0.06em $color-dark-05,
+    0 0 0.06em $color-dark-05;
+  overflow-x: hidden;
+}
+
+.board__column-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-bottom: $base * 2;
+  border-bottom: 0.063rem solid $color-dark-02;
+  min-width: 100%;
+  max-width: fit-content;
+}
+
+.cards__list__container {
+  @include scroll;
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+.cards__list {
+  display: flex;
+  flex-direction: column;
+  row-gap: $base * 4;
+  padding: $base 0;
+}
+
+.task {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  padding: $base;
+  border: 0.063rem solid $color-dark-04;
+  border-radius: $base;
+  box-shadow: 0.063rem 0.063rem 0.063rem $color-dark-05, 0 0 0.06em $color-dark-05,
+    0 0 0.06em $color-dark-05;
+  min-width: 100%;
+  max-width: fit-content;
+}
+
+.task-checkbox {
+  cursor: pointer;
+}
+
+.task-checkbox:checked + .task-text {
+  text-decoration: line-through;
+}
+
+.task-text {
+  position: relative;
+  font-size: $fs-l;
+  font-weight: $fw-semi-bold;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  cursor: pointer;
+  transition: $transition-01;
+  overflow: hidden;
+  max-height: 3rem;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    left: -100%;
+    content: '';
+    width: 100%;
+    height: 0.125rem;
+    background-color: $color-purple;
+    transition: $transition-01;
+  }
+
+  &:hover {
+    &::after {
+      left: 0;
+      transition: $transition-01;
+    }
+  }
+}
+
+.column__btn {
+  border: 0.063rem dotted $color-dark-03;
+}
diff --git a/src/components/boardColumn/BoardColumn.tsx b/src/components/boardColumn/BoardColumn.tsx
new file mode 100644
index 0000000..5050b87
--- /dev/null
+++ b/src/components/boardColumn/BoardColumn.tsx
@@ -0,0 +1,207 @@
+import React, { FC, RefObject, useEffect, useRef, useState } from 'react';
+
+import { ChangeTitleBtns, DeleteButton, TertiaryButton } from '../buttons';
+import { BoardColumnTitle, CardContainer, CardList, Modal } from '..';
+
+import './BoardColumn.scss';
+
+import { useDeleteColumnMutation, useGetTasksQuery, usePostTaskMutation } from '../../app/RtkQuery';
+
+import './BoardColumn.scss';
+import { useAppSelector } from '../../app/hooks';
+import { ColumnType } from '../../pages/board/Board';
+import { Draggable } from 'react-beautiful-dnd';
+import { localizationObj } from '../../features/localization';
+
+type BoardColumnProps = {
+  columnTitle: string;
+  boardId: string;
+  columnId: string;
+  order: number;
+  index: number;
+};
+
+type CardsState = {
+  id: string;
+  cardTitle: string;
+  complete: boolean;
+};
+
+export type TasksList = {
+  order: number;
+  title: string;
+  description: string;
+  id: string;
+  boardId: string;
+  columnId: string;
+  userId: string;
+  complete: boolean;
+};
+
+const BoardColumn: FC<BoardColumnProps> = ({ columnTitle, boardId, columnId, order, index }) => {
+  const columnRef = useRef() as RefObject<HTMLDivElement>;
+  const [taskTitle, setTaskTitle] = useState<string>('');
+  const [taskDescription, setTaskDescription] = useState<string>('');
+  const [isOpenCard, setIsOpenCard] = useState<boolean>(false);
+  const { userId } = useAppSelector((state) => state.userStorage);
+  const [tasks, setTasks] = useState<TasksList[]>([]);
+  const { lang } = useAppSelector((state) => state.langStorage);
+  const { data, error, isLoading } = useGetTasksQuery({ columnId, boardId });
+  const [deleteColumn] = useDeleteColumnMutation();
+  const [activeModal, setActiveModal] = useState<boolean>(false);
+  const [postTask] = usePostTaskMutation();
+  const [isTask, setIsTask] = useState(false);
+  const [isColumn, setIsColumn] = useState(false);
+
+  const removeColumn = async () => {
+    setActiveModal(false);
+    await deleteColumn({ boardId, columnId });
+  };
+
+  const addTask = async () => {
+    if (taskTitle.trim().length && taskDescription.trim().length) {
+      await postTask({
+        boardId,
+        columnId,
+        body: {
+          title: taskTitle,
+          description: taskDescription,
+          userId: userId,
+        },
+      });
+
+      setActiveModal(false);
+      setTaskTitle('');
+      setTaskDescription('');
+    }
+  };
+
+  useEffect(() => {
+    columnRef.current ? (columnRef.current.scrollTop = columnRef.current.scrollHeight) : null;
+  }, [data?.length, isOpenCard]);
+
+  useEffect(() => {
+    setTaskTitle('');
+    setIsOpenCard(false);
+  }, [data?.length]);
+
+  useEffect(() => {
+    if (data) {
+      setTasks([...data].sort((a: ColumnType, b: ColumnType) => a.order - b.order));
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (!activeModal) {
+      setIsColumn(false);
+      setIsTask(false);
+      setTaskTitle('');
+      setTaskDescription('');
+    }
+  }, [activeModal]);
+
+  return (
+    <>
+      <Draggable draggableId={columnId} index={index}>
+        {(provided, snapshot) => (
+          <>
+            <div
+              className="board__column-container"
+              ref={provided.innerRef}
+              {...provided.dragHandleProps}
+              {...provided.draggableProps}
+              style={{
+                boxShadow: snapshot.draggingOver ? '0 10px 15px grey' : '',
+                ...provided.draggableProps.style,
+              }}
+            >
+              <div className="board__column" ref={columnRef}>
+                <div className="board__column-head">
+                  <BoardColumnTitle
+                    columnTitle={columnTitle}
+                    columnId={columnId}
+                    boardId={boardId}
+                    order={order}
+                  />
+                  <DeleteButton
+                    type="button"
+                    onClick={() => {
+                      setIsColumn(true);
+                      setActiveModal(true);
+                    }}
+                  />
+                </div>
+                <div className="cards__list__container">
+                  <CardList tasks={tasks} columnId={columnId} />
+                </div>
+                <div className="card__add">
+                  <TertiaryButton
+                    className="button__tertiary column__btn"
+                    type="button"
+                    description={'+ ' + localizationObj[lang].createTask}
+                    isOpenCard={isOpenCard}
+                    onClick={() => {
+                      setIsTask(true);
+                      setActiveModal(true);
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+            <Modal activeModal={activeModal} setActiveModal={setActiveModal}>
+              <div className="modal__wrapper">
+                {isColumn && (
+                  <>
+                    <div className="modal__img modal__img-delete" />
+                    <div className="modal__text">
+                      <h2>{`${localizationObj[lang].doYouWantToDelete} '${columnTitle}' ?`}</h2>
+                      <ChangeTitleBtns
+                        onClickSubmit={removeColumn}
+                        onClickCancel={() => setActiveModal(false)}
+                      />
+                    </div>
+                  </>
+                )}
+
+                {isTask && (
+                  <>
+                    <div className="modal__img modal__img-add" />
+                    <div className="modal__text">
+                      <h2>{`${localizationObj[lang].addATitle}`}</h2>
+                      <input
+                        type="text"
+                        value={taskTitle}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          setTaskTitle(event?.target.value)
+                        }
+                      />
+                      <h2>{`${localizationObj[lang].addADescription}`}</h2>
+                      <input
+                        type="text"
+                        value={taskDescription}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          setTaskDescription(event?.target.value)
+                        }
+                      />
+
+                      <ChangeTitleBtns
+                        onClickSubmit={addTask}
+                        onClickCancel={() => {
+                          setActiveModal(false);
+                          setTaskTitle('');
+                          setTaskDescription('');
+                        }}
+                      />
+                    </div>
+                  </>
+                )}
+              </div>
+            </Modal>
+          </>
+        )}
+      </Draggable>
+    </>
+  );
+};
+
+export default BoardColumn;
diff --git a/src/components/boardColumn/components/BoardColumnTitle/BoardColumnTitle.scss b/src/components/boardColumn/components/BoardColumnTitle/BoardColumnTitle.scss
new file mode 100644
index 0000000..3a84209
--- /dev/null
+++ b/src/components/boardColumn/components/BoardColumnTitle/BoardColumnTitle.scss
@@ -0,0 +1,25 @@
+@import '../../../../sass/Constants.scss';
+
+.board__column-input {
+  display: flex;
+  flex-direction: column;
+  row-gap: $base * 2;
+  padding: $base * 2 0;
+}
+
+.board__column-btns {
+  display: flex;
+  column-gap: $base;
+}
+
+.board__column-title {
+  overflow: hidden;
+  flex-basis: 85%;
+  -webkit-box-orient: vertical;
+  display: block;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-word;
+}
diff --git a/src/components/boardColumn/components/BoardColumnTitle/BoardColumnTitle.tsx b/src/components/boardColumn/components/BoardColumnTitle/BoardColumnTitle.tsx
new file mode 100644
index 0000000..4b809f3
--- /dev/null
+++ b/src/components/boardColumn/components/BoardColumnTitle/BoardColumnTitle.tsx
@@ -0,0 +1,69 @@
+import { FC, useState } from 'react';
+
+import { useUpdateColumnMutation } from '../../../../app/RtkQuery';
+import { ChangeTitleBtns } from '../../../buttons';
+
+import './BoardColumnTitle.scss';
+
+interface BoardColumnTitleTypes {
+  columnTitle: string;
+  columnId: string;
+  boardId: string;
+  order: number;
+}
+
+const BoardColumnTitle: FC<BoardColumnTitleTypes> = ({ columnId, columnTitle, boardId, order }) => {
+  const [currentColumnTitle, setColumnTitle] = useState<string>(columnTitle);
+  const [isOpenColumnTitle, setIsOpenColumnTitle] = useState<boolean>(false);
+
+  const [updateColumn] = useUpdateColumnMutation();
+
+  const changeTitle = () => {
+    setIsOpenColumnTitle(true);
+  };
+
+  const submitColumnTitle = async () => {
+    if (currentColumnTitle.trim().length) {
+      setIsOpenColumnTitle(false);
+
+      await updateColumn({
+        columnId,
+        boardId,
+        body: { title: currentColumnTitle, order },
+      });
+    }
+  };
+
+  const cancelColumnTitle = () => {
+    setIsOpenColumnTitle(false);
+    setColumnTitle(columnTitle);
+  };
+
+  const handleColumnTitleValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const currentInput = event.target as HTMLInputElement;
+    setColumnTitle(currentInput.value);
+  };
+
+  return (
+    <>
+      {isOpenColumnTitle ? (
+        <div className="board__column-input">
+          <input
+            type="text"
+            placeholder="change title"
+            onChange={handleColumnTitleValue}
+            value={currentColumnTitle}
+          />
+
+          <ChangeTitleBtns onClickSubmit={submitColumnTitle} onClickCancel={cancelColumnTitle} />
+        </div>
+      ) : (
+        <h4 className="h4 board__column-title" onClick={changeTitle}>
+          {columnTitle}
+        </h4>
+      )}
+    </>
+  );
+};
+
+export { BoardColumnTitle };
diff --git a/src/components/buttons/backButton/BackButton.scss b/src/components/buttons/backButton/BackButton.scss
new file mode 100644
index 0000000..0b605d8
--- /dev/null
+++ b/src/components/buttons/backButton/BackButton.scss
@@ -0,0 +1,70 @@
+@import '../../../sass/Constants.scss';
+
+.btn-back__wrapper {
+  @include flexCenter;
+  gap: $base;
+  width: $base * 20;
+  padding: $base;
+  background-color: $color-white;
+  border: none;
+  border-radius: $base;
+  box-shadow: 0.063rem 0.063rem 0.063rem $color-dark-05, 0 0 0.06em $color-dark-05,
+    0 0 0.06em $color-dark-05;
+  transition: $transition-01;
+  cursor: pointer;
+
+  &:active {
+    transform: translate(0.063rem, 0.063rem);
+    transition: $transition-01;
+  }
+
+  @media (max-width: $breakpoint-lg-min) {
+    width: auto;
+    height: auto;
+  }
+
+  &:hover {
+    .btn-back {
+      filter: brightness(0.7);
+    }
+
+    .btn-new {
+      filter: brightness(0.7);
+    }
+  }
+}
+
+.btn-back-common {
+  width: $base * 5;
+  height: $base * 5;
+  background-color: transparent;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  border: none;
+
+  @media (max-width: $breakpoint-lg-min) {
+    width: $base * 7;
+    height: $base * 7;
+    background-size: 100%;
+  }
+}
+
+.btn-back {
+  background-image: url('../../../images/icons/back.svg');
+}
+
+.btn-new {
+  background-image: url('../../../images/icons/plus.svg');
+}
+
+.btn-back-description {
+  @include poppins;
+  width: min-content;
+  font-weight: $fw-semi-bold;
+  text-decoration: none;
+
+  @media (max-width: $breakpoint-lg-min) {
+    display: none;
+  }
+}
diff --git a/src/components/buttons/backButton/BackButton.tsx b/src/components/buttons/backButton/BackButton.tsx
new file mode 100644
index 0000000..58ef666
--- /dev/null
+++ b/src/components/buttons/backButton/BackButton.tsx
@@ -0,0 +1,28 @@
+import { FC } from 'react';
+
+import './BackButton.scss';
+
+interface BackButtonProps {
+  classNameWrapper: string;
+  className: string;
+  type: 'button';
+  description: string;
+  onClick?: () => void;
+}
+
+const BackButton: FC<BackButtonProps> = ({
+  classNameWrapper,
+  className,
+  type,
+  description,
+  onClick,
+}) => {
+  return (
+    <button className={classNameWrapper} type={type} onClick={onClick}>
+      <div className={className} />
+      <div className="btn-back-description">{description}</div>
+    </button>
+  );
+};
+
+export { BackButton };
diff --git a/src/components/buttons/changeTitleBtns/ChangeTitleBtns.scss b/src/components/buttons/changeTitleBtns/ChangeTitleBtns.scss
new file mode 100644
index 0000000..844d28e
--- /dev/null
+++ b/src/components/buttons/changeTitleBtns/ChangeTitleBtns.scss
@@ -0,0 +1,58 @@
+@import '../../../sass/Constants.scss';
+
+.button-modal__wrapper {
+  @include poppins;
+  display: flex;
+  align-items: center;
+  column-gap: 0.125rem;
+  padding: 0 $base;
+  background-color: transparent;
+  border: none;
+  border-radius: $base;
+  box-shadow: 0.063rem 0.063rem 0.063rem $color-dark-05, 0 0 0.06em $color-dark-05,
+    0 0 0.06em $color-dark-05;
+  cursor: pointer;
+  transition: $transition-01;
+
+  &:hover {
+    .button-modal {
+      filter: brightness(0.8);
+      transition: $transition-01;
+    }
+  }
+
+  &:active {
+    transform: translate(0.063rem, 0.063rem);
+    transition: $transition-01;
+  }
+}
+
+.button-modal {
+  width: $base * 6;
+  height: $base * 6;
+  background-size: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  transition: $transition-01;
+}
+
+.space {
+  justify-content: space-between;
+}
+
+.button-modal-width {
+  flex-basis: 48%;
+}
+
+.button__submit {
+  background-image: url('../../../images/icons/submit.svg');
+}
+
+.button__cancel {
+  background-image: url('../../../images/icons/cancel.svg');
+}
+
+.button-modal__description {
+  font-size: $fs-m;
+  font-weight: $fw-semi-bold;
+}
diff --git a/src/components/buttons/changeTitleBtns/ChangeTitleBtns.tsx b/src/components/buttons/changeTitleBtns/ChangeTitleBtns.tsx
new file mode 100644
index 0000000..bf39dd3
--- /dev/null
+++ b/src/components/buttons/changeTitleBtns/ChangeTitleBtns.tsx
@@ -0,0 +1,28 @@
+import { FC, MouseEvent } from 'react';
+import { useAppSelector } from '../../../app/hooks';
+import { localizationObj } from '../../../features/localization';
+
+import './ChangeTitleBtns.scss';
+
+interface ChangeTitleBtnsProps {
+  onClickSubmit: (event: MouseEvent<HTMLButtonElement>) => void;
+  onClickCancel: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+
+const ChangeTitleBtns: FC<ChangeTitleBtnsProps> = ({ onClickSubmit, onClickCancel }) => {
+  const { lang } = useAppSelector((state) => state.langStorage);
+  return (
+    <div className="board__column-btns">
+      <button className="button-modal__wrapper" type="submit" onClick={onClickSubmit}>
+        <div className="button-modal button__submit" />
+        <div className="button-modal__description">{localizationObj[lang].submit}</div>
+      </button>
+      <button className="button-modal__wrapper" type="button" onClick={onClickCancel}>
+        <div className="button-modal button__cancel" />
+        <div className="button-modal__description">{localizationObj[lang].cancel}</div>
+      </button>
+    </div>
+  );
+};
+
+export { ChangeTitleBtns };
diff --git a/src/components/buttons/deleteButton/DeleteButton.scss b/src/components/buttons/deleteButton/DeleteButton.scss
new file mode 100644
index 0000000..54bbc82
--- /dev/null
+++ b/src/components/buttons/deleteButton/DeleteButton.scss
@@ -0,0 +1,21 @@
+@import '../../../sass/Constants.scss';
+
+.btn-delete {
+  min-width: $base * 5;
+  min-height: $base * 5;
+  background-color: transparent;
+  background-image: url('../../../images/icons/delete.svg');
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.7);
+  }
+}
+
+.btn-edit {
+  background-image: url('../../../images/icons/edit.svg');
+}
diff --git a/src/components/buttons/deleteButton/DeleteButton.tsx b/src/components/buttons/deleteButton/DeleteButton.tsx
new file mode 100644
index 0000000..792ab42
--- /dev/null
+++ b/src/components/buttons/deleteButton/DeleteButton.tsx
@@ -0,0 +1,16 @@
+import { FC, MouseEvent } from 'react';
+
+import './DeleteButton.scss';
+
+interface DeleteButtonProps {
+  className?: string;
+  type: 'button';
+  id?: string;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+
+const DeleteButton: FC<DeleteButtonProps> = ({ className, type, id, onClick }) => {
+  return <button className={`btn-delete ${className}`} type={type} onClick={onClick} />;
+};
+
+export { DeleteButton };
diff --git a/src/components/buttons/header/PrimaryButton.scss b/src/components/buttons/header/PrimaryButton.scss
new file mode 100644
index 0000000..36afad7
--- /dev/null
+++ b/src/components/buttons/header/PrimaryButton.scss
@@ -0,0 +1,51 @@
+@import '../../../sass/Constants.scss';
+
+.btn {
+  @include poppins;
+  width: $base * 17;
+  height: $base * 7;
+  border: 0.063rem solid $color-yellow;
+  background-color: $color-white;
+  color: $color-white;
+  border-radius: $base * 4;
+  cursor: pointer;
+  transition: $transition;
+
+  &:hover {
+    border: 0.063rem solid $color-yellow;
+    transition: $transition;
+  }
+
+  &:active {
+    border: 0.125rem solid $color-orange;
+    transition: $transition;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 0.3rem $color-yellow-dark;
+    background-color: $color-yellow;
+    color: $color-white;
+    transition: $transition;
+  }
+}
+
+.btn-colored {
+  background-color: $color-yellow;
+  transition: $transition;
+
+  &:hover {
+    background-color: $color-orange;
+    transition: $transition;
+  }
+}
+
+.btn-bordered {
+  color: $color-yellow;
+  transition: $transition;
+
+  &:hover {
+    background-color: $color-yellow;
+    color: $color-white;
+    transition: $transition;
+  }
+}
diff --git a/src/components/buttons/header/PrimaryButton.tsx b/src/components/buttons/header/PrimaryButton.tsx
new file mode 100644
index 0000000..bde17c8
--- /dev/null
+++ b/src/components/buttons/header/PrimaryButton.tsx
@@ -0,0 +1,27 @@
+import { FC } from 'react';
+
+import './PrimaryButton.scss';
+
+interface PrimaryButtonProps {
+  dataTestId?: string;
+  type: 'submit' | 'reset' | 'button';
+  className: string;
+  description: string;
+  onClick?: () => void;
+}
+
+const PrimaryButton: FC<PrimaryButtonProps> = ({
+  dataTestId,
+  type,
+  className,
+  description,
+  onClick,
+}) => {
+  return (
+    <button data-testid={dataTestId} type={type} className={className} onClick={onClick}>
+      {description}
+    </button>
+  );
+};
+
+export { PrimaryButton };
diff --git a/src/components/buttons/index.ts b/src/components/buttons/index.ts
new file mode 100644
index 0000000..473fdd9
--- /dev/null
+++ b/src/components/buttons/index.ts
@@ -0,0 +1,17 @@
+import { DeleteButton } from './deleteButton/DeleteButton';
+import { PrimaryButton } from './header/PrimaryButton';
+import { SecondaryButton } from './secondaryButton/SecondaryButton';
+import { TertiaryButton } from './tertiaryButton/TertiaryButton';
+import { BackButton } from './backButton/BackButton';
+import { Switcher } from './switcher/Switcher';
+import { ChangeTitleBtns } from './changeTitleBtns/ChangeTitleBtns';
+
+export {
+  DeleteButton,
+  PrimaryButton,
+  SecondaryButton,
+  TertiaryButton,
+  BackButton,
+  Switcher,
+  ChangeTitleBtns,
+};
diff --git a/src/components/buttons/secondaryButton/SecondaryButton.tsx b/src/components/buttons/secondaryButton/SecondaryButton.tsx
new file mode 100644
index 0000000..851ee0b
--- /dev/null
+++ b/src/components/buttons/secondaryButton/SecondaryButton.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react';
+
+interface SecondaryButtonProps {
+  className: string;
+  type: 'button';
+  description: string;
+  onClick: () => void;
+}
+
+const SecondaryButton: FC<SecondaryButtonProps> = ({ className, type, description, onClick }) => {
+  return (
+    <button className={className} type={type} onClick={onClick}>
+      {description}
+    </button>
+  );
+};
+
+export { SecondaryButton };
diff --git a/src/components/buttons/switcher/Switcher.scss b/src/components/buttons/switcher/Switcher.scss
new file mode 100644
index 0000000..f1272c7
--- /dev/null
+++ b/src/components/buttons/switcher/Switcher.scss
@@ -0,0 +1,70 @@
+@import '../../../sass/Constants.scss';
+
+.form__container {
+  font-weight: $fw-semi-bold;
+}
+
+.switcher__container {
+  display: flex;
+  align-items: center;
+  gap: $base;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: $base * 8;
+  height: $base * 5;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $color-yellow;
+  -webkit-transition: $transition;
+  transition: $transition;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: $base * 3;
+  width: $base * 3;
+  left: $base;
+  bottom: $base;
+  background-color: $color-white;
+  -webkit-transition: $transition;
+  transition: $transition;
+}
+
+input:checked + .slider {
+  background-color: $color-blue-light;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 0.063rem $color-blue-light;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX($base * 3);
+  -ms-transform: translateX($base * 3);
+  transform: translateX($base * 3);
+}
+
+.slider.round {
+  border-radius: $base * 7;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
diff --git a/src/components/buttons/switcher/Switcher.tsx b/src/components/buttons/switcher/Switcher.tsx
new file mode 100644
index 0000000..237c5ca
--- /dev/null
+++ b/src/components/buttons/switcher/Switcher.tsx
@@ -0,0 +1,44 @@
+import { FC, useEffect, useState } from 'react';
+import { useAppDispatch, useAppSelector } from '../../../app/hooks';
+import { enLang, ruLang } from '../../../features/ls-load-save';
+import { setLang } from '../../../reducers/langReducer';
+
+import './Switcher.scss';
+
+interface SwitcherProps {
+  description: string;
+  type: string;
+  id: string;
+  name: string;
+}
+
+const Switcher: FC<SwitcherProps> = ({ description, type, id, name }: SwitcherProps) => {
+  const dispatch = useAppDispatch();
+  const { lang } = useAppSelector((state) => state.langStorage);
+  const [isChecked, setIsChecked] = useState(lang === ruLang);
+  useEffect(() => {
+    dispatch(setLang(isChecked ? ruLang : enLang));
+  }, [isChecked]);
+
+  return (
+    <div className="form__container">
+      <div>{description}</div>
+      <div className="switcher__container">
+        <div>{enLang}</div>
+        <label className="switch">
+          <input
+            type={type}
+            id={id}
+            name={name}
+            checked={isChecked}
+            onChange={() => setIsChecked(!isChecked)}
+          />
+          <span className="slider round" />
+        </label>
+        <div>{ruLang}</div>
+      </div>
+    </div>
+  );
+};
+
+export { Switcher };
diff --git a/src/components/buttons/tertiaryButton/TertiaryButton.scss b/src/components/buttons/tertiaryButton/TertiaryButton.scss
new file mode 100644
index 0000000..2e9f241
--- /dev/null
+++ b/src/components/buttons/tertiaryButton/TertiaryButton.scss
@@ -0,0 +1,34 @@
+@import '../../../sass/Constants.scss';
+
+.button__tertiary {
+  @include poppins;
+  width: auto;
+  height: fit-content;
+  padding: $base $base * 2;
+  color: $color-dark-09;
+  background-color: $color-grey-07;
+  border-width: 0.063rem;
+  border-style: solid;
+  border-color: $color-dark-09;
+  border-radius: $base;
+  cursor: pointer;
+  transition: $transition;
+
+  &:hover {
+    color: $color-dark;
+    border-color: $color-dark;
+    filter: brightness(0.8);
+    transition: $transition;
+  }
+
+  @media (max-width: $breakpoint-md-min) {
+    padding: $base $base;
+  }
+}
+
+.button__tertiary-description {
+  @media (max-width: $breakpoint-md-min) {
+    width: max-content;
+    font-size: $fs-xs;
+  }
+}
diff --git a/src/components/buttons/tertiaryButton/TertiaryButton.tsx b/src/components/buttons/tertiaryButton/TertiaryButton.tsx
new file mode 100644
index 0000000..ede3900
--- /dev/null
+++ b/src/components/buttons/tertiaryButton/TertiaryButton.tsx
@@ -0,0 +1,31 @@
+import { FC } from 'react';
+
+import './TertiaryButton.scss';
+
+interface TertiaryButtonProps {
+  className: string;
+  type: 'button';
+  description: string;
+  isOpenCard?: boolean;
+  onClick: () => void;
+}
+
+const TertiaryButton: FC<TertiaryButtonProps> = ({
+  className,
+  type,
+  description,
+  isOpenCard,
+  onClick,
+}) => {
+  return (
+    <button
+      className={isOpenCard ? `${className} hidden` : className}
+      type={type}
+      onClick={onClick}
+    >
+      <span className="button__tertiary-description">{description}</span>
+    </button>
+  );
+};
+
+export { TertiaryButton };
diff --git a/src/components/cardContainer/CardContainer.scss b/src/components/cardContainer/CardContainer.scss
new file mode 100644
index 0000000..48e74f7
--- /dev/null
+++ b/src/components/cardContainer/CardContainer.scss
@@ -0,0 +1,13 @@
+@import '../../sass/Constants.scss';
+
+.button__container {
+  display: flex;
+  align-items: center;
+  column-gap: $base;
+  width: 60%;
+  margin: 0 auto 0 0;
+}
+
+.hidden {
+  display: none;
+}
diff --git a/src/components/cardContainer/CardContainer.tsx b/src/components/cardContainer/CardContainer.tsx
new file mode 100644
index 0000000..1630ce6
--- /dev/null
+++ b/src/components/cardContainer/CardContainer.tsx
@@ -0,0 +1,49 @@
+import { FC, ChangeEvent } from 'react';
+
+import { Textarea } from '..';
+import { useAppSelector } from '../../app/hooks';
+import { localizationObj } from '../../features/localization';
+import { SecondaryButton, DeleteButton } from '../buttons';
+
+import './CardContainer.scss';
+
+interface CardContainerProps {
+  isOpenCard: boolean;
+  onClick: () => void;
+  cardTitle: string;
+  handleCardTitle: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+  addCard: () => void;
+}
+
+const CardContainer: FC<CardContainerProps> = ({
+  isOpenCard,
+  onClick,
+  cardTitle,
+  handleCardTitle,
+  addCard,
+}) => {
+  const { lang } = useAppSelector((state) => state.langStorage);
+  return (
+    <section className={isOpenCard ? 'card__container' : 'card__container hidden'}>
+      <Textarea
+        className="textarea"
+        cols={10}
+        rows={3}
+        placeholder={localizationObj[lang].addATitle}
+        value={cardTitle}
+        onChange={handleCardTitle}
+      />
+      <div className="button__container">
+        <SecondaryButton
+          className="button__tertiary"
+          type="button"
+          description={'+ ' + localizationObj[lang].createTask}
+          onClick={addCard}
+        />
+        <DeleteButton type="button" onClick={onClick} />
+      </div>
+    </section>
+  );
+};
+
+export { CardContainer };
diff --git a/src/components/cardItem/CardItem.scss b/src/components/cardItem/CardItem.scss
new file mode 100644
index 0000000..9aa767b
--- /dev/null
+++ b/src/components/cardItem/CardItem.scss
@@ -0,0 +1,72 @@
+@import '../../sass/Constants.scss';
+
+.board__task {
+  display: flex;
+  flex-direction: column;
+  row-gap: $base * 2;
+  width: 97%;
+  border-radius: $base;
+}
+
+.board__task-input {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  row-gap: $base * 2;
+  border: 0.063rem solid $color-dark-04;
+  border-radius: $base;
+}
+
+.board__task-btns {
+  display: flex;
+  column-gap: $base * 2;
+}
+
+.task__btns {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.task-owner {
+  font-size: $fs-xs;
+  font-weight: $fw-semi-bold;
+  cursor: pointer;
+}
+
+.task-owner-user {
+  font-weight: $fw-regular;
+}
+
+.users-list__item {
+  position: relative;
+  margin-left: auto;
+  cursor: grab;
+  width: fit-content;
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    content: '';
+    width: 0%;
+    height: 0.125rem;
+    background-color: $color-purple;
+    transition: $transition-01;
+  }
+
+  &:hover {
+    color: $color-orange;
+    transition: $transition-01;
+    overflow: hidden;
+
+    &::after {
+      width: 100%;
+    }
+  }
+
+  @media (max-width: $breakpoint-sm-min) {
+    margin: auto;
+  }
+}
diff --git a/src/components/cardItem/CardItem.tsx b/src/components/cardItem/CardItem.tsx
new file mode 100644
index 0000000..c3177a3
--- /dev/null
+++ b/src/components/cardItem/CardItem.tsx
@@ -0,0 +1,322 @@
+import React, { FC, useEffect, useState } from 'react';
+import { Modal, Textarea } from '..';
+import { ChangeTitleBtns, DeleteButton, TertiaryButton } from '../buttons';
+
+import { useDeleteTaskMutation, useGetUsersQuery, useUpdateTaskMutation } from '../../app/RtkQuery';
+
+import './CardItem.scss';
+import { useAppSelector } from '../../app/hooks';
+import { Draggable } from 'react-beautiful-dnd';
+import { localizationObj } from '../../features/localization';
+import { createPortal } from 'react-dom';
+
+interface CardItemProps {
+  id: string;
+  cardTitle: string;
+  cardDescription: string;
+  columnId: string;
+  boardId: string;
+  userId: string;
+  order: number;
+  index: number;
+}
+
+const CardItem: FC<CardItemProps> = ({
+  id,
+  cardTitle,
+  cardDescription,
+  order,
+  columnId,
+  boardId,
+  userId: userOwnerId,
+  index,
+}) => {
+  const [taskTitle, setTaskTitle] = useState(cardTitle);
+  const [taskDescription, setTaskDescription] = useState(cardDescription);
+  const [updateTask] = useUpdateTaskMutation();
+  const [deleteTask] = useDeleteTaskMutation();
+  const [activeModal, setActiveModal] = useState<boolean>(false);
+  const [isDeleteModal, setIsDeleteModal] = useState<boolean>(false);
+  const [isUserChangeModal, setIsUserChangeModal] = useState<boolean>(false);
+  const { userId } = useAppSelector((state) => state.userStorage);
+  const { lang } = useAppSelector((state) => state.langStorage);
+  const { data: users = [] } = useGetUsersQuery('');
+  const [userOwner, setUserOwner] = useState<string>('');
+  const [isOpenTask, setIsOpenTask] = useState(false);
+  const container = document.getElementById('root')!;
+  const [isDisplayedTitleTextarea, setIsDisplayedTitleTextarea] = useState(false);
+  const [isDisplayedDescrTextarea, setIsDisplayedDescrTextarea] = useState(false);
+
+  const handleTaskTitleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTaskTitle(event.target.value);
+  };
+
+  const handleTaskDescriptionInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setTaskDescription(event.target.value);
+  };
+
+  const submitTitle = async () => {
+    setIsDisplayedTitleTextarea(false);
+
+    await updateTask({
+      columnId,
+      boardId,
+      taskId: id,
+      task: {
+        title: taskTitle,
+        order,
+        description: taskDescription,
+        userId: userOwnerId,
+      },
+    });
+  };
+
+  const submitDescr = async () => {
+    setIsDisplayedDescrTextarea(false);
+
+    await updateTask({
+      columnId,
+      boardId,
+      taskId: id,
+      task: {
+        title: taskTitle,
+        order,
+        description: taskDescription,
+        userId: userOwnerId,
+      },
+    });
+  };
+
+  const cancelTitle = () => {
+    setIsDisplayedTitleTextarea(false);
+    setTaskTitle(cardTitle);
+  };
+
+  const cancelDescr = () => {
+    setIsDisplayedDescrTextarea(false);
+    setTaskDescription(cardDescription);
+  };
+
+  const closeModal = () => {
+    setIsOpenTask(false);
+    setActiveModal(false);
+    setTaskDescription(cardDescription);
+    setTaskTitle(cardTitle);
+  };
+
+  const removeTask = async () => {
+    await deleteTask({
+      boardId,
+      columnId,
+      taskId: id,
+    });
+    setActiveModal(false);
+  };
+
+  const changeUser = async (newUserId: string) => {
+    if (!users.length) return;
+    await updateTask({
+      columnId,
+      boardId,
+      taskId: id,
+      task: {
+        title: cardTitle,
+        order,
+        description: cardDescription,
+        userId: newUserId,
+      },
+    });
+    setActiveModal(false);
+  };
+
+  const openTaskHandler = () => {
+    setIsOpenTask(true);
+    setActiveModal(true);
+  };
+
+  useEffect(() => {
+    if (!activeModal) {
+      setIsDeleteModal(false);
+      setIsUserChangeModal(false);
+      setIsOpenTask(false);
+      setIsDisplayedTitleTextarea(false);
+      setIsDisplayedDescrTextarea(false);
+    }
+  }, [activeModal]);
+
+  useEffect(() => {
+    if (users.length) {
+      const userName = users.find((user: { id: string; name: string }) => user.id === userOwnerId);
+      setUserOwner(userName ? userName.name : 'Deleted');
+    }
+  }, [users, userOwnerId]);
+
+  return (
+    <>
+      <Draggable draggableId={id} index={index}>
+        {(provided, snapshot) => (
+          <li
+            className="board__task"
+            ref={provided.innerRef}
+            {...provided.dragHandleProps}
+            {...provided.draggableProps}
+            style={{
+              boxShadow: snapshot.isDragging ? '0 10px 15px grey' : '',
+              background: snapshot.isDragging ? 'white' : '',
+              ...provided.draggableProps.style,
+            }}
+          >
+            <>
+              <span key={id} className="task">
+                <span className="task-text" onClick={openTaskHandler}>
+                  {cardTitle}
+                </span>
+                <span
+                  className="task-owner"
+                  onClick={() => {
+                    setIsUserChangeModal(true);
+                    setActiveModal(true);
+                  }}
+                >
+                  {`${localizationObj[lang].author}: `}
+                  <span className="task-owner-user">{userOwner}</span>
+                </span>
+                <div className="task__btns">
+                  <DeleteButton className="btn-edit" type="button" onClick={openTaskHandler} />
+                  <DeleteButton
+                    type="button"
+                    id={id}
+                    onClick={() => {
+                      setActiveModal(true);
+                      setIsDeleteModal(true);
+                    }}
+                  />
+                </div>
+              </span>
+            </>
+          </li>
+        )}
+      </Draggable>
+
+      {createPortal(
+        <Modal activeModal={activeModal} setActiveModal={setActiveModal}>
+          <>
+            {isDeleteModal && (
+              <div className="modal__wrapper">
+                <div className="modal__img modal__img-delete" />
+                <div className="modal__text">
+                  <h2>{`${localizationObj[lang].doYouWantToDelete} '${cardTitle}' ?`}</h2>
+                  <ChangeTitleBtns
+                    onClickSubmit={removeTask}
+                    onClickCancel={() => setActiveModal(false)}
+                  />
+                </div>
+              </div>
+            )}
+            {isUserChangeModal && (
+              <div className="modal__wrapper">
+                <div className="modal__img modal__img-user-change" />
+                <div className="modal__text">
+                  <h2>{`${localizationObj[lang].doYouWantToChangeUser}`}</h2>
+                  <ul className="users-list">
+                    {users.map((user: { id: string; name: string }) => (
+                      <li
+                        className="users-list__item"
+                        key={user.id}
+                        onClick={() => {
+                          changeUser(user.id);
+                        }}
+                      >
+                        {user.name}
+                      </li>
+                    ))}
+                  </ul>
+                  <button
+                    className="button-modal__wrapper"
+                    type="button"
+                    onClick={() => setActiveModal(false)}
+                  >
+                    <div className="button-modal button__cancel" />
+                    <div className="button-modal__description">{localizationObj[lang].cancel}</div>
+                  </button>
+                </div>
+              </div>
+            )}
+            {isOpenTask && (
+              <div className="modal__wrapper modal__tasks">
+                <h3 className="modal__tasks-user">
+                  {`${localizationObj[lang].user}: `}
+                  {userOwner}
+                </h3>
+                <div className="modal__text modal__tasks-text">
+                  {!isDisplayedTitleTextarea && (
+                    <>
+                      <div className="modal__text-wrapper">
+                        <DeleteButton
+                          className="btn-edit"
+                          type="button"
+                          onClick={() => setIsDisplayedTitleTextarea(true)}
+                        />
+                        <h1 className="modal__tasks-header">
+                          {`${localizationObj[lang].yourTask}: `}
+                        </h1>
+                      </div>
+                      <h2>{cardTitle}</h2>
+                    </>
+                  )}
+                  {isDisplayedTitleTextarea && (
+                    <>
+                      <input
+                        className="textarea boards__item-input"
+                        placeholder="Change the title"
+                        value={taskTitle}
+                        onChange={handleTaskTitleInput}
+                      />
+
+                      <ChangeTitleBtns onClickSubmit={submitTitle} onClickCancel={cancelTitle} />
+                    </>
+                  )}
+                  {!isDisplayedDescrTextarea && (
+                    <>
+                      <div className="modal__text-wrapper">
+                        <DeleteButton
+                          className="btn-edit"
+                          type="button"
+                          onClick={() => setIsDisplayedDescrTextarea(true)}
+                        />
+                        <h2>{`${localizationObj[lang].taskDescription}: `}</h2>
+                      </div>
+                      <p className="modal__tasks-descr">{cardDescription}</p>
+                    </>
+                  )}
+                  {isDisplayedDescrTextarea && (
+                    <>
+                      <Textarea
+                        className="textarea modal__tasks-textarea"
+                        cols={4}
+                        rows={5}
+                        placeholder="Change the description"
+                        value={taskDescription}
+                        onChange={handleTaskDescriptionInput}
+                      />
+                      <ChangeTitleBtns onClickSubmit={submitDescr} onClickCancel={cancelDescr} />
+                    </>
+                  )}
+                </div>
+                <TertiaryButton
+                  className="button__tertiary column__btn"
+                  type="button"
+                  description="Ok"
+                  onClick={closeModal}
+                />
+              </div>
+            )}
+          </>
+        </Modal>,
+        container
+      )}
+    </>
+  );
+};
+
+export { CardItem };
diff --git a/src/components/cardList/CardList.tsx b/src/components/cardList/CardList.tsx
new file mode 100644
index 0000000..3d051e2
--- /dev/null
+++ b/src/components/cardList/CardList.tsx
@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { CardItem } from '..';
+import { Droppable } from 'react-beautiful-dnd';
+
+interface CardsState {
+  order: number;
+  complete: boolean;
+  title: string;
+  description: string;
+  id: string;
+  boardId: string;
+  columnId: string;
+  userId: string;
+}
+
+interface CardListProps {
+  tasks: CardsState[];
+  columnId: string;
+}
+
+const CardList: FC<CardListProps> = ({ columnId, tasks }) => {
+  return (
+    <Droppable droppableId={columnId} type="tasks">
+      {(provided) => (
+        <ul className="cards__list" ref={provided.innerRef} {...provided.droppableProps}>
+          {tasks.map((task, index) => {
+            return (
+              <CardItem
+                {...task}
+                cardTitle={task.title}
+                cardDescription={task.description}
+                order={task.order}
+                index={index}
+                id={task.id}
+                key={task.id}
+              />
+            );
+          })}
+          {provided.placeholder}
+        </ul>
+      )}
+    </Droppable>
+  );
+};
+
+export { CardList };
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..0b5b4aa
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,25 @@
+import BoardColumn from './boardColumn/BoardColumn';
+import { BoardColumnTitle } from './boardColumn/components/BoardColumnTitle/BoardColumnTitle';
+import { CardContainer } from './cardContainer/CardContainer';
+import { CardItem } from './cardItem/CardItem';
+import { CardList } from './cardList/CardList';
+import { InputCheckbox } from './inputCheckbox/InputCheckbox';
+import { Layout } from './layout/Layout';
+import Modal from './modal/Modal';
+import RequireAuth from './requireAuth/RequireAuth';
+import { Textarea } from './textarea/Textarea';
+import { PreloaderSuspense } from './preloader';
+
+export {
+  BoardColumn,
+  CardContainer,
+  CardItem,
+  CardList,
+  InputCheckbox,
+  Layout,
+  Modal,
+  RequireAuth,
+  Textarea,
+  BoardColumnTitle,
+  PreloaderSuspense,
+};
diff --git a/src/components/inputCheckbox/InputCheckbox.tsx b/src/components/inputCheckbox/InputCheckbox.tsx
new file mode 100644
index 0000000..3f1ea2e
--- /dev/null
+++ b/src/components/inputCheckbox/InputCheckbox.tsx
@@ -0,0 +1,28 @@
+import { FC } from 'react';
+
+interface InputCheckboxProps {
+  className: string;
+  type: 'checkbox';
+  complete: boolean;
+  id?: string;
+  toggleCardComplete: (cardId: string) => void;
+}
+
+const InputCheckbox: FC<InputCheckboxProps> = ({
+  className,
+  type,
+  complete,
+  id,
+  toggleCardComplete,
+}) => {
+  return (
+    <input
+      className={className}
+      type={type}
+      checked={complete}
+      onChange={() => toggleCardComplete(id ?? '')}
+    />
+  );
+};
+
+export { InputCheckbox };
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
new file mode 100644
index 0000000..861daa6
--- /dev/null
+++ b/src/components/layout/Layout.tsx
@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import { Header } from './header/Header';
+import { Footer } from './footer/Footer';
+
+const Layout: FC = () => {
+  return (
+    <>
+      <Header />
+      <main className="main">
+        <Outlet />
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export { Layout };
diff --git a/src/components/layout/footer/Footer.scss b/src/components/layout/footer/Footer.scss
new file mode 100644
index 0000000..2590164
--- /dev/null
+++ b/src/components/layout/footer/Footer.scss
@@ -0,0 +1,118 @@
+@import '../../../sass/Constants.scss';
+
+.footer {
+  padding: $base * 2 0;
+  width: 100%;
+  height: auto;
+  background: $color-dark-02;
+}
+
+.footer__wrapper {
+  @include flexSpaceBetween;
+  column-gap: $base;
+}
+
+.footer__info {
+  @include flexCenter;
+  gap: $base * 2;
+  flex-wrap: wrap;
+
+  @media (max-width: $breakpoint-xs-min) {
+    gap: $base;
+  }
+}
+
+.footer__link {
+  display: block;
+  width: 100%;
+  height: inherit;
+  background-size: cover;
+}
+
+.footer__logo {
+  width: $base * 15;
+  height: $base * 5;
+}
+
+.footer__logo-link {
+  background-image: url('../../../images/icons/rs_school_logo.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: $transition;
+
+  &:hover {
+    transform: scale(1.02);
+    transition: $transition;
+  }
+}
+
+.footer__team {
+  @include flexEnd;
+  flex-direction: column;
+  align-items: flex-end;
+  row-gap: $base;
+}
+
+.footer__title {
+  @include poppins;
+  @include disableSelection;
+  font-size: $fs-m;
+  font-weight: $fw-semi-bold;
+  text-align: end;
+  text-transform: uppercase;
+}
+
+.footer__contacts {
+  @include flexCenter;
+  column-gap: $base * 3;
+
+  @media (max-width: $breakpoint-xs-min) {
+    column-gap: $base * 2;
+  }
+}
+
+.footer__contact {
+  width: $base * 7;
+  height: $base * 7;
+  border-radius: 50%;
+  cursor: pointer;
+  overflow: hidden;
+  transform: scale(1);
+  transition: $transition;
+
+  &:hover {
+    box-shadow: 0 0 0 0.3rem $color-yellow-dark;
+    background-color: $color-yellow;
+    transform: scale(1.2);
+    transition: $transition;
+  }
+
+  @media screen and (max-width: $breakpoint-xs-min) {
+    width: $base * 5;
+    height: $base * 5;
+  }
+}
+
+.contact-1 {
+  background-image: url('../../../images/avatar-1.jpg');
+}
+
+.contact-2 {
+  background-image: url('../../../images/avatar-2.jpg');
+}
+
+.contact-3 {
+  background-image: url('../../../images/avatar-3.jpg');
+}
+
+.footer__year {
+  @include poppins;
+  @include disableSelection;
+  font-size: $fs-xxl;
+  font-weight: $fw-semi-bold;
+
+  @media (max-width: $breakpoint-xs-min) {
+    font-size: $fs-l;
+  }
+}
diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
new file mode 100644
index 0000000..31e61d9
--- /dev/null
+++ b/src/components/layout/footer/Footer.tsx
@@ -0,0 +1,57 @@
+import { FC } from 'react';
+import { FooterLink } from './FooterLink';
+import { Switcher } from '../../buttons';
+
+import './Footer.scss';
+import { useAppSelector } from '../../../app/hooks';
+import { localizationObj } from '../../../features/localization';
+
+const Footer: FC = () => {
+  const { lang } = useAppSelector((state) => state.langStorage);
+  return (
+    <footer data-testid="footer" className="footer">
+      <div className="wrapper footer__wrapper">
+        <Switcher
+          description={localizationObj[lang].language}
+          type="checkbox"
+          id="language"
+          name="language"
+        />
+        <div className="footer__info">
+          <div className="footer__logo">
+            <FooterLink
+              href="https://rs.school/react/"
+              className="footer__link footer__logo-link"
+            />
+          </div>
+          <span className="footer__year">2022</span>
+        </div>
+        <div className="footer__team">
+          <h4 className="footer__title">{localizationObj[lang].meetOurTeam}</h4>
+          <ul className="footer__contacts">
+            <li className="footer__contact">
+              <FooterLink
+                href="https://github.com/jack13onlycv"
+                className="footer__link contact-2"
+              />
+            </li>
+            <li className="footer__contact">
+              <FooterLink
+                href="https://github.com/VictoriaKochieva"
+                className="footer__link contact-3"
+              />
+            </li>
+            <li className="footer__contact">
+              <FooterLink
+                href="https://github.com/mitrofanzxc"
+                className="footer__link contact-1"
+              />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export { Footer };
diff --git a/src/components/layout/footer/FooterLink.tsx b/src/components/layout/footer/FooterLink.tsx
new file mode 100644
index 0000000..e6d3bb7
--- /dev/null
+++ b/src/components/layout/footer/FooterLink.tsx
@@ -0,0 +1,12 @@
+import { FC } from 'react';
+
+interface FooterItemProps {
+  href: string;
+  className: string;
+}
+
+const FooterLink: FC<FooterItemProps> = ({ href, className }) => {
+  return <a href={href} className={className} target="_blank" rel="noreferrer" />;
+};
+
+export { FooterLink };
diff --git a/src/components/layout/header/Header.scss b/src/components/layout/header/Header.scss
new file mode 100644
index 0000000..799f329
--- /dev/null
+++ b/src/components/layout/header/Header.scss
@@ -0,0 +1,135 @@
+@import '../../../sass/Constants.scss';
+
+.header {
+  position: sticky;
+  padding: $base * 2 0;
+  top: 0;
+  width: 100%;
+  height: auto;
+  backdrop-filter: blur($base * 2);
+  background: $color-grey-white;
+  transition: $transition;
+  z-index: 3;
+}
+
+.header__wrapper {
+  justify-content: space-between;
+}
+
+.header__logo__wrapper {
+  display: flex;
+  align-items: center;
+  gap: $base;
+
+  .button__tertiary {
+    @media (max-width: $breakpoint-sm-min) {
+      width: $base * 7;
+      height: $base * 7;
+      background-color: transparent;
+      background-image: url('../../../images/icons/plus.svg');
+      background-size: 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      border: none;
+    }
+  }
+
+  .button__tertiary-description {
+    @media (max-width: $breakpoint-sm-min) {
+      display: none;
+    }
+  }
+}
+
+.boards-logo__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  cursor: pointer;
+
+  &:hover {
+    .boards-logo {
+      filter: brightness(0.9);
+      transition: $transition;
+    }
+
+    .user-logo {
+      filter: brightness(0.8);
+      transition: $transition;
+    }
+  }
+}
+
+.boards-logo {
+  width: $base * 5;
+  height: $base * 5;
+  background-color: transparent;
+  background-image: url('../../../images/icons/boards.svg');
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  border: none;
+  transition: $transition;
+
+  @media (max-width: $breakpoint-xs-min) {
+    width: $base * 7;
+    height: $base * 7;
+    background-size: 100%;
+  }
+}
+
+.user-logo {
+  background-image: url('../../../images/icons/user.svg');
+}
+
+.boards-logo-description {
+  color: $color-dark;
+  font-weight: $fw-semi-bold;
+
+  @media (max-width: $breakpoint-md-min) {
+    width: max-content;
+    font-size: $fs-xs;
+  }
+
+  @media (max-width: $breakpoint-xs-min) {
+    display: none;
+  }
+}
+
+.header-scrolled {
+  padding: $base 0;
+  background: $color-grey-07;
+  box-shadow: 0 $base * 0.1 $base * 3 $color-dark-02;
+}
+
+.header__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $base * 20;
+  height: 100%;
+  background-image: url('../../../images/icons/logo.svg');
+  background-size: 90%;
+  background-position: center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  transition: $transition;
+
+  @media (max-width: $breakpoint-sm-min) {
+    width: $base * 10;
+    background-image: url('../../../images/icons/logo-small.png');
+    background-size: 70%;
+    transition: $transition;
+  }
+}
+
+.header__buttons {
+  display: flex;
+  align-items: center;
+  column-gap: $base * 2;
+
+  @media (max-width: $breakpoint-lg-min) {
+    column-gap: $base;
+  }
+}
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
new file mode 100644
index 0000000..034dc74
--- /dev/null
+++ b/src/components/layout/header/Header.tsx
@@ -0,0 +1,179 @@
+import { FC, useEffect, useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { PATHS } from '../../../shared/constants/routes';
+import { useAppDispatch, useAppSelector } from '../../../app/hooks';
+import { saveTokenToLS } from '../../../features/ls-load-save';
+import { logoutUser } from '../../../reducers/auth';
+import decodeUserId from '../../../features/decodeUserId';
+import { useGetUserByIdQuery, usePostBoardMutation } from '../../../app/RtkQuery';
+import { setEmptyUser, setUserData } from '../../../reducers/userReducer';
+import { ChangeTitleBtns, PrimaryButton, TertiaryButton } from '../../buttons';
+
+import './Header.scss';
+import { localizationObj } from '../../../features/localization';
+import Modal from '../../modal/Modal';
+
+const Header: FC = () => {
+  const [postBoard] = usePostBoardMutation();
+  const [scrolledPage, isScrolledPage] = useState(false);
+  const [activeModal, setActiveModal] = useState<boolean>(false);
+  const [boardTitle, setBoardTitle] = useState('');
+  const [boardDescription, setBoardDescription] = useState('');
+  const body = window.document.body as HTMLBodyElement;
+  const heightScrollTop = 1;
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { userToken } = useAppSelector((state) => state.authStorage);
+  const { userName } = useAppSelector((state) => state.userStorage);
+  const dispatch = useAppDispatch();
+  const { lang } = useAppSelector((state) => state.langStorage);
+
+  const listenScrollEvent = () => {
+    body.scrollTop > heightScrollTop ? isScrolledPage(true) : isScrolledPage(false);
+  };
+
+  const userId = decodeUserId(userToken); // receive userId
+  const { data } = useGetUserByIdQuery(userId);
+
+  const addNewBoard = async () => {
+    if (boardTitle.trim().length && boardDescription.trim().length) {
+      await postBoard({ title: boardTitle, description: boardDescription });
+      setActiveModal(false);
+      setBoardTitle('');
+      setBoardDescription('');
+    }
+  };
+
+  useEffect(() => {
+    if (data && 'name' in data && 'id' in data && 'login' in data) {
+      dispatch(
+        setUserData({
+          userName: data.name,
+          userId: data.id,
+          userLogin: data.login,
+        })
+      );
+    }
+  }, [userId, data]);
+
+  useEffect(() => {
+    body.addEventListener('scroll', listenScrollEvent);
+    return () => body.removeEventListener('scroll', listenScrollEvent);
+  }, [scrolledPage]);
+
+  useEffect(() => {
+    if (!activeModal) {
+      setBoardTitle('');
+      setBoardDescription('');
+    }
+  }, [activeModal]);
+
+  return (
+    <>
+      <header data-testid="header" className={'header' + (scrolledPage ? ' header-scrolled' : '')}>
+        <div className="wrapper header__wrapper">
+          <div className="header__logo__wrapper">
+            <Link to={PATHS.main} className={'header__logo' + (userToken ? ' border-right' : '')} />
+            {userToken && (
+              <>
+                <Link
+                  to={PATHS.boards}
+                  className={location.pathname === `${PATHS.boards}` ? 'border-right' : ''}
+                >
+                  <div className="boards-logo__wrapper">
+                    <div className="boards-logo" />
+                    <div className="boards-logo-description">
+                      {localizationObj[lang].boardsHeader}
+                    </div>
+                  </div>
+                </Link>
+                {location.pathname === `${PATHS.boards}` && (
+                  <TertiaryButton
+                    className="button__tertiary"
+                    type="button"
+                    description={'+ ' + localizationObj[lang].createBoard}
+                    onClick={() => setActiveModal(true)}
+                  />
+                )}
+              </>
+            )}
+          </div>
+          <div className="header__buttons">
+            {!userToken && (
+              <>
+                <PrimaryButton
+                  dataTestId="PrimaryButton"
+                  type="button"
+                  className="btn btn-log btn-bordered"
+                  description={localizationObj[lang].signIn}
+                  onClick={() => navigate(PATHS.signIn, { replace: true })}
+                />
+                <PrimaryButton
+                  dataTestId="PrimaryButton"
+                  type="button"
+                  className="btn btn-sign btn-colored"
+                  description={localizationObj[lang].signUp}
+                  onClick={() => navigate(PATHS.signUp, { replace: true })}
+                />
+              </>
+            )}
+            {userToken && (
+              <>
+                <div
+                  className="boards-logo__wrapper"
+                  role="button"
+                  onClick={() => navigate(PATHS.userProfile)}
+                >
+                  <div className="boards-logo user-logo" />
+                  <div className="boards-logo-description">{userName}</div>
+                </div>
+                <PrimaryButton
+                  dataTestId="PrimaryButton"
+                  type="button"
+                  className="btn btn-sign btn-colored"
+                  description={localizationObj[lang].signOut}
+                  onClick={() => {
+                    dispatch(logoutUser());
+                    dispatch(setEmptyUser());
+                    saveTokenToLS('');
+                  }}
+                />
+              </>
+            )}
+          </div>
+        </div>
+      </header>
+
+      <Modal activeModal={activeModal} setActiveModal={setActiveModal}>
+        <div className="modal__wrapper">
+          <div className="modal__img modal__img-add" />
+          <div className="modal__text">
+            <h2>{`${localizationObj[lang].addATitle}`}</h2>
+            <input
+              type="text"
+              value={boardTitle}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setBoardTitle(event?.target.value)
+              }
+            />
+            <h2>{`${localizationObj[lang].addADescription}`}</h2>
+            <input
+              type="text"
+              value={boardDescription}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setBoardDescription(event?.target.value)
+              }
+            />
+
+            <ChangeTitleBtns
+              onClickSubmit={addNewBoard}
+              onClickCancel={() => setActiveModal(false)}
+            />
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export { Header };
diff --git a/src/components/modal/Modal.scss b/src/components/modal/Modal.scss
new file mode 100644
index 0000000..0d79dab
--- /dev/null
+++ b/src/components/modal/Modal.scss
@@ -0,0 +1,218 @@
+@import '../../sass/Constants.scss';
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  transition: $transition;
+  pointer-events: none;
+  z-index: 50;
+
+  &.active {
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  .modal__content {
+    border-radius: $base * 3;
+    background-color: rgb(255, 255, 255);
+    transform: scale(0.5);
+    width: 60%;
+    height: 60vh;
+    transition: $transition all;
+
+    @media (max-width: $breakpoint-xl-min) {
+      width: 76vw;
+    }
+
+    @media (max-width: $breakpoint-md-min) {
+      width: 90vw;
+    }
+
+    &.active {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      opacity: 1;
+      pointer-events: all;
+      transform: scale(1);
+    }
+  }
+
+  .modal__wrapper {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+  }
+
+  .modal__img {
+    flex-basis: 50%;
+    height: auto;
+    background-size: cover;
+    background-color: rgb(255, 255, 255);
+    background-position: center;
+    border-radius: $base * 3 0 0 $base * 3;
+  
+    @media (max-width: $breakpoint-md-min) {
+      flex-basis: 55%;
+    }
+
+    @media (max-width: $breakpoint-sm-min) {
+      flex-basis: 0%;
+    }
+  }
+
+  .modal__img-delete {
+    background-image: url('../../images/confirmation.jpg');
+    background-repeat: no-repeat;
+
+    @media (max-width: $breakpoint-sm-min) {
+      background: rgb(255, 255, 255);
+    }
+  }
+
+  .modal__img-add {
+    background-image: url('../../images/modal/create.jpg');
+    background-repeat: no-repeat;
+
+    @media (max-width: $breakpoint-sm-min) {
+      background: rgb(255, 255, 255);
+    }
+  }
+
+  .modal__img-user-change {
+    background-image: url('../../images/modal/changeUser.jpg');
+    background-repeat: no-repeat;
+
+    @media (max-width: $breakpoint-sm-min) {
+      background: rgb(255, 255, 255);
+    }
+  }
+
+  .modal__text {
+    display: flex;
+    align-items: flex-end;
+    flex-direction: column;
+    row-gap: $base * 3;
+    padding: $base * 19 $base * 4 $base * 4;
+    flex-basis: 45%;
+    text-align: end;
+    word-break: break-word;
+
+    h2 {
+      overflow: hidden;
+      line-height: 2rem;
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 5;
+    }
+
+    input {
+      padding: $base * 2;
+      width: 90%;
+      height: $base * 6;
+      border-radius: $base * 2;
+      border: $base * 0.2 solid $color-purple;
+    }
+
+    @media (max-width: $breakpoint-sm-min) {
+      flex-basis: 100%;
+      align-items: center;
+      text-align: center;
+    }
+  }
+
+  .modal__btns {
+    display: flex;
+    column-gap: $base * 3;
+  }
+
+  .modal__close {
+    position: absolute;
+    top: $base;
+    right: $base * 2;
+    font-size: $base * 6;
+    transition: $transition linear;
+    cursor: pointer;
+
+    &:hover {
+      transform: rotate(90deg);
+    }
+
+    &:active {
+      transform: scale(0.8);
+    }
+  }
+
+  .modal__tasks {
+    padding: $base * 2 $base * 5 $base * 4;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-y: auto;
+    @include scroll;
+  }
+
+  .modal__tasks > .modal__text {
+    flex-basis: 100%;
+    align-items: flex-start;
+    padding: 0;
+    width: 100%;
+    text-align: initial;
+  }
+
+  .modal__tasks > .modal__tasks-text {
+    border: $base * 0.2 solid $color-purple;
+    border-radius: $base;
+    margin: $base * 10 0;
+    padding: $base * 2;
+  }
+
+  .modal__text-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: $base * 3;
+    width: 100%;
+  }
+
+  .modal__text > .boards__item-input {
+    width: 98%;
+  }
+  
+  .modal__tasks-textarea {
+    width: 98%;
+  }
+
+  .modal__tasks-btns {
+    position: absolute;
+    bottom: $base * 3;
+  }
+
+  .modal__tasks-header {
+    text-overflow: ellipsis;
+    max-width: 84%;
+    text-align: initial;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-height: 1.3em;
+  }
+
+  .modal__tasks-descr {
+    word-break: break-word;
+    max-width: 96%;
+  }
+}
+
+.modal__text-question {
+  display: flex;
+}
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
new file mode 100644
index 0000000..8e5b71e
--- /dev/null
+++ b/src/components/modal/Modal.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import './Modal.scss';
+
+type IProps = {
+  activeModal: boolean;
+  setActiveModal: (active: boolean) => void;
+  children: JSX.Element | JSX.Element[];
+};
+
+const Modal = (props: IProps) => {
+  //for control pls use const [activeModal, setActiveModal] = useState<boolean>(false);
+  return (
+    <div
+      className={props.activeModal ? 'modal active' : 'modal'}
+      data-testid="modal"
+      onClick={() => {
+        props.setActiveModal(false);
+      }}
+    >
+      <div
+        className={props.activeModal ? 'modal__content active' : 'modal__content'}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {props.children}
+        <div
+          role="button"
+          className="modal__close"
+          onClick={() => {
+            props.setActiveModal(false);
+          }}
+        >
+          &#128939;
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
diff --git a/src/components/modal/components/ErrorSign/ErrorSign.scss b/src/components/modal/components/ErrorSign/ErrorSign.scss
new file mode 100644
index 0000000..2836929
--- /dev/null
+++ b/src/components/modal/components/ErrorSign/ErrorSign.scss
@@ -0,0 +1,22 @@
+@import '../../../../sass/Constants.scss';
+
+.error-modal {
+  @include flexCenter;
+  flex-direction: column;
+  gap: $base * 6;
+  width: 100%;
+  height: 100%;
+
+  .error-modal__title {
+    color: $color-error;
+    font-size: $fs-xxxl;
+  }
+
+  .error-modal__title.green {
+    color: $color-green;
+  }
+}
+
+.error-content {
+  margin: auto;
+}
diff --git a/src/components/modal/components/ErrorSign/ErrorSign.tsx b/src/components/modal/components/ErrorSign/ErrorSign.tsx
new file mode 100644
index 0000000..51df29c
--- /dev/null
+++ b/src/components/modal/components/ErrorSign/ErrorSign.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useAppSelector } from '../../../../app/hooks';
+import { localizationObj } from '../../../../features/localization';
+import './ErrorSign.scss';
+
+type Error = {
+  errorMsg: string;
+};
+
+const ErrorSign = ({ errorMsg }: Error) => {
+  const { lang } = useAppSelector((state) => state.langStorage);
+  return (
+    <div className="error-modal">
+      <h3 className="error-modal__title">{localizationObj[lang].error}</h3>
+      <div>{errorMsg}</div>
+    </div>
+  );
+};
+
+export default ErrorSign;
diff --git a/src/components/modal/components/index.ts b/src/components/modal/components/index.ts
new file mode 100644
index 0000000..72cdd5f
--- /dev/null
+++ b/src/components/modal/components/index.ts
@@ -0,0 +1,3 @@
+import ErrorSign from './ErrorSign/ErrorSign';
+
+export { ErrorSign };
diff --git a/src/components/preloader/Preloader.scss b/src/components/preloader/Preloader.scss
new file mode 100644
index 0000000..5c37f0f
--- /dev/null
+++ b/src/components/preloader/Preloader.scss
@@ -0,0 +1,13 @@
+@import '../../sass/Constants.scss';
+
+.preloader {
+  width: $base * 25;
+  height: $base * 25;
+  margin: auto;
+  background-color: transparent;
+  background-image: url('../../images/icons/loading.gif');
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 50%;
+}
diff --git a/src/components/preloader/Preloader.tsx b/src/components/preloader/Preloader.tsx
new file mode 100644
index 0000000..6c7bd10
--- /dev/null
+++ b/src/components/preloader/Preloader.tsx
@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+import './Preloader.scss';
+
+const Preloader: FC = () => {
+  return <div className="preloader" />;
+};
+
+export { Preloader };
diff --git a/src/components/preloader/index.tsx b/src/components/preloader/index.tsx
new file mode 100644
index 0000000..c42544a
--- /dev/null
+++ b/src/components/preloader/index.tsx
@@ -0,0 +1,12 @@
+import { ReactElement, Suspense } from 'react';
+import { Preloader } from './Preloader';
+
+type Children = {
+  children: ReactElement;
+};
+
+const PreloaderSuspense = ({ children }: Children) => {
+  return <Suspense fallback={<Preloader />}>{children}</Suspense>;
+};
+
+export { PreloaderSuspense };
diff --git a/src/components/requireAuth/RequireAuth.tsx b/src/components/requireAuth/RequireAuth.tsx
new file mode 100644
index 0000000..3f031e1
--- /dev/null
+++ b/src/components/requireAuth/RequireAuth.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { useLocation, Navigate } from 'react-router-dom';
+import { useAppSelector } from '../../app/hooks';
+import { PATHS } from '../../shared/constants/routes';
+
+const RequireAuth = ({ children, needAuth }: { children: JSX.Element; needAuth: boolean }) => {
+  const { userToken } = useAppSelector((state) => state.authStorage);
+  const location = useLocation();
+
+  const permission = needAuth ? !!userToken : !userToken;
+
+  if (!permission && needAuth) {
+    return <Navigate to={PATHS.main} state={{ from: location }} replace />;
+  }
+
+  if (!permission && !needAuth) {
+    return <Navigate to={PATHS.boards} state={{ from: location }} replace />;
+  }
+
+  return children;
+};
+
+export default RequireAuth;
diff --git a/src/components/textarea/Textarea.scss b/src/components/textarea/Textarea.scss
new file mode 100644
index 0000000..999faee
--- /dev/null
+++ b/src/components/textarea/Textarea.scss
@@ -0,0 +1,26 @@
+@import '../../sass/Constants.scss';
+
+.textarea {
+  @include poppins;
+  width: 100%;
+  padding: $base $base * 2;
+  color: $color-dark-09;
+  background-color: $color-grey-07;
+  border-width: 0.063rem;
+  border-style: solid;
+  border-color: $color-dark-09;
+  border-radius: $base;
+  resize: none;
+  transition: $transition;
+
+  &::placeholder {
+    color: $color-dark-08;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: $color-dark;
+    transition: $transition;
+  }
+}
diff --git a/src/components/textarea/Textarea.tsx b/src/components/textarea/Textarea.tsx
new file mode 100644
index 0000000..a944cba
--- /dev/null
+++ b/src/components/textarea/Textarea.tsx
@@ -0,0 +1,37 @@
+import { FC, ChangeEvent } from 'react';
+
+import './Textarea.scss';
+
+interface TextareaProps {
+  className: string;
+  cols: number;
+  rows: number;
+  placeholder: string;
+  value: string;
+  onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+  onClick?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
+}
+
+const Textarea: FC<TextareaProps> = ({
+  className,
+  cols,
+  rows,
+  placeholder,
+  value,
+  onChange,
+  onClick,
+}) => {
+  return (
+    <textarea
+      className={className}
+      cols={cols}
+      rows={rows}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      onClick={onClick}
+    />
+  );
+};
+
+export { Textarea };
diff --git a/src/features/decodeUserId.ts b/src/features/decodeUserId.ts
new file mode 100644
index 0000000..1f453ea
--- /dev/null
+++ b/src/features/decodeUserId.ts
@@ -0,0 +1,13 @@
+import jwt_decode from 'jwt-decode';
+
+const decodeUserId = (userToken: string) => {
+  try {
+    if (userToken) {
+      const decoded: { userId: string } = jwt_decode(userToken);
+      return decoded.userId;
+    }
+  } catch (e) {}
+  return '';
+};
+
+export default decodeUserId;
diff --git a/src/features/localization.ts b/src/features/localization.ts
new file mode 100644
index 0000000..21f52e1
--- /dev/null
+++ b/src/features/localization.ts
@@ -0,0 +1,127 @@
+import { enLang, ruLang } from './ls-load-save';
+
+export const localizationObj = {
+  [ruLang]: {
+    signIn: 'Вход',
+    signUp: 'Регистрация',
+    signOut: 'Выход',
+    language: 'Язык',
+    profile: 'Профиль',
+    meetOurTeam: 'Наша команда',
+    login: 'Логин',
+    password: 'Пароль',
+    name: 'Имя',
+    repeatPassword: 'Повторите пароль',
+    editUser: 'Редактировать пользователя',
+    changePassword: 'Сменить пароль',
+    deleteUser: 'Удалить пользователя',
+    oldPassword: 'Старый пароль',
+    newPassword: 'Новый пароль',
+    enterYourPassword: 'Введите свой пароль',
+    enterYourLogin: 'Введите свой логин',
+    enterYourName: 'Введите свое имя',
+    emptyField: 'Пустое поле',
+    onlyNumbersLetters: 'Только цифры и латинские буквы',
+    lessThanFour: ' не может быть короче 4 символов',
+    passwordsMatch: 'Пароли не совпадают',
+    createBoard: 'Создать новую доску',
+    createColumn: 'Добавить колонку',
+    createTask: 'Добавить задачу',
+    yourBoards: 'Ваши доски',
+    board: 'Доска',
+    boards: 'Доски',
+    boardsHeader: 'На главную',
+    openBoard: 'Открыть доску',
+    back: 'Назад',
+    submit: 'Подтвердить',
+    cancel: 'Отмена',
+    doYouWantToDelete: 'Вы хотите удалить',
+    areYouSure: 'Вы уверены?',
+    error: 'Ошибка!',
+    success: 'Успех!',
+    updateSuccessful: 'обновлен успешно!',
+    user: 'Пользователь',
+    wrongPassword: 'Неверный пароль',
+    afterDeleteRedirect:
+      'После удаления пользователя вы будете перенаправлены на главную страницу!',
+    update: 'Обновить',
+    loading: 'Загрузка...',
+    addATitle: 'Добавить заголовок',
+    addADescription: 'Добавить описание',
+    author: 'Пользователь',
+    yourTask: 'Задача',
+    taskDescription: 'Описание',
+    shatau: 'Евгений Шатов',
+    kochieva: 'Виктория Кочиева',
+    karakulka: 'Дмитрий Каракулько',
+    doYouWantToChangeUser: 'Выберите нового пользователя',
+    welcome: 'Добро пожаловать',
+    app: 'Ваша система управлениями проектами',
+    aboutProject:
+      'Приложение для управления проектами — это приложение, которое назначает задачи отдельным участникам проекта или группы. Это визуальный инструмент, который позволяет вашей команде управлять любым типом проекта, рабочим процессом или отслеживанием задач. Добавьте файлы, контрольные списки или даже автоматизацию: настройте все так, чтобы ваша команда работала лучше всего. Просто зарегистрируйтесь, создайте доску, и вперед!',
+    course:
+      'RS School — это бесплатная образовательная программа, проводимая сообществом разработчиков The Rolling Scopes с 2013 года. Учиться в RS School может каждый, независимо от возраста, профессиональной занятости и места жительства. Наставники и тренеры нашей школы — фронтенд- и javascript-разработчики из разных компаний и стран. В RS School работает принцип «Плати вперед». Мы бесплатно делимся с учащимися своими знаниями в настоящее время, надеясь, что в будущем они вернутся к нам в качестве наставников и точно так же передадут свои знания последующему поколению студентов.',
+    courseAbout: 'О курсе',
+  },
+  [enLang]: {
+    signIn: 'Sign In',
+    signUp: 'Sign Up',
+    signOut: 'Sign Out',
+    language: 'Language',
+    profile: 'Profile',
+    meetOurTeam: 'Meet our team',
+    login: 'Login',
+    password: 'Password',
+    name: 'Name',
+    repeatPassword: 'Repeat password',
+    editUser: 'Edit user',
+    changePassword: 'Change password',
+    deleteUser: 'Delete user',
+    oldPassword: 'Old password',
+    newPassword: 'New password',
+    enterYourPassword: 'Enter your password',
+    enterYourLogin: 'Enter your login',
+    enterYourName: 'Enter your name',
+    emptyField: 'Empty field!',
+    onlyNumbersLetters: 'Only numbers and english letters',
+    lessThanFour: ' can not be less than 4 symbols',
+    passwordsMatch: 'Passwords do not match',
+    createBoard: 'Create a new board',
+    createColumn: 'New column',
+    createTask: 'Add task',
+    yourBoards: 'Your boards',
+    board: 'Board',
+    boards: 'Boards',
+    boardsHeader: 'Main page',
+    openBoard: 'Open board',
+    back: 'Back',
+    submit: 'Submit',
+    cancel: 'Cancel',
+    doYouWantToDelete: 'Do you want to delete ',
+    areYouSure: 'Are you sure?',
+    error: 'Error!',
+    success: 'Success!',
+    updateSuccessful: 'update successful!',
+    user: 'User',
+    wrongPassword: 'Wrong password',
+    afterDeleteRedirect: 'After deletion, you will be redirected to the welcome page!',
+    update: 'Update',
+    loading: 'Loading...',
+    addATitle: 'Add a title',
+    addADescription: 'Add a description',
+    author: 'User',
+    yourTask: 'Task',
+    taskDescription: 'Description',
+    shatau: 'Yauheni Shatau',
+    kochieva: 'Victoria Kochieva',
+    karakulka: 'Dzmitry Karakulka',
+    doYouWantToChangeUser: 'Choose new task user',
+    welcome: 'Welcome',
+    app: "It's Your Project Management App",
+    aboutProject:
+      "Project management app is an application that assigns tasks to individual participants in a project or group. It is the visual tool that empowers your team to manage any type of project, workflow, or task tracking. Add files, checklists, or even automation: Customize it all for how your team works best. Just sign up, create a board, and you're off!",
+    course:
+      'RS School is free-of-charge and community-based education program conducted by The Rolling Scopes developer community since 2013. Everyone can study at RS School, regardless of age, professional employment, or place of residence. The mentors and trainers of our school are front-end and javascript developers from different companies and countries. RS School operates "Pay it forward" principle. We share our knowledge with students for free at the present time, hoping that in the future they will return to us as mentors and pass on their knowledge to the next generation of students in the same way.',
+    courseAbout: 'About the course',
+  },
+};
diff --git a/src/features/ls-load-save.ts b/src/features/ls-load-save.ts
new file mode 100644
index 0000000..cd527ba
--- /dev/null
+++ b/src/features/ls-load-save.ts
@@ -0,0 +1,25 @@
+import { LangRuEn } from '../reducers/langReducer';
+
+const team53Auth = 'team53-auth';
+const team53Lang = 'team53-lang';
+export const ruLang = 'RU';
+export const enLang = 'EN';
+
+export const loadTokenFromLS = (): string => {
+  if (!localStorage.getItem(team53Auth)) localStorage.setItem(team53Auth, '');
+  return localStorage.getItem(team53Auth) as string;
+};
+
+export const saveTokenToLS = (token: string) => {
+  localStorage.setItem(team53Auth, token);
+};
+
+export const loadLangFromLS = (): LangRuEn => {
+  if (!localStorage.getItem(team53Lang)) localStorage.setItem(team53Lang, enLang);
+  const lang = localStorage.getItem(team53Lang);
+  return lang ? (lang as LangRuEn) : enLang;
+};
+
+export const saveLangToLS = (lang: LangRuEn) => {
+  localStorage.setItem(team53Lang, lang);
+};
diff --git a/src/fonts/Poppins-Bold.woff b/src/fonts/Poppins-Bold.woff
new file mode 100644
index 0000000..94bdc27
Binary files /dev/null and b/src/fonts/Poppins-Bold.woff differ
diff --git a/src/fonts/Poppins-Bold.woff2 b/src/fonts/Poppins-Bold.woff2
new file mode 100644
index 0000000..5f5008f
Binary files /dev/null and b/src/fonts/Poppins-Bold.woff2 differ
diff --git a/src/fonts/Poppins-Medium.woff b/src/fonts/Poppins-Medium.woff
new file mode 100644
index 0000000..3fbd4a2
Binary files /dev/null and b/src/fonts/Poppins-Medium.woff differ
diff --git a/src/fonts/Poppins-Medium.woff2 b/src/fonts/Poppins-Medium.woff2
new file mode 100644
index 0000000..ceecc77
Binary files /dev/null and b/src/fonts/Poppins-Medium.woff2 differ
diff --git a/src/fonts/Poppins-Regular.woff b/src/fonts/Poppins-Regular.woff
new file mode 100644
index 0000000..01d94b4
Binary files /dev/null and b/src/fonts/Poppins-Regular.woff differ
diff --git a/src/fonts/Poppins-Regular.woff2 b/src/fonts/Poppins-Regular.woff2
new file mode 100644
index 0000000..4aae28c
Binary files /dev/null and b/src/fonts/Poppins-Regular.woff2 differ
diff --git a/src/fonts/Poppins-SemiBold.woff b/src/fonts/Poppins-SemiBold.woff
new file mode 100644
index 0000000..208e285
Binary files /dev/null and b/src/fonts/Poppins-SemiBold.woff differ
diff --git a/src/fonts/Poppins-SemiBold.woff2 b/src/fonts/Poppins-SemiBold.woff2
new file mode 100644
index 0000000..990f6f7
Binary files /dev/null and b/src/fonts/Poppins-SemiBold.woff2 differ
diff --git a/src/images/YFNLt5hMncNXRFTyJMBGis_ri01GarCduTNi4PLDKgcMxFbphXYXLyaWJDNkFmu.jpg b/src/images/YFNLt5hMncNXRFTyJMBGis_ri01GarCduTNi4PLDKgcMxFbphXYXLyaWJDNkFmu.jpg
new file mode 100644
index 0000000..e2fa9e1
Binary files /dev/null and b/src/images/YFNLt5hMncNXRFTyJMBGis_ri01GarCduTNi4PLDKgcMxFbphXYXLyaWJDNkFmu.jpg differ
diff --git a/src/images/avatar-1.jpg b/src/images/avatar-1.jpg
new file mode 100644
index 0000000..6a4d021
Binary files /dev/null and b/src/images/avatar-1.jpg differ
diff --git a/src/images/avatar-2.jpg b/src/images/avatar-2.jpg
new file mode 100644
index 0000000..19012a4
Binary files /dev/null and b/src/images/avatar-2.jpg differ
diff --git a/src/images/avatar-3.jpg b/src/images/avatar-3.jpg
new file mode 100644
index 0000000..836e909
Binary files /dev/null and b/src/images/avatar-3.jpg differ
diff --git a/src/images/confirmation.jpg b/src/images/confirmation.jpg
new file mode 100644
index 0000000..c3295d5
Binary files /dev/null and b/src/images/confirmation.jpg differ
diff --git a/src/images/icons/back.svg b/src/images/icons/back.svg
new file mode 100644
index 0000000..0055b09
--- /dev/null
+++ b/src/images/icons/back.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 185.208 185.208" xmlns="http://www.w3.org/2000/svg"><g transform="translate(952.567 -1192.557)"><path d="M-172.905-1050.923c3.398-2.537 2.999-7.828 0-10.827l-36.204-36.205c-3-2.999-7.829-2.999-10.828 0l-58.717 58.615-58.638 58.536c-3.025 18.772-6.13 37.622-9.156 56.394l56.181-9.368c30.373-30.373 44.725-44.671 59.212-59.103 14.486-14.432 28.733-28.625 58.15-58.042z" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><rect height="67.307" ry="5.082" transform="rotate(135)" width="11.067" x="-601.165" y="865.359" opacity="1" fill="#9e9e9e" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="fill-000000"></rect><path d="m-312.874-925.234-32.299-32.298-1.275 33.122z" fill="#9e9e9e" stroke="none" stroke-width=".26458332px" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="1" class="fill-000000"></path><rect height="67.307" ry="5.082" transform="rotate(135)" width="11.067" x="-467.454" y="865.783" opacity="1" fill="#9e9e9e" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="fill-000000"></rect></g><g transform="translate(221.447 -535.307)"><ellipse cx="-352.555" cy="-1716.312" rx="5.334" ry="5.342" opacity="1" fill="#9e9e9e" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="fill-000000"></ellipse><path d="M-352.555-1698.49v37.859" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-436.722-1743.288a3.806 3.806 0 0 0-3.807 3.822v103.568a3.807 3.807 0 0 0 3.807 3.823h23.24v36.286l71.375-36.286h73.718a3.807 3.807 0 0 0 3.808-3.823v-103.568a3.807 3.807 0 0 0-3.808-3.822z" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path></g><path d="M-1849.964-304.31h41.123l69.633-108.803h65.031M-1674.177-413.113l-39.659-19.993M-1674.177-413.113l-39.659 19.993M-1674.177-304.31l-39.659-19.993M-1674.177-304.31l-39.659 19.993" transform="translate(800.598 -640.885)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-1850.01-413.105h41.122l69.633 108.803h65.031" transform="translate(800.598 -640.885)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-867.121-414.187h104.674a6.063 6.063 0 0 1 6.088 6.065v144.094a6.063 6.063 0 0 1-6.088 6.064h-104.674a6.063 6.063 0 0 1-6.088-6.064v-144.094a6.063 6.063 0 0 1 6.088-6.065z" transform="translate(-152.686 -1062.231)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-872.764-428.604h116.317M-847.834-394.01v115.87M-814.784-394.01v115.87M-781.734-394.01v115.87M-831.685-433.911h34.16" transform="translate(-152.686 -1062.231)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-508.094-666.261v50.635c0 1.263-.843 2.28-1.89 2.28h-172.174c-1.047 0-1.89-1.017-1.89-2.28v-50.635" transform="translate(-1598.046 -706.143)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041508" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-155.801-47.138v-150.835M-155.801-197.973l-43.482 44.424M-155.801-197.973l43.481 44.424" transform="matrix(1 0 0 -1 -2038.315 -1543.921)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-190.138-620.904v-175.781M-154.995-620.804h-70.287M-154.995-796.785h-70.286" transform="translate(-1608.223 -699.374)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-1004.936-1676.12h175.823M-1004.936-1735.305h175.823M-1004.936-1616.934h175.823" transform="translate(394.573 -528.726)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><g stroke-width=".69996077"><path d="M-127.05-111.185v84.94h-97.204v-120.686 0h59.76" transform="matrix(1.40223 0 0 1.45557 910.18 -1653.36)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="6.48192835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-128.344-109.95h-36.15c-.717 0-1.294-.55-1.294-1.235v-34.51c0-.685.577-1.236 1.294-1.236l37.444 35.746c0 .684-.577 1.235-1.294 1.235z" transform="matrix(1.40223 0 0 1.45557 910.18 -1653.36)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="6.48192835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path></g><g stroke-width=".71462166"><g stroke-width=".87175673"><path d="M1064.034-145.824v108.35h-118.37v-153.947 0h72.773" transform="matrix(1.15126 0 0 1.14297 -1679.299 -1277.358)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="8.0728302" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M1062.458-144.248h-44.021a1.572 1.572 0 0 1-1.576-1.576v-44.021c0-.873.703-1.576 1.576-1.576l45.597 45.597c0 .873-.703 1.576-1.576 1.576z" transform="matrix(1.15126 0 0 1.14297 -1679.299 -1277.358)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="8.0728302" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path></g><path d="M-203.727-65.836h56.15M-203.727-86.588h56.15M-203.727-45.084h56.15" transform="matrix(1.40338 0 0 1.39531 -274.77 -1289.345)" fill="none" stroke="#9e9e9e" stroke-width="6.61769342" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><path d="M-1479.304-1348.614h131.96l43.988 43.987v131.961h-175.948v-175.948z" transform="translate(848.772 -518.755)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041508" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-1427.669-1348.614h72.677v47.425h-72.677z" transform="translate(848.772 -518.755)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041508" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-1377.394-1332.878v15.496" transform="translate(848.772 -518.755)" fill="none" stroke="#9e9e9e" stroke-width="9.26041508" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><g stroke-width=".86788404"><path d="M-3414.003 67.181h98.601v61.57h-98.601z" transform="matrix(1.15223 0 0 1.15223 3334.345 -1839.771)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="8.03696728" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><g stroke-width=".86788404"><path d="M-3332.235 86.816h-64.935M-3332.235 109.116h-64.935" transform="matrix(1.15223 0 0 1.15223 3334.345 -1839.771)" fill="none" stroke="#9e9e9e" stroke-width="8.03696823" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g></g><path d="M-270.94-413.34v22.494m-104.458 0v-62.72h64.22" transform="translate(1470.528 -1839.253)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-272.332-411.949h-38.847c-.77 0-1.39-.62-1.39-1.39v-38.837c0-.77.62-1.39 1.39-1.39l40.238 40.227c0 .77-.62 1.39-1.39 1.39z" transform="translate(1470.528 -1839.253)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-263.93-373.522h12.753" transform="translate(1470.528 -1839.253)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-374.822-325.246h-36.322v-64.504h175.948v64.504h-33.492" transform="translate(1470.528 -1839.253)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-181.739-68.86h60.34M-181.739-50.007h60.34" transform="translate(1298.927 -2087.982)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-204.636-89.977h106.135v61.087h-106.135z" transform="translate(1298.927 -2087.982)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041698" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="m-1479.199 143.768 175.855-175.855M-1479.199-32.087l175.855 175.855" transform="translate(-407.09 -705.006)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><g transform="translate(482.298 -865.099)"><ellipse cx="-344.666" cy="-2283.139" rx="57.372" ry="56.435" transform="rotate(-45.005)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></ellipse><path d="m-1738.941-1251.822-79.106-79.12" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><path d="M-925.982-1197.013h-35.149v-18.315 0h35.149z" transform="translate(1230.336 -652.04)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-80.133-22.106h-142.87v-157.632 0h142.87z" transform="translate(438.348 -1669.315)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-106.552-167.136h-90.033v-6.89 0h90.033z" transform="translate(438.348 -1669.315)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><g stroke-width=".85923588"><path d="M-3788.422-212.559h68.377M-3788.422-237.183h68.377M-3788.422-187.934h68.377M-3788.991-163.31h68.377" transform="matrix(1.16492 0 0 1.16273 4660.502 -1532.594)" fill="none" stroke="#9e9e9e" stroke-width="7.956882" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><g transform="translate(-1540.737 -705.196)"><ellipse cx="704.225" cy="-258.695" rx="23.977" ry="23.822" transform="matrix(.5075 -.86165 .8703 .49253 0 0)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26110744" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></ellipse><path d="m185.263-702.973-32.843-18.586" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><ellipse cx="-519.544" cy="454.936" rx="23.977" ry="23.822" transform="matrix(.5075 .86165 .8703 -.49253 0 0)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26110744" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></ellipse><path d="m185.263-702.973-32.843 18.587M185.27-702.97l98.805-29.777M185.27-702.97l98.805 29.778" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><g transform="matrix(1.5227 0 0 1.52124 316.385 -1420.395)" stroke-width=".65704465"><path d="M-5468.298 2139.315v-72.696M-5468.298 2503.45v-246.957" transform="matrix(.26458 0 0 .26458 -244.173 -97.607)" fill="none" stroke="#9e9e9e" stroke-width="22.99656296" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><circle cx="-1690.993" cy="483.921" r="15.502" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="6.08450699" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></circle></g><g transform="matrix(1.5227 0 0 1.52124 318.893 -1420.395)" stroke-width=".65704465"><path d="M-5314.755 2305.239v-238.62M-5314.755 2503.45v-81.033" transform="matrix(.26458 0 0 .26458 -244.173 -97.607)" fill="none" stroke="#9e9e9e" stroke-width="22.99656296" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><circle cx="-1650.368" cy="527.822" r="15.502" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="6.08450699" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></circle></g><g transform="matrix(1.5227 0 0 1.52124 274.192 -1418.768)" stroke-width=".65704465"><path d="M-5044.034 2186.723v-124.144M-5044.034 2499.41V2303.9" transform="matrix(.26458 0 0 .26458 -244.173 -97.607)" fill="none" stroke="#9e9e9e" stroke-width="22.99656296" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><circle cx="-1578.74" cy="496.465" r="15.502" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="6.08450699" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></circle></g><path d="M-2262.117-1850.649h116.03v175.953h-116.03z" transform="translate(15.946 -16.722)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-2212.108-1762.673h132.042M-2080.066-1762.673l-38.89 38.051M-2080.066-1762.673l-38.89-38.051" transform="translate(15.946 -16.722)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-1895.171-1873.834h116.03v175.953h-116.03z" transform="translate(28.646 6.463)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-1713.12-1785.858h-132.043M-1845.162-1785.858l38.889 38.051M-1845.162-1785.858l38.889-38.051" transform="translate(28.646 6.463)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-822.946-666.604v50.635c0 1.263-.843 2.28-1.89 2.28H-997.01c-1.047 0-1.89-1.017-1.89-2.28v-50.635" transform="translate(-1649.078 -705.8)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041508" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-155.801-47.138v-150.835M-155.801-197.973l-43.482 44.424M-155.801-197.973l43.481 44.424" transform="translate(-2404.2 -1298.81)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M292.199-1203.883H467.98" transform="translate(244.173 202.685)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-239.46-110.08h175.783M-151.568-197.971V-22.19" transform="translate(396.573 -910.682)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><g transform="translate(-156.902 -990.181)"><ellipse cx="-840.6" cy="-2602.197" rx="57.372" ry="56.435" transform="rotate(-45.005)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></ellipse><path d="m-2315.174-1126.74-79.106-79.12M-2472.248-1245.753h76.1M-2434.198-1283.803v76.1" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><g transform="translate(307.534 -899.31)"><ellipse cx="-566.176" cy="-2456.273" rx="57.372" ry="56.435" transform="rotate(-45.005)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></ellipse><path d="m-2017.97-1217.612-79.106-79.12M-2175.044-1336.625h76.099" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><g transform="translate(236.723 -619.44)"><text style="line-height:3.3499999" x="-2507.133" xml:space="preserve" y="-1592.797" font-style="normal" font-weight="400" font-size="64.96838379px" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#9e9e9e" fill-opacity="1" stroke="none" stroke-width=".26458332" class="fill-000000"></text><ellipse cx="-598.089" cy="-2883.944" rx="57.372" ry="56.435" transform="rotate(-45.005)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></ellipse><path d="m-2342.916-1497.48-79.105-79.121" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><path d="M228.714-496.777h153.947v153.947H228.714z" transform="translate(-2876.688 -218.362)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M250.714-496.777v-22 0h153.948v153.947H382.66" transform="translate(-2876.688 -218.362)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M392.743-12.28h-71.21c-61.035 0-61.035-93.207 5.201-93.207H452.286M452.285-105.487l-38.889 38.051M452.285-105.487l-38.889-38.051" transform="translate(-68.211 -1330.237)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-460.409-314.904h71.21c61.035 0 61.035-93.208-5.202-93.208h-125.551M-519.952-408.112l38.89 38.051M-519.952-408.112l38.89-38.05" transform="translate(524.64 473.16)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M184.027-110.906 88.823-22.978M184.027-110.906l-95.204-87.929" transform="translate(-1564.477 -874.12)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="m-179.326-367.222 95.203 87.928M-179.326-367.222l95.203-87.929" transform="translate(-2428.276 -633.976)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><g stroke-width=".97482073"><path d="m-158.467 96.672 38.89 38.05M-158.467 96.672l38.89-38.052" transform="matrix(1.02602 0 0 1.02564 -58.754 -1147.647)" fill="none" stroke="#9e9e9e" stroke-width="9.02724552" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><path d="M-629.803-110.386c0 27.68 16.681 52.636 42.264 63.229 25.583 10.593 55.03 4.738 74.611-14.836 19.58-19.573 25.438-49.01 14.841-74.583-10.597-25.574-35.13-42.246-62.82-42.246l-68.843.003" transform="translate(408.411 -869.673)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-1514.972-863.954h-175.95l90.042-75.866zm-106.819 100.073h-46.532v-100.073h129.179v100.073h-46.533m-36.114-.118v-48.059 0h36.115v48.06" transform="translate(244.173 202.685)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><g stroke-width=".97482073"><path d="m-158.467 96.672 38.89 38.05M-158.467 96.672l38.89-38.052" transform="matrix(-1.02602 0 0 1.02564 -683.137 -1181.514)" fill="none" stroke="#9e9e9e" stroke-width="9.02724552" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><path d="M-740.528-110.386c0 27.68-16.68 52.636-42.263 63.229-25.584 10.593-55.03 4.738-74.611-14.836-19.58-19.573-25.438-49.01-14.841-74.583 10.596-25.574 35.13-42.246 62.82-42.246l68.842.003" transform="translate(220.028 -903.54)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><g transform="translate(3.226 -934.832)"><circle cx="-690.901" cy="-1105.169" r="87.974" transform="rotate(45)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></circle><circle cx="-690.901" cy="-1105.169" r="59.536" transform="rotate(45)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></circle><path d="m335.03-1227.915 20.05 20.05M230.783-1332.162l20.05 20.05M250.833-1227.915l-20.05 20.05M355.08-1332.162l-20.05 20.05" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><g transform="translate(-47.294 -955.833)"><ellipse cx="452.398" cy="693.554" rx="31.199" ry="31.635" transform="rotate(-90.006) skewX(-.011)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></ellipse><path d="m837.762-452.34-112.587-.006M781.102-426.26l.006-26.059M799.03-430.775l.006-21.572M816.957-426.283l.006-26.058" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><path d="m-112.512-183.042 38.32 95.425 102.595 6.956-78.912 65.932 25.087 99.723-87.09-54.676-87.09 54.676 25.088-99.723-78.913-65.932 102.595-6.956z" transform="matrix(.62427 0 0 .62366 1139.519 -970.624)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="14.84131432" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><g transform="translate(242.764 -1331.016)"><ellipse cx="518.3" cy="619.601" rx="23.977" ry="23.822" transform="matrix(.5075 -.86165 .8703 .49253 0 0)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26110744" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></ellipse><ellipse cx="406.422" cy="684.842" rx="23.977" ry="23.822" transform="matrix(.5075 -.86165 .8703 .49253 0 0)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26110744" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></ellipse><ellipse cx="525.334" cy="762.389" rx="23.977" ry="23.822" transform="matrix(.5075 -.86165 .8703 .49253 0 0)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26110744" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></ellipse><path d="m827.84-128.567 76.632 38.525M823.824-23.72l84.74-42.6" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><path d="m18.24-367.222 95.203-87.929M18.24-367.222l95.203 87.928" transform="rotate(90 -747.15 -1814.189)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="m18.24-367.222 95.203-87.929M18.24-367.222l95.203 87.928" transform="matrix(0 -1 -1 0 -2196.393 -937.146)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="m-179.326-367.222 95.203-62.485M-179.326-367.222l95.203 62.484" transform="translate(-785.349 -281.943)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M1800.444-591.196v175.857" transform="translate(-2774.43 -145.898)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="m-179.326-367.222 95.203-62.485M-179.326-367.222l95.203 62.484" transform="matrix(-1 0 0 1 -692.169 -281.943)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-348.818-389.608v175.857" transform="translate(-154.715 -347.486)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><g transform="translate(1666.946 -473.23)"><ellipse cx="-1833.87" cy="-222.459" rx="41.306" ry="41.449" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></ellipse><path d="M-1921.576-88.029h175.413m-175.413 0a87.974 86.257 0 0 1-.268-6.724 87.974 86.257 0 0 1 87.974-86.257 87.974 86.257 0 0 1 87.975 86.257v0a87.974 86.257 0 0 1-.268 6.726" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><path d="M67.944-879.662c-5.379-20.224-23.863-34.32-45.003-34.32-1.688 0-3.376.091-5.054.273m-39.874 34.013c-.524-.02-1.047-.03-1.571-.03-22.901 0-41.466 18.365-41.466 41.018 0 9.846 2.162 21.36 10.074 26.799 42.646 29.32 113.166 29.327 155.809 0 7.91-5.44 10.065-16.953 10.065-26.799 0-22.653-18.565-41.017-41.466-41.017-.524 0-1.048.01-1.571.029m-89.932.034c5.38-20.224 23.863-34.32 45.004-34.32 1.688 0 3.375.091 5.053.273M-429.927-2070.053h175.948v175.948h-175.948z" transform="translate(244.173 202.685)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><g opacity="1"><path d="M-516.693-200.039h25.929v25.929h-25.929zM-462.983-200.039h25.929v25.929h-25.929zM-409.273-200.039h25.929v25.929h-25.929zM-516.693-142.889h25.929v25.929h-25.929zM-462.983-142.889h25.929v25.929h-25.929zM-409.273-142.889h25.929v25.929h-25.929z" transform="translate(352.238 -1620.896)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path></g><path d="M-429.927-2051.751h175.948v139.344h-175.948z" transform="translate(244.173 202.685)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-1630.547-1101.345h116.03v175.953h-116.03z" transform="translate(178.802 -766.026)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-1696.568-1013.369h132.042M-1564.526-1013.369l-38.889 38.051M-1564.526-1013.369l-38.889-38.05" transform="translate(178.802 -766.026)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M-2486.665-2693.843h116.03v175.953h-116.03z" transform="translate(1440.261 826.472)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6.19999981" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-2420.644-2605.867h-132.042M-2552.686-2605.867l38.89 38.05M-2552.686-2605.867l38.89-38.051" transform="translate(1440.261 826.472)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><g transform="translate(112.94 -229.91)"><path d="M510.393-419.255h99.06M510.393-478.44h99.06M510.393-360.07h99.06" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><circle cx="491.237" cy="-478.44" r="4.63" opacity="1" fill="#9e9e9e" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="fill-000000"></circle><circle cx="491.237" cy="-419.255" r="4.63" opacity="1" fill="#9e9e9e" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="fill-000000"></circle><circle cx="491.237" cy="-360.069" r="4.63" opacity="1" fill="#9e9e9e" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="fill-000000"></circle><path d="M433.623-419.255h38.457M433.623-478.44h38.457M433.623-360.07h38.457" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path></g><path d="m-2794.504-2031.083-21.048-23.28h-35.36m-32.911 23.28 21.048-23.28h35.36m111.216 144.568h-175.948v-121.288h175.948v121.288z" transform="translate(244.173 202.685)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><path d="M744.321-2034.872h175.948v105.584H744.321z" transform="translate(244.173 202.685)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041508" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="m920.269-2034.872-175.962-.336 87.69 78.01z" transform="translate(244.173 202.685)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="m803.846-1981.917-59.54 52.966 175.963-.337-59.796-52.617-28.461 25.044z" transform="translate(244.173 202.685)" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><path d="M-1185.807-2341.564v-133.063h-42.622v155.069h61.812v-175.943h-83.078v153.938" transform="translate(244.173 202.685)" fill="none" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1" class="stroke-000000"></path><g transform="translate(214.065 183.713)"><path d="M763.417-840.016a150.885 154.112 0 0 1 50.689-8.956 150.885 154.112 0 0 1 50.686 8.955M744.758-872.992a187.686 191.7 0 0 1 69.355-13.569 187.686 191.7 0 0 1 69.338 13.562M726.192-905.84a224.488 229.289 0 0 1 87.901-18.31 224.488 229.289 0 0 1 87.923 18.319" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></path><ellipse cx="814.104" cy="-798.318" rx="18.761" ry="18.767" opacity="1" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#9e9e9e" stroke-width="9.26041603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-dashoffset="0" stroke-opacity="1" paint-order="normal" class="stroke-000000"></ellipse></g></svg>
\ No newline at end of file
diff --git a/src/images/icons/boards.svg b/src/images/icons/boards.svg
new file mode 100644
index 0000000..71567b4
--- /dev/null
+++ b/src/images/icons/boards.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="24" y="24" width="24" height="24" rx="3" transform="rotate(-180 24 24)" fill="#F4F4F4"/>
+<rect opacity="0.2" x="10.4399" y="20.88" width="7.32" height="10.5" rx="1.44" transform="rotate(-180 10.4399 20.88)" fill="black"/>
+<rect opacity="0.2" x="20.88" y="20.88" width="7.32" height="16.5" rx="1.44" transform="rotate(-180 20.88 20.88)" fill="black"/>
+</svg>
diff --git a/src/images/icons/cancel.svg b/src/images/icons/cancel.svg
new file mode 100644
index 0000000..2f79e02
--- /dev/null
+++ b/src/images/icons/cancel.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 512 512"><path d="M443.6 387.1 312.4 255.4l131.5-130c5.4-5.4 5.4-14.2 0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4-3.7 0-7.2 1.5-9.8 4L256 197.8 124.9 68.3c-2.6-2.6-6.1-4-9.8-4-3.7 0-7.2 1.5-9.8 4L68 105.9c-5.4 5.4-5.4 14.2 0 19.6l131.5 130L68.4 387.1c-2.6 2.6-4.1 6.1-4.1 9.8 0 3.7 1.4 7.2 4.1 9.8l37.4 37.6c2.7 2.7 6.2 4.1 9.8 4.1 3.5 0 7.1-1.3 9.8-4.1L256 313.1l130.7 131.1c2.7 2.7 6.2 4.1 9.8 4.1 3.5 0 7.1-1.3 9.8-4.1l37.4-37.6c2.6-2.6 4.1-6.1 4.1-9.8-.1-3.6-1.6-7.1-4.2-9.7z" fill="#d61313" class="fill-000000"></path></svg>
\ No newline at end of file
diff --git a/src/images/icons/delete.svg b/src/images/icons/delete.svg
new file mode 100644
index 0000000..c442f7f
--- /dev/null
+++ b/src/images/icons/delete.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 64 64"><path d="M-207.5-205.1h3v24h-3zM-201.5-205.1h3v24h-3zM-195.5-205.1h3v24h-3zM-219.5-214.1h39v3h-39z" transform="translate(232 228)" fill="#9e9e9e" class="fill-134563"></path><path d="M-192.6-212.6h-2.8v-3c0-.9-.7-1.6-1.6-1.6h-6c-.9 0-1.6.7-1.6 1.6v3h-2.8v-3c0-2.4 2-4.4 4.4-4.4h6c2.4 0 4.4 2 4.4 4.4v3" transform="translate(232 228)" fill="#9e9e9e" class="fill-134563"></path><path d="M-191-172.1h-18c-2.4 0-4.5-2-4.7-4.4l-2.8-36 3-.2 2.8 36c.1.9.9 1.6 1.7 1.6h18c.9 0 1.7-.8 1.7-1.6l2.8-36 3 .2-2.8 36c-.2 2.5-2.3 4.4-4.7 4.4" transform="translate(232 228)" fill="#9e9e9e" class="fill-134563"></path></svg>
\ No newline at end of file
diff --git a/src/images/icons/edit.svg b/src/images/icons/edit.svg
new file mode 100644
index 0000000..9a26ee6
--- /dev/null
+++ b/src/images/icons/edit.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g data-name="Layer 42"><path d="M2 29a1 1 0 0 1-1-1.11l.77-7a1 1 0 0 1 .29-.59L18.42 3.94a3.2 3.2 0 0 1 4.53 0l3.11 3.11a3.2 3.2 0 0 1 0 4.53L9.71 27.93a1 1 0 0 1-.59.29l-7 .77Zm7-1.78Zm-5.27-5.77-.6 5.42 5.42-.6 16.1-16.1a1.2 1.2 0 0 0 0-1.7l-3.12-3.12a1.2 1.2 0 0 0-1.7 0Z" fill="#9e9e9e" class="fill-101820"></path><path d="M23 14.21a1 1 0 0 1-.71-.29l-6.21-6.23a1 1 0 0 1 1.42-1.42l6.23 6.23a1 1 0 0 1 0 1.42 1 1 0 0 1-.73.29Z" fill="#9e9e9e" class="fill-101820"></path><path transform="rotate(-45 12.901 17.096)" d="M7.39 16.1H18.4v2H7.39z" fill="#9e9e9e" class="fill-101820"></path><path d="M30 29H14a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2Z" fill="#9e9e9e" class="fill-101820"></path></g></svg>
\ No newline at end of file
diff --git a/src/images/icons/github.svg b/src/images/icons/github.svg
new file mode 100644
index 0000000..22cef09
--- /dev/null
+++ b/src/images/icons/github.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg enable-background="new -1163 1657.697 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="-1163 1657.697 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path clip-rule="evenodd" d="M-1134.6598,1662.9163c-13.601,0-24.63,11.0267-24.63,24.6299   c0,10.8821,7.0573,20.1144,16.8435,23.3713c1.2308,0.2279,1.6829-0.5345,1.6829-1.1849c0-0.587-0.0227-2.5276-0.0334-4.5857   c-6.8521,1.4901-8.2979-2.906-8.2979-2.906c-1.1205-2.8467-2.7347-3.6039-2.7347-3.6039   c-2.2349-1.5287,0.1685-1.4972,0.1685-1.4972c2.473,0.1737,3.7755,2.5385,3.7755,2.5385c2.1967,3.7651,5.7618,2.6765,7.1675,2.0472   c0.2211-1.5917,0.8591-2.6786,1.5637-3.2936c-5.4707-0.6226-11.2218-2.7347-11.2218-12.1722c0-2.6888,0.9623-4.8861,2.538-6.611   c-0.2557-0.6206-1.0989-3.1255,0.2386-6.5183c0,0,2.0684-0.6616,6.7747,2.525c1.9648-0.5458,4.0719-0.8195,6.165-0.829   c2.093,0.0095,4.2017,0.2832,6.17,0.829c4.7012-3.1866,6.7665-2.525,6.7665-2.525c1.3406,3.3928,0.4974,5.8977,0.2417,6.5183   c1.5793,1.7249,2.5348,3.9221,2.5348,6.611c0,9.4602-5.7618,11.5428-11.2465,12.1527c0.8834,0.7644,1.6704,2.2632,1.6704,4.561   c0,3.2955-0.0282,5.9479-0.0282,6.7592c0,0.6556,0.4432,1.4236,1.6915,1.1818c9.7812-3.2605,16.8296-12.4896,16.8296-23.3682   C-1110.0299,1673.943-1121.0574,1662.9163-1134.6598,1662.9163z" fill-rule="evenodd"/><path d="M-1149.9611,1698.2793c-0.0542,0.1227-0.2469,0.1593-0.4222,0.0753c-0.1788-0.0804-0.2788-0.2473-0.2211-0.37   c0.053-0.126,0.2457-0.161,0.4242-0.0769C-1150.0013,1697.9882-1149.8993,1698.1566-1149.9611,1698.2793L-1149.9611,1698.2793z    M-1150.2642,1698.0547"/><path d="M-1148.9634,1699.3922c-0.1174,0.1086-0.3473,0.0581-0.5031-0.1139c-0.1613-0.1718-0.1912-0.4016-0.072-0.5118   c0.1211-0.1088,0.3438-0.0579,0.505,0.1139C-1148.8721,1699.0541-1148.8407,1699.2819-1148.9634,1699.3922L-1148.9634,1699.3922z    M-1149.1984,1699.14"/><path d="M-1147.9922,1700.8105c-0.151,0.1051-0.3979,0.0067-0.5505-0.2123c-0.151-0.2191-0.151-0.4819,0.0035-0.5872   c0.1526-0.1051,0.396-0.0104,0.5505,0.2068C-1147.8381,1700.4406-1147.8381,1700.7034-1147.9922,1700.8105L-1147.9922,1700.8105z    M-1147.9922,1700.8105"/><path d="M-1146.6619,1702.1812c-0.1351,0.1489-0.4227,0.1086-0.6329-0.0945c-0.2155-0.1984-0.2753-0.4803-0.1403-0.6293   c0.1371-0.149,0.4263-0.1072,0.6381,0.0944C-1146.5831,1701.7501-1146.5182,1702.0337-1146.6619,1702.1812L-1146.6619,1702.1812z    M-1146.6619,1702.1812"/><path d="M-1144.8265,1702.9769c-0.0597,0.1927-0.3365,0.2804-0.6154,0.1984c-0.2788-0.0845-0.4608-0.3103-0.4047-0.5051   c0.0577-0.1943,0.3361-0.2855,0.6169-0.1979C-1144.9512,1702.5563-1144.7688,1702.7805-1144.8265,1702.9769L-1144.8265,1702.9769z    M-1144.8265,1702.9769"/><path d="M-1142.8107,1703.1243c0.0067,0.2031-0.2299,0.3716-0.5226,0.3752c-0.2944,0.0067-0.533-0.1577-0.5361-0.3577   c0-0.2052,0.2313-0.3717,0.5258-0.3768C-1143.0509,1702.7594-1142.8107,1702.9227-1142.8107,1703.1243L-1142.8107,1703.1243z    M-1142.8107,1703.1243"/><path d="M-1140.9351,1702.8052c0.035,0.198-0.1686,0.4015-0.4594,0.4557c-0.2859,0.0526-0.5504-0.0701-0.587-0.2665   c-0.0354-0.2031,0.1716-0.4066,0.4573-0.4592C-1141.233,1702.4846-1140.9722,1702.6036-1140.9351,1702.8052L-1140.9351,1702.8052z    M-1140.9351,1702.8052"/></g></svg>
\ No newline at end of file
diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg
new file mode 100644
index 0000000..6f438be
--- /dev/null
+++ b/src/images/icons/instagram.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 56.7 56.7" enable-background="new 0 0 56.7 56.7" xml:space="preserve">
+<g>
+	<path d="M28.2,16.7c-7,0-12.8,5.7-12.8,12.8s5.7,12.8,12.8,12.8S41,36.5,41,29.5S35.2,16.7,28.2,16.7z M28.2,37.7
+		c-4.5,0-8.2-3.7-8.2-8.2s3.7-8.2,8.2-8.2s8.2,3.7,8.2,8.2S32.7,37.7,28.2,37.7z"/>
+	<circle cx="41.5" cy="16.4" r="2.9"/>
+	<path d="M49,8.9c-2.6-2.7-6.3-4.1-10.5-4.1H17.9c-8.7,0-14.5,5.8-14.5,14.5v20.5c0,4.3,1.4,8,4.2,10.7c2.7,2.6,6.3,3.9,10.4,3.9
+		h20.4c4.3,0,7.9-1.4,10.5-3.9c2.7-2.6,4.1-6.3,4.1-10.6V19.3C53,15.1,51.6,11.5,49,8.9z M48.6,39.9c0,3.1-1.1,5.6-2.9,7.3
+		s-4.3,2.6-7.3,2.6H18c-3,0-5.5-0.9-7.3-2.6C8.9,45.4,8,42.9,8,39.8V19.3c0-3,0.9-5.5,2.7-7.3c1.7-1.7,4.3-2.6,7.3-2.6h20.6
+		c3,0,5.5,0.9,7.3,2.7c1.7,1.8,2.7,4.3,2.7,7.2V39.9L48.6,39.9z"/>
+</g>
+</svg>
diff --git a/src/images/icons/linkedin.svg b/src/images/icons/linkedin.svg
new file mode 100644
index 0000000..47bd395
--- /dev/null
+++ b/src/images/icons/linkedin.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" version="1.1" viewBox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-288.985,423.278l0,-225.717l-75.04,0l0,225.717l75.04,0Zm270.539,0l0,-129.439c0,-69.333 -37.018,-101.586 -86.381,-101.586c-39.804,0 -57.634,21.891 -67.617,37.266l0,-31.958l-75.021,0c0.995,21.181 0,225.717 0,225.717l75.02,0l0,-126.056c0,-6.748 0.486,-13.492 2.474,-18.315c5.414,-13.475 17.767,-27.434 38.494,-27.434c27.135,0 38.007,20.707 38.007,51.037l0,120.768l75.024,0Zm-307.552,-334.556c-25.674,0 -42.448,16.879 -42.448,39.002c0,21.658 16.264,39.002 41.455,39.002l0.484,0c26.165,0 42.452,-17.344 42.452,-39.002c-0.485,-22.092 -16.241,-38.954 -41.943,-39.002Z"/></svg>
\ No newline at end of file
diff --git a/src/images/icons/loading.gif b/src/images/icons/loading.gif
new file mode 100644
index 0000000..b7a1b23
Binary files /dev/null and b/src/images/icons/loading.gif differ
diff --git a/src/images/icons/logo-small.png b/src/images/icons/logo-small.png
new file mode 100644
index 0000000..80e178a
Binary files /dev/null and b/src/images/icons/logo-small.png differ
diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg
new file mode 100644
index 0000000..a6a5210
--- /dev/null
+++ b/src/images/icons/logo.svg
@@ -0,0 +1,10 @@
+<svg width="240" height="80" viewBox="0 0 240 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M106.4 21V29.34H113.42V34.86H106.4V47.7599C106.4 51.2999 107.36 53.16 110.18 53.16C111.44 53.16 112.4 52.98 113.06 52.8L113.18 58.4399C112.1 58.8599 110.18 59.16 107.84 59.16C105.14 59.16 102.86 58.2599 101.48 56.7599C99.92 55.0799 99.2 52.44 99.2 48.6V34.86H95V29.34H99.2V22.74L106.4 21Z" fill="black"/>
+<path d="M123.861 46.0197C124.041 51.2997 128.181 53.5797 132.861 53.5797C136.281 53.5797 138.741 53.0996 140.961 52.2596L142.041 57.3597C139.521 58.3797 136.041 59.1597 131.841 59.1597C122.361 59.1597 116.781 53.3397 116.781 44.3997C116.781 36.2997 121.701 28.6797 131.061 28.6797C140.541 28.6797 143.661 36.4797 143.661 42.8997C143.661 44.2797 143.541 45.3597 143.421 46.0197H123.861V46.0197ZM136.691 40.8597C136.751 38.1597 135.551 33.7197 130.631 33.7197C126.071 33.7197 124.151 37.8597 123.851 40.8597H136.691Z" fill="black"/>
+<path d="M166.027 58.5597L165.547 55.3196H165.367C163.567 57.5996 160.507 59.2197 156.727 59.2197C150.847 59.2197 147.547 54.9597 147.547 50.5197C147.547 43.1397 154.087 39.4197 164.887 39.4797V38.9997C164.887 37.0797 164.107 33.8997 158.947 33.8997C156.067 33.8997 153.067 34.7997 151.087 36.0597L149.647 31.2596C151.807 29.9396 155.587 28.6797 160.207 28.6797C169.567 28.6797 172.267 34.6197 172.267 40.9797V51.5397C172.267 54.1797 172.387 56.7597 172.687 58.5597H166.027V58.5597ZM165.067 44.2797C159.847 44.1597 154.867 45.2997 154.867 49.7397C154.867 52.6197 156.727 53.9396 159.067 53.9396C162.007 53.9396 164.167 52.0197 164.827 49.9197C165.007 49.3797 165.067 48.7797 165.067 48.2997V44.2797Z" fill="black"/>
+<path d="M180.084 38.0397C180.084 34.6797 180.024 31.8597 179.844 29.3397H186.204L186.504 33.6597H186.684C188.124 31.3797 190.764 28.6797 195.684 28.6797C199.524 28.6797 202.524 30.8397 203.784 34.0797H203.904C204.924 32.4597 206.124 31.2597 207.504 30.4197C209.124 29.2797 210.984 28.6797 213.384 28.6797C218.244 28.6797 223.164 31.9797 223.164 41.3397V58.5597H215.964V42.4197C215.964 37.5597 214.284 34.6797 210.744 34.6797C208.224 34.6797 206.364 36.4797 205.584 38.5797C205.404 39.2997 205.224 40.1997 205.224 41.0397V58.5597H198.024V41.6396C198.024 37.5596 196.404 34.6797 192.984 34.6797C190.224 34.6797 188.364 36.8396 187.704 38.8796C187.404 39.5996 187.284 40.4397 187.284 41.2797V58.5597H180.084V38.0397Z" fill="black"/>
+<path d="M230.047 54.4783C230.047 51.7183 231.967 49.7383 234.607 49.7383C237.307 49.7383 239.167 51.6583 239.167 54.4783C239.167 57.1783 237.367 59.2183 234.607 59.2183C231.907 59.2183 230.047 57.1783 230.047 54.4783Z" fill="black"/>
+<rect width="80" height="80" rx="16" fill="#6551F3"/>
+<path d="M65.09 64.88H54.13V48.28C54.13 46.62 52.09 45.65 48.86 45.65C45.42 45.65 43.45 46.62 43.45 48.28V64.88H14V42.27H24.96V60.01H34.8V48.28C34.8 43.69 39.58 41.21 49.77 41.21C58.56 41.21 65.09 43.54 65.09 48.28V64.88Z" fill="white"/>
+<path d="M65.09 38.55H54.13V23.83C54.13 21.99 52.16 20.84 48.72 20.84C45.42 20.84 43.45 21.72 43.45 23.44V33.26H34.81V23.77C34.81 22.05 33.19 21.23 29.89 21.23C26.45 21.23 24.9 22.23 24.9 24.13V38.46H14.01V23.83C14.01 19.42 18.51 16.48 27.36 16.48C33.54 16.48 36.57 17.75 37.9 18.99C39.52 17.33 43.52 16 48.86 16C58.98 16 65.1 18.96 65.1 23.29L65.09 38.55Z" fill="white"/>
+</svg>
diff --git a/src/images/icons/plus.svg b/src/images/icons/plus.svg
new file mode 100644
index 0000000..8a4da87
--- /dev/null
+++ b/src/images/icons/plus.svg
@@ -0,0 +1 @@
+<svg data-name="Layer 1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M25 6.61h-2.74V4.47A2.48 2.48 0 0 0 19.79 2H6.72a2.48 2.48 0 0 0-2.47 2.47v18.45a2.48 2.48 0 0 0 2.47 2.47h3v1.81a2.81 2.81 0 0 0 2.8 2.8H25a2.81 2.81 0 0 0 2.8-2.8V9.41a2.81 2.81 0 0 0-2.8-2.8ZM6.72 23.52a.6.6 0 0 1-.6-.6V4.47a.6.6 0 0 1 .6-.6h13.07a.61.61 0 0 1 .6.6v2.14h-7.85a2.81 2.81 0 0 0-2.8 2.8v14.11Zm19.16 3.68a.93.93 0 0 1-.93.93H12.54a.93.93 0 0 1-.93-.93V9.41a.93.93 0 0 1 .93-.93H25a.93.93 0 0 1 .93.93Z" fill="#9e9e9e" class="fill-000000"></path><path d="M24.19 17.37h-4.51v-4.51a.94.94 0 0 0-1.87 0v4.51H13.3a.94.94 0 0 0 0 1.87h4.51v4.51a.94.94 0 0 0 1.87 0v-4.51h4.51a.94.94 0 0 0 0-1.87Z" fill="#9e9e9e" class="fill-000000"></path></svg>
\ No newline at end of file
diff --git a/src/images/icons/rs_school_logo.svg b/src/images/icons/rs_school_logo.svg
new file mode 100644
index 0000000..3b80540
--- /dev/null
+++ b/src/images/icons/rs_school_logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 552.8 205.3"><style>.st0{fill:#fff}.st1{clip-path:url(#SVGID_2_)}.st2{clip-path:url(#SVGID_4_)}.st3{clip-path:url(#SVGID_6_)}.st4{clip-path:url(#SVGID_8_)}.st5{fill:#fff;stroke:#000;stroke-width:4;stroke-miterlimit:10}.st6{clip-path:url(#SVGID_8_)}.st6,.st7{fill:none;stroke:#000;stroke-width:4;stroke-miterlimit:10}.st8,.st9{clip-path:url(#SVGID_10_)}.st9{fill:none;stroke:#000;stroke-width:4;stroke-miterlimit:10}</style><title>rs_school_js</title><path d="M285.4 68l26.3-1.7c.6 4.3 1.7 7.5 3.5 9.8 2.9 3.6 6.9 5.4 12.2 5.4 3.9 0 7-.9 9.1-2.8 2-1.5 3.2-3.9 3.2-6.4 0-2.4-1.1-4.7-3-6.2-2-1.8-6.7-3.6-14.1-5.2-12.1-2.7-20.8-6.3-25.9-10.9-5.1-4.3-8-10.6-7.8-17.3 0-4.6 1.4-9.2 4-13 3-4.3 7.1-7.7 12-9.6 5.3-2.3 12.7-3.5 22-3.5 11.4 0 20.1 2.1 26.1 6.4 6 4.2 9.6 11 10.7 20.3l-26 1.5c-.7-4-2.1-6.9-4.4-8.8s-5.3-2.8-9.2-2.8c-3.2 0-5.6.7-7.2 2-1.5 1.2-2.5 3-2.4 5 0 1.5.8 2.9 2 3.8 1.3 1.2 4.4 2.3 9.3 3.3 12.1 2.6 20.7 5.2 26 7.9 5.3 2.7 9.1 6 11.4 9.9 2.4 4 3.6 8.6 3.5 13.3 0 5.6-1.6 11.2-4.8 15.9-3.3 4.9-7.9 8.7-13.3 11-5.7 2.5-12.9 3.8-21.5 3.8-15.2 0-25.7-2.9-31.6-8.8S286.1 77 285.4 68zM6.3 97.6V8.2h46.1c8.5 0 15.1.7 19.6 2.2 4.4 1.4 8.3 4.3 10.9 8.2 2.9 4.3 4.3 9.3 4.2 14.5.3 8.8-4.2 17.2-11.9 21.6-3 1.7-6.3 2.9-9.7 3.5 2.5.7 5 1.9 7.2 3.3 1.7 1.4 3.1 3 4.4 4.7 1.5 1.7 2.8 3.6 3.9 5.6l13.4 25.9H63L48.2 70.2c-1.9-3.5-3.5-5.8-5-6.9-2-1.4-4.4-2.1-6.8-2.1H34v36.3H6.3zM34 44.4h11.7c2.5-.2 4.9-.6 7.3-1.2 1.8-.3 3.4-1.3 4.5-2.8 2.7-3.6 2.3-8.7-1-11.8-1.8-1.5-5.3-2.3-10.3-2.3H34v18.1zM0 174.2l26.3-1.7c.6 4.3 1.7 7.5 3.5 9.8 2.8 3.6 6.9 5.5 12.2 5.5 3.9 0 7-.9 9.1-2.8 2-1.6 3.2-3.9 3.2-6.4 0-2.4-1.1-4.7-3-6.2-2-1.8-6.7-3.6-14.2-5.2-12.1-2.7-20.8-6.3-25.9-10.9-5.1-4.3-8-10.6-7.8-17.3 0-4.6 1.4-9.2 4-13 3-4.3 7.1-7.7 12-9.6 5.3-2.3 12.7-3.5 22-3.5 11.4 0 20.1 2.1 26.1 6.4s9.5 11 10.6 20.3l-26 1.5c-.7-4-2.1-6.9-4.4-8.8-2.2-1.9-5.3-2.8-9.2-2.7-3.2 0-5.6.7-7.2 2.1-1.6 1.2-2.5 3-2.4 5 0 1.5.8 2.9 2 3.8 1.3 1.2 4.4 2.3 9.3 3.3 12.1 2.6 20.7 5.2 26 7.9 5.3 2.7 9.1 6 11.4 9.9 2.4 4 3.6 8.6 3.6 13.2 0 5.6-1.7 11.1-4.8 15.8-3.3 4.9-7.9 8.7-13.3 11-5.7 2.5-12.9 3.8-21.5 3.8-15.2 0-25.7-2.9-31.6-8.8-5.9-6-9.2-13.4-10-22.4z"/><path d="M133 167.2l24.2 7.3c-1.3 6.1-4 11.9-7.7 17-3.4 4.5-7.9 8-13 10.3-5.2 2.3-11.8 3.5-19.8 3.5-9.7 0-17.7-1.4-23.8-4.2-6.2-2.8-11.5-7.8-16-14.9-4.5-7.1-6.7-16.2-6.7-27.3 0-14.8 3.9-26.2 11.8-34.1s19-11.9 33.4-11.9c11.3 0 20.1 2.3 26.6 6.8 6.4 4.6 11.2 11.6 14.4 21l-24.4 5.4c-.6-2.1-1.5-4.2-2.7-6-1.5-2.1-3.4-3.7-5.7-4.9-2.3-1.2-4.9-1.7-7.5-1.7-6.3 0-11.1 2.5-14.4 7.6-2.5 3.7-3.8 9.6-3.8 17.6 0 9.9 1.5 16.7 4.5 20.4 3 3.7 7.2 5.5 12.7 5.5 5.3 0 9.3-1.5 12-4.4 2.7-3.1 4.7-7.4 5.9-13zm56.5-52.8h27.6v31.3h30.2v-31.3h27.8v89.4h-27.8v-36.2h-30.2v36.2h-27.6v-89.4z"/><path d="M271.3 159.1c0-14.6 4.1-26 12.2-34.1 8.1-8.1 19.5-12.2 34-12.2 14.9 0 26.3 4 34.4 12S364 144 364 158.4c0 10.5-1.8 19-5.3 25.7-3.4 6.6-8.7 12-15.2 15.6-6.7 3.7-15 5.6-24.9 5.6-10.1 0-18.4-1.6-25-4.8-6.8-3.4-12.4-8.7-16.1-15.2-4.1-7-6.2-15.7-6.2-26.2zm27.6.1c0 9 1.7 15.5 5 19.5 3.3 3.9 7.9 5.9 13.7 5.9 5.9 0 10.5-1.9 13.8-5.8s4.9-10.8 4.9-20.8c0-8.4-1.7-14.6-5.1-18.4-3.4-3.9-8-5.8-13.8-5.8-5.1-.2-10 2-13.4 5.9-3.4 3.9-5.1 10.4-5.1 19.5zm93.4-.1c0-14.6 4.1-26 12.2-34.1 8.1-8.1 19.5-12.2 34-12.2 14.9 0 26.4 4 34.4 12S485 144 485 158.4c0 10.5-1.8 19-5.3 25.7-3.4 6.6-8.7 12-15.2 15.6-6.7 3.7-15 5.6-24.9 5.6-10.1 0-18.4-1.6-25-4.8-6.8-3.4-12.4-8.7-16.1-15.2-4.1-7-6.2-15.7-6.2-26.2zm27.6.1c0 9 1.7 15.5 5 19.5 3.3 3.9 7.9 5.9 13.7 5.9 5.9 0 10.5-1.9 13.8-5.8 3.3-3.9 4.9-10.8 4.9-20.8 0-8.4-1.7-14.6-5.1-18.4-3.4-3.9-8-5.8-13.8-5.8-5.1-.2-10.1 2-13.4 5.9-3.4 3.9-5.1 10.4-5.1 19.5z"/><path d="M482.1 114.4h27.6v67.4h43.1v22H482v-89.4z"/><ellipse transform="rotate(-37.001 420.46 67.88)" class="st0" cx="420.5" cy="67.9" rx="63" ry="51.8"/><defs><ellipse id="SVGID_1_" transform="rotate(-37.001 420.46 67.88)" cx="420.5" cy="67.9" rx="63" ry="51.8"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" overflow="visible"/></clipPath><g class="st1"><path transform="rotate(-37.001 420.82 68.353)" class="st0" d="M330.9-14.2h179.8v165.1H330.9z"/><g id="Layer_2_1_"><defs><path id="SVGID_3_" transform="rotate(-37.001 420.82 68.353)" d="M330.9-14.2h179.8v165.1H330.9z"/></defs><clipPath id="SVGID_4_"><use xlink:href="#SVGID_3_" overflow="visible"/></clipPath><g id="Layer_1-2" class="st2"><ellipse transform="rotate(-37.001 420.46 67.88)" class="st0" cx="420.5" cy="67.9" rx="63" ry="51.8"/><defs><ellipse id="SVGID_5_" transform="rotate(-37.001 420.46 67.88)" cx="420.5" cy="67.9" rx="63" ry="51.8"/></defs><clipPath id="SVGID_6_"><use xlink:href="#SVGID_5_" overflow="visible"/></clipPath><g class="st3"><path transform="rotate(-37 420.799 68.802)" class="st0" d="M357.8 17h125.9v103.7H357.8z"/><defs><path id="SVGID_7_" transform="rotate(-37 420.799 68.802)" d="M357.8 17h125.9v103.7H357.8z"/></defs><clipPath id="SVGID_8_"><use xlink:href="#SVGID_7_" overflow="visible"/></clipPath><g class="st4"><ellipse transform="rotate(-37.001 420.46 67.88)" class="st5" cx="420.5" cy="67.9" rx="63" ry="51.8"/></g><path transform="rotate(-37 420.799 68.802)" class="st6" d="M357.8 17h125.9v103.7H357.8z"/><ellipse transform="rotate(-37.001 420.46 67.88)" class="st7" cx="420.5" cy="67.9" rx="63" ry="51.8"/><path transform="rotate(-37 420.799 68.802)" class="st0" d="M357.8 17h125.9v103.7H357.8z"/><defs><path id="SVGID_9_" transform="rotate(-37 420.799 68.802)" d="M357.8 17h125.9v103.7H357.8z"/></defs><clipPath id="SVGID_10_"><use xlink:href="#SVGID_9_" overflow="visible"/></clipPath><g class="st8"><ellipse transform="rotate(-37.001 420.46 67.88)" class="st5" cx="420.5" cy="67.9" rx="63" ry="51.8"/></g><path transform="rotate(-37 420.799 68.802)" class="st9" d="M357.8 17h125.9v103.7H357.8z"/><path transform="rotate(-37.001 420.82 68.353)" class="st7" d="M330.9-14.2h179.8v165.1H330.9z"/></g><ellipse transform="rotate(-37.001 420.46 67.88)" class="st7" cx="420.5" cy="67.9" rx="63" ry="51.8"/><path d="M392.4 61.3l10-7 12.3 17.5c2.1 2.8 3.7 5.8 4.9 9.1.7 2.5.5 5.2-.5 7.6-1.3 3-3.4 5.5-6.2 7.3-3.3 2.3-6.1 3.6-8.5 4-2.3.4-4.7 0-6.9-1-2.4-1.2-4.5-2.9-6.1-5.1l8.6-8c.7 1.1 1.6 2.1 2.6 2.9.7.5 1.5.8 2.4.8.7 0 1.4-.3 1.9-.7 1-.6 1.7-1.8 1.6-3-.3-1.7-1-3.4-2.1-4.7l-14-19.7zm30 11.1l9.1-7.2c1 1.2 2.3 2.1 3.7 2.6 2 .6 4.1.2 5.8-1.1 1.2-.8 2.2-1.9 2.6-3.3.6-1.8-.4-3.8-2.2-4.4-.3-.1-.6-.2-.9-.2-1.2-.1-3.3.4-6.4 1.7-5.1 2.1-9.1 2.9-12.1 2.6-2.9-.3-5.6-1.8-7.2-4.3-1.2-1.7-1.8-3.7-1.9-5.7 0-2.3.6-4.6 1.9-6.5 1.9-2.7 4.2-5 7-6.8 4.2-2.9 7.9-4.3 11.1-4.3 3.2 0 6.2 1.5 9 4.6l-9 7.1c-1.8-2.3-5.2-2.8-7.5-1l-.3.3c-1 .6-1.7 1.5-2.1 2.6-.3.8-.1 1.7.4 2.4.4.5 1 .9 1.7.9.8.1 2.2-.3 4.2-1.2 5-2.1 8.8-3.3 11.4-3.7 2.2-.4 4.5-.2 6.6.7 1.9.8 3.5 2.2 4.6 3.9 1.4 2 2.2 4.4 2.3 6.9.1 2.6-.6 5.1-2 7.3-1.8 2.7-4.1 5-6.8 6.8-5.5 3.8-10 5.4-13.6 4.8-3.9-.6-7.1-2.6-9.4-5.5z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/images/icons/submit.svg b/src/images/icons/submit.svg
new file mode 100644
index 0000000..0e4e668
--- /dev/null
+++ b/src/images/icons/submit.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m173.898 439.404-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" fill="#00ff77" class="fill-000000"></path></svg>
\ No newline at end of file
diff --git a/src/images/icons/user.svg b/src/images/icons/user.svg
new file mode 100644
index 0000000..bd51809
--- /dev/null
+++ b/src/images/icons/user.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 64 64"><path d="M-246-222.1c-13.2 0-23.9-10.7-23.9-23.9s10.7-23.9 23.9-23.9 23.9 10.7 23.9 23.9-10.7 23.9-23.9 23.9zm0-45.2c-11.7 0-21.3 9.6-21.3 21.3 0 11.7 9.6 21.3 21.3 21.3 11.7 0 21.3-9.6 21.3-21.3 0-11.7-9.6-21.3-21.3-21.3z" transform="translate(278 278)" fill="#9e9e9e" class="fill-134563"></path><path d="m-260-228.7-2.4-1.1c.7-1.7 2.9-2.6 5.4-3.7 2.4-1.1 5.4-2.4 5.4-4v-2.2c-.9-.7-2.3-2.3-2.5-4.6-.7-.7-1.8-2-1.8-3.6 0-1 .4-1.8.7-2.3-.2-1.1-.6-3.3-.6-5 0-5.5 3.8-9.1 9.8-9.1 1.7 0 3.8.5 4.9 1.7 2.7.5 4.9 3.7 4.9 7.4 0 2.4-.4 4.4-.7 5.3.3.5.6 1.2.6 2 0 1.9-.9 3.1-1.8 3.7-.2 2.3-1.5 3.8-2.3 4.5v2.2c0 1.4 2.5 2.3 4.8 3.2 2.7 1 5.5 2 6.4 4.3l-2.5.9c-.4-1.2-2.8-2-4.8-2.8-3.1-1.1-6.6-2.4-6.6-5.6v-3.6l.6-.4c.1 0 1.8-1.2 1.8-3.5v-.9l.8-.3c.1-.1.9-.5.9-1.7 0-.4-.3-.8-.4-.9l-.5-.6.2-.7s.7-2.2.7-5.2c0-2.5-1.4-4.8-2.9-4.8h-.8l-.4-.7c-.3-.5-1.5-1-3.1-1-4.5 0-7.2 2.4-7.2 6.5 0 1.9.7 5 .7 5l.2.7-.5.5s-.4.5-.4 1c0 .7.9 1.6 1.3 2l.5.4v.7c0 2.2 1.9 3.4 1.9 3.4l.6.4v3.6c0 3.3-3.7 5-7 6.4-1.4.8-3.5 1.8-3.9 2.5" transform="translate(278 278)" fill="#9e9e9e" class="fill-134563"></path></svg>
\ No newline at end of file
diff --git a/src/images/modal/changeUser.jpg b/src/images/modal/changeUser.jpg
new file mode 100644
index 0000000..e2d3e38
Binary files /dev/null and b/src/images/modal/changeUser.jpg differ
diff --git a/src/images/modal/create.jpg b/src/images/modal/create.jpg
new file mode 100644
index 0000000..1e0b3a1
Binary files /dev/null and b/src/images/modal/create.jpg differ
diff --git a/src/images/modal/defaultBg.jpg b/src/images/modal/defaultBg.jpg
new file mode 100644
index 0000000..d1ca245
Binary files /dev/null and b/src/images/modal/defaultBg.jpg differ
diff --git a/src/index.scss b/src/index.scss
new file mode 100644
index 0000000..a7c9573
--- /dev/null
+++ b/src/index.scss
@@ -0,0 +1,107 @@
+@import './sass/Constants.scss';
+
+// === FONTS ===
+
+@mixin font($font_name, $file_name, $weight, $style) {
+  @font-face {
+    font-family: $font_name;
+    font-display: swap;
+    src: url('./fonts/#{$file_name}.woff') format('woff'),
+      url('./fonts/#{$file_name}.woff2') format('woff2');
+    font-weight: #{$weight};
+    font-style: #{$style};
+  }
+}
+
+@import './sass/Fonts.scss';
+
+// === / FONTS ===
+
+html,
+body {
+  @include poppins;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+}
+
+body {
+  @include scroll;
+  overflow: auto;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.main {
+  flex-grow: 1;
+}
+
+#root {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.wrapper {
+  display: flex;
+  width: 80%;
+  max-width: $base * 288;
+  margin: 0 auto;
+
+  @media (max-width: $breakpoint-lg-min) {
+    width: 97%;
+  }
+}
+
+.h2 {
+  @include poppins;
+  margin: 0;
+  padding: 0;
+  font-size: $fs-xxl;
+  font-weight: $fw-semi-bold;
+  letter-spacing: 0.125rem;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.h3 {
+  @include poppins;
+  margin: 0;
+  padding: 0;
+  font-size: $fs-xs;
+  font-weight: $fw-semi-bold;
+  color: $color-white;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.h4 {
+  @include poppins;
+  margin: 0;
+  padding: 0;
+  font-size: $fs-m;
+  font-weight: $fw-bold;
+  color: $color-dark;
+  line-height: $base * 4;
+  letter-spacing: 0.06em;
+}
+
+a {
+  text-decoration: none;
+}
+
+.border-right {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-right: $base;
+  border-right: 0.063rem solid $color-dark-03;
+}
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..fef7dfa
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from './app/store';
+
+import { App } from './App';
+import './index.scss';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const container = document.getElementById('root')!;
+const root = createRoot(container);
+
+root.render(
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>
+);
diff --git a/src/middleware/ls-middleware.ts b/src/middleware/ls-middleware.ts
new file mode 100644
index 0000000..3fa2113
--- /dev/null
+++ b/src/middleware/ls-middleware.ts
@@ -0,0 +1,13 @@
+import { Action, AnyAction, Dispatch } from '@reduxjs/toolkit';
+import { saveLangToLS } from '../features/ls-load-save';
+import { setLang } from '../reducers/langReducer';
+
+export const localStorageMiddleware =
+  () => (next: Dispatch<AnyAction>) => (action: Action<unknown>) => {
+    if (setLang.match(action)) {
+      try {
+        saveLangToLS(action.payload);
+      } catch {}
+    }
+    return next(action);
+  };
diff --git a/src/pages/board/Board.scss b/src/pages/board/Board.scss
new file mode 100644
index 0000000..2f6dc7a
--- /dev/null
+++ b/src/pages/board/Board.scss
@@ -0,0 +1,95 @@
+@import '../../sass/Constants.scss';
+
+.board {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 100%;
+  max-height: max-content;
+  background-color: $color-purple-06;
+
+  .wrapper {
+    align-items: flex-start;
+    gap: $base;
+    height: 100%;
+  }
+}
+
+.board__wrapper {
+  column-gap: $base * 2;
+  height: inherit;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.board__columns {
+  display: flex;
+  align-items: flex-start;
+  column-gap: $base * 3;
+  height: 100%;
+}
+
+.board__column::-webkit-scrollbar,
+.board__wrapper::-webkit-scrollbar {
+  width: $base;
+}
+
+.board__column::-webkit-scrollbar-thumb,
+.board__wrapper::-webkit-scrollbar-thumb {
+  background-color: $color-dark-02;
+  border-radius: $base;
+}
+
+.board__column::-webkit-scrollbar-track,
+.board__wrapper::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 $base grey;
+  border-radius: $base * 2;
+  height: $base * 2;
+  background-color: $color-grey-white;
+}
+
+.column__new-btn {
+  height: fit-content;
+}
+
+.board__title__wrapper {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  row-gap: $base * 2;
+  width: max-content;
+  text-align: center;
+
+  @media (max-width: $breakpoint-lg-min) {
+    align-items: center;
+  }
+}
+
+.board__title {
+  width: 80%;
+  max-width: 90rem;
+  margin: 0 auto;
+  font-size: $fs-xxxl;
+  font-weight: $fw-semi-bold;
+  text-align: left;
+  line-height: inherit;
+  word-break: break-word;
+  text-shadow: 0.063rem 0.063rem 0.063rem $color-sale, 0 0 0.06em $color-blue-light,
+    0 0 0.06em $color-blue-light;
+  color: $color-dark;
+
+  @media (max-width: $breakpoint-lg-min) {
+    width: 97%;
+    font-size: $fs-xxl;
+  }
+
+  @media (max-width: $breakpoint-md-min) {
+    font-size: $fs-xl;
+  }
+}
+
+.board__title-description {
+  @media (max-width: $breakpoint-lg-min) {
+    display: none;
+  }
+}
diff --git a/src/pages/board/Board.tsx b/src/pages/board/Board.tsx
new file mode 100644
index 0000000..f716ca1
--- /dev/null
+++ b/src/pages/board/Board.tsx
@@ -0,0 +1,301 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+import { Link, useParams } from 'react-router-dom';
+
+import {
+  apiUser,
+  useDeleteTaskMutation,
+  useGetBoardsByIdQuery,
+  useGetColumnsQuery,
+  usePostColumnMutation,
+  usePostTaskMutation,
+  useUpdateColumnMutation,
+  useUpdateTaskMutation,
+} from '../../app/RtkQuery';
+import { BackButton } from '../../components/buttons';
+import { localizationObj } from '../../features/localization';
+import { Preloader } from '../../components/preloader/Preloader';
+
+import './Board.scss';
+import { Modal } from '../../components';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { TasksList } from '../../components/boardColumn/BoardColumn';
+import { ChangeTitleBtns } from '../../components/buttons';
+const BoardColumn = React.lazy(() => import('../../components/boardColumn/BoardColumn'));
+
+export interface ColumnType {
+  title: string;
+  id: string;
+  order: number;
+}
+
+const Board: FC = () => {
+  const { id } = useParams();
+  const boardId = id ?? '';
+
+  const api = apiUser;
+  const dispatch = useAppDispatch();
+  const { userId } = useAppSelector((state) => state.userStorage);
+
+  const { data: data1, error, isLoading } = useGetColumnsQuery({ boardId });
+  const [postColumn] = usePostColumnMutation();
+  const [updateColumn] = useUpdateColumnMutation();
+  const [postTask] = usePostTaskMutation();
+  const [deleteTask] = useDeleteTaskMutation();
+  const [updateTask] = useUpdateTaskMutation();
+  const getBoardsById = useGetBoardsByIdQuery(boardId);
+  const currentBoardTitle = getBoardsById.data?.title;
+  const moveRef = useRef(['', '']);
+  const { lang } = useAppSelector((state) => state.langStorage);
+  const [columnsList, updateColumnsList] = useState<ColumnType[]>([]);
+  const [activeModal, setActiveModal] = useState<boolean>(false);
+  const [columnTitle, setColumnTitle] = useState('');
+
+  const addNewColumn = async () => {
+    if (columnTitle.trim().length) {
+      await postColumn({
+        boardId: boardId,
+        body: {
+          title: columnTitle,
+        },
+      });
+      setActiveModal(false);
+      setColumnTitle('');
+    }
+  };
+
+  const updateColumnHandler = async (id: string, title: string, order: number) => {
+    await updateColumn({
+      columnId: id,
+      boardId,
+      body: {
+        title,
+        order,
+      },
+    });
+  };
+
+  const reorderColumns = (columnsList: ColumnType[], startIndex: number, endIndex: number) => {
+    const columns = [...columnsList];
+    const [movedColumn] = columns.splice(startIndex, 1);
+    columns.splice(endIndex, 0, movedColumn);
+    updateColumnHandler(movedColumn.id, movedColumn.title, endIndex + 1);
+    return columns;
+  };
+
+  const addTaskToAnotherColumn = async (
+    columnId: string,
+    taskTitle: string,
+    description: string,
+    userId: string
+  ) => {
+    return await postTask({
+      columnId,
+      boardId,
+      body: {
+        title: taskTitle,
+        description: description,
+        userId,
+      },
+    });
+  };
+
+  const deleteTaskFromCurrentCol = async (columnId: string, taskId: string) => {
+    return await deleteTask({
+      columnId,
+      boardId,
+      taskId,
+    });
+  };
+
+  const updateTaskHandler = async (
+    columnId: string,
+    taskTitle: string,
+    taskId: string,
+    order: number,
+    description: string,
+    userId: string
+  ) => {
+    return await updateTask({
+      columnId: columnId,
+      boardId,
+      taskId,
+      task: {
+        title: taskTitle,
+        order,
+        description: description,
+        userId,
+      },
+    });
+  };
+
+  const reorderTasks = async (
+    tasksList: TasksList[],
+    endIndex: number,
+    columnId: string,
+    taskId: string
+  ) => {
+    const [movedTask] = tasksList.filter((task) => task.id === taskId);
+    await updateTaskHandler(
+      columnId,
+      movedTask.title,
+      taskId,
+      endIndex + 1,
+      movedTask.description,
+      movedTask.userId
+    );
+  };
+
+  const onDragEndHandler = (result: DropResult) => {
+    const { source, destination, draggableId, type } = result;
+
+    if (!destination) return;
+
+    if (destination.droppableId === boardId && type === 'tasks') return;
+
+    //if dragging to another column
+    if (
+      source.droppableId !== destination.droppableId &&
+      type === 'tasks' &&
+      !moveRef.current.includes(draggableId)
+    ) {
+      moveRef.current.push(draggableId);
+      moveRef.current.shift();
+
+      const task = dispatch(
+        api.endpoints.getTaskById.initiate({
+          columnId: source.droppableId,
+          boardId,
+          taskId: draggableId,
+        })
+      );
+
+      task
+        .then((res) =>
+          Promise.all([
+            addTaskToAnotherColumn(
+              destination.droppableId,
+              res.data.title,
+              res.data.description,
+              res.data.userId
+            ),
+            deleteTaskFromCurrentCol(source.droppableId, draggableId),
+          ])
+        )
+        .catch(() => {});
+      task.unsubscribe();
+      return;
+    }
+
+    //if dragging inside column
+    if (source.droppableId === destination.droppableId && type === 'tasks') {
+      const tasks = dispatch(
+        api.endpoints.getTasks.initiate({
+          columnId: source.droppableId,
+          boardId,
+        })
+      );
+
+      tasks
+        .then((res) => res.data)
+        .then((data) => reorderTasks(data, destination.index, source.droppableId, draggableId))
+        .catch(() => {});
+      tasks.unsubscribe();
+      return;
+    }
+
+    //dragColumns
+    if (type === 'columns') {
+      const columns: ColumnType[] = reorderColumns(columnsList, source.index, destination.index);
+      updateColumnsList(columns);
+    }
+  };
+
+  useEffect(() => {
+    if (data1) {
+      updateColumnsList([...data1].sort((a: ColumnType, b: ColumnType) => a.order - b.order));
+    }
+  }, [data1]);
+
+  return (
+    <>
+      <DragDropContext onDragEnd={onDragEndHandler}>
+        <div className="board">
+          <h2 className="board__title">
+            <span className="board__title-description">{localizationObj[lang].board} </span>
+            {currentBoardTitle}
+          </h2>
+          <div className="wrapper">
+            <div className="board__title__wrapper">
+              <Link to="/boards">
+                <BackButton
+                  classNameWrapper="btn-back__wrapper"
+                  className="btn-back-common btn-back"
+                  type="button"
+                  description={localizationObj[lang].back}
+                />
+              </Link>
+
+              <BackButton
+                classNameWrapper="btn-back__wrapper"
+                className="btn-back-common btn-new"
+                type="button"
+                description={localizationObj[lang].createColumn}
+                onClick={() => setActiveModal(true)}
+              />
+            </div>
+            {!isLoading ? (
+              <Droppable droppableId={boardId} direction="horizontal" type="columns">
+                {(provided) => (
+                  <div
+                    className="board__columns board__wrapper"
+                    ref={provided.innerRef}
+                    {...provided.droppableProps}
+                  >
+                    {columnsList.map(({ title, id, order }: ColumnType, index: number) => {
+                      return (
+                        <BoardColumn
+                          columnTitle={title}
+                          key={id}
+                          boardId={boardId}
+                          columnId={id}
+                          order={order}
+                          index={index}
+                        />
+                      );
+                    })}
+                    {provided.placeholder}
+                  </div>
+                )}
+              </Droppable>
+            ) : (
+              <Preloader />
+            )}
+          </div>
+        </div>
+      </DragDropContext>
+
+      <Modal activeModal={activeModal} setActiveModal={setActiveModal}>
+        <div className="modal__wrapper">
+          <div className="modal__img modal__img-add" />
+          <div className="modal__text">
+            <h2>{`${localizationObj[lang].addATitle}`}</h2>
+            <input
+              type="text"
+              value={columnTitle}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setColumnTitle(event?.target.value)
+              }
+            />
+            <ChangeTitleBtns
+              onClickSubmit={addNewColumn}
+              onClickCancel={() => setActiveModal(false)}
+            />
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export { Board };
diff --git a/src/pages/boards/Boards.scss b/src/pages/boards/Boards.scss
new file mode 100644
index 0000000..364d5c2
--- /dev/null
+++ b/src/pages/boards/Boards.scss
@@ -0,0 +1,124 @@
+@import '../../sass/Constants.scss';
+
+.boards {
+  padding: 0 0 $base * 5 0;
+  width: 80%;
+  margin: 0 auto;
+
+  @media (max-width: $breakpoint-lg-min) {
+    width: 97%;
+  }
+
+  .h2 {
+    @include disableSelection;
+    margin-top: $base * 2;
+    font-size: $fs-xxxxl;
+    text-shadow: 0.063rem 0.063rem 0.063rem $color-purple, 0 0 0.06em $color-purple,
+      0 0 0.06em $color-purple;
+
+    @media (max-width: $breakpoint-lg-min) {
+      font-size: $fs-xxxl;
+    }
+
+    @media (max-width: $breakpoint-md-min) {
+      font-size: $fs-xxl;
+    }
+  }
+}
+
+.boards__container {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  column-gap: $base * 2;
+  row-gap: $base * 4;
+  padding: $base * 5 0;
+}
+
+.board__new-btn {
+  flex-basis: 30%;
+  height: $base * 10;
+}
+
+.boards__item-title {
+  font-size: $fs-xl;
+  font-weight: $fw-bold;
+  color: $color-dark;
+  transition: $transition-02;
+  cursor: pointer;
+}
+
+.boards__item-descr {
+  font-size: $fs-m;
+  font-weight: $fw-semi-bold;
+  color: $color-purple;
+  cursor: pointer;
+  transition: $transition-01;
+
+  &:hover {
+    color: $color-blue-09;
+    transition: $transition-01;
+  }
+}
+
+.boards__item-input__wrapper {
+  display: flex;
+  flex-direction: column;
+  row-gap: $base;
+  margin-bottom: $base;
+
+  .textarea {
+    @include poppins;
+    width: 100%;
+    padding: 0 $base * 2;
+    font-size: $fs-l;
+    color: $color-dark;
+    background-color: $color-white;
+    border: 0.063rem solid $color-dark;
+  }
+}
+
+.boards__item-input {
+  @include poppins;
+  width: 100%;
+  padding: 0 $base * 2;
+  font-size: $fs-l;
+  color: $color-dark;
+  background-color: $color-white;
+  border: 0.063rem solid $color-dark;
+  border-radius: $base;
+
+  @media (max-width: $breakpoint-md-min) {
+    font-size: $fs-m;
+  }
+}
+
+.boards-item__link {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  flex-basis: 32.4%;
+  height: 100%;
+  min-height: $base * 35;
+  padding: $base * 2;
+  word-break: break-word;
+  border: 0.063rem solid $color-dark-03;
+  box-shadow: 0.063rem 0.063rem 0.063rem $color-dark-05, 0 0 0.06em $color-dark,
+    0 0 0.06em $color-dark;
+  border-radius: $base * 3;
+
+  &:hover {
+    .boards__item-title {
+      color: $color-yellow;
+      transition: $transition-02;
+    }
+  }
+
+  @media (max-width: $breakpoint-md-min) {
+    flex-basis: 48%;
+  }
+
+  @media (max-width: $breakpoint-xs-min) {
+    flex-basis: 100%;
+  }
+}
diff --git a/src/pages/boards/Boards.tsx b/src/pages/boards/Boards.tsx
new file mode 100644
index 0000000..9b3577e
--- /dev/null
+++ b/src/pages/boards/Boards.tsx
@@ -0,0 +1,92 @@
+import React, { FC, useState, MouseEvent, lazy } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  useDeleteBoardMutation,
+  useGetBoardsQuery,
+  useGetUsersQuery,
+  usePostBoardMutation,
+} from '../../app/RtkQuery';
+
+import { Modal, PreloaderSuspense } from '../../components';
+import { Preloader } from '../../components/preloader/Preloader';
+
+import { BoardsTypes } from './typesBoards/TypesBoards';
+
+import './Boards.scss';
+import { useAppSelector } from '../../app/hooks';
+import { localizationObj } from '../../features/localization';
+import { ChangeTitleBtns } from '../../components/buttons';
+
+const BoardsItem = lazy(() => import('./BoardsItem'));
+
+const Boards: FC = () => {
+  const [activeModal, setActiveModal] = useState<boolean>(false);
+  const [deletedBoardTitle, setDeletedBoardTitle] = useState<string>('');
+  const [deletedBoardId, setDeletedBoardId] = useState<string>('');
+  const { lang } = useAppSelector((state) => state.langStorage);
+
+  const { data = [], error, isLoading } = useGetBoardsQuery('');
+  const { data: users = [] } = useGetUsersQuery('');
+  const [postBoard] = usePostBoardMutation();
+  const [deleteBoard] = useDeleteBoardMutation();
+
+  const handlerModal = (isActiveModal: boolean) => {
+    setActiveModal(isActiveModal);
+  };
+
+  const getDeletedBoard = (deletedBoardTitle: string, deletedBoardId: string) => {
+    setDeletedBoardTitle(deletedBoardTitle);
+    setDeletedBoardId(deletedBoardId);
+  };
+
+  const cancelDeleteBoard = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    setActiveModal(false);
+  };
+
+  const deleteBoardItem = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    setActiveModal(false);
+    deleteBoard(deletedBoardId);
+  };
+
+  return (
+    <section className="boards">
+      <h2 className="h2">{localizationObj[lang].yourBoards}</h2>
+      <div className="boards__container">
+        {!isLoading ? (
+          <PreloaderSuspense>
+            {data?.map(({ id, title, description }: BoardsTypes) => {
+              return (
+                <BoardsItem
+                  key={id}
+                  title={title}
+                  id={id}
+                  isActiveModal={handlerModal}
+                  getDeletedBoard={getDeletedBoard}
+                  description={description}
+                  activeModalProps={activeModal}
+                />
+              );
+            })}
+          </PreloaderSuspense>
+        ) : (
+          <Preloader />
+        )}
+      </div>
+
+      <Modal activeModal={activeModal} setActiveModal={setActiveModal}>
+        <div className="modal__wrapper">
+          <div className="modal__img modal__img-delete" />
+          <div className="modal__text">
+            <h2>{localizationObj[lang].areYouSure}</h2>
+            <h3>{`${localizationObj[lang].doYouWantToDelete} '${deletedBoardTitle}' ?`}</h3>
+            <ChangeTitleBtns onClickSubmit={deleteBoardItem} onClickCancel={cancelDeleteBoard} />
+          </div>
+        </div>
+      </Modal>
+    </section>
+  );
+};
+
+export { Boards };
diff --git a/src/pages/boards/BoardsItem.tsx b/src/pages/boards/BoardsItem.tsx
new file mode 100644
index 0000000..722ba01
--- /dev/null
+++ b/src/pages/boards/BoardsItem.tsx
@@ -0,0 +1,154 @@
+import React, { ChangeEvent, MouseEvent, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useDeleteBoardMutation, useUpdateBoardMutation } from '../../app/RtkQuery';
+import { BoardsTypes } from './typesBoards/TypesBoards';
+import { DeleteButton, ChangeTitleBtns } from '../../components/buttons';
+import { Textarea } from '../../components';
+import { localizationObj } from '../../features/localization';
+import { useAppSelector } from '../../app/hooks';
+
+const BoardsItem = ({
+  title,
+  id,
+  description,
+  isActiveModal,
+  getDeletedBoard,
+  activeModalProps,
+}: BoardsTypes) => {
+  const [activeModal, setActiveModal] = useState<boolean>(false);
+  const [currentTitle, setCurrentTitle] = useState(title);
+  const [currentDescription, setCurrentDescription] = useState(description);
+  const [isOpenBoardTitle, setIsOpenBoardTitle] = useState(false);
+  const [isOpenBoardDescr, setIsOpenBoardDescr] = useState(false);
+  const { lang } = useAppSelector((state) => state.langStorage);
+
+  const [updateBoard] = useUpdateBoardMutation();
+
+  const handlerActiveModal = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    setActiveModal(true);
+    isActiveModal(true);
+    getDeletedBoard(title, id);
+  };
+
+  const handleBoardTitle = (event: ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const VALUE = event.target.value;
+    setCurrentTitle(VALUE);
+  };
+
+  const handleBoardDescription = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const VALUE = event.target.value;
+    setCurrentDescription(VALUE);
+  };
+
+  const submitBoardTitle = async (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    if (currentTitle.trim().length) {
+      setIsOpenBoardTitle(false);
+      setIsOpenBoardDescr(false);
+      setCurrentDescription(description);
+
+      await updateBoard({
+        boardId: id,
+        body: { title: currentTitle, description },
+      });
+    }
+  };
+
+  const submitBoardDescr = async (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    if (currentDescription.trim().length) {
+      setIsOpenBoardTitle(false);
+      setIsOpenBoardDescr(false);
+      setCurrentTitle(title);
+
+      await updateBoard({
+        boardId: id,
+        body: { title, description: currentDescription },
+      });
+    }
+  };
+
+  const cancelBoardDescr = async (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    setCurrentDescription(description);
+    setIsOpenBoardDescr(false);
+  };
+
+  const cancelBoardTitle = async (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    setCurrentTitle(title);
+    setIsOpenBoardTitle(false);
+  };
+
+  return (
+    <div
+      className="boards-item__link"
+      onClick={activeModalProps ? (e: MouseEvent<HTMLDivElement>) => e.preventDefault() : undefined}
+    >
+      <div>
+        {!isOpenBoardTitle ? (
+          <h2
+            className="boards__item-title"
+            onClick={(event: MouseEvent<HTMLHeadingElement>) => {
+              event.preventDefault();
+              setIsOpenBoardTitle(true);
+            }}
+          >
+            {title}
+          </h2>
+        ) : (
+          <div className="boards__item-input__wrapper">
+            <input
+              className="boards__item-input"
+              type="text"
+              placeholder={localizationObj[lang].signUp}
+              onChange={handleBoardTitle}
+              value={currentTitle}
+              onClick={(event: MouseEvent<HTMLInputElement>) => event.preventDefault()}
+            />
+            <ChangeTitleBtns onClickSubmit={submitBoardTitle} onClickCancel={cancelBoardTitle} />
+          </div>
+        )}
+
+        {!isOpenBoardDescr ? (
+          <p
+            className="boards__item-descr"
+            onClick={(event: MouseEvent<HTMLParagraphElement>) => {
+              event.preventDefault();
+              setIsOpenBoardDescr(true);
+            }}
+          >
+            {description}
+          </p>
+        ) : (
+          <div className="boards__item-input__wrapper">
+            <Textarea
+              className="textarea"
+              cols={3}
+              rows={3}
+              placeholder={localizationObj[lang].yourTask}
+              value={currentDescription}
+              onChange={handleBoardDescription}
+              onClick={(event: MouseEvent<HTMLTextAreaElement>) => event.preventDefault()}
+            />
+            <ChangeTitleBtns onClickSubmit={submitBoardDescr} onClickCancel={cancelBoardDescr} />
+          </div>
+        )}
+      </div>
+      <div className="task__btns">
+        <Link to={`/boards/${id}`}>
+          <button className="button__tertiary" type="button">
+            {localizationObj[lang].openBoard}
+          </button>
+        </Link>
+        <DeleteButton type="button" onClick={handlerActiveModal} />
+      </div>
+    </div>
+  );
+};
+
+export default BoardsItem;
diff --git a/src/pages/boards/typesBoards/TypesBoards.tsx b/src/pages/boards/typesBoards/TypesBoards.tsx
new file mode 100644
index 0000000..77f58d1
--- /dev/null
+++ b/src/pages/boards/typesBoards/TypesBoards.tsx
@@ -0,0 +1,9 @@
+export interface BoardsTypes {
+  title: string;
+  id: string;
+  order?: number;
+  description: string;
+  isActiveModal: (shouldShowModal: boolean) => void;
+  getDeletedBoard: (boardTitle: string, boardId: string) => void;
+  activeModalProps: boolean;
+}
diff --git a/src/pages/index.ts b/src/pages/index.ts
new file mode 100644
index 0000000..e411f2f
--- /dev/null
+++ b/src/pages/index.ts
@@ -0,0 +1,9 @@
+import { Board } from './board/Board';
+import { Boards } from './boards/Boards';
+import { NotFound } from './notfound/NotFound';
+import SignIn from './signIn/SignIn';
+import SignUp from './signUp/SignUp';
+import { UserProfile } from './userProfile/UserProfile';
+import { WelcomePage } from './welcomePage/WelcomePage';
+
+export { Board, Boards, NotFound, SignIn, SignUp, WelcomePage, UserProfile };
diff --git a/src/pages/notfound/NotFound.scss b/src/pages/notfound/NotFound.scss
new file mode 100644
index 0000000..5c6eda0
--- /dev/null
+++ b/src/pages/notfound/NotFound.scss
@@ -0,0 +1 @@
+@import '../../sass/Constants.scss';
diff --git a/src/pages/notfound/NotFound.tsx b/src/pages/notfound/NotFound.tsx
new file mode 100644
index 0000000..335377f
--- /dev/null
+++ b/src/pages/notfound/NotFound.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+import './NotFound.scss';
+
+const NotFound: FC = () => {
+  return (
+    <>
+      <section className="NotFound">Page Not Found 404 Error</section>
+    </>
+  );
+};
+
+export { NotFound };
diff --git a/src/pages/signIn/SignIn.tsx b/src/pages/signIn/SignIn.tsx
new file mode 100644
index 0000000..3b26e21
--- /dev/null
+++ b/src/pages/signIn/SignIn.tsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { loginUser } from '../../reducers/auth';
+import { useNavigate } from 'react-router-dom';
+import { PATHS } from '../../shared/constants/routes';
+import { useSigninMutation } from '../../app/RtkQuery';
+import { SigninType } from '../../app/apiTypes';
+import { saveTokenToLS } from '../../features/ls-load-save';
+import { Modal } from '../../components';
+import { ErrorSign } from '../../components/modal/components';
+import { localizationObj } from '../../features/localization';
+
+import '../signUp/SignUp.scss';
+
+const SignIn = (): JSX.Element => {
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+  const [signinUser] = useSigninMutation();
+  const { lang } = useAppSelector((state) => state.langStorage);
+  const [activeModal, setActiveModal] = useState<boolean>(false);
+  const [errorMsg, setErrorMsg] = useState<string>('');
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<SigninType>({
+    mode: 'onSubmit',
+    reValidateMode: 'onChange',
+    defaultValues: { login: '', password: '' },
+  });
+
+  const onSubmit = async (user: SigninType) => {
+    signinUser(user)
+      .unwrap()
+      .then(({ token }) => {
+        dispatch(loginUser(token));
+        saveTokenToLS(token);
+      })
+      .then(() => {
+        reset();
+        navigate(PATHS.boards, { replace: true });
+      })
+      .catch((error) => {
+        setActiveModal(true);
+        setErrorMsg(error.data.message);
+      });
+  };
+
+  return (
+    <>
+      <form className="signup" onSubmit={handleSubmit(onSubmit)}>
+        <div className="form__title">{localizationObj[lang].signIn}</div>
+
+        <label className="form__nickname" title={localizationObj[lang].onlyNumbersLetters}>
+          <span className="form__label-tittle">{localizationObj[lang].login}:</span>
+          <input
+            className="signup__name"
+            {...register('login', {
+              required: localizationObj[lang].emptyField,
+              pattern: {
+                value: /^[A-Za-z0-9]+$/i,
+                message: `${localizationObj[lang].onlyNumbersLetters}`,
+              },
+              validate: {
+                nameLength: (v) =>
+                  v.length > 3 ||
+                  `${localizationObj[lang].login}${localizationObj[lang].lessThanFour}`,
+              },
+            })}
+            placeholder={localizationObj[lang].enterYourLogin}
+          />
+          {errors.login && <div className="form__error">{errors.login.message}</div>}
+        </label>
+
+        <label className="form__password">
+          <span className="form__label-tittle">{localizationObj[lang].password}:</span>
+          <input
+            className="signup__password"
+            type="password"
+            {...register('password', {
+              required: localizationObj[lang].emptyField,
+              validate: {
+                passLength: (v) =>
+                  v.length > 3 ||
+                  `${localizationObj[lang].password}${localizationObj[lang].lessThanFour}`,
+              },
+            })}
+            placeholder={localizationObj[lang].enterYourPassword}
+          />
+          {errors.password && <div className="form__error">{errors.password.message}</div>}
+        </label>
+
+        <input type="submit" value={localizationObj[lang].signIn} className="form__submit" />
+      </form>
+
+      <Modal activeModal={activeModal} setActiveModal={setActiveModal}>
+        <div className="error-content">
+          <ErrorSign errorMsg={errorMsg} />
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default SignIn;
diff --git a/src/pages/signUp/SignUp.scss b/src/pages/signUp/SignUp.scss
new file mode 100644
index 0000000..6805c5b
--- /dev/null
+++ b/src/pages/signUp/SignUp.scss
@@ -0,0 +1,96 @@
+@import '../../sass/Constants.scss';
+
+.signup {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: 45%;
+  margin: $base * 2 auto;
+  padding: $base * 2;
+  font-size: $fs-xxxl;
+  border-radius: $base * 3;
+  box-shadow: 0.063rem 0.063rem 0.063rem $color-sale, 0 0 0.06em $color-dark, 0 0 0.06em $color-dark;
+
+  @media (max-width: $breakpoint-lg-min) {
+    width: 50%;
+  }
+
+  @media (max-width: $breakpoint-md-min) {
+    width: 65%;
+  }
+
+  @media (max-width: $breakpoint-xs-min) {
+    width: 95%;
+  }
+}
+
+.form__error {
+  font-size: $fs-l;
+  color: $color-error;
+}
+
+.form__title {
+  @include disableSelection;
+  font-size: $fs-xxxxl;
+  font-weight: $fw-bold;
+  line-height: $base * 10;
+  text-align: center;
+  text-transform: uppercase;
+  text-shadow: 0.063rem 0.063rem 0.063rem $color-sale, 0 0 0.06em $color-blue-light,
+    0 0 0.06em $color-blue-light;
+  color: $color-purple;
+}
+
+.form__nickname,
+.form__password {
+  display: grid;
+  grid-template-rows: 1fr 1fr 0.55fr;
+}
+
+.signup__password,
+.signup__name {
+  @include poppins;
+  width: 100%;
+  padding: 0 $base * 2;
+  font-size: $fs-xxxl;
+  background-color: $color-white;
+  border: 0.063rem solid $color-dark;
+
+  @media (max-width: $breakpoint-md-min) {
+    font-size: $fs-xxl;
+  }
+}
+
+.form__label-tittle {
+  font-size: $fs-xxxl;
+  font-weight: $fw-semi-bold;
+  color: $color-dark;
+  text-shadow: 0.063rem 0.063rem 0.063rem $color-dark-02, 0 0 0.06em $color-dark-02,
+    0 0 0.06em $color-dark-02;
+
+  @media (max-width: $breakpoint-md-min) {
+    font-size: $fs-xxl;
+  }
+}
+
+.form__submit {
+  @include poppins;
+  background-color: $color-white;
+  border: 0.125rem solid $color-dark;
+  border-radius: $base;
+  font-size: $fs-xxl;
+  width: 50%;
+  margin: 0 auto;
+  transition: $transition-01;
+
+  &:hover {
+    border-radius: $base * 3;
+    box-shadow: inset 0px 0px $base * 4 rgb(201, 255, 209);
+    cursor: pointer;
+  }
+
+  &:active {
+    transform: translate(0.063rem, 0.063rem);
+    transition: $transition-01;
+  }
+}
diff --git a/src/pages/signUp/SignUp.tsx b/src/pages/signUp/SignUp.tsx
new file mode 100644
index 0000000..754848b
--- /dev/null
+++ b/src/pages/signUp/SignUp.tsx
@@ -0,0 +1,166 @@
+import React, { useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { loginUser } from '../../reducers/auth';
+import './SignUp.scss';
+import { useNavigate } from 'react-router-dom';
+import { PATHS } from '../../shared/constants/routes';
+import { useSigninMutation, useSignupMutation } from '../../app/RtkQuery';
+import { SignupType } from '../../app/apiTypes';
+import { saveTokenToLS } from '../../features/ls-load-save';
+import { Modal } from '../../components';
+import { ErrorSign } from '../../components/modal/components';
+import { localizationObj } from '../../features/localization';
+
+export type SignUpValues = {
+  name: string;
+  login: string;
+  password: string;
+  repeatPassword: string;
+};
+
+const SignUp = (): JSX.Element => {
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+  const [signupUser] = useSignupMutation();
+  const [signinUser] = useSigninMutation();
+  const { lang } = useAppSelector((state) => state.langStorage);
+  const [activeModal, setActiveModal] = useState<boolean>(false);
+  const [errorMsg, setErrorMsg] = useState<string>('');
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { errors },
+  } = useForm<SignUpValues>({
+    mode: 'onSubmit',
+    reValidateMode: 'onChange',
+    defaultValues: { name: '', login: '', password: '', repeatPassword: '' },
+  });
+
+  const password = useRef({});
+  password.current = watch('password', '');
+
+  const onSubmit = async ({ name, login, password }: SignUpValues) => {
+    const user: SignupType = {
+      name,
+      login,
+      password,
+    };
+    signupUser(user)
+      .unwrap()
+      .then(() => {
+        return signinUser({ login, password }).unwrap();
+      })
+      .then(({ token }) => {
+        dispatch(loginUser(token));
+        saveTokenToLS(token);
+      })
+      .then(() => {
+        reset();
+        navigate(PATHS.boards, { replace: true });
+      })
+      .catch((error) => {
+        setActiveModal(true);
+        setErrorMsg(error.data.message);
+      });
+  };
+
+  return (
+    <>
+      <form className="signup" onSubmit={handleSubmit(onSubmit)}>
+        <div className="form__title">{localizationObj[lang].signUp}</div>
+        <label className="form__nickname" title={localizationObj[lang].onlyNumbersLetters}>
+          <span className="form__label-tittle">{localizationObj[lang].name}:</span>
+          <input
+            className="signup__name"
+            {...register('name', {
+              required: localizationObj[lang].emptyField,
+              pattern: {
+                value: /^[A-Za-z0-9]+$/i,
+                message: localizationObj[lang].onlyNumbersLetters,
+              },
+              validate: {
+                nameLength: (v) =>
+                  v.length > 3 ||
+                  `${localizationObj[lang].name}${localizationObj[lang].lessThanFour}`,
+              },
+            })}
+            placeholder={localizationObj[lang].enterYourName}
+          />
+          {errors.name && <div className="form__error">{errors.name.message}</div>}
+        </label>
+
+        <label className="form__nickname" title={localizationObj[lang].onlyNumbersLetters}>
+          <span className="form__label-tittle">{localizationObj[lang].login}:</span>
+          <input
+            className="signup__name"
+            {...register('login', {
+              required: localizationObj[lang].emptyField,
+              pattern: {
+                value: /^[A-Za-z0-9]+$/i,
+                message: localizationObj[lang].onlyNumbersLetters,
+              },
+              validate: {
+                nameLength: (v) =>
+                  v.length > 3 ||
+                  `${localizationObj[lang].login}${localizationObj[lang].lessThanFour}`,
+              },
+            })}
+            placeholder={localizationObj[lang].enterYourLogin}
+          />
+          {errors.login && <div className="form__error">{errors.login.message}</div>}
+        </label>
+
+        <label className="form__password">
+          <span className="form__label-tittle">{localizationObj[lang].password}:</span>
+          <input
+            className="signup__password"
+            type="password"
+            {...register('password', {
+              required: localizationObj[lang].emptyField,
+              validate: {
+                passLength: (v) =>
+                  v.length > 3 ||
+                  `${localizationObj[lang].password}${localizationObj[lang].lessThanFour}`,
+              },
+            })}
+            placeholder={localizationObj[lang].enterYourPassword}
+          />
+          {errors.password && <div className="form__error">{errors.password.message}</div>}
+        </label>
+
+        <label className="form__password">
+          <span className="form__label-tittle">{localizationObj[lang].repeatPassword}:</span>
+          <input
+            className="signup__password"
+            type="password"
+            {...register('repeatPassword', {
+              required: localizationObj[lang].emptyField,
+              validate: {
+                passLength: (v) =>
+                  v.length > 3 ||
+                  `${localizationObj[lang].password}${localizationObj[lang].lessThanFour}`,
+                passRepeat: (v) => v === password.current || localizationObj[lang].passwordsMatch,
+              },
+            })}
+            placeholder={localizationObj[lang].repeatPassword}
+          />
+          {errors.repeatPassword && (
+            <div className="form__error">{errors.repeatPassword.message}</div>
+          )}
+        </label>
+        <input type="submit" value={localizationObj[lang].signUp} className="form__submit" />
+      </form>
+      <Modal activeModal={activeModal} setActiveModal={setActiveModal}>
+        <div>
+          <ErrorSign errorMsg={errorMsg} />
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default SignUp;
diff --git a/src/pages/userProfile/UserProfile.scss b/src/pages/userProfile/UserProfile.scss
new file mode 100644
index 0000000..6879238
--- /dev/null
+++ b/src/pages/userProfile/UserProfile.scss
@@ -0,0 +1,99 @@
+@import '../../sass/Constants.scss';
+
+.user-profile {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  row-gap: $base * 2;
+  width: 45%;
+  margin: $base * 2 auto;
+  padding: $base * 2;
+  font-size: $fs-xxxl;
+  border-radius: $base * 3;
+  box-shadow: 0.063rem 0.063rem 0.063rem $color-sale, 0 0 0.06em $color-dark, 0 0 0.06em $color-dark;
+
+  @media (max-width: $breakpoint-lg-min) {
+    width: 50%;
+  }
+
+  @media (max-width: $breakpoint-md-min) {
+    width: 65%;
+  }
+
+  @media (max-width: $breakpoint-xs-min) {
+    width: 95%;
+  }
+}
+
+.form__title {
+  @include disableSelection;
+  font-size: $fs-xxxxl;
+  font-weight: $fw-bold;
+  line-height: $base * 10;
+  text-align: center;
+  text-transform: uppercase;
+  text-shadow: 0.063rem 0.063rem 0.063rem $color-sale, 0 0 0.06em $color-blue-light,
+    0 0 0.06em $color-blue-light;
+  color: $color-purple;
+}
+
+.user-profile-name {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $base * 4;
+}
+
+.user-profile__field {
+  font-size: $fs-xxxl;
+  font-weight: $fw-semi-bold;
+  color: $color-dark;
+  text-shadow: 0.063rem 0.063rem 0.063rem $color-dark-02, 0 0 0.06em $color-dark-02,
+    0 0 0.06em $color-dark-02;
+
+  @media (max-width: $breakpoint-md-min) {
+    font-size: $fs-xxl;
+  }
+}
+
+.user-profile__value {
+  font-size: $fs-xxxl;
+  font-weight: $fw-semi-bold;
+  color: $color-dark;
+  text-shadow: 0.063rem 0.063rem 0.063rem $color-dark-02, 0 0 0.06em $color-dark-02,
+    0 0 0.06em $color-dark-02;
+  text-align: end;
+
+  @media (max-width: $breakpoint-md-min) {
+    font-size: $fs-xxl;
+  }
+}
+
+.user-profile__buttons {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  row-gap: $base * 2;
+}
+
+.user-profile__button {
+  @include poppins;
+  background-color: $color-white;
+  border: 0.125rem solid $color-dark;
+  border-radius: $base;
+  font-size: $fs-xxl;
+  width: 100%;
+  margin: 0 auto;
+  transition: $transition-01;
+
+  &:hover {
+    border-radius: $base * 3;
+    box-shadow: inset 0px 0px $base * 4 rgb(201, 255, 209);
+    cursor: pointer;
+  }
+
+  &:active {
+    transform: translate(0.063rem, 0.063rem);
+    transition: $transition-01;
+  }
+}
diff --git a/src/pages/userProfile/UserProfile.tsx b/src/pages/userProfile/UserProfile.tsx
new file mode 100644
index 0000000..b8cb608
--- /dev/null
+++ b/src/pages/userProfile/UserProfile.tsx
@@ -0,0 +1,308 @@
+import React, { FC, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import {
+  useDeleteUserMutation,
+  useSigninMutation,
+  useUpdateUserMutation,
+} from '../../app/RtkQuery';
+import { Modal } from '../../components';
+import { ErrorSign } from '../../components/modal/components';
+import { localizationObj } from '../../features/localization';
+import { saveTokenToLS } from '../../features/ls-load-save';
+import { loginUser, logoutUser } from '../../reducers/auth';
+import { setEmptyUser } from '../../reducers/userReducer';
+import { ChangeTitleBtns } from '../../components/buttons';
+import './UserProfile.scss';
+
+export type UserEditValues = {
+  name: string;
+  login: string;
+  oldpassword: string;
+  newpassword: string;
+};
+
+const UserProfile: FC = () => {
+  const { userId, userName, userLogin } = useAppSelector((state) => state.userStorage);
+  const [updateUser] = useUpdateUserMutation();
+  const [signinUser] = useSigninMutation();
+  const [deleteUser] = useDeleteUserMutation();
+  const dispatch = useAppDispatch();
+  const [activeModal, setActiveModal] = useState<boolean>(false);
+  const [errorMsg, setErrorMsg] = useState<string>('');
+  const [deleteMsg, setDeleteMsg] = useState<boolean>(false);
+  const [successMsg, setSuccessMsg] = useState<string>('');
+  const [isEditing, setIsEditing] = useState<boolean>(false);
+  const [isPassChanging, setIsPassChanging] = useState<boolean>(false);
+  const { lang } = useAppSelector((state) => state.langStorage);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<UserEditValues>({
+    mode: 'onChange',
+    reValidateMode: 'onChange',
+    defaultValues: { name: userName, login: userLogin, oldpassword: '', newpassword: '' },
+  });
+
+  useEffect(() => {
+    if (!activeModal) {
+      setErrorMsg('');
+      setSuccessMsg('');
+      setDeleteMsg(false);
+    }
+  }, [activeModal]);
+
+  const onSubmit = async ({ name, login, oldpassword, newpassword }: UserEditValues) => {
+    const body = {
+      name: isPassChanging ? userName : name,
+      login: isPassChanging ? userLogin : login,
+      password: isPassChanging ? newpassword : oldpassword,
+    };
+    signinUser({ login: userLogin, password: oldpassword })
+      .unwrap()
+      .then(() => {
+        return updateUser({ userId, body }).unwrap();
+      })
+      .then(() => {
+        return signinUser({
+          login: isPassChanging ? userLogin : login,
+          password: isPassChanging ? newpassword : oldpassword,
+        }).unwrap();
+      })
+      .then(({ token }) => {
+        dispatch(loginUser(token));
+        saveTokenToLS(token);
+      })
+      .then(() => {
+        reset({
+          name: name,
+          login: login,
+          oldpassword: '',
+          newpassword: '',
+        });
+        setIsEditing(false);
+        setActiveModal(true);
+        setSuccessMsg(
+          isPassChanging
+            ? `${localizationObj[lang].password} ${localizationObj[lang].updateSuccessful}`
+            : `${localizationObj[lang].user} ${localizationObj[lang].updateSuccessful}`
+        );
+      })
+      .catch((error) => {
+        setActiveModal(true);
+        if (error.data.statusCode === 403) {
+          setErrorMsg(localizationObj[lang].wrongPassword);
+        } else {
+          setErrorMsg(error.data.message);
+        }
+      });
+  };
+
+  const deleteHandler = async () => {
+    deleteUser(userId)
+      .unwrap()
+      .then((data) => {
+        if (!data) {
+          dispatch(logoutUser());
+          dispatch(setEmptyUser());
+          saveTokenToLS('');
+        }
+      })
+      .catch((error) => {
+        setActiveModal(true);
+        setErrorMsg(error.data.message);
+      });
+  };
+
+  useEffect(() => {
+    if (!activeModal) {
+      setSuccessMsg('');
+      setErrorMsg('');
+    }
+  }, [activeModal]);
+
+  return (
+    <>
+      {!isEditing && (
+        <div className="user-profile">
+          <div className="form__title">{localizationObj[lang].profile}</div>
+          <div className="user-profile-name">
+            <div className="user-profile__field">{localizationObj[lang].name}:</div>
+            <div className="user-profile__value">{userName}</div>
+          </div>
+          <div className="user-profile-name">
+            <div className="user-profile__field">{localizationObj[lang].login}: </div>
+            <div className="user-profile__value">{userLogin}</div>
+          </div>
+          <div className="user-profile__buttons">
+            <button
+              className="user-profile__button"
+              onClick={() => {
+                setIsEditing(true);
+                setIsPassChanging(false);
+              }}
+            >
+              {localizationObj[lang].editUser}
+            </button>
+            <button
+              className="user-profile__button"
+              onClick={() => {
+                setIsEditing(true);
+                setIsPassChanging(true);
+              }}
+            >
+              {localizationObj[lang].changePassword}
+            </button>
+            <button
+              className="user-profile__button"
+              onClick={() => {
+                setActiveModal(true);
+                setDeleteMsg(true);
+              }}
+            >
+              {localizationObj[lang].deleteUser}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {isEditing && (
+        <form className="signup" onSubmit={handleSubmit(onSubmit)}>
+          {!isPassChanging && (
+            <>
+              <label className="form__nickname" title="Only numbers and english letters">
+                <span className="form__label-tittle">{localizationObj[lang].name}:</span>
+                <input
+                  className="signup__name"
+                  {...register('name', {
+                    required: localizationObj[lang].emptyField,
+                    pattern: {
+                      value: /^[A-Za-z0-9]+$/i,
+                      message: localizationObj[lang].onlyNumbersLetters,
+                    },
+                    validate: {
+                      nameLength: (v) =>
+                        v.length > 3 ||
+                        `${localizationObj[lang].name}${localizationObj[lang].lessThanFour}`,
+                    },
+                  })}
+                  placeholder={localizationObj[lang].enterYourName}
+                />
+                {errors.name && <div className="form__error">{errors.name.message}</div>}
+              </label>
+              <label className="form__nickname" title={localizationObj[lang].onlyNumbersLetters}>
+                <span className="form__label-tittle">{localizationObj[lang].login}:</span>
+                <input
+                  className="signup__name"
+                  {...register('login', {
+                    required: localizationObj[lang].emptyField,
+                    pattern: {
+                      value: /^[A-Za-z0-9]+$/i,
+                      message: localizationObj[lang].onlyNumbersLetters,
+                    },
+                    validate: {
+                      nameLength: (v) =>
+                        v.length > 3 ||
+                        `${localizationObj[lang].login}${localizationObj[lang].lessThanFour}`,
+                    },
+                  })}
+                  placeholder={localizationObj[lang].enterYourLogin}
+                />
+                {errors.login && <div className="form__error">{errors.login.message}</div>}
+              </label>
+            </>
+          )}
+          <label className="form__password">
+            <span className="form__label-tittle">{localizationObj[lang].oldPassword}:</span>
+            <input
+              className="signup__password"
+              type="password"
+              {...register('oldpassword', {
+                required: localizationObj[lang].emptyField,
+                validate: {
+                  passLength: (v) =>
+                    v.length > 3 ||
+                    `${localizationObj[lang].password}${localizationObj[lang].lessThanFour}`,
+                },
+              })}
+              placeholder={localizationObj[lang].enterYourPassword}
+            />
+            {errors.oldpassword && <div className="form__error">{errors.oldpassword.message}</div>}
+          </label>
+
+          {isPassChanging && (
+            <label className="form__password">
+              <span className="form__label-tittle">{localizationObj[lang].newPassword}:</span>
+              <input
+                className="signup__password"
+                type="password"
+                {...register('newpassword', {
+                  required: localizationObj[lang].emptyField,
+                  validate: {
+                    passLength: (v) =>
+                      v.length > 3 ||
+                      `${localizationObj[lang].password}${localizationObj[lang].lessThanFour}`,
+                  },
+                })}
+                placeholder={localizationObj[lang].enterYourPassword}
+              />
+              {errors.newpassword && (
+                <div className="form__error">{errors.newpassword.message}</div>
+              )}
+            </label>
+          )}
+          <div className="board__column-btns space">
+            <button className="button-modal__wrapper button-modal-width" type="submit">
+              <div className="button-modal button__submit" />
+              <div className="button-modal__description">{localizationObj[lang].update}</div>
+            </button>
+            <button
+              className="button-modal__wrapper button-modal-width"
+              type="button"
+              onClick={() => {
+                setIsEditing(false);
+                reset();
+              }}
+            >
+              <div className="button-modal button__cancel" />
+              <div className="button-modal__description">{localizationObj[lang].cancel}</div>
+            </button>
+          </div>
+        </form>
+      )}
+
+      <Modal activeModal={activeModal} setActiveModal={setActiveModal}>
+        <>
+          {!!errorMsg && <ErrorSign errorMsg={errorMsg} />}
+          {!!successMsg && (
+            <div className="error-modal">
+              <h3 className="error-modal__title green">{localizationObj[lang].success}</h3>
+              <div>{successMsg}</div>
+            </div>
+          )}
+          {!!deleteMsg && (
+            <div className="modal__wrapper">
+              <div className="modal__img modal__img-delete" />
+              <div className="modal__text">
+                <h2>{`${localizationObj[lang].doYouWantToDelete} '${userName}' ?`}</h2>
+                <div>{localizationObj[lang].afterDeleteRedirect}</div>
+                <ChangeTitleBtns
+                  onClickSubmit={deleteHandler}
+                  onClickCancel={() => {
+                    setActiveModal(false);
+                    setDeleteMsg(false);
+                  }}
+                />
+              </div>
+            </div>
+          )}
+        </>
+      </Modal>
+    </>
+  );
+};
+
+export { UserProfile };
diff --git a/src/pages/welcomePage/WelcomePage.scss b/src/pages/welcomePage/WelcomePage.scss
new file mode 100644
index 0000000..1e9f0ab
--- /dev/null
+++ b/src/pages/welcomePage/WelcomePage.scss
@@ -0,0 +1,119 @@
+@import '../../sass/Constants.scss';
+
+.main {
+  background-color: $color-grey-white;
+}
+
+.welcome-page {
+  .h2 {
+    @include disableSelection;
+    margin-top: $base * 10;
+    margin-bottom: $base * 10;
+    font-size: $fs-xxxxl;
+    text-shadow: 0.063rem 0.063rem 0.063rem $color-purple, 0 0 0.06em $color-purple,
+      0 0 0.06em $color-purple;
+
+    @media (max-width: $breakpoint-lg-min) {
+      margin-top: 0;
+      font-size: $fs-xxxl;
+    }
+
+    @media (max-width: $breakpoint-md-min) {
+      font-size: $fs-xxl;
+    }
+  }
+
+  .welcome-page__title {
+    font-size: $base * 11;
+    line-height: $base * 15;
+    margin-bottom: $base * 3;
+  }
+
+  .welcome-page__subtitle {
+    margin-bottom: $base * 3;
+  }
+  
+  .welcome-page__content {
+    padding: $base * 25 0;
+    width: 50%;
+    margin-right: auto;
+    color: white;
+
+    @media (max-width: $breakpoint-md-min) {
+      padding-bottom: $base * 10;
+    }
+
+    @media (max-width: $breakpoint-sm-min) {
+      width: 90%;
+      margin: auto;
+      text-align: center;
+    }
+  }
+
+  .welcome-page__promo {
+    background: #0a1e3f;
+    background-image: url('../../images/YFNLt5hMncNXRFTyJMBGis_ri01GarCduTNi4PLDKgcMxFbphXYXLyaWJDNkFmu.jpg');
+    background-repeat: no-repeat;
+    background-position: 100% center;
+    background-size: contain;
+    box-shadow: 0px -24px 74px 115px rgb(10 30 63);
+
+    @media (max-width: $breakpoint-lg-min) {
+      background-position: 10rem center;
+    }
+
+    @media (max-width: $breakpoint-sm-min) {
+      background: #0a1e3f;
+    }
+  }
+
+  .team {
+    @include flexCenter;
+    flex-direction: column;
+    gap: $base * 3;
+    width: 80%;
+    margin: 0 auto $base * 3 auto;
+  
+    @media (max-width: $breakpoint-lg-min) {
+      width: 97%;
+    }
+  }
+  
+  .welcome__container {
+    @include flexSpaceBetween;
+    flex-wrap: wrap;
+    gap: $base * 4;
+    width: 100%;
+    margin-bottom: $base * 4;
+  
+    @media (max-width: $breakpoint-lg-min) {
+      justify-content: center;
+    }
+  }
+  
+  .about {
+    padding: $base * 15 0;
+    -webkit-box-shadow: 0px -67px 34px 37px rgba(10, 30, 63, 0.1);
+    -moz-box-shadow: 0px -67px 34px 37px rgba(10, 30, 63, 0.1);
+    box-shadow: 0px -67px 34px 37px rgba(10, 30, 63, 0.1);
+    background: rgba(10, 30, 63, 0.1);
+  }
+
+  .about__title {
+    margin: auto;
+    margin-bottom: $base * 7;
+    font-size: $fs-xxxxl;
+  }
+
+  .about__wrapper {
+    flex-direction: column;
+  }
+
+  .about__content {
+    text-align: center;
+
+    @media (max-width: $breakpoint-lg-min) {
+      padding: $base * 3;
+    }
+  }
+}
diff --git a/src/pages/welcomePage/WelcomePage.tsx b/src/pages/welcomePage/WelcomePage.tsx
new file mode 100644
index 0000000..4ceab9a
--- /dev/null
+++ b/src/pages/welcomePage/WelcomePage.tsx
@@ -0,0 +1,64 @@
+import { FC } from 'react';
+import { WelcomeCard } from './components/welcomeCard/WelcomeCard';
+import avatar1 from '../../images/avatar-1.jpg';
+import avatar2 from '../../images/avatar-2.jpg';
+import avatar3 from '../../images/avatar-3.jpg';
+import './WelcomePage.scss';
+import { useAppSelector } from '../../app/hooks';
+import { localizationObj } from '../../features/localization';
+
+const WelcomePage: FC = () => {
+  const { lang } = useAppSelector((state) => state.langStorage);
+
+  return (
+    <div data-testid="welcomepage" className="welcome-page">
+      <section className="welcome-page__promo">
+        <div className="wrapper">
+          <div className="welcome-page__content">
+            <h1 className="welcome-page__title">{localizationObj[lang].welcome}</h1>
+            <h2 className="welcome-page__subtitle">{localizationObj[lang].app}</h2>
+            <p>{localizationObj[lang].aboutProject}</p>
+          </div>
+        </div>
+      </section>
+
+      <section className="team">
+        <h2 className="h2">{localizationObj[lang].meetOurTeam}</h2>
+        <div className="welcome__container">
+          <WelcomeCard
+            src={avatar2}
+            name={localizationObj[lang].shatau}
+            specialization="Front-end Developer"
+            github="https://github.com/jack13only"
+            linkedin="https://www.linkedin.com/in/jack13only/"
+          />
+          <WelcomeCard
+            src={avatar3}
+            name={localizationObj[lang].kochieva}
+            specialization="Front-end Developer"
+            github="https://github.com/VictoriaKochieva"
+            linkedin="https://www.linkedin.com/in/victoria-kochieva/"
+          />
+          <WelcomeCard
+            src={avatar1}
+            name={localizationObj[lang].karakulka}
+            specialization="Front-end Developer"
+            github="https://github.com/mitrofanzxc"
+            linkedin="https://www.linkedin.com/in/dzmitry-karakulka/"
+          />
+        </div>
+      </section>
+
+      <section className="about">
+        <div className="wrapper about__wrapper">
+          <h2 className="about__title">{localizationObj[lang].courseAbout}</h2>
+          <div className="about__content">
+            <p>{localizationObj[lang].course}</p>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export { WelcomePage };
diff --git a/src/pages/welcomePage/components/welcomeCard/WelcomeCard.scss b/src/pages/welcomePage/components/welcomeCard/WelcomeCard.scss
new file mode 100644
index 0000000..ae5cd56
--- /dev/null
+++ b/src/pages/welcomePage/components/welcomeCard/WelcomeCard.scss
@@ -0,0 +1,113 @@
+@import '../../../../sass/Constants.scss';
+
+.welcome__card {
+  position: relative;
+  width: 30%;
+  text-align: center;
+
+  @media (max-width: $breakpoint-lg-min) {
+    width: 45%;
+  }
+
+  @media (max-width: $breakpoint-sm-min) {
+    width: 80%;
+  }
+}
+
+.card-img {
+  @include disableSelection;
+  position: relative;
+  width: 90%;
+  height: auto;
+  border-radius: 50%;
+  border: 0.063rem solid $color-dark-03;
+  box-shadow: rgba(136, 165, 191, 0.6) $base 0.125rem $base * 3 0px,
+    rgba(255, 255, 255, 0.8) -0.313rem -0.125rem $base * 3 0px;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.welcome-card__container {
+  margin: -40% auto 0 auto;
+  padding: 40% 0 0 0;
+  background-color: $color-white;
+  border-top-right-radius: $base * 4;
+  border-top-left-radius: $base * 4;
+  border-bottom-right-radius: $base * 2;
+  border-bottom-left-radius: $base * 2;
+  box-shadow: $color-dark-03 0px $base $base * 3;
+
+  .h3 {
+    font-size: $fs-xl;
+    font-weight: $fw-bold;
+    letter-spacing: 0.06em;
+    color: $color-dark;
+  }
+
+  .h4 {
+    font-size: $fs-l;
+    font-weight: $fw-semi-bold;
+  }
+}
+
+.card-info {
+  text-align: center;
+}
+
+.card__list {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $base * 3;
+  padding: $base 0;
+  background-color: $color-purple-09;
+  border-bottom-right-radius: $base * 2;
+  border-bottom-left-radius: $base * 2;
+}
+
+.card__list-item {
+  width: $base * 12;
+  height: $base * 12;
+  border-radius: 50%;
+  background-color: $color-white;
+  transition: $transition;
+
+  &:hover {
+    background-color: $color-grey-07;
+    transition: $transition;
+  }
+
+  @media (max-width: $breakpoint-xs-min) {
+    width: $base * 6;
+    height: $base * 6;
+  }
+}
+
+.card-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $base * 12;
+  height: $base * 12;
+  background-size: 60%;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 50%;
+
+  @media (max-width: $breakpoint-xs-min) {
+    width: $base * 6;
+    height: $base * 6;
+  }
+}
+
+.github {
+  background-image: url('../../../../images/icons/github.svg');
+}
+
+.linkedin {
+  background-image: url('../../../../images/icons/linkedin.svg');
+}
+
+.instagram {
+  background-image: url('../../../../images/icons/instagram.svg');
+}
diff --git a/src/pages/welcomePage/components/welcomeCard/WelcomeCard.tsx b/src/pages/welcomePage/components/welcomeCard/WelcomeCard.tsx
new file mode 100644
index 0000000..29a9e07
--- /dev/null
+++ b/src/pages/welcomePage/components/welcomeCard/WelcomeCard.tsx
@@ -0,0 +1,43 @@
+import { FC } from 'react';
+
+import './WelcomeCard.scss';
+
+interface WelcomeCardProps {
+  src: string;
+  name: string;
+  specialization: string;
+  github: string;
+  linkedin: string;
+}
+
+const WelcomeCard: FC<WelcomeCardProps> = ({ src, name, specialization, github, linkedin }) => {
+  return (
+    <div className="welcome__card">
+      <img className="card-img" src={src} alt="Avatar" />
+      <div className="welcome-card__container">
+        <h3 className="h3 card-info">{name}</h3>
+        <h4 className="h4 card-info">{specialization}</h4>
+        <ul className="card__list">
+          <li className="card__list-item">
+            <a
+              href={github}
+              target="_blank"
+              rel="noreferrer noopener"
+              className="card-link github"
+            />
+          </li>
+          <li className="card__list-item">
+            <a
+              href={linkedin}
+              target="_blank"
+              rel="noreferrer noopener"
+              className="card-link linkedin"
+            />
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export { WelcomeCard };
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/src/reducers/auth.ts b/src/reducers/auth.ts
new file mode 100644
index 0000000..ccb3a98
--- /dev/null
+++ b/src/reducers/auth.ts
@@ -0,0 +1,28 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { loadTokenFromLS } from '../features/ls-load-save';
+
+interface AuthState {
+  userToken: string;
+}
+
+const userTokenFromLS = loadTokenFromLS();
+
+const initialAuthState: AuthState = {
+  userToken: userTokenFromLS,
+};
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState: initialAuthState,
+  reducers: {
+    loginUser(state, action: { payload: string }) {
+      state.userToken = action.payload;
+    },
+    logoutUser(state) {
+      state.userToken = '';
+    },
+  },
+});
+
+export const { loginUser, logoutUser } = authSlice.actions;
+export default authSlice.reducer;
diff --git a/src/reducers/langReducer.ts b/src/reducers/langReducer.ts
new file mode 100644
index 0000000..3a6204f
--- /dev/null
+++ b/src/reducers/langReducer.ts
@@ -0,0 +1,27 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { loadLangFromLS } from '../features/ls-load-save';
+
+type LangState = {
+  lang: LangRuEn;
+};
+
+export type LangRuEn = 'RU' | 'EN';
+
+const langFromLS = loadLangFromLS();
+
+const initialUserState: LangState = {
+  lang: langFromLS,
+};
+
+const langSlice = createSlice({
+  name: 'langReducer',
+  initialState: initialUserState,
+  reducers: {
+    setLang(state, action: { payload: LangRuEn }) {
+      state.lang = action.payload;
+    },
+  },
+});
+
+export const { setLang } = langSlice.actions;
+export default langSlice.reducer;
diff --git a/src/reducers/userReducer.ts b/src/reducers/userReducer.ts
new file mode 100644
index 0000000..727cc64
--- /dev/null
+++ b/src/reducers/userReducer.ts
@@ -0,0 +1,29 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+interface UserState {
+  userName: string;
+  userId: string;
+  userLogin: string;
+}
+
+const initialUserState: UserState = {
+  userName: '',
+  userId: '',
+  userLogin: '',
+};
+
+const userSlice = createSlice({
+  name: 'userReducer',
+  initialState: initialUserState,
+  reducers: {
+    setUserData(state, action: { payload: UserState }) {
+      return action.payload;
+    },
+    setEmptyUser() {
+      return initialUserState;
+    },
+  },
+});
+
+export const { setUserData, setEmptyUser } = userSlice.actions;
+export default userSlice.reducer;
diff --git a/src/sass/Constants.scss b/src/sass/Constants.scss
new file mode 100644
index 0000000..e25d931
--- /dev/null
+++ b/src/sass/Constants.scss
@@ -0,0 +1,164 @@
+// === MIXIN ===
+
+@mixin scroll {
+  &::-webkit-scrollbar {
+    width: $base;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $color-dark-02;
+    border-radius: $base;
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 $base grey;
+    border-radius: $base * 2;
+    height: $base * 2;
+    background-color: $color-grey-white;
+  }
+}
+
+@mixin poppins {
+  font-family: 'Poppins', sans-serif;
+}
+
+@mixin disableSelection {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@mixin flexSpaceEvenly {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+@mixin flexSpaceAround {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+@mixin flexSpaceBetween {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin flexStart {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+@mixin flexCenter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flexEnd {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+// === / MIXIN ===
+
+// === FUNCTIONS ===
+
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+@function rem($num) {
+  @return (strip-unit($num) / 16) * 1rem;
+}
+
+// === / FUNCTIONS ===
+
+// === VARIABLES ===
+
+$base: rem(5px);
+
+$fw-regular: 400;
+$fw-medium: 500;
+$fw-semi-bold: 600;
+$fw-bold: 700;
+
+$fs-xxs: rem(11px);
+$fs-xs: rem(12px);
+$fs-s: rem(13px);
+$fs-m: rem(14px);
+$fs-l: rem(16px);
+$fs-xl: rem(22px);
+$fs-xxl: rem(26px);
+$fs-xxxl: rem(36px);
+$fs-xxxxl: rem(50px);
+
+$transition-01: 0.1s;
+$transition-02: 0.2s;
+$transition: 0.3s;
+
+$color-dark: rgba(18, 18, 18, 1);
+$color-dark-02: rgba(18, 18, 18, 0.2);
+$color-dark-03: rgba(18, 18, 18, 0.3);
+$color-dark-04: rgba(18, 18, 18, 0.4);
+$color-dark-05: rgba(18, 18, 18, 0.5);
+$color-dark-06: rgba(18, 18, 18, 0.6);
+$color-dark-07: rgba(18, 18, 18, 0.7);
+$color-dark-08: rgba(18, 18, 18, 0.8);
+$color-dark-09: rgba(18, 18, 18, 0.9);
+$color-grey: rgba(229, 229, 229, 1);
+$color-grey-white: rgba(248, 248, 248, 1);
+$color-grey-07: rgba(243, 243, 243, 0.7);
+$color-white: rgba(255, 255, 255, 1);
+$color-white-02: rgba(255, 255, 255, 0.2);
+$color-white-03: rgba(255, 255, 255, 0.3);
+$color-white-04: rgba(255, 255, 255, 0.4);
+$color-white-05: rgba(255, 255, 255, 0.5);
+$color-white-06: rgba(255, 255, 255, 0.6);
+$color-white-07: rgba(255, 255, 255, 0.7);
+$color-white-08: rgba(255, 255, 255, 0.8);
+$color-white-09: rgba(255, 255, 255, 0.9);
+$color-sale: rgba(233, 30, 99, 1);
+$color-yellow: rgba(240, 204, 132, 1);
+$color-error: rgba(214, 19, 19, 1);
+$color-ok: rgba(11, 177, 127, 1);
+$color-grey-dark: rgba(156, 156, 156, 1);
+$color-orange: rgba(211, 118, 12, 1);
+$color-green: rgba(0, 255, 119, 1);
+$color-blue: rgba(0, 3, 51, 1);
+$color-blue-05: rgba(0, 3, 51, 0.5);
+$color-blue-08: rgba(0, 3, 51, 0.8);
+$color-blue-09: rgba(0, 3, 51, 0.9);
+$color-blue-light: rgba(33, 150, 243, 1);
+$color-yellow: rgba(233, 192, 10, 1);
+$color-yellow-dark: rgba(235, 159, 19, 0.25);
+$color-purple: rgba(101, 81, 243, 1);
+$color-purple-06: rgba(101, 81, 243, 0.6);
+$color-purple-09: rgba(101, 81, 243, 0.9);
+
+$breakpoint-xxs-min: 320px;
+$breakpoint-xs-min: 480px;
+$breakpoint-sm-min: 576px;
+$breakpoint-md-min: 768px;
+$breakpoint-lg-min: 992px;
+$breakpoint-xl-min: 1200px;
+$breakpoint-xxl-min: 1440px;
+
+$breakpoint-xxxs-max: $breakpoint-xxs-min - 1px;
+$breakpoint-xxs-max: $breakpoint-xs-min - 1px;
+$breakpoint-xs-max: $breakpoint-sm-min - 1px;
+$breakpoint-sm-max: $breakpoint-md-min - 1px;
+$breakpoint-md-max: $breakpoint-lg-min - 1px;
+$breakpoint-lg-max: $breakpoint-xl-min - 1px;
+$breakpoint-xl-max: $breakpoint-xxl-min - 1px;
+
+$calcWidth: 100%;
+
+// === / VARIABLES ===
diff --git a/src/sass/Fonts.scss b/src/sass/Fonts.scss
new file mode 100644
index 0000000..4da094a
--- /dev/null
+++ b/src/sass/Fonts.scss
@@ -0,0 +1,4 @@
+@include font('Poppins', 'Poppins-Regular', '400', 'normal');
+@include font('Poppins', 'Poppins-Medium', '500', 'normal');
+@include font('Poppins', 'Poppins-SemiBold', '600', 'normal');
+@include font('Poppins', 'Poppins-Bold', '700', 'normal');
diff --git a/src/setupTests.ts b/src/setupTests.ts
new file mode 100644
index 0000000..74b1a27
--- /dev/null
+++ b/src/setupTests.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
diff --git a/src/shared/constants/routes.ts b/src/shared/constants/routes.ts
new file mode 100644
index 0000000..71cebcb
--- /dev/null
+++ b/src/shared/constants/routes.ts
@@ -0,0 +1,19 @@
+interface IPATH {
+  main: string;
+  boards: string;
+  board: string;
+  signIn: string;
+  signUp: string;
+  userProfile: string;
+  notFound: string;
+}
+
+export const PATHS: IPATH = {
+  main: '/',
+  boards: '/boards',
+  board: '/boards/:id',
+  signIn: '/signin',
+  signUp: '/signup',
+  userProfile: '/userprofile',
+  notFound: '*',
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a273b0c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}